/* Cultural Capital Group · escenas de cine ligadas al scroll
   Sin JS o con movimiento reducido, cada escena se ve como un bloque normal. */

.cine-sticky { position: relative; }

/* ---------- Escena 1: el visor se convierte en pantalla ---------- */
.cine-visor { background: var(--ccg-blanco); }
.cine-visor .cine-sticky { display: grid; place-items: center; padding: 0; }
.cine-big { display: none; }
.cine-corners { display: none; }
.cine-screen { position: relative; width: 100%; background: var(--ccg-azul); color: var(--ccg-blanco); display: grid; place-items: center; text-align: center; padding: clamp(80px, 12vw, 160px) var(--gutter); overflow: hidden; }
.cine-screen-in { max-width: 30em; }
.cine-screen .label { color: var(--ccg-blanco); justify-content: center; margin-bottom: 22px; }
.cine-screen .label b { color: var(--ccg-blanco); opacity: .6; }
.cine-screen h2 { margin: 0; font-weight: 700; letter-spacing: -.045em; line-height: 1; font-size: clamp(34px, 5.4vw, 84px); color: var(--ccg-blanco); }
.cine-screen p.sub { margin: 20px auto 0; font-family: var(--mono); font-size: clamp(13px, 1.1vw, 15px); color: rgba(255,255,255,.85); }

.cine .cine-visor { height: 260vh; }
.cine .cine-visor .cine-sticky { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
.cine .cine-big { display: block; margin: 0; text-align: center; font-weight: 700; letter-spacing: -.06em; line-height: .88; font-size: clamp(56px, 12vw, 210px); color: var(--ccg-negro); will-change: transform; }
.cine .cine-big span { color: var(--ccg-azul); }
.cine .cine-screen { position: absolute; left: 50%; top: 50%; width: var(--w, 0); height: var(--h, 0); transform: translate(-50%, -50%); padding: 0 6vw; opacity: 0; }
.cine .cine-screen-in { opacity: var(--o, 0); }
.cine .cine-corners { display: block; position: absolute; left: 50%; top: 50%; width: calc(var(--w, 0px) + 40px); height: calc(var(--h, 0px) + 40px); transform: translate(-50%, -50%); pointer-events: none; }
.cine-corners i { position: absolute; width: 40px; height: 40px; border: 0 solid var(--ccg-azul); }
.cine-corners i:nth-child(1) { top: 0; left: 0; border-width: 4px 0 0 4px; }
.cine-corners i:nth-child(2) { top: 0; right: 0; border-width: 4px 4px 0 0; }
.cine-corners i:nth-child(3) { bottom: 0; left: 0; border-width: 0 0 4px 4px; }
.cine-corners i:nth-child(4) { bottom: 0; right: 0; border-width: 0 4px 4px 0; }

/* ---------- Escena 2: las siete fases en horizontal ---------- */
.cine-proc { background: var(--ccg-azul); color: var(--ccg-blanco); padding: clamp(72px, 9vw, 128px) 0; }
.cine-proc .cine-sticky { display: flex; flex-direction: column; justify-content: center; gap: clamp(24px, 4vh, 44px); }
.cine-proc-head { display: flex; justify-content: space-between; align-items: end; gap: 24px 48px; flex-wrap: wrap; }
.cine-proc-head h2 { margin: 14px 0 0; color: var(--ccg-blanco); font-weight: 700; letter-spacing: -.045em; line-height: 1; font-size: clamp(32px, 4.4vw, 64px); }
.cine-proc-head p { margin: 0; max-width: 30em; color: rgba(255,255,255,.85); font-size: clamp(15px, 1.2vw, 18px); line-height: 1.5; }
.cine-track { list-style: none; margin: 0; padding: 0 var(--gutter); display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 16px; max-width: var(--max); margin-inline: auto; width: 100%; }
.cine-phase { border: 1.5px solid rgba(255,255,255,.35); background: rgba(255,255,255,.03); padding: clamp(20px, 2.6vw, 36px); display: flex; flex-direction: column; justify-content: space-between; gap: 28px; min-height: 260px; transition: background .4s, border-color .4s; }
.cine-phase .n { font-family: var(--mono); font-weight: 500; font-size: clamp(72px, 11vw, 190px); line-height: .8; letter-spacing: -.06em; }
.cine-phase h3 { margin: 0; color: var(--ccg-blanco); font-size: clamp(22px, 2.4vw, 36px); letter-spacing: -.03em; line-height: 1.05; }
.cine-phase p { margin: 10px 0 0; color: rgba(255,255,255,.85); font-size: clamp(15px, 1.15vw, 18px); line-height: 1.5; max-width: 28em; }
.cine-phase .note { display: block; margin-top: 12px; font-family: var(--mono); font-size: 12px; color: rgba(255,255,255,.7); }
.cine-phase.is-on { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.8); }
.cine-phase--cta { background: var(--ccg-blanco); color: var(--ccg-azul); border-color: var(--ccg-blanco); }
.cine-phase--cta h3 { color: var(--ccg-azul); }
.cine-phase--cta p { color: #3a3a40; }
.cine-phase--cta .n { font-size: clamp(56px, 7vw, 120px); }
.cine-phase--cta.is-on { background: var(--ccg-blanco); }
.cine-bar { display: none; }

.cine .cine-proc { padding: 0; }
.cine .cine-proc .cine-sticky { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; padding-top: var(--header-h); }
.cine .cine-track { display: flex; gap: clamp(16px, 3vw, 48px); padding-left: max(var(--gutter), calc((100vw - var(--max)) / 2 + var(--gutter))); max-width: none; margin: 0; will-change: transform; }
.cine .cine-phase { flex: 0 0 min(78vw, 560px); min-height: 0; height: min(54vh, 480px); }
.cine .cine-bar { display: block; position: relative; height: 2px; background: rgba(255,255,255,.25); margin: 0 var(--gutter); max-width: calc(var(--max) - 2 * var(--gutter)); width: calc(100% - 2 * var(--gutter)); align-self: center; }
.cine .cine-bar b { position: absolute; left: 0; top: 0; bottom: 0; background: var(--ccg-blanco); width: calc(var(--p, 0) * 100%); }

/* ---------- Escena 3: los tres perfiles se reparten en 3D ---------- */
.cine .cards.cine-fan { perspective: 1400px; background: transparent; border-color: transparent; }
.cine .cards.cine-fan .card { background-color: var(--ccg-blanco); outline: 1px solid var(--linea); will-change: transform; box-shadow: 0 40px 80px -40px rgba(20,26,140,.35); }

/* ---------- Escena 4: un círculo abre el contacto ---------- */
.cine-circle { background: var(--ccg-blanco); }
.cine-circle .cine-sticky { display: grid; place-items: center; }
.cine-pre { display: none; }
.cine-disc { width: 100%; background: var(--ccg-azul); color: var(--ccg-blanco); display: grid; place-items: center; text-align: center; padding: clamp(80px, 12vw, 160px) var(--gutter); }
.cine-disc h2 { margin: 0 auto 30px; max-width: 12em; color: var(--ccg-blanco); font-weight: 700; letter-spacing: -.05em; line-height: .95; font-size: clamp(40px, 7vw, 120px); }
.cine-disc .cta-row { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.cine-disc .btn--outline { --bg: transparent; --fg: var(--ccg-blanco); --bd: var(--ccg-blanco); }
.cine-disc .btn--outline:hover { --bg: var(--ccg-blanco); --fg: var(--ccg-azul); --bd: var(--ccg-blanco); }

.cine .cine-circle { height: 220vh; }
.cine .cine-circle .cine-sticky { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
.cine .cine-pre { display: block; margin: 0; font-weight: 700; letter-spacing: -.05em; font-size: clamp(28px, 4vw, 56px); color: var(--ccg-negro); }
.cine .cine-disc { position: absolute; inset: 0; padding: var(--header-h) var(--gutter) 0; clip-path: circle(var(--r, 0px) at 50% 55%); }

@media (max-width: 640px) {
  .cine .cine-phase { height: min(60vh, 460px); }
}
@media print {
  .cine-visor, .cine-circle { display: none; }
}