/* ============================================================================================================ CINTAS, VIDEOS A PANTALLA Y PLACAS DEL LOGO · Atracciones Cuadra (27 oct 2026) Se carga después de css/sistema.css (usa sus tokens: --verde-logo, --oro-logo, --oro-brillo, --marfil, --filete-oro, --noche, --f-display, --gutter, --nav, --ancho) con valores de respaldo por si llega antes. Pedido del cliente: entre apartados, el nombre "Atracciones Cuadra" en horizontal que se mueve y vuelve a aparecer, para que el cambio de página al bajar no se vea tan brusco; videos completos a pantalla; el logo original (verde y oro) sobre marfil. 1. .cinta franja de 56-72 px, fondo verde logo con filete de oro arriba y abajo, el nombre repetido en Playfair 700 mayúsculas (.18em) en oro; cada segunda repetición va hueca (contorno de oro, relleno transparente). El carril (.cinta-track) lleva DOS copias idénticas del grupo (.cinta-g) y corre sin fin con translateX(−50 %) en 28 s; js/scroll.js puede acelerarla con --cinta-v (divide la duración) o empujarla con --cinta-x (px; se suma al transform de la animación sin saltos: envolverlo módulo la mitad del ancho del carril). Con "reducir movimiento" queda quieta. Solo ENTRE apartados, nunca dentro de una sección. El ✦ entre repeticiones lo pone el CSS (::after): el texto del span es solo el nombre. 2. .video-pantalla sección de una pantalla (100 svh) con el video (IA) cubriéndola entera (object-fit: cover), degradado esmeralda abajo, texto encima en .wrap y el rótulo "Video ilustrativo" arriba a la derecha (.video-pantalla-nota). Paralaje leve con --vp (0 → 1, lo escribe scroll.js; sin JS, quieto). Sin tramo fijado: es una pantalla que se recorre. Los interludios fijados (#interludio-evento, #interludio-planea) ya cubren la pantalla por sistema.css §9; esta clase es para un bloque nuevo o para quitarle el tramo a uno.

…

…

…

Video ilustrativo

3. .logo-placa placa marfil con filete de oro para el logo ORIGINAL (img/marca/logo-cuadra-oscuro-*.png) en la barra, la tapa de carga y el pie: . La variante marfil del logo no va sobre la placa. ============================================================================================================ */ /* ---------- 1. cinta ---------- */ .cinta{position:relative;z-index:6;display:flex;align-items:center;height:clamp(56px,6vw,72px);margin:0;padding:0;overflow:hidden; background:var(--verde-logo,#1B1440);color:var(--oro-logo,#C9A24E); border-top:1px solid var(--filete-oro,rgba(201,162,78,.45));border-bottom:1px solid var(--filete-oro,rgba(201,162,78,.45)); box-shadow:inset 0 12px 28px -22px rgba(0,0,0,.7),inset 0 -12px 28px -22px rgba(0,0,0,.7); -webkit-user-select:none;user-select:none;pointer-events:none;contain:layout paint} /* grano sutil (el mismo del fondo, fx/scroll.css) y las puntas desvanecidas: el nombre entra y sale sin corte duro */ .cinta::before{content:"";position:absolute;inset:0;z-index:2;pointer-events:none; background:linear-gradient(90deg,var(--verde-logo,#1B1440),rgba(27,20,64,0) 8%,rgba(27,20,64,0) 92%,var(--verde-logo,#1B1440))} .cinta-track{display:flex;flex:none;align-items:center;width:max-content;will-change:transform; translate:var(--cinta-x,0px) 0; animation:cintaCorre 48s linear infinite;animation-duration:calc(48s / var(--cinta-v,1))} .cinta-g{display:inline-flex;flex:none;align-items:center} /* v13: la serif del logotipo (Noto Serif Display 500) en versales muy espaciadas, como el logo */ .cinta-i{display:inline-flex;flex:none;align-items:center;padding:0 .55em 0 .25em; font-family:var(--f-display,"Noto Serif Display",Georgia,serif);font-weight:500;font-size:clamp(16px,1.7vw,25px);line-height:1; letter-spacing:.22em;text-transform:uppercase;white-space:nowrap;color:var(--oro-logo,#C9A24E);text-shadow:0 1px 0 rgba(0,0,0,.35)} /* la estrella de cuatro puntas entre cada repetición, en el oro brillante */ .cinta-i::after{content:"✦";margin-left:.9em;font-size:.62em;color:var(--oro-brillo,#EEB73A);-webkit-text-stroke:0;text-shadow:none;transform:translateY(-.04em)} /* cada segunda repetición: hueca, solo el contorno de oro (marfil "vacío") */ .cinta-i:nth-child(even){color:transparent;-webkit-text-stroke:.9px var(--oro-logo,#C9A24E);text-shadow:none} @keyframes cintaCorre{to{transform:translateX(-50%)}} /* v13: con JS (html.cinta-js) la pista la mueve js/scroll.js a velocidad constante en px/s y sin saltos. La animación CSS se apaga: al cambiar su duración con --cinta-v (scroll rápido) la pista brincaba de posición. Sin JS, sigue la animación de 48 s. */ html.cinta-js .cinta-track{animation:none} /* cintas pegadas a un tramo fijado o a un video: el filete de arriba ya lo pone el velo, no se dobla */ .interludio + .cinta,.pin + .cinta,.video-pantalla + .cinta{border-top-color:rgba(201,162,78,.3)} @media(max-width:900px){ .cinta{height:56px} .cinta-i{font-size:16px;letter-spacing:.18em} } /* fuera de la vista (scroll.js puede marcar .cinta-fuera) o con la página en pausa (body.pausado, fx.js) no gasta cuadros; sin esas marcas corre siempre */ .cinta.cinta-fuera .cinta-track,body.pausado .cinta-track{animation-play-state:paused} /* ---------- 2. video a pantalla completa ---------- */ .video-pantalla{position:relative;z-index:6;display:grid;align-items:end;height:100vh;height:100svh;min-height:520px;margin:0;padding:0; overflow:hidden;isolation:isolate;background:var(--s-0,#0C0820)} .video-pantalla-video,.video-pantalla > video{position:absolute;inset:0;z-index:0;width:100%;height:100%;object-fit:cover;object-position:50% 50%; transform:translate3d(0,calc((.5 - var(--vp,.5)) * 8%),0) scale(1.14)} /* degradado esmeralda inferior (lee el texto) y un velo corto arriba (la barra fija) */ .video-pantalla-velo,.video-pantalla::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none; background:linear-gradient(180deg,rgba(12,8,30,.5) 0%,rgba(12,8,30,0) 22%,rgba(12,8,30,0) 46%,rgba(22,16,54,.78) 80%,var(--noche,#120C2B) 100%), radial-gradient(80% 70% at 0% 100%,rgba(12,8,30,.8),rgba(12,8,30,0) 70%)} .video-pantalla:has(.video-pantalla-velo)::after{content:none} .video-pantalla > .wrap{position:relative;z-index:2;display:grid;gap:var(--e-4,16px);justify-items:start;width:100%;max-width:calc(var(--ancho,1440px) + 2 * var(--gutter,40px)); margin:0 auto;padding:0 var(--gutter,40px) clamp(48px,9vh,104px);text-shadow:0 1px 2px rgba(8,5,20,.95),0 2px 28px rgba(8,5,20,.6)} .video-pantalla h2{font-size:var(--t-portada,clamp(40px,6vw,98px));line-height:1.02;max-width:18ch;margin-block:.1em .16em} .video-pantalla .lead{color:var(--tinta,#F3EEE3);opacity:.92} .video-pantalla .capitulo-cab .mini{color:rgba(243,238,227,.86)} /* rótulo: arriba a la derecha, bajo la barra (abajo chocaría con el WhatsApp flotante); siempre "Video ilustrativo", nunca "real" */ .video-pantalla-nota{position:absolute;z-index:2;right:calc(var(--gutter,40px) + 8px);top:calc(var(--nav,76px) + 26px);margin:0;padding:5px 11px;border-radius:999px; background:rgba(10,7,26,.72);color:rgba(243,238,227,.8);text-shadow:none} @media(max-width:900px){ .video-pantalla{min-height:0} .video-pantalla > .wrap{padding-bottom:max(40px,calc(env(safe-area-inset-bottom,0px) + 32px))} .video-pantalla-nota{top:calc(var(--nav,56px) + 12px);right:var(--gutter,16px)} } /* ---------- 3. contenedor del logo (.logo-placa) ---------- v13: ya NO es placa. El logo original (verde y oro, fondo transparente) va directo sobre el morado: sin fondo, sin filete, sin sombra ni filtro (pedido del cliente: nada de brillo, halo ni placa). Las medidas viven en index.html y css/v13-marca.css: barra 97 × 65 (78 × 52 en celular), carga 140 × 94, pie 146 × 98. */ .logo-placa{display:inline-flex;align-items:center;justify-content:center;flex:none;padding:0;border:0;border-radius:0;line-height:0;background:none;box-shadow:none;filter:none} .logo-placa img{display:block;max-width:none} footer .marca .logo-placa{align-self:flex-start} /* ---------- reducir movimiento: la cinta y los videos quietos ---------- */ @media(prefers-reduced-motion:reduce){ .cinta-track{animation:none!important;translate:none} .video-pantalla-video,.video-pantalla > video{transform:none} }