/* =========================================================
   Scana — sitio público
   Rediseño 27-oct-2026. Ajuste 29-oct-2026: escala tipográfica, anchos de texto
   y bloque de teléfonos reducido; sin cambios de color, fotos ni funciones.

   Regla de color: el verde de marca es ACENTO, no fondo.
   - Claro: blanco + gris neutro + tinta casi negra; un bloque negro
     y un bloque verde para el contraste.
   - Oscuro: negro neutro + grises neutros. Ningún fondo verde
     salvo el bloque de cierre (verde de marca con tinta negra).
   - El verde #1CCC7F nunca va como texto sobre blanco (2:1);
     para texto en claro se usa --accent-ink.
   ========================================================= */

:root{
  /* marca */
  --green:#1CCC7F;
  --green-deep:#12312B;
  --on-green:#06140f;

  /* tema claro */
  --bg:#ffffff;
  --surface:#f5f5f7;
  --surface-2:#e8e8ed;
  --ink:#0b0d0c;
  --muted:#4d524f;
  --accent-ink:#0a7a4a;
  --field:#0b0d0c;          /* bloque oscuro de contraste */
  --field-ink:#f5f5f7;
  --field-muted:#a8aca9;
  --nav-bg:rgba(255,255,255,.96);
  --ring:transparent;       /* borde del teléfono */

  --font:'Sora',system-ui,-apple-system,'Segoe UI',sans-serif;
  --step-small:clamp(.875rem,.8rem + .15vw,1.0625rem);    /* 14–17 */
  --step-body:clamp(1rem,.92rem + .2vw,1.125rem);           /* 16–18 */
  --step-lead:clamp(1.0625rem,.95rem + .25vw,1.25rem);     /* 17–20 */
  --step-head:clamp(1.875rem,.9rem + 2.1vw,3.5rem);        /* 30–56 */
  --step-display:clamp(2.6rem,1rem + 6.6vw,11rem);        /* 42–176 */

  --wrap:2040px;
  --gut:clamp(20px,5vw,128px);
  --sec:clamp(96px,12vw,200px);
  --r:14px;          /* radio máximo del manual de marca */
  --r-btn:10px;

  --ease:cubic-bezier(.22,1,.36,1);
}

:root[data-theme="dark"]{
  --bg:#000000;
  --surface:#111113;
  --surface-2:#1d1d20;
  --ink:#f5f5f7;
  --muted:#a1a1a6;
  --accent-ink:#2fe093;
  --field:#111113;
  --field-ink:#f5f5f7;
  --field-muted:#a1a1a6;
  --nav-bg:rgba(0,0,0,.94);
  --ring:#2c2c2e;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:72px}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:var(--font);font-weight:400;font-size:var(--step-body);line-height:1.55;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
html[data-anim-ready] body{transition:background-color .3s ease,color .3s ease}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit}
p{margin:0}
h1,h2,h3{margin:0;font-weight:600}
::selection{background:var(--green);color:var(--on-green)}
:focus-visible{outline:2px solid var(--green);outline-offset:3px;border-radius:6px}

.skip-link{position:absolute;left:-9999px;top:0;z-index:200;background:var(--green);color:var(--on-green);padding:10px 16px;border-radius:var(--r-btn);font-weight:600;font-size:var(--step-small)}
.skip-link:focus{left:12px;top:12px}
.u-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

.wrap{max-width:calc(var(--wrap) + var(--gut)*2);margin:0 auto;padding:0 var(--gut)}
.wrap--narrow{max-width:calc(820px + var(--gut)*2)}

/* ---------- tipografía ---------- */
.display{font-size:var(--step-display);line-height:.98;letter-spacing:-.045em;font-weight:600;text-wrap:balance}
.h2{font-size:var(--step-head);line-height:1.06;letter-spacing:-.03em;text-wrap:balance}
.h3{font-size:var(--step-lead);line-height:1.18;letter-spacing:-.02em}
.lead{font-size:var(--step-lead);line-height:1.45;letter-spacing:-.01em;color:var(--muted);font-weight:400;text-wrap:pretty}
.body{font-size:var(--step-body);line-height:1.55}
.small{font-size:var(--step-small);line-height:1.5;color:var(--muted)}
.muted{color:var(--muted)}
.text-link{font-weight:600;color:var(--accent-ink);display:inline-flex;align-items:center;gap:6px}
.text-link::after{content:"";width:7px;height:7px;border-right:2px solid currentColor;border-top:2px solid currentColor;transform:rotate(45deg);transition:transform .25s var(--ease)}
.text-link:hover::after{transform:translateX(3px) rotate(45deg)}

/* ---------- botones ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-weight:600;font-size:var(--step-small);line-height:1;
  padding:12px 18px;border-radius:var(--r-btn);border:0;cursor:pointer;white-space:nowrap;
  transition:transform .2s var(--ease),background-color .2s ease,opacity .2s ease;
}
.btn:active{transform:scale(.97)}
.btn--green{background:var(--green);color:var(--on-green)}
.btn--green:hover{background:#34d98f}
.btn--ink{background:var(--ink);color:var(--bg)}
.btn--ink:hover{opacity:.86}
.btn--lg{font-size:var(--step-body);padding:18px 26px}

/* ---------- insignias de tiendas ---------- */
.badges{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.badge{
  display:inline-flex;align-items:center;gap:10px;height:54px;padding:0 18px 0 14px;
  background:#000;color:#fff;border-radius:10px;
  border:1px solid #a6a6a6; /* borde oficial de la insignia */
  transition:transform .2s var(--ease);
}
a.badge[href]:hover{transform:translateY(-2px)}
.badge svg{flex-shrink:0}
.badge__txt{display:flex;flex-direction:column;line-height:1.05}
.badge__txt small{font-size:11px;font-weight:400;letter-spacing:.01em}
.badge__txt strong{font-size:21px;font-weight:600;letter-spacing:-.02em}
.badge--play .badge__txt small{text-transform:uppercase;font-size:10.5px;letter-spacing:.04em}

/* ---------- NAV ---------- */
.nav{position:sticky;top:0;z-index:100;background:var(--nav-bg)}
.nav__in{max-width:calc(var(--wrap) + var(--gut)*2);margin:0 auto;padding:12px var(--gut);display:flex;align-items:center;justify-content:space-between;gap:20px}
.nav__logo{display:flex;align-items:center;flex-shrink:0}
.nav__logo g{fill:var(--ink)}
.nav__links{display:flex;align-items:center;gap:4px}
.nav__links a{font-size:var(--step-small);color:var(--muted);padding:8px 12px;border-radius:8px;transition:color .2s ease}
.nav__links a:hover,.nav__links a[aria-current]{color:var(--ink)}
.nav__right{display:flex;align-items:center;gap:8px}
.icon-btn{
  width:40px;height:40px;display:inline-flex;align-items:center;justify-content:center;
  background:var(--surface);border:0;border-radius:var(--r-btn);cursor:pointer;color:var(--ink);
  transition:background-color .2s ease,transform .2s var(--ease);
}
.icon-btn:hover{background:var(--surface-2)}
.icon-btn:active{transform:scale(.94)}
:root[data-theme="light"] .icon-sun{display:none}
:root[data-theme="dark"] .icon-moon{display:none}
.nav__menu-btn{display:none;padding:0 14px;width:auto;font-size:var(--step-small);font-weight:500}
.nav__mobile{display:none}
@media (max-width:900px){
  .nav__links{display:none}
  .js .nav__menu-btn{display:inline-flex}
  .nav__mobile:not([hidden]){display:flex;flex-direction:column;padding:8px var(--gut) 24px;max-height:calc(100svh - 64px);overflow-y:auto;background:var(--bg)}
  .nav__mobile a:not(.btn){font-size:1.25rem;font-weight:600;letter-spacing:-.02em;padding:12px 0}
  .nav__mobile a[aria-current]{color:var(--accent-ink)}
  .nav__mobile .btn{margin-top:16px;align-self:flex-start}
}
@media (max-width:520px){.nav__cta{display:none}}

/* =========================================================
   INICIO
   ========================================================= */

/* ---------- hero ----------
   Texto a la izquierda, mosaico de fotos a la derecha; cabe en una pantalla.
   Cada foto lleva su ticket y el estado de la factura (app.js los va rotando). */
.hero{padding:clamp(20px,2.4vw,48px) 0 clamp(40px,4vw,80px)}
.hero__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:clamp(28px,3.5vw,96px);align-items:center}
.hero .display{font-size:clamp(2.6rem,4.9vw,7.3rem)}
.line{display:block}
.hero__sub{max-width:30ch;margin-top:clamp(16px,1.6vw,32px);color:var(--muted);font-size:var(--step-lead);line-height:1.45;text-wrap:pretty}
.hero__actions{display:flex;flex-direction:column;align-items:flex-start;gap:18px;margin-top:clamp(24px,2.4vw,44px)}
@media (min-width:2100px){.badges{zoom:1.2}.nav__logo svg{zoom:1.2}}

.mosaic{display:grid;grid-template-columns:1.15fr 1fr 1fr;grid-template-rows:1fr 1fr;gap:clamp(8px,.8vw,16px);height:clamp(520px,calc(100svh - 150px),1100px)}
.mo{position:relative;margin:0;overflow:hidden;border-radius:var(--r);background:var(--surface);min-height:0}
.mo img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 1.2s var(--ease);scale:1.14}
.mo:hover img{transform:scale(1.04)}
.mo--a{grid-column:1;grid-row:1 / 3}
.mo--b{grid-column:2;grid-row:1}
.mo--c{grid-column:3;grid-row:1}
.mo--d{grid-column:2;grid-row:2;background:var(--green);color:var(--on-green);display:flex;flex-direction:column;justify-content:space-between;padding:clamp(16px,1.6vw,32px)}
.mo--d p{font-size:clamp(1.3rem,.5rem + 1.25vw,2.6rem);font-weight:600;letter-spacing:-.035em;line-height:1.05}
.mo--e{grid-column:3;grid-row:2}
.mo--a img{object-position:60% 50%}
.mo--b img{object-position:55% 62%}

.chip-t{
  position:absolute;left:clamp(8px,.8vw,14px);bottom:clamp(8px,.8vw,14px);max-width:calc(100% - 16px);
  background:rgba(255,255,255,.97);color:#0b0d0c;border-radius:12px;padding:10px 12px;
  display:grid;grid-template-columns:minmax(0,1fr);justify-items:start;gap:3px;
  box-shadow:0 10px 30px -10px rgba(0,0,0,.45); /* flota sobre la foto */
  font-size:13px;line-height:1.25;
}
.chip-t__k{color:#4d524f;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.chip-t b{font-size:clamp(15px,.6rem + .5vw,19px);font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.chip-t__s{justify-self:start;font-weight:600;font-size:13px;padding:3px 8px;border-radius:6px;background:#d6f6e7;color:#075a36;white-space:nowrap;transition:background-color .3s ease,color .3s ease}
.chip-t[data-state="leyendo"] .chip-t__s{background:#ececef;color:#3a3d3b}
.chip-t[data-state="tramite"] .chip-t__s{background:#fff1cc;color:#6b4800}

@media (max-width:1000px){
  .hero__grid{grid-template-columns:1fr}
  .hero .display{font-size:clamp(2.6rem,9vw,6.5rem)}
  .mosaic{height:auto;grid-template-columns:1fr 1fr;grid-template-rows:repeat(2,clamp(170px,30vw,300px)) clamp(150px,24vw,240px)}
  .mo--a{grid-column:1;grid-row:1 / 3}
  .mo--b{grid-column:2;grid-row:1}
  .mo--c{grid-column:2;grid-row:2}
  .mo--d{grid-column:1;grid-row:3}
  .mo--e{grid-column:2;grid-row:3}
}
@media (max-width:560px){
  .badge{height:48px;padding:0 14px 0 11px;gap:8px}
  .badge svg{width:21px;height:22px}
  .badge__txt strong{font-size:17.5px}
  .badge__txt small{font-size:10px}
  .badge--play .badge__txt small{font-size:9.5px}
  .chip-t{padding:8px 10px}
  .chip-t__k{font-size:12px}
}

/* ---------- teléfono (fragmento de la app, siempre en su tema claro) ---------- */
.phone{
  --app-ink:#12312B;--app-muted:#56685f;--app-bg:#ffffff;--app-surface:#f3f8f5;--app-line:#e3ede8;
  width:300px;height:620px;flex-shrink:0;
  background:#0b0d0c;border-radius:50px;padding:11px;
  box-shadow:0 0 0 1.5px var(--ring),0 40px 80px -30px rgba(0,0,0,.45);
  position:relative;z-index:2;
}
.phone__screen{
  width:100%;height:100%;border-radius:40px;background:var(--app-bg);color:var(--app-ink);
  overflow:hidden;display:flex;flex-direction:column;position:relative;
  font-size:13px;line-height:1.3;text-align:left;
}
.ph-bar{display:flex;align-items:center;justify-content:space-between;padding:14px 26px 6px;font-size:13px;font-weight:600}
.ph-island{width:86px;height:24px;background:#0b0d0c;border-radius:14px}
.ph-bar__r{display:flex;gap:5px;align-items:center}
.ph-body{flex:1;display:flex;flex-direction:column;gap:12px;padding:10px 16px 12px;min-height:0}
.ph-head{display:flex;align-items:center;justify-content:space-between}
.ph-head strong{font-size:17px;letter-spacing:-.02em}
.ph-head span{font-size:12px;color:var(--app-muted)}
.ph-chip{font-size:12px;font-weight:600;padding:5px 9px;border-radius:7px;background:var(--app-surface)}
.ph-total{background:var(--app-ink);color:#f3f8f5;border-radius:12px;padding:14px}
.ph-total span{font-size:12px;color:rgba(243,248,245,.75)}
.ph-total b{display:block;font-size:28px;letter-spacing:-.03em;line-height:1.1;margin:2px 0 4px}
.ph-total em{font-style:normal;font-size:12px;font-weight:600;color:var(--green)}
.ph-list{display:flex;flex-direction:column;gap:6px}
.ph-list__h{display:flex;justify-content:space-between;font-size:12px;font-weight:600;color:var(--app-muted);padding:0 2px}
.ph-row{display:flex;align-items:center;gap:10px;background:var(--app-surface);border-radius:10px;padding:9px 10px}
.ph-ico{width:30px;height:30px;border-radius:8px;background:#fff;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:12px;font-weight:700;color:var(--app-ink)}
.ph-row__t{flex:1;min-width:0;display:flex;flex-direction:column}
.ph-row__t b{font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ph-row__t small{font-size:11.5px;color:var(--app-muted)}
.ph-row__r{text-align:right;display:flex;flex-direction:column;align-items:flex-end;gap:2px}
.ph-row__r b{font-size:13px}
.ph-st{font-size:11px;font-weight:600;padding:2px 6px;border-radius:5px;background:rgba(28,204,127,.18);color:#0a6a40}
.ph-st--wait{background:#fff3d6;color:#7a5200}
.ph-tabs{margin:auto 14px 14px;background:var(--app-surface);border-radius:14px;padding:6px;display:flex;align-items:center;justify-content:space-around}
.ph-tab{width:38px;height:34px;display:flex;align-items:center;justify-content:center;color:var(--app-muted)}
.ph-scan{display:flex;align-items:center;gap:6px;background:var(--green);color:var(--on-green);font-weight:600;font-size:12px;padding:9px 14px;border-radius:10px}

/* pantallas de los pasos */
/* pantalla de cámara: aviso arriba, visor al centro, barra con el disparador abajo (nada se encima) */
.phone__screen > .scr{display:flex;flex-direction:column;height:100%}
.scr--cam{background:#141716;color:#fff}
.ph-cam__top{color:#fff}
.ph-cam{flex:1;min-height:0;display:flex;flex-direction:column;background:#141716}
.ph-cam__hint{text-align:center;color:#fff;font-size:13px;font-weight:600;padding:10px 12px 0}
.ph-cam__view{flex:1;min-height:0;position:relative;display:flex;align-items:center;justify-content:center;overflow:hidden}
.ph-cam .ticket{transform:scale(.68) rotate(-2deg);flex-shrink:0}
.ph-cam__frame{position:absolute;inset:7% 11%;container-type:size}
.ph-cam__frame i{position:absolute;width:26px;height:26px;border-color:var(--green);border-style:solid;border-width:0}
.ph-cam__frame i:nth-child(1){top:0;left:0;border-top-width:3px;border-left-width:3px;border-top-left-radius:8px}
.ph-cam__frame i:nth-child(2){top:0;right:0;border-top-width:3px;border-right-width:3px;border-top-right-radius:8px}
.ph-cam__frame i:nth-child(3){bottom:0;left:0;border-bottom-width:3px;border-left-width:3px;border-bottom-left-radius:8px}
.ph-cam__frame i:nth-child(4){bottom:0;right:0;border-bottom-width:3px;border-right-width:3px;border-bottom-right-radius:8px}
.ph-cam__line{position:absolute;left:8px;right:8px;top:0;height:2px;background:var(--green);animation:scan 2.6s var(--ease) infinite alternate}
@keyframes scan{from{transform:translateY(0)}to{transform:translateY(calc(100cqh - 2px))}}
.ph-cam__bar{flex:0 0 112px;display:flex;align-items:center;justify-content:center;background:#0b0d0c}
.ph-cam__shutter{width:62px;height:62px;border-radius:50%;background:#fff;box-shadow:0 0 0 5px rgba(255,255,255,.28)}

.ph-steps{display:flex;flex-direction:column;gap:8px;margin-top:4px}
.ph-step{display:flex;align-items:center;gap:10px;background:var(--app-surface);border-radius:10px;padding:12px;font-size:13px;font-weight:500}
.ph-step .dot{width:22px;height:22px;border-radius:50%;background:var(--green);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.ph-step--now .dot{background:transparent;border:2.5px solid var(--app-line);border-top-color:var(--green);animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.ph-step small{display:block;font-size:11.5px;color:var(--app-muted);font-weight:400}
.ph-title{font-size:22px;letter-spacing:-.03em;line-height:1.15}

.ph-done{background:var(--green);color:var(--on-green);border-radius:14px;padding:16px}
.ph-done span{font-size:12px;font-weight:600}
.ph-done b{display:block;font-size:30px;letter-spacing:-.03em;margin:6px 0 2px}
.ph-done small{font-size:12px}
.ph-files{display:flex;gap:8px}
.ph-file{flex:1;background:var(--app-surface);border-radius:10px;padding:12px;font-size:12px;color:var(--app-muted)}
.ph-file b{display:block;font-size:14px;color:var(--app-ink)}
.ph-mailnote{font-size:12.5px;color:var(--app-muted);background:var(--app-surface);border-radius:10px;padding:12px}
.ph-mailnote b{color:var(--app-ink)}

/* ---------- ticket de papel (el objeto) ---------- */
.ticket{
  width:230px;background:#fbfbf7;color:#1d1f1e;padding:20px 18px 30px;
  font-family:ui-monospace,'SF Mono',Menlo,Consolas,'Liberation Mono',monospace; /* taste-skill-ignore: tipografía de ticket térmico */
  font-size:12px;line-height:1.45;text-align:left;
  clip-path:polygon(0 0,100% 0,100% 100%,95.833% calc(100% - 9px),91.667% 100%,87.5% calc(100% - 9px),83.333% 100%,79.167% calc(100% - 9px),75% 100%,70.833% calc(100% - 9px),66.667% 100%,62.5% calc(100% - 9px),58.333% 100%,54.167% calc(100% - 9px),50% 100%,45.833% calc(100% - 9px),41.667% 100%,37.5% calc(100% - 9px),33.333% 100%,29.167% calc(100% - 9px),25% 100%,20.833% calc(100% - 9px),16.667% 100%,12.5% calc(100% - 9px),8.333% 100%,4.167% calc(100% - 9px),0 100%);
  filter:drop-shadow(0 18px 24px rgba(0,0,0,.16));
}
.ticket__name{text-align:center;font-weight:700;font-size:15px;letter-spacing:.06em}
.ticket__c{text-align:center;color:#55595a}
.ticket__sep{border-top:2px dashed #c9cbc6;margin:9px 0}
.ticket__ln{display:flex;justify-content:space-between;gap:8px}
.ticket__tot{display:flex;justify-content:space-between;font-weight:700;font-size:15px}
.ticket__foot{margin-top:8px;text-align:center;color:#55595a}
.ticket__foot b{color:#1d1f1e}

/* ---------- antes / con Scana ----------
   Dos fotos a sangre. La de "antes" va desaturada: el contraste cuenta la historia. */
.versus{display:grid;grid-template-columns:1fr 1fr;min-height:min(60svh,560px)}
.vs{position:relative;overflow:hidden;display:flex;align-items:flex-end;min-height:380px;background:#111}
.vs img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;scale:1.06}
.vs{will-change:clip-path}
.vs--antes img{filter:grayscale(1) contrast(1.05) brightness(.9);object-position:70% 50%}
.vs--ahora img{object-position:50% 35%}
.vs::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.82) 0%,rgba(0,0,0,.35) 45%,rgba(0,0,0,0) 70%)} /* taste-skill-ignore: velo para leer texto sobre foto */
.vs__txt{position:relative;z-index:1;padding:clamp(28px,4vw,80px);color:#fff;max-width:520px}
.vs__t{font-size:clamp(1.625rem,1rem + 1.3vw,2.75rem);line-height:1.05;letter-spacing:-.03em;text-wrap:balance}
.vs__list{list-style:none;padding:0;margin:clamp(12px,1.2vw,20px) 0 0;display:grid;gap:6px;font-size:var(--step-lead);line-height:1.35}
.vs__list li{display:flex;gap:12px;align-items:baseline}
.vs__list li::before{content:"";flex-shrink:0;width:10px;height:10px;border-radius:50%;transform:translateY(-2px)}
.vs--antes .vs__list li::before{background:#8a8f8c}
.vs--antes .vs__list{color:#d4d6d5}
.vs--ahora .vs__list li::before{background:var(--green)}
@media (max-width:900px){.versus{grid-template-columns:1fr}.vs{min-height:min(52svh,420px)}}

/* ---------- cómo funciona (tres pantallas) ---------- */
.how2{padding:var(--sec) 0}
.how2__grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(32px,5vw,96px);align-items:center}
.how2__copy .lead{margin-top:clamp(14px,1.4vw,24px);max-width:26ch}
.how2__note{margin-top:clamp(20px,2vw,32px);max-width:30ch}
.how2__shot{height:clamp(420px,52svh,640px);overflow:hidden;background:var(--surface);border-radius:var(--r);display:flex;justify-content:center;align-items:flex-start;gap:clamp(16px,2.4vw,40px);padding-top:clamp(28px,3vw,56px)}
.how2__shot .phone{zoom:var(--pz,.92);box-shadow:0 0 0 1.5px var(--ring)}
.how2__shot .phone + .phone{margin-top:clamp(40px,5vw,80px)}
@media (min-width:1700px){.how2__shot{--pz:1.1}}
@media (min-width:2100px){.how2__shot{--pz:1.3}}
@media (max-width:900px){.how2__grid{grid-template-columns:1fr}.how2__shot{--pz:.8;height:420px}}
@media (max-width:560px){.how2__shot{--pz:.6;gap:0;height:380px;padding-top:24px}.how2__shot .phone + .phone{margin-left:-36px;margin-top:48px}}
@media (max-width:360px){.how2__shot{--pz:.5;height:340px}}

/* ---------- planes (con calculadora) ---------- */
.price{background:var(--surface);padding:var(--sec) 0}
.price__grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(40px,6vw,96px);align-items:center;margin-top:clamp(40px,5vw,64px)}
.calc label{display:block;font-weight:600;font-size:var(--step-lead);letter-spacing:-.02em}
.calc__val{display:flex;align-items:baseline;gap:10px;margin:14px 0 4px}
.calc__val output{font-size:clamp(2.4rem,1.76rem + 2.08vw,4.8rem);font-weight:600;letter-spacing:-.06em;line-height:.9;font-variant-numeric:tabular-nums}
.calc__val span{color:var(--muted);font-weight:500}
.range{--fill:7%;width:100%;-webkit-appearance:none;appearance:none;background:transparent;height:44px;cursor:pointer;margin:8px 0 0}
.range::-webkit-slider-runnable-track{height:8px;border-radius:4px;background:linear-gradient(to right,var(--green) var(--fill,7%),var(--surface-2) var(--fill,7%))} /* taste-skill-ignore: relleno de progreso, corte duro */
.range::-moz-range-track{height:8px;border-radius:4px;background:var(--surface-2)}
.range::-moz-range-progress{height:8px;border-radius:4px;background:var(--green)}
.range::-webkit-slider-thumb{-webkit-appearance:none;width:30px;height:30px;border-radius:50%;background:var(--ink);margin-top:-11px;border:0;transition:transform .2s var(--ease)}
.range::-moz-range-thumb{width:30px;height:30px;border-radius:50%;background:var(--ink);border:0}
.range:active::-webkit-slider-thumb{transform:scale(1.15)}
.calc__marks{display:flex;justify-content:space-between;font-size:var(--step-small);color:var(--muted)}
.calc__note{margin-top:24px;color:var(--muted);max-width:36ch}

/* el boleto */
.pass{
  --cut:var(--surface);
  position:relative;display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);
  background:var(--bg);border-radius:var(--r);min-height:320px;
}
:root[data-theme="dark"] .pass{background:var(--surface-2)}
.pass::before,.pass::after{content:"";position:absolute;left:calc(54.5% - 15px);width:30px;height:30px;border-radius:50%;background:var(--cut)}
.pass::before{top:-15px}.pass::after{bottom:-15px}
.pass__main{padding:clamp(24px,3vw,40px);display:flex;flex-direction:column;gap:14px}
.pass__plan{font-size:clamp(1.75rem,1.2rem + 1.4vw,3rem);line-height:1;letter-spacing:-.035em}
.pass__info{list-style:none;margin:auto 0 0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:10px 20px}
.pass__info li{font-size:var(--step-small);color:var(--muted)}
.pass__info b{display:block;color:var(--ink);font-size:var(--step-body);font-weight:600;font-variant-numeric:tabular-nums}
.pass__stub{border-left:6px dotted var(--cut);padding:clamp(24px,3vw,40px) clamp(18px,2vw,28px);display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;gap:6px}
.pass__price{font-size:clamp(2rem,1.44rem + 1.76vw,4rem);font-weight:600;letter-spacing:-.05em;line-height:1;font-variant-numeric:tabular-nums}
.pass__per{color:var(--muted);font-size:var(--step-small)}
.pass__stub .btn{margin-top:18px;width:100%;padding-left:12px;padding-right:12px}
.pass [data-anim]{transition:opacity .25s ease}
.pass.is-swapping [data-anim]{opacity:.2}
@media (max-width:900px){.price__grid{grid-template-columns:1fr}}
@media (max-width:560px){
  .pass{grid-template-columns:1fr}
  .pass::before,.pass::after{display:none}
  .pass__stub{border-left:0;border-top:6px dotted var(--cut)}
}
/* ---------- cierre verde ---------- */
.close{background:var(--green);color:var(--on-green);padding:clamp(72px,8vw,150px) 0 clamp(20px,2vw,40px)}
.close__row{display:grid;grid-template-columns:minmax(0,8fr) minmax(0,4fr);gap:clamp(24px,4vw,96px);align-items:end}
.close__title{font-size:clamp(2rem,1rem + 2.8vw,5rem);line-height:.98;letter-spacing:-.045em;text-wrap:balance}
.close__cta{display:flex;flex-direction:column;gap:20px;align-items:flex-start}
.close__cta p{font-size:var(--step-lead);line-height:1.4;max-width:30ch;font-weight:500;text-wrap:pretty}
.close .badge{border-color:#000}
.close .text-link{color:var(--on-green)}
.strip{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(8px,.8vw,16px);margin-top:clamp(40px,5vw,96px)}
.strip figure{margin:0;position:relative;aspect-ratio:4 / 5;overflow:hidden;border-radius:var(--r);background:#0e3d2a}
.strip img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 1.2s var(--ease)}
.strip figure:hover img{transform:scale(1.04)}
.strip figcaption{position:absolute;left:12px;bottom:12px;background:rgba(6,20,15,.86);color:#fff;font-size:14px;font-weight:600;padding:6px 10px;border-radius:8px}
@media (max-width:900px){.close__row{grid-template-columns:1fr}}
@media (max-width:700px){
  .strip{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:62%;overflow-x:auto;scroll-snap-type:x mandatory;margin-right:calc(var(--gut) * -1);padding-right:var(--gut);scrollbar-width:none}
  .strip::-webkit-scrollbar{display:none}
  .strip figure{scroll-snap-align:start}
}

/* ---------- pie (sin logo gigante) ---------- */
.foot{background:var(--bg);padding:clamp(48px,5vw,88px) 0 32px}
.foot__row{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:40px}
.foot__brand{display:flex;flex-direction:column;align-items:flex-start;gap:12px}
.foot__brand p{color:var(--muted)}
.foot__mail{font-weight:600;color:var(--accent-ink)}
.foot__cols{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.foot__cols b{display:block;font-size:var(--step-small);margin-bottom:12px}
.foot__cols a{display:block;font-size:var(--step-small);color:var(--muted);padding:4px 0;transition:color .2s ease}
.foot__cols a:hover{color:var(--ink)}
.foot__legal{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;margin-top:clamp(40px,4vw,72px);font-size:var(--step-small);color:var(--muted)}
.foot__legal span:last-child{max-width:60ch}
@media (max-width:760px){.foot__row{grid-template-columns:1fr}.foot__cols{grid-template-columns:1fr 1fr}}

/* encabezado con foto en páginas interiores */
.page-hero--photo .wrap{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:clamp(28px,4vw,96px);align-items:center}
.page-hero__img{margin:0;border-radius:var(--r);overflow:hidden;aspect-ratio:5 / 4;background:var(--surface)}
.page-hero__img img{width:100%;height:100%;object-fit:cover;display:block}
@media (max-width:900px){.page-hero--photo .wrap{grid-template-columns:1fr}.page-hero__img{aspect-ratio:16 / 10}}

/* =========================================================
   PÁGINAS INTERIORES
   ========================================================= */
.page-hero{padding:clamp(64px,9vw,140px) 0 clamp(48px,6vw,96px)}
.page-hero .display{max-width:20ch;font-size:clamp(2.6rem,4.9vw,7.3rem)}
.page-hero .lead{margin-top:24px;max-width:40ch}
.sec{padding:var(--sec) 0}
.sec--surface{background:var(--surface)}
.sec--tight{padding-top:0}

.split{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(32px,6vw,96px);align-items:start}
@media (max-width:900px){.split{grid-template-columns:1fr}}

.facts{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:clamp(32px,4vw,48px)}
.facts h3{margin-bottom:10px}
.facts p{color:var(--muted);max-width:42ch}

.rows{display:flex;flex-direction:column;gap:clamp(64px,8vw,120px)}
.row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);justify-items:center;gap:clamp(32px,7vw,120px);align-items:center}
.row__txt{justify-self:stretch}
.row .phone{zoom:var(--ps,1)}
@media (min-width:1700px){.row{--ps:1.2}}
@media (min-width:2100px){.row{--ps:1.4}}
.row:nth-child(even) .row__txt{order:2}
.row__txt p{color:var(--muted);margin-top:16px;max-width:36ch;font-size:var(--step-lead);line-height:1.45;text-wrap:pretty}
@media (max-width:820px){.row{grid-template-columns:1fr;justify-items:start}.row:nth-child(even) .row__txt{order:0}.row .phone{zoom:.9}}

/* planes */
.plans{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.plan{background:var(--surface);border-radius:var(--r);padding:clamp(26px,2.4vw,48px);display:flex;flex-direction:column;gap:10px;min-height:340px}
.plan--hi{background:var(--field);color:var(--field-ink)}
:root[data-theme="dark"] .plan--hi{background:var(--surface-2);box-shadow:inset 0 0 0 2px var(--green)}
.plan__name{font-size:var(--step-lead);letter-spacing:-.02em}
.plan__note{font-size:var(--step-body);color:var(--muted)}
.plan--hi .plan__note{color:var(--field-muted)}
.plan__amount{font-size:clamp(2.6rem,2rem + 1.8vw,5.5rem);font-weight:600;letter-spacing:-.05em;line-height:1;margin-top:auto}
.plan__per{font-size:var(--step-body);color:var(--muted)}
.plan--hi .plan__per{color:var(--field-muted)}
.plan__inc{font-weight:600;font-size:var(--step-lead);letter-spacing:-.02em;margin-top:8px}
.plan .btn{margin-top:14px}
@media (max-width:980px){.plans{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.plans{grid-template-columns:1fr}}

.table{overflow-x:auto;background:var(--bg);border-radius:var(--r)}
.table table{width:100%;min-width:620px;border-collapse:collapse;font-size:var(--step-body)}
.table th,.table td{padding:18px 24px;text-align:left;border-top:1px solid var(--surface-2)}
.table thead th{border-top:0;font-weight:600}
.table tbody th{font-weight:400;color:var(--muted)}
.table td{font-weight:600;font-variant-numeric:tabular-nums}

/* ayuda (acordeón) */
.acc{display:flex;flex-direction:column;gap:10px}
.acc__item{background:var(--surface);border-radius:var(--r)}
.acc__btn{width:100%;display:flex;align-items:center;justify-content:space-between;gap:16px;text-align:left;background:transparent;border:0;cursor:pointer;padding:22px 26px;font-weight:600;font-size:var(--step-body);color:var(--ink);letter-spacing:-.01em}
.acc__sign{width:14px;height:14px;position:relative;flex-shrink:0}
.acc__sign::before,.acc__sign::after{content:"";position:absolute;left:0;right:0;top:6px;height:2px;background:currentColor;border-radius:2px;transition:transform .3s var(--ease)}
.acc__sign::after{transform:rotate(90deg)}
.acc__btn[aria-expanded="true"] .acc__sign::after{transform:rotate(0)}
.acc__panel{overflow:hidden;transition:max-height .4s var(--ease),visibility 0s}
.acc__panel[data-open="false"]{max-height:0;visibility:hidden;transition:max-height .4s var(--ease),visibility 0s .4s}
.acc__panel[data-open="true"]{max-height:900px}
.acc__panel p{padding:0 26px 24px;max-width:56ch;color:var(--muted)}
.acc__panel a{color:var(--accent-ink);font-weight:600}

/* legales */
.legal{padding:clamp(64px,8vw,120px) 0 var(--sec)}
.legal__in{max-width:calc(var(--wrap) + var(--gut)*2);margin:0 auto;padding:0 var(--gut);display:grid;grid-template-columns:minmax(0,1fr);column-gap:clamp(40px,5vw,120px)}
.legal__in > *{max-width:860px}
@media (min-width:1200px){.legal__in{grid-template-columns:minmax(260px,360px) minmax(0,1fr)}.legal__in > *{grid-column:2}.legal__in > .legal__toc{grid-column:1;grid-row:1 / span 60;align-self:start;position:sticky;top:96px;margin-bottom:0}.legal__in > .legal__toc ol{columns:1}}
.legal__h1{font-size:var(--step-head);line-height:1.05;letter-spacing:-.035em;margin-bottom:16px}
.legal__meta{font-size:var(--step-small);line-height:1.6;color:var(--muted);margin:0 0 40px}
.legal__toc{background:var(--surface);border-radius:var(--r);padding:24px 28px;margin-bottom:56px}
.legal__toc-t{font-size:var(--step-small);font-weight:600;margin:0 0 12px}
.legal__toc ol{columns:2;column-gap:34px;margin:0;padding-left:20px}
.legal__toc li{break-inside:avoid;padding:3px 0;color:var(--muted);font-size:var(--step-small)}
.legal__toc a{color:var(--muted)}
.legal__toc a:hover{color:var(--ink)}
.legal__sec{padding:40px 0 0;scroll-margin-top:96px}
.legal__sec h2{font-size:var(--step-lead);line-height:1.3;letter-spacing:-.02em;color:var(--ink);margin:0 0 14px}
.legal__sec p,.legal__sec li{max-width:780px;font-size:16px;line-height:1.72;color:var(--muted)}
.legal__sec p{margin:0 0 16px}
.legal__sec ul,.legal__sec ol{margin:0 0 18px;padding-left:24px}
.legal__sec li{padding-left:5px;margin:4px 0}
.legal__sec strong{color:var(--ink);font-weight:600}
.legal__sec a{color:var(--accent-ink);text-decoration:underline;text-underline-offset:3px}
@media (max-width:640px){.legal__toc ol{columns:1}}

/* =========================================================
   MOVIMIENTO
   El contenido se autora visible; solo se oculta si JS confirma
   que puede animar (data-hidden lo pone app.js).
   ========================================================= */
[data-reveal]{transition:opacity .8s var(--ease),transform .8s var(--ease)}
[data-reveal][data-hidden="true"]{opacity:0;transform:translateY(24px)}
.mo--a img{animation:kb 16s ease-in-out infinite alternate}
@keyframes kb{from{scale:1.14}to{scale:1.22}}

@media (prefers-reduced-motion:reduce){
  *{animation:none!important}
  [data-reveal]{opacity:1!important;transform:none!important;transition:none!important}
}
@media print{.nav{display:none!important}[data-reveal]{opacity:1!important;transform:none!important}}

/* ayuda: columna lateral fija junto al acordeón */
@media (min-width:901px){.ayuda__side{position:sticky;top:96px}}

/* movimiento ligado al scroll (app.js §6): sin JS o con movimiento reducido todo queda en su lugar */
.close{overflow:hidden}
@media (prefers-reduced-motion:reduce){.mo img,.vs img{scale:1}}

/* Cómo funciona: los dos pasos lado a lado, teléfonos más chicos */
@media (min-width:821px){.rows{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,80px);align-items:start}.row{grid-template-columns:1fr;gap:24px;justify-items:center}.row:nth-child(even) .row__txt{order:0}.row__txt{text-align:center}.row__txt p{margin-inline:auto}.row .phone{zoom:calc(var(--ps,1)*.72)}}

/* Inicio · Cómo funciona más compacto */
.how2{padding:calc(var(--sec)*.6) 0}
@media (min-width:901px){.how2__shot{height:clamp(340px,40svh,480px);--pz:.72}.how2__shot .phone + .phone{margin-top:clamp(28px,3.5vw,56px)}}
@media (min-width:1700px){.how2__shot{--pz:.86}}
@media (min-width:2100px){.how2__shot{--pz:1}}

/* Cierre más compacto */
.close{padding:clamp(48px,5vw,96px) 0 clamp(16px,1.6vw,32px)}
.close__title{font-size:clamp(1.75rem,.9rem + 2.2vw,3.75rem)}
.strip{margin-top:clamp(28px,3vw,56px)}
@media (min-width:901px){.strip figure{aspect-ratio:4 / 3}}

/* Encabezado de páginas internas más compacto */
.page-hero{padding:clamp(40px,5vw,88px) 0 clamp(32px,4vw,64px)}
.page-hero .display{font-size:clamp(2.2rem,3.6vw,5.2rem)}
@media (min-width:901px){.page-hero--photo .wrap{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr)}.page-hero__img{aspect-ratio:16 / 10;max-height:46svh}}

/* Escala de títulos ~20% más chica */
:root{--step-display:clamp(2.1rem,.8rem + 5.3vw,8.8rem);--step-head:clamp(1.6rem,.75rem + 1.7vw,2.8rem);--step-lead:clamp(1rem,.92rem + .2vw,1.15rem)}
.vs__t{font-size:clamp(1.4rem,.85rem + 1.05vw,2.2rem)}
.page-hero .display{font-size:clamp(1.9rem,2.9vw,4.2rem)}
.close__title{font-size:clamp(1.5rem,.75rem + 1.8vw,3rem)}

/* Planes: calculadora primero */
.pl-top{background:var(--surface);padding:clamp(40px,5vw,88px) 0 clamp(48px,5vw,88px)}
.pl-top .lead{margin-top:14px;max-width:46ch}
.pl-top .price__grid{margin-top:clamp(28px,3.5vw,48px)}
.pl-sub{margin-top:12px;max-width:52ch}
#planes-grid .plans{margin-top:clamp(28px,3vw,44px)}
#planes-grid .plan{min-height:0;border:2px solid transparent;transition:border-color .25s ease,transform .25s ease}
#planes-grid .plan__amount{font-size:clamp(2rem,1.5rem + 1.4vw,3.6rem);margin-top:6px}
#planes-grid .plan.is-on{border-color:var(--green);transform:translateY(-4px)}
.plan__facts{list-style:none;margin:10px 0 0;padding:10px 0 0;border-top:1px solid var(--ring);display:grid;gap:4px;font-size:var(--step-body);color:var(--muted)}
.plan__facts b{color:var(--ink);font-weight:600}
#planes-grid .plan__note{margin-top:auto;padding-top:6px}
.plan__facts{border-top-color:color-mix(in srgb,var(--muted) 30%,transparent)}
.calc__iva{margin-top:18px;padding:14px 16px;border-radius:12px;background:color-mix(in srgb,var(--green) 14%,transparent);font-size:var(--step-body);line-height:1.45}
.calc__iva > b{display:block;font-size:clamp(1.6rem,1.2rem + 1vw,2.4rem);font-weight:600;letter-spacing:-.04em;line-height:1.1;margin:2px 0;font-variant-numeric:tabular-nums}

/* ===== Planes v2: tarjetas estilo SaaS ===== */
.pl2{padding:clamp(36px,4.5vw,72px) 0 clamp(28px,3vw,48px)}
.pl2__head{text-align:center;max-width:720px;margin:0 auto}
.pl2__eyebrow{display:block;font-size:13px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--green)}
.pl2__title{font-size:clamp(2rem,1.2rem + 2.6vw,3.6rem);line-height:1.05;letter-spacing:-.04em;font-weight:600;margin-top:10px}
.pl2__sub{margin-top:12px;color:var(--muted);font-size:var(--step-body)}
.pl2__sub b{color:var(--ink);font-weight:600}
.pcs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(12px,1.4vw,22px);margin-top:clamp(36px,4vw,56px);align-items:stretch}
.pc{position:relative;display:flex;flex-direction:column;padding:clamp(22px,2vw,30px);border-radius:22px;border:1.5px solid color-mix(in srgb,var(--muted) 28%,transparent);background:var(--bg,transparent);transition:border-color .25s ease,background-color .25s ease,box-shadow .25s ease}
.pc__badge{position:absolute;top:0;left:50%;transform:translate(-50%,-50%) scale(.9);opacity:0;background:var(--green);color:var(--on-green,#06140f);font-size:13px;font-weight:600;padding:7px 16px;border-radius:999px;white-space:nowrap;box-shadow:0 6px 16px -6px color-mix(in srgb,var(--green) 70%,transparent);transition:opacity .25s ease,transform .25s ease;pointer-events:none}
.pc__name{font-size:1.25rem;font-weight:500;letter-spacing:-.01em}
.pc__price{display:flex;align-items:baseline;gap:6px;margin-top:10px}
.pc__price b{font-size:clamp(1.9rem,1.4rem + 1.1vw,2.6rem);font-weight:700;letter-spacing:-.04em;line-height:1;font-variant-numeric:tabular-nums}
.pc__price span{color:var(--muted);font-size:1rem}
.pc__desc{margin-top:14px;font-size:.95rem;line-height:1.55;min-height:4.65em;text-wrap:pretty}
.pc__btn{display:flex;justify-content:center;align-items:center;margin-top:18px;min-height:50px;border-radius:999px;border:1.5px solid color-mix(in srgb,var(--muted) 35%,transparent);font-weight:500;text-decoration:none;color:var(--ink);transition:background-color .2s ease,border-color .2s ease,color .2s ease}
.pc__btn:hover{border-color:var(--ink)}
.pc__list{list-style:none;margin:20px 0 0;padding:0;display:grid;gap:10px;font-size:.92rem;line-height:1.35}
.pc__list li{display:flex;gap:10px;align-items:flex-start}
.pc__list svg{flex-shrink:0;margin-top:1px;color:var(--green)}
.pc.is-on{border-color:var(--green);background:color-mix(in srgb,var(--green) 7%,transparent);box-shadow:0 18px 40px -24px color-mix(in srgb,var(--green) 80%,transparent)}
.pc.is-on .pc__badge{opacity:1;transform:translate(-50%,-50%) scale(1)}
.pc.is-on .pc__btn{background:var(--green);border-color:var(--green);color:var(--on-green,#06140f);font-weight:600}
.pl2-calc{background:var(--surface);padding:clamp(40px,4.5vw,72px) 0}
.pl2-calc .price__grid{margin-top:clamp(24px,3vw,40px)}
@media (max-width:1080px){.pcs{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:28px}}
@media (max-width:560px){.pcs{grid-template-columns:1fr}.pc__desc{min-height:0}}

.pl2__sub--all{margin-top:4px;font-size:var(--step-small)}

/* Cómo funciona · "Antes de empezar" compacto */
.sec--antes{padding:clamp(48px,5vw,80px) 0}
@media (min-width:901px){
  .sec--antes .split{grid-template-columns:1fr;gap:clamp(24px,2.5vw,36px)}
  .sec--antes .facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(20px,2.4vw,40px)}
}
.sec--antes .facts{gap:24px}
.sec--antes .facts li{padding-top:16px;border-top:1px solid color-mix(in srgb,var(--muted) 30%,transparent)}