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

   En escritorio TODA la maqueta (tipografía, iconos y ritmo vertical) va en
   rem, y la raíz se escala por el factor «contain» de las dos dimensiones del
   viewport. Así la página entra siempre en pantalla sin scroll, también cuando
   la barra del navegador reduce la altura útil (Firefox, Safari…).

   A partir de 900px se apila el contenido y el scroll pasa a ser normal.
   ========================================================================== */

/* ---------------------------------------------------------------- fuente --
   Jost (sustituto libre de Futura PT), autoalojado: evita la conexión a
   fonts.googleapis.com + fonts.gstatic.com en la ruta crítica.
   Sólo se usa el peso 300; los subconjuntos van separados por `unicode-range`,
   de modo que latin-ext únicamente se descarga si algún texto lo necesita
   (el contenido actual, en español, se resuelve entero con `latin`).
   Licencia: SIL Open Font License 1.1 — ver assets/fonts/OFL.txt
   -------------------------------------------------------------------------- */

/* latin */
@font-face {
  font-family: "Jost";
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("../fonts/jost-v20-latin-300.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: 300;
  font-display: swap;
  src: url("../fonts/jost-v20-latin-ext-300.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 {
  --gold: #c5932b;
  --black: #000;
  --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 ~11px respecto al diseño (100/101px) para que el
     conjunto quepa en 66,7rem: así, a 1920×1080, la raíz cae justo en 16px
     y la página se ve exactamente a la escala del PDF. Como el bloque va
     centrado con `margin:auto`, ese recorte no se aprecia. */
  --space-top: 5.55rem;     /* diseño: 100px */
  --space-rule: 2.9375rem;  /*          47px */
  --space-head: 2.5rem;     /*          40px */
  --space-sub: 2.75rem;     /*          44px */
  --space-feat: 2.875rem;   /*          46px */
  --space-cta: 3.5rem;      /*          56px */
  --space-bottom: 5.58rem;  /* diseño: 101px */
}

/* --------------------------------------------------------- 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 (55,57 de contenido +
                  11,13 de márgenes), y 100vh / 67,5 = 1,4815vh, lo que deja
                  ~1,2% de holgura a cualquier altura.
     Los topes van en `rem`: dentro de `font-size` del elemento raíz, 1rem es
     el tamaño de fuente por defecto del navegador, así que quien lo tenga
     configurado más grande (ajuste habitual de baja visión) obtiene un suelo y
     un techo mayores. Con el valor normal de 16px equivalen a 11px y 24px.

     El suelo de 0.6875rem (11px) es deliberado y es lo que hace que el zoom
     del navegador sirva de algo: por debajo de ese punto la maqueta deja de
     encogerse y la página pasa a tener scroll, en lugar de reescalarse para
     seguir cabiendo (WCAG 2.1 SC 1.4.4, Resize Text). Ver README-a11y.md. */
  font-size: clamp(0.6875rem, min(0.8333vw, 1.4815vh), 1.5rem);
  -webkit-text-size-adjust: 100%;
}

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

h1, h2, p, ul { margin: 0; }
ul { padding: 0; list-style: none; }
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 vertical y horizontalmente sin recortar por arriba
   cuando el contenido es más alto que la ventana (centrado seguro). */
.landing__inner {
  width: 100%;
  max-width: 100rem; /* 1600px */
  margin: auto;
  text-align: center;
}

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

.brand__logo {
  width: 38.55rem; /* 616.84px */
  max-width: 90%;
  margin: 0 auto;
}

.brand__rule {
  width: 33.78rem; /* 540.54px */
  max-width: 78%;
  margin: var(--space-rule) auto 0;
}

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

/* Nota: Jost (sustituto libre de Futura PT) compone ~10% más ancho, así que los
   anchos máximos se amplían respecto al diseño para conservar las líneas únicas. */
.headline {
  max-width: 89rem; /* diseño: 1273px */
  margin: var(--space-head) auto 0;
  font-size: 2.4375rem; /* 39px */
  font-weight: 300;
  line-height: 1.15;
  text-wrap: balance;
}

.headline em {
  color: var(--gold);
  font-style: normal;
}

.subhead {
  max-width: 96rem; /* diseño: 1380px */
  margin: var(--space-sub) auto 0;
  font-size: 1.5625rem; /* 25px */
  line-height: 1.3;
  text-wrap: balance;
}

/* -------------------------------------------------------------- columnas -- */

.features {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin-top: var(--space-feat);
}

.feature {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 1.5rem;
}

/* Separadores verticales dorados entre columnas. */
.feature + .feature::before {
  content: "";
  position: absolute;
  left: 0;
  top: 1.7rem;
  bottom: 1.3rem;
  border-left: 1px solid var(--gold);
}

.feature__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 7.25rem; /* banda de 116px, iconos centrados */
}

.feature__icon img { height: auto; }
.feature:nth-child(1) .feature__icon img { width: 6.49rem; } /* 103.82px */
.feature:nth-child(2) .feature__icon img { width: 7.34rem; } /* 117.38px */
.feature:nth-child(3) .feature__icon img { width: 8.94rem; } /* 143.09px */

.feature__title {
  margin-top: 0.85rem;
  font-size: 1.7375rem; /* 27.8px */
  font-weight: 300;
  line-height: 1.15;
  letter-spacing: 0.01em;
  text-transform: uppercase;
}

.feature__text {
  max-width: 17rem; /* diseño: 240px de caja de texto */
  margin-top: 0.95rem;
  font-size: 1.1875rem; /* 19px */
  line-height: 1.2;
}

/* ------------------------------------------------------------------- cta -- */

.cta {
  display: flex;
  align-items: stretch;
  width: 59.29rem; /* 948.56px */
  max-width: 100%;
  min-height: 7.52rem; /* 120.29px */
  margin: var(--space-cta) auto 0;
  border: 1px solid var(--gold);
  border-radius: 0.8rem; /* 12.83px */
}

.cta__lead {
  flex: 0 0 55.3%; /* separador a 524px del borde izquierdo */
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.64rem; /* 26px */
  padding: 1rem 1.25rem;
  border-right: 1px solid var(--gold);
}

.cta__lead-icon { width: 4.63rem; } /* 74.12px */

.cta__lead-text {
  color: var(--gold);
  font-size: 1.96875rem; /* 31.5px */
  line-height: 1.15;
}

/* Bloque de contactos: centrado en su mitad, con los textos alineados a la izquierda. */
.cta__contacts {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 1.05rem;
  padding: 1rem 0.9rem 1rem 1.8rem;
}

.cta__link {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.8rem;
  min-width: 0;
  color: var(--white);
  font-size: 1.5rem; /* diseño: 25px */
  line-height: 1.15;
  white-space: nowrap;
  text-decoration: none;
  transition: color 0.25s ease;
}

/* 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,
   no en la escala del diseño. */
.cta__link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: max(100%, 24px);
  transform: translateY(-50%);
}

.cta__link img {
  flex: 0 0 auto;
  width: 2.18rem; /* 34.9px */
}

.cta__link:nth-child(2) img { width: 2.12rem; } /* 33.87px */

.cta__link:hover,
.cta__link:focus-visible { color: var(--gold); }

.cta__link:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 0.35rem;
  border-radius: 0.2rem;
}

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

/* Portátiles pequeños y tablets en horizontal: se mantienen las 3 columnas y
   se sigue buscando que todo entre en una pantalla (aquí la maqueta mide
   ~62rem de alto, de ahí el 1.58vh). */
@media (max-width: 1080px) {
  html { font-size: clamp(0.6875rem, min(1.6vw, 1.58vh), 0.875rem); }

  :root {
    --space-top: 3.5rem;
    --space-rule: 2rem;
    --space-head: 1.8rem;
    --space-sub: 1.6rem;
    --space-feat: 2.6rem;
    --space-cta: 2.6rem;
    --space-bottom: 3.5rem;
  }

  .brand__logo { width: 32rem; }
  .brand__rule { width: 26rem; }
  .headline { font-size: 2.1rem; max-width: 46rem; }
  .subhead { max-width: 46rem; }

  /* Columnas más estrechas: se reduce el titular para que quepa en una línea. */
  .feature { padding: 0 0.5rem; }
  .feature__title { font-size: 1.45rem; }
}

/* Tablets en vertical y móviles: columnas apiladas y scroll normal — aquí ya
   no se intenta encajar la maqueta en una sola pantalla. */
@media (max-width: 900px) {
  html { font-size: clamp(0.6875rem, 1.6vw, 0.875rem); }

  .features {
    grid-template-columns: 1fr;
    gap: 2.4rem;
    max-width: 30rem;
    margin-inline: auto;
  }

  /* El separador pasa de vertical a horizontal. */
  .feature + .feature::before {
    left: 15%;
    right: 15%;
    top: -1.2rem;
    bottom: auto;
    border-left: 0;
    border-top: 1px solid var(--gold);
  }

  .feature__icon { height: 6rem; }
  .feature__text { max-width: 24rem; }

  .cta {
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-width: 30rem;
    padding: 1.6rem 1.4rem;
    gap: 1.4rem;
  }

  .cta__lead {
    flex: 0 0 auto;
    width: 100%;
    padding: 0 0 1.4rem;
    border-right: 0;
    border-bottom: 1px solid var(--gold);
  }

  .cta__contacts {
    width: 100%;
    padding: 0;
    align-items: center;
  }

  .cta__link {
    font-size: 1.35rem;
    white-space: normal;
  }

  .cta__link span { overflow-wrap: anywhere; }
}

@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: 22rem; }
  .brand__rule { width: 80%; }
  .headline { font-size: 1.85rem; }
  .subhead { font-size: 1.15rem; }
  .features,
  .cta { max-width: 26rem; }
  .feature__title { font-size: 1.4rem; }
  .feature__text { font-size: 1.05rem; max-width: 22rem; }
  .cta__lead-icon { width: 3.4rem; }
  .cta__lead-text { font-size: 1.5rem; }
  .cta__link { font-size: 1.1rem; }
}

/* ============================== 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
   el lienzo claro del sistema. Como la paleta ya cumple de sobra (blanco 21:1
   y dorado 7,58:1 sobre negro), se conserva tal cual. */
@media (forced-colors: active) {
  body {
    forced-color-adjust: none;
    background: var(--black);
    color: var(--white);
  }

  .cta__link:focus-visible {
    outline: 3px solid var(--gold);
  }
}