/* ==========================================================================
   m1-movil.css — capa MÓVIL compartida del sitio Indemnis (M1, 13-oct-2026)
   Se carga DESPUÉS del <style> de cada página. Escritorio (>768 px) no cambia.
   Sistema: tokens (:root) + un breakpoint (768 px) + componentes.
   - Tokens móviles: --nav-h, --tap (44 px), --fab, --fab-room (hueco del chat), --text-*.
   - Hero: la foto es FONDO detrás del texto (no un bloque aparte); el hero llena
     la primera pantalla (svh) y reserva abajo el hueco del botón de chat.
   - Menú: hamburguesa en TODAS las páginas con menú (antes sólo la portada).
   - Texto de párrafo >= 16 px, inputs >= 16 px (iOS no hace zoom), objetivos >= 44 px.
   Los textos NO se tocan: viven en AFIRMACIONES.json.
   ========================================================================== */

:root{
  --nav-h:4.25rem;
  --tap:44px;
  --fab:3rem;
  --fab-gap:1rem;
  --safe-b:env(safe-area-inset-bottom,0px);
  --safe-r:env(safe-area-inset-right,0px);
  --fab-room:calc(var(--fab) + 2 * var(--fab-gap) + var(--safe-b));
}

/* —— base (todas las anchuras): los elementos nuevos sólo existen en móvil —— */
.nav__hamburger{display:none;width:var(--tap);height:var(--tap);align-items:center;justify-content:center;border-radius:var(--radius-full,9999px)}
.portada__cta,.lp-hero__cta{display:none}

@media(max-width:768px){
  /* ---- tokens tipográficos: el piso de lectura en móvil es 16 px ---- */
  :root{
    --text-xs:.8125rem;
    --text-sm:1rem;
    --text-base:1rem;
  }
  /* texto corrido con tamaño propio por debajo de 16 px (descripciones, notas, avisos) */
  :is(p,li,dd,blockquote)[class*="desc"],
  :is(p,li,dd,blockquote)[class*="note"],
  :is(p,li,dd,blockquote)[class*="privacy"],
  :is(p,li,dd,blockquote)[class*="independence"],
  :is(p,li,dd,blockquote)[class*="copy"],
  p[style*="--text-xs"]{font-size:max(1rem,var(--text-sm))!important}


  /* ---- menú ---- */
  .nav__inner{min-height:var(--nav-h)}
  .nav__hamburger{display:flex}
  .nav__right{display:none}
  .nav__right.open{display:flex;flex-direction:column;align-items:stretch;gap:0;position:absolute;top:100%;left:0;right:0;
    background:var(--color-surface);padding:var(--space-2) var(--space-5) var(--space-4);
    border-bottom:1px solid var(--color-divider);box-shadow:var(--shadow-lg);
    max-height:calc(100svh - var(--nav-h));overflow-y:auto;overscroll-behavior:contain}
  .nav__right.open .nav__link{display:flex;align-items:center;min-height:var(--tap);font-size:1rem;color:var(--color-text)}
  .nav__right.open .nav__link::after{display:none}
  .nav__right.open .nav__cta{justify-content:center;min-height:var(--tap);margin-top:var(--space-2)}
  .nav__right.open .nav__theme{align-self:flex-start}
  .nav__theme,.header__theme{width:var(--tap);height:var(--tap)}
  .nav__logo,.header__brand{min-height:var(--tap)}

  /* ---- pie: enlaces con objetivo táctil ---- */
  .footer a{display:inline-flex;align-items:center;justify-content:center;min-height:var(--tap);min-width:var(--tap)}
  .footer__links{gap:var(--space-4);flex-wrap:wrap}
  .footer__social a{justify-content:center;min-width:var(--tap)}
  body:has(.chat-fab) .footer{padding-bottom:calc(var(--space-8) + var(--fab-room))}

  /* ---- rejillas con columnas fijadas en línea (style=...) desbordaban en móvil ---- */
  .invest__grid{grid-template-columns:1fr!important}

  /* ---- botón flotante del chat: más chico, con margen seguro ---- */
  body .chat-fab{width:var(--fab);height:var(--fab);right:calc(var(--fab-gap) + var(--safe-r));bottom:calc(var(--fab-gap) + var(--safe-b))}
  body .chat-fab svg{width:24px;height:24px}
  body .scroll-top{right:calc(var(--fab-gap) + var(--safe-r));bottom:calc(2 * var(--fab-gap) + var(--fab) + var(--safe-b))}
  body .chat-panel .chat-input{font-size:1rem}
  body .chat-panel .chat-header__close{width:var(--tap);height:var(--tap)}
  body .chat-panel .chat-send{width:var(--tap);height:var(--tap)}
  body .chat-panel .chat-handoff__btn{display:inline-flex;align-items:center;min-height:var(--tap)}

  /* ---- formularios: iOS no hace zoom con >= 16 px ---- */
  input:not([type=checkbox]):not([type=radio]):not([type=file]),select,textarea,
  .form__input,.form__select,.form__textarea{font-size:1rem}
  .form__input,.form__select{min-height:3rem}
  .form__submit,.form button[type=submit]{min-height:3rem}
  .form__expand-btn{min-height:var(--tap)}

  /* ---- tabla comparativa: desplazable en horizontal en vez de desbordar la página ---- */
  .compare__table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;font-size:var(--text-sm)}
  .compare__table th,.compare__table td{min-width:9.5rem;vertical-align:top}
  .compare__table th:first-child,.compare__table td:first-child{position:sticky;left:0;z-index:1;background:var(--color-surface-2)}

  /* ==== PORTADA (index): foto de fondo detrás del texto, CTA en la primera pantalla ==== */
  .portada{align-items:flex-end;
    min-height:max(28rem,calc(100vh - var(--nav-h) - 1px));
    min-height:max(28rem,calc(100svh - var(--nav-h) - 1px))}
  .portada__foto{inset:0 0 auto 0;height:clamp(18rem,64%,34rem);object-position:50% 38%;
    -webkit-mask-image:linear-gradient(to bottom,#000 72%,transparent 100%);
            mask-image:linear-gradient(to bottom,#000 72%,transparent 100%)}
  .portada__velo{background:linear-gradient(0deg,rgba(8,20,22,.94) 0%,rgba(8,20,22,.82) 42%,rgba(8,20,22,.35) 66%,rgba(8,20,22,0) 84%)}
  .portada__texto{padding:var(--space-8) var(--space-5) calc(var(--space-4) + var(--fab-room))}
  .portada__texto>*,.portada .hero__headline{max-width:none}
  .portada .hero__label{margin-bottom:var(--space-3);letter-spacing:.1em}
  .portada .hero__headline{font-size:clamp(2rem,8.4vw,2.6rem);margin-bottom:var(--space-3)}
  .portada .hero__sub{font-size:1.0625rem;line-height:1.5}
  .portada__cta{display:flex;align-items:center;justify-content:center;gap:var(--space-2);width:100%;min-height:3rem;margin-top:var(--space-5);
    padding:var(--space-2) var(--space-6);border-radius:var(--radius-full,9999px);background:var(--color-emergency);color:#fff;
    font-size:1rem;font-weight:700;box-shadow:0 6px 20px rgba(0,0,0,.28)}
  .portada__cta:hover,.portada__cta:focus-visible{background:var(--color-emergency-hover)}
  .portada + .hero{padding-top:var(--space-8)}

  /* ==== ENCABEZADO DE PÁGINAS DE ESTADO (lp-hero): titular + CTA arriba ==== */
  .lp-hero{padding-top:var(--space-8);padding-bottom:var(--space-8)}
  .lp-hero__tag{margin-bottom:var(--space-3)}
  .lp-hero__title{margin-bottom:var(--space-5)}
  .lp-hero__cta{display:flex;align-items:center;justify-content:center;width:100%;min-height:3rem;margin-bottom:var(--space-5);
    padding:var(--space-2) var(--space-6);border-radius:var(--radius-full,9999px);background:var(--color-primary);color:#fff;
    font-size:1rem;font-weight:700}
  .lp-hero__cta:hover,.lp-hero__cta:focus-visible{background:var(--color-primary-hover)}
  .lp-cta__btn{min-height:3rem}
}

@media(max-width:360px){
  .container,.hero,.lp-hero,.lp-section{padding-inline:var(--space-4)}
}