/* ============================================================
   MOBILE.CSS — capa de ajustes para TELÉFONO (patrón Apple):
   flujo natural (sin snap), una sola columna, aire vertical
   generoso, tipografía grande y segura, CTAs a todo el ancho.
   Se carga DESPUÉS de io.css / fullscreen.css / reveal.css en las
   páginas. Los arreglos POR SECCIÓN viven en el <style> inline de
   cada página (bajo su propio @media). Breakpoint 734px = teléfono
   (el mismo umbral que usa apple.com).
   ============================================================ */

@media (max-width:734px){

  /* ---- Scroll NATURAL: sin snap en teléfono (decisión de diseño) ---- */
  html{scroll-snap-type:none;}
  .fs{scroll-snap-stop:normal;}

  /* ---- Ritmo de sección: alto NATURAL + aire, no 100vh forzado
     (elimina los huecos gigantes de las secciones cortas) ---- */
  .fs{min-height:auto;justify-content:flex-start;
      padding-block:clamp(5.6rem,15vw,8rem);}
  .fs .fs__in{padding-block:0;}

  /* ---- Ninguna sección se fuerza al alto del viewport en móvil (decisión):
     tampoco el hero. Solo se conserva el respiro bajo el header fijo en la
     primera sección para que su contenido no quede tapado. ---- */
  section.fs:first-of-type{padding-top:calc(var(--header-h) + var(--sp-6));}

  /* ---- CTAs apilados a todo el ancho (patrón Apple en móvil) ---- */
  .btn-row{flex-direction:column;align-items:stretch;}
  .btn-row .btn{width:100%;}

  /* ---- FAB (botón WhatsApp) un punto más chico para estorbar menos el contenido ---- */
  .io-fab{width:5rem;height:5rem;}
  .io-fab svg{width:2.5rem;height:2.5rem;}

  /* ---- Encabezados de sección: nunca más anchos que la pantalla ---- */
  .section__head{max-width:100%;}

  /* ---- FOOTER compacto (patrón Auna): apilado a una columna se volvía
     gigante (~935px). En vez de un stack largo con huecos grandes, lo
     agrupamos: marca a lo ancho arriba, Navegación + Redes en DOS columnas,
     Contacto a lo ancho (su correo/dirección necesitan el ancho), con
     padding y gaps ajustados. El footer es chrome compartido (io.js/io.css,
     sin overrides inline por página) → esta capa lo pisa limpio. ---- */
  .site-footer{padding-block:var(--sp-9) var(--sp-7);}
  .site-footer__grid{grid-template-columns:1fr 1fr;gap:var(--sp-7) var(--sp-6);}
  .site-footer__brand{grid-column:1/-1;}
  .site-footer__brand img{margin-bottom:var(--sp-3);}
  .site-footer__brand p{max-width:52ch;}
  .site-footer__col:nth-child(2){order:1;}          /* Navegación → col 1 */
  .site-footer__col:nth-child(3){order:2;}          /* Redes → col 2 */
  .site-footer__col:nth-child(4){order:3;grid-column:1/-1;}  /* Contacto a lo ancho */
  .site-footer h5{margin-bottom:var(--sp-4);}
  .site-footer__bottom{margin-top:var(--sp-8);}

  /* ---- Peso de títulos MÁS LIGERO en móvil (Gabarito 700→600): en pantalla
     chica el 700 se siente pesado/apretado. Los tokens mono (eyebrow/cred/pk)
     bajan de 600 a 500. ---- */
  h1,h2,h3,h4,h5,.display,.display-xl,.h2,.h3{font-weight:600;}
  .eyebrow,.cred,.mono,.pk{font-weight:500;}

  /* ---- EYEBROW PLANO en TODO el sitio (sin la píldora con caja): solo la
     etiqueta, consistente con el hero del home. Cubre el .eyebrow base y el
     .on-navy de io.css. Overrides por-sección con fondo propio (raros) se
     tratan en la capa de su página. ---- */
  .eyebrow,.eyebrow.on-navy{background:none;padding:0;border-radius:0;}

  /* ---- HEADER en móvil: al BAJAR, la BARRA se DISUELVE (fondo/borde/blur fuera y el
     logo se desvanece) pero el BURGER queda fijo y clickeable → solo el menú
     hamburguesa persiste para navegar. Reaparece al subir o en el tope. La barra
     también crossfadea su glass al pasar sobre secciones oscuras (over-dark/is-dark). ---- */
  html.hdr-ready .site-header{transition:background-color .35s ease,-webkit-backdrop-filter .35s ease,backdrop-filter .35s ease,border-color .35s ease;}
  html.hdr-ready .brand{transition:opacity .3s ease,transform .3s ease;}
  .site-header.hdr-hidden{background:transparent!important;border-bottom-color:transparent!important;
    -webkit-backdrop-filter:blur(0)!important;backdrop-filter:blur(0)!important;pointer-events:none;}
  .site-header.hdr-hidden .brand{opacity:0;transform:translateY(-0.5rem);pointer-events:none;}
  .site-header.hdr-hidden .burger{pointer-events:auto;}

  /* ---- TAP TARGETS (WCAG 2.5.8 · 44px operativo en móvil) ---- */
  /* Dots de carrusel (io-dot/svc-dot) = INDICADORES; el swipe es la interacción real y
     accesible (su contenedor es aria-hidden y el JS les pone tabindex=-1). Se les da un
     hit-area cómodo de 44px de alto SIN agrandar el punto visual (8px), vía ::after.
     Ancho 1.6rem = el pitch → no se solapan horizontalmente entre dots vecinos. */
  .io-dot,.svc-dot{position:relative;}
  .io-dot::after,.svc-dot::after{content:"";position:absolute;left:50%;top:50%;
    width:1.6rem;height:4.4rem;transform:translate(-50%,-50%);}
  /* Chrome compartido: logo, redes e ítems de footer a >=44px de zona táctil. */
  .brand{min-height:4.4rem;}
  .site-footer__soc a{width:4.4rem;height:4.4rem;}
  .site-footer__col a{min-height:4.4rem;display:flex;align-items:center;}
}

/* NOTA sobre la cascada: los estilos POR PÁGINA viven en el <style> inline de
   cada .html, que se carga DESPUÉS de este archivo → ganan el empate de
   especificidad. Por eso los arreglos de una sección concreta (p. ej. el mapa
   de #contacto) van en el inline de su página, no aquí. Aquí solo reglas
   sistémicas que no chocan con overrides de página. */