/* ═══════════ RESPONSIVE + FIXES (global, cargar siempre al final) ═══════════ */

/* ── 1. Defensivo: nada desborda horizontalmente ── */
html{-webkit-text-size-adjust:100%}
html,body{max-width:100%;overflow-x:clip}
img,video,svg,iframe,canvas,object{max-width:100%}
img,video{height:auto}
*{min-width:0}

/* nada de texto recortado por line-height apretado */
h1,h2,h3,h4,h5{overflow-wrap:break-word;text-wrap:pretty}

/* tablas anchas → scroll propio en lugar de romper la página */
@media(max-width:760px){table:not(.pc-vs table){display:block;max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}}

/* iOS: inputs sin auto-zoom + safe-area */
@supports(padding:max(0px)){
  .nav-in,.foot-in,.foot-bottom{padding-left:max(var(--pad),env(safe-area-inset-left));padding-right:max(var(--pad),env(safe-area-inset-right))}
}

/* ── 2. Tablet (≤1024px) ── */
@media(max-width:1024px){
  .feat-specs,.proc-row{grid-template-columns:1fr 1fr}
  .su-apps{grid-template-columns:repeat(3,1fr);grid-auto-rows:200px}
  .su-why,.es-mets{grid-template-columns:1fr 1fr}
  .btypes{grid-template-columns:repeat(3,1fr)}
  .foot-in{grid-template-columns:1fr 1fr 1fr}
}

/* ── 3. Móvil (≤700px) ── */
@media(max-width:700px){
  :root{--pad:20px}

  /* alturas de hero razonables en pantallas cortas */
  .hero,.phero,.ct-hero,.su-hero,.nx-hero,.tn-hero,.sol-hero{min-height:82svh}

  /* titulares: nunca desbordan ni se recortan */
  .hero h1,.phero h1,.ct-hero h1,.su-hero h1,.nx-hero h1{font-size:clamp(32px,10.5vw,54px);line-height:1.04;letter-spacing:-.03em}
  .sec-head h2,.cta h2{font-size:clamp(30px,8.6vw,48px);line-height:1.05}
  .feat-txt h3{font-size:clamp(28px,8.2vw,44px);line-height:1.06}

  /* grids a una o dos columnas */
  .feat-specs,.proc-row,.su-why,.es-mets,.nx-foes,.btypes,.xtra,.tiers,.inc-grid,.steps,.val-grid,.arrive-grid,.ct-dl,.es-how,.tech-explainer,.typenav{grid-template-columns:1fr}
  .su-apps{grid-template-columns:1fr 1fr;grid-auto-rows:150px}
  .su-apps>*{grid-column:span 1 !important;grid-row:span 1 !important}
  .foot-in{grid-template-columns:1fr 1fr}
  .finishes,.su-tex,.es-tex,.work-grid{grid-template-columns:1fr 1fr}
  .gal{grid-template-columns:1fr 1fr}
  .gal>*{grid-column:span 1 !important;aspect-ratio:1}

  /* CTAs a ancho completo, cómodos al pulgar */
  .hero-cta,.cta-btns{width:100%}
  .hero-cta .btn,.cta-btns .btn{flex:1 1 100%;justify-content:center}

  /* barras de filtros deslizables en vez de apiladas */
  .cat-filters,.sf-goals,.su-filters,.fin-rail{display:flex;flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding-bottom:8px}
  .cat-filters::-webkit-scrollbar,.sf-goals::-webkit-scrollbar,.su-filters::-webkit-scrollbar{display:none}
  .cat-filters>*,.sf-goals>*,.su-filters>*{flex:0 0 auto}

  /* comparadores y medias con proporción usable en vertical */
  .su-ba,.bigmap{aspect-ratio:4/3}

  /* footer y bandas de texto más compactas */
  .sec{padding-top:clamp(52px,12vw,80px);padding-bottom:clamp(52px,12vw,80px)}
}

/* ── 4. Móvil estrecho (≤430px) ── */
@media(max-width:430px){
  .foot-in{grid-template-columns:1fr}
  .su-apps,.finishes,.su-tex,.es-tex{grid-template-columns:1fr 1fr}
  .hero-stats,.ct-stats{gap:18px}
  .cta h2{font-size:clamp(28px,10vw,42px)}
}

/* ── 7. Menú móvil: siempre alcanzable (scroll + safe-area) ── */
.mob{overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}
.mob>*,.mob a,.mob .mob-sub,.mob .mob-foot{flex:0 0 auto}
@media(max-width:1099px){
  .mob{padding-top:88px;padding-bottom:calc(32px + env(safe-area-inset-bottom))}
}
@media(max-height:780px) and (max-width:1099px){
  .mob{padding-top:80px;gap:0}
  .mob a{padding-top:11px;padding-bottom:11px;font-size:clamp(19px,4.4vw,26px)}
}

/* ── 5. Objetivos táctiles: mínimo 44px en táctil ── */
@media(hover:none){
  .btn,.nav-links a,.burger,.cf-btn,.su-fbtn,.sf-goal,button,select{min-height:44px}
  .btn{display:inline-flex;align-items:center}
  input,select,textarea{font-size:16px}
  /* efectos hover no se quedan pegados en táctil */
  .svc:hover img,.gi:hover img,.su-app:hover img{transform:none}
}

/* ── 6. Landscape bajo (móvil girado) ── */
@media(max-height:520px) and (orientation:landscape){
  .hero,.phero,.ct-hero,.su-hero,.nx-hero{min-height:100svh}
  .hero h1,.phero h1{font-size:clamp(26px,5.6vw,40px)}
}

/* video-ghost-fix */
video.lazyv{background:#0b0c0e;display:block}

/* every hero clears the fixed nav on phones */
@media(max-width:760px){
.pc-hero-in,.bk2-hero-in,.ln-hero-in,.sx-hero-in,.p3-hero-in,.tn-hero-in,.ab-hero-in,.cw-hero-in,.stk-hero-in,.phero-in,.hero-in{padding-top:max(96px,calc(78px + 6vw))!important}
.pc-hero,.bk2-hero{min-height:100svh}
.pc-hero h1,.bk2-hero h1{font-size:clamp(34px,9.5vw,52px)}
}

/* min legible */
@media(max-width:640px){
  .pc-card small,.pc-card .code,.cc-code,.sw-code,.sf-code,.sf-meta,.gd-t,.tt-warr small,.tv-tab span,.tv-badge span,.stk-kick,.ln-kick,.eyebrow,.dkick,.pk-k,.zn-svcs span,.lc-route span,.cw-fin small,.a-cat,.bpost-cat,.bpost-meta,.dl-n,.mob-foot,.foot-legal,.tv-note,.ga-table thead th,.map-refs h5,.svc-tag,.svc-num{font-size:11px!important}
}