/* ==========================================================================
   Alimpro Films — landing page
   Diseño de referencia: lienzo 1920 × 1080 px.

   Misma arquitectura que cinemaparadisoinv: en escritorio toda la maqueta va
   en rem y la raíz se escala por el factor «contain» de las dos dimensiones
   del viewport, de modo que la página entra en pantalla sin scroll aunque la
   barra del navegador reduzca la altura útil. A partir de 900px el contenido
   se apila y el scroll pasa a ser normal.
   ========================================================================== */

/* ---------------------------------------------------------------- fuente --
   Jost (sustituto libre de Futura PT), autoalojado. El diseño usa Futura PT
   Book, así que aquí el peso es 400 (en cinemaparadisoinv era Light/300).
   Licencia: SIL Open Font License 1.1 — ver assets/fonts/OFL.txt
   -------------------------------------------------------------------------- */

/* latin */
@font-face {
  font-family: "Jost";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/jost-v20-latin-400.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

/* latin-ext */
@font-face {
  font-family: "Jost";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/jost-v20-latin-ext-400.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  /* Verde corporativo tal y como viene en el PDF.

     ⚠ AVISO DE CONTRASTE: el texto blanco sobre este verde da 2,12:1, por
     debajo del mínimo de WCAG AA (4,5:1 para texto normal, 3:1 para texto
     grande). Es un problema del diseño de origen, no de la maqueta.

     Se respeta el color de marca por fidelidad. Para corregirlo basta con
     cambiar este único valor por una versión más oscura del MISMO tono
     (H 76°, S 72%), sin tocar nada más:

        #7A9E19  → 3,12:1  (cumple sólo para texto grande)
        #5F7B14  → 4,85:1  (cumple AA completo, recomendado)
        #44580E  → 7,93:1  (cumple AAA)

     Ver README-a11y.md para el detalle. */
  --green: #95c11f;
  --white: #fff;

  --font: "Jost", "Futura PT", "Century Gothic", "Avenir Next", system-ui, sans-serif;

  /* Ritmo vertical del diseño (px / 16). Los márgenes exterior superior e
     inferior se recortan un poco respecto al diseño (76/81px) para que el
     conjunto quepa en 66,7rem y, a 1920×1080, la raíz caiga justo en 16px.
     Como el bloque va centrado con `margin:auto`, el recorte no se aprecia.
     Las medidas del PDF son cajas de glifo; una caja de línea CSS añade el
     interlineado por arriba y por abajo. Los huecos que preceden a un bloque
     de texto llevan por eso descontado ese sobrante (se indica entre
     paréntesis) para que el resultado impreso coincida con el diseño.
     El único hueco que se aparta del diseño es el que precede a «CONTACTO»:
     su caja de línea aporta ~21px de interlineado que la caja de glifo del
     PDF no tiene, así que se descuentan. */
  --space-top: 4.2rem;      /* diseño: 76,4px */
  --space-clapper: 2.26rem; /*         36,1px */
  --space-headline: 1.43rem;/*         22,9px */
  --space-rule: 2.58rem;    /*         41,3px */
  --space-intro: 1.76rem;   /*         28,2px */
  --space-para: 2.39rem;    /*         38,3px */
  --space-reel: 2rem;       /*         32,1px */
  --space-contact: 1.44rem; /*         44,0px − 21 de interlineado */
  --space-items: 1.54rem;   /*         24,7px */
  --space-bottom: 4.43rem;  /* diseño: 80,7px */
}

/* --------------------------------------------------------- reset / base -- */

*,
*::before,
*::after { box-sizing: border-box; }

html {
  /* Escala «contain»: el menor de los dos ajustes.
       0.8333vw → 16px con 1920px de ancho (escala exacta del diseño).
       1.4815vh → la maqueta ocupa 66,7rem de alto y 100vh / 67,5 = 1,4815vh.
     Los topes van en `rem`: dentro de `font-size` del elemento raíz, 1rem es
     el tamaño por defecto del navegador, así que quien lo tenga configurado
     más grande obtiene un suelo y un techo mayores.
     El suelo de 0.6875rem (11px) hace que el zoom del navegador sirva de algo:
     por debajo de ahí la maqueta deja de encogerse y aparece scroll. */
  font-size: clamp(0.6875rem, min(0.8333vw, 1.4815vh), 1.5rem);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--green);
  color: var(--white);
  font-family: var(--font);
  font-weight: 400;
  line-height: 1.2;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, p { margin: 0; }
img { display: block; max-width: 100%; height: auto; }

/* ------------------------------------------------------------- estructura -- */

.landing {
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  padding: var(--space-top) 1.5rem var(--space-bottom);
}

/* `margin:auto` centra sin recortar por arriba cuando el contenido es más
   alto que la ventana (centrado seguro). */
.landing__inner {
  width: 100%;
  max-width: 100rem;
  margin: auto;
  text-align: center;
}

/* ------------------------------------------------------------------ marca -- */

.brand__logo {
  width: 44.87rem; /* 717,97px */
  max-width: 88%;
  margin: 0 auto;
}

/* ------------------------------------------------------------------ iconos -- */

.icon { margin-inline: auto; }

.icon--clapper {
  width: 4.76rem; /* 76,1px */
  margin-top: var(--space-clapper);
}

.icon--reel {
  width: 6.08rem; /* 97,26px */
  margin-top: var(--space-reel);
}

/* ------------------------------------------------------------- titulares -- */

.headline {
  margin-top: var(--space-headline);
  font-size: 3.3125rem; /* 53px */
  font-weight: 400;
  line-height: 1.18;
  letter-spacing: 0.005em;
  text-transform: uppercase;
  text-wrap: balance;
}

.rule {
  width: 20.06rem; /* 321px */
  height: 0;
  margin: var(--space-rule) auto 0;
  border: 0;
  border-top: 2px solid var(--white);
}

.intro {
  max-width: 77.5rem; /* diseño: 1073px de caja de texto */
  margin: var(--space-intro) auto 0;
  font-size: 1.875rem; /* 30px */
  line-height: 1.2;
  text-wrap: balance;
}

.intro p + p { margin-top: var(--space-para); }

/* ---------------------------------------------------------------- contacto -- */

.contact { margin-top: var(--space-contact); }

/* «CONTACTO» con una línea a cada lado; las líneas se reparten el espacio
   sobrante, de modo que el bloque conserva el ancho del diseño (840px). */
.contact__heading {
  display: flex;
  align-items: center;
  gap: 1rem; /* 15,9px */
  width: 52.5rem; /* 840,2px */
  max-width: 100%;
  margin: 0 auto;
  font-size: 2.075rem; /* 33,2px */
  font-weight: 400;
  line-height: 1.18;
  text-transform: uppercase;
  white-space: nowrap;
}

.contact__heading::before,
.contact__heading::after {
  content: "";
  flex: 1 1 auto;
  border-top: 2px solid var(--white);
}

.contact__items {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7rem; /* 112px: reproduce el ancho total de la fila del diseño */
  margin-top: var(--space-items);
}

.contact__link {
  position: relative;
  display: flex;
  align-items: center;
  gap: 1.34rem; /* 21,5px */
  color: var(--white);
  font-size: 2.075rem; /* 33,2px */
  line-height: 1.18;
  white-space: nowrap;
  text-decoration: none;
  transition: opacity 0.25s ease;
}

.contact__link img {
  flex: 0 0 auto;
  width: 5.17rem; /* 81,7px */
}

/* WCAG 2.5.8 (Target Size, Minimum): amplía el área pulsable a 24 CSS px sin
   tocar la maqueta. Va en px porque el criterio se mide en píxeles CSS reales. */
.contact__link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: max(100%, 24px);
  transform: translateY(-50%);
}

.contact__link:hover { opacity: 0.75; }

.contact__link:focus-visible {
  outline: 3px solid var(--white);
  outline-offset: 0.4rem;
  border-radius: 0.25rem;
}

.contact__sep {
  flex: 0 0 auto;
  width: 3.47rem; /* 55,54px */
}

/* ================================ responsive ============================== */

/* Portátiles pequeños y tablets en horizontal: se sigue buscando que todo
   entre en una pantalla (aquí la maqueta mide ~63,9rem de alto, de ahí que el
   ajuste por altura sea 100/64,4 ≈ 1,55vh). */
@media (max-width: 1080px) {
  html { font-size: clamp(0.6875rem, min(1.6vw, 1.55vh), 0.875rem); }

  .brand__logo { width: 38rem; }
  .headline { font-size: 2.8rem; }
  .intro { max-width: 46rem; }
  .contact__heading { width: 40rem; }
  .contact__items { gap: 3.5rem; }
}

/* Tablets en vertical y móviles: contenido apilado y scroll normal. */
@media (max-width: 900px) {
  html { font-size: clamp(0.6875rem, 1.6vw, 0.875rem); }

  .intro { max-width: 34rem; }

  /* Los dos contactos pasan a columna y las barras `//` se ocultan: separan
     horizontalmente, y en vertical no tienen sentido. */
  .contact__items {
    flex-direction: column;
    gap: 1.6rem;
  }

  .contact__sep { display: none; }

  .contact__link {
    white-space: normal;
    justify-content: center;
    text-align: left;
  }
}

@media (max-width: 600px) {
  html { font-size: clamp(0.6875rem, 3.4vw, 0.875rem); }

  .landing { padding-inline: 1.25rem; }
  .brand__logo { width: 100%; max-width: 24rem; }
  .headline { font-size: 1.9rem; }
  .intro { font-size: 1.15rem; max-width: 24rem; }
  .rule { width: 12rem; }
  .contact__heading { width: 100%; font-size: 1.4rem; }
  .contact__link { font-size: 1.25rem; gap: 0.9rem; }
  .contact__link img { width: 3.2rem; }
  .icon--clapper { width: 3.6rem; }
  .icon--reel { width: 4.6rem; }
}

/* ============================== animaciones =============================== */

/* El estado oculto sólo se aplica si el JS ha arrancado: sin JS todo se ve. */
.js-ready .reveal {
  opacity: 0;
  transform: translateY(1.25rem);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

.js-ready .reveal.is-visible,
.js-ready.reveal-fallback .reveal {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .js-ready .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
  * {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* ========================= alto contraste (Windows) ====================== */

/* En modo de colores forzados el navegador sustituye los colores del CSS pero
   NO los de un SVG servido como <img>: el logotipo blanco desaparecería sobre
   un lienzo claro del sistema. Se conserva la paleta de marca. */
@media (forced-colors: active) {
  body {
    forced-color-adjust: none;
    background: var(--green);
    color: var(--white);
  }

  .contact__link:focus-visible { outline: 3px solid var(--white); }
}