/* bitabyte: everything after the opening journey.
   Half the site (Archivo, paper, air, thin lines) and half the channel
   (serif italic with a marker, "// labels", ink borders with hard shadows,
   the character on its coloured circle and the colour of the day). */
@font-face{font-family:'Instrument Serif';src:url('/fonts/InstrumentSerif-Italic.woff2') format('woff2');font-style:italic;font-weight:400;font-display:swap}
@font-face{font-family:'JetBrains Mono';src:url('/fonts/JetBrainsMono.woff2') format('woff2');font-style:normal;font-weight:100 800;font-display:swap}
:root{
  --acento:#f5c518;
  --tinta:#111;--crema:#f1ede4;--blanco:#fff;
  --serif:'Instrument Serif',Georgia,serif;
  --mono:'JetBrains Mono',ui-monospace,monospace;
  --borde:2.5px solid var(--tinta);
  --sombra:6px 6px 0 var(--tinta);--sombra-s:4px 4px 0 var(--tinta);
  --bote:cubic-bezier(.34,1.56,.64,1);
  --gutter:clamp(22px,4.2vw,68px);
  --puntos:radial-gradient(#0000001a 1.2px,transparent 1.2px) 0 0/24px 24px;
  /* One warm paper for the whole site, journey included. */
  --paper:#f4efe5;--line:#dcd5c6;
}
/* Horizontal clipping lives on the wrapper, not on html/body: iOS 26 Safari only draws the page
   under its floating toolbar when the root is left alone (otherwise it fills a solid band). */
.page{overflow-x:clip}
/* No scrollbars on the right: the page still scrolls with wheel, touch and keys. */
html{scrollbar-width:none}
html::-webkit-scrollbar,body::-webkit-scrollbar{display:none}
.journey-progress{display:none}
.bb-noscript{max-width:640px;margin:80px auto;font-size:15px;line-height:1.6;text-align:center}

/* ── Header menu (populated by js/bitabyte/main.js) ───────────────────── */
.header-category-menu{display:block}
.header-category-options{width:min(320px,calc(100vw - 44px));padding:8px;border:var(--borde);border-radius:14px;background:var(--paper);box-shadow:var(--sombra);animation:menu-in 200ms var(--ease)}
.header-category-options a{display:flex;align-items:center;min-height:46px;padding:10px 12px;border-radius:8px;font-size:15px;letter-spacing:-.01em}
.header-category-options a[data-nav=home]{color:var(--muted);font-size:13px}
.header-category-options a[data-nav=bitabyte]{font-family:var(--mono);font-size:13px}
@media(hover:hover) and (pointer:fine){.header-category-options a:hover{background:var(--crema)}}

/* The journey's calls to action. */
.interior-title .explore-link{display:inline-flex;align-items:center;gap:14px;pointer-events:auto;margin-top:18px;min-height:44px;padding:10px 22px;border:var(--borde);border-radius:30px;background:var(--acento);color:var(--tinta);font-size:13px;font-weight:600;box-shadow:var(--sombra-s);transition:transform 220ms var(--ease),box-shadow 220ms}
@media(hover:hover) and (pointer:fine){.interior-title .explore-link:hover{transform:translate(-2px,-2px);box-shadow:var(--sombra)}}

/* ── Shared pieces ─────────────────────────────────────────────────────── */
.bb-tag{display:flex;align-items:center;gap:10px;margin:0 0 18px;font-family:var(--mono);font-size:13px;letter-spacing:.02em;color:var(--muted)}
.bb-tag span{font-weight:600;color:var(--tinta)}
.bb-marker{font-family:var(--serif);font-style:italic;font-weight:400;letter-spacing:-.01em;padding:0 .08em;background:linear-gradient(transparent 56%,var(--marker,var(--acento)) 56%,var(--marker,var(--acento)) 94%,transparent 94%);-webkit-box-decoration-break:clone;box-decoration-break:clone}
.bb-lead{max-width:560px;margin:22px 0 0;font-size:clamp(15px,1.3vw,18px);line-height:1.55;color:var(--muted)}
.bb-avatar{width:40px;height:40px;border:2px solid var(--tinta);border-radius:50%;background:#fdf8ef;image-rendering:pixelated;flex-shrink:0}
.bb-avatar-l{width:72px;height:72px;border-width:2.5px}
.bb-chip{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 18px;border:var(--borde);border-radius:30px;background:var(--blanco);color:var(--tinta);font-size:14px;font-weight:600;letter-spacing:-.01em;box-shadow:var(--sombra-s);transform:rotate(var(--gira,0deg));transition:transform 220ms var(--bote),box-shadow 220ms,background-color 200ms}
@media(hover:hover) and (pointer:fine){a.bb-chip:hover,button.bb-chip:hover{transform:rotate(0) translate(-2px,-2px);box-shadow:var(--sombra)}}
.bb-card{position:relative;border:var(--borde);border-radius:16px;background:var(--blanco);box-shadow:var(--sombra)}
.bb-label{display:block;margin:0 0 8px;font-family:var(--mono);font-size:12px;color:var(--muted)}
.bb-stamp{display:inline-grid;place-items:center;padding:10px 18px;border:3px solid currentColor;border-radius:8px;font-weight:800;font-size:clamp(18px,2vw,26px);letter-spacing:.04em;text-transform:uppercase;transform:rotate(-6deg);mix-blend-mode:multiply}

/* Reveal with the channel's bounce. */
[data-reveal]{opacity:0;transform:translateY(28px) scale(.98);transition:opacity 700ms var(--ease),transform 800ms var(--bote)}
[data-reveal].in{opacity:1;transform:none}
.flash{animation:flash 700ms var(--ease)}
@keyframes flash{0%{color:var(--tinta)}30%{color:color-mix(in srgb,var(--acento) 70%,var(--tinta))}100%{color:inherit}}

/* The character on its coloured circle, with the dotted ring. */
.bb-character{position:relative;display:grid;place-items:end center;margin:0;aspect-ratio:1;width:100%;max-width:440px}
.bb-aura{position:absolute;left:8%;right:8%;bottom:0;aspect-ratio:1;border-radius:50%;background:var(--aura)}
.bb-aura::after{content:'';position:absolute;inset:-14px;border:2px dashed #11111140;border-radius:50%;animation:spin 40s linear infinite}
.bb-character img{position:relative;width:86%;height:auto;margin-bottom:-1px;transform-origin:50% 100%;animation:breathe 4.5s ease-in-out infinite}
@keyframes breathe{0%,100%{transform:scale(1)}50%{transform:scale(1.012,1.022)}}
@keyframes spin{to{transform:rotate(360deg)}}

/* ── Section scaffolding ──────────────────────────────────────────────── */
.bb-intro,.bb-section{position:relative;width:100%;max-width:calc(1500px + 2 * var(--gutter));margin:0 auto;padding:clamp(80px,12vh,140px) var(--gutter)}
.bb-section[hidden]{display:none}
.bb-head{max-width:920px;margin:0 0 clamp(32px,5vh,56px)}
.bb-head h2,.bb-intro h2{margin:0;font-size:clamp(42px,6.4vw,100px);font-weight:320;line-height:1;letter-spacing:-.06em;font-stretch:92%;text-wrap:balance}
.bb-head h2 .bb-marker,.bb-intro h2 .bb-marker{font-size:1.08em;letter-spacing:-.02em}
.bb-section+.bb-section::before{content:'';position:absolute;top:0;left:var(--gutter);right:var(--gutter);border-top:1px solid var(--line)}

/* ── Intro ─────────────────────────────────────────────────────────────── */
.bb-intro{padding-top:clamp(100px,16vh,180px)}
.bb-intro-grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);align-items:end;gap:clamp(24px,4vw,64px)}
.bb-jump{display:flex;flex-wrap:wrap;gap:14px;margin-top:34px}
.bb-intro-art{position:relative;justify-self:center;width:100%;max-width:440px}
.bb-sticker{position:absolute;top:6%;right:0;display:grid;place-items:center;width:104px;height:104px;border:var(--borde);border-radius:50%;background:var(--blanco);box-shadow:var(--sombra-s);font-size:28px;font-weight:800;letter-spacing:-.05em;line-height:1;transform:rotate(10deg)}
.bb-sticker small{display:block;margin-top:-18px;font-family:var(--mono);font-size:10px;font-weight:500;letter-spacing:0}
@media(max-width:900px){.bb-intro-grid{grid-template-columns:1fr}.bb-intro-art{max-width:340px}}

/* ── Footer ────────────────────────────────────────────────────────────── */
.bb-footer{width:100%;max-width:calc(1500px + 2 * var(--gutter));margin:clamp(40px,8vh,80px) auto 0;padding:0 var(--gutter) 24px}
.bb-footer-card{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:24px;padding:clamp(24px,3vw,40px);border:var(--borde);border-radius:22px;background:var(--puntos),var(--crema);box-shadow:var(--sombra)}
.bb-footer-brand{display:flex;align-items:center;gap:18px}
.bb-footer-name{margin:0;font-size:clamp(34px,4vw,56px);font-weight:800;letter-spacing:-.06em;line-height:1}
.bb-footer-lema{margin:6px 0 0;font-family:var(--serif);font-style:italic;font-size:clamp(18px,1.8vw,24px)}
.bb-socials{display:flex;flex-wrap:wrap;gap:12px}
.bb-social{display:inline-flex;align-items:center;gap:10px;min-height:48px;padding:0 18px;border:var(--borde);border-radius:30px;background:var(--blanco);font-weight:600;box-shadow:var(--sombra-s);transition:transform 200ms var(--bote),box-shadow 200ms}
.bb-social small{font-family:var(--mono);font-weight:400;font-size:12px;color:var(--muted)}
.bb-social i{font-style:normal}
@media(hover:hover) and (pointer:fine){.bb-social:hover{transform:translate(-2px,-2px);box-shadow:var(--sombra)}}
.bb-footer-meta{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px 30px;margin-top:26px;padding-top:16px;border-top:1px solid var(--line);font-size:11px;line-height:1.6;color:var(--muted)}
.bb-footer-meta p{margin:0;max-width:620px}
.bb-footer-meta nav{display:flex;flex-wrap:wrap;gap:8px 20px}

/* ── 01 // partidos ───────────────────────────────────────────────────── */
.bb-note{margin:14px 0 0;font-size:12px;line-height:1.5;color:var(--muted)}
.bb-spectrum{padding:22px clamp(18px,3vw,34px) 20px;margin-bottom:clamp(34px,5vh,56px)}
.bb-spectrum-track{position:relative;height:96px;margin:6px 0 0;background:linear-gradient(90deg,#ef3e3624,#f1ede4 50%,#2ea3f224);border-radius:12px;border:1.5px solid var(--tinta)}
.bb-spectrum-track::after{content:'';position:absolute;left:50%;top:10px;bottom:10px;border-left:1.5px dashed #11111140}
.bb-spectrum-dot{position:absolute;left:var(--x);top:50%;display:grid;place-items:center;width:18px;height:18px;margin:-9px 0 0 -9px;border:2px solid var(--tinta);border-radius:50%;background:var(--c);transition:transform 200ms var(--bote)}
.bb-spectrum-dot.is-big{width:28px;height:28px;margin:-14px 0 0 -14px}
.bb-spectrum-dot span{position:absolute;white-space:nowrap;font-size:11px;font-weight:700;letter-spacing:-.01em;bottom:calc(100% + 4px)}
.bb-spectrum-dot.is-below span{bottom:auto;top:calc(100% + 4px)}
.bb-spectrum-dot:hover,.bb-spectrum-dot:focus-visible{transform:scale(1.25);z-index:2}
.bb-spectrum-ends{display:flex;justify-content:space-between;margin-top:8px;font-family:var(--mono);font-size:11px;color:var(--muted)}
.bb-parties{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:clamp(18px,2vw,28px)}
.bb-parties>li{transition-delay:var(--d)}
.bb-party{display:flex;flex-direction:column;gap:10px;height:100%;padding:22px 22px 20px;overflow:hidden;color:var(--tinta);transform:rotate(var(--gira));transition:transform 260ms var(--bote),box-shadow 260ms}
.bb-party-band{position:absolute;inset:0 0 auto;height:10px;background:var(--c);border-bottom:2px solid var(--tinta)}
.bb-party-top{display:flex;justify-content:space-between;align-items:center;margin-top:6px}
.bb-party-top .bb-label{margin:0}
.bb-party-guide{padding:3px 9px;border-radius:20px;background:var(--tinta);color:var(--blanco);font-size:10px;font-weight:700}
.bb-party-name{font-size:clamp(34px,3vw,46px);font-weight:800;letter-spacing:-.06em;line-height:.95}
.bb-party-cand{font-family:var(--serif);font-style:italic;font-size:21px;line-height:1.1}
.bb-party-frase{flex:1;font-size:14px;line-height:1.5;color:var(--ink-soft,#45473f)}
.bb-party-stats{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding-top:12px;border-top:1.5px dashed #11111130}
.bb-party-stats b{display:block;font-size:28px;font-weight:300;letter-spacing:-.05em;line-height:1;font-variant-numeric:tabular-nums;font-stretch:85%}
.bb-party-stats small{display:block;margin-top:4px;font-size:11px;color:var(--muted)}
.bb-party-go{align-self:flex-start;margin-top:4px;padding:6px 12px;border-radius:20px;background:var(--c);border:2px solid var(--tinta);font-size:12px;font-weight:700}
@media(hover:hover) and (pointer:fine){
  .bb-party:hover{transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translate(-3px,-3px);box-shadow:9px 9px 0 var(--tinta);transition:transform 120ms linear,box-shadow 260ms}
  .bb-party::after{content:'';position:absolute;inset:0;border-radius:inherit;background:radial-gradient(320px circle at var(--mx,50%) var(--my,0%),#ffffffb0,transparent 55%);opacity:0;transition:opacity 250ms;pointer-events:none}
  .bb-party:hover::after{opacity:1}
}

/* The sheet. */
.bb-dialog{width:min(1180px,calc(100vw - 24px));max-height:calc(100dvh - 24px);padding:0;border:var(--borde);border-radius:22px;background:var(--paper);color:var(--ink);box-shadow:10px 10px 0 var(--tinta);overflow:auto;overscroll-behavior:contain}
.bb-dialog::backdrop{background:#11111180;backdrop-filter:blur(3px)}
.bb-dialog[open]{animation:sheet-in 420ms var(--bote)}
@keyframes sheet-in{from{opacity:0;transform:translateY(40px) scale(.96)}}
.bb-sheet{padding:0 clamp(18px,3.4vw,48px) clamp(20px,3vw,36px)}
.bb-sheet-head{position:sticky;top:0;z-index:2;display:flex;justify-content:space-between;gap:18px;margin:0 calc(-1 * clamp(18px,3.4vw,48px));padding:clamp(20px,3vw,34px) clamp(18px,3.4vw,48px) 18px;background:var(--puntos),var(--crema);border-bottom:2px solid var(--tinta)}
.bb-sheet-head::before{content:'';position:absolute;inset:0 0 auto;height:10px;background:var(--c)}
.bb-sheet-head .bb-tag{margin:6px 0 10px}
.bb-sheet-head h3{margin:0;font-size:clamp(36px,5vw,72px);font-weight:320;letter-spacing:-.06em;line-height:1;outline:none}
.bb-sheet-full{margin:8px 0 0;font-size:13px;color:var(--muted)}
.bb-close{flex-shrink:0;width:48px;height:48px;border:var(--borde);border-radius:50%;background:var(--blanco);font-size:18px;cursor:pointer;box-shadow:var(--sombra-s)}
.bb-close:active{transform:translate(2px,2px);box-shadow:none}
.bb-sheet-grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,4fr);gap:clamp(20px,3vw,48px);padding-top:clamp(20px,3vw,34px)}
.bb-sheet-frase{margin:0 0 10px;font-family:var(--serif);font-style:italic;font-size:clamp(22px,2.2vw,30px);line-height:1.2}
.bb-sheet-frase .bb-label{font-style:normal}
.bb-topic{padding:18px 0;border-top:1px solid var(--line)}
.bb-topic h4{display:inline-block;margin:0 0 10px;padding:3px 10px;border-radius:6px;background:var(--c);border:2px solid var(--tinta);font-size:13px;font-weight:700;letter-spacing:.01em}
.bb-topic ul{margin:0;padding:0 0 0 20px;display:grid;gap:8px}
.bb-topic li,.bb-topic p{margin:0;font-size:15px;line-height:1.55}
.bb-topic li::marker{color:var(--muted)}
.bb-topic .is-empty{color:var(--muted);font-style:italic}
.bb-sheet-side{display:grid;align-content:start;gap:22px}
.bb-facts,.bb-think{padding:20px}
.bb-facts-big{margin:0;font-size:26px;font-weight:700;letter-spacing:-.04em;line-height:1.1}
.bb-facts-note{margin:6px 0 14px;font-size:13px;line-height:1.5;color:var(--muted)}
.bb-think{background:var(--puntos),#fffdf6;overflow:hidden}
.bb-think .bb-stamp{position:absolute;right:14px;top:12px;color:#d0342c;font-size:18px;padding:4px 12px}
.bb-think-title{margin:0 0 8px;font-size:22px;font-weight:800;letter-spacing:-.04em}
.bb-think p{margin:0 0 10px;font-size:14px;line-height:1.55}
.bb-think-q{font-family:var(--serif);font-style:italic;font-size:20px!important;line-height:1.25!important}
.bb-think-q a{display:inline-block;margin-top:6px;font-family:'Archivo',sans-serif;font-style:normal;font-size:12px;font-weight:600;text-decoration:underline;text-underline-offset:3px}
.bb-sheet-side .bb-character{max-width:300px;justify-self:center}
.bb-sheet-foot{margin-top:24px;padding-top:16px;border-top:2px solid var(--tinta);display:grid;gap:14px}
.bb-sources summary{cursor:pointer;font-family:var(--mono);font-size:12px}
.bb-sources ul{margin:10px 0 0;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:8px 16px;font-size:12px}
.bb-sources a{text-decoration:underline;text-underline-offset:3px;color:var(--muted)}
.bb-sheet-nav{display:flex;justify-content:space-between;gap:12px}
@media(max-width:860px){.bb-sheet-grid{grid-template-columns:1fr}.bb-sheet-side .bb-character{display:none}}
@media(max-width:640px){.bb-spectrum-dot span{font-size:9px}.bb-spectrum-dot:not(.is-big) span{display:none}}
/* Phones: the party sheet slides up from the bottom and leaves the page visible above it. */
@media(max-width:640px){
  .bb-dialog{overscroll-behavior:none;width:100vw;max-width:none;height:auto;max-height:88dvh;margin:auto 0 0;border:0;border-top:var(--borde);border-radius:24px 24px 0 0;box-shadow:0 -10px 30px #11111133;padding-bottom:env(safe-area-inset-bottom)}
  .bb-dialog[open]{animation:sheet-up 380ms cubic-bezier(.2,.9,.25,1)}
  .bb-dialog::backdrop{background:#11111166;backdrop-filter:blur(2px)}
  .bb-sheet-head{padding-top:30px;border-radius:24px 24px 0 0}
  .bb-sheet-head::before{border-radius:24px 24px 0 0;height:8px}
  .bb-sheet-head::after{content:'';position:absolute;top:15px;left:50%;width:42px;height:5px;margin-left:-21px;border-radius:3px;background:#11111140}
}
@keyframes sheet-up{from{transform:translateY(100%)}}

/* ── 02 // comparador ─────────────────────────────────────────────────── */
.bb-compare-head{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:24px}
.bb-compare-art .bb-character{width:clamp(150px,18vw,240px);margin-bottom:clamp(32px,5vh,56px)}
.bb-tabs{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:22px;scrollbar-width:none}
.bb-tabs::-webkit-scrollbar{display:none}
.bb-tabs .bb-chip{cursor:pointer;font:inherit;font-size:14px;font-weight:600}
.bb-tabs .bb-chip[aria-selected=true]{background:var(--acento);transform:rotate(0) translate(-2px,-2px);box-shadow:var(--sombra)}
.bb-compare-hint{margin:0 0 10px;font-family:var(--mono);font-size:12px;color:var(--muted)}
.bb-compare-hint span{display:inline-block;animation:nudge 2.4s var(--ease) infinite}
@keyframes nudge{0%,100%{transform:none}50%{transform:translateX(8px)}}
.bb-compare{list-style:none;margin:0 calc(-1 * var(--gutter));padding:6px var(--gutter) 18px;display:grid;grid-auto-flow:column;grid-auto-columns:minmax(250px,22%);gap:16px;overflow-x:auto;scroll-snap-type:x proximity;scroll-padding-inline:var(--gutter);scrollbar-width:none;cursor:grab;user-select:none}
.bb-compare::-webkit-scrollbar{display:none}
.bb-compare.is-grabbing{cursor:grabbing;scroll-snap-type:none}
.bb-compare.is-grabbing .bb-compare-card{pointer-events:none}
.bb-compare-card{scroll-snap-align:start;padding:18px 18px 16px;border-top:10px solid var(--c);box-shadow:var(--sombra-s)}
.bb-compare.swap .bb-compare-card{animation:pop-in 520ms var(--bote) both;animation-delay:calc(var(--i) * 35ms)}
@keyframes pop-in{from{opacity:0;transform:translateY(16px) scale(.94)}}
.bb-compare-name{display:inline-flex;gap:6px;margin-bottom:10px;font-size:22px;font-weight:800;letter-spacing:-.05em}
.bb-compare-name span{font-size:13px;font-weight:400;color:var(--muted)}
.bb-compare-card ul{margin:0;padding:0 0 0 18px;display:grid;gap:8px}
.bb-compare-card li{font-size:13.5px;line-height:1.5}
.bb-compare-card .is-empty{color:var(--muted);font-style:italic}
@media(max-width:760px){.bb-compare-head{grid-template-columns:1fr}.bb-compare-art{display:none}.bb-tabs{flex-wrap:nowrap;overflow-x:auto;padding:4px 8px 10px 2px;margin-inline:calc(-1 * var(--gutter));padding-inline:var(--gutter)}.bb-tabs .bb-chip{flex:0 0 auto}.bb-compare{grid-auto-columns:80%}}

/* ── 03 // encuestas y pactos ─────────────────────────────────────────── */
.bb-pacts-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(20px,3vw,40px);align-items:start}
.bb-polls{padding:22px}
.bb-polls ol{list-style:none;margin:6px 0 0;padding:0;display:grid;gap:9px}
.bb-polls li{display:grid;grid-template-columns:96px minmax(0,1fr) 60px;align-items:center;gap:12px;font-size:13px}
.bb-poll-name{font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bb-poll-bar{height:16px;border:1.5px solid var(--tinta);border-radius:5px;background:var(--crema);overflow:hidden}
.bb-poll-bar i{display:block;height:100%;width:0;background:var(--c);border-right:1.5px solid var(--tinta);transition:width 1100ms var(--bote)}
.in .bb-poll-bar i,.bb-polls.in .bb-poll-bar i{width:var(--w)}
.bb-polls li b{text-align:right;font-weight:500;font-variant-numeric:tabular-nums}
.bb-calc{padding:22px}
.bb-calc-top{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px}
.bb-calc-top .bb-label{margin:0}
.bb-switch{display:inline-flex;padding:3px;border:2px solid var(--tinta);border-radius:30px;background:var(--crema)}
.bb-switch button{min-height:36px;padding:0 14px;border:0;border-radius:30px;background:none;font:inherit;font-size:12px;font-weight:600;cursor:pointer}
.bb-switch button[aria-checked=true]{background:var(--tinta);color:var(--blanco)}
.bb-hemi{position:relative;margin:14px auto 0;max-width:620px}
.bb-hemi svg{display:block;width:100%;height:auto;overflow:visible}
.bb-seats circle{fill:#dcdad2;transition:fill 380ms var(--ease),transform 380ms var(--bote);transform-box:fill-box;transform-origin:center}
.bb-seats circle.on{stroke:var(--tinta);stroke-width:.007;animation:seat-pop 420ms var(--bote) both;animation-delay:calc(var(--k) * 1.4ms)}
@keyframes seat-pop{0%{transform:scale(.3)}60%{transform:scale(1.35)}}
.bb-hemi-center{position:absolute;left:50%;bottom:4%;transform:translateX(-50%);display:grid;justify-items:center}
.bb-calc-total{margin:0;display:grid;justify-items:center;line-height:1}
.bb-calc-total b{font-size:clamp(48px,7vw,88px);font-weight:250;letter-spacing:-.06em;font-variant-numeric:tabular-nums;font-stretch:80%}
.bb-calc-total span{font-family:var(--mono);font-size:12px;color:var(--muted)}
.bb-calc-stamp{position:absolute;top:-58%;white-space:nowrap;background:#ffffffd9}
.bb-calc-stamp.is-ok{color:#15a150}.bb-calc-stamp.is-no{color:#d0342c}
.bb-calc-stamp.drop{animation:stamp 420ms var(--bote)}
@keyframes stamp{from{opacity:0;transform:rotate(-6deg) scale(2.2)}}
.bb-meter{position:relative;height:14px;margin:18px 0 6px;border:2px solid var(--tinta);border-radius:8px;background:var(--crema)}
.bb-meter i{display:block;height:100%;width:0;border-radius:6px 0 0 6px;background:#9a9c92;transition:width 500ms var(--bote),background-color 300ms}
.bb-meter i.ok{background:var(--acento)}
.bb-meter span{position:absolute;top:-4px;bottom:-4px;border-left:2.5px solid var(--tinta);padding:20px 0 0 4px;font-family:var(--mono);font-size:10px}
.bb-presets{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:26px 0 14px}
.bb-presets .bb-label{margin:0 4px 0 0}
.bb-chip-s{min-height:34px;padding:0 12px;font:inherit;font-size:12px;font-weight:600;box-shadow:2px 2px 0 var(--tinta);cursor:pointer}
.bb-pick{display:flex;flex-wrap:wrap;gap:8px}
.bb-pill{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:0 14px 0 10px;border:1.5px solid var(--line);border-radius:30px;background:var(--paper);font:inherit;font-size:13px;cursor:pointer;transition:transform 200ms var(--bote),background-color 200ms,border-color 200ms}
.bb-pill i{width:12px;height:12px;border-radius:50%;background:var(--c);border:1.5px solid var(--tinta)}
.bb-pill b{font-weight:600;font-variant-numeric:tabular-nums}
.bb-pill[aria-pressed=true]{border:2px solid var(--tinta);background:var(--c);box-shadow:2px 2px 0 var(--tinta);transform:translate(-1px,-1px)}
.bb-pill:active{transform:scale(.95)}
@media(max-width:980px){.bb-pacts-grid{grid-template-columns:1fr}}

/* ── 04 // cómo votar ─────────────────────────────────────────────────── */
.bb-timeline{list-style:none;margin:0 0 clamp(36px,5vh,56px);padding:0 0 0 22px;position:relative;display:grid;gap:12px}
.bb-timeline::before{content:'';position:absolute;left:6px;top:8px;bottom:8px;border-left:2px dashed #11111140}
.bb-date{position:relative;display:grid;grid-template-columns:150px minmax(0,1fr) auto;align-items:center;gap:8px 24px;padding:16px 20px;border:1.5px solid var(--line);border-radius:14px;background:var(--blanco)}
.bb-date::before{content:'';position:absolute;left:-22px;top:50%;width:14px;height:14px;margin-top:-7px;border:2px solid var(--tinta);border-radius:50%;background:var(--paper)}
.bb-date time b{display:block;font-size:22px;font-weight:400;letter-spacing:-.03em;text-transform:capitalize}
.bb-date time span{font-family:var(--mono);font-size:11px;color:var(--muted)}
.bb-date h3{margin:0;font-size:17px;font-weight:600;letter-spacing:-.02em}
.bb-date p{margin:4px 0 0;font-size:13.5px;line-height:1.5;color:var(--muted)}
.bb-date p a{color:var(--tinta);text-decoration:underline;text-underline-offset:3px}
.bb-date.is-past{opacity:.5}
.bb-date.is-key::before{background:var(--acento)}
.bb-date.is-next{border:var(--borde);box-shadow:var(--sombra-s)}
.bb-date.is-next::before{background:var(--acento);transform:scale(1.3)}
.bb-date.is-final{border:var(--borde);background:var(--acento);box-shadow:var(--sombra)}
.bb-date.is-final p{color:var(--tinta)}
.bb-next-tag{padding:4px 10px;border-radius:20px;background:var(--tinta);color:var(--blanco);font-size:11px;font-weight:700;white-space:nowrap}
.bb-ways{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(18px,2vw,28px)}
.bb-way{padding:20px 22px 22px;transition-delay:var(--d)}
.bb-way-art .bb-character{width:130px;margin:-6px 0 16px}
.bb-way h3{margin:0 0 12px;font-size:30px;font-weight:800;letter-spacing:-.05em}
.bb-way ol{margin:0 0 18px;padding:0 0 0 20px;display:grid;gap:8px;font-size:14px;line-height:1.5}
.bb-way ol li::marker{font-family:var(--mono);font-weight:600}
.bb-ics{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px;margin-top:clamp(24px,4vh,40px);padding:18px 22px;background:var(--puntos),var(--crema)}
.bb-ics p{margin:0;font-size:16px}
.bb-ics .bb-chip{background:var(--acento)}
.bb-section .bb-note a{text-decoration:underline;text-underline-offset:3px}
@media(max-width:900px){.bb-ways{grid-template-columns:1fr}}
@media(max-width:640px){.bb-date{grid-template-columns:1fr;gap:6px}.bb-next-tag{justify-self:start}}

/* ── Entrada: the opening journey in the channel's style ──────────────── */
/* iOS 26 Safari tints its floating toolbar with the colour of any fixed/sticky element (or its layers)
   near the bottom edge and turns it into a solid band. So the sticky stage carries no colour at all:
   the dotted paper is painted by the tall .journey behind it, and the 3D scene fades out at the bottom
   with a mask instead of a coloured overlay. */
.journey{background:var(--puntos),var(--paper)}
.journey-stage{background:none}
header:before{background:linear-gradient(var(--paper) 72%,#f4efe500)}
.bb-logo{display:inline-flex;align-items:center;gap:10px}
.bb-logo img{width:38px;height:38px;border:2px solid var(--tinta);border-radius:50%;background:#fdf8ef;image-rendering:pixelated}
.bb-logo .bb-logo-name{font-size:23px;font-weight:800;letter-spacing:-.06em}
.logo .bb-logo-tag{margin:0;padding:3px 8px;border:2px solid var(--tinta);border-radius:20px;background:var(--acento);font-size:11px;font-weight:800;letter-spacing:0;line-height:1.2;vertical-align:middle;transform:rotate(-5deg);box-shadow:2px 2px 0 var(--tinta)}
.language-control select,.cal summary{border:2px solid var(--tinta);border-radius:30px;background:var(--blanco);box-shadow:3px 3px 0 var(--tinta)}
.language-control:focus-within{border-radius:30px}
.header-category-menu>summary{border:2px solid var(--tinta);border-radius:50%;background:var(--acento);color:var(--tinta);box-shadow:3px 3px 0 var(--tinta)}
.cal[open] summary,.header-category-menu[open]>summary{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--tinta)}
.menu{border:var(--borde);border-radius:14px;box-shadow:var(--sombra-s)}
@media(hover:hover) and (pointer:fine){.cal summary:hover,.language-control select:hover{background:var(--tinta);border-color:var(--tinta)}.header-category-menu>summary:hover{background:var(--acento);transform:translate(-1px,-1px);box-shadow:4px 4px 0 var(--tinta)}}

.journey-intro .eyebrow,.interior-title .eyebrow{font-family:var(--mono);font-size:13px;font-weight:500;letter-spacing:.02em;text-transform:none;color:var(--muted)}
.journey-intro .eyebrow::before,.interior-title .eyebrow::before{content:'// '}
.journey-intro h1 .bb-marker,.interior-title h2 .bb-marker{font-size:1.1em}
.bb-draw{background-repeat:no-repeat;background-size:100% 100%}
.journey-intro .bb-draw{animation:draw 1s var(--ease) .5s both}
.interior-title .bb-draw{background-size:calc(var(--draw,0) * 100%) 100%}
@keyframes draw{from{background-size:0 100%}}
.hero-purpose{font-family:var(--serif);font-style:italic;font-size:clamp(19px,1.7vw,24px);color:var(--tinta)}
.hero-explore{gap:8px;padding:0 18px;border:var(--borde);border-radius:30px;background:var(--acento);color:var(--tinta);font-weight:700;text-decoration:none;box-shadow:var(--sombra-s);transition:transform 200ms var(--bote),box-shadow 200ms}
@media(hover:hover) and (pointer:fine){.hero-explore:hover{transform:translate(-2px,-2px);box-shadow:var(--sombra)}}

/* Countdown as a plain, elegant counter: serif numbers in one line, no boxes. */
@media(min-width:761px){.countdown{width:auto;bottom:calc(5% + 44px)}}
.countdown .countdown-note{display:none}
.countdown .units{display:flex;justify-content:center;align-items:baseline;gap:0}
.countdown .unit{flex-direction:row;align-items:baseline;gap:6px;padding:0 clamp(14px,1.6vw,22px);border:0;background:none;box-shadow:none;transform:none}
.countdown .unit+.unit{border-left:1px solid #11111833}
.countdown .digits{font-family:var(--serif);font-size:clamp(58px,5.8vw,86px);font-weight:400;font-stretch:normal;letter-spacing:-.01em;line-height:1}
.countdown .unit:first-child .digits{font-style:italic;background:linear-gradient(transparent 60%,var(--acento) 60%,var(--acento) 92%,transparent 92%);padding:0 .06em}
.countdown .unit:last-child .digits{color:var(--muted)}
/* Italic glyphs lean past each digit's clipping box: give them room. */
.countdown .digit{padding:0 .14em 0 .02em;margin-right:-.1em}
/* Each digit is a 0–9 strip seen through a window. The window and each step are taller than the
   glyphs so the neighbouring digit never peeks in (Safari draws Instrument Serif taller than 1em),
   and every number uses the italic face: it is the only one the site ships, so Safari would
   otherwise fall back to another serif for the upright digits. */
.countdown .digits{font-style:italic}
.countdown .digit{height:1.7em;margin-block:-.2em;transform:translateZ(0);-webkit-mask-image:linear-gradient(#000 0 0);mask-image:linear-gradient(#000 0 0)} /* WebKit: clip the sliding strip even while it animates */
.countdown .strip>span{height:1.7em;line-height:1.7em}
.countdown .micro,.interior-annotations .micro,.seat-motion-caption,.countdown-note,.chapter,.location{font-family:var(--mono);letter-spacing:.02em;text-transform:none}
.countdown .micro{font-size:13px}
.annotation-number{font-weight:800;letter-spacing:-.06em}
.annotation-line{background:var(--tinta);height:2px}
.scroll-cue .cue-arrow{display:inline-grid;place-items:center;width:34px;height:34px;border:2px solid var(--tinta);border-radius:50%;background:var(--acento);font-size:16px;box-shadow:2px 2px 0 var(--tinta)}

/* Monument titles: the city as a "// tag", the name in serif with a marker. */
.prologue-label{gap:16px}
.prologue-label strong{padding:0 .12em;font-family:var(--serif);font-style:italic;font-weight:400;letter-spacing:-.01em;font-size:clamp(46px,5.8vw,90px);line-height:1;background:linear-gradient(transparent 58%,var(--acento) 58%,var(--acento) 92%,transparent 92%)}
.prologue-label span{padding:5px 13px;border:2px solid var(--tinta);border-radius:20px;background:var(--blanco);box-shadow:3px 3px 0 var(--tinta);font-family:var(--mono);font-size:13px;font-weight:500;letter-spacing:.02em;text-transform:lowercase;color:var(--tinta)}
.prologue-label span::before{content:'// '}

/* Instagram button in the header. */
.bb-insta{display:grid;place-items:center;width:42px;height:42px;border:2px solid var(--tinta);border-radius:50%;background:var(--blanco);color:var(--tinta);box-shadow:3px 3px 0 var(--tinta);transition:transform 200ms var(--bote),box-shadow 200ms,background 200ms,color 200ms}
@media(hover:hover) and (pointer:fine){.bb-insta:hover{background:linear-gradient(45deg,#f9a03f,#e1306c 55%,#833ab4);color:var(--blanco);transform:translate(-1px,-1px);box-shadow:4px 4px 0 var(--tinta)}}
.bb-insta:focus-visible{outline:2px solid var(--tinta);outline-offset:3px}
.bb-insta-hero{display:none}
@media(max-width:760px){.header-actions>.bb-insta{display:none}.bb-insta-hero{display:grid;pointer-events:auto;width:44px;height:44px}}

/* The guide: the character and its speech bubble. */
.bb-guide{position:absolute;left:clamp(14px,3vw,48px);bottom:var(--guide-bottom,64px);z-index:3;display:flex;align-items:flex-end;gap:8px;pointer-events:none;transition:opacity 300ms var(--ease),transform 450ms var(--bote),bottom 450ms var(--ease)}
.bb-guide.is-hidden,.bb-guide.is-other-language{opacity:0;transform:translateY(40px)}
.bb-guide-pj{position:relative;flex-shrink:0;display:grid;place-items:end center;width:clamp(64px,5.5vw,84px);aspect-ratio:1;--aura:var(--acento)}
.bb-guide-pj .bb-aura{left:4%;right:4%;border:2.5px solid var(--tinta)}
.bb-guide-pj .bb-aura::after{display:none}
.bb-guide-pj img{position:relative;width:90%;height:auto;margin-bottom:2px;clip-path:circle(70% at 50% 30%)}
.bb-guide.pop .bb-guide-pj img{animation:guide-pop 520ms var(--bote)}
@keyframes guide-pop{0%{transform:translateY(18px) scale(.9)}}
.bb-bubble{position:relative;max-width:250px;min-height:3.2em;margin:0 0 clamp(26px,3vw,40px);padding:8px 12px 9px;border:2px solid var(--tinta);border-radius:14px 14px 14px 4px;background:var(--blanco);box-shadow:3px 3px 0 var(--tinta);font-size:13px;line-height:1.4}
.bb-bubble::before{content:'';position:absolute;left:-10px;bottom:8px;width:11px;height:11px;background:var(--blanco);border-left:2px solid var(--tinta);border-bottom:2px solid var(--tinta);transform:skewY(-35deg)}
.bb-bubble-name{display:block;margin-bottom:1px;font-family:var(--mono);font-size:10px;color:var(--muted)}
.bb-guide.pop .bb-bubble{animation:bubble-pop 420ms var(--bote)}
/* The guide is a <button> (it only does something on phones). */
button.bb-guide-pj{padding:0;border:0;background:none;font:inherit;color:inherit;cursor:default;-webkit-tap-highlight-color:transparent}
.bb-guide-tip,.bb-guide-hint{display:none}
@keyframes bubble-pop{0%{transform:scale(.85) translateY(8px);opacity:0}}
@media(max-width:760px){
  .bb-guide{left:10px;right:10px;bottom:max(70px,9svh)}
  .bb-guide-pj{width:84px}
  .bb-bubble{max-width:none;flex:1;margin-bottom:34px;font-size:13px;padding:9px 12px 10px}
  .countdown .unit{padding:0 5px;gap:3px}
  .countdown .digits{font-size:clamp(30px,9vw,42px)}
  .countdown .micro{font-size:10px}
  .journey-intro .eyebrow{font-size:11px}
  .prologue-label span{font-size:11px}
}

/* ── Effects: marker that draws itself, ticker, parallax ──────────────── */
[data-reveal] .bb-marker{background-repeat:no-repeat;background-size:0 100%;transition:background-size 900ms var(--ease) 350ms}
[data-reveal].in .bb-marker{background-size:100% 100%}
.bb-ticker{position:relative;width:100vw;margin:clamp(56px,9vh,96px) calc(50% - 50vw) 0;padding:14px 0;background:var(--tinta);color:var(--blanco);overflow:hidden;transform:rotate(-1.4deg);border-block:3px solid var(--tinta);box-shadow:0 6px 0 var(--acento)}
.bb-ticker-run{display:flex;width:max-content;animation:ticker 38s linear infinite}
.bb-ticker:hover .bb-ticker-run{animation-play-state:paused}
.bb-ticker-copy{display:flex}
.bb-tick,.bb-tick-label{display:inline-flex;align-items:center;gap:8px;padding:0 22px;white-space:nowrap;font-size:16px;font-weight:600}
.bb-tick i{width:12px;height:12px;border-radius:50%;background:var(--c);border:1.5px solid var(--blanco)}
.bb-tick b{color:var(--acento);font-variant-numeric:tabular-nums}
.bb-tick-label{font-family:var(--mono);font-weight:400;font-size:13px;color:#ffffffa8}
@keyframes ticker{to{transform:translateX(-50%)}}
.bb-intro-art .bb-character{transform:translate(calc(var(--px,0) * -18px),calc(var(--py,0) * -12px));transition:transform 400ms var(--ease)}
.bb-intro-art .bb-sticker{transform:translate(calc(var(--px,0) * 26px),calc(var(--py,0) * 18px)) rotate(calc(10deg + var(--px,0) * 16deg));transition:transform 400ms var(--ease)}

/* ── 03 // test de afinidad ───────────────────────────────────────────── */
.bb-test{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:24px;max-width:980px;min-height:360px;padding:clamp(22px,3vw,40px);background:var(--puntos),var(--blanco)}
.bb-test-body{align-self:center}
.bb-test-body.swap{animation:pop-in 480ms var(--bote)}
.bb-test-art .bb-character{width:clamp(130px,16vw,220px)}
.bb-test-q{margin:6px 0 26px;font-size:clamp(24px,2.6vw,38px);font-weight:400;line-height:1.15;letter-spacing:-.04em;text-wrap:balance}
.bb-test-start{background:var(--acento);cursor:pointer;font:inherit;font-weight:700}
.bb-test-progress{height:10px;margin-bottom:18px;border:2px solid var(--tinta);border-radius:8px;background:var(--crema);overflow:hidden}
.bb-test-progress i{display:block;height:100%;background:var(--acento);transition:width 400ms var(--bote)}
.bb-test-answers{display:flex;flex-wrap:wrap;gap:12px}
.bb-test-answers .bb-chip{min-height:52px;padding:0 24px;font:inherit;font-size:16px;font-weight:700;cursor:pointer}
.bb-test-answers .is-yes{background:#3cc47a}.bb-test-answers .is-mid{background:var(--crema)}.bb-test-answers .is-no{background:#e5484d;color:var(--blanco)}
.bb-test-answers .bb-chip:active{transform:translate(3px,3px);box-shadow:1px 1px 0 var(--tinta)}
.bb-test-nav{display:flex;justify-content:space-between;margin-top:18px}
.bb-test-link{border:0;background:none;padding:6px 0;font-family:var(--mono);font-size:12px;color:var(--muted);cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.bb-test-result{margin:4px 0 0;font-size:clamp(28px,3.4vw,48px);font-weight:320;letter-spacing:-.05em;line-height:1.1}
.bb-test-result a{font-size:1.15em}
.bb-test-stamp{margin:14px 0 18px;font-size:clamp(26px,3vw,40px);background:#ffffffd9}
.bb-test-ranking{list-style:none;margin:0 0 6px;padding:0;display:grid;gap:7px}
.bb-test-ranking li{display:grid;grid-template-columns:110px minmax(0,1fr) 50px;align-items:center;gap:12px;font-size:13px}
.bb-test-ranking a{font-weight:700}
.bb-test-bar{height:14px;border:1.5px solid var(--tinta);border-radius:5px;background:var(--crema);overflow:hidden}
.bb-test-bar i{display:block;height:100%;width:var(--w);background:var(--c);border-right:1.5px solid var(--tinta);animation:grow 900ms var(--bote) both;animation-delay:calc(var(--i) * 60ms)}
@keyframes grow{from{width:0}}
.bb-test-ranking b{text-align:right;font-weight:500;font-variant-numeric:tabular-nums}
.bb-test .bb-note+.bb-chip{margin-top:12px;cursor:pointer;font:inherit;font-weight:700}
@media(max-width:700px){.bb-test{grid-template-columns:1fr}.bb-test-art{display:none}.bb-test-answers .bb-chip{flex:1 1 100%}.bb-test-ranking li{grid-template-columns:90px minmax(0,1fr) 44px}}

/* ── Apoya el proyecto ────────────────────────────────────────────────── */
.bb-donate{display:grid;grid-template-columns:minmax(0,1fr) minmax(240px,300px);align-items:center;gap:clamp(28px,5vw,80px);padding:clamp(12px,2vw,24px) 0}
.bb-donate-copy h2{margin:0 0 18px;font-size:clamp(34px,4.2vw,60px);font-weight:320;letter-spacing:-.055em;line-height:1.04;text-wrap:balance}
.bb-donate-copy p:not(.bb-tag){max-width:600px;margin:0 0 10px;font-size:16px;line-height:1.6;color:var(--ink-soft,#45473f)}
@property --giro{syntax:'<angle>';inherits:false;initial-value:0deg}
.bb-donate-action{position:relative;display:grid;gap:14px;padding:26px;border:2px solid transparent;border-radius:18px;background:linear-gradient(var(--blanco),var(--blanco)) padding-box,conic-gradient(from var(--giro),var(--tinta) 0 62%,var(--acento) 75%,var(--tinta) 88%) border-box;box-shadow:0 18px 40px -22px #11111159;transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform 300ms var(--ease);animation:giro 6s linear infinite}
@keyframes giro{to{--giro:360deg}}
.bb-donate-top{display:flex;align-items:center;gap:14px}
.bb-cup{width:64px;height:64px;flex-shrink:0;fill:none;stroke:var(--tinta);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.bb-steam{stroke:var(--acento);stroke-width:2.6;animation:steam 2.6s var(--ease) infinite;opacity:0}
.bb-steam:nth-child(2){animation-delay:.5s}.bb-steam:nth-child(3){animation-delay:1s}
@keyframes steam{0%{opacity:0;transform:translateY(6px)}40%{opacity:1}100%{opacity:0;transform:translateY(-6px)}}
.bb-donate-amount{display:flex;align-items:baseline;gap:12px;margin:0}
.bb-donate-amount b{font-size:52px;white-space:nowrap;font-weight:300;letter-spacing:-.06em;line-height:1}
.bb-donate-amount{flex-direction:column;gap:4px}
.bb-donate-amount b i{font-style:normal;font-variant-numeric:tabular-nums}
.bb-donate-amount small{font-family:var(--mono);font-size:12px;color:var(--muted)}
.bb-donate-btn{position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 20px;border:1.5px solid var(--tinta);border-radius:30px;background:var(--tinta);color:var(--blanco);font-size:16px;font-weight:600;letter-spacing:-.01em;transition:background-color 200ms,color 200ms,transform 200ms var(--ease)}
.bb-donate-btn::after{content:'';position:absolute;inset:0;background:linear-gradient(110deg,transparent 35%,#ffffff40 50%,transparent 65%);transform:translateX(-110%);transition:transform 700ms var(--ease)}
@media(hover:hover) and (pointer:fine){a.bb-donate-btn:hover::after{transform:translateX(110%)}}
.bb-donate-btn span{transition:transform 200ms var(--ease)}
@media(hover:hover) and (pointer:fine){a.bb-donate-btn:hover{background:var(--acento);color:var(--tinta)}a.bb-donate-btn:hover span{transform:translateX(4px)}}
.bb-donate-btn.is-soon{background:transparent;color:var(--muted);border-color:var(--line);cursor:default}
.bb-donate-note{margin:0;font-size:12px;color:var(--muted);text-align:center}
@media(max-width:820px){.bb-donate{grid-template-columns:1fr}}

@media(prefers-reduced-motion:reduce){
  [data-reveal]{opacity:1;transform:none;transition:none}
  [data-reveal] .bb-marker{background-size:100% 100%;transition:none}
  .bb-ticker-run{animation:none;flex-wrap:wrap;width:auto}.bb-ticker-copy{display:none}
  .bb-aura::after,.bb-character img{animation:none}
  .bb-chip,.bb-social,.bb-party{transition:none}
  .bb-dialog[open],.bb-compare.swap .bb-compare-card,.bb-calc-stamp.drop,.bb-seats circle.on,.bb-compare-hint span,.bb-test-body.swap,.bb-test-bar i,.bb-donate-action,.bb-steam,.journey-intro .bb-draw,.bb-guide.pop .bb-guide-pj img,.bb-guide.pop .bb-bubble{animation:none}
  .bb-poll-bar i,.bb-seats circle,.bb-meter i{transition:none}
}

/* ── Bottom fade of the journey, mirroring the header's ───────────────────── */
.scene{-webkit-mask-image:linear-gradient(#000 calc(100% - clamp(70px,12vh,120px)),transparent 92%);mask-image:linear-gradient(#000 calc(100% - clamp(70px,12vh,120px)),transparent 92%)}

/* Spectrum: numbered dots and a legend, only used on phones. */
.bb-spectrum-dot i,.bb-spectrum-list{display:none}

/* ── Phones ─────────────────────────────────────────────────────────────── */
@media(max-width:760px){
  /* Countdown: low on the screen, just above the "Rumbo al Congreso" label. */
  .countdown{bottom:46px}
  /* Countdown: numbers on top, labels underneath, using the full width. */
  .countdown .units{justify-content:space-between}
  .countdown .unit{flex:1;flex-direction:column;align-items:center;gap:2px;padding:0 2px}
  .countdown .digits{font-size:clamp(46px,13.5vw,60px)}
  .countdown .micro{font-size:10.5px}

  /* Guide: low in the corner so the monuments stay visible. */
  .bb-guide{left:12px;right:12px;bottom:calc(34px + env(safe-area-inset-bottom));gap:6px}
  .bb-guide-pj{width:60px}
  .bb-bubble{margin-bottom:16px;padding:7px 11px 8px;font-size:12.5px;line-height:1.38;min-height:0;border-radius:12px 12px 12px 3px}

  /* Sections a bit tighter. */
  .bb-intro,.bb-section{padding-top:64px;padding-bottom:64px}
  .bb-head{margin-bottom:26px}

  /* Spectrum: one row per party, each with its own left-right bar. */
  .bb-spectrum{padding:16px 14px 14px}
  .bb-spectrum .bb-label{font-size:11px}
  .bb-spectrum-track,.bb-spectrum-ends{display:none}
  .bb-spectrum-list{display:grid;gap:5px;margin:10px 0 0;padding:0;list-style:none}
  .bb-spectrum-list li>*{display:grid;grid-template-columns:96px minmax(0,1fr);align-items:center;gap:10px}
  .bb-spectrum-list a{font-size:12.5px;font-weight:600;letter-spacing:-.01em;color:var(--tinta)}
  .bb-spectrum-row{position:relative;height:16px;border:1.5px solid var(--tinta);border-radius:10px;background:linear-gradient(90deg,#ef3e3624,#f1ede4 50%,#2ea3f224)}
  .bb-spectrum-row::before{content:'';position:absolute;left:50%;top:2px;bottom:2px;border-left:1.5px dashed #11111140}
  .bb-spectrum-row i{position:absolute;left:var(--x);top:50%;width:14px;height:14px;margin:-7px 0 0 -7px;border:1.5px solid var(--tinta);border-radius:50%;background:var(--c)}
  .bb-spectrum-axis .bb-spectrum-row{height:auto;border:0;background:none;display:flex;justify-content:space-between;font-family:var(--mono);font-size:9.5px;color:var(--muted)}
  .bb-spectrum-axis .bb-spectrum-row::before{display:none}
  .bb-spectrum-axis b{font-weight:500}
  .bb-spectrum .bb-note{font-size:11px}

  /* Party cards: two compact columns instead of one long list. */
  .bb-parties{grid-template-columns:1fr 1fr;gap:14px 12px}
  .bb-party{gap:6px;padding:16px 12px 12px;border-radius:14px;box-shadow:4px 4px 0 var(--tinta)}
  .bb-party-band{height:7px}
  .bb-party-top{margin-top:2px;gap:4px}
  .bb-party-top .bb-label{font-size:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .bb-party-guide{padding:2px 6px;font-size:9px;white-space:nowrap}
  .bb-party-name{font-size:clamp(22px,6.6vw,28px);letter-spacing:-.05em;overflow-wrap:anywhere}
  .bb-party-cand{font-size:15px}
  .bb-party-frase{font-size:12px;line-height:1.4;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden;flex:0 1 auto}
  .bb-party-stats{gap:6px;padding-top:8px;margin-top:auto}
  .bb-party-stats b{font-size:20px}
  .bb-party-stats small{font-size:9.5px;margin-top:2px}
  .bb-party-go{padding:4px 9px;font-size:11px}

  /* Voting calendar: date on the left, compact rows. */
  .bb-timeline{gap:8px;padding-left:20px}
  .bb-date{grid-template-columns:58px minmax(0,1fr);gap:2px 12px;padding:10px 12px;border-radius:12px}
  .bb-date::before{left:-20px;width:12px;height:12px;margin-top:-6px}
  .bb-date time{grid-row:span 2}
  .bb-date time b{font-size:17px;line-height:1.1}
  .bb-date time span{font-size:9.5px}
  .bb-date h3{font-size:14.5px}
  .bb-date p{margin-top:2px;font-size:12.5px;line-height:1.4}
  .bb-next-tag{grid-column:2;justify-self:start;margin-top:4px;padding:3px 8px;font-size:10px}
  /* Ways to vote: small character beside the title. */
  .bb-ways{gap:12px}
  .bb-way{display:grid;grid-template-columns:minmax(0,1fr) 52px;align-items:end;column-gap:8px;padding:12px 14px 13px;border-radius:14px;box-shadow:4px 4px 0 var(--tinta)}
  .bb-way>*{grid-column:1/-1;justify-self:start}
  .bb-way-art{grid-column:2;grid-row:1/span 2;align-self:end}
  .bb-way-art .bb-character{width:52px;margin:0}
  .bb-way-art .bb-aura::after{inset:-4px}
  .bb-way .bb-label{grid-column:1;grid-row:1;align-self:end;margin-bottom:4px;font-size:10.5px}
  .bb-way h3{grid-column:1;grid-row:2;margin:0 0 2px;font-size:20px}
  .bb-way ol{margin:8px 0 10px;padding-left:18px;gap:4px;font-size:12px;line-height:1.4}
  .bb-way .bb-chip{min-height:34px;padding:0 12px;font-size:12px}
  .bb-ics{padding:14px 16px}
  .bb-ics p{font-size:14px}
  /* Guide intro: smaller character. */
  .bb-intro-art{max-width:260px}

  /* Comparator: smaller topic chips and narrower cards, so two peek in. */
  .bb-tabs .bb-chip{min-height:36px;padding:0 13px;font-size:12.5px}
  .bb-compare{grid-auto-columns:66%;gap:12px}
  .bb-compare-card{padding:12px 13px 12px;border-top-width:7px;border-radius:14px}
  .bb-compare-name{margin-bottom:6px;font-size:18px}
  .bb-compare-name span{font-size:11px}
  .bb-compare-card ul{padding-left:15px;gap:5px}
  .bb-compare-card li{font-size:12px;line-height:1.42}
}

/* ── Desktop balance: calmer titles, centred last rows, matching heights ── */
@media(min-width:761px){
  .bb-intro,.bb-section{padding-top:clamp(64px,9vh,110px);padding-bottom:clamp(64px,9vh,110px)}
  .bb-head h2,.bb-intro h2{font-size:clamp(42px,4.6vw,72px)}
  .bb-head{margin-bottom:clamp(26px,4vh,44px)}
  .bb-intro{padding-top:clamp(80px,12vh,130px)}
  .bb-intro-art{max-width:360px}
  /* Party cards: the odd last row sits centred under the others. */
  .bb-parties{display:flex;flex-wrap:wrap;justify-content:center;--cols:3}
  .bb-parties>li{flex:0 0 calc((100% - (var(--cols) - 1) * clamp(18px,2vw,28px)) / var(--cols))}
  .bb-party-name{font-size:clamp(30px,2.6vw,40px)}
  /* Test: full width like the other cards. */
  .bb-test{max-width:none;min-height:300px}
  /* Polls and calculator: same height side by side. */
  .bb-pacts-grid{align-items:stretch}
  /* Voting calendar: slimmer rows. */
  .bb-date{padding:12px 20px}
  .bb-date time b{font-size:20px}
}
@media(min-width:1100px){.bb-parties{--cols:4}}

/* No browser scrollbars anywhere (page, menus, dialogs, dropdowns): everything still scrolls
   with the wheel, touch or trackpad. */
html,*{scrollbar-width:none;-ms-overflow-style:none}
html::-webkit-scrollbar,*::-webkit-scrollbar{display:none;width:0;height:0}

/* Phones: the guide is a small button that tells a curiosity when tapped. */
@media(max-width:760px){
  .bb-guide{right:auto;align-items:center}
  button.bb-guide-pj{pointer-events:auto;cursor:pointer;touch-action:manipulation}
  button.bb-guide-pj:active img{transform:scale(.92)}
  .bb-guide-tip{display:grid;place-items:center;position:absolute;top:-4px;right:-6px;z-index:2;width:22px;height:22px;border:2px solid var(--tinta);border-radius:50%;background:var(--acento);font-size:13px;font-weight:800;line-height:1;box-shadow:2px 2px 0 var(--tinta);animation:guide-tip 1.8s ease-in-out infinite}
  .bb-guide-hint{display:block;align-self:center;padding:5px 11px;border:2px solid var(--tinta);border-radius:20px;background:var(--blanco);box-shadow:2px 2px 0 var(--tinta);font-size:12px;font-weight:700;white-space:nowrap;transition:opacity .25s,transform .25s}
  .bb-guide.is-used .bb-guide-hint,.bb-guide.is-open .bb-guide-hint{opacity:0;transform:translateX(-8px);pointer-events:none}
  .bb-guide.is-open .bb-guide-tip{animation:none;opacity:0}
  .bb-guide .bb-bubble{position:absolute;left:calc(100% + 0px);bottom:22px;width:min(270px,calc(100vw - 100px));margin:0;opacity:0;transform:scale(.85) translateY(8px);transform-origin:0 100%;pointer-events:none;transition:opacity .2s,transform .25s var(--bote)}
  .bb-guide.is-open .bb-bubble{opacity:1;transform:none}
  .bb-guide-pj{position:relative}
  .bb-guide{gap:8px}
  .bb-guide .bb-bubble{left:68px}
}
@keyframes guide-tip{50%{transform:scale(1.18)}}
@media(prefers-reduced-motion:reduce){.bb-guide-tip{animation:none}}