/* ==========================================================================
   Landing · Móviles y tabletas (≤ 1080px)
   Se carga después de landing-refinements.css. Conserva el lenguaje visual
   (botones 3D grafito, vidrio, íconos 3D) y solo ajusta ritmo, legibilidad,
   áreas táctiles, zonas seguras del dispositivo y respuesta al toque.
   El escritorio (≥ 1081px) no se ve afectado.
   ========================================================================== */

/* 1. Base táctil común a móviles y tabletas
   ------------------------------------------------------------------------ */
@media (max-width: 1080px) {
  html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
  }

  body {
    -webkit-tap-highlight-color: transparent;
    overflow-x: clip;
  }

  body :is(h1, h2, h3, .section-choice__title) {
    text-wrap: balance;
  }

  body .section :is(p, .section-choice__intro) {
    text-wrap: pretty;
  }

  /* Respuesta inmediata al toque en lugar del hover de escritorio. */
  body .section .section-complaint__button {
    touch-action: manipulation;
  }

  body .section .section-complaint__button:active {
    transform: translateY(3px);
    box-shadow: 0 2px 0 #242424, 0 6px 12px rgba(0, 0, 0, 0.14);
    transition-duration: 90ms;
  }

  body .section .section-complaint__button--outline:active {
    box-shadow: 0 1px 0 #ccc, 0 5px 10px rgba(0, 0, 0, 0.08);
  }

  body :is(.section-choice__card, .hero-bottom-links a, .section-certificate__option, .crime-flip-card) {
    touch-action: manipulation;
    transition: transform 160ms ease, box-shadow 160ms ease, background-color 160ms ease;
  }

  body :is(.section-choice__card, .hero-bottom-links a):active {
    transform: scale(0.98);
  }

  body .section-certificate__option:active {
    background-color: rgba(0, 0, 0, 0.045);
  }

  /* Áreas táctiles de al menos 44px (guía de Apple / WCAG 2.5.5). */
  body .form--signin .password button {
    display: grid;
    place-items: center;
    min-width: 2.75rem;
    min-height: 2.75rem;
    padding: 0;
  }

  body footer .social-media a {
    display: inline-grid;
    place-items: center;
    min-width: 2.75rem;
    min-height: 2.75rem;
  }

  body footer .footer-link,
  body footer .footer-legal a {
    display: inline-block;
    padding: 0.6rem 0.35rem;
  }

  body .section-certificate__back {
    min-height: 2.75rem;
  }

  /* El chatbot respeta la zona segura inferior (barra de gestos / notch). */
  body .chatbot-wrapper {
    right: max(1rem, env(safe-area-inset-right));
    bottom: max(1rem, env(safe-area-inset-bottom));
  }

  /* Reserva espacio al final para que el chatbot no tape los enlaces legales. */
  body footer .footer-legal {
    padding-bottom: calc(4.5rem + env(safe-area-inset-bottom));
  }
}

/* 1b. Tarjetas apiladas también en móvil y tableta
   La clase .landing-stack-card la pone el JS solo si no hay movimiento
   reducido. El JS fija las tarjetas más altas que la pantalla por su borde
   inferior (top negativo), así cada sección se lee completa antes de que la
   siguiente la cubra. El hero queda fuera para no mover el inicio de sesión.
   ------------------------------------------------------------------------ */
@media (max-width: 1080px) {
  body :is(.transformation-parallax, .section-complaint, .section-choice).landing-stack-card {
    position: sticky;
    isolation: isolate;
    transform-origin: 50% 0;
    transform: scale(calc(1 - var(--stack-cover, 0) * 0.035));
    will-change: transform;
  }

  /* Pausa breve antes de que entre la siguiente tarjeta. */
  body :is(.section-complaint, .section-choice).landing-stack-card {
    margin-bottom: clamp(2.5rem, 9svh, 5rem);
  }

  body .section-location.landing-stack-card {
    margin-bottom: 0;
  }

  /* Con el apilado ya no hace falta encimar Denuncia Anónima sobre Digital. */
  body #section-anonymous.landing-stack-card {
    margin-top: 0;
  }

  body .section-digital.landing-stack-card {
    padding-bottom: clamp(3.5rem, 12vw, 5rem);
  }

  /* Con un panel de requisitos abierto la tarjeta deja de apilarse: el panel
     empieza en el borde superior y cubre toda la sección. */
  body .section.landing-stack-card.is-showing-requirements {
    position: relative;
    top: auto !important; /* anula el top negativo que el JS deja en línea */
    transform: none;
  }

  body .section.is-showing-requirements .section-certificate__panel {
    bottom: 0;
    height: auto;
    min-height: 100svh;
  }

  /* Las tarjetas más bajas que la pantalla la cubren completa al fijarse
     (si no, asoma la de atrás) y centran su contenido, como en escritorio. */
  body :is(#section-anonymous, #section-5).landing-stack-card {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 100svh;
  }

  /* La tarjeta que entra se lee como tarjeta: borde superior redondeado y
     sombra suave proyectada sobre la anterior. */
  body :is(.section-complaint, .section-choice).landing-stack-card {
    border-radius: 1.5rem 1.5rem 0 0;
    box-shadow: 0 -14px 32px -18px rgba(0, 0, 0, 0.28);
  }
}

/* 2. Tabletas (861px – 1080px)
   ------------------------------------------------------------------------ */
@media (min-width: 861px) and (max-width: 1080px) {
  /* La columna de logos fijaba su ancho mínimo y empujaba la tarjeta de
     acceso fuera de la pantalla (scroll horizontal en iPad Pro vertical). */
  body .hero-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 27rem);
    gap: clamp(1.5rem, 4vw, 3rem);
    width: 100%;
    padding: clamp(4.5rem, 8vh, 6rem) clamp(1.5rem, 4vw, 3rem) 3rem;
  }

  body :is(.hero-left, .hero-right) {
    min-width: 0;
    padding: 0;
  }

  body .hero-left :is(.hero-logos, .hero-logos-fd) {
    max-width: 100%;
  }

  body .hero-left img {
    max-width: 100%;
    height: auto;
  }

  body .hero-left p {
    font-size: 1.0625rem;
    line-height: 1.6;
  }

  body .hero-right form {
    width: 100%;
    max-width: 27rem;
  }

  /* Catálogo de delitos: 4 columnas con nombres legibles. */
  body .section-digital__catalogue #delitos.crime-flip-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  body .crime-flip-card__name {
    font-size: 0.875rem;
  }

  /* Texto de secciones a tamaño de lectura cómodo en pantallas táctiles. */
  body .section :is(.section-complaint__content > p, .section-choice__intro) {
    font-size: 1.0625rem;
    line-height: 1.7;
  }
}

/* Tableta vertical: hay altura de sobra, así que el acceso va debajo de la
   marca y las secciones dejan de estirarse a toda la pantalla. */
@media (min-width: 861px) and (max-width: 1080px) and (orientation: portrait) {
  body .hero-grid {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto;
    justify-items: center;
    align-content: center;
    gap: 2.5rem;
  }

  body .hero-left {
    max-width: 40rem;
    text-align: center;
  }

  body .hero-left p {
    text-align: center;
  }

  body .hero-right {
    width: 100%;
    max-width: 30rem;
  }

  body .hero-right form {
    max-width: 30rem;
  }

  body .section:is(.section-complaint, .section-choice):not(.section-digital, .section-certificate, .section-extravio) {
    height: auto;
    min-height: 0;
    padding-top: clamp(5rem, 9vh, 7rem);
    padding-bottom: clamp(5rem, 9vh, 7rem);
  }

  /* Extravío iguala la altura de Antecedentes Penales; la columna blanca de
     requisitos sigue llegando de arriba abajo. */
  body .section-extravio {
    height: auto;
    min-height: 0;
    padding-block: 0;
  }

  body .section-extravio .section-extravio__intro {
    min-height: clamp(36rem, 53svh, 45rem);
  }

  body .section-location {
    padding-bottom: 0 !important;
  }

  body .section-location .section-complaint__inner {
    padding-bottom: clamp(5rem, 9vh, 7rem);
  }
}

/* 3. Móviles y tabletas pequeñas (≤ 860px)
   ------------------------------------------------------------------------ */
@media (max-width: 860px) {
  /* Botón de menú respetando el notch. */
  body #nav-mobile::before {
    top: max(0.75rem, env(safe-area-inset-top));
    left: max(0.75rem, env(safe-area-inset-left));
  }

  /* ---- Hero ---- */
  /* Los logos ya no rozan el botón de menú. */
  body .hero-grid {
    gap: 1.25rem;
    padding: calc(4.25rem + env(safe-area-inset-top)) 1rem 2rem;
  }

  body .hero-logos {
    margin-top: 0;
  }

  body .hero-left p {
    max-width: 34rem;
    margin: 0.75rem auto 0;
    font-size: 1rem;
    line-height: 1.55;
    text-shadow: 0 1px 10px rgba(0, 0, 0, 0.35);
  }

  /* ---- Tarjeta de Llave Digital ---- */
  body .form--signin {
    padding: 1.5rem 1.25rem 1.25rem;
    border-radius: 1.25rem;
  }

  body .form--signin label {
    margin-bottom: 0.35rem;
    font-size: 0.9375rem;
    font-weight: 500;
  }

  /* 16px y 48px de alto: sin zoom automático en iOS y fácil de tocar. */
  body .form--signin input:not([type='checkbox']) {
    min-height: 3rem;
    padding: 0.75rem 0.9rem;
    font-size: 16px;
  }

  body .form--signin .password input {
    padding-right: 3.25rem;
  }

  body .form--signin .password button {
    top: auto;
    right: 0.15rem;
    bottom: 0.15rem;
  }

  body .form--signin .password button svg {
    width: 1.4rem;
    height: 1.4rem;
  }

  body .form--signin .checkbox-wrapper {
    justify-content: flex-start !important;
    margin: 1rem 0 1.15rem !important;
  }

  body .form--signin .label-text {
    font-size: 0.875rem !important;
    line-height: 1.45;
  }

  body .form--signin button.signin {
    min-height: 3rem;
    font-size: 0.9375rem;
    font-weight: 600;
  }

  body .form--signin .no-account,
  body .form--signin .forgot-password {
    justify-content: space-between;
    gap: 0.75rem;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(85, 85, 85, 0.14);
    font-size: 0.875rem;
    text-align: left;
  }

  body .form--signin .forgot-password {
    margin-top: 0;
    padding-top: 0.5rem;
    border-top: 0;
  }

  body .form--signin :is(.no-account, .forgot-password) p {
    margin: 0;
    line-height: 1.35;
  }

  body .form--signin .forgot-password p::first-letter {
    text-transform: uppercase;
  }

  body .form--signin .no-account a.signup,
  body .form--signin .forgot-password a {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    min-height: 2.75rem;
    margin: 0;
    padding: 0.5rem 0.9rem;
    font-weight: 600;
    text-align: center;
  }

  body .form--signin .forgot-password a {
    text-decoration: underline;
    text-underline-offset: 3px;
  }

  /* ---- Accesos rápidos bajo el hero ---- */
  body .hero-bottom-links {
    gap: 0.6rem;
    padding: 1rem;
  }

  body .hero-bottom-links a {
    min-height: 3.75rem;
    border-radius: 0.75rem;
    font-size: 0.8125rem;
    line-height: 1.3;
  }

  /* ---- Ritmo vertical de las secciones ---- */
  body .section :is(.section-complaint__content > h2, .section-choice__title) {
    font-size: clamp(1.75rem, 8vw, 2.25rem);
    line-height: 1.12;
    letter-spacing: -0.02em;
  }

  body .section :is(.section-complaint__content > p, .section-choice__intro, .section-anonymous__follow-up) {
    max-width: 36rem;
    font-size: 1rem;
    line-height: 1.7;
  }

  body .section-complaint__icon img {
    width: clamp(6.5rem, 30vw, 8rem);
    height: auto;
  }

  body .section .section-complaint__action {
    margin-top: 1.75rem;
  }

  /* Sin el apilado sticky de escritorio, las secciones no necesitan ocupar
     toda la pantalla: se elimina el aire muerto al final de cada una. */
  body .section:is(.section-complaint, .section-choice):not(.section-digital) {
    min-height: 0;
    padding-top: clamp(4rem, 14vw, 5.5rem);
    padding-bottom: clamp(3.5rem, 12vw, 4.5rem);
  }

  body .section-location {
    padding-bottom: 0 !important;
  }

  body .section-location .section-complaint__inner {
    padding-bottom: clamp(3.5rem, 12vw, 4.5rem);
  }

  /* ---- Tarjetas de Constancia de Extravío ---- */
  body .section-choice__card {
    border-radius: 0.875rem;
  }

  /* ---- Menú de requisitos / validación ---- */
  body :is(.section-certificate, .section-extravio) .section-certificate__option {
    min-height: 3.5rem;
    border-radius: 0.75rem;
  }

  body :is(.section-certificate, .section-extravio) .section-certificate__option + .section-certificate__option {
    border-top: 1px solid rgba(0, 0, 0, 0.07);
  }

  /* ---- Catálogo de delitos ---- */
  body .section-digital__catalogue #delitos.crime-flip-grid {
    gap: 0.6rem;
  }

  /* ---- Pie de página ---- */
  body footer .social-media {
    gap: 0.25rem;
  }
}

/* 4. Tabletas pequeñas y móviles grandes en horizontal (600px – 860px):
   se aprovecha el ancho extra sin estirar las líneas de texto.
   ------------------------------------------------------------------------ */
@media (min-width: 600px) and (max-width: 860px) {
  body .hero-bottom-links a {
    flex-basis: calc(33.333% - 0.6rem);
  }

  body .section-digital__catalogue #delitos.crime-flip-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  body .section-choice__options {
    max-width: 36rem;
    margin-inline: auto;
  }

  body :is(.section-certificate, .section-extravio) .section-certificate__menu {
    max-width: 36rem;
    margin-inline: auto;
  }
}

/* 5. Teléfonos (≤ 480px): accesos secundarios de la tarjeta apilados y
   centrados para que ningún enlace se corte.
   ------------------------------------------------------------------------ */
@media (max-width: 480px) {
  body .form--signin .no-account,
  body .form--signin .forgot-password {
    flex-direction: column;
    gap: 0.35rem;
    text-align: center;
  }

  body .form--signin .forgot-password {
    gap: 0;
    padding-top: 0.75rem;
  }
}

/* 6. Móviles compactos (≤ 380px: iPhone SE, Android pequeños)
   ------------------------------------------------------------------------ */
@media (max-width: 380px) {
  body .hero-grid {
    padding-inline: 0.75rem;
  }

  body .form--signin {
    padding: 1.25rem 1rem 1rem;
  }

  body .section:is(.section-complaint, .section-choice) {
    padding-inline: 1rem;
  }

  body .chatbot-bubble {
    width: 54px;
    height: 54px;
  }
}

/* 7. Movimiento reducido: sin desplazamientos al tocar.
   ------------------------------------------------------------------------ */
@media (max-width: 1080px) and (prefers-reduced-motion: reduce) {
  body :is(.section-choice__card, .hero-bottom-links a, .section .section-complaint__button):active {
    transform: none;
  }
}