/* ==========================================================================
   WACCO · estilos por página
   ========================================================================== */

/* ---------- encabezado de páginas internas ---------- */
.page-head { padding: clamp(48px, 8vw, 112px) 0 clamp(40px, 6vw, 80px); display: grid; gap: 26px; }
.page-head h1 { max-width: 15ch; }
.page-head-row { display: flex; justify-content: space-between; align-items: end; gap: 24px 48px; flex-wrap: wrap; }
.filter-bar { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 28px; }
.final-cta .mega { font-size: clamp(44px, 8vw, 128px); max-width: 13ch; margin-inline: auto; }
.rich { display: grid; gap: 1.1em; font-size: clamp(16px, 1.2vw, 19px); color: var(--ink-2); max-width: 64ch; }
.rich strong { color: var(--ink); }
.rich a { color: var(--lima); border-bottom: 1px solid currentColor; }
.rich ul { display: grid; gap: .4em; padding-left: 1.2em; list-style: disc; }

/* ==========================================================================
   INICIO
   ========================================================================== */
.hero { padding: calc(var(--nav-h) + 28px) 12px 0; }
main:has(> .hero) { padding-top: 0; }
.hero-screen { position: relative; height: calc(100svh - var(--nav-h) - 40px); min-height: 620px; max-height: 1100px; border-radius: var(--r-xl); overflow: hidden; display: grid; place-items: center; background: #0b0b12; box-shadow: inset 0 0 0 1px rgba(255,255,255,.1), 0 40px 120px rgba(0,0,0,.5); }
.hero-reel video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 1.1s var(--ease); filter: saturate(1.15) contrast(1.05); }
.hero-reel video.on { opacity: 1; }
.hero-shade { position: absolute; inset: 0; background: radial-gradient(90% 70% at 50% 46%, rgba(7,7,11,.5), rgba(7,7,11,.9) 80%), linear-gradient(180deg, rgba(7,7,11,.35), transparent 30%, transparent 60%, rgba(7,7,11,.92)); }
.hero-inner { position: relative; z-index: 2; display: grid; justify-items: center; text-align: center; gap: clamp(16px, 2.4vw, 30px); width: min(100% - 32px, 1180px); margin-top: -3vh; }
.hero-we { width: clamp(210px, 26vw, 380px); height: auto; opacity: .96; animation: hero-in 1.2s var(--ease) both .1s; }
.hero-kicker { animation: hero-in 1s var(--ease) both; }
.hero-lead { max-width: 40ch; color: var(--ink); opacity: .86; animation: hero-in 1.2s var(--ease) both .55s; }
.hero-lead em { font-style: normal; font-family: var(--f-round); font-weight: 700; color: var(--lima); }
.hero-cta { justify-content: center; animation: hero-in 1.2s var(--ease) both .7s; }
@keyframes hero-in { from { opacity: 0; transform: translateY(24px); filter: blur(10px); } }

.jelly { position: relative; display: flex; gap: 2.16%; width: min(100%, 1060px); aspect-ratio: 2000 / 335; filter: drop-shadow(0 20px 60px rgba(139, 61, 255, .45)); user-select: none; -webkit-user-select: none; touch-action: manipulation; }
.jelly span { height: 100%; background: var(--holo); background-size: 600% 100%; animation: holo-shift 10s linear infinite, letter-in 1.1s var(--spring) both; -webkit-mask-image: url(../assets/brand/wacco-wordmark-blanco.webp); mask-image: url(../assets/brand/wacco-wordmark-blanco.webp); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; transform-origin: 50% 100%; cursor: pointer; will-change: transform; }
.jelly span:nth-child(1) { flex: 0 0 27.7%; -webkit-mask-size: 361.01% 100%; mask-size: 361.01% 100%; -webkit-mask-position: 0% 0; mask-position: 0% 0; animation-delay: 0s, .25s; }
.jelly span:nth-child(2) { flex: 0 0 16.75%; -webkit-mask-size: 597.01% 100%; mask-size: 597.01% 100%; -webkit-mask-position: 35.86% 0; mask-position: 35.86% 0; animation-delay: -.8s, .33s; }
.jelly span:nth-child(3) { flex: 0 0 15.15%; -webkit-mask-size: 660.07% 100%; mask-size: 660.07% 100%; -webkit-mask-position: 57.51% 0; mask-position: 57.51% 0; animation-delay: -1.6s, .41s; }
.jelly span:nth-child(4) { flex: 0 0 15.2%; -webkit-mask-size: 657.89% 100%; mask-size: 657.89% 100%; -webkit-mask-position: 77.95% 0; mask-position: 77.95% 0; animation-delay: -2.4s, .49s; }
.jelly span:nth-child(5) { flex: 0 0 16.55%; -webkit-mask-size: 604.23% 100%; mask-size: 604.23% 100%; -webkit-mask-position: 100% 0; mask-position: 100% 0; animation-delay: -3.2s, .57s; }
@keyframes letter-in { 0% { opacity: 0; transform: translateY(-60%) scale(.6, 1.4); } 55% { opacity: 1; transform: translateY(0) scale(1.25, .7); } 75% { transform: scale(.92, 1.1); } 100% { transform: none; } }
.jelly .drip { position: absolute; border-radius: 50% 50% 50% 50% / 40% 40% 60% 60%; background: var(--holo); background-size: 900% 100%; pointer-events: none; animation: drip 1.2s cubic-bezier(.5, 0, .8, .4) both; }
@keyframes drip { 0% { transform: translateY(0) scale(.3, .2); opacity: 1; } 25% { transform: translateY(8px) scale(1, 1.5); } 100% { transform: translateY(190px) scale(.5, 1.3); opacity: 0; } }
html[data-mode="serio"] .jelly span { background: var(--ink); animation: none; }

.hero-foot { position: absolute; z-index: 3; left: 24px; right: 24px; bottom: 20px; display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.reel-now { display: flex; align-items: center; gap: 10px; font-family: var(--f-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); min-width: 0; }
.reel-now span:last-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rec { width: 8px; height: 8px; border-radius: 50%; background: #ff3b4e; box-shadow: 0 0 10px #ff3b4e; animation: blink 1.4s ease-in-out infinite; flex: none; }
.reel-bars { display: flex; gap: 4px; flex: 1; max-width: 420px; }
.reel-bars i { flex: 1; height: 3px; border-radius: 3px; background: rgba(255,255,255,.18); overflow: hidden; }
.reel-bars i b { display: block; height: 100%; background: var(--ink); transform-origin: left; transform: scaleX(0); }
.reel-bars i.done b { transform: scaleX(1) !important; }
@media (max-width: 700px) { .hero-kicker::before { display: none; } .hero-kicker { font-size: 10.5px; } .hero { padding-inline: 8px; } .hero-screen { border-radius: 26px; min-height: 560px; } .reel-bars, .hero-foot .hint { display: none; } }

/* manifiesto */
.manifesto-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(40px, 6vw, 110px); align-items: end; }
.verbs { counter-reset: v; }
.verbs li { display: flex; align-items: baseline; gap: 18px; padding: 14px 0 16px; border-bottom: 1px solid var(--line); font-family: var(--f-display); font-weight: 800; font-size: clamp(30px, 4.2vw, 62px); letter-spacing: -.045em; line-height: 1; }
.verbs li:nth-child(1) { --d: 0s; } .verbs li:nth-child(2) { --d: .06s; } .verbs li:nth-child(3) { --d: .12s; } .verbs li:nth-child(4) { --d: .18s; } .verbs li:nth-child(5) { --d: .24s; }
.verbs li .mono { font-size: 11px; color: var(--lima); letter-spacing: .1em; font-weight: 400; }
.verbs li strong { font-weight: inherit; transition: transform .55s var(--spring), color .3s; display: inline-block; }
.verbs li:hover strong { transform: translateX(14px); color: var(--lima); }
.verbs li strong.wacky { font-size: 1.08em; letter-spacing: -.01em; }
.verbs li:hover strong.wacky { color: transparent; transform: translateX(14px) rotate(-4deg) scale(1.06); }
@media (max-width: 900px) { .manifesto-grid { grid-template-columns: 1fr; } }

/* cifras */
.stats-sec { padding-top: 0 !important; }
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.stat { padding: clamp(22px, 2.6vw, 34px); display: grid; gap: 12px; align-content: space-between; min-height: 200px; }
.stat strong { font-family: var(--f-display); font-weight: 800; font-size: clamp(46px, 6vw, 92px); letter-spacing: -.05em; line-height: .9; }
.stat:first-child strong, .stat:nth-child(2) strong { background: linear-gradient(180deg, #fff 30%, rgba(255,255,255,.55)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.stat span { color: var(--ink-2); font-size: 14px; line-height: 1.4; max-width: 24ch; }
@media (max-width: 900px) { .stats { grid-template-columns: 1fr 1fr; } }

/* ---------- tarjetas de proyecto (coleccionables) ---------- */
.feat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.feat-grid .pcard--big { grid-column: span 2; grid-row: span 2; }
.feat-grid .pcard--big .pcard-media { aspect-ratio: auto; flex: 1; min-height: 340px; }
.feat-grid .pcard--big h3 { font-size: clamp(24px, 2.4vw, 36px); }
.proj-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 330px), 1fr)); gap: 16px; transition: opacity .18s, filter .18s; }
.proj-grid.swap { opacity: 0; filter: blur(6px); }
.pcard { position: relative; display: flex; flex-direction: column; border-radius: var(--r-lg); background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.015)); box-shadow: inset 0 0 0 1px var(--line), 0 10px 40px rgba(0,0,0,.25); transform: perspective(1000px) rotateX(var(--rx, 0)) rotateY(var(--ry, 0)); transition: transform .7s var(--ease), box-shadow .35s, translate .9s var(--ease), opacity .9s var(--ease), filter .9s var(--ease); isolation: isolate; }
.pcard.tilt { transition: transform .12s linear, box-shadow .3s, translate .9s var(--ease), opacity .9s var(--ease), filter .9s var(--ease); box-shadow: inset 0 0 0 1px var(--line-2), 0 30px 70px rgba(0,0,0,.45); z-index: 2; }
.pcard-media { position: relative; margin: 8px; border-radius: 22px; overflow: hidden; aspect-ratio: 16 / 11; background: var(--bg-3); }
.pcard-media img, .pcard-media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: scale 1s var(--ease), opacity .45s; }
.pcard-media video { opacity: 0; }
.pcard-media video.on { opacity: 1; }
.pcard:hover .pcard-media img { scale: 1.06; }
.pcard-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.25), transparent 30%); pointer-events: none; }
.pcard-foil { position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: 0; mix-blend-mode: color-dodge; transition: opacity .35s;
  background: radial-gradient(circle at var(--mx, 50%) var(--my, 50%), rgba(255,255,255,.55), transparent 42%),
              linear-gradient(115deg, transparent 18%, rgba(215,245,42,.45) 32%, rgba(46,230,255,.45) 42%, rgba(139,61,255,.45) 52%, rgba(226,59,170,.45) 62%, transparent 78%);
  background-size: 100% 100%, 260% 260%; background-position: center, var(--mx, 50%) var(--my, 50%); }
.pcard.tilt .pcard-foil { opacity: .75; }
.pcard-cat { position: absolute; z-index: 3; top: 12px; left: 12px; background: rgba(10,10,16,.55); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); color: var(--ink); }
.pcard-cat .ico { width: 14px; height: 14px; color: var(--lima); }
.pcard-play, .tv-play { position: absolute; z-index: 3; top: 12px; right: 12px; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: rgba(10,10,16,.5); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: inset 0 0 0 1px rgba(255,255,255,.2); }
.pcard-play .ico, .tv-play .ico { width: 14px; height: 14px; margin-left: 2px; }
.pcard-body { position: relative; display: grid; gap: 10px; padding: 12px 22px 22px; }
.pcard-body h3 { padding-right: 44px; }
.pcard-body .mono { margin-top: 6px; font-size: 11px; }
.pcard-sum { color: var(--ink-2); font-size: 14.5px; line-height: 1.5; }
.pcard-go { position: absolute; top: 10px; right: 18px; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; box-shadow: inset 0 0 0 1px var(--line-2); transition: background .3s, color .3s, transform .5s var(--spring); }
.pcard-go .ico { width: 16px; height: 16px; }
.pcard:hover .pcard-go { background: var(--lima); color: #000; transform: rotate(45deg); box-shadow: none; }
@media (max-width: 900px) { .feat-grid { grid-template-columns: 1fr; } .feat-grid .pcard--big { grid-column: auto; grid-row: auto; } .feat-grid .pcard--big .pcard-media { aspect-ratio: 16 / 11; min-height: 0; } }

/* ---------- WACCO TV ---------- */
.tv-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.tv-item { position: relative; overflow: hidden; border-radius: 24px; aspect-ratio: 4 / 5; text-align: left; }
.tv-grid:not(.local) .tv-item:not(.tall) { grid-column: span 2; aspect-ratio: 16 / 9; }
.tv-item img, .tv-item video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: scale .9s var(--ease), opacity .4s; }
.tv-item video { opacity: 0; } .tv-item video.on { opacity: 1; }
.tv-item:hover img { scale: 1.06; }
.tv-item::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 45%, rgba(0,0,0,.8)); pointer-events: none; }
.tv-item .tv-play { top: 50%; left: 50%; right: auto; translate: -50% -50%; width: 58px; height: 58px; transition: transform .4s var(--spring), background .3s; }
.tv-item .tv-play .ico { width: 20px; height: 20px; }
.tv-item:hover .tv-play { transform: scale(1.15); background: var(--lima); color: #000; }
.tv-meta { position: absolute; z-index: 3; left: 14px; right: 14px; bottom: 14px; display: grid; gap: 8px; justify-items: start; }
.tv-meta strong { font-family: var(--f-display); font-weight: 600; font-size: 15px; letter-spacing: -.02em; line-height: 1.2; }
.tv-meta .chip { background: rgba(10,10,16,.55); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.tv-meta .chip .ico { width: 14px; height: 14px; }
.tv-tt { position: absolute; inset: 0; display: grid; place-items: center; background: linear-gradient(135deg, #111, #25f4ee22, #fe2c5522); }
.tv-tt .ico { width: 48px; height: 48px; }
.tv-item.playing { aspect-ratio: 9 / 16; }
.tv-grid:not(.local) .tv-item.playing:not(.tall) { aspect-ratio: 16 / 9; }
.tv-item.playing::after { display: none; }
.tv-item iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
@media (max-width: 900px) { .tv-grid { grid-template-columns: 1fr 1fr; } }

/* ---------- tecnología (marquesina) ---------- */
.tech-rows { display: grid; gap: 14px; }
.tech-chip { display: inline-flex; align-items: center; gap: 12px; height: 60px; padding: 0 26px 0 20px; border-radius: 999px; font-weight: 600; font-size: 16px; white-space: nowrap; }
.tech-chip .ico { color: var(--lima); }
.tech-sec .marquee:nth-child(2) .tech-chip .ico { color: var(--magenta); }

/* ---------- novedades ---------- */
.news-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.ncard { overflow: hidden; display: flex; flex-direction: column; }
.ncard-media { display: block; margin: 8px; border-radius: 20px; overflow: hidden; aspect-ratio: 16 / 10; background: var(--bg-3); }
.ncard-media img { width: 100%; height: 100%; object-fit: cover; transition: scale .8s var(--ease); }
.ncard:hover .ncard-media img { scale: 1.05; }
.ncard-art { display: block; width: 100%; height: 100%; background: var(--holo); background-size: 300% 100%; animation: holo-shift 8s linear infinite; }
.ncard-body { padding: 12px 22px 24px; display: grid; gap: 10px; }
.ncard-body .mono b { color: var(--lima); font-weight: 500; }
.ncard-more summary { cursor: pointer; font-weight: 600; color: var(--ink); list-style: none; display: inline-flex; gap: 8px; align-items: center; }
.ncard-more summary::after { content: "+"; font-family: var(--f-mono); color: var(--lima); }
.ncard-more[open] summary::after { content: "−"; }
.ncard-more .rich { margin-top: 12px; font-size: 15px; }
@media (max-width: 900px) { .news-grid { grid-template-columns: 1fr; } }

/* ---------- marcas ---------- */
.brands-sec .mono { margin-bottom: 28px; }
.brands span { font-family: var(--f-display); font-weight: 800; font-size: clamp(40px, 6.4vw, 104px); letter-spacing: -.04em; line-height: 1.1; color: transparent; -webkit-text-stroke: 1.4px rgba(255,255,255,.35); white-space: nowrap; transition: color .3s, -webkit-text-stroke-color .3s; }
.brands span:hover { color: var(--ink); -webkit-text-stroke-color: transparent; }
.brands i { font-style: normal; color: var(--lima); font-size: clamp(20px, 2.4vw, 36px); align-self: center; }
.brands > div { align-items: center; }

/* ==========================================================================
   ESTUDIO
   ========================================================================== */
.collage-sec { padding-top: 0 !important; }
.collage { display: grid; grid-template-columns: repeat(6, 1fr); grid-auto-rows: clamp(120px, 15vw, 220px); gap: 14px; }
.collage figure { position: relative; margin: 0; border-radius: 24px; }
.collage figure img { width: 100%; height: 100%; object-fit: cover; transition: scale 1s var(--ease); }
.collage figure:hover img { scale: 1.05; }
.collage figcaption { position: absolute; left: 12px; bottom: 12px; font-size: 12px; padding: 6px 12px; border-radius: 999px; background: rgba(10,10,16,.55); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.collage .c0 { grid-column: 1 / 4; grid-row: span 2; }
.collage .c1 { grid-column: 4 / 6; }
.collage .c2 { grid-column: 6 / 7; grid-row: span 2; }
.collage .c3 { grid-column: 4 / 5; }
.collage .c4 { grid-column: 5 / 6; }
@media (max-width: 800px) { .collage { grid-template-columns: 1fr 1fr; grid-auto-rows: 160px; } .collage figure { grid-column: auto !important; grid-row: auto !important; } .collage .c0 { grid-column: 1 / -1 !important; grid-row: span 2 !important; } }

.steps { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; position: relative; }
.step { padding: 24px; display: grid; gap: 14px; align-content: start; min-height: 280px; }
.step-top { display: flex; justify-content: space-between; align-items: center; }
.step-n { font-family: var(--f-display); font-weight: 900; font-size: 44px; letter-spacing: -.04em; color: transparent; -webkit-text-stroke: 1.3px rgba(255,255,255,.35); }
.step:hover .step-n { -webkit-text-stroke-color: var(--lima); }
.step h3.wacky { font-size: 30px; }
.step p { font-size: 14.5px; }
@media (max-width: 1100px) { .steps { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .steps { grid-template-columns: 1fr; } .step { min-height: 0; } }

.lines { border-top: 1px solid var(--line); }
.line-row { position: relative; display: grid; grid-template-columns: 60px 1.1fr 1.6fr auto; gap: 24px; align-items: center; padding: clamp(24px, 3vw, 40px) 12px; border-bottom: 1px solid var(--line); transition: background .35s, padding .5s var(--ease); border-radius: 18px; }
.line-row:hover { background: rgba(255,255,255,.035); padding-inline: 24px; }
.line-name { font-size: clamp(26px, 3.2vw, 48px); font-weight: 800; letter-spacing: -.04em; }
.line-row:hover .line-name { color: var(--lima); }
.line-peek { position: absolute; right: 18%; top: 50%; width: 220px; aspect-ratio: 4 / 3; border-radius: 16px; overflow: hidden; opacity: 0; transform: translateY(-50%) rotate(-6deg) scale(.8); transition: opacity .35s, transform .6s var(--spring); pointer-events: none; box-shadow: 0 30px 60px rgba(0,0,0,.5); z-index: 2; }
.line-peek img { width: 100%; height: 100%; object-fit: cover; }
.line-row:hover .line-peek { opacity: 1; transform: translateY(-50%) rotate(4deg) scale(1); }
@media (max-width: 800px) { .line-row { grid-template-columns: 1fr; gap: 10px; } .line-peek { display: none; } }

.values { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.value { padding: 26px; display: grid; gap: 14px; align-content: start; }
.value p { font-size: 14.5px; }
@media (max-width: 1000px) { .values { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .values { grid-template-columns: 1fr; } }

/* ==========================================================================
   HISTORIA · nivel de plataformas
   ========================================================================== */
.level { position: relative; }
.level-sticky { position: sticky; top: 0; height: 100svh; overflow: hidden; display: grid; grid-template-rows: auto 1fr auto; }
.level-hud { display: flex; justify-content: space-between; gap: 12px; padding: calc(var(--nav-h) + 30px) var(--gutter) 0; font-family: var(--f-pixel); font-size: clamp(9px, 1vw, 12px); text-transform: uppercase; }
.level-hud small { display: block; font-size: .8em; color: var(--ink-3); margin-bottom: 8px; }
.level-hud b { font-weight: 400; color: var(--ink); }
.level-hud #coins { color: var(--amarillo); }
.level-world { position: relative; overflow: hidden; }
.level-track { position: absolute; left: 0; top: 0; bottom: 0; display: flex; align-items: stretch; padding: 0 34vw 0 40vw; width: max-content; will-change: transform; }
.lvl-deco { position: absolute; inset: 0 0 64px; pointer-events: none; }
.cloud { position: absolute; left: var(--x); top: var(--y); width: calc(150px * var(--s)); height: calc(46px * var(--s)); border-radius: 999px; background: rgba(255,255,255,.05); box-shadow: inset 0 1px 0 rgba(255,255,255,.14); }
.cloud::before, .cloud::after { content: ""; position: absolute; border-radius: 50%; background: inherit; box-shadow: inherit; }
.cloud::before { width: 42%; aspect-ratio: 1; left: 18%; bottom: 40%; }
.cloud::after { width: 30%; aspect-ratio: 1; left: 50%; bottom: 50%; }
.lvl-start { position: absolute; left: 12vw; bottom: 64px; display: grid; gap: 8px; padding: 16px 18px 20px; border-left: 4px solid var(--lima); font-family: var(--f-pixel); }
.lvl-start .mono { font-family: var(--f-pixel); font-size: 10px; color: var(--ink-3); letter-spacing: 0; }
.lvl-start b { font-weight: 400; font-size: 18px; color: var(--lima); }
.hito { position: relative; width: min(440px, 76vw); margin-right: clamp(140px, 16vw, 260px); display: flex; flex-direction: column; justify-content: flex-end; padding-bottom: 236px; }
.hito-card { overflow: hidden; border-radius: 24px; opacity: .28; filter: grayscale(1) blur(1px); transform: translateY(24px) scale(.95); transform-origin: 30px 100%; transition: opacity .6s, filter .6s, transform .8s var(--spring); }
.hito.on .hito-card { opacity: 1; filter: none; transform: none; }
.hito-img { margin: 8px 8px 0; border-radius: 18px; overflow: hidden; aspect-ratio: 16 / 8; max-height: 26vh; }
.hito-img img { width: 100%; height: 100%; object-fit: cover; }
.hito-body { padding: 16px 22px 22px; display: grid; gap: 8px; }
.hito-year { font-family: var(--f-display); font-weight: 900; font-size: clamp(40px, 4.4vw, 64px); letter-spacing: -.05em; line-height: .9; color: transparent; -webkit-text-stroke: 1.4px rgba(255,255,255,.5); }
.hito.on .hito-year { background: var(--holo); background-size: 250% 100%; -webkit-background-clip: text; background-clip: text; -webkit-text-stroke: 0; animation: holo-shift 6s linear infinite; }
.hito-body p { color: var(--ink-2); font-size: 14.5px; line-height: 1.5; }
.qblock { position: absolute; left: 28px; bottom: 156px; width: 56px; height: 56px; display: grid; place-items: center; font-family: var(--f-pixel); font-size: 22px; color: #6b3d00; background: #ffc93c;
  box-shadow: inset -5px -5px 0 rgba(0,0,0,.22), inset 5px 5px 0 rgba(255,255,255,.4), 0 0 0 3px #6b3d00, 0 0 30px rgba(255,201,60,.35);
  background-image: radial-gradient(circle at 8px 8px, #6b3d00 2px, transparent 2.5px), radial-gradient(circle at calc(100% - 8px) 8px, #6b3d00 2px, transparent 2.5px), radial-gradient(circle at 8px calc(100% - 8px), #6b3d00 2px, transparent 2.5px), radial-gradient(circle at calc(100% - 8px) calc(100% - 8px), #6b3d00 2px, transparent 2.5px);
  animation: qglow 1.2s steps(2) infinite; }
.qblock span { translate: 1px 1px; }
@keyframes qglow { 50% { filter: brightness(1.15); } }
.qblock.used { background-color: #4b3a2c; color: transparent; animation: none; box-shadow: inset -5px -5px 0 rgba(0,0,0,.3), inset 5px 5px 0 rgba(255,255,255,.1), 0 0 0 3px #231a12; }
.qblock.bump { animation: bump .28s var(--ease); }
@keyframes bump { 40% { transform: translateY(-14px); } }
.coin { position: absolute; left: 50%; top: -6px; width: 24px; height: 30px; margin-left: -12px; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #fff6c9, #ffc93c 45%, #d99a00); box-shadow: inset -3px 0 0 #b07a00; animation: coin .75s ease-out forwards; }
@keyframes coin { 0% { transform: translateY(0) scaleX(1); } 20% { transform: translateY(-50px) scaleX(.2); } 40% { transform: translateY(-86px) scaleX(1); } 60% { transform: translateY(-96px) scaleX(.2); } 100% { transform: translateY(-60px) scaleX(1); opacity: 0; } }
.lvl-flag { position: relative; width: min(520px, 80vw); display: flex; align-items: flex-end; gap: 40px; padding-bottom: 64px; }
.pole { width: 8px; height: min(52vh, 420px); background: linear-gradient(90deg, #fff, #aaa); border-radius: 4px; position: relative; flex: none; }
.pole::before { content: ""; position: absolute; top: -14px; left: 50%; width: 22px; height: 22px; margin-left: -11px; border-radius: 50%; background: var(--lima); box-shadow: 0 0 20px var(--lima); }
.flag { position: absolute; left: 8px; top: 20px; width: 90px; height: 60px; background: var(--lima); clip-path: polygon(0 0, 100% 50%, 0 100%); animation: flag 1.4s ease-in-out infinite; transform-origin: left; }
@keyframes flag { 50% { transform: scaleX(.86) skewY(3deg); } }
.lvl-end { padding: 26px; display: grid; gap: 10px; justify-items: start; margin-bottom: 20px; }
.lvl-end b { font-family: var(--f-pixel); font-weight: 400; font-size: 14px; color: var(--lima); line-height: 1.5; }
.lvl-end span { color: var(--ink-2); }
.ground { position: absolute; left: 0; right: 0; bottom: 0; height: 64px; background: linear-gradient(var(--lima), var(--lima)) top / 100% 4px no-repeat, linear-gradient(rgba(215,245,42,.25), rgba(215,245,42,.25)) 0 4px / 100% 2px no-repeat, repeating-linear-gradient(90deg, transparent 0 46px, rgba(255,255,255,.06) 46px 48px), repeating-linear-gradient(0deg, transparent 0 18px, rgba(255,255,255,.05) 18px 20px), linear-gradient(180deg, #1a1433, #0d0a1c); }
.runner { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; image-rendering: pixelated; z-index: 3; }
.level-progress { margin: 18px var(--gutter) 24px; height: 3px; border-radius: 3px; background: rgba(255,255,255,.1); overflow: hidden; }
.level-progress i { display: block; height: 100%; background: var(--holo); background-size: 200% 100%; transform-origin: left; transform: scaleX(0); }
@media (max-height: 760px) { .hito-img { display: none; } }
@media (max-width: 700px) { .level-hud { padding-top: calc(var(--nav-h) + 22px); } .level-hud > div:nth-child(3) { display: none; } .hito { padding-bottom: 226px; } }

/* ==========================================================================
   PROYECTO (detalle)
   ========================================================================== */
.proj-head { padding-bottom: clamp(28px, 4vw, 48px); }
.proj-head h1 { max-width: 18ch; font-size: clamp(40px, 6.6vw, 104px); }
.crumbs a { color: var(--ink-2); } .crumbs a:hover { color: var(--lima); }
.proj-meta { display: flex; flex-wrap: wrap; gap: 14px 40px; }
.proj-meta span { display: grid; gap: 4px; font-weight: 600; }
.proj-meta span small { font-size: 10.5px; }
.proj-meta .ico { display: inline; width: 16px; height: 16px; vertical-align: -3px; color: var(--lima); }
.proj-hero { padding: 8px; border-radius: var(--r-xl); }
.proj-hero > video, .proj-hero > img { width: 100%; border-radius: 28px; aspect-ratio: 16 / 9; object-fit: cover; background: #000; }
.proj-hero > video { object-fit: contain; }
.proj-hero.tall { width: min(100%, 560px); margin-inline: auto; }
.proj-hero.tall > video, .proj-hero.tall > img { aspect-ratio: 9 / 14; }
.proj-body { display: grid; grid-template-columns: 1fr 380px; gap: clamp(32px, 5vw, 80px); align-items: start; }
.proj-sum { font-family: var(--f-display); font-weight: 600; font-size: clamp(24px, 2.6vw, 38px); letter-spacing: -.03em; line-height: 1.15; max-width: 24ch; }
.spec { position: sticky; top: calc(var(--nav-h) + 40px); padding: 26px; display: grid; gap: 16px; }
.spec h4 { font-weight: 400; }
.spec dl { display: grid; grid-template-columns: auto 1fr; gap: 10px 18px; margin: 0; padding-bottom: 6px; border-bottom: 1px solid var(--line); }
.spec dt { color: var(--ink-3); font-size: 14px; }
.spec dd { margin: 0; font-weight: 600; font-size: 14px; }
.yt { padding: 8px; border-radius: 28px; }
.yt iframe { width: 100%; aspect-ratio: 16 / 9; border: 0; border-radius: 22px; }
.proj-gallery { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-flow: dense; gap: 12px; }
.pg-item { position: relative; overflow: hidden; border-radius: 20px; aspect-ratio: 4 / 3; background: var(--bg-3); }
.pg-item.tall { grid-row: span 2; aspect-ratio: auto; }
.pg-item img, .pg-item video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: scale .9s var(--ease), opacity .4s; }
.pg-item video { opacity: 0; } .pg-item video.on { opacity: 1; }
.pg-item:hover img { scale: 1.05; }
.pg-item .tv-play { top: 50%; left: 50%; right: auto; translate: -50% -50%; }
.proj-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.proj-nav a { padding: 26px 28px; display: grid; gap: 8px; border-radius: 24px; transition: transform .5s var(--spring); }
.proj-nav a:last-child { text-align: right; }
.proj-nav a:hover { transform: scale(1.02); }
.proj-nav strong { font-family: var(--f-display); font-weight: 600; font-size: clamp(18px, 2vw, 26px); letter-spacing: -.02em; }
.proj-grid.three { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 980px) { .proj-body { grid-template-columns: 1fr; } .spec { position: static; } .proj-gallery { grid-template-columns: 1fr 1fr; } .proj-grid.three { grid-template-columns: 1fr; } }

/* ==========================================================================
   FOTOTECA · Pac-Man
   ========================================================================== */
.gallery { position: relative; min-height: 400px; }
.ph { position: absolute; overflow: hidden; border-radius: 14px; background: var(--bg-3); transition: translate .9s var(--ease), opacity .9s var(--ease), filter .9s var(--ease), box-shadow .3s; }
.ph img { width: 100%; height: 100%; object-fit: cover; transition: scale .9s var(--ease); }
.ph:hover { box-shadow: 0 0 0 2px var(--lima), 0 20px 50px rgba(0,0,0,.5); z-index: 2; }
.ph:hover img { scale: 1.05; }
.ph-cap { position: absolute; left: 10px; bottom: 10px; right: 10px; width: max-content; max-width: calc(100% - 20px); font-size: 12px; padding: 6px 12px; border-radius: 999px; background: rgba(10,10,16,.6); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); opacity: 0; translate: 0 8px; transition: opacity .3s, translate .4s var(--ease); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ph:hover .ph-cap { opacity: 1; translate: 0 0; }
.pac-layer { position: fixed; inset: 0; z-index: 4; pointer-events: none; }
@property --m { syntax: "<angle>"; inherits: false; initial-value: 35deg; }
.pacman { position: fixed; left: 0; top: 0; z-index: 95; width: 30px; height: 30px; border-radius: 50%; pointer-events: none; opacity: 0; transition: opacity .2s;
  background: conic-gradient(from calc(90deg + var(--m)), #ffd84a calc(360deg - 2 * var(--m)), transparent 0); animation: chomp .22s linear infinite alternate; filter: drop-shadow(0 0 10px rgba(255,216,74,.55)); }
.pacman::after { content: ""; position: absolute; left: 15px; top: 6px; width: 4px; height: 4px; border-radius: 50%; background: #111; }
@keyframes chomp { from { --m: 3deg; } to { --m: 42deg; } }
body.pac-on .pacman { opacity: 1; }
body.pac-on, body.pac-on * { cursor: none !important; }
.pacman.hurt { animation: chomp .22s linear infinite alternate, pac-hurt .6s ease; }
@keyframes pac-hurt { 30% { filter: drop-shadow(0 0 16px #e23baa) brightness(1.4) hue-rotate(-60deg); scale: .6; } }
.pac-hud { position: fixed; z-index: 55; right: 20px; bottom: 20px; display: flex; align-items: center; gap: 12px; padding: 10px 16px; border-radius: 999px; font-family: var(--f-pixel); font-size: 11px; opacity: 0; translate: 0 20px; transition: opacity .5s, translate .6s var(--spring); }
.pac-hud.show { opacity: 1; translate: 0 0; }
.pac-hud b { font-weight: 400; color: #ffd84a; }
.pac-hud small { font-family: var(--f-mono); font-size: 11px; color: var(--ink-3); }
.pac-mini { width: 16px; height: 16px; border-radius: 50%; background: conic-gradient(from 125deg, #ffd84a 290deg, transparent 0); }
@media (hover: none) { .pac-hud small { display: none; } }
html[data-mode="serio"] .pacman, html[data-mode="serio"] .pac-layer { display: none; }

/* ==========================================================================
   TECNOLOGÍA
   ========================================================================== */
.tgroup { display: grid; grid-template-columns: minmax(200px, 300px) 1fr; gap: clamp(24px, 4vw, 64px); padding: clamp(32px, 5vw, 64px) 0; border-top: 1px solid var(--line); }
.tgroup-head { position: sticky; top: calc(var(--nav-h) + 40px); align-self: start; display: grid; gap: 12px; }
.tgroup-head h2 { font-size: clamp(34px, 4.4vw, 64px); }
.tgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.tcard { padding: 28px; display: grid; gap: 14px; align-content: start; transition: transform .5s var(--spring); }
.tcard:hover { transform: translateY(-4px); }
.tcard:hover .ico-box { background: var(--lima); color: #000; }
.tcard .ico-box { transition: background .3s, color .3s; }
.tcard p { font-size: 14.5px; }
.tcard-led { position: absolute; top: 24px; right: 24px; width: 7px; height: 7px; border-radius: 50%; background: var(--lima); box-shadow: 0 0 12px var(--lima); animation: led 3s ease-in-out infinite; }
.tcard:nth-child(2n) .tcard-led { animation-delay: -1.2s; background: var(--cian); box-shadow: 0 0 12px var(--cian); }
.tcard:nth-child(3n) .tcard-led { animation-delay: -2.1s; }
@keyframes led { 0%, 100% { opacity: 1; } 45% { opacity: .2; } 50% { opacity: 1; } 55% { opacity: .3; } }
@media (max-width: 900px) { .tgroup { grid-template-columns: 1fr; } .tgroup-head { position: static; } }
@media (max-width: 600px) { .tgrid { grid-template-columns: 1fr; } }

/* ==========================================================================
   CONTACTO
   ========================================================================== */
.contact-grid { grid-template-columns: 1fr 1.05fr; gap: clamp(32px, 5vw, 80px); align-items: start; }
.contact-info h1 { font-size: clamp(42px, 6.4vw, 100px); }
.contact-list { display: grid; }
.contact-list li { display: flex; align-items: center; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.contact-list li small { display: block; font-size: 10.5px; margin-bottom: 2px; }
.contact-list li a { font-weight: 600; }
.contact-list li a:hover { color: var(--lima); }
.contact-list .copy { margin-left: auto; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; color: var(--ink-2); box-shadow: inset 0 0 0 1px var(--line-2); transition: background .2s, color .2s; }
.contact-list .copy:hover { background: rgba(255,255,255,.08); color: var(--ink); }
.contact-list .copy .ico { width: 18px; height: 18px; }
.contact-list .socials { gap: 10px; border: 0; }
.contact-list .socials .ico-box:hover { background: var(--lima); color: #000; }
.contact-form { padding: clamp(22px, 3vw, 40px); border-radius: 32px; background: linear-gradient(180deg, rgba(26,26,38,.78), rgba(14,14,22,.72)); }
.form-step { display: grid; gap: 18px; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.field { display: grid; gap: 8px; border: 0; padding: 0; margin: 0; min-width: 0; }
.field > span, .field legend { font-family: var(--f-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); padding: 0; margin-bottom: 8px; }
.field input, .field textarea { width: 100%; height: 52px; padding: 0 16px; border: 0; border-radius: 14px; background: rgba(255,255,255,.05); box-shadow: inset 0 0 0 1px var(--line-2); outline: none; transition: box-shadow .25s, background .25s; }
.field textarea { height: auto; padding: 14px 16px; resize: vertical; min-height: 130px; line-height: 1.5; }
.field input:focus, .field textarea:focus { box-shadow: inset 0 0 0 1.5px var(--lima); background: rgba(215,245,42,.04); }
.field input::placeholder, .field textarea::placeholder { color: var(--ink-3); }
.field input[type="date"] { color-scheme: dark; }
.choice { display: flex; flex-wrap: wrap; gap: 8px; }
.choice label { position: relative; }
.choice input { position: absolute; opacity: 0; pointer-events: none; }
.choice span { display: inline-flex; align-items: center; height: 42px; padding: 0 18px; border-radius: 999px; font-weight: 600; font-size: 14px; cursor: pointer; box-shadow: inset 0 0 0 1px var(--line-2); transition: background .25s, color .25s, transform .4s var(--spring); }
.choice span:hover { transform: scale(1.04); }
.choice input:checked + span { background: var(--lima); color: #000; box-shadow: none; }
.choice input:focus-visible + span { outline: 2px solid var(--lima); outline-offset: 3px; }
.wacky-sm { font-family: var(--f-round); font-size: 15px !important; }
.hp { position: absolute; left: -9999px; }
.form-foot { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; }
.form-msg { color: var(--magenta); letter-spacing: .05em; }
.shake { animation: shake .45s var(--ease); }
@keyframes shake { 20% { transform: translateX(-10px); } 40% { transform: translateX(8px); } 60% { transform: translateX(-5px); } 80% { transform: translateX(3px); } }
.form-done { display: grid; gap: 18px; justify-items: center; text-align: center; padding: 40px 10px; }
.form-done h2 { font-size: clamp(36px, 4.6vw, 64px); }
.done-badge { font-family: var(--f-pixel); font-size: 11px; color: #000; background: var(--lima); padding: 10px 14px; animation: blink 1s steps(2) 3; }
@media (max-width: 900px) { .contact-grid { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .field-row { grid-template-columns: 1fr; } }

/* ==========================================================================
   404
   ========================================================================== */
.e404 { justify-items: center; min-height: 70vh; align-content: center; }
.e404 h1 { max-width: 14ch; margin-inline: auto; }
.e404-code { font-family: var(--f-pixel); font-size: clamp(72px, 16vw, 200px); line-height: 1; background: var(--holo); background-size: 250% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: holo-shift 5s linear infinite; }
.e404-continue { font-family: var(--f-pixel); font-size: clamp(14px, 2vw, 22px); }
.e404-continue b { color: var(--lima); font-weight: 400; }
.e404.over .e404-continue { color: var(--magenta); animation: blink 1s steps(2) infinite; }