/* ═══════════════════════════════════════════
TOKENS — OLD HOLLYWOOD CINEMATIC PALETTE
═══════════════════════════════════════════ */
@font-face {
font-family: 'Bodoni Moda';
src: url('assets/fonts/bodoni-moda-400-latin.woff2') format('woff2');
font-style: normal;
font-weight: 400;
font-display: swap;
}
@font-face {
font-family: 'Cormorant Garamond';
src: url('assets/fonts/cormorant-garamond-400-latin.woff2') format('woff2');
font-style: normal;
font-weight: 400;
font-display: swap;
}
@font-face {
font-family: 'Cormorant Garamond';
src: url('assets/fonts/cormorant-garamond-400-italic-latin.woff2') format('woff2');
font-style: italic;
font-weight: 400;
font-display: swap;
}
@font-face {
font-family: 'Courier Prime';
src: url('assets/fonts/Courier_Prime.ttf') format('truetype');
font-style: normal;
font-weight: 400;
font-display: swap;
}
:root {
--color-canvas: #090808;
--color-surface: #151313;
--color-surface-raised: #201D1C;
--tone-ivory: #F2EBDD;
--tone-silver: #C8C6C2;
--tone-champagne: #B79A69;
--tone-burgundy: #4A2027;
--color-ink: var(--tone-ivory);
--color-ink-muted: var(--tone-silver);
--color-action: var(--tone-champagne);
--color-authority: var(--tone-champagne);
--color-counterpoint: var(--tone-burgundy);
--font-display: 'Bodoni Moda', serif;
--font-body: 'Cormorant Garamond', serif;
--font-editorial: 'Cormorant Garamond', serif;
--font-label: 'Cormorant Garamond', serif;
--font-mono: 'Courier Prime', monospace;
/* Legacy aliases keep existing composition on the semantic palette. */
--negro: var(--color-canvas);
--negro2: var(--color-surface);
--carbon: var(--color-surface-raised);
--gris-os: #302C2A;
--gris-m: var(--color-ink-muted);
--gris-c: var(--color-ink-muted);
--crema: var(--color-ink);
--blanco: var(--color-ink);
--oro: var(--color-authority);
--oro-v: var(--color-action);
--oro-s: rgba(183,154,105,.15);
--fd: var(--font-display);
--fa: var(--font-display);
--fs: var(--font-body);
--fe: var(--font-editorial);
}
*, *::before, *::after { box-sizing:border-box; margin:0; padding:0; -webkit-tap-highlight-color:transparent; }
html { scroll-behavior:smooth; }
a, button, [onclick] { -webkit-tap-highlight-color:transparent; user-select:none; outline:none; }
:focus-visible {
outline:2px solid var(--color-authority);
outline-offset:4px;
}
body {
font-family: var(--fs);
background: var(--negro);
color: var(--crema);
}
body.no-scroll { overflow:hidden; }
/* ─── GRAIN DE PELÍCULA (intro only) ─── */
#grain {
position:fixed; inset:0; z-index:9997; pointer-events:none;
background:url('data:image/svg+xml;utf8,');
opacity:.055;
mix-blend-mode: overlay;
}
body:has(#modal-inicio.cerrado) #grain { opacity:0; }
/* ─── BORDE CELULOIDE (sprocket holes) ─── */
#celuloide-top, #celuloide-bot {
position:fixed; left:0; right:0; height:28px; z-index:9996;
pointer-events:none;
background: repeating-linear-gradient(
to right,
var(--negro2) 0px, var(--negro2) 14px,
transparent 14px, transparent 24px,
var(--negro2) 24px, var(--negro2) 28px,
transparent 28px, transparent 42px,
var(--negro2) 42px, var(--negro2) 48px,
transparent 48px, transparent 62px
);
}
#celuloide-top { top:0; border-bottom:2px solid rgba(200,168,75,.2); }
#celuloide-bot { bottom:0; border-top:2px solid rgba(200,168,75,.2); }
#celuloide-top::before, #celuloide-top::after,
#celuloide-bot::before, #celuloide-bot::after {
content:'';
position:absolute; left:0; right:0; top:50%;
transform:translateY(-50%);
height:14px;
background: repeating-linear-gradient(
to right,
transparent 0px, transparent 8px,
var(--negro) 8px, var(--negro) 18px,
transparent 18px, transparent 36px,
var(--negro) 36px, var(--negro) 46px,
transparent 46px, transparent 64px
);
}
/* ─── PATRÓN ART DECO ESTÁTICO ─── */
#deco-bg {
position:fixed; inset:0; z-index:0; pointer-events:none;
opacity:.04;
background-image:
repeating-linear-gradient(45deg, var(--oro) 0,var(--oro) 1px,transparent 0,transparent 40px),
repeating-linear-gradient(-45deg, var(--oro) 0,var(--oro) 1px,transparent 0,transparent 40px);
background-size:56px 56px;
}
#deco-bg::before {
content:''; position:absolute; inset:0;
background:
radial-gradient(ellipse at 0% 0%, rgba(200,168,75,.12) 0%, transparent 40%),
radial-gradient(ellipse at 100% 0%, rgba(200,168,75,.08) 0%, transparent 35%),
radial-gradient(ellipse at 0% 100%, rgba(200,168,75,.06) 0%, transparent 35%),
radial-gradient(ellipse at 100% 100%, rgba(200,168,75,.1) 0%, transparent 40%);
}
/* ─── SCROLL FADE ─── */
.fade-s { transition:opacity .7s ease, transform .7s ease; }
.fade-s.fuera { opacity:.08; transform:translateY(10px); }
.fade-s.dentro { opacity:1; transform:translateY(0); }
/* ─── DIVISOR ART DECO ─── */
.deco-div {
display:flex; align-items:center; gap:0;
margin:32px auto 40px; justify-content:center;
}
.deco-div-line { flex:1; max-width:80px; height:1px; background:var(--oro); opacity:.4; }
.deco-div-orn {
padding:0 16px; display:flex; align-items:center; gap:6px;
font-family:var(--fd); font-size:1.1em; color:var(--oro); opacity:.8;
letter-spacing:4px;
}
.deco-div-orn::before,.deco-div-orn::after {
content:''; width:5px; height:5px; flex:none;
border:1px solid currentColor; transform:rotate(45deg);
}
.filmstrip-hint {
font-family:var(--fe); font-style:italic; color:var(--gris-m); font-size:.95em;
}
.escena-foto {
display:block; width:100%; max-width:100%; height:auto; margin:28px auto 0;
}
.album-title {
font-family:var(--fe); font-style:italic; font-weight:400;
font-size:1.4em; color:var(--crema); margin-bottom:15px;
}
.album-copy {
font-family:var(--fs); font-size:.85em; color:var(--gris-c);
line-height:1.8; max-width:500px; margin:0 auto;
}
.rsvp-deadline {
font-family:var(--fe); font-style:italic; color:var(--oro);
font-size:1em; opacity:.8;
}
/* ═══════════════════════════════════════════
MODAL — OLD HOLLYWOOD CINEMATIC INTRO
═══════════════════════════════════════════ */
#modal-inicio {
position:fixed; inset:0; z-index:9000;
background:#000;
overflow:hidden;
}
#modal-inicio.cerrado {
opacity:0; visibility:hidden; pointer-events:none;
transition:opacity 1.2s ease .2s, visibility 1.2s ease .2s;
}
/* ── PHASE 1: FILM LEADER — FULL SCREEN ── */
#film-leader {
position:absolute; inset:0;
background:#000;
display:flex; align-items:center; justify-content:center;
z-index:10; cursor:pointer; overflow:hidden;
}
#leader-canvas {
position:absolute; inset:0;
width:100%; height:100%; display:block;
}
.projector-beam {
position:absolute; top:0; left:50%; transform:translateX(-50%);
width:55%; height:100%;
background:linear-gradient(180deg,rgba(255,240,160,.06) 0%,rgba(255,240,160,.015) 35%,transparent 72%);
clip-path:polygon(35% 0%,65% 0%,92% 100%,8% 100%);
pointer-events:none; z-index:1;
animation:beam-flicker .14s step-end infinite;
}
@keyframes beam-flicker{0%,100%{opacity:.8}33%{opacity:.5}66%{opacity:1}}
.fl-skip {
position:absolute; bottom:calc(clamp(20px,4vh,40px) + env(safe-area-inset-bottom, 0px)); left:50%; transform:translateX(-50%);
font-family:var(--fs); font-size:clamp(.75rem,1.3vw,.9rem); letter-spacing:clamp(1px,.6vw,2px); text-transform:uppercase;
color:var(--color-ink); text-shadow:0 1px 6px rgba(0,0,0,.95); animation:blink-lbl 2.5s step-end infinite;
white-space:nowrap; z-index:2; cursor:pointer; pointer-events:auto;
border:1px solid rgba(200,168,75,.45); background:rgba(0,0,0,.65);
padding:10px 16px; font:inherit; letter-spacing:inherit;
}
.gate-skip { top:calc(28px + env(safe-area-inset-top, 0px)); bottom:auto; }
.gate-stage-skip {
position:relative; z-index:7; cursor:pointer; margin-top:4px;
border:1px solid rgba(200,168,75,.45); background:rgba(0,0,0,.7);
color:var(--color-ink); padding:10px 16px;
font-family:var(--fs); font-size:clamp(.75rem,1.3vw,.9rem);
letter-spacing:1px; text-transform:uppercase;
}
/* ── PHASE 2: TITLE CARD — KC STUDIO STAMP ── */
#title-card {
position:absolute; inset:0; background:#000;
display:none; flex-direction:column;
align-items:center; justify-content:center;
gap:0; z-index:9; opacity:0;
}
#title-card::before {
content:''; position:absolute; inset:0; pointer-events:none;
background:repeating-linear-gradient(0deg,transparent 0px,transparent 3px,rgba(0,0,0,.2) 3px,rgba(0,0,0,.2) 5px);
z-index:0;
}
.tc-badge {
position:absolute; top:50%; left:50%;
transform:translate(-50%,-50%);
z-index:1;
display:flex; flex-direction:column; align-items:center;
gap:clamp(10px,2.5vh,20px); text-align:center;
padding:clamp(30px,6vh,60px) clamp(20px,5vw,60px);
width:90%; max-width:600px;
}
.tc-badge::before, .tc-badge::after {
content:''; position:absolute; pointer-events:none;
transition:opacity 1.2s ease; opacity:0;
}
.tc-badge::before { inset:-18px; border:1px solid rgba(200,168,75,.45); }
.tc-badge::after { inset:-28px; border:1px solid rgba(200,168,75,.18); }
.tc-badge.frame-visible::before, .tc-badge.frame-visible::after { opacity:1; }
.tc-khal {
font-family:var(--fd);
font-size:clamp(2em,7.5vw,5.5em);
letter-spacing:clamp(10px,2.5vw,26px);
color:var(--crema); line-height:1; white-space:nowrap;
text-shadow:0 0 80px rgba(200,168,75,.2),0 3px 0 rgba(0,0,0,.9);
clip-path:inset(0 100% 0 0);
transition:clip-path 1.5s cubic-bezier(.77,0,.175,1);
}
.tc-khal.stamp-in { clip-path:inset(0 0% 0 0); }
.tc-calloway {
font-family:var(--fd);
font-size:clamp(1.4em,4.5vw,3.4em);
letter-spacing:clamp(14px,4vw,36px);
color:var(--oro-v); line-height:1; white-space:nowrap;
text-shadow:0 0 60px rgba(200,168,75,.4),0 2px 0 rgba(0,0,0,.8);
clip-path:inset(0 100% 0 0);
transition:clip-path 1.2s cubic-bezier(.77,0,.175,1) .3s;
}
.tc-calloway.stamp-in { clip-path:inset(0 0% 0 0); }
.tc-gold-line {
display:flex; align-items:center; gap:0;
width:clamp(140px,45vw,400px);
opacity:0; transform:scaleX(0); transform-origin:center;
transition:opacity .3s ease .9s,transform .9s cubic-bezier(.25,.46,.45,.94) .9s;
}
.tc-gold-line.stamp-in { opacity:1; transform:scaleX(1); }
.tcgl-line { flex:1; height:1px; background:linear-gradient(to right,transparent,rgba(200,168,75,.7),transparent); }
.tcgl-diamond { width:7px; height:7px; background:var(--oro); transform:rotate(45deg); flex-shrink:0; margin:0 10px; }
.tc-presenta {
font-family:var(--fe); font-style:italic;
font-size:clamp(.9em,2.5vw,1.3em);
color:rgba(220,188,95,.85); letter-spacing:.35em;
opacity:0; transition:opacity .7s ease;
}
.tc-presenta.stamp-in { opacity:1; }
/* ── PHASE 2b: MOVIE TITLE CARD ── */
.tc-movie-wrap {
position:relative; z-index:1;
display:flex; flex-direction:column; align-items:center;
gap:clamp(8px,2vh,18px); text-align:center;
padding:clamp(20px,5vh,50px) clamp(16px,5vw,48px);
opacity:0; transform:translateY(20px);
transition:opacity .9s ease, transform .9s cubic-bezier(.25,.46,.45,.94);
}
.tc-movie-wrap.stamp-in { opacity:1; transform:translateY(0); }
/* Gold ornamental rule */
.tc-movie-rule {
display:flex; align-items:center; gap:0;
width:clamp(120px,55vw,380px);
opacity:0; transform:scaleX(0); transform-origin:center;
transition:opacity .5s ease .3s, transform .7s cubic-bezier(.25,.46,.45,.94) .3s;
}
.tc-movie-wrap.stamp-in .tc-movie-rule { opacity:1; transform:scaleX(1); }
.tc-movie-rule-line {
flex:1; height:1px;
background:linear-gradient(to right,transparent,rgba(200,168,75,.6),transparent);
}
.tc-movie-rule-gem {
width:5px; height:5px; background:var(--oro);
transform:rotate(45deg); flex-shrink:0; margin:0 4px;
}
/* The big film title */
.tc-movie-title {
font-family:var(--fa);
font-size:clamp(2.4em, 9vw, 6.2em);
letter-spacing:clamp(4px,1.5vw,16px);
color:var(--crema); line-height:1.05;
text-shadow:
0 0 80px rgba(200,168,75,.3),
0 4px 0 rgba(0,0,0,.95),
0 8px 40px rgba(0,0,0,.8);
white-space:normal; word-break:break-word;
clip-path:inset(0 100% 0 0);
transition:clip-path 1.4s cubic-bezier(.77,0,.175,1) .2s;
}
.tc-movie-wrap.stamp-in .tc-movie-title { clip-path:inset(0 0% 0 0); }
.tc-movie-amp {
font-family:var(--fe); font-style:italic;
font-size:.5em; color:var(--oro-v);
vertical-align:middle; margin:0 .1em;
text-shadow:0 0 30px rgba(200,168,75,.6);
}
/* Subtitle below names */
.tc-movie-sub {
font-family:var(--fe); font-style:italic;
font-size:clamp(.72em,2vw,.95em);
color:rgba(220,188,95,.75); letter-spacing:clamp(2px,1vw,5px);
opacity:0; transform:translateY(8px);
transition:opacity .7s ease .6s, transform .7s ease .6s;
white-space:nowrap;
}
.tc-movie-wrap.stamp-in .tc-movie-sub { opacity:1; transform:translateY(0); }
.tc-studio-word {
font-family:var(--fs); font-size:clamp(.46em,1.4vw,.7em);
letter-spacing:clamp(8px,2.5vw,16px); color:rgba(200,168,75,.65);
text-transform:uppercase; white-space:nowrap;
opacity:0; transform:translateY(10px);
transition:opacity .8s ease 1.5s,transform .8s ease 1.5s;
}
.tc-studio-word.stamp-in { opacity:1; transform:translateY(0); }
.tc-presenta {
font-family:var(--fe); font-style:italic;
font-size:clamp(.9em,2.5vw,1.3em);
color:rgba(220,188,95,.85); letter-spacing:.35em;
opacity:0; transition:opacity .7s ease;
}
.tc-presenta.stamp-in { opacity:1; }
/* ── PHASE 3: GRAND STAGE ── */
#modal-stage {
position:absolute; inset:0;
display:none;
flex-direction:column;
align-items:center; justify-content:center;
gap:clamp(12px,2.5vh,24px);
opacity:0;
padding:
calc(40px + env(safe-area-inset-top, 0px))
calc(20px + env(safe-area-inset-right, 0px))
calc(30px + env(safe-area-inset-bottom, 0px))
calc(20px + env(safe-area-inset-left, 0px));
overflow:hidden;
}
/* ── STAGE BG: Theatre Noir — Deep Velvet Darkness ── */
.stage-bg {
position:absolute; inset:0;
background:
/* Warm glow radiating from the clapperboard center */
radial-gradient(ellipse 60% 40% at 50% 62%, rgba(200,168,75,.11) 0%, transparent 60%),
/* Subtle amber breath from below */
radial-gradient(ellipse 100% 30% at 50% 100%, rgba(160,120,50,.08) 0%, transparent 55%),
/* Absolute theatre black */
radial-gradient(ellipse at center, #0D0A06 0%, #05040200 60%, #000 100%),
#000;
}
/* Barely-visible Art Deco chevron — ghosted, premium */
.stage-bg::before {
content:''; position:absolute; inset:0;
background-image:
repeating-linear-gradient(60deg, rgba(200,168,75,.012) 0, rgba(200,168,75,.012) 1px, transparent 0, transparent 50px),
repeating-linear-gradient(-60deg, rgba(200,168,75,.012) 0, rgba(200,168,75,.012) 1px, transparent 0, transparent 50px);
background-size:50px 50px;
}
/* ── THEATRICAL SPOTLIGHTS ── */
.spotlight-wrap {
position:absolute; inset:0; pointer-events:none; z-index:1; overflow:hidden;
}
.spotlight {
position:absolute; top:0; pointer-events:none;
}
.sp-left {
left:-2%; width:38%;
height:72vh;
background:linear-gradient(185deg,
rgba(255,235,150,.18) 0%,
rgba(255,235,150,.06) 40%,
transparent 80%
);
clip-path: polygon(28% 0%, 72% 0%, 100% 100%, 0% 100%);
transform-origin: 50% 0%;
animation: sway-l 10s ease-in-out infinite alternate;
}
.sp-center {
left:50%; transform:translateX(-50%);
width:35%;
height:88vh;
background:linear-gradient(180deg,
rgba(255,245,180,.45) 0%,
rgba(255,242,160,.14) 40%,
rgba(255,235,130,.04) 70%,
transparent 90%
);
clip-path: polygon(22% 0%, 78% 0%, 94% 100%, 6% 100%);
transform-origin: 50% 0%;
animation: sway-c 9s ease-in-out infinite alternate;
}
.sp-right {
right:-2%; width:34%;
height:68vh;
background:linear-gradient(175deg,
rgba(255,235,150,.15) 0%,
rgba(255,235,150,.05) 40%,
transparent 80%
);
clip-path: polygon(28% 0%, 72% 0%, 100% 100%, 0% 100%);
transform-origin: 50% 0%;
animation: sway-r 12s ease-in-out infinite alternate;
}
@keyframes sway-l { 0%{transform:rotate(-6deg)} 100%{transform:rotate(4deg)} }
@keyframes sway-c { 0%{opacity:.75} 100%{opacity:1} }
@keyframes sway-r { 0%{transform:rotate(5deg)} 100%{transform:rotate(-5deg)} }
/* ── STAGE CORNER ORNAMENTS ── */
.stage-corner {
position:absolute; pointer-events:none; z-index:2;
width:clamp(50px,8vw,80px); height:clamp(50px,8vw,80px);
}
.sc-tl { top:clamp(32px,5vh,50px); left:clamp(16px,3vw,32px); }
.sc-tr { top:clamp(32px,5vh,50px); right:clamp(16px,3vw,32px); transform:scaleX(-1); }
.sc-bl { bottom:clamp(32px,5vh,50px); left:clamp(16px,3vw,32px); transform:scaleY(-1); }
.sc-br { bottom:clamp(32px,5vh,50px); right:clamp(16px,3vw,32px); transform:scale(-1); }
.stage-corner svg { width:100%; height:100%; }
/* ── THE GRAND CLAPPERBOARD ── */
.grand-claqueta {
position:relative; z-index:3;
cursor:pointer;
width:clamp(300px, 86vw, 560px);
filter: drop-shadow(0 50px 120px rgba(0,0,0,.98))
drop-shadow(0 0 50px rgba(200,168,75,.18));
animation: gc-breathe 4s ease-in-out infinite alternate;
transition:transform .2s ease;
}
@keyframes gc-breathe {
0% { filter:drop-shadow(0 50px 120px rgba(0,0,0,.98)) drop-shadow(0 0 30px rgba(200,168,75,.12)); }
100%{ filter:drop-shadow(0 50px 120px rgba(0,0,0,.95)) drop-shadow(0 0 90px rgba(200,168,75,.38)); }
}
.grand-claqueta:hover {
transform: translateY(-4px) scale(1.008);
}
.clap-hit-target {
appearance:none; position:absolute; inset:0; z-index:6;
width:100%; height:100%; padding:0; border:0; background:transparent;
cursor:pointer;
}
/* — THE STICK (wood grain) — */
.gc-stick {
width:100%;
height:clamp(54px,9vw,84px);
position:relative;
transform-origin:left top;
transition:transform .4s cubic-bezier(.25,-.5,.75,1.5);
z-index:4;
border-radius:5px 5px 0 0;
overflow:hidden;
}
/* Wood grain via diagonal stripes */
.gc-stick-wood {
position:absolute; inset:0;
border:3px solid #120800;
border-radius:5px 5px 0 0;
overflow:hidden;
background:
repeating-linear-gradient(
-52deg,
#2B1206 0px, #2B1206 18px,
#C49550 18px, #C49550 36px,
#3A1A08 36px, #3A1A08 56px,
#D4A860 56px, #D4A860 72px,
#261008 72px, #261008 92px
);
}
/* Metallic sheen overlay */
.gc-stick-wood::before {
content:'';
position:absolute; inset:0;
background:linear-gradient(
to bottom,
rgba(255,255,255,.22) 0%,
rgba(255,255,255,.06) 45%,
rgba(0,0,0,.35) 100%
);
}
/* Diagonal stripe shadows for depth */
.gc-stick-wood::after {
content:'';
position:absolute; inset:0;
background:linear-gradient(
to right,
rgba(0,0,0,.15) 0%,
transparent 10%,
transparent 90%,
rgba(0,0,0,.15) 100%
);
}
/* Metal hinge fixtures at bottom of stick */
.gc-hinge {
position:absolute; bottom:-7px; z-index:5;
width:clamp(18px,3vw,26px); height:14px;
background:linear-gradient(145deg, #AAA 0%, #666 40%, #AAA 70%, #555 100%);
border:1px solid #333; border-radius:3px;
box-shadow:0 2px 4px rgba(0,0,0,.6);
}
.gc-hinge-l { left:12%; }
.gc-hinge-r { right:12%; }
/* Clap animation */
.gc-stick.rebote {
animation: gc-clap .4s cubic-bezier(.2,-.6,.4,1.4) forwards;
}
@keyframes gc-clap {
0% { transform:rotate(0deg); }
18% { transform:rotate(-40deg); }
42% { transform:rotate(-4deg); }
62% { transform:rotate(-35deg); }
100% { transform:rotate(-35deg); }
}
/* — THE BODY — */
.gc-body {
position:relative;
border:3px solid #120800;
border-top:none;
overflow:hidden;
background:#0A0A0B;
}
/* GOLD TRIM BANDS (top & bottom) */
.gc-trim {
height:10px;
background:linear-gradient(
to right,
#3A2008, #7A5020, #B8902A, var(--oro), #F0D880, #F8E898, #F0D880, var(--oro), #B8902A, #7A5020, #3A2008
);
box-shadow:0 0 12px rgba(200,168,75,.4);
}
/* ── CHALKBOARD ZONE ── */
.gc-chalk {
background:
linear-gradient(135deg, rgba(255,255,255,.02) 0%, transparent 50%),
linear-gradient(315deg, rgba(0,0,0,.15) 0%, transparent 50%),
#0D1810;
padding:clamp(10px,2vw,18px) clamp(12px,2.5vw,22px);
position:relative;
}
/* Subtle chalk dust texture */
.gc-chalk::before {
content:'';
position:absolute; inset:0; pointer-events:none;
background:url('data:image/svg+xml;utf8,');
opacity:.09;
}
.gc-chalk-grid {
display:grid; grid-template-columns:1fr 1fr;
gap:1px;
border:1px solid rgba(255,255,255,.06);
}
.gc-chalk-cell {
padding:clamp(10px,2vw,16px) clamp(10px,2vw,16px);
border:1px solid rgba(255,255,255,.05);
}
.gcc-lbl {
display:block;
font-family:var(--fs); font-size:.36em;
letter-spacing:3.5px; text-transform:uppercase;
color:var(--tone-champagne);
margin-bottom:5px;
}
.gcc-val {
display:block;
font-family:var(--fd);
font-size:clamp(.8em,2.2vw,1.05em);
letter-spacing:1.5px;
color:rgba(252,248,235,.92);
/* Chalk-like soft glow */
text-shadow:0 0 10px rgba(255,255,255,.18), 0 0 20px rgba(255,255,255,.06);
}
/* ── METALLIC DIVIDER with screws ── */
.gc-divider {
height:20px;
background:linear-gradient(to bottom, #1A0A00, #080400);
display:flex; align-items:center; padding:0 16px; gap:0;
}
.gc-div-line {
flex:1; height:1px;
background:linear-gradient(to right, transparent, rgba(200,168,75,.5), transparent);
}
.gc-screw {
width:13px; height:13px; border-radius:50%; flex-shrink:0;
background:radial-gradient(circle at 32% 32%, #DDDDD0, #777, #333);
border:1px solid #2A2A2A;
box-shadow:inset 0 1px 2px rgba(255,255,255,.15), 0 1px 3px rgba(0,0,0,.7);
position:relative;
}
/* Screw slot */
.gc-screw::after {
content:'';
position:absolute; top:50%; left:50%;
transform:translate(-50%,-50%) rotate(45deg);
width:7px; height:1.5px;
background:rgba(0,0,0,.5);
}
/* ── IVORY PRESENTATION ZONE ── */
.gc-ivory {
background:linear-gradient(160deg, #F5F0E2 0%, #EDE6D0 100%);
color:var(--negro);
padding:clamp(20px,4.5vw,36px) clamp(18px,4vw,32px);
text-align:center;
position:relative;
}
/* Double gold frame */
.gc-ivory::before {
content:'';
position:absolute; inset:8px;
border:1.5px solid rgba(200,168,75,.5);
pointer-events:none;
}
.gc-ivory::after {
content:'';
position:absolute; inset:3px;
border:1px solid rgba(200,168,75,.18);
pointer-events:none;
}
.gc-orn-row {
position:relative; z-index:1;
margin-bottom:clamp(6px,1.2vw,12px);
}
.gc-orn-row.bottom {
margin-top:clamp(6px,1.2vw,12px); margin-bottom:0;
}
/* THE GRAND MONOGRAM */
.gc-monogram {
position:relative; z-index:1;
font-family:var(--fa);
font-size:clamp(3.8em,10vw,6em);
letter-spacing:clamp(8px,2.5vw,22px);
color:#0C0B08;
line-height:1;
text-shadow:
0 3px 0 rgba(255,255,255,.7),
0 -1px 0 rgba(0,0,0,.18),
0 0 40px rgba(200,168,75,.08);
}
.gc-amp {
font-family:var(--fe); font-style:italic;
font-size:.45em; color:var(--oro);
vertical-align:middle;
text-shadow:0 0 20px rgba(200,168,75,.4);
}
.gc-subtitle {
position:relative; z-index:1;
font-family:var(--fe); font-style:italic;
font-size:clamp(.75em,2vw,.9em);
color:#8A7A60;
margin-top:6px;
letter-spacing:2.5px;
}
/* ── STAGE PROMPT — Minimal Luxury ── */
.stage-prompt {
position:relative; z-index:6;
display:flex; flex-direction:column; align-items:center; gap:14px;
}
.sp-rule {
display:flex; align-items:center; gap:14px;
width:clamp(140px,48vw,340px);
}
.sp-rule-line {
flex:1; height:1px;
background:linear-gradient(to right,transparent,rgba(200,168,75,.35),transparent);
}
.sp-rule-gem {
width:5px; height:5px; background:rgba(200,168,75,.5);
transform:rotate(45deg); flex-shrink:0;
}
/* Touch prompt — animated finger/tap indicator */
.touch-prompt {
display:flex; flex-direction:column; align-items:center; gap:10px;
appearance:none; border:0; background:transparent; color:inherit; padding:0; font:inherit;
cursor:pointer;
}
.tp-icon {
display:block; width:32px; height:32px; color:var(--tone-champagne);
animation:tp-float 2.2s ease-in-out infinite;
filter:drop-shadow(0 0 8px rgba(183,154,105,.25));
}
.tp-icon svg { display:block; width:100%; height:100%; }
.tp-text {
font-family:var(--fs); font-size:.42em;
letter-spacing:5px; text-transform:uppercase;
color:var(--tone-champagne);
animation:blink-lbl 2.4s step-end infinite;
text-align:center;
}
@keyframes tp-float {
0%,100% { transform:translateY(0) scale(1); }
40% { transform:translateY(-6px) scale(1.08); }
70% { transform:translateY(-2px) scale(1.02); }
}
@keyframes blink-lbl {
0%,100% { opacity:1; text-shadow:none; }
50% { opacity:1; text-shadow:0 0 8px rgba(183,154,105,.35); }
}
/* Stage entrance animation */
#modal-stage.stage-in .grand-claqueta {
animation: claqueta-entrada 1.1s cubic-bezier(.22,1.4,.36,1) forwards, gc-breathe 4s 1.1s ease-in-out infinite alternate;
}
@keyframes claqueta-entrada {
0% { opacity:0; transform:translateY(60px) scale(.88); }
60% { opacity:1; transform:translateY(-6px) scale(1.015); }
80% { transform:translateY(2px) scale(.998); }
100% { opacity:1; transform:translateY(0) scale(1); }
}
/* ═══════════════════════════════════════════
§1 PORTADA — HERO FULL BLEED
═══════════════════════════════════════════ */
.portada {
min-height: 100vh;
min-height: 100svh;
display: flex; flex-direction: column;
justify-content: flex-end; align-items: center;
text-align: center;
position: relative; overflow: hidden;
}
/* Foto de fondo a pantalla completa */
.portada-bg {
position: absolute; inset: 0; z-index: 0;
background: #000;
}
.portada-bg img {
width: 100%; height: 100%; object-fit: cover;
object-position: center top;
filter: grayscale(85%) contrast(110%) brightness(.75);
animation: film-kb 40s ease-in-out infinite alternate;
}
@keyframes film-kb {
0% { transform: scale(1.04) translate(0,0); }
100% { transform: scale(1.10) translate(-1%,-2%); }
}
/* Overlay cinematográfico — gradiente vertical denso en la parte baja */
.portada-overlay {
position: absolute; inset: 0; z-index: 1; pointer-events: none;
background:
linear-gradient(to bottom,
rgba(0,0,0,.55) 0%,
rgba(0,0,0,.18) 35%,
rgba(0,0,0,.10) 55%,
rgba(0,0,0,.75) 80%,
rgba(0,0,0,.95) 100%
);
}
/* Scanlines muy sutiles */
.portada-scanlines {
position: absolute; inset: 0; z-index: 2; pointer-events: none;
background: repeating-linear-gradient(
0deg, transparent 0, transparent 3px,
rgba(0,0,0,.04) 3px, rgba(0,0,0,.04) 4px
);
}
/* Bordes de película — detalle decorativo en izq/der */
.portada-film-edge {
position: absolute; top: 0; bottom: 0; z-index: 3;
width: clamp(24px,6vw,40px);
background: #060404;
display: flex; flex-direction: column;
align-items: center; justify-content: space-around;
padding: 20px 0;
border-right: 1.5px solid rgba(200,168,75,.15);
}
.portada-film-edge.right {
right: 0; border-right: none;
border-left: 1.5px solid rgba(200,168,75,.15);
}
.portada-film-edge.left { left: 0; }
.portada-spr {
width: 55%; aspect-ratio: 1/.6;
border-radius: 2px;
background: #020101;
border: 1px solid rgba(255,255,255,.06);
box-shadow: inset 0 1px 3px rgba(0,0,0,.9);
flex-shrink: 0;
}
/* Contenido sobre la foto */
.portada-content {
position: relative; z-index: 4;
width: 100%;
padding: clamp(40px,8vh,70px) clamp(50px,8vw,80px) clamp(50px,9vh,80px);
display: flex; flex-direction: column;
align-items: center; gap: clamp(12px,2.5vh,22px);
}
/* Línea ornamental superior */
.portada-rule {
display: flex; align-items: center; gap: 12px;
width: clamp(160px,60vw,340px);
}
.portada-rule-line {
flex: 1; height: 1px;
background: linear-gradient(to right, transparent, rgba(200,168,75,.5), transparent);
}
.portada-rule-gem {
width: 5px; height: 5px; background: var(--oro);
transform: rotate(45deg); flex-shrink: 0;
}
.portada-pretxt {
font-family: var(--fs); font-size: clamp(.75rem,1.2vw,.95rem);
letter-spacing: clamp(1.5px,.7vw,3px); text-transform: uppercase;
color: var(--color-action); text-shadow: 0 1px 6px rgba(0,0,0,.95);
}
.portada-nombres {
font-family: var(--fa);
font-size: clamp(2.8rem,10vw,7rem);
letter-spacing: clamp(4px,1.5vw,14px);
color: #FAFAF8; line-height: 1;
text-shadow:
0 0 80px rgba(200,168,75,.35),
0 4px 0 rgba(0,0,0,.9),
0 8px 40px rgba(0,0,0,.8);
}
.portada-amp {
font-family: var(--fe); font-style: italic;
font-size: .4em; color: var(--oro-v);
display: block; margin: .1em 0;
text-shadow: 0 0 30px rgba(200,168,75,.6);
}
.portada-fecha {
display: flex; align-items: center; gap: clamp(8px,2vw,16px);
border: 1px solid rgba(200,168,75,.35);
padding: clamp(8px,1.5vh,12px) clamp(16px,4vw,28px);
background: rgba(0,0,0,.5);
backdrop-filter: blur(4px);
position: relative;
}
.portada-fecha::before { content:''; position:absolute; top:-2.5px; left:-2.5px; width:5px; height:5px; background:var(--oro); transform:rotate(45deg); }
.portada-fecha::after { content:''; position:absolute; bottom:-2.5px; right:-2.5px; width:5px; height:5px; background:var(--oro); transform:rotate(45deg); }
.portada-fecha-d {
font-family: var(--fd);
font-size: clamp(1.3rem,4vw,2.2rem);
color: var(--crema); letter-spacing: 3px; line-height: 1;
}
.portada-fecha-sep { font-family:var(--fd); font-size:clamp(1rem,3vw,1.6rem); color:var(--oro); opacity:.6; }
.portada-lugar {
font-family: var(--fs); font-size: clamp(.75rem,.9vw,.9rem);
letter-spacing: clamp(5px,1.5vw,9px); text-transform: uppercase;
color: rgba(200,168,75,.8);
}
/* Scroll hint */
.portada-scroll {
font-family: var(--fs); font-size: clamp(.75rem,2.2vw,.875rem);
letter-spacing: clamp(1.5px,.7vw,3px); text-transform: uppercase;
color: var(--color-action); text-shadow: 0 1px 6px rgba(0,0,0,.95);
animation: sdrop 2.2s ease-in-out infinite;
margin-top: 8px;
}
/* ── THE 35mm FILM FRAME CONTAINER ── */
.film-frame-wrap {
position:relative; z-index:2;
display:flex; flex-direction:column; align-items:center;
width:100%; max-width:420px;
padding:0 clamp(38px,10vw,58px); /* leave room for sprocket holes */
}
/* ── STUDIO LABEL ABOVE ── */
.film-studio-label {
font-family:var(--font-mono); font-size:clamp(.34em,.9vw,.46em);
letter-spacing:clamp(4px,1.5vw,9px); text-transform:uppercase;
color:rgba(200,168,75,.5); margin-bottom:10px;
display:flex; align-items:center; gap:8px;
}
.film-studio-label::before, .film-studio-label::after {
content:''; flex:1; height:1px;
background:linear-gradient(to right,transparent,rgba(200,168,75,.3));
}
.film-studio-label::after { background:linear-gradient(to left,transparent,rgba(200,168,75,.3)); }
/* ── THE ACTUAL FILM STRIP ASSEMBLY ── */
.film-strip {
position:relative; width:100%;
display:flex;
}
/* LEFT sprocket column */
.film-sprocket {
width:clamp(30px,8.5vw,48px); flex-shrink:0;
background:#0A0808;
display:flex; flex-direction:column; align-items:center;
justify-content:space-around; padding:0;
border:1.5px solid #1A1410;
position:relative; overflow:hidden;
}
.film-sprocket::before {
content:'';
position:absolute; inset:0;
background:linear-gradient(to right, rgba(0,0,0,.4) 0%, transparent 40%, transparent 60%, rgba(0,0,0,.4) 100%);
}
.film-sprocket.right { border-left:none; }
.film-sprocket.left { border-right:none; }
/* Individual sprocket holes */
.spr-hole {
width:60%; aspect-ratio:1/.65;
border-radius:2px;
background:#020101;
border:1px solid rgba(255,255,255,.07);
box-shadow:inset 0 1px 3px rgba(0,0,0,.8), 0 0 0 1px rgba(0,0,0,.5);
flex-shrink:0;
}
/* ── THE PHOTO FRAME (center) ── */
.film-photo-area {
flex:1;
position:relative;
background:#000;
border-top:clamp(14px,4vw,22px) solid #0A0808;
border-bottom:clamp(14px,4vw,22px) solid #0A0808;
overflow:hidden;
}
/* Top/bottom film edge strips (text area) */
.film-photo-area::before {
content:'KHAL CALLOWAY STUDIO · KHAL & SILVIE · 2027';
position:absolute; top:-clamp(14px,4vw,22px); left:0; right:0;
height:clamp(14px,4vw,22px);
display:flex; align-items:center; justify-content:center;
font-family:var(--font-mono); font-size:clamp(.22em,.55vw,.32em);
letter-spacing:clamp(2px,.5vw,4px); text-transform:uppercase;
color:rgba(200,168,75,.55); z-index:3;
white-space:nowrap; overflow:hidden;
}
.film-photo-area::after {
content:'ESCENA 001 · TAKE FOREVER · 29.V.2027';
position:absolute; bottom:-clamp(14px,4vw,22px); left:0; right:0;
height:clamp(14px,4vw,22px);
display:flex; align-items:center; justify-content:center;
font-family:var(--font-mono); font-size:clamp(.22em,.55vw,.32em);
letter-spacing:clamp(2px,.5vw,4px); text-transform:uppercase;
color:rgba(200,168,75,.45); z-index:3;
white-space:nowrap; overflow:hidden;
}
/* The actual photo */
.film-photo {
width:100%; aspect-ratio:3/4;
object-fit:cover; display:block;
filter:grayscale(100%) contrast(115%) brightness(.88);
transform-origin:center;
animation:film-kb 30s ease-in-out infinite alternate;
}
/* Gold/vignette overlay on the photo */
.film-photo-vignette {
position:absolute; inset:0; z-index:2; pointer-events:none;
background:
radial-gradient(ellipse 85% 75% at 50% 45%, transparent 35%, rgba(0,0,0,.72) 100%),
linear-gradient(to bottom, rgba(0,0,0,.45) 0%, transparent 25%, transparent 70%, rgba(0,0,0,.6) 100%);
}
/* ── TEXT ON TOP OF PHOTO ── */
.film-text-overlay {
position:absolute; inset:0; z-index:4;
display:flex; flex-direction:column;
align-items:center; justify-content:center;
gap:clamp(6px,1.5vw,14px);
padding:20px;
}
.film-pre-text {
font-family:var(--fs); font-size:clamp(.3em,.8vw,.44em);
letter-spacing:clamp(5px,1.8vw,10px); text-transform:uppercase;
color:rgba(200,168,75,.65);
}
.film-nombres {
font-family:var(--fa);
font-size:clamp(1.7rem,7vw,4.2rem);
letter-spacing:clamp(2px,.8vw,8px);
color:#FAFAF8; line-height:.95;
word-break:break-word; hyphens:auto;
text-shadow:
0 0 60px rgba(200,168,75,.35),
0 3px 0 rgba(0,0,0,.95),
0 6px 30px rgba(0,0,0,.8);
}
.film-amp {
font-family:var(--fe); font-style:italic;
font-size:.38em; color:var(--oro-v);
letter-spacing:4px; display:block; margin:4px 0;
text-shadow:0 0 25px rgba(200,168,75,.5);
}
.film-fecha-badge {
display:flex; align-items:center; gap:clamp(6px,2vw,14px);
border:1px solid rgba(200,168,75,.3);
padding:clamp(6px,1.5vw,10px) clamp(12px,3.5vw,22px);
background:rgba(0,0,0,.55);
backdrop-filter:blur(2px);
position:relative;
}
.film-fecha-badge::before, .film-fecha-badge::after {
content:''; position:absolute;
width:5px; height:5px;
background:rgba(200,168,75,.5); transform:rotate(45deg);
}
.film-fecha-badge::before { top:-2.5px; left:-2.5px; }
.film-fecha-badge::after { bottom:-2.5px; right:-2.5px; }
.film-fecha-num {
font-family:var(--fd); font-size:clamp(1.1em,3.5vw,1.8em);
color:var(--crema); letter-spacing:2px; line-height:1;
}
.film-fecha-sep { font-family:var(--fd); font-size:1em; color:var(--oro); opacity:.5; }
.film-lugar {
font-family:var(--fs); font-size:clamp(.75rem,.9vw,.9rem);
letter-spacing:clamp(4px,1.5vw,8px); text-transform:uppercase;
color:rgba(200,168,75,.4);
}
/* ── FRAME NUMBER badge ─ bottom-right of photo ── */
.film-frame-num {
position:absolute; bottom:8px; right:10px; z-index:5;
font-family:var(--font-mono); font-size:clamp(.55em,1.4vw,.72em);
letter-spacing:2px; color:rgba(255,255,255,.22);
pointer-events:none;
}
/* ── SCAN LINES on photo ── */
.film-scanlines {
position:absolute; inset:0; z-index:3; pointer-events:none;
background:repeating-linear-gradient(
0deg, transparent 0, transparent 3px,
rgba(0,0,0,.06) 3px, rgba(0,0,0,.06) 4px
);
}
/* ── LABEL BELOW THE FRAME ── */
.film-bottom-label {
margin-top:10px;
display:flex; flex-direction:column; align-items:center; gap:6px;
}
.film-bottom-rule {
display:flex; align-items:center; gap:10px;
width:clamp(120px,55vw,280px);
}
.film-bottom-rule-line {
flex:1; height:1px;
background:linear-gradient(to right,transparent,rgba(200,168,75,.3),transparent);
}
.film-bottom-rule-gem {
width:4px; height:4px; background:rgba(200,168,75,.45);
transform:rotate(45deg); flex-shrink:0;
}
.film-scroll-hint {
font-family:var(--fs); font-size:clamp(.3em,.75vw,.42em);
letter-spacing:clamp(4px,1vw,7px); text-transform:uppercase;
color:rgba(200,168,75,.3); animation:sdrop 2.2s ease-in-out infinite;
}
@keyframes sdrop{0%,100%{opacity:.2;transform:translateY(0)}55%{opacity:.7;transform:translateY(5px)}}
/* ═══════════════════════════════════════════
§1b CONTADOR — CINEMATIC MARQUEE SECTION
═══════════════════════════════════════════ */
.seccion-contador {
background:
radial-gradient(ellipse 90% 70% at 50% 50%, rgba(200,168,75,.06) 0%, transparent 65%),
radial-gradient(ellipse 60% 40% at 20% 80%, rgba(200,168,75,.03) 0%, transparent 60%),
var(--negro2);
padding:clamp(52px,9vh,80px) 20px;
text-align:center; position:relative; z-index:1; overflow:hidden;
}
/* Film strip decoration top & bottom edges */
.seccion-contador::before, .seccion-contador::after {
content:''; position:absolute; left:0; right:0; height:20px;
background:
#08080A,
repeating-linear-gradient(to right,
transparent 0, transparent 8px,
rgba(200,168,75,.18) 8px, rgba(200,168,75,.18) 24px,
transparent 24px, transparent 36px);
pointer-events:none;
}
.seccion-contador::before { top:0; }
.seccion-contador::after { bottom:0; }
.contador-label {
font-family:var(--fa); font-size:clamp(.9rem,3vw,1.5rem);
letter-spacing:clamp(6px,2vw,14px);
color:rgba(200,168,75,.7); margin-bottom:32px; display:block;
text-shadow:0 0 30px rgba(200,168,75,.2);
}
/* The marquee ticker grid */
.contador-marquee {
display:inline-flex; align-items:stretch;
border:1px solid rgba(200,168,75,.2);
background:rgba(200,168,75,.2);
gap:1px;
max-width:480px; width:calc(100% - 40px);
}
.cm-unit {
flex:1; background:#08080A;
display:flex; flex-direction:column;
align-items:center; justify-content:center;
padding:clamp(18px,4vh,28px) clamp(8px,2vw,16px);
position:relative; overflow:hidden;
}
/* Top glow bar per unit */
.cm-unit::before {
content:''; position:absolute; top:0; left:15%; right:15%; height:1px;
background:linear-gradient(to right,transparent,rgba(200,168,75,.45),transparent);
}
/* Bottom glow */
.cm-unit::after {
content:''; position:absolute; bottom:0; left:15%; right:15%; height:1px;
background:linear-gradient(to right,transparent,rgba(200,168,75,.2),transparent);
}
.cm-num {
font-family:var(--fd);
font-size:clamp(2.8rem,9vw,4.8rem);
color:var(--oro-v); line-height:1; letter-spacing:2px; display:block;
text-shadow:
0 0 40px rgba(200,168,75,.5),
0 0 80px rgba(200,168,75,.2),
0 2px 0 rgba(0,0,0,.9);
transition:opacity .15s ease;
}
.cm-lbl {
font-family:var(--fs); font-size:clamp(.3em,.75vw,.42em);
letter-spacing:clamp(2px,.6vw,4px); text-transform:uppercase;
color:var(--gris-m); margin-top:5px; display:block;
}
.cm-sep {
background:#08080A;
display:flex; align-items:center; justify-content:center;
padding:0 clamp(4px,1vw,8px);
font-family:var(--fd); font-size:clamp(1.4em,4vw,2.4em);
color:rgba(200,168,75,.3); line-height:1;
}
/* ═══════════════════════════════════════════
§2 MANIFIESTO
═══════════════════════════════════════════ */
.seccion { padding:clamp(60px,12vh,110px) 20px; text-align:center; position:relative; z-index:1; overflow:hidden; }
.seccion-inner { max-width:840px; margin:0 auto; }
/* Secciones con gradiente radial sutil para romper el negro plano */
.seccion-alt {
background:
radial-gradient(ellipse 80% 60% at 50% 0%, rgba(200,168,75,.045) 0%, transparent 65%),
radial-gradient(ellipse 60% 40% at 50% 100%, rgba(200,168,75,.025) 0%, transparent 65%),
var(--negro2);
}
.seccion-carbon {
background:
radial-gradient(ellipse 70% 50% at 30% 50%, rgba(200,168,75,.03) 0%, transparent 60%),
var(--carbon);
}
.sec-label { font-family:var(--fs); font-size:.5em; letter-spacing:8px; text-transform:uppercase; color:var(--oro); opacity:.7; margin-bottom:10px; display:block; }
.manif-foto {
width:100%; max-width:400px; aspect-ratio:3/4; object-fit:cover;
margin:0 auto 48px; display:block;
filter:grayscale(100%) contrast(112%);
box-shadow:0 0 0 8px var(--negro2), 0 0 0 10px rgba(200,168,75,.3), 0 30px 80px rgba(0,0,0,.7);
}
.frase-tw { font-family:var(--fe); font-style:italic; font-size:clamp(1.7em,4vw,2.5em); color:var(--crema); line-height:1.7; }
.cursor-tw { display:inline-block; width:2px; height:.9em; background:var(--oro); vertical-align:middle; margin-left:2px; animation:blink-c .9s step-end infinite; }
@keyframes blink-c{0%,100%{opacity:1}50%{opacity:0}}
/* ═══════════════════════════════════════════
§3 TICKET HONOR
═══════════════════════════════════════════ */
.ticket-wrap { padding:clamp(60px,10vh,90px) 20px; background:var(--negro2); position:relative; }
.ticket-wrap::before {
content:''; position:absolute; inset:0; pointer-events:none;
background:repeating-linear-gradient(0deg,rgba(200,168,75,.03) 0,rgba(200,168,75,.03) 1px,transparent 1px,transparent 24px);
}
.ticket {
position:relative; max-width:600px; margin:0 auto;
background:var(--crema); color:var(--negro);
}
.ticket-sprocket {
position:absolute; top:0; bottom:0; width:22px;
background:var(--negro);
display:flex; flex-direction:column; justify-content:space-around; padding:10px 0;
}
.ticket-sprocket.l { left:0; }
.ticket-sprocket.r { right:0; }
.spr { width:14px; height:20px; border-radius:3px; background:var(--crema); margin:0 auto; }
.ticket-inner { margin:0 22px; padding:clamp(36px,6vh,52px) clamp(24px,5vw,44px); }
.ticket-head { text-align:center; margin-bottom:24px; }
.ticket-prod { font-family:var(--fs); font-size:.52em; letter-spacing:5px; text-transform:uppercase; color:var(--gris-m); margin-bottom:12px; }
.ticket-iniciales { font-family:var(--fa); font-size:clamp(3.5em,8vw,5.5em); color:var(--negro); letter-spacing:8px; line-height:1; }
.ticket-sub { font-family:var(--fe); font-style:italic; color:var(--oro); font-size:1em; margin-top:6px; }
.ticket-line { border:none; border-top:2px dashed rgba(26,26,26,.2); margin:24px 0; }
.ticket-datos { display:flex; justify-content:space-around; flex-wrap:wrap; gap:16px; }
.td-col { text-align:center; flex:1; min-width:90px; }
.td-lbl { font-family:var(--fs); font-size:.48em; letter-spacing:3px; text-transform:uppercase; color:var(--gris-m); margin-bottom:8px; }
.td-val { font-family:var(--fa); font-size:clamp(1.1em,3vw,1.5em); color:var(--negro); line-height:1.2; }
.td-val small { font-family:var(--fs); font-size:.55em; font-weight:200; display:block; color:var(--gris-m); margin-top:4px; letter-spacing:2px; }
.td-sep { width:1px; background:rgba(26,26,26,.15); align-self:stretch; flex-shrink:0; }
.ticket-mapa { text-align:center; margin-top:24px; padding-top:20px; border-top:1px solid rgba(26,26,26,.12); }
.ticket-mapa a { font-family:var(--fs); font-size:.6em; letter-spacing:4px; text-transform:uppercase; color:var(--negro); text-decoration:none; border-bottom:1px solid var(--negro); padding-bottom:3px; transition:color .3s,border-color .3s; }
.ticket-mapa a:hover { color:var(--oro); border-color:var(--oro); }
/* ═══════════════════════════════════════════
§4 FAMILIA — CAST CARDS EDITION
═══════════════════════════════════════════ */
/* Padres: compact 2-col grid */
.padres-grid {
display:grid; grid-template-columns:1fr 1fr;
gap:1px; margin-top:32px;
background:rgba(200,168,75,.15);
border:1px solid rgba(200,168,75,.15);
}
.padre-card {
background:rgba(8,8,10,.95);
padding:clamp(18px,3vh,28px) clamp(12px,3vw,22px);
text-align:center; position:relative; overflow:hidden;
transition:background .4s ease, box-shadow .4s ease;
}
.padre-card:hover {
background:rgba(18,14,6,.98);
box-shadow:inset 0 0 30px rgba(200,168,75,.06), 0 0 0 1px rgba(200,168,75,.2);
}
.padre-card::before {
content:''; position:absolute; top:0; left:0; right:0; height:1px;
background:linear-gradient(to right,transparent,rgba(200,168,75,.4),transparent);
}
.padre-card-rol {
font-family:var(--fs); font-size:.42em; letter-spacing:4px;
text-transform:uppercase; color:var(--oro); opacity:.7; margin-bottom:10px; display:block;
}
.padre-card-noms {
font-family:var(--fe); font-style:italic;
font-size:clamp(.9em,2.5vw,1.15em); color:var(--crema); line-height:1.7;
}
.padre-card-amp {
font-family:var(--fa); color:var(--oro); font-size:.9em;
display:block; margin:2px 0;
}
/* Padrinos: horizontal scroll snap (compact on mobile) */
.padrinos-scroll-wrap {
position:relative; margin-top:32px; overflow:hidden;
}
.padrinos-track {
display:flex; gap:1px;
overflow-x:auto; scroll-snap-type:x mandatory;
-webkit-overflow-scrolling:touch;
scrollbar-width:none;
padding-bottom:2px;
}
.padrinos-track::-webkit-scrollbar { display:none; }
.padrino-card {
flex:0 0 clamp(160px,60vw,240px);
scroll-snap-align:center;
background:var(--negro2); border:1px solid rgba(200,168,75,.12);
padding:clamp(18px,3vh,26px) clamp(14px,3vw,20px);
text-align:center; position:relative; overflow:hidden;
transition:border-color .35s, box-shadow .35s;
}
.padrino-card:hover {
border-color:rgba(200,168,75,.35);
box-shadow:0 0 20px rgba(200,168,75,.08), inset 0 0 20px rgba(200,168,75,.04);
}
.padrino-card::after {
content:''; position:absolute; bottom:0; left:0; right:0; height:1px;
background:linear-gradient(to right,transparent,rgba(200,168,75,.3),transparent);
}
.padr-rol { font-family:var(--fs); font-size:.44em; letter-spacing:3px; text-transform:uppercase; color:var(--oro); opacity:.65; margin-bottom:8px; display:block; }
.padr-nom { font-family:var(--fe); font-style:italic; font-size:clamp(.9em,2.8vw,1.1em); color:var(--crema); line-height:1.5; }
.padrinos-fade-r {
position:absolute; top:0; right:0; bottom:0; width:40px;
background:linear-gradient(to left,var(--carbon),transparent);
pointer-events:none; z-index:2;
}
.padrinos-hint {
font-family:var(--fs); font-size:.42em; letter-spacing:4px;
text-transform:uppercase; color:rgba(200,168,75,.35);
margin-top:12px; text-align:center;
animation:hint-pulse 2.2s ease-in-out infinite;
}
/* ═══════════════════════════════════════════
§5 NUESTRO AMOR — HORIZONTAL FILMSTRIP GALLERY
═══════════════════════════════════════════ */
.filmstrip-seccion {
padding:clamp(70px,12vh,110px) 0;
background:var(--negro); text-align:center;
position:relative; z-index:1; overflow:hidden;
}
.filmstrip-seccion .sec-inner-txt { padding:0 20px; max-width:840px; margin:0 auto 40px; }
/* ── CINTA completa: borde sprocket arriba + abajo + fotos ── */
.cinta-wrap {
position:relative; width:100%;
background:#080608;
overflow:hidden;
}
/* TOP sprocket strip */
.cinta-sprocket {
height:clamp(20px,5vw,32px);
background:#080608;
background-image:
repeating-linear-gradient(to right,
transparent 0, transparent clamp(8px,2vw,14px),
rgba(255,255,255,.08) clamp(8px,2vw,14px), rgba(255,255,255,.08) calc(clamp(8px,2vw,14px) + 2px),
transparent calc(clamp(8px,2vw,14px) + 2px), transparent clamp(28px,7vw,44px),
rgba(0,0,0,.5) clamp(28px,7vw,44px), rgba(0,0,0,.5) calc(clamp(28px,7vw,44px) + clamp(12px,3vw,20px)),
transparent calc(clamp(28px,7vw,44px) + clamp(12px,3vw,20px)), transparent clamp(56px,14vw,88px)
);
border-top:1.5px solid rgba(200,168,75,.15);
border-bottom:1.5px solid rgba(200,168,75,.1);
position:relative; z-index:2;
}
.cinta-sprocket.bottom {
border-top:1.5px solid rgba(200,168,75,.1);
border-bottom:1.5px solid rgba(200,168,75,.15);
}
/* The draggable photo track */
.cinta-track {
display:flex; align-items:stretch; gap:0;
overflow-x:auto; scroll-snap-type:x mandatory;
-webkit-overflow-scrolling:touch;
scrollbar-width:none; cursor:grab;
padding:clamp(6px,1.5vw,12px) 0;
background:#080608;
}
.cinta-track::-webkit-scrollbar { display:none; }
.cinta-track:active { cursor:grabbing; }
/* Each photo cell = a 35mm frame */
.cinta-frame {
flex:0 0 clamp(180px,55vw,280px);
scroll-snap-align:center;
position:relative; overflow:hidden;
margin:0 clamp(4px,1.2vw,8px);
border:1.5px solid rgba(200,168,75,.18);
box-shadow:
inset 0 0 0 2px rgba(0,0,0,.7),
0 0 30px rgba(0,0,0,.8);
aspect-ratio:2/3;
transition:box-shadow .35s ease, transform .35s ease;
}
.cinta-frame:hover {
box-shadow:inset 0 0 0 2px rgba(0,0,0,.7), 0 0 0 1px rgba(200,168,75,.4), 0 8px 40px rgba(0,0,0,.9);
transform:scale(1.02);
}
.cinta-foto {
width:100%; height:100%; object-fit:cover; display:block;
filter:grayscale(100%) contrast(112%) brightness(.9);
pointer-events:none;
transition:filter .5s ease;
}
.cinta-frame:hover .cinta-foto {
filter:grayscale(85%) contrast(115%) brightness(.95);
}
/* Frame vignette */
.cinta-vignette {
position:absolute; inset:0; pointer-events:none;
background:radial-gradient(ellipse 80% 80% at 50% 50%, transparent 45%, rgba(0,0,0,.65) 100%);
z-index:2;
}
/* Frame number label */
.cinta-num {
position:absolute; bottom:6px; right:8px; z-index:3;
font-family:var(--font-mono); font-size:.65em; letter-spacing:2px;
color:rgba(255,255,255,.25); pointer-events:none;
}
.cinta-label {
position:absolute; bottom:6px; left:8px; z-index:3;
font-family:var(--font-mono); font-size:.28em; letter-spacing:2px;
text-transform:uppercase; color:rgba(200,168,75,.4);
pointer-events:none; white-space:nowrap;
}
/* Leading / trailing empty frames (aesthetic) */
.cinta-frame.ghost {
opacity:.18; flex:0 0 clamp(50px,13vw,80px);
background:#050404;
}
/* Drag hint */
.cinta-hint {
font-family:var(--fs); font-size:clamp(.3em,.75vw,.42em);
letter-spacing:clamp(4px,1.2vw,8px); text-transform:uppercase;
color:rgba(200,168,75,.35); margin-top:16px;
animation:hint-pulse 2.5s ease-in-out infinite;
display:block;
}
@keyframes hint-pulse{0%,100%{opacity:.2}55%{opacity:.85}}
/* ═══════════════════════════════════════════
§6 ITINERARIO — MOVIE REEL UNFURL
═══════════════════════════════════════════ */
.reel-wrap {
max-width:540px; margin:0 auto;
position:relative;
}
/* Vertical film strip line (the reel spine) */
.reel-spine {
position:absolute; left:clamp(28px,7vw,40px); top:0; bottom:0;
width:clamp(28px,7vw,40px);
background:#0A0808;
border-left:1.5px solid rgba(200,168,75,.2);
border-right:1.5px solid rgba(200,168,75,.2);
z-index:0;
}
/* Sprocket holes on the spine */
.reel-spine::before {
content:'';
position:absolute; inset:0;
background:
repeating-linear-gradient(to bottom,
transparent 0, transparent 14px,
rgba(255,255,255,.06) 14px, rgba(255,255,255,.06) 15px,
transparent 15px, transparent 26px,
#030202 26px, #030202 40px,
transparent 40px, transparent 52px
);
}
/* Each reel item */
.reel-item {
position:relative; z-index:1;
display:flex; align-items:flex-start; gap:0;
margin-bottom:0;
padding-left:clamp(60px,14vw,88px);
}
/* The sprocket hole visual on the left */
.reel-hole {
position:absolute; left:clamp(36px,8.5vw,50px);
top:clamp(18px,4vh,26px);
width:clamp(14px,3.5vw,20px); height:clamp(10px,2.5vw,14px);
border-radius:2px;
background:#020101;
border:1px solid rgba(200,168,75,.3);
box-shadow:0 0 6px rgba(200,168,75,.12), inset 0 1px 3px rgba(0,0,0,.9);
z-index:3;
}
/* The frame card content */
.reel-card {
flex:1;
background:rgba(8,8,10,.95);
border:1px solid rgba(200,168,75,.12);
border-left:2px solid rgba(200,168,75,.35);
padding:clamp(16px,3.5vh,24px) clamp(18px,4vw,28px);
position:relative; overflow:hidden;
margin:clamp(5px,1.2vh,9px) 0;
transition:border-color .35s, background .35s, box-shadow .35s;
}
.reel-card::before {
content:''; position:absolute; top:0; left:0; right:0; height:1px;
background:linear-gradient(to right,rgba(200,168,75,.4),transparent);
}
.reel-card:hover {
background:rgba(18,14,8,.98);
border-color:rgba(200,168,75,.35);
border-left-color:var(--oro);
box-shadow:0 0 25px rgba(200,168,75,.07), inset 0 0 20px rgba(200,168,75,.03);
}
.reel-hora {
font-family:var(--fd); font-size:clamp(.75em,2vw,.92em);
letter-spacing:3px; color:var(--oro); margin-bottom:4px; display:block;
}
.reel-titulo {
font-family:var(--fa); font-size:clamp(1.5em,4.5vw,2em);
color:var(--crema); letter-spacing:2px; margin-bottom:6px; display:block;
}
.reel-desc {
font-family:var(--fe); font-style:italic;
font-size:clamp(.75em,2vw,.88em); color:var(--gris-m); line-height:1.7;
}
.reel-ico {
position:absolute; right:clamp(14px,3vw,22px); top:50%;
transform:translateY(-50%);
width:32px; height:32px; color:var(--tone-champagne); opacity:.62;
}
/* ═══════════════════════════════════════════
§7 DRESSCODE — COMPACT FILM BADGE
═══════════════════════════════════════════ */
.dresscode-wrap {
max-width:600px; margin:40px auto 0;
border:1px solid rgba(200,168,75,.15);
background:rgba(8,8,10,.95);
position:relative; overflow:hidden;
}
.dresscode-wrap::before {
content:''; position:absolute; top:0; left:0; right:0; height:3px;
background:linear-gradient(to right,transparent,rgba(200,168,75,.6),transparent);
}
/* The two gender columns side by side */
.dresscode-row {
display:flex; align-items:stretch; gap:1px;
background:rgba(200,168,75,.12);
}
.dresscode-col {
flex:1; background:#08080A;
padding:clamp(18px,3.5vh,26px) clamp(14px,3.5vw,22px);
text-align:center; position:relative;
}
.dc-gender {
font-family:var(--fs); font-size:clamp(.32em,.8vw,.44em);
letter-spacing:4px; text-transform:uppercase;
color:rgba(200,168,75,.55); margin-bottom:6px; display:block;
}
.dc-icon { font-size:clamp(1.4em,4.5vw,1.8em); display:block; margin-bottom:6px; }
.dc-look {
font-family:var(--fa); font-size:clamp(1em,3.5vw,1.35em);
color:var(--crema); letter-spacing:2px; display:block; margin-bottom:5px;
}
.dc-detail {
font-family:var(--fe); font-style:italic;
font-size:clamp(.68em,1.8vw,.82em); color:var(--gris-m); line-height:1.5;
}
.dc-aviso {
font-family:var(--fs); font-size:clamp(.28em,.7vw,.38em);
letter-spacing:3px; text-transform:uppercase;
color:rgba(200,168,75,.5); margin-top:8px; display:block;
}
.dresscode-divider {
width:1px; background:rgba(200,168,75,.15); flex-shrink:0;
}
/* ═══════════════════════════════════════════
§7b NO NIÑOS — COMPACT BANNER
═══════════════════════════════════════════ */
.seccion-regla {
padding:clamp(50px,9vh,72px) 20px;
text-align:center; position:relative; z-index:1;
}
.regla-card {
max-width:500px; margin:28px auto 0;
border:1px solid rgba(200,168,75,.14);
background:rgba(8,8,10,.95);
display:flex; align-items:center; gap:clamp(14px,4vw,24px);
padding:clamp(16px,3.5vh,24px) clamp(18px,4.5vw,30px);
position:relative; overflow:hidden;
}
.regla-card::before {
content:''; position:absolute; left:0; top:10%; bottom:10%; width:2px;
background:linear-gradient(to bottom,transparent,rgba(200,168,75,.5),transparent);
}
.regla-ico-wrap {
flex-shrink:0;
width:clamp(42px,11vw,56px); height:clamp(42px,11vw,56px);
border:1px solid rgba(200,168,75,.2);
display:flex; align-items:center; justify-content:center;
color:var(--tone-champagne);
}
.regla-ico-wrap svg { display:block; width:32px; height:32px; }
.regla-txt { text-align:left; }
.regla-titulo {
font-family:var(--fa); font-size:clamp(1.1em,3.5vw,1.5em);
letter-spacing:2px; color:var(--crema); display:block; margin-bottom:4px;
}
.regla-desc {
font-family:var(--fe); font-style:italic;
font-size:clamp(.7em,1.8vw,.85em); color:var(--gris-m); line-height:1.6;
}
/* ═══════════════════════════════════════════
§7c MESA DE REGALOS
═══════════════════════════════════════════ */
/* (reuses .regla-card styles, just different icon/text) */
/* ═══════════════════════════════════════════
§8 WEDDING MEMORIES
═══════════════════════════════════════════ */
.mem-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:1px; margin-top:50px; }
.mem-card { padding:48px 28px; border:1px solid rgba(200,168,75,.1); text-align:center; transition:background .4s,transform .4s; }
.mem-card:hover { background:rgba(200,168,75,.05); transform:translateY(-8px); }
.mem-ico { font-size:2em; margin-bottom:18px; opacity:.75; }
.mem-card h4 { font-family:var(--fs); font-weight:200; font-size:.85em; letter-spacing:4px; text-transform:uppercase; margin-bottom:12px; color:var(--crema); }
.mem-card p { font-size:.82em; color:var(--gris-m); line-height:1.7; margin-bottom:22px; }
.mem-link { font-family:var(--fs); font-size:.6em; letter-spacing:4px; text-transform:uppercase; color:var(--crema); text-decoration:none; border-bottom:1px solid rgba(200,168,75,.5); padding-bottom:3px; transition:color .3s,border-color .3s; }
.mem-link:hover { color:var(--oro); border-color:var(--oro); }
/* ═══════════════════════════════════════════
§9 RSVP — PASE VIP EDITION
═══════════════════════════════════════════ */
.rsvp-pase-wrap {
max-width:480px; margin:48px auto 0;
position:relative;
}
.rsvp-pase {
background: linear-gradient(145deg, #0E0C08, #160E04);
border:1px solid rgba(200,168,75,.28);
position:relative; overflow:hidden;
}
/* Parchment-aged top bar */
.rsvp-pase-top {
background:linear-gradient(to right,
#1A0A00 0%, #5A3C10 10%,
#C8A840 22%, #F0D870 35%,
#FFFACC 50%, #F0D870 65%,
#C8A840 78%, #5A3C10 90%,
#1A0A00 100%);
height:8px;
}
.rsvp-pase-inner { padding:clamp(24px,5vw,40px) clamp(20px,5vw,36px); }
/* Double inner frame */
.rsvp-pase::after {
content:''; position:absolute;
inset:12px; border:1px solid var(--color-counterpoint); opacity:.35;
pointer-events:none;
}
.rsvp-pase-head {
text-align:center; margin-bottom:28px; position:relative; z-index:1;
}
.rsvp-pase-label {
font-family:var(--fs); font-size:.42em; letter-spacing:8px;
text-transform:uppercase; color:rgba(200,168,75,.6); display:block; margin-bottom:6px;
}
.rsvp-pase-title {
font-family:var(--fa); font-size:clamp(1.8em,5vw,2.8em);
letter-spacing:4px; color:var(--crema); line-height:1;
}
.rsvp-pase-rule {
display:flex; align-items:center; gap:10px; margin:14px 0;
}
.rsvp-pase-rule-line {
flex:1; height:1px;
background:linear-gradient(to right,transparent,rgba(200,168,75,.4),transparent);
}
.rsvp-pase-rule-gem {
width:5px; height:5px; background:var(--oro); transform:rotate(45deg); flex-shrink:0;
box-shadow:0 0 6px rgba(200,168,75,.5);
}
/* Form fields */
.form-deco { position:relative; z-index:1; text-align:left; }
.ig { margin-bottom:38px; position:relative; }
.ig::after {
content:''; position:absolute; bottom:0; left:0; right:0; height:1px;
background:var(--oro); transform:scaleX(0); transform-origin:left;
transition:transform .5s cubic-bezier(.25,.46,.45,.94);
}
.ig:focus-within::after { transform:scaleX(1); }
.input-d {
width:100%; padding:12px 0; border:none;
border-bottom:1px solid rgba(200,168,75,.2);
background:transparent; color:var(--crema);
font-family:var(--fe); font-size:1.4em; font-style:italic; outline:none;
}
.input-d::placeholder {
color:rgba(200,200,200,.18); font-family:var(--fs);
font-size:.5em; font-style:normal; letter-spacing:3px; text-transform:uppercase;
}
.select-d {
width:100%; padding:14px 0; border:none;
border-bottom:1px solid rgba(200,168,75,.2);
background:transparent; color:var(--crema);
font-family:var(--fs); font-size:.72em; letter-spacing:3px;
text-transform:uppercase; outline:none; cursor:pointer; appearance:none;
}
.select-d option { background:var(--negro2); color:var(--crema); }
.ig-indent { margin-left:18px; }
.ig-indent .input-d { font-size:1.2em; }
/* Confirm button — Cinematic Stamp */
.btn-confirm {
width:100%; background:transparent; color:var(--color-action);
border:1px solid var(--color-action);
padding:18px; font-family:var(--font-label); font-size:clamp(.95rem,1.1vw,1.05rem);
letter-spacing:.12em; text-transform:uppercase; cursor:pointer;
transition:all .5s ease; margin-top:8px;
position:relative; overflow:hidden;
box-shadow:0 0 0 1px rgba(183,154,105,.1), inset 0 0 30px rgba(183,154,105,.03);
}
.btn-confirm::before {
content:''; position:absolute; inset:0;
background:rgba(183,154,105,.12);
transform:scaleX(0); transform-origin:left;
transition:transform .5s cubic-bezier(.7,0,.3,1); z-index:0;
}
.btn-confirm::after {
content:''; position:absolute; right:22px; top:50%; width:7px; height:7px;
transform:translateY(-50%) rotate(45deg); border:1px solid rgba(183,154,105,.55);
z-index:1;
transition:color .4s, opacity .4s;
}
.btn-confirm:hover { color:var(--tone-ivory); }
.btn-confirm:hover::before { transform:scaleX(1); }
.btn-confirm:hover::after { border-color:var(--tone-ivory); opacity:.7; }
.btn-confirm span { position:relative; z-index:1; }
.btn-confirm:disabled { opacity:.4; cursor:not-allowed; }
.success-mark {
display:inline-block; width:5px; height:5px; margin:0 6px 2px;
border:1px solid currentColor; transform:rotate(45deg);
}
/* Perforations en el VIP pass */
.rsvp-perf {
height:28px; display:flex; align-items:center;
background:var(--negro);
overflow:hidden; position:relative;
}
.rsvp-perf::before {
content:''; position:absolute; inset:0;
background:repeating-linear-gradient(to right,
transparent 0, transparent 8px,
rgba(200,168,75,.15) 8px, rgba(200,168,75,.15) 24px,
transparent 24px, transparent 36px);
}
.rsvp-perf-line {
flex:1; height:1px;
background:linear-gradient(to right,transparent,rgba(200,168,75,.35),transparent);
position:relative; z-index:1;
}
.rsvp-perf-label {
font-family:var(--fd); font-size:.55em; letter-spacing:5px;
color:rgba(200,168,75,.45); position:relative; z-index:1; padding:0 14px;
}
#form-exito { display:none; text-align:center; padding:50px 28px; position:relative; z-index:1; }
#form-exito .exito-title {
font-family:var(--fa); font-size:clamp(2.2em,6vw,3.2em);
letter-spacing:6px; color:var(--crema); margin-bottom:8px;
}
#form-exito p { font-family:var(--fs); font-size:.58em; letter-spacing:6px; text-transform:uppercase; color:var(--oro); }
/* ═══════════════════════════════════════════
FOOTER DARK
═══════════════════════════════════════════ */
footer { background:var(--negro); text-align:center; padding:clamp(60px,12vh,100px) 20px 50px; position:relative; z-index:1; border-top:1px solid rgba(200,168,75,.12); }
.footer-iniciales { font-family:var(--fa); font-size:clamp(5em,14vw,8em); letter-spacing:10px; line-height:1; background:linear-gradient(135deg,rgba(200,168,75,.45),rgba(232,200,112,.15)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; margin-bottom:8px; }
.footer-txt { font-family:var(--fe); font-style:italic; font-size:1.1em; color:rgba(244,240,232,.6); margin-bottom:40px; }
.footer-fecha { font-family:var(--fd); font-size:.75em; letter-spacing:5px; color:var(--oro); margin-bottom:40px; display:block; opacity:.6; }
.firma-ix { font-family:var(--fs); font-size:.48em; letter-spacing:5px; text-transform:uppercase; color:rgba(244,240,232,.25); }
.firma-ix .ix { color:var(--oro); }
@media(max-width:600px){
.ticket-inner{padding:28px 18px;}
.ticket-sprocket{width:16px;}
.spr{width:10px;height:14px;}
.portada-bg img { object-position:75% top; }
}
/* ══════════════════════════════════════════
KC FOOTER & MUSIC BUTTON
══════════════════════════════════════════ */
.kc-float {
position: fixed;
bottom: calc(clamp(18px,3vh,30px) + env(safe-area-inset-bottom, 0px));
right: calc(clamp(18px,3vw,28px) + env(safe-area-inset-right, 0px));
z-index: 9000; width: 48px; height: 48px;
display: flex; align-items: center; justify-content: center;
cursor: pointer; border: none; background: none; padding: 0;
opacity: 0; transform: translateY(20px);
transition: opacity .6s ease, transform .6s cubic-bezier(.34,1.56,.64,1);
}
.kc-float.visible { opacity: 1; transform: translateY(0); }
.kc-float-bg {
position:absolute; z-index:1; inset:0; border-radius:50%;
background: radial-gradient(circle at 34% 28%, #151313 0%, #100f0f 58%, #090808 100%);
border: 1px solid rgba(183,154,105,.72);
box-shadow: 0 4px 18px rgba(0,0,0,.62), inset 0 1px 0 rgba(242,235,221,.08);
transition: border-color .4s, box-shadow .4s, transform .2s;
}
.kc-float:hover .kc-float-bg { border-color: var(--tone-champagne); box-shadow: 0 4px 20px rgba(0,0,0,.8), 0 0 14px rgba(183,154,105,.18); transform: scale(1.04); }
.kc-float-glow {
position: absolute; inset: -12px; border-radius: 50%; z-index:0;
background: radial-gradient(circle, rgba(183,154,105,.14) 0%, rgba(183,154,105,.05) 42%, transparent 70%);
animation: kcBreath 3.4s ease-in-out infinite alternate; pointer-events: none;
}
.kc-float.paused .kc-float-glow { opacity:0; animation-play-state:paused; }
.kc-ring {
position:absolute; z-index:2; inset:-10px; border-radius:50%; pointer-events:none;
border:1px dashed rgba(200,198,194,.68);
animation:rotate-ring 14s linear infinite;
}
.kc-ring--boda::before {
content:''; position:absolute; top:-4px; left:50%; width:7px; height:7px;
transform:translateX(-50%) rotate(45deg); background:var(--tone-champagne);
border:1px solid rgba(242,235,221,.58); box-shadow:0 0 5px rgba(183,154,105,.25);
}
.kc-float.paused .kc-ring--boda { animation-play-state:paused; border-color:rgba(200,198,194,.48); }
.kc-letter {
position:relative; z-index:3; font-family:'Bodoni Moda',serif; font-weight:400;
color:var(--tone-ivory); font-size:1rem; letter-spacing:.06em; line-height:1;
}
.kc-float:focus-visible { outline:2px solid var(--tone-ivory); outline-offset:6px; }
.kc-float:active .kc-float-bg { transform:scale(.94); }
@keyframes kcBreath { from { opacity:.38; transform:scale(.94); } to { opacity:.8; transform:scale(1.08); } }
@keyframes rotate-ring { 0% { transform: rotate(0); } 100% { transform: rotate(360deg); } }
.kc-footer { background: var(--negro); text-align: center; padding: 70px 20px 40px; position: relative; z-index: 1; border-top: 1px solid rgba(200,168,75,.15); }
.kc-f-div { display: flex; justify-content: center; align-items: center; gap: 15px; margin-bottom: 30px; }
.kc-f-div::before, .kc-f-div::after { content: ''; height: 1px; width: clamp(60px,20vw,120px); background: linear-gradient(to right, transparent, rgba(200,168,75,.4)); }
.kc-f-div::after { background: linear-gradient(to left, transparent, rgba(200,168,75,.4)); }
.kc-f-div span { width:6px; height:6px; border:1px solid var(--tone-champagne); transform:rotate(45deg); }
.footer-toast-icon { width:28px; height:28px; margin:0 5px; color:var(--tone-champagne); vertical-align:middle; }
.kc-f-main { font-family: var(--fs); font-size: .8em; letter-spacing: 4px; color: var(--gris-c); text-transform: uppercase; line-height: 2; margin-bottom: 35px; }
.kc-f-main strong { font-family: var(--fa); font-weight: 700; color: var(--oro-v); font-size: clamp(1em, 4vw, 1.25em); letter-spacing: 4px; text-shadow: 0 0 12px rgba(200,168,75,.3); display: block; margin: 4px 0; }
.kc-f-fecha { display: block; font-family: var(--fs); font-size: .9em; color: var(--gris-m); font-weight: 300; }
.kc-f-brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; padding: 10px; position: relative; }
.kc-f-brand .ig-ico { width: 18px; height: 18px; color: var(--oro); opacity: .7; transition: .4s; }
.kc-f-brand:hover .ig-ico { opacity: 1; color: var(--crema); }
.kc-f-brand-txt { font-family: var(--fa); font-size: 1em; color: var(--oro); letter-spacing: 3px; font-weight: bold; transition: .4s; }
.kc-f-brand:hover .kc-f-brand-txt { color: var(--oro-v); letter-spacing: 4px; text-shadow: 0 0 15px rgba(200,168,75,.6); }
/* ══════════════════════════════════════════
OLD HOLLYWOOD PHOTO ALBUM
══════════════════════════════════════════ */
.deco-album-box {
max-width: 700px; margin: 0 auto; position: relative;
background: linear-gradient(135deg, rgba(200,168,75,.08), rgba(200,168,75,.02));
border: 1px solid rgba(200,168,75,.2);
padding: 50px 30px;
}
.deco-album-box::before { content: ''; position: absolute; inset: 6px; border: 1px dashed rgba(200,168,75,.15); pointer-events: none; }
.seccion-carbon .sec-label.sec-label--echoes { font-size: .8em; opacity: 1; }
.deco-cam-wrap { width: 170px; margin: 0 auto 20px; filter: drop-shadow(0 0 15px rgba(200,168,75,.3)); animation: kc-echoes-levita 4.6s ease-in-out infinite; }
.deco-cam-wrap svg { display: block; width: 100%; height: auto; overflow: visible; }
@keyframes kc-echoes-levita { 0%,100% { transform: translateY(0) rotate(-1deg); } 50% { transform: translateY(-6px) rotate(1deg); } }
@media (prefers-reduced-motion: reduce) { .deco-cam-wrap { animation: none; } }
.album-btn:disabled { opacity: .7; cursor: not-allowed; }
.album-btn:disabled:hover { color: var(--oro-v); font-weight: 400; box-shadow: none; }
.album-btn:disabled:hover::before { transform: scaleX(0); }
@keyframes float-cam { 0% { transform: translateY(0); } 100% { transform: translateY(-8px); } }
.album-btn {
display: inline-flex; align-items: center; justify-content: center; gap: 10px;
margin-top: 35px; padding: 18px 45px;
background: transparent; color: var(--oro-v);
border: 1px solid var(--oro);
font-family: var(--fs); font-size: clamp(.75rem,3vw,.9rem); letter-spacing: clamp(1.5px,.7vw,3px); text-transform: uppercase;
text-decoration: none; position: relative; transition: .4s;
}
.album-btn::before { content: ''; position: absolute; inset: 0; background: var(--oro); transform: scaleX(0); transform-origin: left; transition: transform .4s ease; z-index: -1; }
.album-btn:hover { color: var(--negro); font-weight: 700; box-shadow: 0 0 25px rgba(200,168,75,.4); }
.album-btn:hover::before { transform: scaleX(1); }
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto !important; }
*, *::before, *::after {
animation-duration: .01ms !important;
animation-iteration-count: 1 !important;
animation-delay: 0ms !important;
transition-duration: .01ms !important;
transition-delay: 0ms !important;
scroll-behavior: auto !important;
}
.fade-s, .fade-s.fuera, .fade-s.dentro {
opacity: 1;
transform: none;
}
#film-leader .projector-beam, #film-leader .fl-skip,
#modal-stage .grand-claqueta, #modal-stage .tp-icon, #modal-stage .tp-text {
animation: none !important;
transition: none !important;
}
#film-leader { background:#090808; }
#leader-canvas { display:none; }
.kc-ring--boda, .kc-float-glow { animation:none !important; }
}