/* ==========================================================
   mobile.css — ajustes de móvil real (iOS + Android)
   Se carga después de pilot.css. Es aditivo: no cambia nada
   en escritorio y puede borrarse sin romper el resto.
   ========================================================== */

/* --- 1. iOS deja de hacer zoom al tocar un campo ----------
   Safari amplía la página cuando un input tiene menos de 16px.
   Al volver del zoom la pantalla queda descuadrada y el usuario
   cree que la web se ha roto. Con 16px exactos no ocurre. */
@media (max-width: 860px) {
  input, select, textarea, button {
    font-size: 16px !important;
  }
  /* los campos pequeños de las barras de chat mantienen su alto */
  .chatline input, .askline input {
    padding-top: .55rem;
    padding-bottom: .55rem;
  }
}

/* --- 2. Muescas y barra de gestos (iPhone X en adelante) ---
   Sin esto, la barra de piloto se mete bajo la muesca y el
   botón flotante queda debajo de la raya de inicio. */
#pilotbar {
  padding-top: calc(.6rem + env(safe-area-inset-top));
  padding-left: calc(1.4rem + env(safe-area-inset-left));
  padding-right: calc(1.4rem + env(safe-area-inset-right));
}
body.has-pilot {
  padding-top: calc(var(--pilot-h) + env(safe-area-inset-top));
}
body.has-pilot nav {
  top: calc(var(--pilot-h) + env(safe-area-inset-top)) !important;
}
/* Con el aviso retirado, el menú sube — pero no hasta el borde: se queda
   bajo la muesca. Si no, en un iPhone con notch el logotipo desaparece
   debajo del recorte de la pantalla. */
body.has-pilot.pilot-fuera nav {
  top: env(safe-area-inset-top) !important;
}
body.has-pilot.pilot-fuera .mnav {
  top: env(safe-area-inset-top);
  max-height: calc(100dvh - env(safe-area-inset-top));
}
nav {
  padding-left: calc(1.4rem + env(safe-area-inset-left));
  padding-right: calc(1.4rem + env(safe-area-inset-right));
}
.sticky-cta {
  bottom: calc(1rem + env(safe-area-inset-bottom)) !important;
  right: calc(1rem + env(safe-area-inset-right)) !important;
}

/* --- 2bis. Nada flotando mientras se lee, en móvil ---------
   El botón que aparecía al bajar tapaba texto y se movía con el
   scroll: en una pantalla pequeña compite con lo que la persona
   está intentando leer. Se retira solo en móvil — en escritorio
   sobra sitio y ahí sí ayuda.
   Los botones normales de cada sección siguen intactos, así que
   no se pierde ninguna vía para entrar. */
@media (max-width: 860px) {
  .sticky-cta {
    display: none !important;
  }
}

/* --- 3. El menú móvil, entero y alcanzable ------------------
   Tres cosas lo rompían: se cortaba por abajo sin poder
   desplazarse, quedaba tapado por la barra de piloto, y en
   iPhone la última opción caía bajo la raya de inicio.

   Ahora ocupa la pantalla completa: es un menú, no un desplegable.
   En un móvil no hay sitio para medias tintas, y así ninguna
   opción se queda fuera por larga que sea la lista. */
.mnav {
  top: 0;
  bottom: 0;
  height: 100dvh;
  max-height: 100dvh;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  background: rgba(31, 10, 31, .985);
  backdrop-filter: blur(10px);
  padding-top: calc(1rem + env(safe-area-inset-top));
  padding-bottom: calc(2rem + env(safe-area-inset-bottom));
  padding-left: calc(1.4rem + env(safe-area-inset-left));
  padding-right: calc(1.4rem + env(safe-area-inset-right));
  gap: .1rem;
}
/* con la barra de piloto puesta, arranca justo debajo de ella */
body.has-pilot .mnav {
  top: calc(var(--pilot-h) + env(safe-area-inset-top));
  height: auto;
  max-height: calc(100dvh - var(--pilot-h) - env(safe-area-inset-top));
}

/* Opciones cómodas de tocar y de leer */
.mnav a {
  font-size: 1.15rem !important;
  padding: 1rem .2rem !important;
  min-height: 52px;
  display: flex !important;
  align-items: center;
}
/* el botón de acción no se pierde entre los enlaces */
.mnav a.btn,
.mnav a.small {
  justify-content: center;
  margin-top: 1.2rem;
  padding: 1rem 1.6rem !important;
  border-bottom: none !important;
}
.mnav .mclose {
  min-width: 48px;
  min-height: 48px;
  font-size: 1.7rem !important;
}
/* mientras el menú está abierto, el fondo no se mueve por detrás */
body:has(.mnav.on) {
  overflow: hidden;
}

/* --- 4. Nada se desborda a lo ancho ------------------------
   Se resuelve en el origen, acotando lo que puede desbordar.

   NO poner overflow en html ni en body. Probado y descartado:
   · `overflow-x:hidden` los convierte en contenedores de scroll,
     rompe position:sticky (la subnav de Crece) y atasca el scroll.
   · `overflow-x:clip` arregla eso, pero recorta los elementos
     con position:fixed — y el menú móvil salía cortado.
   Con acotar imágenes y tablas basta: comprobado que ninguna
   página tiene desbordamiento horizontal sin esas reglas. */
img, svg, video, pre { max-width: 100%; }

/* OJO con las tablas: aquí había un `table{display:block;overflow-x:auto}`
   que parecía inofensivo y rompía la comparativa de Crece. Una tabla en
   `display:block` deja de ser tabla: se encoge al contenido en vez de
   ocupar su ancho, y quedaba media tarjeta vacía a la derecha.
   Las tablas de la web ya viven dentro de un contenedor con scroll propio
   (.compare), así que no hacía falta nada. */
table { max-width: 100%; }

/* --- 5. Zonas táctiles cómodas -----------------------------
   44px es el mínimo recomendado por Apple y Google. Importa
   sobre todo con la audiencia sénior. */
@media (max-width: 860px) {
  nav a, .mnav a, .btn, button, .chip, .wnav button {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
}

/* --- 6. Alturas de pantalla correctas en iOS ---------------
   100vh no descuenta la barra de direcciones de Safari:
   el contenido queda cortado. 100dvh sí. */
@supports (height: 100dvh) {
  .fullh, .shell { min-height: 100dvh; }
}

/* ==========================================================
   7. RITMO DE LECTURA EN MÓVIL
   El escritorio tiene el texto en columnas y respira solo.
   En un móvil todo cae en una sola columna, y sin más aire
   la página se lee como un muro. Aquí se separa y se agranda.
   ========================================================== */
@media (max-width: 760px) {

  /* 7.1 Las secciones se separan MÁS en móvil, no menos.
     El diseño original las apretaba de 5rem a 3.6rem. */
  section {
    padding-top: 4.6rem !important;
    padding-bottom: 4.6rem !important;
  }

  /* 7.2 Márgenes laterales más generosos: el texto deja de
     tocar el borde de la pantalla. */
  .wrap {
    padding-left: 1.5rem !important;
    padding-right: 1.5rem !important;
  }

  /* 7.3 Cuerpo de texto más grande y más aireado.
     Pesa sobre todo con la audiencia sénior. */
  body { font-size: 1.02rem; }
  p, li, .sub, .lead {
    line-height: 1.75;
    max-width: 34ch;
  }
  p + p { margin-top: 1.05rem; }

  /* los párrafos centrados mantienen su centro al acotarlos */
  .hero-inner p, .nos-head p, [style*="text-align:center"] p {
    margin-left: auto;
    margin-right: auto;
  }

  /* 7.4 Aire entre un titular y lo que viene debajo */
  h1, h2, h3 { line-height: 1.22; text-wrap: balance; }
  h2 { margin-bottom: .85rem; }
  h2 + p, h3 + p, .kicker + h2 { margin-top: .7rem; }
  .kicker { margin-bottom: .55rem; letter-spacing: .09em; }

  /* 7.5 Las tarjetas dejan de ir pegadas unas a otras */
  .grid, .plans, .ntg, .cards { gap: 1.35rem !important; }
  .grid > *, .plans > *, .ntg > * { padding: 1.35rem 1.25rem; }

  /* 7.6 Listas de puntos con separación real */
  .ticks span, .chips > *, .okp-chips { margin-bottom: .5rem; }
  ul, ol { padding-left: 1.15rem; }
  li + li { margin-top: .55rem; }

  /* 7.7 Bloques a dos columnas: si el diseño no los apiló ya,
     se apilan aquí con aire entre las dos mitades. */
  .about, .product, .hgrid, .line-block {
    grid-template-columns: 1fr !important;
    gap: 2.2rem !important;
  }
}

/* En pantallas muy pequeñas se afina un punto más */
@media (max-width: 420px) {
  section { padding-top: 3.8rem !important; padding-bottom: 3.8rem !important; }
  p, li, .sub, .lead { max-width: 31ch; }
}

/* --- 9. Una raya entre bloques (2026-08) --------------------
   El aire ya lo pone el apartado 7. Lo que faltaba era una señal:
   con scroll largo el ojo no distingue 60 px de 90 px, así que
   acababa una idea y empezaba otra sin que se notara.

   Una raya finísima lo resuelve sin añadir peso. Va con margen
   negativo para colocarse en la costura entre las dos secciones,
   y ese margen tiene que coincidir con el padding real de arriba
   (4,6rem · 3,8rem en pantallas pequeñas) o la raya baila. */
@media (max-width: 760px) {
  section + section::before {
    content: "";
    display: block;
    height: 1px;
    background: rgba(255, 255, 255, .09);
    margin: -4.6rem auto 4.6rem;
    max-width: calc(100% - 3rem);
  }
  /* Las que traen fondo propio ya se separan solas: una raya encima
     de un cambio de color se ve como un fallo, no como una guía. */
  section.lt + section::before,
  section + section.lt::before,
  section.benefband + section::before,
  section + section.benefband::before { display: none; }

  section > .wrap > .kicker,
  section > .wrap > .seck { margin-top: .2rem; }

  .pil, .pil2, .plans, .kpis, .plc-grid, .mods, .bcards { gap: 1.15rem; margin-top: 1.9rem; }
}

@media (max-width: 420px) {
  section + section::before { margin: -3.8rem auto 3.8rem; }
}

/* --- 8. Los prototipos, sin prisa ---------------------------
   Los tiempos viven en app.js (se doblaron en agosto). Aquí solo
   se suaviza el cruce entre imágenes: a 3 s de permanencia una
   transición de 0,35 s se notaba brusca. */
@media (max-width: 760px) {
  .caro img { transition: opacity .9s ease; }
  .ph { transition: background .45s ease, border-color .45s ease; }
}