/* site-coco-v3.css — getcocobank.com con el lenguaje de la app (3-nov-2026).
   Mismas reglas que app.getcocobank.com: fondo blanco, tinta verde-negra, Manrope en peso medio con tracking
   cerrado, cifras tabulares, un solo bloque oscuro de identidad por vista y el verde como acento (botón
   principal, tarjeta y estados activos). Conserva el vocabulario de clases de la v2 (celda, split, ui-card,
   faq, tarifas…) y suma las réplicas de pantallas de la app (.app-*, .tel, .identidad, .fila, .metodos). */

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{ margin:0; background:var(--fondo); color:var(--tinta); font-family:var(--sans); font-size:17px; line-height:1.6;
  font-weight:450; letter-spacing:-.006em; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; }
a{ color:inherit; text-decoration:none; }
img{ max-width:100%; }
button, input{ font:inherit; letter-spacing:inherit; }
::selection{ background:rgba(0,220,90,.28); }
:focus-visible{ outline:none; box-shadow:var(--foco); border-radius:8px; }
.wrap{ max-width:1200px; margin:0 auto; padding:0 24px; }
section{ padding:112px 0; }
.cifra, .ui-monto, .cifras b, .plan-precio, .monto{ font-variant-numeric:tabular-nums; font-feature-settings:"tnum" 1; }

h1{ font-weight:500; font-size:clamp(2.6rem,5.4vw,4.6rem); line-height:1.02; letter-spacing:-.045em; margin:0 auto 20px; color:var(--tinta); }
h2{ font-weight:500; font-size:clamp(2rem,3.7vw,3.1rem); line-height:1.07; letter-spacing:-.038em; margin:0 0 16px; color:var(--tinta); }
h3{ font-weight:550; font-size:1.3rem; line-height:1.25; letter-spacing:-.02em; margin:0 0 8px; }
.eyebrow{ display:inline-flex; align-items:center; gap:8px; font-size:14px; line-height:20px; font-weight:550; letter-spacing:-.005em;
  color:var(--tinta2); margin-bottom:14px; text-transform:none; }
.eyebrow::before{ content:""; width:7px; height:7px; border-radius:50%; background:var(--coco); box-shadow:0 0 0 3px var(--activo-fondo); }
.sub{ color:var(--tinta3); font-size:18.5px; line-height:1.55; }
p{ text-wrap:pretty; }
h1, h2, .cita blockquote{ text-wrap:balance; }

/* ————— botones (los de la app) ————— */
.btn-verde, .btn-claro, .btn-oscuro, .btn-linea{ display:inline-flex; align-items:center; justify-content:center; gap:8px; height:46px; padding:0 22px;
  border-radius:999px; border:0; font-size:15.5px; font-weight:600; letter-spacing:-.01em; cursor:pointer; white-space:nowrap;
  transition:background-color .16s ease-out, color .16s ease-out, transform .12s ease-out, box-shadow .16s ease-out; }
.btn-verde{ background:var(--coco); color:var(--sobre-coco); }
.btn-verde:hover{ background:var(--coco-hover); }
.btn-claro{ background:var(--suave); color:var(--tinta); }
.btn-claro:hover{ background:var(--suave2); }
.btn-oscuro{ background:var(--identidad); color:#fff; }
.btn-oscuro:hover{ background:#0E2A1A; }
.btn-linea{ background:#fff; color:var(--tinta); box-shadow:inset 0 0 0 1px var(--linea2); }
.btn-linea:hover{ background:var(--lateral); }
.btn-verde:active, .btn-claro:active, .btn-oscuro:active, .btn-linea:active{ transform:scale(.98); }
.btn-verde svg, .btn-claro svg, .btn-oscuro svg, .btn-linea svg{ width:16px; height:16px; }
.ico{ width:20px; height:20px; display:inline-block; flex:0 0 auto; }

@view-transition{ navigation:auto; }
@media (prefers-reduced-motion: no-preference){
  ::view-transition-old(root){ animation-duration:.14s; }
  ::view-transition-new(root){ animation-duration:.18s; }
}

/* ————— barra de navegación ————— */
.navbar{ position:sticky; top:0; z-index:50; background:rgba(255,255,255,.86); backdrop-filter:saturate(1.4) blur(14px);
  -webkit-backdrop-filter:saturate(1.4) blur(14px); border-bottom:1px solid var(--linea); }
nav{ display:flex; justify-content:space-between; align-items:center; height:68px; }
.wordmark{ display:inline-flex; align-items:center; line-height:0; }
.wordmark img{ height:24px; width:auto; display:block; }
.nav-links{ display:flex; gap:2px; align-items:center; font-size:15px; }
.nav-item{ position:relative; }
.nav-trigger, .nav-link-directo{ display:flex; align-items:center; gap:6px; background:none; border:0; color:var(--tinta2); font-weight:500;
  height:38px; padding:0 13px; border-radius:999px; cursor:pointer; transition:color .15s ease, background .15s ease; }
.nav-trigger svg{ transition:transform .18s ease; opacity:.7; }
.nav-item:hover .nav-trigger, .nav-item.abierto .nav-trigger, .nav-link-directo:hover{ color:var(--tinta); background:var(--suave); }
.nav-item.abierto .nav-trigger svg{ transform:rotate(180deg); }
.nav-item.actual .nav-trigger, .nav-link-directo.actual{ color:var(--tinta); }
.nav-entrar{ color:var(--tinta2); font-weight:500; height:38px; padding:0 13px; display:flex; align-items:center; border-radius:999px; margin-left:6px; }
.nav-entrar:hover{ background:var(--suave); color:var(--tinta); }
.nav-cta{ margin-left:8px; height:40px; padding:0 18px; font-size:14.5px; }
.nav-panel{ position:absolute; top:calc(100% + 12px); left:50%; transform:translateX(-50%) translateY(6px); background:#fff;
  border-radius:18px; padding:10px; box-shadow:var(--sombra-flotante), 0 30px 60px -20px rgba(10,30,18,.18); display:flex; gap:6px; min-width:340px;
  opacity:0; visibility:hidden; transition:opacity .18s ease, transform .2s var(--ease-entra), visibility 0s .18s; }
.nav-item.abierto .nav-panel{ opacity:1; visibility:visible; transform:translateX(-50%) translateY(0); transition-delay:0s; }
.nav-panel-ancha{ min-width:780px; }
.panel-col{ display:flex; flex-direction:column; min-width:240px; flex:1; }
.panel-head{ font-size:12.5px; font-weight:550; color:var(--tinta3); padding:10px 12px 4px; }
.panel-col > a{ display:grid; grid-template-columns:36px 1fr; column-gap:12px; align-items:start; padding:10px 12px; border-radius:12px; transition:background .15s ease; }
.panel-col > a:hover{ background:var(--lateral-2); }
.panel-col > a .pic{ grid-row:span 2; width:36px; height:36px; border-radius:10px; background:var(--suave); color:var(--tinta);
  display:grid; place-items:center; }
.panel-col > a .pic svg{ width:18px; height:18px; }
.panel-col > a b{ display:block; font-size:14.5px; font-weight:550; color:var(--tinta); line-height:20px; }
.panel-col > a span:not(.pic){ display:block; font-size:13px; color:var(--tinta3); line-height:18px; margin-top:2px; }
.panel-col > a:not(:has(.pic)){ grid-template-columns:1fr; }
.panel-destacada{ flex:0 0 250px; min-width:250px; }
.panel-card{ display:flex; flex-direction:column; gap:6px; background:var(--identidad); color:#fff; border-radius:14px; padding:18px; height:100%;
  position:relative; overflow:hidden; }
.panel-card::after{ content:""; position:absolute; right:-70px; bottom:-70px; width:200px; height:200px; border-radius:50%;
  border:28px solid rgba(0,220,90,.12); }
.panel-card .eyebrow{ color:var(--identidad-rotulo); margin:0; font-size:12.5px; }
.panel-card b{ font-size:18px; font-weight:550; letter-spacing:-.02em; line-height:1.25; }
.panel-card span:last-child{ font-size:13px; color:var(--identidad-rotulo); line-height:1.5; }
.panel-card .ir{ margin-top:auto; color:var(--coco); font-size:13.5px; font-weight:600; }
.nav-burger{ display:none; background:none; border:0; cursor:pointer; padding:10px; margin-right:-10px; }
.nav-burger span{ display:block; width:20px; height:1.6px; background:var(--tinta); margin:5px 0; border-radius:2px; transition:transform .2s ease, opacity .2s ease; }
.nav-burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(6.6px) rotate(45deg); }
.nav-burger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.nav-burger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-6.6px) rotate(-45deg); }

/* ————— píldora legal (fija abajo) ————— */
.pildora-legal{ position:fixed; left:50%; transform:translateX(-50%); bottom:16px; z-index:40; background:rgba(255,255,255,.94);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); color:var(--tinta3); font-size:12.5px; line-height:1.45;
  padding:9px 18px; border-radius:999px; max-width:min(calc(100vw - 32px), 60rem); text-align:center; box-shadow:var(--sombra-flotante); }
.pildora-legal a{ color:var(--tinta); text-decoration:underline; text-underline-offset:2px; }

/* ————— héroes ————— */
.hero-centro{ text-align:center; padding:96px 0 0; position:relative; overflow:hidden;
  background:radial-gradient(ellipse 60% 50% at 50% 100%, rgba(0,220,90,.09), transparent 70%), linear-gradient(180deg, #fff 0%, var(--lateral) 100%); }
.hero-centro h1{ max-width:15ch; }
.hero-centro .sub{ font-size:19px; max-width:36rem; margin:0 auto 32px; }
.hero-media{ margin-top:72px; position:relative; }
.hero-media > img{ width:min(100%,1120px); border-radius:16px 16px 0 0; display:block; margin:0 auto; box-shadow:var(--sombra-producto); }
.hero-borde{ border-bottom:1px solid var(--linea); }
.hero-centro .escala{ margin:0 auto; }

/* formulario de lista de espera: una píldora con el campo y el botón adentro */
form.lista{ display:flex; align-items:center; gap:6px; max-width:440px; margin:0 auto; padding:5px; background:#fff; border-radius:999px;
  box-shadow:inset 0 0 0 1px var(--linea2), 0 1px 2px rgba(20,40,30,.04), 0 10px 30px -14px rgba(10,30,18,.18); transition:box-shadow .16s ease-out; }
form.lista:focus-within{ box-shadow:inset 0 0 0 1px var(--coco-trazo), var(--foco); }
form.lista input{ flex:1; min-width:0; height:42px; border:0; background:transparent; color:var(--tinta); padding:0 8px 0 18px; font-size:16px; outline:none; }
form.lista input::placeholder{ color:var(--tinta4); }
form.lista button{ height:42px; padding:0 18px; font-size:15px; }
.resultado{ margin-top:14px; color:var(--positivo); font-weight:600; display:none; }
.resultado .pos{ font-size:1.4rem; }
.nota-fdic{ margin:16px auto 0; font-size:12.5px; line-height:1.5; color:var(--tinta3); max-width:34rem; }

/* ————— celdas ————— */
.grid-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:48px; }
.grid-4{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-top:48px; }
.celda{ background:#fff; border-radius:18px; padding:28px; box-shadow:inset 0 0 0 1px var(--linea); position:relative;
  transition:box-shadow .2s ease, transform .2s var(--ease-entra); }
a.celda{ display:block; }
a.celda:hover{ box-shadow:inset 0 0 0 1px var(--linea2), var(--sombra-flotante); transform:translateY(-2px); }
.celda .ic{ width:44px; height:44px; border-radius:12px; background:var(--suave); color:var(--tinta); display:grid; place-items:center; margin-bottom:22px; font-size:18px; }
.celda .ic svg{ width:22px; height:22px; }
.celda b{ display:block; font-size:17.5px; font-weight:550; letter-spacing:-.02em; margin-bottom:6px; line-height:1.3; }
.celda p{ margin:0; color:var(--tinta3); font-size:15.5px; line-height:1.55; }
a.celda .mas{ display:inline-flex; align-items:center; gap:6px; margin-top:18px; color:var(--tinta); font-weight:600; font-size:14.5px; }
a.celda .mas::after{ content:""; width:16px; height:16px; background:currentColor;
  -webkit-mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M5 12h14M13 6l6 6-6 6" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>') center/contain no-repeat; mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M5 12h14M13 6l6 6-6 6" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>') center/contain no-repeat; }
a.celda:hover .mas{ color:var(--positivo); }
.tinte, .tinte-2{ background:var(--lateral); border-top:1px solid var(--linea); border-bottom:1px solid var(--linea); }
.tinte + .tinte-2, .tinte-2 + .tinte, .tinte + .tinte, .tinte-2 + .tinte-2{ border-top:0; }

/* ————— split (pantalla + texto) ————— */
.split{ display:grid; grid-template-columns:1.08fr .92fr; gap:72px; align-items:center; }
.split + .split{ margin-top:120px; }
.split.invertida .split-media{ order:2; }
.split-texto h2{ max-width:28rem; }
.split-texto .raya{ border:0; border-top:1px solid var(--linea); margin:24px 0 20px; }
.flechas{ list-style:none; margin:0; padding:0; }
.flechas li{ position:relative; padding:9px 0 9px 32px; color:var(--tinta3); font-size:16px; line-height:1.55; }
.flechas li::before{ content:""; position:absolute; left:0; top:12px; width:20px; height:20px; border-radius:50%; background:var(--activo-fondo); }
.flechas li::after{ content:""; position:absolute; left:4px; top:16px; width:12px; height:12px; background:var(--positivo);
  -webkit-mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M5 12.5 10 17.5 19 7" fill="none" stroke="black" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"/></svg>') center/contain no-repeat; mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M5 12.5 10 17.5 19 7" fill="none" stroke="black" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"/></svg>') center/contain no-repeat; }
.flechas li b{ color:var(--tinta); font-weight:600; }
.split-media{ background:var(--lateral-2); border-radius:24px; padding:40px; position:relative; overflow:hidden; box-shadow:inset 0 0 0 1px var(--linea); }
.split-media::before{ content:""; position:absolute; inset:auto -20% -40% -20%; height:70%; background:radial-gradient(ellipse at 50% 100%, rgba(0,220,90,.10), transparent 70%); pointer-events:none; }
.split-media > *{ position:relative; }
.split-media img{ width:100%; height:auto; border-radius:12px; display:block; }
.split-media.movil img{ width:auto; max-height:520px; margin:0 auto; }

/* ————— tarjetas de UI (mini pantallas de la app) ————— */
.ui-card{ background:#fff; border-radius:16px; padding:20px 22px; box-shadow:var(--sombra-flotante); font-size:14px; line-height:20px; text-align:left; color:var(--tinta2); }
.ui-card + .ui-card{ margin-top:14px; }
.ui-head{ display:flex; justify-content:space-between; align-items:baseline; gap:12px; margin-bottom:10px; }
.ui-head b{ font-weight:550; font-size:15px; color:var(--tinta); letter-spacing:-.01em; }
.ui-head span{ font-size:12.5px; color:var(--tinta3); }
.ui-monto{ font-size:34px; line-height:1.15; font-weight:500; letter-spacing:-.035em; color:var(--tinta); margin:2px 0 8px; }
.ui-monto small{ font-size:.55em; color:var(--tinta4); letter-spacing:-.01em; }
.ui-fila{ display:flex; justify-content:space-between; align-items:center; gap:12px; padding:11px 0; border-top:1px solid var(--linea); color:var(--tinta3); }
.ui-fila:first-of-type{ border-top:0; }
.ui-fila b{ color:var(--tinta); font-weight:550; }
.ui-chip{ display:inline-flex; align-items:center; gap:6px; white-space:nowrap; background:var(--activo-fondo); color:var(--positivo); border-radius:999px;
  padding:2px 10px; font-size:12.5px; line-height:20px; font-weight:600; font-variant-numeric:tabular-nums; }
.ui-chip.neutro{ background:var(--suave); color:var(--tinta2); }
.ui-barra{ height:8px; border-radius:999px; background:var(--suave2); overflow:hidden; margin-top:10px; }
.ui-barra i{ display:block; height:100%; background:var(--coco); border-radius:999px; }
.ui-card .gratis{ color:var(--positivo) !important; font-weight:600 !important; }

/* ————— pestañas (filtros en píldora, como en la app) ————— */
.tabs{ margin-top:40px; }
.tab-botones{ display:inline-flex; gap:4px; flex-wrap:wrap; padding:4px; border-radius:999px; background:var(--suave); }
.tab-botones button{ background:none; border:0; height:38px; padding:0 18px; border-radius:999px; font-weight:550; font-size:14.5px; color:var(--tinta2);
  cursor:pointer; transition:background .16s ease-out, color .16s ease-out; }
.tab-botones button[aria-selected="true"]{ background:var(--identidad); color:#fff; }
.tab-botones button:hover:not([aria-selected="true"]){ color:var(--tinta); background:var(--suave2); }
.tab-panel{ display:none; padding-top:32px; }
.tab-panel.activo{ display:grid; grid-template-columns:1.05fr .95fr; gap:56px; align-items:center; }

/* ————— preguntas frecuentes ————— */
.faq{ max-width:52rem; margin:48px auto 0; border-top:1px solid var(--linea); }
.faq details{ border-bottom:1px solid var(--linea); }
.faq summary{ list-style:none; cursor:pointer; display:flex; justify-content:space-between; align-items:center; gap:16px; padding:22px 0;
  font-size:18px; font-weight:550; letter-spacing:-.02em; color:var(--tinta); }
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{ content:""; flex:0 0 auto; width:28px; height:28px; border-radius:50%; background:var(--suave) no-repeat center/14px;
  background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 5v14M5 12h14" fill="none" stroke="%23141A17" stroke-width="2" stroke-linecap="round"/></svg>');
  transition:transform .2s var(--ease-entra), background-color .16s ease; }
.faq details[open] summary::after{ transform:rotate(45deg); background-color:var(--activo-fondo); }
.faq .faq-cuerpo{ padding:0 48px 24px 0; color:var(--tinta3); font-size:16px; line-height:1.65; }
.faq .faq-cuerpo a{ color:var(--tinta); text-decoration:underline; text-underline-offset:2px; }

/* ————— cifras ————— */
.cifras .grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:0; }
.cifras .grid > div{ padding:8px 28px; border-left:1px solid var(--linea); }
.cifras .grid > div:first-child{ border-left:0; padding-left:0; }
.cifras b{ display:block; font-weight:500; font-size:clamp(2.2rem,3.6vw,3rem); letter-spacing:-.045em; line-height:1.1; color:var(--tinta); margin-bottom:8px; }
.cifras span{ font-size:14.5px; color:var(--tinta3); line-height:1.45; display:block; }

/* ————— cita ————— */
.cita{ text-align:center; }
.cita blockquote{ font-size:clamp(1.6rem,3vw,2.3rem); line-height:1.25; font-weight:500; letter-spacing:-.035em; max-width:48rem; margin:0 auto 20px; color:var(--tinta); }
.cita cite{ font-style:normal; color:var(--tinta3); font-size:15px; }

/* ————— precios ————— */
.plan-caja{ border-radius:24px; background:#fff; overflow:hidden; margin-top:48px; box-shadow:inset 0 0 0 1px var(--linea), var(--sombra-flotante); }
.plan-cabecera{ display:flex; justify-content:space-between; align-items:center; padding:16px 28px; border-bottom:1px solid var(--linea);
  font-size:13.5px; font-weight:550; color:var(--tinta3); background:var(--tabla-cabecera); }
.plan-cuerpo{ display:grid; grid-template-columns:1.1fr .9fr; }
.plan-col{ padding:36px 32px; }
.plan-col + .plan-col{ border-left:1px solid var(--linea); background:var(--lateral); }
.plan-nombre{ font-size:22px; font-weight:550; letter-spacing:-.025em; }
.plan-precio{ font-size:52px; font-weight:500; letter-spacing:-.05em; line-height:1.05; margin:10px 0 12px; }
.plan-precio small{ font-size:16px; color:var(--tinta3); letter-spacing:-.01em; font-weight:450; }
.check{ list-style:none; margin:20px 0 0; padding:0; }
.check li{ position:relative; padding:7px 0 7px 30px; color:var(--tinta2); font-size:15.5px; }
.check li::before{ content:""; position:absolute; left:0; top:10px; width:20px; height:20px; border-radius:50%; background:var(--activo-fondo); }
.check li::after{ content:""; position:absolute; left:4px; top:14px; width:12px; height:12px; background:var(--positivo);
  -webkit-mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M5 12.5 10 17.5 19 7" fill="none" stroke="black" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"/></svg>') center/contain no-repeat; mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M5 12.5 10 17.5 19 7" fill="none" stroke="black" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"/></svg>') center/contain no-repeat; }
.tarifas{ width:100%; border-collapse:separate; border-spacing:0; margin-top:48px; font-size:15.5px; border-radius:18px; overflow:hidden; box-shadow:inset 0 0 0 1px var(--linea); }
.tarifas caption{ text-align:left; font-size:24px; font-weight:550; letter-spacing:-.03em; padding-bottom:18px; }
.tarifas th{ text-align:left; font-size:13px; color:var(--tinta3); background:var(--tabla-cabecera); border-bottom:1px solid var(--linea); padding:12px 22px; font-weight:550; }
.tarifas td{ border-bottom:1px solid var(--linea); padding:15px 22px; color:var(--tinta2); font-variant-numeric:tabular-nums; }
.tarifas tr:last-child td{ border-bottom:0; }
.tarifas td:first-child{ color:var(--tinta); font-weight:500; }
.tarifas td:last-child, .tarifas th:last-child{ text-align:right; }
.tarifas .gratis{ color:var(--positivo); font-weight:600; }

/* ————— cierre (el bloque oscuro de identidad) + pie ————— */
.oscuro{ background:var(--fondo); color:var(--tinta); }
.cierre{ padding:24px 0 96px; }
.cierre .wrap > .bloque{ position:relative; overflow:hidden; text-align:center; background:var(--identidad); color:#fff; border-radius:28px;
  padding:88px 32px; box-shadow:inset 0 0 0 1px var(--identidad-borde); }
.cierre .bloque::before{ content:""; position:absolute; width:720px; height:720px; left:50%; top:-460px; transform:translateX(-50%); border-radius:50%;
  background:radial-gradient(circle, rgba(0,220,90,.20), transparent 62%); pointer-events:none; }
.cierre .bloque::after{ content:""; position:absolute; right:-140px; bottom:-200px; width:420px; height:420px; border-radius:50%;
  border:56px solid rgba(0,220,90,.07); pointer-events:none; }
.cierre .bloque > *{ position:relative; z-index:1; }
.cierre h2{ color:#fff; max-width:20ch; margin-left:auto; margin-right:auto; }
.cierre .sub{ color:var(--identidad-rotulo); max-width:34rem; margin:0 auto 32px; }
.cierre form.lista{ background:rgba(255,255,255,.06); box-shadow:inset 0 0 0 1px rgba(255,255,255,.14); }
.cierre form.lista input{ color:#fff; }
.cierre form.lista input::placeholder{ color:var(--identidad-rotulo); }
.cierre .resultado{ color:var(--coco); }
footer{ background:var(--lateral); border-top:1px solid var(--linea); padding:64px 0 96px; font-size:14px; color:var(--tinta3); }
.foot-cols{ display:grid; grid-template-columns:1.5fr repeat(4,1fr); gap:32px; padding-bottom:48px; }
.foot-marca .wordmark img{ height:26px; }
.foot-tag{ font-size:15px; color:var(--tinta2); margin:16px 0 10px; max-width:17rem; line-height:1.5; }
.foot-social a{ color:var(--tinta2); text-decoration:underline; text-underline-offset:2px; }
.foot-col{ display:flex; flex-direction:column; gap:10px; }
.foot-col b{ color:var(--tinta); font-size:14px; font-weight:600; margin-bottom:4px; }
.foot-col a{ color:var(--tinta3); font-size:14.5px; transition:color .15s ease; }
.foot-col a:hover{ color:var(--tinta); }
.foot-legal{ border-top:1px solid var(--linea); padding-top:32px; font-size:12.5px; color:var(--tinta3); }
.foot-legal p{ max-width:72rem; line-height:1.65; margin:0 0 12px; }
.foot-legal b{ color:var(--tinta2); font-weight:600; }
.foot-legal a{ color:var(--tinta2); text-decoration:underline; text-underline-offset:2px; }
.foot-copy{ margin-top:24px; }

/* ————— aparición al hacer scroll ————— */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .rev{ animation:revSube linear both; animation-timeline:view(); animation-range:entry 0% entry 28%; }
  }
}
@keyframes revSube{ from{ opacity:0; transform:translateY(18px); } to{ opacity:1; transform:none; } }

/* ============================================================================================
   RÉPLICAS DE LA APP (pantallas hechas en HTML con los mismos tokens: nítidas a cualquier tamaño)
   ============================================================================================ */

/* Escala: la pantalla se dibuja a su ancho real (data-ancho) y se reduce para caber; ver el script del pie. */
.escala{ position:relative; width:100%; overflow-x:clip; }
.escala > .lienzo{ transform-origin:top left; position:relative; }
.escala.lista{ overflow:visible; }
.escala.lista > .lienzo{ position:absolute; left:0; top:0; }

/* ventana de escritorio */
.app{ width:1180px; background:#fff; border-radius:16px; overflow:hidden; box-shadow:var(--sombra-producto); text-align:left;
  font-size:14px; line-height:20px; color:var(--tinta); letter-spacing:-.005em; }
.app-barra{ height:40px; display:flex; align-items:center; gap:8px; padding:0 16px; background:var(--lateral); border-bottom:1px solid var(--linea); }
.app-barra i{ width:11px; height:11px; border-radius:50%; background:rgba(20,40,30,.12); }
.app-barra .url{ margin:0 auto; height:24px; padding:0 14px; border-radius:999px; background:#fff; box-shadow:inset 0 0 0 1px var(--linea);
  display:flex; align-items:center; gap:6px; font-size:12px; color:var(--tinta3); transform:translateX(-24px); }
.app-barra .url svg{ width:11px; height:11px; }
.app-cuerpo{ display:grid; grid-template-columns:232px 1fr; min-height:640px; }
.app-lateral{ background:var(--lateral); border-right:1px solid var(--linea); padding:20px 14px; display:flex; flex-direction:column; gap:2px; }
.app-lateral .marca{ height:26px; margin:2px 8px 18px; }
.app-lateral .marca img{ height:22px; }
.app-empresa{ display:flex; align-items:center; gap:10px; padding:8px; margin-bottom:10px; border-bottom:1px solid var(--linea); padding-bottom:14px; }
.app-empresa .cuadro{ width:28px; height:28px; border-radius:7px; background:#fff; box-shadow:inset 0 0 0 1px var(--linea2); display:grid; place-items:center;
  font-size:10.5px; font-weight:650; color:var(--tinta2); }
.app-empresa b{ font-size:14px; font-weight:550; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.app-nav{ display:flex; align-items:center; gap:12px; height:38px; padding:0 12px; border-radius:10px; color:var(--tinta2); font-weight:500; }
.app-nav svg{ width:17px; height:17px; color:var(--tinta3); }
.app-nav.activo{ background:var(--suave2); color:var(--tinta); }
.app-nav.activo svg{ color:var(--tinta); }
.app-sep{ height:1px; background:var(--linea); margin:8px 4px; }
.app-main{ padding:0; display:flex; flex-direction:column; min-width:0; }
.app-top{ height:58px; display:flex; align-items:center; justify-content:space-between; padding:0 28px; border-bottom:1px solid var(--linea); }
.app-migas{ display:flex; align-items:center; gap:8px; color:var(--tinta3); font-size:14px; }
.app-migas .logo{ width:18px; height:18px; border-radius:5px; background:var(--coco); }
.app-migas b{ color:var(--tinta); font-weight:500; }
.app-acciones{ display:flex; align-items:center; gap:10px; color:var(--tinta2); }
.app-acciones .mover{ height:34px; padding:0 14px; border-radius:999px; background:var(--suave); display:flex; align-items:center; gap:8px; font-weight:500; color:var(--tinta); }
.app-acciones svg{ width:17px; height:17px; }
.app-acciones .circ{ width:34px; height:34px; border-radius:50%; display:grid; place-items:center; }
.avatar{ width:32px; height:32px; border-radius:50%; background:var(--suave2); display:grid; place-items:center; font-size:11.5px; font-weight:600; color:var(--tinta2); flex:0 0 auto; }
.app-contenido{ padding:28px 36px 36px; }
.app-saludo{ font-size:13.5px; color:var(--tinta3); margin:0 0 2px; }
.app-titulo{ font-size:26px; line-height:34px; font-weight:500; letter-spacing:-.03em; margin:0 0 20px; }
.app-rejilla{ display:grid; grid-template-columns:1.45fr 1fr; gap:16px; }
.app-rejilla.tres{ grid-template-columns:repeat(3,1fr); }

/* el bloque oscuro de identidad (saldo, tarjeta activa, total a pagar) */
.identidad{ background:var(--identidad); color:#fff; border-radius:16px; padding:22px 24px; box-shadow:inset 0 0 0 1px var(--identidad-borde); position:relative; overflow:hidden; }
.identidad .rotulo{ font-size:13px; color:var(--identidad-rotulo); display:flex; justify-content:space-between; }
.identidad .grande{ font-size:44px; line-height:52px; font-weight:500; letter-spacing:-.045em; margin:6px 0 4px; font-variant-numeric:tabular-nums; }
.identidad .grande small{ font-size:24px; color:rgba(255,255,255,.5); letter-spacing:-.02em; }
.identidad .detalle{ font-size:13px; color:var(--identidad-rotulo); }
.identidad svg.linea{ display:block; width:100%; height:96px; margin-top:14px; }
.identidad .pie{ display:flex; gap:22px; margin-top:12px; padding-top:14px; border-top:1px solid var(--identidad-linea); font-size:13.5px; color:#fff; font-variant-numeric:tabular-nums; }
.identidad .pie span{ color:var(--identidad-rotulo); margin-right:6px; }
.identidad .botones{ display:flex; gap:8px; margin-top:16px; }
.identidad .botones span{ height:34px; padding:0 14px; border-radius:999px; background:rgba(255,255,255,.08); display:inline-flex; align-items:center; gap:7px; font-size:13.5px; font-weight:500; }
.identidad .botones span.prim{ background:var(--coco); color:var(--sobre-coco); }
.identidad .botones svg{ width:15px; height:15px; }

/* panel blanco con filas */
.panel{ background:#fff; border-radius:16px; box-shadow:inset 0 0 0 1px var(--linea); padding:18px 20px; }
.panel-cab{ display:flex; justify-content:space-between; align-items:center; margin-bottom:6px; }
.panel-cab b{ font-size:15px; font-weight:550; letter-spacing:-.01em; }
.panel-cab span{ font-size:13px; color:var(--tinta3); display:flex; align-items:center; gap:4px; }
.panel-cab span svg{ width:14px; height:14px; }
.fila{ display:flex; align-items:center; gap:12px; padding:11px 0; border-top:1px solid var(--linea); }
.panel-cab + .fila{ border-top:0; }
.fila .circ{ width:34px; height:34px; border-radius:50%; background:var(--suave); display:grid; place-items:center; color:var(--tinta2); flex:0 0 auto; }
.fila .circ svg{ width:16px; height:16px; }
.fila .circ.verde{ background:var(--activo-fondo); color:var(--positivo); }
.fila .txt{ flex:1; min-width:0; }
.fila .txt b{ display:block; font-size:14px; font-weight:550; line-height:19px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.fila .txt span{ display:block; font-size:12.5px; color:var(--tinta3); line-height:17px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.fila .monto{ font-size:14px; font-weight:550; white-space:nowrap; text-align:right; }
.fila .monto small{ display:block; font-size:12px; font-weight:450; color:var(--tinta3); }
.fila .monto.pos{ color:var(--positivo); }
.fila .mini-tarjeta{ width:44px; height:28px; border-radius:4px; flex:0 0 auto; display:block; }
.estado{ display:inline-flex; align-items:center; gap:6px; font-size:12.5px; color:var(--tinta2); white-space:nowrap; }
.estado::before{ content:""; width:6px; height:6px; border-radius:50%; background:var(--coco-trazo); }
.estado.espera::before{ background:#C98A1B; }
.chip-activo{ display:inline-flex; align-items:center; height:22px; padding:0 9px; border-radius:999px; background:var(--activo-fondo); color:var(--positivo); font-size:12px; font-weight:600; }

/* arte de la tarjeta (el SVG de la app con los datos encima) */
.arte{ position:relative; width:100%; aspect-ratio:856/540; border-radius:5.5%/8.7%; box-shadow:0 1px 0 rgba(255,255,255,.4) inset, 0 18px 40px -12px rgba(0,80,30,.45), 0 4px 10px rgba(0,40,15,.12); }
.arte img{ display:block; width:100%; height:100%; border-radius:inherit; }
.arte .apodo{ position:absolute; right:7.5%; top:11%; max-width:55%; text-align:right; font-size:clamp(9px,.95cqw,12px); font-weight:650; letter-spacing:.08em;
  text-transform:uppercase; color:var(--sobre-coco); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.arte .titular{ position:absolute; left:7.5%; bottom:11%; color:var(--sobre-coco); }
.arte .titular span{ display:block; font-size:10.5px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; }
.arte .titular b{ display:block; font-size:14px; font-weight:550; margin-top:3px; font-variant-numeric:tabular-nums; }
.arte.grande .apodo{ font-size:14px; } .arte.grande .titular span{ font-size:12.5px; } .arte.grande .titular b{ font-size:17px; }
.arte.congelada img{ filter:grayscale(1) brightness(1.05); }
.arte .sello{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); display:inline-flex; align-items:center; gap:6px; height:30px; padding:0 12px;
  border-radius:999px; background:var(--identidad); color:#fff; font-size:13px; font-weight:500; white-space:nowrap; }
.arte .sello svg{ width:14px; height:14px; }

/* teléfono */
.tel{ width:300px; border-radius:48px; background:#0B100D; padding:10px; box-shadow:0 0 0 1px rgba(0,0,0,.6), inset 0 0 0 1.5px #2A322D,
  0 30px 60px -20px rgba(4,20,11,.45), 0 60px 100px -40px rgba(4,20,11,.35); position:relative; text-align:left; }
.tel-pantalla{ background:#fff; border-radius:39px; overflow:hidden; height:610px; position:relative; display:flex; flex-direction:column; font-size:13px; line-height:18px; color:var(--tinta); }
.tel-estado{ height:44px; display:flex; align-items:center; justify-content:space-between; padding:0 26px 0 30px; font-size:13px; font-weight:650; flex:0 0 auto; }
.tel-estado .isla{ width:92px; height:27px; border-radius:20px; background:#0B100D; position:absolute; left:50%; top:10px; transform:translateX(-50%); }
.tel-estado .ind{ display:flex; gap:5px; align-items:center; }
.tel-estado .ind i{ display:block; background:var(--tinta); border-radius:2px; }
.tel-cont{ padding:6px 18px 0; flex:1; overflow:hidden; }
.tel-cab{ display:flex; justify-content:space-between; align-items:center; margin:4px 0 14px; }
.tel-cab img{ height:16px; }
.tel-cab .der{ display:flex; gap:10px; align-items:center; color:var(--tinta2); }
.tel-cab .der svg{ width:17px; height:17px; }
.tel-cab .avatar{ width:28px; height:28px; font-size:10px; }
.tel .saludo{ font-size:12.5px; color:var(--tinta3); }
.tel .empresa{ font-size:20px; line-height:26px; font-weight:500; letter-spacing:-.03em; margin:2px 0 12px; }
.tel .identidad{ padding:16px; border-radius:16px; }
.tel .identidad .grande{ font-size:32px; line-height:38px; }
.tel .identidad .grande small{ font-size:17px; }
.tel .identidad svg.linea{ height:54px; margin-top:8px; }
.tel-acciones{ display:grid; grid-template-columns:repeat(4,1fr); gap:6px; margin:14px 0; text-align:center; font-size:11.5px; color:var(--tinta2); }
.tel-acciones .b{ width:44px; height:44px; border-radius:50%; background:var(--suave); display:grid; place-items:center; margin:0 auto 5px; color:var(--tinta); }
.tel-acciones .b.prim{ background:var(--coco); color:var(--sobre-coco); }
.tel-acciones svg{ width:18px; height:18px; }
.tel .fila{ padding:9px 0; }
.tel .fila .circ{ width:30px; height:30px; }
.tel .fila .txt b, .tel .fila .monto{ font-size:13px; }
.tel .fila .txt span{ font-size:11.5px; }
.tel-tabs{ height:72px; border-top:1px solid var(--linea); display:grid; grid-template-columns:repeat(5,1fr); align-items:start; padding-top:9px; background:rgba(255,255,255,.96);
  font-size:10.5px; color:var(--tinta3); text-align:center; flex:0 0 auto; }
.tel-tabs span{ display:flex; flex-direction:column; align-items:center; gap:3px; }
.tel-tabs svg{ width:20px; height:20px; }
.tel-tabs .activo{ color:var(--tinta); font-weight:600; }

/* paso de pago: elegir la vía */
.metodos{ display:flex; flex-direction:column; gap:8px; }
.metodo{ display:flex; align-items:center; gap:12px; padding:13px 14px; border-radius:12px; box-shadow:inset 0 0 0 1px var(--linea); background:#fff; }
.metodo .radio{ width:18px; height:18px; border-radius:50%; box-shadow:inset 0 0 0 1.5px var(--linea2); flex:0 0 auto; position:relative; }
.metodo.activo{ background:var(--via-activa-fondo); box-shadow:inset 0 0 0 1.5px var(--activo-borde); }
.metodo.activo .radio{ box-shadow:inset 0 0 0 5.5px var(--coco-trazo); }
.metodo .txt{ flex:1; }
.metodo .txt b{ display:block; font-size:14px; font-weight:550; line-height:19px; }
.metodo .txt span{ display:block; font-size:12.5px; color:var(--tinta3); line-height:17px; }
.metodo .costo{ font-size:13px; font-weight:600; color:var(--tinta2); white-space:nowrap; }
.metodo .costo.gratis{ color:var(--positivo); }
.paso{ font-size:12.5px; color:var(--tinta3); display:flex; justify-content:space-between; align-items:center; margin-bottom:12px; }
.paso .puntos{ display:flex; gap:4px; }
.paso .puntos i{ width:18px; height:4px; border-radius:2px; background:var(--suave2); }
.paso .puntos i.si{ background:var(--coco); }
.panel h4{ margin:0 0 4px; font-size:19px; font-weight:550; letter-spacing:-.025em; }
.panel .apoyo{ margin:0 0 14px; font-size:13px; color:var(--tinta3); }
.recibo{ border-radius:14px; overflow:hidden; box-shadow:inset 0 0 0 1px var(--linea); }
.recibo .identidad{ border-radius:0; padding:16px 18px; }
.recibo .identidad .grande{ font-size:32px; line-height:38px; margin:2px 0 0; }
.recibo .filas{ padding:4px 18px; background:#fff; }
.recibo .par{ display:flex; justify-content:space-between; gap:12px; padding:10px 0; border-top:1px solid var(--linea); font-size:13.5px; }
.recibo .par:first-child{ border-top:0; }
.recibo .par span{ color:var(--tinta3); }
.recibo .par b{ font-weight:550; text-align:right; }
.boton-app{ display:flex; align-items:center; justify-content:center; height:44px; border-radius:999px; background:var(--coco); color:var(--sobre-coco); font-weight:600; font-size:14.5px; margin-top:14px; }

/* controles de tarjeta */
.controles{ display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin-top:16px; }
.controles span{ display:flex; flex-direction:column; align-items:center; gap:6px; padding:12px 4px; border-radius:12px; background:var(--suave); font-size:12px; font-weight:550; color:var(--tinta2); }
.controles svg{ width:18px; height:18px; color:var(--tinta); }
.limite{ margin-top:14px; }
.limite .tope{ display:flex; justify-content:space-between; font-size:13px; color:var(--tinta3); margin-bottom:8px; }
.limite .tope b{ color:var(--tinta); font-weight:550; }

/* escena del héroe: ventana + teléfono + tarjeta */
.escena{ position:relative; max-width:1180px; margin:0 auto; }
.escena .tel-flota{ position:absolute; right:-28px; bottom:-34px; z-index:3; width:300px; }
.escena .arte-flota{ position:absolute; z-index:4; width:270px; left:-44px; bottom:64px; transform:rotate(-8deg); }
.escena .escala{ z-index:1; }
.escena .tel-flota.izq{ right:auto; left:-64px; }

/* ————— responsive ————— */
@media (max-width:1100px){
  .escena .tel-flota{ right:8px; transform:scale(.86); transform-origin:bottom right; }
  .escena .tel-flota.izq{ right:auto; left:8px; transform-origin:bottom left; }
  .escena .arte-flota{ left:8px; transform:rotate(-8deg) scale(.82); transform-origin:bottom left; }
}
@media (max-width:980px){
  .navbar{ backdrop-filter:none; -webkit-backdrop-filter:none; background:#fff; }
  .nav-burger{ display:block; }
  .nav-links{ display:none; position:fixed; inset:68px 0 0 0; background:#fff; overflow:auto; flex-direction:column; align-items:stretch; padding:8px 16px 40px; gap:0; }
  .nav-links.movil-abierto{ display:flex; }
  html.nav-bloquea-scroll{ overflow:hidden; }
  .nav-item{ border-bottom:1px solid var(--linea); }
  .nav-trigger{ width:100%; justify-content:space-between; height:56px; padding:0 4px; font-size:17px; border-radius:0; }
  .nav-item:hover .nav-trigger, .nav-item.abierto .nav-trigger{ background:none; }
  .nav-panel{ position:static; transform:none; opacity:1; visibility:hidden; display:none; box-shadow:none; padding:0 0 12px; min-width:0; flex-direction:column; }
  .nav-item.abierto .nav-panel{ display:flex; visibility:visible; transform:none; }
  .nav-panel-ancha{ min-width:0; }
  .panel-destacada{ flex:none; }
  .nav-link-directo, .nav-entrar{ height:56px; padding:0 4px; font-size:17px; border-bottom:1px solid var(--linea); border-radius:0; margin:0; }
  .nav-cta{ margin:20px 0 0; height:50px; font-size:16px; }
  .grid-3, .grid-4{ grid-template-columns:1fr; }
  .split, .tab-panel.activo{ grid-template-columns:1fr; gap:40px; }
  .split.invertida .split-media{ order:0; }
  .split + .split{ margin-top:80px; }
  .cifras .grid{ grid-template-columns:1fr 1fr; row-gap:36px; }
  .cifras .grid > div:nth-child(3){ border-left:0; padding-left:0; }
  .foot-cols{ grid-template-columns:1fr 1fr; }
  .foot-marca{ grid-column:1 / -1; }
  .plan-cuerpo{ grid-template-columns:1fr; }
  .plan-col + .plan-col{ border-left:0; border-top:1px solid var(--linea); }
}
@media (max-width:640px){
  body{ font-size:16px; }
  .wrap{ padding:0 16px; }
  section{ padding:80px 0; }
  .hero-centro{ padding-top:56px; }
  .hero-centro .sub, .sub{ font-size:17px; }
  .hero-media{ margin-top:48px; }
  form.lista{ flex-direction:column; border-radius:20px; padding:6px; }
  form.lista input{ width:100%; height:46px; padding:0 14px; text-align:center; }
  form.lista button{ width:100%; height:46px; }
  .split-media{ padding:20px; border-radius:20px; }
  .celda{ padding:24px; }
  .cierre .wrap > .bloque{ padding:64px 20px; border-radius:22px; }
  .cifras .grid{ grid-template-columns:1fr; }
  .cifras .grid > div{ border-left:0; padding:0; }
  .tarifas th, .tarifas td{ padding:12px 14px; }
  .faq summary{ font-size:16.5px; }
  .faq .faq-cuerpo{ padding-right:0; }
  .pildora-legal{ font-size:11.5px; padding:8px 14px; border-radius:16px; bottom:10px; }
  .escena .tel-flota{ display:none; }
  .escena .arte-flota{ left:-2px; bottom:-34px; transform:rotate(-8deg) scale(.5); transform-origin:bottom left; }
  .foot-cols{ grid-template-columns:1fr 1fr; gap:28px; }
  .tab-botones{ display:flex; border-radius:16px; }
}
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{ animation-duration:.01ms !important; transition-duration:.01ms !important; }
}

/* ————— réplicas de pantallas internas (cuentas, pagos, cobros, análisis) ————— */
.app-cab{ display:flex; justify-content:space-between; align-items:flex-end; gap:16px; margin-bottom:20px; }
.app-cab .app-titulo{ margin:0; }
.app-cab .acciones{ display:flex; gap:8px; }
.boton-prim, .boton-sec{ height:36px; padding:0 16px; border-radius:999px; font-weight:600; font-size:13.5px; display:inline-flex; align-items:center; gap:8px; white-space:nowrap; }
.boton-prim{ background:var(--coco); color:var(--sobre-coco); }
.boton-sec{ background:var(--suave); color:var(--tinta); font-weight:550; }
.boton-prim svg, .boton-sec svg{ width:16px; height:16px; }
.app-pildoras{ display:flex; gap:6px; margin:4px 0 12px; }
.app-pildoras span{ height:30px; padding:0 12px; border-radius:999px; box-shadow:inset 0 0 0 1px var(--linea); font-size:13px; color:var(--tinta2); display:inline-flex; align-items:center; gap:6px; background:#fff; }
.app-pildoras span.activo{ background:var(--tinta); color:#fff; box-shadow:none; }
.app-pildoras span i{ font-style:normal; font-size:11.5px; color:var(--tinta3); }
.app-pildoras span.activo i{ color:rgba(255,255,255,.62); }
.panel .dato{ font-size:13px; color:var(--tinta3); }
.panel .cifra-grande{ display:block; font-size:28px; line-height:34px; font-weight:500; letter-spacing:-.035em; color:var(--tinta); margin:10px 0 4px; font-variant-numeric:tabular-nums; }
.fila .via{ width:78px; flex:0 0 auto; text-align:center; font-size:12px; font-weight:550; color:var(--tinta2); background:var(--suave); height:22px; line-height:22px; border-radius:6px; }
.fila .col{ width:112px; flex:0 0 auto; }
.fila .col.ancha{ width:150px; }
.fila .copiar{ width:16px; height:16px; color:var(--tinta3); flex:0 0 auto; }
.estado.gris::before{ background:var(--tinta4); }
.estado.alerta::before{ background:#C2410C; }
.ui-barra.fina{ height:5px; margin:0 0 6px 46px; }
.barras{ display:flex; align-items:flex-end; gap:8px; height:92px; margin-top:16px; }
.barras i{ flex:1; border-radius:5px 5px 2px 2px; background:rgba(0,220,90,.24); }
.barras i.si{ background:var(--coco); }
.recibo .par .doble{ display:inline-flex; align-items:center; gap:8px; }
.recibo .par .doble svg{ width:14px; height:14px; color:var(--tinta3); }

/* teléfono solo, dentro de un split o en el hero */
.split-media .tel, .hero-media > .tel{ margin:0 auto; }
.tel .volver{ display:flex; align-items:center; gap:6px; font-size:13px; color:var(--tinta2); margin:4px 0 10px; }
.tel .volver svg{ width:16px; height:16px; }
.tel .titulo-tel{ font-size:20px; line-height:26px; font-weight:500; letter-spacing:-.03em; margin:0 0 12px; }
.tel .cambio{ display:inline-flex; padding:3px; border-radius:999px; background:var(--suave); margin:0 0 12px; font-size:12px; font-weight:550; }
.tel .cambio span{ padding:5px 12px; border-radius:999px; color:var(--tinta3); }
.tel .cambio span.activo{ background:#fff; color:var(--tinta); box-shadow:0 1px 2px rgba(20,40,30,.12); }
.tel .arte{ margin:4px 0 0; }
.tel .controles{ margin-top:12px; gap:6px; }
.tel .controles span{ padding:10px 2px; font-size:11px; }
.tel .controles svg{ width:16px; height:16px; }
.tel .limite{ margin-top:12px; }
.tel .limite .tope{ font-size:12px; margin-bottom:6px; }
.tel .metodo{ padding:11px 12px; }
.tel .metodo .txt b{ font-size:13px; }
.tel .metodo .txt span{ font-size:11.5px; }
.tel .recibo .par{ font-size:12.5px; padding:9px 0; }
.tel .recibo .filas{ padding:2px 14px; }
.tel .boton-app{ height:42px; font-size:13.5px; margin-top:14px; }
.tel .panel-mini{ font-size:12px; color:var(--tinta3); margin:0 0 8px; }

/* escena de la Reserve */
.reserva-v3{ display:flex; justify-content:center; align-items:center; gap:56px; margin-top:64px; }
.reserva-v3 > .arte{ width:440px; transform:rotate(-6deg); }
.reserva-v3 > .arte .apodo{ font-size:13px; }
.reserva-v3 > .arte .titular span{ font-size:12px; }
.reserva-v3 > .arte .titular b{ font-size:17px; }
@media (max-width:980px){
  .reserva-v3{ gap:32px; }
  .reserva-v3 .tel{ display:none; }
}
@media (max-width:640px){
  .reserva-v3{ margin-top:40px; }
  .reserva-v3 > .arte{ width:min(320px, 86vw); }
  .reserva-v3 > .arte .titular b{ font-size:14px; }
}

/* columnas de monto parejas en las réplicas (3-nov) */
.app .fila .monto{ min-width:104px; }