:root {
  --c-blue: #013E67;
  --c-cream: #FFF6E3;
  --c-gold: #EBBA68;
  --c-white: #FFFFFF;

  --font-heading: 'din-2014', 'Inter', system-ui, sans-serif;
  --font-body: 'Inter', system-ui, sans-serif;

  /* Padding lateral del hero. Crece hasta 12rem en 4K para que el contenido
     no quede pegado al borde cuando hay mucho ancho disponible. */
  --pad-x: clamp(1.5rem, 5vw, 12rem);
}

body {
  background: var(--c-white);
  overflow-x: hidden;
}

/* ============================================================
   HERO container
   ============================================================ */
.hero {
  position: relative;
  /* En desktop el hero ocupa exactamente 100vh para que todo el contenido
     quepa sin scroll. En tablet/mobile (≤1023px) se cambia a auto +
     min-height en responsive.css para permitir overflow vertical. */
  height: 100vh;
  min-height: 0;
  padding: clamp(0.75rem, 1.5vw, 1.25rem) 0;
  background:
    linear-gradient(288deg, #FFFFFF 4.42%, #FFF6E3 30.79%, #EBBA68 90.35%),
    #FFFFFF;
  /* No usamos overflow:hidden en .hero para que el mockup PNG nunca quede
     recortado por el clip del hero. La textura SVG sigue siendo bounded
     por su propio contenedor (.hero__bg-texture tiene overflow:hidden +
     inset que lo confina dentro del hero, ver más abajo). */
  isolation: isolate;
  display: flex;
  align-items: center;
}

/* Textura: el SVG original tiene los trazos en la esquina inferior-derecha
   de su viewBox. Se rota -90deg y se posiciona desbordando en TODOS los
   lados del hero para que los bordes del SVG (donde los trazos terminan
   abruptamente) queden SIEMPRE fuera del área visible. Sin esos overflow
   los trazos se ven cortados al borde del hero. */
.hero__bg-texture {
  position: absolute;
  /* Inset 0: la textura queda exactamente dentro del hero. Como el .hero
     ya no usa overflow:hidden (para no recortar el mockup PNG), el clip
     de la textura ahora vive en este contenedor (overflow:hidden abajo).
     Así la textura nunca se filtra hacia el body, y el mockup PNG nunca
     se recorta por el hero. */
  inset: 0;
  container-type: size;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
  /* Máscara que difumina los bordes de la textura hacia transparente
     para que los trazos del SVG no se vean cortados contra el límite
     del hero. Sólo afecta a la textura — el gradiente de fondo (que
     vive en .hero) queda intacto, no se mezcla con blanco. */
  -webkit-mask-image:
    linear-gradient(to bottom, transparent 0%, #000 14%, #000 86%, transparent 100%),
    linear-gradient(to right,  transparent 0%, #000 10%, #000 90%, transparent 100%);
  -webkit-mask-composite: source-in;
          mask-image:
    linear-gradient(to bottom, transparent 0%, #000 14%, #000 86%, transparent 100%),
    linear-gradient(to right,  transparent 0%, #000 10%, #000 90%, transparent 100%);
          mask-composite: intersect;
}

.hero__bg-texture::before {
  content: "";
  width: 100cqh;
  height: 100cqw;
  background-image: url('../assets/texture-bg.svg');
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
  transform: rotate(-90deg);
  opacity: 0.15;
}

.hero__inner {
  position: relative;
  z-index: 1;
}

/* ============================================================
   Hero inner: two-column grid (mockup left, brand right)
   ============================================================ */
.hero__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(1.5rem, 3vw, 4rem);
  padding-inline: var(--pad-x);
  padding-block: clamp(0.5rem, 1vw, 1.25rem);
  /* Sin tope superior: en 4K/5K el contenedor crece para usar el espacio
     disponible. La columna del mockup queda limitada por la altura
     (vía .hero__visual), así que nunca desborda 100vh. */
  max-width: none;
  margin-inline: auto;
  width: 100%;
  /* Compensación óptica: el bloque de marca + CTA (derecha) tiene más
     contraste que los mockups (izquierda), por lo que el conjunto se
     percibe desplazado a la derecha. Un pequeño shift negativo lo
     reposiciona ópticamente al centro sin afectar la geometría del grid. */
  transform: translateX(-1.5%);
}

/* ============================================================
   Brand column (logo SIGAPP + "By SIGAT" + CTA)
   ============================================================ */
.hero__brand {
  display: flex;
  flex-direction: column;
  gap: clamp(1.5rem, 3.5vw, 6rem);
  align-items: flex-end;
  width: 100%;
  /* En 4K el bloque de marca puede crecer hasta ~960px para acompañar
     el ancho de la columna; clamp escala desde el tamaño Figma (627px). */
  max-width: clamp(627px, 50vw, 960px);
  margin-left: auto;
}

.hero__brand-mark {
  display: flex;
  flex-direction: column;
  gap: clamp(0.75rem, 1.4vw, 1.5625rem); /* ≈25px */
  align-items: flex-end;
  width: 100%;
}

.hero__brand-logo {
  width: 100%;
  height: auto;
  aspect-ratio: 627 / 125;
  /* Crece hasta 960px en 4K. */
  max-width: clamp(627px, 50vw, 960px);
  display: block;
}

.hero__brand-by {
  display: flex;
  align-items: flex-end;
  gap: 6.887px;
  font-family: var(--font-heading);
  font-weight: 300;
  color: var(--c-gold);
  line-height: 1;
}

.hero__brand-by-text {
  font-size: clamp(1rem, 1.3vw, 2.4rem); /* hasta ≈38px en 4K */
  line-height: 1;
}

.hero__brand-by-logo {
  height: clamp(1.5rem, 2.1vw, 3.85rem); /* hasta ≈62px en 4K */
  width: auto;
  aspect-ratio: 159.55 / 39.56;
  display: block;
}

/* ============================================================
   CTA block
   ============================================================ */
.hero__cta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;       /* label y botón pegados al borde derecho */
  align-self: flex-end;        /* CTA pegado al borde derecho del bloque de marca */
  gap: clamp(14px, 0.8vw, 22px);
}

.hero__cta-label {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: clamp(1rem, 1.5vw, 2.6rem); /* hasta ≈42px en 4K */
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--c-blue);
  line-height: 1;
}

/* ============================================================
   Google Play button
   ============================================================ */
/* Pulso sutil en loop para llamar la atención del usuario al CTA.
   Se desactiva en :hover/:focus-visible para que se vea el estado
   estático "elevado" sin competencia con la animación. */
@keyframes sigapp-btn-pulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.045); }
}

.btn-store {
  display: inline-flex;
  align-items: center;
  gap: clamp(13px, 0.8vw, 22px);
  background: var(--c-blue);
  color: var(--c-white);
  border-radius: clamp(11.6px, 0.7vw, 18px);
  padding: clamp(14px, 0.95vw, 24px) clamp(22px, 1.4vw, 38px);
  width: fit-content;
  transform-origin: center;
  animation: sigapp-btn-pulse 1.8s ease-in-out infinite;
  transition: transform 0.22s ease, box-shadow 0.22s ease;
}

.btn-store:hover,
.btn-store:focus-visible {
  /* Pausa el pulso y muestra el estado hover estático. */
  animation: none;
  transform: translateY(-2px);
  box-shadow: 0 12px 24px -10px rgba(1, 62, 103, 0.45);
}

.btn-store:focus-visible {
  outline: 3px solid var(--c-gold);
  outline-offset: 3px;
}

.btn-store__icon {
  width: clamp(37px, 2.4vw, 64px);
  height: auto;
  flex-shrink: 0;
  aspect-ratio: 37 / 43;
}

.btn-store__text {
  display: flex;
  flex-direction: column;
  gap: clamp(4px, 0.25vw, 7px);
  align-items: flex-start;
}

.btn-store__top {
  font-family: 'Roboto', var(--font-body);
  font-weight: 400;
  font-size: clamp(14px, 0.9vw, 24px);
  line-height: 1;
  color: var(--c-white);
}

.btn-store__wordmark {
  width: clamp(143px, 9.3vw, 248px);
  height: auto;
  aspect-ratio: 142.959 / 28.978;
  transform: scaleY(-1);
}

/* ============================================================
   Visual column: mockup (los bocadillos vienen embebidos en el PNG)
   ============================================================ */
.hero__visual {
  position: relative;
  /* En desktop, el ancho se limita al MENOR entre el ancho de la columna
     (100%) y el ancho derivado del alto disponible para que el mockup
     nunca cause scroll vertical. (100vh − 4rem) deja margen para padding
     y los demás elementos. */
  width: min(100%, calc((100vh - 4rem) * 1188 / 1080));
  aspect-ratio: 1188 / 1080;
  margin-right: auto;
}

.hero__visual picture {
  display: block;
  width: 100%;
  height: 100%;
}

.mockup {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}

/* ============================================================
   Site footer (copyright disimulado al pie del hero)
   ============================================================ */
.site-footer {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  padding: clamp(0.6rem, 0.9vw, 1rem) var(--pad-x);
  text-align: center;
  /* El footer no captura clicks por defecto (queda sobre el hero), pero
     los iconos sociales y el copy SÍ se vuelven a habilitar abajo para
     ser interactuables. Así no bloqueamos el resto del hero. */
  pointer-events: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(0.45rem, 0.7vw, 0.7rem);
}

/* "Síguenos" inline a la izquierda, iconos a la derecha. */
.site-footer__follow {
  display: inline-flex;
  align-items: center;
  gap: clamp(0.5rem, 0.8vw, 0.75rem);
  pointer-events: auto;
}

.site-footer__follow-label {
  font-family: var(--font-body);
  font-weight: 500;
  /* Tipografía fluida: 14 px en mobile/desktop común, escala hasta
     24 px en 4K para mantener legibilidad proporcional. */
  font-size: clamp(0.875rem, 1vw, 1.5rem);
  letter-spacing: 0.02em;
  color: var(--c-blue);
}

.site-footer__social {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Gap amplio entre íconos: tap targets cómodos en mobile sin
     necesidad de aumentar el tamaño del círculo. */
  gap: clamp(0.85rem, 2vw, 1.25rem);
}

/* Estado base: círculo RELLENO #013E67 con el icono lineal blanco
   inscrito. Tap target ≥ 32px para mobile. */
.site-footer__social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* Cap aumentado de 2.25rem (36 px) a 3.5rem (56 px) para que los
     iconos escalen en pantallas 4K en lugar de quedar diminutos. */
  width: clamp(2rem, 2.2vw, 3.5rem);
  height: clamp(2rem, 2.2vw, 3.5rem);
  border-radius: 50%;
  background: #013E67;
  border: 1.5px solid #013E67;
  color: #FFFFFF;
  text-decoration: none;
  transition: transform 0.2s ease, background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

/* Estado hover/focus: invierte a círculo SIN relleno (solo borde
   lineal #013E67) e icono #013E67. Conserva la misma animación de
   escala/elevación. */
.site-footer__social-link:hover,
.site-footer__social-link:focus-visible {
  transform: translateY(-2px);
  background: transparent;
  color: #013E67;
  box-shadow: 0 4px 10px rgba(1, 62, 103, 0.25);
}

.site-footer__social-link:focus-visible {
  outline: 2px solid var(--c-blue);
  outline-offset: 3px;
}

/* SVG ocupa ~55% del círculo, dejando padding interno coherente. */
.site-footer__social-link svg {
  width: 55%;
  height: 55%;
  display: block;
  /* Pequeño tweak para que el icono de YouTube quede ópticamente
     centrado: el rect del play se siente más alto que ancho. */
  overflow: visible;
}

.site-footer__copy {
  font-family: var(--font-body);
  font-weight: 400;
  /* Tipografía fluida: 12 px en mobile/desktop común, escala hasta
     20 px en 4K para mantener proporción. */
  font-size: clamp(0.75rem, 0.85vw, 1.25rem);
  letter-spacing: 0.02em;
  color: var(--c-blue);
  opacity: 0.55;
  margin: 0;
  pointer-events: auto;
}