/* ---------- ≤1100px ---------- */
@media (max-width:1100px){
.artifact{width:min(34vw,320px);margin-top:4vh}
.mock-card.mc-doc{top:-8%;right:-2%}
.mock-card.mc-alert{left:0;bottom:10%}
.hero .display{max-width:9ch}
.shard.s1{right:37vw;top:22vh}
.stage-grid{grid-template-columns:1fr;gap:26px;align-items:start;padding-top:11vh}
.rail{margin-top:22px;flex-direction:row;gap:10px}
.rail li{padding:11px 0 0 0;border-top:1px solid rgba(255,255,255,.14);flex:1}
.rail li::before,.rail li::after{display:none}
.rail li.on{border-top-color:var(--lilac)}
.rail span{display:none}
.rail b{font-size:.85rem}
.stage-frame{height:min(54vh,460px)}
.tier{grid-template-columns:minmax(0,1fr) 130px;grid-template-areas:"id price" "inc inc" "cta cta";row-gap:16px}
.tier-id{grid-area:id}.tier-price{grid-area:price;justify-self:end}.tier-inc{grid-area:inc}.tier .text-link{grid-area:cta}
.tier-key::before{left:-16px}
}

/* ---------- ≤900px ---------- */
@media (max-width:900px){
.artifact-scene{align-items:flex-start;padding-top:11vh;justify-content:center;opacity:.5}
.artifact{width:min(70vw,340px);margin-top:0}
.mock-card{display:none}
.shard.s2{right:auto;left:8vw;bottom:26vh}
.nav-links,.link-quiet{display:none}
.burger{display:flex}
.drawer{display:flex}
.contact-grid{grid-template-columns:1fr;gap:44px}
.quote-list{grid-template-columns:1fr;gap:40px}
.row{grid-template-columns:44px 1fr;grid-template-areas:"n h" ". p";row-gap:14px}
.row-n{grid-area:n}.row h3{grid-area:h}.row p{grid-area:p;padding-top:0}
.footer-top{flex-direction:column;gap:40px}
}

/* ---------- ≤680px ---------- */
@media (max-width:680px){
body{font-size:16px}
.artifact-scene{padding-top:7vh;justify-content:center;opacity:.34}
.artifact{width:min(86vw,330px)}
.shard.s1{width:24px;right:12vw;top:13vh}
.shard.s2{display:none}
.hero{padding-top:130px;min-height:98svh}
.display{font-size:clamp(2.8rem,14vw,4.4rem);max-width:11ch}
.hero-sub{font-size:1.1rem;max-width:26ch}
.hero-actions{gap:20px}
.hero-actions .btn-lg{flex:1 1 100%}
.hero-facts{grid-template-columns:1fr;gap:0;padding-bottom:26px}
.hero-facts div{display:flex;align-items:baseline;gap:12px;padding:10px 0;border-bottom:1px solid var(--line)}
.hero-facts div:last-child{border-bottom:0}
.hero-facts dt{font-size:1.25rem;min-width:76px}
.hero-facts dd{margin-top:0}
.manifesto{padding-top:110px;padding-bottom:110px}
.stage-wrap{height:420vh}
.stage-sticky{align-items:flex-start;padding-top:100px}
.stage-grid{padding-top:0;gap:20px}
.stage-frame{height:min(58vh,430px)}
.glass{border-radius:var(--r-m)}
.chat,.doc,.review,.alerts{padding:18px}
.chat-input{margin:0 18px 18px}
.msg{max-width:92%;font-size:.92rem}
.doc p,.finding p{font-size:.86rem}
.score-ring{width:58px;height:58px;font-size:1.1rem}
.tier{grid-template-columns:1fr;grid-template-areas:"id" "price" "inc" "cta";row-gap:14px}
.tier-price{justify-self:start}
.tier-key::before{display:none}
.footer-cols{flex-direction:column;gap:30px}
.footer-bottom{flex-direction:column;align-items:flex-start;gap:14px}
}

/* las tarjetas flotantes necesitan aire lateral para no pisar el panel */
@media (min-width:901px){
  .hero-mock,.mock-wrap{padding:0 clamp(14px,3vw,40px)}
}
/* solo tablet: en escritorio manda la posición de animations.css */
@media (min-width:901px) and (max-width:1200px){
  .mock-card.mc-doc{right:-3%}
  .mock-card.mc-alert{left:-9%}
}

/* ============================================================
   MÓVIL: el hero debe leerse, no competir con la maqueta
   ============================================================ */
@media (max-width:760px){
  /* la maqueta pasa a ser fondo real, muy tenue y sin estorbar */
  .artifact-scene{
    position:absolute; inset:0; z-index:0;
    align-items:center; padding-top:0;
    opacity:.07; pointer-events:none;
    filter:blur(1.5px);
  }
  .artifact{width:118vw; margin:0; transform:none!important}
  .hero-copy,.hero .container{position:relative; z-index:2}

  /* titular a tamaño legible, sin cortes raros */
  .hero .display{max-width:none; font-size:clamp(2.6rem,13vw,4rem); line-height:1.02}
  .hero-sub{font-size:1.02rem; max-width:30ch}

  /* un solo botón visible arriba: el de la cabecera sobra en el hero */
  .nav .btn-solid{padding:9px 18px; font-size:.86rem}
  .hero-actions{flex-direction:column; align-items:stretch; gap:14px}
  .hero-actions .btn-solid{width:100%; justify-content:center}
  .hero-actions .text-link{justify-content:flex-start}

  /* métricas del hero: una por línea, etiqueta debajo del dato */
  .hero-facts{grid-template-columns:1fr!important; gap:0; padding:18px 0 26px}
  .hero-facts > div{padding:15px 0; border-bottom:1px solid var(--line)}
  .hero-facts > div:last-child{border-bottom:none}
  .hero-facts dt{font-size:1.45rem}
  .hero-facts dd{margin-top:3px; font-size:.85rem; max-width:none}

  /* secciones con menos aire vertical */
  .index-sec,.quote-sec,.price-sec,.contact{padding-top:64px; padding-bottom:64px}
  .h-lg,.lead-head{font-size:clamp(1.9rem,8vw,2.6rem)}
  .stage-title{font-size:clamp(1.7rem,7.4vw,2.3rem)}
}

/* ---------- TABLET (761–1024px) ---------- */
@media (min-width:761px) and (max-width:1024px){
  .hero .display{max-width:11ch}
  .artifact{width:min(52vw,420px)}
  .hero-facts{grid-template-columns:repeat(3,1fr); gap:18px}
  .index-sec,.quote-sec,.price-sec,.contact{padding-top:88px; padding-bottom:88px}
}

/* ---------- área táctil mínima en todos los móviles ---------- */
@media (max-width:900px){
  .nav a,.drawer a,.btn,.text-link,.cat-pill,.share-btn{
    min-height:44px; display:inline-flex; align-items:center;
  }
  .tiers-4{grid-template-columns:1fr}
  .tiers-4 .tier{border-right:none; border-bottom:1px solid var(--line)}
}

/* ============================================================
   Menú móvil: logo real, secciones y enlaces individuales
   ============================================================ */
.drawer-brand{
  display:flex!important; align-items:center; gap:11px;
  font-weight:600; letter-spacing:-.025em; font-size:1.05rem;
  color:var(--ink); text-decoration:none; padding:0 0 26px;
  border-bottom:1px solid var(--line); margin-bottom:22px;
}
.drawer-brand .brand-mark{
  width:34px; height:34px; flex:0 0 34px;
  display:inline-grid; place-items:center;
  border-radius:11px; background:var(--plum); color:#fff;
  transition:transform .6s var(--ease);
}
.drawer-brand:active .brand-mark{transform:rotate(-7deg)}
.drawer-label{
  font-size:.66rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--muted); font-weight:500; margin:26px 0 6px;
}
.drawer-label:first-of-type{margin-top:0}
.drawer > a:not(.drawer-brand){
  display:block; padding:11px 0; font-size:1.02rem;
  color:var(--ink-2); text-decoration:none;
  transition:color .4s var(--ease);
}
.drawer > a:not(.drawer-brand):active{color:var(--plum)}
.drawer-cta{
  display:flex; flex-direction:column; gap:11px;
  margin-top:30px; padding-top:24px; border-top:1px solid var(--line);
}
.drawer-cta .btn{width:100%; justify-content:center}

/* ============================================================
   Marcador de sección: no debe solaparse en móvil
   ============================================================ */
@media (max-width:760px){
  .mark{
    position:relative; z-index:3;
    font-size:.62rem; letter-spacing:.16em;
    padding-bottom:16px; margin-bottom:28px;
    background:transparent;
  }
  .stage-grid,.index-sec,.quote-sec{position:relative; z-index:2}
  /* la maqueta del "stage" no debe montarse sobre el texto */
  .stage-frame{position:relative; z-index:1; margin-top:26px}
  .rail{position:relative; z-index:3}
}

/* ============================================================
   MÓVIL: sección "Cómo funciona" (stage) — el marcador se salía
   ============================================================ */
@media (max-width:900px){
  .stage-grid{grid-template-columns:1fr!important;gap:24px;padding-top:96px}
  .stage-rail{position:static!important;width:100%}
  .stage-rail .mark{
    position:static!important;
    writing-mode:horizontal-tb!important;
    transform:none!important;
    white-space:nowrap;
    margin-bottom:18px;padding-bottom:14px;
  }
  /* el sticky se mantiene: es lo que da recorrido a la animación.
     El solape del título se resuelve con el layout de abajo, no quitándolo. */
  .stage-sticky{align-items:flex-start!important; padding-top:92px}
  .stage-frame{height:min(52vh,400px); min-height:280px; margin-top:18px}
  .rail{flex-wrap:wrap}
  .rail li{min-width:calc(50% - 5px)}
}

/* ════════════════════════════════════════════════════════════
   CORRECCIONES DE MÓVIL — solo ≤767px, escritorio intacto
   ════════════════════════════════════════════════════════════ */
@media (max-width:767px){

  /* ---- C1 + M2: eliminar el desbordamiento horizontal ----
     Los decorativos (halo, luz, grano) son más anchos que la pantalla
     por diseño. Se contienen en el ancestro con clip, que no genera
     scroll interno ni afecta a los elementos fijos. */
  html,body{overflow-x:clip; max-width:100%}
  .hero,.artifact-scene,.stage-sec,.index-sec,.quote-sec,.price-sec,.contact{
    overflow-x:clip;
  }
  .artifact{width:100vw!important; max-width:100vw}
  .mock-halo,.mock-glare{max-width:100%}
  .grain{inset:0!important; width:100%!important; height:100%!important}
  .light,.ambient{max-width:100vw; overflow:clip}

  /* ---- A2: tipografía de etiquetas legible ---- */
  .mark,.eyebrow,.mark-label{
    font-size:11.5px!important;
    letter-spacing:.14em!important;
  }
  .drawer-group-title,.drawer h4{
    font-size:11.5px!important; letter-spacing:.12em!important;
  }

  /* ---- A1: áreas táctiles de 44px ---- */
  .burger{
    width:44px!important; height:44px!important;
    display:grid!important; place-items:center;
  }
  .drawer a{
    min-height:44px; display:flex; align-items:center;
    padding:2px 0;
  }
  .drawer .brand{min-height:48px}
  .foot-col a,.footer a,.foot a{
    min-height:40px; display:inline-flex; align-items:center;
  }

  /* ---- M3: al abrir el menú, el fondo no debe desplazarse ---- */
  body.drawer-open{overflow:hidden; touch-action:none}
}

/* pantallas muy estrechas: la cabecera debe caber entera */
@media (max-width:400px){
  .nav{padding-left:16px; padding-right:16px; gap:8px}
  .nav-cta{gap:8px}
  .nav-cta .link-quiet{display:none}      /* "Entrar" ya está dentro del menú */
  .nav .btn-solid{padding:9px 15px; font-size:.82rem}
  .brand span:last-child{font-size:.95rem}
}

/* ── Móvil: recorrido de scroll ajustado ──
   Escritorio usa 480vh → 855px de scroll por escena.
   Con height:auto quedaban 40px por escena: la animación pasaba
   de golpe. 300vh da ~0,55 pantallas por escena: se ve completa
   sin resultar interminable, y sin dejar hueco vacío al final. */
@media (max-width:900px){
  .stage-wrap{height:330vh!important}
}