/* Loop — sitio cinematográfico. Escenas fijas (sticky) guiadas por el scroll.
   El motor (main.js) escribe --p (0-1) en cada [data-scene]; el CSS hace el resto con transform/opacity. */

@font-face { font-family: "Roc Grotesk"; src: url("../fonts/RocGrotesk-Regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Roc Grotesk"; src: url("../fonts/RocGrotesk-Medium.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Roc Grotesk"; src: url("../fonts/RocGrotesk-Bold.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Roc Grotesk"; src: url("../fonts/RocGrotesk-Heavy.woff2") format("woff2"); font-weight: 900; font-display: swap; }
@font-face { font-family: "PP Supply Mono"; src: url("../fonts/PPSupplyMono-Regular.otf") format("opentype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Subway Berlin SC"; src: url("../fonts/SubwayBerlinSC.otf") format("opentype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "IF Kica"; src: url("../fonts/IFKica-Light.woff2") format("woff2"); font-weight: 300; font-display: swap; }
@font-face { font-family: "IF Kica"; src: url("../fonts/IFKica-Regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "IF Kica"; src: url("../fonts/IFKica-Bold.woff2") format("woff2"); font-weight: 700; font-display: swap; }

:root {
  --deep: #061651; --freq: #0a2373; --beat: #123498; --night: #030a2b; --white: #fff;
  --signal: rgba(255, 255, 255, .78);
  --pink: #c9347f; --pink-d: #a22371; --violet: #9b41b8; --violet-d: #6b2597;
  --pad: clamp(20px, 4vw, 56px); --max: 1440px;
  --sans: "Roc Grotesk", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --mono: "PP Supply Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --berlin: "Subway Berlin SC", "Arial Narrow", Impact, sans-serif;
  --kica: "IF Kica", "Roc Grotesk", "Helvetica Neue", Arial, sans-serif;
  --out: cubic-bezier(.23, 1, .32, 1); --inout: cubic-bezier(.77, 0, .175, 1);
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 0; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--night); color: var(--white); font-family: var(--sans); font-size: clamp(1rem, 1.05vw, 1.125rem); line-height: 1.55; -webkit-font-smoothing: antialiased; overflow-x: clip; }
body::after { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 200; opacity: .1; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .9 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"); }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
a:focus-visible, button:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; }
::selection { background: var(--white); color: var(--deep); }
p { margin: 0 0 1.1em; max-width: 56ch; }
h1, h2, h3 { margin: 0; font-weight: 700; letter-spacing: -.03em; line-height: .95; }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.wrap { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--pad); }
.mono { font-family: var(--mono); font-size: .75rem; letter-spacing: .04em; text-transform: uppercase; line-height: 1.7; }
.berlin { font-family: var(--berlin); font-weight: 400; letter-spacing: 0; text-transform: uppercase; }
.ln { display: block; }
.label { display: block; margin: 0 0 clamp(20px, 2.4vw, 32px); color: var(--signal); max-width: none; }
.sec { position: relative; padding-block: clamp(96px, 13vw, 190px); }

/* ---------- botones y enlaces ---------- */
.btn { display: inline-flex; align-items: center; gap: 8px; padding: 16px 30px; border-radius: 999px; font-weight: 700; line-height: 1; border: 2px solid transparent; transition: transform .18s var(--out), background .25s var(--out), color .25s var(--out), border-color .25s var(--out); }
.btn:active { transform: scale(.97); }
.btn.solid { background: var(--beat); color: var(--white); }
.btn.ghost { border-color: currentColor; color: var(--white); }
.btn.light { background: var(--white); color: var(--pink-d); }
@media (hover: hover) and (pointer: fine) {
  .btn:hover { transform: translateY(-3px); }
  .btn.solid:hover { background: var(--white); color: var(--deep); }
  .btn.ghost:hover { background: var(--white); color: var(--deep); }
  .btn.light:hover { background: var(--deep); color: var(--white); }
}
.actions { display: flex; flex-wrap: wrap; gap: 12px 14px; margin-top: clamp(22px, 2.6vw, 36px); }
.link { display: inline-block; font-weight: 700; padding-bottom: 3px; background: linear-gradient(currentColor, currentColor) left bottom / 100% 2px no-repeat; transition: background-size .35s var(--out); }
@media (hover: hover) and (pointer: fine) { .link:hover { background-size: 0 2px; background-position: right bottom; } }

/* ---------- duotono azul ---------- */
.ph { position: relative; overflow: hidden; isolation: isolate; background-color: var(--deep); background-image: radial-gradient(circle, rgba(255,255,255,.22) 1.2px, transparent 1.7px); background-size: 11px 11px; }
.ph img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.25) brightness(.9); mix-blend-mode: screen; }
.ph::after { content: ""; position: absolute; inset: 0; background: #1a38c8; mix-blend-mode: color; opacity: .62; pointer-events: none; }

/* ---------- navegación ---------- */
.nav-bar { position: fixed; top: 14px; left: 0; right: 0; z-index: 90; padding-inline: var(--pad); pointer-events: none; transition: transform .45s var(--out); }
.nav-bar.hide { transform: translateY(-140%); }
.pill { pointer-events: auto; max-width: var(--max); margin-inline: auto; background: rgba(3, 10, 43, .86); color: var(--white); border: 1px solid rgba(255,255,255,.14); border-radius: 999px; padding: 10px 12px 10px 28px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.pill .logo img { height: 30px; width: auto; }
.pill nav { display: flex; align-items: center; gap: clamp(14px, 2.4vw, 36px); }
.pill nav a { font-weight: 700; font-size: .8rem; letter-spacing: .04em; text-transform: uppercase; padding: 8px 0; background: linear-gradient(currentColor, currentColor) left bottom 4px / 0 2px no-repeat; transition: background-size .3s var(--out); }
.pill nav a:hover, .pill nav a[aria-current="page"] { background-size: 100% 2px; }
.pill .btn { padding: 14px 26px; font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; }
.menu-btn { display: none; }
.menu { position: fixed; inset: 0; z-index: 95; background: var(--deep); color: var(--white); display: flex; flex-direction: column; justify-content: center; gap: 6px; padding: 96px var(--pad) 40px; clip-path: inset(0 0 100% 0); visibility: hidden; transition: clip-path .6s var(--inout), visibility 0s .6s; }
.menu.open { clip-path: inset(0); visibility: visible; transition: clip-path .6s var(--inout); }
.menu a { font-size: clamp(2.4rem, 11vw, 4rem); font-weight: 700; letter-spacing: -.04em; line-height: 1.05; }
.menu-open .nav-bar { z-index: 100; }

/* ================= MOTOR DE ESCENAS ================= */
.scene { position: relative; }
.stage { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
.vig::after { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 3; background: radial-gradient(ellipse at 50% 50%, transparent 52%, rgba(3, 10, 43, .55) 100%); }

/* ---------- 1. HERO ---------- */
.s-hero { height: 240vh; }
.s-hero .stage { display: flex; flex-direction: column; justify-content: flex-end; }
.s-hero .bg { position: absolute; inset: -5% 0; transform: scale(calc(1.3 - var(--p, 0) * .3)); transform-origin: 50% 62%; will-change: transform; }
.s-hero .bg .ph { position: absolute; inset: 0; }
.s-hero .shade { position: absolute; inset: 0; background: rgba(3, 10, 43, .42); z-index: 1; opacity: calc(.75 + var(--p, 0) * .25); }
.s-hero .out { position: absolute; inset: 0; background: var(--night); z-index: 4; opacity: calc(max(0, var(--p, 0) - .62) * 2.6); pointer-events: none; }
.hero-body { position: relative; z-index: 2; padding: 0 var(--pad) clamp(70px, 9vw, 120px); }
.hero-body .mono { margin: 0 0 clamp(10px, 1.4vw, 20px); max-width: none; }
.hero-fade { opacity: calc(1 - var(--p, 0) * 3); }
.hero-title { font-size: clamp(2.4rem, 10.6vw, 15rem); line-height: .86; letter-spacing: 0; white-space: nowrap; }
.hero-title .ln { overflow: hidden; padding-block: .05em; }
.hero-title .ln:nth-child(1) { transform: translate3d(calc(var(--p, 0) * -26vw), 0, 0); opacity: calc(1 - var(--p, 0) * 1.4); }
.hero-title .ln:nth-child(2) { transform: translate3d(calc(var(--p, 0) * 26vw), 0, 0); opacity: calc(1 - var(--p, 0) * 1.4); }
.hero-title .ln > span { display: block; }
.hero-sub { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 32px; margin-top: clamp(14px, 2vw, 28px); opacity: calc(1 - var(--p, 0) * 3.2); }
.hero-sub .lead { margin: 0; font-size: clamp(1.05rem, 1.5vw, 1.4rem); line-height: 1.35; max-width: 30ch; }
.hero-sub .actions { margin: 0; }
.marquee { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; overflow: hidden; background: var(--white); color: var(--deep); padding: 12px 0; }
.marquee .track { display: flex; width: max-content; animation: slide 30s linear infinite; }
.marquee span { font-family: var(--mono); font-size: .85rem; letter-spacing: .08em; white-space: pre; padding-right: 1.2ch; }
@keyframes slide { to { transform: translateX(-50%); } }
.js .hero-title .ln > span { transform: translateY(105%); animation: lineUp 1s var(--out) .2s forwards; }
.js .hero-title .ln:nth-child(2) > span { animation-delay: .34s; }
.js .hero-in { opacity: 0; transform: translateY(16px); animation: fadeUp .8s var(--out) forwards; animation-delay: calc(.6s + var(--n, 0) * 90ms); }
@keyframes lineUp { to { transform: none; } }
@keyframes fadeUp { to { opacity: 1; transform: none; } }

/* ---------- 2. MANIFIESTO (4 pasos) ---------- */
.s-manifest { height: 560vh; }
.mf-photo { position: absolute; inset: 0; opacity: 0; }
.mf-shade { position: absolute; inset: 0; background: rgba(3, 10, 43, .55); z-index: 1; }
.s-manifest .label { position: absolute; z-index: 4; top: clamp(90px, 10vw, 120px); left: var(--pad); margin: 0; }
.mf-line { position: absolute; z-index: 4; left: var(--pad); right: var(--pad); top: 50%; margin: 0; max-width: 20ch; font-weight: 700; letter-spacing: -.03em; line-height: 1.02; font-size: clamp(2rem, 6.4vw, 7.2rem); opacity: 0; translate: 0 -50%; }
.mf-line.berlin { font-size: clamp(3rem, 12vw, 14rem); line-height: .9; max-width: none; letter-spacing: 0; }
.s-manifest .pulse { position: absolute; left: 0; right: 0; bottom: clamp(20px, 3vw, 40px); z-index: 4; }

/* pulso */
.pulse { display: flex; justify-content: space-between; align-items: center; height: clamp(48px, 7vw, 96px); max-width: var(--max); margin-inline: auto; padding-inline: var(--pad); color: var(--white); }
.pulse i { display: block; flex: none; width: 3px; height: 100%; background: currentColor; border-radius: 3px; opacity: .9; transform: scaleY(var(--hi, .8)); animation: beat 2.2s ease-in-out infinite; animation-delay: calc(var(--i) * -55ms); animation-play-state: paused; }
.pulse.on i { animation-play-state: running; }
@keyframes beat { 0%, 100% { transform: scaleY(var(--lo, .15)); } 50% { transform: scaleY(var(--hi, .9)); } }

/* ---------- 3. VENUE (el arco se abre) y VIDEO ---------- */
.s-open { height: 300vh; }
.open-win { position: absolute; inset: 0; clip-path: inset(calc((1 - var(--e, 0)) * 18vh) calc((1 - var(--e, 0)) * 31vw) 0 calc((1 - var(--e, 0)) * 31vw) round calc((1 - var(--e, 0)) * 50vw) calc((1 - var(--e, 0)) * 50vw) 0 0); }
.open-win .ph { position: absolute; inset: 0; transform: scale(calc(1.18 - var(--e, 0) * .18)); }
.open-shade { position: absolute; inset: 0; z-index: 1; background: rgba(3, 10, 43, .35); opacity: calc(.3 + var(--e, 0) * .7); }
.open-ui { position: relative; z-index: 2; height: 100%; padding: clamp(96px, 11vw, 130px) var(--pad) clamp(28px, 4vw, 56px); display: flex; flex-direction: column; justify-content: flex-end; pointer-events: none; }
.open-ui > * { pointer-events: auto; }
.open-title { font-size: clamp(2.4rem, 9vw, 12rem); font-weight: 900; letter-spacing: -.05em; line-height: .86; }
.open-ui .label { position: absolute; top: clamp(96px, 11vw, 130px); left: var(--pad); margin: 0; }
.open-meta { margin: clamp(16px, 2vw, 28px) 0 0; opacity: calc(var(--e, 0)); max-width: none; }
.open-meta span { display: block; }

.play { position: absolute; z-index: 5; left: 50%; top: 50%; translate: -50% -50%; border: 0; cursor: pointer; background: var(--white); color: var(--deep); padding: 18px 34px; border-radius: 999px; font: 700 1rem var(--sans); transition: transform .2s var(--out), background .25s, color .25s; }
.play:active { transform: scale(.97); }
@media (hover: hover) and (pointer: fine) { .play:hover { background: var(--beat); color: var(--white); transform: translateY(-3px); } }
.s-video .open-ui { padding-bottom: clamp(28px, 4vw, 56px); }
.s-video .support { position: absolute; z-index: 5; top: clamp(96px, 11vw, 130px); right: var(--pad); max-width: 30ch; margin: 0; color: var(--white); }
.s-video .after { margin: clamp(14px, 2vw, 24px) 0 0; font-weight: 500; font-size: clamp(1.05rem, 1.6vw, 1.5rem); max-width: 32ch; opacity: calc(var(--e, 0)); }
.s-video iframe { position: absolute; inset: 0; z-index: 6; width: 100%; height: 100%; border: 0; }

/* venue: información */
.venue-info { background: var(--night); }
.venue-info .grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--pad); align-items: start; }
.venue-info .prod { margin-top: 24px; font-weight: 700; font-size: clamp(1.4rem, 2.4vw, 2.2rem); line-height: 1.1; max-width: 18ch; }
.stats { margin: 0; display: grid; gap: clamp(24px, 3vw, 40px); }
.stats div { border-top: 2px solid rgba(255,255,255,.4); padding-top: 14px; }
.stats dt { font-size: clamp(2.8rem, 7vw, 6.4rem); font-weight: 900; letter-spacing: -.04em; line-height: .9; font-variant-numeric: tabular-nums; }
.stats dd { margin: 10px 0 0; }
.tech { margin-top: clamp(40px, 5vw, 72px); display: flex; flex-wrap: wrap; gap: 8px 32px; color: var(--signal); }

/* ---------- puente (textura azul) ---------- */
.has-tex { position: relative; overflow: hidden; }
.has-tex > .wrap { position: relative; z-index: 1; }
.tex { position: absolute; inset: 0; z-index: 0; isolation: isolate; background: var(--deep); pointer-events: none; }
.tex img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.25); mix-blend-mode: screen; opacity: .5; }
.tex::after { content: ""; position: absolute; inset: 0; background: #1a38c8; mix-blend-mode: color; opacity: .85; }
.tex::before { content: ""; position: absolute; inset: 0; background: rgba(3, 10, 43, .52); z-index: 2; }
.bridge { padding-block: clamp(120px, 18vw, 260px); }
.h-bridge { font-size: clamp(2rem, 8vw, 9rem); font-weight: 900; line-height: .9; letter-spacing: -.05em; margin: 0; max-width: none; }
.bridge .link { margin-top: clamp(24px, 3vw, 44px); }

/* ---------- 4. GALERÍA horizontal ---------- */
.s-gal .stage { display: flex; align-items: center; }
.gal-track { display: flex; gap: clamp(14px, 2vw, 32px); padding-inline: var(--pad); will-change: transform; }
.gal-track figure { flex: none; margin: 0; height: min(76vh, 78svh); aspect-ratio: var(--r); border-radius: 22px; overflow: hidden; }
.gal-track .ph { width: 100%; height: 100%; }
.gal-bar { position: absolute; z-index: 3; left: var(--pad); right: var(--pad); bottom: clamp(18px, 3vh, 36px); height: 2px; background: rgba(255,255,255,.2); }
.gal-bar i { display: block; height: 100%; background: var(--white); transform-origin: left; transform: scaleX(var(--p, 0)); }

/* ---------- 5. FECHAS (escenas apiladas) ---------- */
.d-head { min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; justify-content: flex-end; padding-block: 140px clamp(56px, 8vw, 110px); background: var(--freq); }
.d-head h2 { font-size: clamp(2.4rem, 9.4vw, 13rem); font-weight: 900; letter-spacing: -.05em; line-height: .86; margin-bottom: clamp(20px, 2.6vw, 36px); }
.d-head .intro { margin: 0; max-width: 40ch; color: var(--signal); }
.dcard { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; background: var(--night); transform: scale(calc(1 - var(--cover, 0) * .06)); transform-origin: 50% 0; will-change: transform; }
.dcard::after { content: ""; position: absolute; inset: 0; background: var(--night); opacity: calc(var(--cover, 0) * .75); pointer-events: none; z-index: 6; }
.d-photo { position: absolute; inset: 0; }
.d-shade { position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(3,10,43,.55) 0%, rgba(3,10,43,0) 35%, rgba(3,10,43,.8) 100%); }
.d-meta { position: absolute; z-index: 2; top: clamp(96px, 11vw, 130px); left: var(--pad); right: var(--pad); margin: 0; max-width: none; }
.d-name { position: absolute; z-index: 2; left: var(--pad); bottom: clamp(24px, 4vw, 56px); font-size: clamp(3.4rem, 19vw, 27rem); font-weight: 900; letter-spacing: -.06em; line-height: .78; white-space: nowrap; }
.d-side { position: absolute; z-index: 2; right: var(--pad); bottom: clamp(130px, 22vw, 330px); max-width: 32ch; }
.d-side p { margin: 0 0 14px; }
.dcard.next { background: linear-gradient(150deg, var(--pink) 0%, #a93d9a 50%, var(--violet) 100%); display: grid; grid-template-columns: 1.15fr .85fr; gap: var(--pad); align-items: center; padding: 120px var(--pad) 48px; }
.dcard.next::after { display: none; }
.dcard.next h3 { font-family: var(--kica); font-weight: 400; font-size: clamp(2.4rem, 6vw, 6.4rem); line-height: .96; letter-spacing: -.02em; margin: 14px 0 20px; }
.dcard.next h3 em { display: block; font-style: normal; font-weight: 700; font-size: 1.5em; }
.dcard.next .flyer { aspect-ratio: 4 / 5; max-height: 74vh; margin-inline: auto; border-radius: 18px; overflow: hidden; rotate: 3deg; transition: rotate .6s var(--out); }
.dcard.next .flyer img { width: 100%; height: 100%; object-fit: cover; }
@media (hover: hover) and (pointer: fine) { .dcard.next:hover .flyer { rotate: 0deg; } }

/* ---------- contacto + footer ---------- */
.contact h2 { font-size: clamp(2.2rem, 7.4vw, 9rem); font-weight: 900; letter-spacing: -.05em; line-height: .9; margin-bottom: clamp(20px, 2.4vw, 32px); }
.contact .support { max-width: 44ch; color: var(--signal); }
.channels { margin: clamp(36px, 4vw, 64px) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 12px; }
.channels a { display: inline-flex; flex-direction: column; gap: 2px; padding: 16px 26px; border: 2px solid rgba(255,255,255,.35); border-radius: 28px; background: rgba(3,10,43,.5); transition: background .25s var(--out), color .25s var(--out), transform .18s var(--out), border-color .25s; }
.channels a:active { transform: scale(.97); }
.channels .k { color: var(--signal); transition: color .25s; }
.channels .v { font-weight: 700; font-size: clamp(1rem, 1.5vw, 1.3rem); }
@media (hover: hover) and (pointer: fine) { .channels a:hover { background: var(--white); color: var(--deep); border-color: var(--white); transform: translateY(-3px); } .channels a:hover .k { color: var(--beat); } }
.address { margin-top: 28px; max-width: 52ch; }
.site-footer { background: var(--night); color: var(--white); padding-block: clamp(56px, 7vw, 104px) 28px; border-top: 1px solid rgba(255,255,255,.1); }
.f-top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 32px; margin-bottom: clamp(40px, 5vw, 72px); }
.f-top img { width: clamp(150px, 16vw, 220px); height: auto; }
.f-nav { display: flex; flex-wrap: wrap; gap: 10px clamp(18px, 3vw, 40px); }
.f-nav a { font-weight: 700; }
.f-lines { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px 32px; padding-block: 24px; border-top: 1px solid rgba(255,255,255,.14); color: var(--signal); }
.f-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; padding-top: 20px; border-top: 1px solid rgba(255,255,255,.14); color: var(--signal); }
.f-bottom .made a { color: var(--white); }

/* ---------- entradas simples ---------- */
.js .rise { opacity: 0; transform: translateY(26px); transition: opacity .8s var(--out), transform .8s var(--out); transition-delay: var(--d, 0ms); }
.js .rise.in { opacity: 1; transform: none; }

/* ================= CHICLE (estética del brochure) ================= */
body.chicle { background: var(--violet-d); font-family: var(--kica); }
.chicle .label { color: rgba(255,255,255,.9); }
.spark { position: absolute; z-index: 3; width: var(--s, 22px); aspect-ratio: 1; background: var(--white); clip-path: polygon(50% 0, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0 50%, 40% 40%); animation: twinkle 2.6s ease-in-out infinite; animation-delay: var(--dl, 0s); pointer-events: none; }
@keyframes twinkle { 0%, 100% { opacity: .25; transform: scale(.7) rotate(0); } 50% { opacity: 1; transform: scale(1.15) rotate(45deg); } }

.s-chero { height: 220vh; }
.s-chero .stage { background: linear-gradient(160deg, #c9347f 0%, #a93d9a 45%, #9b41b8 100%); display: grid; place-items: center; text-align: center; padding: 100px var(--pad) 40px; }
.cbg { position: absolute; inset: -6% 0; width: 100%; height: 112%; object-fit: cover; opacity: .2; transform: translate3d(0, calc(var(--p, 0) * -6%), 0) scale(calc(1.2 - var(--p, 0) * .15)); }
.cin { position: relative; z-index: 2; }
.ch-top { margin: 0 0 4px; max-width: none; }
.ch-word { width: min(880px, 90vw); aspect-ratio: 2.15 / 1; margin: 0 auto; position: relative; overflow: hidden; transform: scale(calc(1.45 - var(--p, 0) * .45)); transform-origin: 50% 60%;
  -webkit-mask-image: radial-gradient(ellipse 58% 66% at 50% 50%, #000 62%, transparent 100%); mask-image: radial-gradient(ellipse 58% 66% at 50% 50%, #000 62%, transparent 100%); }
.ch-word img { position: absolute; left: 50%; top: 50%; width: 112%; height: auto; max-width: none; transform: translate(-50%, -50%); mix-blend-mode: screen; }
.ch-event { font-size: clamp(1.3rem, 4.4vw, 3rem); font-weight: 700; margin: 6px auto 4px; max-width: none; text-wrap: balance; }
.ch-date { font-size: clamp(1.05rem, 1.8vw, 1.6rem); margin: 0 auto 10px; max-width: none; text-wrap: balance; }
.ch-tag { font-size: clamp(1.05rem, 1.5vw, 1.35rem); margin: 0 auto; max-width: none; text-wrap: balance; }
.ch-data { margin: 22px 0 0; display: flex; justify-content: center; flex-wrap: wrap; gap: 6px 26px; max-width: none; }

.s-cstory { height: 420vh; }
.s-cstory .stage { background: var(--violet-d); }
.cs-photo { position: absolute; inset: 0; opacity: 0; }
.cs-photo img { width: 100%; height: 100%; object-fit: cover; }
.cs-shade { position: absolute; inset: 0; z-index: 1; background: rgba(60, 14, 90, .5); }
.s-cstory .label { position: absolute; z-index: 4; top: clamp(96px, 11vw, 130px); left: var(--pad); margin: 0; }
.cs-h2 { position: absolute; z-index: 4; left: var(--pad); top: clamp(130px, 15vw, 180px); font-family: var(--kica); font-weight: 400; font-size: clamp(2.2rem, 8vw, 9rem); line-height: .95; letter-spacing: -.03em; max-width: 12ch; }
.cs-line { position: absolute; z-index: 4; left: var(--pad); right: var(--pad); bottom: clamp(48px, 8vw, 110px); margin: 0; max-width: 24ch; font-size: clamp(1.3rem, 3vw, 3rem); line-height: 1.12; letter-spacing: -.02em; opacity: 0; }

.s-cfirst { height: 320vh; }
.s-cfirst .stage { background: var(--violet-d); }
.cf-photo { position: absolute; inset: 0; transform: scale(calc(1.2 - var(--p, 0) * .2)); }
.cf-photo img { width: 100%; height: 100%; object-fit: cover; }
.cf-shade { position: absolute; inset: 0; background: rgba(60, 14, 90, .45); z-index: 1; }
.cf-ui { position: relative; z-index: 2; height: 100%; padding: clamp(96px, 11vw, 130px) var(--pad) clamp(28px, 4vw, 56px); display: flex; flex-direction: column; justify-content: flex-end; }
.cf-ui .label { position: absolute; top: clamp(96px, 11vw, 130px); left: var(--pad); margin: 0; }
.cf-num { font-weight: 700; font-size: clamp(5rem, 30vw, 36rem); letter-spacing: -.07em; line-height: .78; margin: 0; max-width: none; transform: translate3d(calc(var(--p, 0) * -8vw), 0, 0); }
.cf-sub { font-size: clamp(1.8rem, 6vw, 6.4rem); line-height: .95; letter-spacing: -.03em; margin: .2em 0 .5em; max-width: none; }
.cf-copy { max-width: 46ch; margin: 0; font-size: clamp(1rem, 1.3vw, 1.2rem); opacity: calc(max(0, var(--p, 0) - .35) * 3); }
.cf-copy p { margin: 0 0 .8em; color: var(--white); }

.cinfo { background: linear-gradient(180deg, var(--violet-d), var(--pink) 130%); padding-block: clamp(72px, 9vw, 140px); }
.cinfo .two { display: grid; grid-template-columns: 1fr 1fr; gap: var(--pad); align-items: center; }
.infoblock { margin: 0 0 28px; display: grid; grid-template-columns: max-content 1fr; gap: 6px 0; }
.infoblock dt, .infoblock dd { margin: 0; font-family: var(--mono); font-size: .85rem; letter-spacing: .04em; text-transform: uppercase; line-height: 1.8; }
.infoblock dt::after { content: "  /  "; white-space: pre; opacity: .7; }
.infoblock dd { text-transform: none; }
.infoblock dd a { background: linear-gradient(currentColor, currentColor) left bottom / 100% 1px no-repeat; }
.ch-photo { border-radius: 28px; overflow: hidden; aspect-ratio: 3 / 2; }
.ch-photo img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--out); }
@media (hover: hover) and (pointer: fine) { .ch-photo:hover img { transform: scale(1.04); } }
.c-loop { background: var(--deep); padding-block: clamp(80px, 11vw, 150px); }
.c-loop .big { font-size: clamp(1.3rem, 2.6vw, 2.4rem); line-height: 1.2; letter-spacing: -.02em; max-width: 34ch; margin-bottom: .8em; font-weight: 500; font-family: var(--sans); }
.s-cclose { position: relative; overflow: hidden; background: linear-gradient(160deg, var(--pink), var(--violet)); min-height: 100vh; min-height: 100svh; display: grid; align-items: center; padding-block: 120px; }
.s-cclose .cbg { opacity: .45; transform: none; height: 100%; inset: 0; }
.s-cclose .wrap { position: relative; z-index: 2; }
.t1 { font-size: clamp(1.4rem, 4.8vw, 5rem); line-height: 1; margin: 0; max-width: none; }
.t2 { font-weight: 700; font-size: clamp(2.2rem, 12vw, 14rem); line-height: .9; letter-spacing: -.05em; margin: .1em 0 0; max-width: none; }

/* ---------- transición entre páginas ---------- */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .35s; animation-timing-function: var(--out); }

/* ---------- responsive ---------- */
@media (max-width: 860px) {
  .pill { padding: 8px 8px 8px 20px; }
  .pill nav, .pill .btn.desk { display: none; }
  .pill .menu-btn { display: inline-flex; }
  .hero-title { font-size: clamp(2.4rem, 10.2vw, 6rem); }
  .venue-info .grid, .cinfo .two { grid-template-columns: 1fr; }
  .dcard.next { grid-template-columns: 1fr; align-content: center; padding-top: 100px; }
  .dcard.next .flyer { max-height: 38vh; }
  .d-side { left: var(--pad); right: var(--pad); bottom: clamp(110px, 40vw, 200px); max-width: none; }
  .s-video .support { left: var(--pad); right: var(--pad); top: clamp(130px, 38vw, 170px); max-width: none; }
  .f-lines { grid-template-columns: 1fr 1fr; }
  .pulse i:nth-child(n+41) { display: none; }
  .open-win { clip-path: inset(calc((1 - var(--e, 0)) * 16vh) calc((1 - var(--e, 0)) * 14vw) 0 calc((1 - var(--e, 0)) * 14vw) round calc((1 - var(--e, 0)) * 50vw) calc((1 - var(--e, 0)) * 50vw) 0 0); }
  .gal-track figure { height: 64svh; }
}

/* ---------- reducción de movimiento: todo estático ---------- */
html.rm { scroll-behavior: auto; }
html.rm .scene { height: auto !important; }
html.rm .stage { position: relative; height: auto; min-height: 100svh; }
html.rm .mf-photo, html.rm .mf-line, html.rm .cs-photo, html.rm .cs-line { position: relative; opacity: 1 !important; translate: none; inset: auto; }
html.rm .mf-photo, html.rm .cs-photo { display: none; }
html.rm .hero-in, html.rm .rise, html.rm .hero-title .ln > span { opacity: 1; transform: none; animation: none; }
html.rm .open-win { clip-path: none; }
html.rm .dcard { position: relative; height: auto; min-height: 90vh; }
html.rm .gal-track { overflow-x: auto; }
html.rm .marquee .track, html.rm .pulse i, html.rm .spark { animation: none; }
@media (prefers-reduced-motion: reduce) { .marquee .track, .pulse i, .spark { animation: none; } }

/* áreas de toque cómodas (mínimo ~44px) */
.link { padding: 12px 0 14px; background-position: left bottom 11px; }
@media (hover: hover) and (pointer: fine) { .link:hover { background-position: right bottom 11px; } }
.pill .logo { display: inline-block; padding: 7px 0; }
@media (max-width: 860px) { .h-bridge { font-size: clamp(1.5rem, 6.8vw, 4rem); } }

/* celular: títulos Heavy más sueltos y sin palabras huérfanas */
@media (max-width: 860px) {
  .open-title, .d-head h2, .contact h2, .h-bridge { letter-spacing: -.03em; }
  .open-title { font-size: clamp(1.7rem, 7.4vw, 4rem); line-height: .92; }
  .contact h2 { font-size: clamp(1.5rem, 6vw, 3.2rem); }
  .d-head h2 { font-size: clamp(2rem, 9vw, 4rem); }
  .d-head { min-height: 62svh; }
}
@media (max-width: 860px) { .ch-word { transform: scale(calc(1.12 - var(--p, 0) * .12)); margin-bottom: 14px; } }
@media (max-width: 860px) { .d-head h2 { font-size: clamp(1.6rem, 6.6vw, 4rem); } }

/* ===== ronda de ajustes: tipografía regular, galería sin filtro, video rehecho ===== */
/* títulos y números en Roc Grotesk Regular, como en los diseños de Loop */
.open-title, .d-head h2, .h-bridge, .contact h2, .stats dt, .d-name { font-weight: 400; letter-spacing: -.035em; }
.mf-line { font-weight: 400; }
.venue-info .prod { font-weight: 500; }
.dcard .d-name { letter-spacing: -.05em; }

/* galería: fotos originales, sin filtro azul */
.gal-track .ph { background: none; }
.gal-track .ph img { filter: none; mix-blend-mode: normal; }
.gal-track .ph::after { display: none; }

/* video: botón con ícono a la derecha, nunca sobre el título */
.s-video .play { left: auto; right: var(--pad); top: auto; bottom: clamp(120px, 14vw, 200px); translate: none; display: inline-flex; align-items: center; gap: 14px; padding: 12px 30px 12px 12px; }
.s-video .play::before { content: ""; flex: none; width: 56px; height: 56px; border-radius: 50%; background: var(--deep) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='white' d='M8 5v14l11-7z'/></svg>") center / 24px no-repeat; }
@media (max-width: 860px) {
  .s-video .play { left: 50%; right: auto; top: 46%; bottom: auto; translate: -50% -50%; }
  .stats dt { font-size: clamp(2.4rem, 12vw, 4.6rem); }
}
.mf-line.long { font-size: clamp(1.5rem, 4.2vw, 4.6rem); max-width: 28ch; line-height: 1.08; }
.f-lines { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 860px) { .f-lines { grid-template-columns: 1fr 1fr; } }

/* =====================================================================
   Chicle: paleta propia (sin azul de Loop), duotono rosa/violeta y logo nuevo
   ===================================================================== */
body.chicle { --deep: #3a1259; --night: #1c0830; --beat: #c9347f; --freq: #5a1d85; --violet-d: #4a1670; }
body.chicle { background: var(--night); }
body.chicle .pill { background: rgba(28, 8, 48, .88); border-color: rgba(255,255,255,.16); }
body.chicle .tex { background: #2a0a48; }
body.chicle .tex::after { background: #c9347f; opacity: .75; }
body.chicle .tex::before { background: rgba(28, 8, 48, .5); }
body.chicle .channels a { background: rgba(28, 8, 48, .5); }
body.chicle .channels a:hover { color: var(--pink-d); }
body.chicle .channels a:hover .k { color: var(--pink-d); }
body.chicle .btn.solid:hover { color: var(--pink-d); }
body.chicle .btn.ghost:hover { color: var(--pink-d); }
body.chicle ::selection { background: var(--white); color: var(--pink-d); }

/* duotono rosa/violeta */
.pv { position: relative; overflow: hidden; isolation: isolate; background: #2a0a48; }
.pv img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.2) brightness(1.05); mix-blend-mode: screen; }
.pv::after { content: ""; position: absolute; inset: 0; background: linear-gradient(160deg, #ee3f96 0%, #9b41b8 100%); mix-blend-mode: color; opacity: .85; pointer-events: none; }
.cbg.pv { position: absolute; inset: -6% 0; width: 100%; height: 112%; }
.cs-photo.pv, .cf-photo.pv { position: absolute; inset: 0; }
.cs-photo.pv img { height: 100%; }

/* hero oscuro para que el logo rosa/violeta con sombra negra se vea */
.s-chero .stage { background: linear-gradient(160deg, #1c0830 0%, #3a1259 55%, #5a1d85 100%); }
.cbg.pv { opacity: .32; }
.ch-word { aspect-ratio: auto; width: min(780px, 84vw); overflow: visible; -webkit-mask-image: none; mask-image: none; transform: scale(calc(1.25 - var(--p, 0) * .25)); }
.ch-word img { position: static; transform: none; width: 100%; height: auto; mix-blend-mode: normal; }
@media (max-width: 860px) { .ch-word { transform: scale(calc(1.08 - var(--p, 0) * .08)); } }

/* fotos de la información: cuadradas, centradas en las caras */
.cinfo .ch-photo { aspect-ratio: 1 / 1; }
.cinfo .ch-photo img { object-position: 50% 28%; }

/* bloques que antes eran azul de Loop pasan a violeta de Chicle */
.c-loop { background: var(--violet-d); }
.cinfo { background: linear-gradient(180deg, #4a1670, #7a2a99 60%, #b0307f 130%); }
.s-chero .label, .ch-top { color: rgba(255,255,255,.9); }

/* duotono de Chicle: se calcula en canvas (main.js), sin filtros ni mezclas por cuadro */
.pv img { filter: none; mix-blend-mode: normal; }
.pv::after { display: none; }

/* ===== marquees de texto ===== */
.mq { overflow: hidden; background: var(--white); color: var(--deep); padding: clamp(10px, 1.4vw, 18px) 0; }
.mq-t { display: flex; width: max-content; animation: slide 38s linear infinite; }
.mq.rev .mq-t { animation-direction: reverse; animation-duration: 46s; }
.mq span { font-weight: 500; font-size: clamp(1.6rem, 4.6vw, 4.4rem); letter-spacing: -.02em; line-height: 1.1; white-space: pre; padding-right: .6em; }
.mq.out { background: var(--night); color: transparent; }
.mq.out span { -webkit-text-stroke: 1.5px #fff; }
body.chicle .mq { background: var(--pink); color: var(--night); }
body.chicle .mq.out { background: var(--night); }
body.chicle .mq.out span { -webkit-text-stroke: 1.5px var(--pink); }
html.rm .mq-t, .mq-t { }
@media (prefers-reduced-motion: reduce) { .mq-t { animation: none; } }

/* ===== Chicle: General Sans, títulos chicos en mayúsculas, más aire ===== */
@font-face { font-family: "General Sans"; src: url("../fonts/GeneralSans-Regular.otf") format("opentype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "General Sans"; src: url("../fonts/GeneralSans-Medium.otf") format("opentype"); font-weight: 500; font-display: swap; }
@font-face { font-family: "General Sans"; src: url("../fonts/GeneralSans-Bold.otf") format("opentype"); font-weight: 700; font-display: swap; }
body.chicle { --gs: "General Sans", "Helvetica Neue", Arial, sans-serif; font-family: var(--gs); }
body.chicle .mq span, body.chicle .mono, body.chicle .ch-event, body.chicle .ch-date, body.chicle .ch-tag, body.chicle .btn, body.chicle .cs-line, body.chicle .cf-copy, body.chicle .infoblock dt, body.chicle .infoblock dd, body.chicle .nav-bar { font-family: var(--gs); }
body.chicle .mono, body.chicle .infoblock dt, body.chicle .infoblock dd { font-family: var(--mono); }
body.chicle .pill { padding: 7px 8px 7px 22px; }
body.chicle .pill .logo img, .pill .logo img { height: 20px; }
.pill .logo { padding: 11px 0; }
.cs-h2, .cf-sub, .ch-sec h2, .t1, .t2, .cf-num { font-family: var(--kica); text-transform: uppercase; letter-spacing: -.01em; font-weight: 400; }
.cs-h2 { font-size: clamp(1.6rem, 3.6vw, 3.6rem); line-height: 1.05; max-width: 16ch; }
.cf-num { font-size: clamp(3.4rem, 11vw, 11rem); line-height: .85; }
.cf-sub { font-size: clamp(1.5rem, 3.4vw, 3.4rem); line-height: 1; margin: .35em 0 .6em; }
.t1 { font-size: clamp(1.3rem, 3.4vw, 3.4rem); }
.t2 { font-size: clamp(2rem, 6.4vw, 6.4rem); font-weight: 700; line-height: .95; }
.cs-line { font-family: var(--gs); font-size: clamp(1.15rem, 2vw, 1.9rem); line-height: 1.4; max-width: 34ch; bottom: clamp(56px, 9vw, 120px); }
.cs-shade { background: linear-gradient(180deg, rgba(28,8,48,.55) 0%, rgba(28,8,48,.25) 40%, rgba(28,8,48,.8) 100%); }
.cs-line { padding-top: 24px; }
.cf-copy { font-family: var(--gs); }
@media (max-width: 860px) { .cs-line { max-width: none; } .cs-h2 { max-width: none; } }
.cf-num { transform: none; }
body.chicle .mq { color: var(--white); background: #b02a78; }
.cinfo .ch-photo { aspect-ratio: 3 / 2; }
.cinfo .ch-photo img { object-position: 50% 50%; }

/* logos: header más grande en la home de Loop, más chico en Chicle; footer con el logo Loop Project */
.pill .logo img { height: 36px; }
body.chicle .pill .logo img { height: 18px; }
.pill .logo { padding: 8px 0; }
body.chicle .pill .logo { padding: 12px 0; }
.f-logo img { width: clamp(180px, 20vw, 300px); height: auto; }
@media (max-width: 860px) { .pill .logo img { height: 30px; } body.chicle .pill .logo img { height: 16px; } }

/* wordmark de Chicle: más chico */
.ch-word { width: min(520px, 62vw); }
@media (max-width: 860px) { .ch-word { width: min(300px, 72vw); } }
.pill .logo img { height: 46px; }
.pill .logo { padding: 4px 0; }
@media (max-width: 860px) { .pill .logo img { height: 38px; } }

/* ===================== ronda mobile + desktop ===================== */
/* logos */
body.chicle .pill .logo img { height: 30px; }
body.chicle .pill .logo { padding: 6px 0; }
@media (max-width: 860px) { body.chicle .pill .logo img { height: 28px; } }

/* marquees: texto lleno, sin contorno */
.mq.flt { background: var(--night); color: var(--white); }
.mq.flt span { -webkit-text-stroke: 0; }
body.chicle .mq.flt { background: #1c0830; color: var(--white); }

/* encabezado de fechas sin espacio de sobra */
.d-head { min-height: 0; padding-block: clamp(96px, 11vw, 160px) clamp(40px, 5vw, 72px); }
@media (max-width: 860px) { .d-head { min-height: 0; padding-block: 110px 40px; } }

/* fechas: nombre arriba, descripción abajo */
.d-name { top: clamp(150px, 15vw, 210px); bottom: auto; font-size: clamp(3rem, 15vw, 20rem); }
.d-side { right: auto; left: var(--pad); bottom: clamp(28px, 5vw, 64px); max-width: 44ch; }
.d-side p { color: var(--white); }
@media (max-width: 860px) { .d-name { top: 150px; font-size: clamp(2.8rem, 17vw, 6rem); } .d-side { right: var(--pad); bottom: 32px; max-width: none; } }

/* tarjeta de Chicle: sin superposición */
.dcard.next { align-content: center; gap: clamp(20px, 3vw, 48px); }
@media (max-width: 860px) {
  .dcard.next { grid-template-columns: 1fr; grid-template-rows: auto auto; align-content: center; justify-items: start; padding: 96px var(--pad) 28px; gap: 18px; }
  .dcard.next h3 { font-size: clamp(1.7rem, 8vw, 3rem); margin: 8px 0 12px; }
  .dcard.next h3 em { font-size: 1.35em; }
  .dcard.next .flyer { max-height: 34vh; justify-self: center; margin-top: 4px; rotate: 2deg; }
  .dcard.next .btn { margin-bottom: 0; }
}

/* En movimiento: todo alineado a la izquierda, botón dentro del bloque */
.s-video .play { position: static; translate: none; align-self: flex-start; flex: none; }
.v-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px 48px; margin-top: clamp(18px, 2.4vw, 32px); }
.v-text { max-width: 44ch; }
.s-video .support { position: static; max-width: none; margin: 0 0 .8em; }
.s-video .after { margin: 0; font-size: clamp(1rem, 1.3vw, 1.2rem); font-weight: 400; color: var(--signal); max-width: none; opacity: calc(var(--e, 0)); }
@media (max-width: 860px) { .v-row { flex-direction: column; align-items: flex-start; } .s-video .open-ui { padding-bottom: 28px; } }

/* contacto: lista + mapa */
.c-grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(32px, 5vw, 80px); align-items: start; margin-top: clamp(32px, 4vw, 56px); }
.clist { margin: 0; padding: 0; }
.clist > div { display: grid; grid-template-columns: 9rem 1fr; gap: 16px; align-items: baseline; padding: 16px 0; border-top: 1px solid rgba(255,255,255,.22); }
.clist > div:last-child { border-bottom: 1px solid rgba(255,255,255,.22); }
.clist dt { color: var(--signal); }
.clist dd { margin: 0; font-weight: 500; font-size: clamp(1rem, 1.4vw, 1.25rem); }
.clist dd a { background: linear-gradient(currentColor, currentColor) left bottom / 0 1px no-repeat; transition: background-size .3s var(--out); }
@media (hover: hover) and (pointer: fine) { .clist dd a:hover { background-size: 100% 1px; } }
.cmap { margin: 0; }
.cmap iframe { display: block; width: 100%; aspect-ratio: 4 / 3; border: 0; border-radius: 22px; background: var(--deep); filter: grayscale(.35) contrast(1.05); }
.cmap figcaption { margin-top: 8px; }
@media (max-width: 860px) { .c-grid { grid-template-columns: 1fr; } .clist > div { grid-template-columns: 6.5rem 1fr; } }

/* footer */
.f-lines a { color: var(--signal); transition: color .2s; }
.f-lines a:hover { color: var(--white); }
.f-lines { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 860px) {
  .site-footer { padding-top: 48px; }
  .f-top { flex-direction: column; gap: 28px; margin-bottom: 32px; }
  .f-top img { width: 190px; }
  .f-nav { display: grid; grid-template-columns: 1fr 1fr; width: 100%; gap: 14px 24px; font-size: 1.1rem; }
  .f-lines { grid-template-columns: 1fr; gap: 14px; padding-block: 24px; }
  .f-lines br { display: none; }
  .f-bottom { flex-direction: column; align-items: flex-start; gap: 12px; }
}
.f-lines { grid-template-columns: repeat(4, auto); justify-content: space-between; }
@media (max-width: 860px) { .f-lines { grid-template-columns: 1fr; justify-content: start; } }

/* logo de Chicle: tamaño contenido */
.ch-word { width: min(300px, 56vw); transform: none; margin-bottom: 8px; }
@media (max-width: 860px) { .ch-word { width: min(230px, 62vw); transform: none; } }

/* menú: Chicle Dance destacado */
.nav-chicle { color: #ff6fb5 !important; }
.pill nav a.nav-chicle { background-image: linear-gradient(#ff6fb5, #ff6fb5); text-transform: uppercase; }
.menu a.nav-chicle, .f-nav a.nav-chicle { color: #ff6fb5; }
@media (hover: hover) and (pointer: fine) { .pill nav a.nav-chicle:hover { color: #ffa0cf !important; } }

/* ===================== Chicle: efectos de la story ===================== */
.fx { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.s-chero .stage { background: #08020f; }
.ch-event { display: inline-flex; align-items: center; gap: .5em; }
.burst { flex: none; width: .9em; height: .9em; background: #fd2e91; clip-path: polygon(50% 0, 58% 22%, 78% 8%, 74% 32%, 100% 38%, 80% 52%, 98% 70%, 74% 70%, 78% 94%, 58% 80%, 50% 100%, 42% 80%, 22% 94%, 26% 70%, 2% 70%, 20% 52%, 0 38%, 26% 32%, 22% 8%, 42% 22%); animation: spin 9s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.ch-date .pk { color: #fd2e91; font-weight: 500; }
.js .chr { display: inline-block; opacity: 0; transform: translateY(-.6em); animation: chrIn .5s cubic-bezier(.34,1.56,.64,1) forwards; animation-delay: calc(.5s + var(--k) * 35ms); }
@keyframes chrIn { to { opacity: 1; transform: none; } }
.js .ch-word img { animation: logoIn 1.3s cubic-bezier(.2, 1.5, .4, 1) .3s both, bob 6s ease-in-out 1.8s infinite; }
@keyframes logoIn { from { opacity: 0; transform: scale(.35) rotate(-8deg); } to { opacity: 1; transform: none; } }
@keyframes bob { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-8px) rotate(-.8deg); } }

/* frases */
.s-cquotes { height: 600vh; }
.s-cquotes .stage { background: #0b0314; }
.q-bg { position: absolute; inset: 0; opacity: 0; overflow: hidden; background: #0b0314; }
.q-bg.pv { background: #1a0630; }
.q-shade { position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(11,3,20,.45) 0%, rgba(11,3,20,.1) 40%, rgba(11,3,20,.6) 100%); pointer-events: none; }
.neb i { position: absolute; border-radius: 50%; filter: blur(clamp(40px, 8vw, 90px)); opacity: .8; will-change: transform; animation: drift2 16s ease-in-out infinite alternate; }
.neb.a i:nth-child(1) { width: 70vmax; height: 38vmax; left: -20%; top: 4%; background: #b02a78; }
.neb.a i:nth-child(2) { width: 55vmax; height: 34vmax; right: -25%; top: 38%; background: #6d28b8; animation-delay: -5s; }
.neb.a i:nth-child(3) { width: 60vmax; height: 30vmax; left: 8%; bottom: -14%; background: #9b2a8f; animation-delay: -9s; }
.neb.b i:nth-child(1) { width: 62vmax; height: 36vmax; left: 10%; top: -8%; background: #8a2c9e; }
.neb.b i:nth-child(2) { width: 60vmax; height: 34vmax; right: -20%; top: 42%; background: #b02a78; animation-delay: -6s; }
.neb.b i:nth-child(3) { width: 48vmax; height: 30vmax; left: -15%; bottom: 0; background: #5a1d85; animation-delay: -10s; }
.neb.c i:nth-child(1) { width: 70vmax; height: 36vmax; left: -10%; top: 0; background: #e0449f; opacity: .95; }
.neb.c i:nth-child(2) { width: 60vmax; height: 34vmax; right: -18%; top: 36%; background: #c0309a; animation-delay: -4s; }
.neb.c i:nth-child(3) { width: 66vmax; height: 34vmax; left: -6%; bottom: -12%; background: #f05ab8; animation-delay: -8s; }
@keyframes drift2 { from { transform: translate3d(-4%, -3%, 0) scale(1); } to { transform: translate3d(5%, 4%, 0) scale(1.18); } }
.q { position: absolute; inset: 0; z-index: 4; display: flex; flex-direction: column; justify-content: center; gap: clamp(2px, 1.2vw, 14px); padding: 90px var(--pad); opacity: 0; font-family: var(--gs, "General Sans", sans-serif); }
.q p { margin: 0; max-width: none; font-size: clamp(2.3rem, 8.2vw, 8rem); line-height: 1.04; letter-spacing: -.035em; font-weight: 500; text-transform: none; }
.q p em { font-style: normal; color: #ff5fc0; }
.q.zig p:nth-child(even) { align-self: flex-end; }
.q.left { justify-content: flex-end; padding-bottom: clamp(60px, 11vw, 140px); }
.q-cta { align-self: center; margin-top: clamp(20px, 3vw, 44px); text-align: center; font-size: clamp(1rem, 1.5vw, 1.4rem); line-height: 1.6; font-weight: 500; pointer-events: auto; background: linear-gradient(currentColor, currentColor) left bottom / 100% 1px no-repeat; padding-bottom: 2px; }
html.rm .q-bg, html.rm .q { position: relative; opacity: 1 !important; inset: auto; }
html.rm .q-bg { display: none; }
@media (prefers-reduced-motion: reduce) { .neb i, .burst { animation: none; } }

/* banner de Chicle en el home: misma estética que las stories */
.dcard.next { background: #0b0314; position: sticky; overflow: hidden; isolation: isolate; font-family: "General Sans", var(--sans); }
.dcard.next > * { position: relative; z-index: 2; }
.dcard.next .nb { position: absolute; inset: 0; z-index: 0; opacity: 1; background: #0b0314; }
.dcard.next .spark { position: absolute; z-index: 3; }
.dcard.next h3 { font-family: var(--kica); text-transform: uppercase; font-weight: 400; line-height: 1; letter-spacing: -.01em; font-size: clamp(1.4rem, 3vw, 3rem); }
.dcard.next h3 em { display: block; font-size: 2.4em; line-height: .95; color: #ff5fc0; font-weight: 700; letter-spacing: -.02em; }
.dcard.next h3 .sub { display: block; margin-top: .3em; }
.dcard.next .flyer { box-shadow: 0 24px 70px rgba(0,0,0,.5); }
@media (max-width: 860px) { .dcard.next h3 em { font-size: 2.1em; } }

/* banner del home: tipografía y composición robustas en cualquier ancho */
.dcard.next { grid-template-columns: minmax(0, 1fr) minmax(0, .8fr); }
.dcard.next h3 { font-size: clamp(1.2rem, 2.2vw, 2.2rem); }
.dcard.next h3 em { font-size: clamp(3rem, 7vw, 7.5rem); }
.dcard.next h3 .sub { text-wrap: balance; max-width: 16ch; }
.dcard.next .flyer { width: min(100%, 420px); max-height: 70vh; justify-self: center; }
@media (min-width: 1700px) { .dcard.next { padding-inline: calc((100vw - 1440px) / 2 + var(--pad)); } }

/* emoji siempre en color y delante del texto */
.emo { font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif; font-style: normal; color: initial; margin-right: .15em; display: inline-block; }
.cs-photo.neb { overflow: hidden; background: #0b0314; }

/* banner del home en celular: una columna, flyer abajo, sin superposiciones */
@media (max-width: 860px) {
  .dcard.next { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto; align-content: center; justify-items: start; gap: 20px; padding: 92px var(--pad) 28px; }
  .dcard.next h3 em { font-size: clamp(2.6rem, 15vw, 4.6rem); }
  .dcard.next h3 { font-size: clamp(1.1rem, 5vw, 1.6rem); }
  .dcard.next .mono { max-width: none; }
  .dcard.next .btn { padding: 15px 24px; white-space: nowrap; }
  .dcard.next .flyer { width: auto; height: min(30vh, 260px); aspect-ratio: 4 / 5; max-height: none; justify-self: center; margin-top: 4px; rotate: 2deg; }
}

/* escena Pop en movimiento: foto debajo, color de nebulosa encima */
.cs-photo.mix { overflow: hidden; background: #0b0314; }
.cs-photo.mix .pv { position: absolute; inset: 0; }
.cs-photo.mix .pv img { object-position: 50% 45%; }
.cs-photo.mix .neb.ov { position: absolute; inset: 0; background: none; mix-blend-mode: screen; opacity: .55; }
.s-cstory .cs-shade { background: linear-gradient(180deg, rgba(28,8,48,.55) 0%, rgba(28,8,48,.1) 38%, rgba(28,8,48,.72) 100%); }
.emo { margin-right: 0; margin-left: .25em; }

/* contacto: datos arriba, redes aparte */
.c-left { min-width: 0; }
.s-title { margin: clamp(28px, 3vw, 44px) 0 14px; color: var(--signal); }
.socials { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.socials a { display: flex; align-items: center; gap: 14px; padding: 14px 18px; border: 1px solid rgba(255,255,255,.28); border-radius: 18px; background: rgba(3,10,43,.45); transition: background .25s var(--out), color .25s var(--out), border-color .25s, transform .18s var(--out); }
.socials a:active { transform: scale(.98); }
.socials svg { flex: none; width: 26px; height: 26px; }
.socials span { display: flex; flex-direction: column; min-width: 0; font-weight: 500; line-height: 1.25; overflow-wrap: anywhere; }
.socials i { font-style: normal; color: var(--signal); transition: color .25s; }
@media (hover: hover) and (pointer: fine) { .socials a:hover { background: var(--white); color: var(--deep); border-color: var(--white); } .socials a:hover i { color: var(--beat); } body.chicle .socials a:hover { color: var(--pink-d); } body.chicle .socials a:hover i { color: var(--pink-d); } }
@media (max-width: 520px) { .socials { grid-template-columns: 1fr; } }