/* Ajustes exclusivos para pantallas táctiles y estrechas.
   Se carga después de los estilos de cada página para no cambiar escritorio. */
@media (max-width: 640px){
  /* Solo en html: con overflow en body se rompen las secciones con scroll fijo (sticky). */
  html{overflow-x:hidden;}
  body{width:100%;}
  body{font-size:15px;}
  .wrap{width:100%; max-width:100%; padding-inline:20px;}

  /* Navegación: más superficie táctil y menú que no se sale de la pantalla. */
  .nav{top:12px; width:calc(100% - 24px); max-width:none;}
  .nav-inner{width:100%; min-height:48px; padding:4px 8px 4px 16px; gap:8px;}
  .wordmark{font-size:16px;}
  .nav-burger{width:44px; height:44px; display:grid; place-items:center; padding:0;}
  .nav-burger svg{width:24px; height:24px;}
  .nav-links{top:calc(100% + 8px); left:0; right:0; padding:8px; gap:2px;}
  .nav-links a,.dd-btn{min-height:44px; display:flex; align-items:center; padding:10px 12px; font-size:16px;}
  .dd{padding-left:8px;}

  /* Ritmo vertical y tipografía: contenido más fácil de leer con una mano. */
  section{scroll-margin-top:78px;}
  h1{font-size:clamp(34px, 10.5vw, 48px); line-height:1.02;}
  h2{font-size:clamp(26px, 8vw, 34px);}
  .hero h1{font-size:clamp(36px, 11vw, 52px); max-width:12ch;}
  .hero-content{padding-inline:20px; bottom:10%;}
  .hero-sub{font-size:17px; line-height:1.45; max-width:34ch;}
  .hero-cta,.hero-cta .btn{width:100%;}
  .hero-cta{align-items:stretch; gap:10px;}
  .btn{min-height:48px; justify-content:center; padding:12px 18px;}

  /* Evita que filas de datos, formularios o tarjetas fuerzen scroll horizontal. */
  .form-row-2,.pr-llamada,.pr-notas{grid-template-columns:1fr;}
  .form-row-2{gap:16px;}
  input,textarea,select{max-width:100%; min-height:48px; font-size:16px;}
  textarea{min-height:140px;}
  .case-card,.case-card-inner,.glass{max-width:100%;}
  .case-card-spine{padding:18px 16px;}
  .case-card-inner{padding:20px 16px;}
  .pr-llamada{padding:20px;}
  .pr-grid{grid-template-columns:1fr;}
  .pr-card{min-width:0;}

  /* La animación de scroll conserva el efecto, pero exige menos desplazamiento. */
  .hx{height:auto;}
  .hx-fijo{position:relative; display:block; height:100svh; min-height:620px;}
  .hx-fondo{opacity:1 !important; background:linear-gradient(180deg, rgba(11,24,38,.05) 0%, rgba(11,24,38,.78) 72%, #0B1826 100%);}
  .hx-fondo::after{background:linear-gradient(180deg, rgba(11,24,38,.08), rgba(11,24,38,.8) 78%, #0B1826 100%);}
  .hx-trama{display:none;}
  .hx-media{left:0; top:0; width:100%; height:100%; transform:none; border-radius:0; box-shadow:none;}
  .hx-media img{transform:none !important; object-position:center;}
  /* El título de escritorio sigue en el HTML para buscadores y lectores, pero fuera de la vista. */
  .hx-titulo{display:block; position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap;}
  .hx-media img{filter:brightness(.92);}
  .hx-mobile-copy{position:absolute; z-index:4; inset:0; pointer-events:none;}
  .hx-logo{position:absolute; width:min(34vw,132px); height:auto; left:50%; top:calc(12svh + 20px); transform:translateX(-50%); filter:drop-shadow(0 10px 30px rgba(0,0,0,.5));}
  .hx-card{position:absolute; left:14px; right:14px; top:54%; transform:translateY(-6%); max-height:calc(100svh - 54% - 24px); padding:20px 18px 18px; border-radius:24px; text-align:center; pointer-events:auto; background:rgba(14,28,44,.86); border:1px solid rgba(220,232,241,.2); box-shadow:0 20px 50px rgba(0,0,0,.4);}
  .hx-card .mono{margin:0; color:var(--piedra);}
  .hx-card-t{margin:10px 0 8px; font-family:var(--font-display); font-weight:600; font-size:clamp(24px,7.2vw,30px); line-height:1.04; letter-spacing:-.035em; color:var(--luz); text-wrap:balance;}
  .hx-card-s{margin:0 0 16px; font-size:14px; line-height:1.4; color:var(--piedra);}
  .hx-card .btn{width:100%;}
  .hero-scroll{height:150vh;}
  .proc-scroll{height:280vh; margin-bottom:-22svh;}
  .idea-scroll{height:240vh;}
  .glass{-webkit-backdrop-filter:none; backdrop-filter:none;}
  .glass{background:rgba(14,28,44,.92);}
  .hero-pin,.hx-fijo{height:100svh; min-height:560px;}
  .hero-scrolldown{bottom:20px;}

  /* Pie de página: enlaces apilados y fáciles de pulsar. */
  .foot{padding-block:40px 28px;}
  .foot-links{display:flex; flex-direction:column; align-items:flex-start; gap:14px;}
  .foot-links a{padding:4px 0;}
}

@media (min-width:641px){.hx-mobile-copy{display:none;}}

@media (max-width:380px){
  .wrap{padding-inline:16px;}
  .nav{width:calc(100% - 16px);}
  .hero-content{padding-inline:16px;}
  .hero h1{font-size:34px;}
}

@media (prefers-reduced-motion: reduce){
  .hx,.hero-scroll,.proc-scroll,.idea-scroll{height:auto;}
}