/* ---------------------------------------------------------------------------
   INEDITO — sistema de diseño compartido para las páginas públicas nuevas
   (index.html primero; /work, /services, /about, /contact lo van a sumar en
   fases siguientes). No lo consume el panel interno (styles.css) — ese tiene
   su propio sistema de tema claro/oscuro y no se toca acá.

   Paleta, tipografía y componentes (.embossed, .reveal, .btn-hot, marquee)
   vienen del mockup aprobado — ver el artifact "Tu Idea, En Cine" para el
   contexto completo de cada decisión.
--------------------------------------------------------------------------- */

:root{
  --ink:#0A0806; --ink-soft:#161210; --ink-deep:#000;
  --paper:#F7F1E4; --paper-soft:#EFE5CE;
  --neutral:#A79C86; --neutral-on-ink:#8c8270;
  --gold:#D9A94E; --gold-light:#F2C879; --gold-dark:#A6741E;
  --coral:#FF5A36; --coral-light:#FF8A63; --coral-deep:#B32C10;
  --text-ink:#F7F1E4; --text-ink-soft:#b3a996;
  --text-paper:#170F08; --text-paper-soft:#6b5f4a;
  --line-ink:rgba(247,241,228,.14); --line-paper:rgba(23,15,8,.15);
  --font-d:'Alfa Slab One',system-ui,serif;
  --font-b:'Hanken Grotesk',system-ui,sans-serif;
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Títulos gigantes: Alfa Slab One, embozado con sombra doble desplazada
   (efecto serigrafía) — text-shadow hereda de forma natural a los hijos
   (spans .hi/.accent), a diferencia de un degradé con background-clip:text,
   que necesitaría reglas aparte para no quedar invisible en spans anidados. */
.embossed{
  font-family:var(--font-d); font-weight:400; text-transform:uppercase; letter-spacing:.01em;
  color:#fff;
  text-shadow:3px 3px 0 var(--coral), 6px 6px 0 rgba(0,0,0,.4), 6px 6px 14px rgba(0,0,0,.25);
}
.embossed .accent{
  color:var(--gold-light);
  text-shadow:3px 3px 0 var(--coral-deep), 6px 6px 0 rgba(0,0,0,.4), 6px 6px 14px rgba(0,0,0,.25);
}

/* Scroll-reveal — fade + rise, respeta prefers-reduced-motion */
.reveal{opacity:0; transform:translateY(28px); transition:opacity .7s cubic-bezier(.16,.8,.3,1), transform .7s cubic-bezier(.16,.8,.3,1);}
.reveal.in{opacity:1; transform:translateY(0);}
.reveal-d1{transition-delay:.08s;} .reveal-d2{transition-delay:.16s;} .reveal-d3{transition-delay:.24s;}
.reveal-d4{transition-delay:.32s;} .reveal-d5{transition-delay:.4s;} .reveal-d6{transition-delay:.48s;}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1!important; transform:none!important; transition:none!important;}
}

/* Botón principal: píldora, degradé de tres tonos, barrida de luz al hover,
   flecha que se desliza — reemplaza el rectángulo afilado que tenía antes
   la landing (ver .lp-btn en landing.css, que hereda de este componente). */
.btn-hot{
  font-family:var(--font-b); font-weight:800; font-size:12.5px; letter-spacing:.05em; text-transform:uppercase;
  background:linear-gradient(120deg,var(--coral-light) 0%,var(--coral) 45%,var(--coral-deep) 100%); color:#fff;
  padding:16px 28px; border-radius:999px; border:1px solid rgba(255,255,255,.22);
  text-decoration:none; display:inline-flex; align-items:center; gap:9px; cursor:pointer; position:relative; overflow:hidden;
  box-shadow:0 12px 30px -8px rgba(255,90,54,.7), inset 0 1px 0 rgba(255,255,255,.3), inset 0 -2px 6px rgba(0,0,0,.2);
  transition:transform .25s ease, box-shadow .25s ease;
}
.btn-hot::before{content:''; position:absolute; top:0; left:-60%; width:40%; height:100%; background:linear-gradient(115deg,transparent,rgba(255,255,255,.55),transparent); transform:skewX(-20deg); transition:left .6s ease;}
.btn-hot:hover::before{left:130%;}
.btn-hot:hover{transform:translateY(-3px) scale(1.03); box-shadow:0 18px 40px -10px rgba(255,90,54,.9), inset 0 1px 0 rgba(255,255,255,.35);}
.btn-hot .arrow{display:inline-block; transition:transform .3s cubic-bezier(.3,1.4,.5,1);}
.btn-hot:hover .arrow{transform:translateX(5px);}
.btn-huge{font-size:18px; padding:25px 46px; letter-spacing:.03em;}

/* Cinta/marquee inclinada — cruza la página como un sello pegado */
.marquee-wrap{position:relative; z-index:4; margin:-18px 0; pointer-events:none; overflow:hidden;}
.marquee-band{
  background:linear-gradient(100deg,var(--coral-light) 0%,var(--coral) 45%,var(--coral-deep) 100%);
  overflow:hidden; padding:17px 0; position:relative;
  transform:rotate(-1.6deg) scale(1.03); box-shadow:0 18px 40px -12px rgba(0,0,0,.55);
  border-top:1px solid rgba(255,255,255,.35); border-bottom:1px solid rgba(0,0,0,.25);
}
.marquee-band.gold{background:linear-gradient(100deg,var(--gold-light) 0%,var(--gold) 45%,var(--gold-dark) 100%); transform:rotate(1.4deg) scale(1.03);}
.marquee-track{display:flex; width:max-content; animation:mq 20s linear infinite;}
@keyframes mq{ from{transform:translateX(0);} to{transform:translateX(-50%);} }
.marquee-track span{font-family:var(--font-d); font-weight:400; font-size:25px; color:#0A0806; letter-spacing:.03em; padding:0 26px; white-space:nowrap; display:flex; align-items:center; gap:26px; text-shadow:0 1px 0 rgba(255,255,255,.25);}
.marquee-track span i{font-style:normal; opacity:.45; font-size:13px; transform:translateY(-2px);}

@media (prefers-reduced-motion:reduce){
  .marquee-track{animation:none!important;}
}

/* Hero con video de fondo — genérico, para cualquier página pública que
   necesite el mismo tratamiento que el hero de Home (public/index.html:
   .lp-hero), sin la animación de título palabra-por-palabra que es
   específica de esa página. A diferencia del hero de Home (dúotono
   grayscale a propósito), este mantiene el video a color — solo un
   realce sutil de contraste + un tinte coral leve para que no se vea
   plano, más el degradé oscuro encima para la legibilidad del texto. */
.media-hero{ position:relative; min-height:64vh; display:flex; flex-direction:column; justify-content:flex-end; overflow:hidden; background:var(--ink); padding:0 64px 64px; }
.media-hero-video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; filter:contrast(1.08) saturate(1.1); }
.media-hero-tint{ position:absolute; inset:0; z-index:0; background:linear-gradient(200deg, rgba(255,90,54,.14), rgba(10,8,6,.05) 45%); mix-blend-mode:hard-light; }
.media-hero-overlay{ position:absolute; inset:0; z-index:1; background:linear-gradient(180deg, rgba(10,8,6,.25) 0%, rgba(10,8,6,.6) 60%, rgba(10,8,6,.97) 100%); }
.media-hero-content{ position:relative; z-index:2; max-width:900px; }
.media-hero-sub{ font:500 16px/1.55 var(--font-b); color:rgba(247,241,228,.9); max-width:560px; margin:0; }

@media (max-width:880px){
  .media-hero{ padding:0 22px 40px; min-height:56vh; }
}