/* ============================================================
   Tablet & mobile (≤1023px) — vertical stack:
   bloque de marca arriba (centrado), mockup abajo,
   bocadillos SIGUEN superpuestos al mockup (matches Figma 4303:3685).
   ============================================================ */
@media (max-width: 1023px) {
  .hero {
    /* Layout en column flow: inner arriba, footer en orden de
       documento debajo. Sin min-height: 100vh, el hero se ajusta al
       contenido + footer + gap. Esto hace IMPOSIBLE geométricamente
       que el footer se solape con el inner — son hermanos secuenciales
       en el flow. */
    height: auto;
    min-height: 0;
    flex-direction: column;
    align-items: stretch;
    padding-block: clamp(0.75rem, 2vw, 1.5rem) 0;
    /* IMPORTANTE: hero transparente en mobile. El gradiente vive en
       body (más abajo), un único gradiente que cubre todo el viewport
       — sin transiciones visibles entre hero y zona debajo del footer. */
    background: transparent;
  }

  /* Gradiente del hero movido al body: garantiza un único gradiente
     que cubre todo el alto del documento. Si hero+footer son más
     cortos que 100vh, el body con min-height: 100vh asegura que el
     gradiente llegue hasta el bottom del viewport sin corte. Hero
     transparente arriba muestra este mismo gradiente atrás. */
  body {
    min-height: 100vh;
    background:
      linear-gradient(-22deg, #EBBA68 22%, #FFF6E3 60%, #FFFFFF 97%),
      #FFFFFF;
  }

  /* En mobile/tablet la textura también vive dentro del hero (inset:0)
     para no recortar el mockup PNG ni filtrarse al body. */
  .hero__bg-texture {
    inset: 0;
  }

  /* Máscara difuminada en el borde inferior: como ahora el hero es más
     corto que el viewport en mobile (footer en flow + body extiende el
     gradiente abajo), la textura terminaba abrupta justo donde el hero
     se corta. El fade en los últimos ~25 % del hero hace que los trazos
     se desvanezcan suavemente y el corte sea imperceptible — sólo se
     percibe el gradiente del body continuándose. */
  .hero__bg-texture {
    -webkit-mask-image: linear-gradient(
      to bottom,
      #000 0%,
      #000 75%,
      transparent 100%
    );
            mask-image: linear-gradient(
      to bottom,
      #000 0%,
      #000 75%,
      transparent 100%
    );
  }

  /* En mobile el aspect-ratio del hero (vertical) difiere mucho del
     aspect-ratio nativo del SVG (también vertical pero con otra
     proporción), y `background-size: 100% 100%` deforma los trazos al
     estirarlos. Aquí preservamos el aspect-ratio nativo del SVG
     (1468.98 / 1994.02) en el box del ::before — así el SVG no se
     deforma — y dimensionamos el box lo suficientemente grande para
     que, tras la rotación -90deg, la textura se extienda más allá del
     hero en ambos ejes. El overflow:hidden del contenedor recorta el
     sobrante; sólo se ve la zona central, donde los trazos pasan sin
     terminar. width = max(150cqh, 150cqw) garantiza cobertura tanto en
     mobile portrait como en tablet más cuadrado.

     flex-shrink: 0 es necesario porque el contenedor padre usa display:
     flex; sin esto el flex item se contrae hasta el ancho del flex box
     y la escala no surte efecto en el eje horizontal. */
  .hero__bg-texture::before {
    aspect-ratio: 1468.98 / 1994.02;
    width: max(150cqh, 150cqw);
    height: auto;
    flex-shrink: 0;
  }

  .hero__inner {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
    gap: clamp(1.25rem, 3vh, 2rem);
    /* Padding-block normal — el footer ya no es absoluto, fluye debajo
       y se separa con su propio padding-top. */
    padding-block: clamp(1.5rem, 4vw, 2.5rem);
    /* En stack vertical no hace falta compensación óptica: ambos bloques
       quedan centrados horizontalmente por sí mismos. */
    transform: none;
  }

  /* El bloque de marca pasa ARRIBA del mockup. Su ancho coincide con el
     ancho del logo para que el botón Google Play también herede ese ancho
     (vía align-self: stretch del .hero__cta) y ambos queden centrados. */
  .hero__brand {
    order: -1;
    max-width: 320px;
    margin-inline: auto;
    align-items: center;
    gap: clamp(1.25rem, 4vw, 2rem);
  }

  /* Logo + "By SIGAT" alineados a la derecha (como en Figma) */
  .hero__brand-mark {
    align-items: flex-end;
    gap: clamp(0.5rem, 1.5vw, 0.875rem);
  }

  .hero__brand-logo {
    width: 100%;
    max-width: 320px;
  }

  /* CTA estira al ancho del bloque de marca (= ancho del logo). */
  .hero__cta {
    align-self: stretch;
    align-items: stretch;
  }

  .btn-store {
    width: 100%;
    justify-content: center;
  }

  .site-footer {
    /* Footer fluye en orden de documento (no absoluto). Imposible
       solaparse con el inner. El padding-top crea el gap visible al
       mockup; padding-bottom mantiene aire abajo del © Sirumatek. */
    position: static;
    padding-block: clamp(2rem, 5vw, 3rem) clamp(1rem, 2.5vw, 1.5rem);
  }

  /* Mockup en tablet (768–1023): se usa el PNG desktop (1188×1080).
     Edge-to-edge para aprovechar el ancho de iPad sin tocar `--pad-x`
     del resto del contenido.

     max-height: capa la altura del mockup para que TODO el hero
     (paddings + brand + gap + visual + pb + footer) quepa en 100vh y
     el footer NO requiera scroll. 24rem reserva ≈ hero pt + inner pt
     + brand + gap + hero pb. Si el natural del mockup excede ese
     cap, la imagen se mantiene completa (object-fit: contain) y
     aparece letterbox horizontal en el visual — preferible al scroll.
  */
  .hero__visual {
    width: calc(100% + 2 * var(--pad-x));
    max-width: none;
    margin-inline: calc(-1 * var(--pad-x));
    aspect-ratio: 1188 / 1080;
  }
}

/* ============================================================
   Phones (≤767px): el <picture> carga el PNG mobile (1188×1114).
   Sólo cambiamos el aspect-ratio del visual a la proporción del PNG
   mobile — el ancho edge-to-edge se hereda del bloque anterior. Es
   importante mantener edge-to-edge: el PNG tiene la sombra de los
   phones/burbujas extendida hasta el borde del archivo, así que si
   el visual deja un margen libre la sombra termina abruptamente
   contra el fondo y se percibe como recorte. Con edge-to-edge la
   sombra muere en el borde del viewport, que sí es un límite
   visualmente natural.
   ============================================================ */
@media (max-width: 767px) {
  .hero__visual {
    /* Aspect-ratio calibrado (1188/1290 vs 1188/1114 natural) para que,
       combinado con object-fit: cover en .mockup, los teléfonos queden
       a ~30 px del borde lateral del viewport. Recortamos los márgenes
       blancos del PNG (14.9% izq, 12.8% der) sin tocar el contenido
       (los phones empiezan a 177 px y terminan en 1036 px del PNG
       1188-px-wide; el cover deja ~74 px de margen visible escalado a
       ~30 px en pantalla). */
    aspect-ratio: 1188 / 1290;
  }

  .mockup {
    object-fit: cover;
  }
}

/* ============================================================
   Mobile (≤640px) — ajustes de tamaño y padding
   ============================================================ */
@media (max-width: 640px) {
  .hero {
    /* Hereda el column flow del bloque ≤1023; sólo ajustamos el padding
       superior para phones más chicos. */
    padding-block: clamp(0.75rem, 2vw, 1rem) 0;
  }

  .hero__inner {
    /* Padding más compacto en phones chicos. */
    padding-block: clamp(1rem, 3vw, 1.5rem);
    gap: 1.25rem;
  }

  /* Brand y logo se reducen juntos para que el botón Google Play
     siga heredando el mismo ancho. */
  .hero__brand {
    max-width: 280px;
  }

  .hero__brand-logo {
    max-width: 280px;
  }

  .hero__brand-by-text {
    font-size: 0.95rem;
  }

  .hero__brand-by-logo {
    height: 1.35rem;
  }

  .hero__cta-label {
    font-size: 1rem;
  }

  .btn-store {
    padding: 10px 14px;
    border-radius: 7px;
  }

  .btn-store__icon {
    width: 22px;
    height: 26px;
  }

  .btn-store__top {
    font-size: 10px;
  }

  .btn-store__wordmark {
    width: 84px;
  }
}

/* ============================================================
   Reduced motion
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .btn-store {
    transition: none;
    animation: none;
  }
  .btn-store:hover,
  .btn-store:focus-visible {
    transform: none;
  }
}