/* Mejoras para móvil. Capa aparte: no altera style.css de la entrega. */

@media (max-width: 900px) {

  /* --- Desborde horizontal ---------------------------------------------
     La página se salía 6px a la derecha en los tres tamaños. El culpable
     es .moments, no el retrato de portada: ese .scene mide más que la
     pantalla A PROPÓSITO —se recorta con overflow:hidden para que el
     retrato se vea a escala— y limitarlo rompía el encuadre del hero. */
  /* Con `hidden` el overflow-y computa a `auto`: el body pasa a ser un
     contenedor de scroll propio y el gesto táctil sobre el canvas del
     hero dejaba de desplazar la página. `clip` recorta sin crear
     contenedor de scroll, así que el gesto sigue llegando al documento. */
  html, body { overflow-x: clip; }
  .moments { overflow-x: clip; }
  .moment-timeline {
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scroll-padding-left: 6%;
  }
  .moment-tab { scroll-snap-align: start; }

  /* --- Legibilidad ------------------------------------------------------
     Había 20 elementos por debajo de 13px. Las versalitas decorativas
     pueden vivir en 13px porque llevan tracking abierto, pero el texto
     que se lee de corrido y las etiquetas de formulario necesitan más. */

  /* texto corrido y avisos: se leen, no se ojean */
  .moment-footer > p { font-size: 14px; line-height: 1.5; }
  .orientation-preview { font-size: 14px; line-height: 1.5; }
  .night-thought { font-size: 13px; line-height: 1.5; }
  .sensation-detail p, .habit-copy p, .nerve-explanations p { font-size: 15px; }
  .site-footer, .site-footer nav a, .footer-brand span { font-size: 14px; }

  /* etiquetas de formulario */
  .orientation-fields label { font-size: 13.5px; }
  .orientation-consent, .orientation-consent label { font-size: 13.5px; }

  /* nombres del carrusel: se leen y se tocan */
  .moment-tab > span + span { font-size: 13px; line-height: 1.35; }

  /* rótulos en versalitas: suben al mínimo legible, conservan el tracking */
  .brand span { font-size: 13px; }
  .section-caption, .nerve-kicker, .unseen-eyebrow,
  .moment-eyebrow, .progress-name, .community-story figcaption span {
    font-size: 13px;
  }

  .card-label .sensation-name { font-size: 20px; }

  /* --- Zonas táctiles ---------------------------------------------------
     Los enlaces del pie medían 15px de alto y la casilla de consentimiento
     17×17. La recomendación mínima es 44px.                            */
  .site-footer nav a { display: inline-block; padding: 12px 0; min-height: 44px; }
  .orientation-consent { align-items: flex-start; gap: 12px; }
  .orientation-consent input[type="checkbox"] {
    width: 24px; height: 24px; flex: 0 0 24px; margin-top: -2px;
    position: relative;
  }
  /* Área táctil de 44px sin agrandar la casilla: el recuadro sigue
     midiendo 24px pero el dedo acierta en un objetivo cómodo. */
  .orientation-consent input[type="checkbox"]::after {
    content: "";
    position: absolute;
    inset: -10px;
  }
  .orientation-consent label, .orientation-consent span { line-height: 1.5; }
  .moment-controls button, .card-toggle, .community-close, .soundless {
    min-width: 44px; min-height: 44px;
  }

  /* --- Formulario -------------------------------------------------------
     16px evita que iOS haga zoom automático al enfocar un campo.       */
  .orientation-fields input,
  .orientation-fields select,
  .orientation-fields textarea { font-size: 16px; min-height: 48px; }
  .orientation-submit { min-height: 52px; width: 100%; justify-content: center; }

  /* --- Altura real del viewport ----------------------------------------
     Evita el salto cuando aparece y desaparece la barra del navegador. */
  .hero { min-height: calc(var(--vh, 1vh) * 100); }
}

/* Pantallas estrechas: el carrusel de momentos entra completo. */
@media (max-width: 430px) {
  .moment-timeline { grid-template-columns: repeat(6, minmax(76px, 1fr)); }
  .moment-tab { padding: 12px 4px 15px; }
  .moment-tab .moment-time { font-size: 17px; }
}

/* Reduce el trabajo de composición en equipos modestos. */
@media (max-width: 900px) and (prefers-reduced-motion: no-preference) {
  .nerve-backdrop canvas { will-change: auto; }
}

/* El retrato a altura completa (`height:100%`) sobre un móvil deja una caja
   de ~390x1200: con object-fit:cover la foto 16:9 se amplía 5,5x y la cara
   queda fuera del recorte, solo se ve un parche de piel. Encima, el velo
   horizontal de papel (.96 -> .77 -> .2) cubre todo el ancho y la apaga.
   Se recupera la banda que usaban los breakpoints anteriores del diseño y
   el velo pasa a ser vertical: foto limpia arriba, papel donde va el texto. */
@media (max-width: 760px) {
  .unseen-portrait { height: 700px; inset: 0 0 auto; }
  .unseen-portrait img { object-position: 60% center; }
  .unseen-content { padding-top: 500px; }
  .unseen:before {
    background:
      linear-gradient(180deg, #283938 0%, rgba(40,57,56,.5) 60px, rgba(40,57,56,0) 190px),
      linear-gradient(180deg, rgba(222,218,211,0) 300px, rgba(222,218,211,.45) 400px,
        rgba(222,218,211,.9) 490px, #dedad3 600px);
  }
}

/* Retirada la invitación a la comunidad, la fotografía de cierre se queda
   sola en una retícula pensada para dos columnas (1.75fr 1fr): ocupaba solo
   la primera y dejaba un hueco a la derecha. Pasa a una columna, con un
   encuadre más ancho porque a ancho completo el 1.45 original daría una
   imagen desproporcionadamente alta. El móvil conserva el suyo. */
.community-grid { grid-template-columns: 1fr; }
@media (min-width: 761px) {
  .community-story { aspect-ratio: 1.95; }
}