/* ============================================================
   GEO — Productos (page-productos.php)
   Layout VERTICAL · libro arriba + CTA block debajo, sin solape.
   Tipografía calcada Figma Frame 3 (Ballet 200 / Montserrat SemiBold Italic 40).
   Animación: libro CAE desde arriba (productos.js + back.out).
   ============================================================ */

.productos {
  position: relative;
  width: 100%;
  min-height: 100vh;
  min-height: 100svh;
  background: #000;
  overflow: hidden;
  padding: 100px 32px 60px;             /* top: deja respiro al header fijo */
  box-sizing: border-box;
}

/* Fondo nubes — Figma 243:38 */
.productos__bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  z-index: 0;
}

/* ── FONDO VIDEO full-screen ── dos <video> apilados, cover, detrás del contenido.
   z-index 0 (sobre el poster .productos__bg, bajo el gradient y el contenido).
   pointer-events:none → no bloquea los enlaces de descarga que van encima. */
.productos__video-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}
.productos__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;                       /* mismas dimensiones/encuadre ambos */
  object-position: center;
  opacity: 0;                              /* oculto por defecto; JS/clase muestra */
  transition: opacity 0.3s ease;           /* crossfade invisible V1→V2 */
  will-change: opacity;
}
.productos__video.is-visible { opacity: 1; }

/* Gradient oscuro abajo — Figma 243:54 (transparente → #0b1d29) */
.productos__dark-overlay {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 50%;                           /* sube un poco para cubrir el CTA en mobile */
  background: linear-gradient(to bottom,
    rgba(40, 103, 143, 0)    0%,
    rgba(33, 85, 119, 0.236) 13%,
    rgba(26, 66, 92, 0.502)  34%,
    rgba(22, 56, 78, 0.631)  47%,
    rgba(19, 48, 66, 0.749)  58%,
    rgba(15, 37, 52, 0.890)  77%,
    #0b1d29                  100%
  );
  z-index: 1;
  pointer-events: none;
}

/* ── INNER · stack vertical centrado: libro arriba, CTA debajo. ──────
   Oculto por defecto (no-flash): el contenido overlay NO se ve durante el
   Video 1; productos.js añade .is-ready recién cuando termina V1 (o directo
   si prefers-reduced-motion / sin gsap). Sin transición → revelado instantáneo,
   invisible porque el libro arranca fuera de viewport y los textos en opacity 0. */
.productos__inner {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 48px;                              /* separación libro ↔ CTA */
  min-height: calc(100svh - 160px);
  max-width: 1761px;
  margin: 0 auto;
  opacity: 0;
}
.productos__inner.is-ready { opacity: 1; }

/* ── LIBRO · enlace al PDF sin caja: no altera el flex ni la animación ── */
.productos__book-link { display: contents; }

/* ── LIBRO · width fija (no overflow), no se solapa con el texto ────── */
.productos__book {
  display: block;
  width: clamp(280px, 38vw, 560px);       /* tope 560 para no aplastar el CTA */
  height: auto;
  transform-origin: 50% 50%;
  will-change: transform, opacity;
  cursor: pointer;                         /* descarga el PDF al clic */
}

/* ── CTA block · "Descargar" + 2 links ─────────────────────────────── */
.productos__cta-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

/* ══════════════════════════════════════════════════════════════════
   VALORES FIGMA EXACTOS — leídos vía MCP (regla 0)
   ─────────────────────────────────────────────────────────────────
   FRAME 2 (Rect 501 — intermedio ROJO #792325):
     · "Descargar" (242:25)
         font-family: Ballet · style: Regular · weight: 400
         font-size: 300 px   · line-height: 570 px (=1.9)   · letter-spacing: 0
         bbox: 891 × 334
     · "portafolio de productos" (242:29)
         font-family: Montserrat · style: SemiBold Italic · weight: 600
         font-size: 48 px    · line-height: 58.512 px (=1.219) · ls: 0
         bbox: 603 × 57

   FRAME 3 (Rect 515 — final BLANCO #ffffff):  ← ESTADO STICKY
     · "Descargar" (243:52)
         font-family: Ballet · style: Regular · weight: 400
         font-size: 200 px   · line-height: 380 px (=1.9)   · letter-spacing: 0
         bbox: 704 × 188
     · "PORTAFOLIO DE PRODUCTOS" (243:46)
         font-family: Montserrat · style: SemiBold Italic · weight: 600
         font-size: 40 px    · line-height: 48.76 px (=1.219) · ls: 0
         bbox: 646 × 45

   PROPORCIÓN HEADING:LINK en Figma Frame 3 = 200/40 = 5.0 : 1
   PROPORCIÓN HEADING:LINK en Figma Frame 2 = 300/48 = 6.25 : 1
   Aplico la del FRAME 3 (estado final): 5 : 1.

   Conversión a vw para fluidez (referencia frame = 1919 px):
     · heading 200/1919 = 10.42 vw  ← cap a 200 px max
     · link     40/1919 =  2.08 vw  ← cap a 40 px max
   Esto preserva la proporción 5:1 exacta en TODO viewport.
   ══════════════════════════════════════════════════════════════════ */

/* "Descargar" · Ballet 200 / line-height 380 (1.9) / ls 0 · #fff */
.productos__cta-heading {
  font-family: 'Ballet', cursive;
  font-weight: 400;
  font-size: clamp(80px, 10.42vw, 200px);   /* Figma 200 px @ 1919 = 10.42vw */
  line-height: 1.9;                          /* Figma 380/200 = 1.9 */
  letter-spacing: 0;
  color: #ffffff;
  margin: 0;                                 /* lh 1.9 ya da aire suficiente */
  white-space: nowrap;
}
/* "Descargar" enlaza al PDF SIN alterar tipografía: valores idénticos al heading
   original (Ballet 400 / clamp 80–200px / lh 1.9 / ls 0 / #fff). !important para
   ganar a cualquier estilo global de <a>. Solo se vuelve clickeable/descargable. */
.productos__cta-heading-link,
.productos__cta-heading-link:hover,
.productos__cta-heading-link:focus,
.productos__cta-heading-link:visited {
  font-family: 'Ballet', cursive !important;
  font-weight: 400 !important;
  font-style: normal !important;
  font-size: clamp(80px, 10.42vw, 200px) !important;   /* = heading original */
  line-height: 1.9 !important;
  letter-spacing: 0 !important;
  color: #ffffff !important;
  text-decoration: none !important;
  background: none !important;
  cursor: pointer;
}
.productos__cta-heading-link:focus-visible {
  outline: 2px solid #ffffff;
  outline-offset: 6px;
}

/* Lista de 2 links — uno por línea */
.productos__cta-links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}
.productos__cta-links li { margin: 0; }

/* Cada link · Montserrat SemiBold Italic 40 / lh 48.76 (1.219) / ls 0 · #fff UPPERCASE */
.productos__cta-link {
  display: inline-block;
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  font-style: italic;
  font-size: clamp(18px, 2.08vw, 40px);     /* Figma 40 px @ 1919 = 2.08vw */
  line-height: 1.219;                        /* Figma 48.76/40 = 1.219 exact */
  letter-spacing: 0;
  color: #ffffff;
  text-transform: uppercase;
  text-decoration: none;
  padding: 4px 8px;
  border-radius: 2px;
  transition: opacity 0.2s ease, transform 0.25s cubic-bezier(.2,.7,.2,1);
}
.productos__cta-link:hover {
  opacity: 0.88;
  color: #b3b3b3 !important;               /* gris tenue legible sobre fondo negro (no negro) */
  text-decoration: underline;
  text-underline-offset: 6px;
  text-decoration-thickness: 2px;
}
.productos__cta-link:focus-visible {
  outline: 2px solid #ffffff;
  outline-offset: 4px;
}

/* ── Responsive ───────────────────────────────────────────────────── */
@media (max-width: 1100px) {
  .productos__inner { gap: 32px; }
  .productos__book  { width: clamp(260px, 42vw, 460px); }
}

@media (max-width: 768px) {
  .productos { padding: 96px 24px 56px; }
  .productos__inner {
    gap: 24px;
    min-height: calc(100svh - 152px);
  }
  .productos__book { width: clamp(220px, 60vw, 360px); }
  /* Mantener ratio 5:1 Figma incluso en tablet/mobile */
  .productos__cta-heading { font-size: clamp(72px, 16vw, 140px); }
  .productos__cta-link    { font-size: clamp(16px, 3.2vw, 28px); }  /* 140/28 = 5:1 */
  .productos__cta-links   { gap: 10px; }
}

@media (max-width: 480px) {
  .productos { padding: 80px 16px 48px; }
  .productos__book        { width: clamp(180px, 70vw, 280px); }
  .productos__cta-heading { font-size: clamp(56px, 20vw, 100px); }
  .productos__cta-link    { font-size: clamp(12px, 4vw, 20px); }    /* 100/20 = 5:1 */
}