/* El más trabajador de Paraguay · v1 · 24-sep-2026
   Tokens measured in BRIEF.md. Every colour is a token. 3 radii, 2 shadows, no glow. */

@font-face { font-family: "Big Shoulders"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url(../fonts/bigshoulders-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Big Shoulders"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url(../fonts/bigshoulders-latin-ext.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Instrument Sans"; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url(../fonts/instrument-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Instrument Sans"; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url(../fonts/instrument-latin-ext.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 400 800; font-display: swap;
  src: url(../fonts/jetbrains-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 400 800; font-display: swap;
  src: url(../fonts/jetbrains-latin-ext.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

:root {
  --night: #0B1426; --panel: #15213B; --line-n: #2A3654;
  --paper: #F2ECE1; --paper-2: #E6DDCE; --ink: #14120F;
  --brick: #C8412D; --brick-dk: #A8321F; --sun: #F2A33A;
  --mute-p: #5E574C; --mute-n: #A9B3C7;
  --bronze-1: #8A5A2B; --bronze-2: #C99A5B; --bronze-3: #4A2F14;
  --r-0: 0; --r-1: 10px; --r-2: 999px;
  --sh-1: 0 18px 40px -24px rgba(11, 20, 38, .55);
  --sh-2: 0 40px 80px -48px rgba(11, 20, 38, .7);
  --f-display: "Big Shoulders", "Arial Narrow", sans-serif;
  --f-text: "Instrument Sans", system-ui, sans-serif;
  --f-mono: "JetBrains Mono", ui-monospace, monospace;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --gutter: clamp(20px, 4vw, 48px);
  --maxw: 1280px;
}
[data-theme="night"] { --bg: var(--night); --fg: var(--paper); --fg-2: var(--mute-n); --accent: var(--sun); --card: var(--panel); --card-fg: var(--paper); }
[data-theme="day"]   { --bg: var(--paper); --fg: var(--ink); --fg-2: var(--mute-p); --accent: var(--brick-dk); --card: #FFFDF8; --card-fg: var(--ink); }
[data-theme] { background: var(--bg); color: var(--fg); }

*, *::before, *::after { box-sizing: border-box; }
/* the page never scrolls sideways: html (not body) carries it to the viewport, which is what iOS Safari honours */
html { -webkit-text-size-adjust: 100%; overflow-x: hidden; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
body { margin: 0; background: var(--night); color: var(--paper); font-family: var(--f-text); font-size: clamp(1rem, .96rem + .2vw, 1.125rem); line-height: 1.6; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; overflow-x: clip; }
img, video, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; }
p { margin: 0 0 1em; }
h1, h2, h3 { margin: 0; }
.mono { font-family: var(--f-mono); letter-spacing: -.01em; }
.wrap { width: min(var(--maxw), 100% - 2 * var(--gutter)); margin-inline: auto; }
.skip { position: absolute; left: -9999px; top: 8px; z-index: 100; background: var(--sun); color: var(--night); padding: 10px 16px; border-radius: var(--r-1); }
.skip:focus { left: 8px; }
:focus-visible { outline: 3px solid var(--sun); outline-offset: 3px; }

.eyebrow { font-size: .8rem; text-transform: uppercase; letter-spacing: .08em; color: var(--accent); margin-bottom: 1.2rem; display: flex; align-items: center; gap: .6rem; }
.eyebrow::before { content: ""; width: 28px; height: 2px; background: currentColor; }
.h2 { font-family: var(--f-display); font-weight: 900; font-variation-settings: "opsz" 72; text-transform: uppercase; font-size: clamp(2.6rem, 1.6rem + 5vw, 6rem); line-height: .9; letter-spacing: -.005em; margin-bottom: .45em; text-wrap: balance; }
.lead { font-size: clamp(1.2rem, 1rem + .9vw, 1.6rem); line-height: 1.4; font-weight: 500; }

/* ------------------------------------------------------------------------ hero entrance, grain, progress, hud */
/* no loading screen: html.intro (set in <head>) only holds the hero back until site.js starts its entrance; 2.5 s fallback */
.intro .hero__inner, .intro .hero__photo, .intro .stamp { visibility: hidden; animation: introFallback 0s 2.5s forwards; }
@keyframes introFallback { to { visibility: visible; } }

/* the moving noise is bigger than the screen, so it lives inside a screen-sized box that clips it (a fixed layer that
   sticks out lets an iPhone pan sideways) */
.grain { position: fixed; inset: 0; z-index: 80; pointer-events: none; overflow: hidden; opacity: .07; }
.grain::before { content: ""; position: absolute; inset: -50%; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); animation: grain 1s steps(6) infinite; }
@keyframes grain { 0% { transform: translate(0, 0); } 20% { transform: translate(-5%, 3%); } 40% { transform: translate(4%, -6%); } 60% { transform: translate(-3%, 5%); } 80% { transform: translate(6%, 2%); } 100% { transform: translate(0, 0); } }

.progress { position: fixed; left: 0; right: 0; top: 0; height: 3px; z-index: 85; pointer-events: none; }
.progress span { display: block; height: 100%; background: var(--sun); transform-origin: 0 50%; transform: scaleX(0); }

.hud { position: fixed; z-index: 70; right: clamp(12px, 2vw, 24px); top: clamp(12px, 2vw, 22px); display: flex; align-items: center; gap: 12px; padding: 8px 14px 8px 10px; background: var(--night); color: var(--paper); border: 1px solid var(--line-n); border-radius: var(--r-2); box-shadow: var(--sh-1); font-size: .78rem; font-variant-numeric: tabular-nums; }
.hud__arc { position: relative; width: 34px; height: 18px; border: 1.5px solid var(--mute-n); border-bottom: 0; border-radius: 34px 34px 0 0; overflow: visible; }
.hud__sun { position: absolute; width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; border-radius: var(--r-2); background: var(--sun); left: 0; top: 100%; }
.hud__clock { font-size: 1rem; font-weight: 600; color: var(--sun); min-width: 3.1em; }
.hud__worked { color: var(--mute-n); }
@media (max-width: 640px) { .hud { top: auto; bottom: 12px; right: 12px; } .hud__worked { display: none; } }

/* ------------------------------------------------------------------------ hero */
.hero { position: relative; min-height: 100svh; display: grid; grid-template-columns: 1fr; overflow: hidden; overflow: clip; isolation: isolate; }
.hero__sky { position: absolute; inset: 0; z-index: -1; background: radial-gradient(120% 70% at 30% 118%, rgba(242, 163, 58, .55), rgba(200, 65, 45, .28) 38%, rgba(11, 20, 38, 0) 70%), var(--night); }
.hero__sun { position: absolute; left: 30%; bottom: -14vmin; width: 36vmin; height: 36vmin; border-radius: var(--r-2); background: radial-gradient(circle at 50% 40%, #FFD28A, var(--sun) 55%, rgba(242, 163, 58, 0) 71%); opacity: .9; }
.hero__inner { position: relative; z-index: 2; padding: clamp(96px, 16vh, 150px) 0 clamp(40px, 8vh, 80px); display: flex; flex-direction: column; justify-content: center; }
.kicker { display: flex; align-items: center; gap: .6rem; font-size: .85rem; color: var(--mute-n); margin-bottom: 1.6rem; text-transform: uppercase; letter-spacing: .08em; }
.kicker__dot { width: 9px; height: 9px; border-radius: var(--r-2); background: var(--sun); animation: blink 1.6s var(--ease) infinite; }
.kicker__clock { color: var(--sun); font-weight: 600; }
@keyframes blink { 50% { opacity: .25; } }
.hero__title { font-family: var(--f-display); font-weight: 900; font-variation-settings: "opsz" 72; text-transform: uppercase; line-height: .86; letter-spacing: -.01em; }
.hero__name { display: block; font-size: clamp(1.9rem, 1.2rem + 3vw, 3.6rem); color: var(--sun); line-height: 1; margin-bottom: .18em; }
.hero__claim { display: block; font-size: clamp(3rem, 1rem + 7.4vw, 9rem); color: var(--paper); text-wrap: balance; }
.hero__sub { max-width: 34ch; margin-top: 1.6rem; font-size: clamp(1.05rem, .95rem + .5vw, 1.35rem); color: var(--paper); }
.hero__scroll { display: inline-flex; align-items: center; gap: .7rem; margin-top: 2rem; font-size: .8rem; text-transform: uppercase; letter-spacing: .12em; color: var(--mute-n); text-decoration: none; }
.hero__arrow { display: inline-grid; place-items: center; width: 38px; height: 38px; border: 1px solid var(--line-n); border-radius: var(--r-2); color: var(--sun); animation: bob 2.2s var(--ease) infinite; }
@keyframes bob { 50% { transform: translateY(6px); } }
.hero__photo { margin: 0; position: relative; z-index: 1; height: 72svh; }
.hero__img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 18%; }
.hero__photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(11, 20, 38, 0) 55%, var(--night)); }
.stamp { position: absolute; z-index: 3; right: 6%; top: 58svh; transform: rotate(-9deg); border: 3px solid var(--brick); color: var(--paper); background: rgba(11, 20, 38, .72); padding: .6rem 1rem .5rem; text-align: center; font-family: var(--f-mono); text-transform: uppercase; letter-spacing: .12em; font-size: .72rem; line-height: 1.3; border-radius: var(--r-0); outline: 1px solid var(--brick); outline-offset: 3px; }
.stamp strong { display: block; font-family: var(--f-display); font-weight: 900; font-size: 1.9rem; letter-spacing: .02em; color: var(--sun); }
@media (max-width: 900px) {
  .hero__photo { position: absolute; inset: 0; height: 100%; z-index: 0; }
  .hero__img { object-position: 50% 10%; }
  .hero__photo::after { background: linear-gradient(180deg, rgba(11, 20, 38, .15) 0%, rgba(11, 20, 38, .45) 26%, rgba(11, 20, 38, .9) 44%, rgba(11, 20, 38, .97) 60%, var(--night) 100%); }
  .hero__inner { justify-content: flex-end; min-height: 100svh; padding-top: 40svh; padding-bottom: 32px; }
  .stamp { top: 14svh; right: 16px; bottom: auto; }
  .hero__sun { display: none; }
}
@media (min-width: 901px) {
  .hero { grid-template-columns: 1.08fr .92fr; }
  .hero__inner { grid-column: 1; width: auto; margin-left: max(var(--gutter), (100vw - var(--maxw)) / 2); padding-right: 2vw; }
  .hero__photo { grid-column: 2; grid-row: 1; height: 100svh; }
  .hero__photo::after { background: linear-gradient(90deg, var(--night), rgba(11, 20, 38, 0) 28%), linear-gradient(180deg, rgba(11, 20, 38, 0) 70%, var(--night)); }
  .stamp { right: 38%; top: auto; bottom: 12vh; }
}

/* SplitText: never break inside a word, and give the masks room above the line so accents are not clipped */
.split-w { white-space: nowrap; }
.hero__title > span > div, .h2 > div, .reveal > div { padding-top: .18em; margin-top: -.18em; padding-bottom: .04em; margin-bottom: -.04em; }

/* ------------------------------------------------------------------------ tickers */
.tickers { position: relative; z-index: 2; overflow: hidden; }
.ticker { overflow: hidden; white-space: nowrap; padding: .55rem 0; }
.ticker--a { background: var(--brick); color: var(--paper); transform: rotate(-1.2deg) scale(1.02); margin: -1.5rem 0 0; }
.ticker--b { background: var(--ink); color: var(--sun); transform: rotate(.8deg) scale(1.02); }
.ticker__track { display: inline-flex; align-items: center; gap: 1.6rem; will-change: transform; }
.ticker span { font-family: var(--f-display); font-weight: 900; text-transform: uppercase; font-size: clamp(1.6rem, 1rem + 2.4vw, 3rem); line-height: 1; letter-spacing: .01em; }
.ticker--b span { font-family: var(--f-mono); font-weight: 600; font-size: clamp(.9rem, .8rem + .5vw, 1.2rem); letter-spacing: .1em; }
.ticker i { font-style: normal; font-size: 1.2rem; opacity: .8; }
.rm .ticker__track, .no-js .ticker__track { animation: none; }

/* ------------------------------------------------------------------------ quien */
.quien { padding: clamp(90px, 14vh, 160px) 0; position: relative; }
.quien::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 140px; background: linear-gradient(180deg, rgba(242, 163, 58, .35), rgba(242, 236, 225, 0)); pointer-events: none; }
.quien__grid { display: grid; gap: clamp(32px, 6vw, 90px); align-items: center; }
@media (min-width: 901px) { .quien__grid { grid-template-columns: 1.15fr .85fr; } }
.quien__text p { max-width: 58ch; }
.kw { position: relative; display: inline; color: var(--brick); white-space: normal; }
.kw__line { position: absolute; left: 0; right: 0; bottom: -.12em; width: 100%; height: .22em; overflow: visible; }
.kw__line path { fill: none; stroke: var(--brick); stroke-width: 6; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.foto { margin: 0; position: relative; }
.foto__frame { position: relative; overflow: hidden; border-radius: var(--r-1); background: var(--paper-2); box-shadow: var(--sh-2); }
.foto__frame img { width: 100%; height: auto; transition: transform 1.2s var(--ease); }
.foto:hover .foto__frame img { transform: scale(1.035); }
.foto__cap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .3rem 1rem; margin-top: .7rem; font-size: .9rem; color: var(--fg-2); }
.foto__cap .mono { font-size: .72rem; letter-spacing: .04em; text-transform: uppercase; }
.quien__photo .foto__frame { aspect-ratio: 4 / 5; }
.quien__photo .foto__frame img { height: 100%; object-fit: cover; }

/* live photos */
.vivo__v { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .45s var(--ease); pointer-events: none; }
.vivo.is-playing .vivo__v { opacity: 1; }
.vivo__badge { position: absolute; left: 10px; top: 10px; z-index: 2; display: inline-flex; align-items: center; gap: 6px; padding: 4px 9px; border-radius: var(--r-2); background: rgba(11, 20, 38, .78); color: var(--paper); font-size: .62rem; letter-spacing: .12em; text-transform: uppercase; }
.vivo__badge::before { content: ""; width: 6px; height: 6px; border-radius: var(--r-2); background: var(--sun); }
.vivo.is-playing .vivo__badge::before { animation: blink .9s infinite; }

/* ------------------------------------------------------------------------ jornada */
.jornada { position: relative; padding-top: clamp(80px, 12vh, 140px); }
.jornada__head { position: relative; z-index: 2; padding-bottom: clamp(24px, 5vh, 48px); }
.jornada__intro { max-width: 60ch; color: var(--fg-2); }
.jornada__viewport { position: relative; overflow: hidden; --sky-a: #F2ECE1; --sky-b: #F7D9A8; }
.jornada__sky { position: absolute; inset: 0; z-index: 0; display: none; }
.jornada__track { list-style: none; margin: 0; padding: 0 var(--gutter) clamp(60px, 10vh, 120px); display: grid; gap: 22px; position: relative; z-index: 1; }
.hora { position: relative; background: var(--card); color: var(--card-fg); border-radius: var(--r-1); padding: 14px 14px 18px; box-shadow: var(--sh-1); display: flex; flex-direction: column; }
.hora .foto__frame { aspect-ratio: 4 / 5; box-shadow: none; }
.hora .foto__frame img, .hora .foto__frame video { width: 100%; height: 100%; object-fit: cover; }
.hora__t { font-size: clamp(2.6rem, 2rem + 2vw, 3.6rem); font-weight: 600; line-height: 1; margin: .9rem 0 .35rem; font-variant-numeric: tabular-nums; color: var(--brick-dk); }
.hora__cap { font-size: 1.05rem; font-weight: 500; margin: 0 0 .5rem; }
.hora__title { font-family: var(--f-display); font-weight: 900; text-transform: uppercase; font-size: clamp(1.8rem, 1.4rem + 1.6vw, 2.6rem); line-height: .95; margin: 0 0 .4rem; }
.hora__lugar { margin: auto 0 0; font-size: .7rem; text-transform: uppercase; letter-spacing: .06em; color: var(--mute-p); padding-top: .6rem; border-top: 1px dashed rgba(20, 18, 15, .2); }
.hora--vacia, .hora--fin { background: var(--night); color: var(--paper); justify-content: flex-end; min-height: 420px; }
.hora--vacia .hora__t, .hora--fin .hora__t { color: var(--sun); }
.hora__noche { position: absolute; inset: 0; border-radius: var(--r-1); overflow: hidden; }
.hora__noche span { position: absolute; width: 3px; height: 3px; border-radius: var(--r-2); background: var(--paper); opacity: .7; }
.hora__noche span:nth-child(1) { left: 22%; top: 18%; } .hora__noche span:nth-child(2) { left: 64%; top: 30%; } .hora__noche span:nth-child(3) { left: 40%; top: 46%; }
.hora__noche::after { content: ""; position: absolute; right: 16%; top: 12%; width: 46px; height: 46px; border-radius: var(--r-2); box-shadow: 12px -6px 0 0 var(--paper); }
@media (min-width: 700px) and (max-width: 1023px) { .jornada__track { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) {
  .js:not(.rm) .jornada__viewport { height: 100svh; display: flex; align-items: center; background: linear-gradient(180deg, var(--sky-a), var(--sky-b)); }
  .js:not(.rm) .jornada__sky { display: block; }
  .js:not(.rm) .jornada__track { display: flex; gap: 28px; padding: 0 30vw 0 var(--gutter); width: max-content; will-change: transform; }
  .js:not(.rm) .hora { width: clamp(300px, 26vw, 380px); flex: none; }
  .js:not(.rm) .hora--vacia, .js:not(.rm) .hora--fin { min-height: min(68svh, 560px); }
  .jornada__sun { position: absolute; width: 90px; height: 90px; margin: -45px 0 0 -45px; border-radius: var(--r-2); background: radial-gradient(circle at 45% 40%, #FFE3B0, var(--sun) 60%); left: 8%; top: 70%; }
}
.no-js .jornada__track, .rm .jornada__track { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }

/* ------------------------------------------------------------------------ numeros */
.numeros { padding: clamp(80px, 12vh, 140px) 0; }
.numeros__grid { list-style: none; margin: 1.5rem 0 0; padding: 0; display: grid; gap: 1px; background: var(--line-n); border: 1px solid var(--line-n); border-radius: var(--r-1); overflow: hidden; }
@media (min-width: 700px) { .numeros__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .numeros__grid { grid-template-columns: repeat(3, 1fr); } }
.numeros__item { background: var(--night); padding: clamp(24px, 3vw, 40px); display: flex; flex-direction: column; gap: .4rem; min-height: 220px; justify-content: flex-end; }
.num { font-family: var(--f-display); font-weight: 900; font-size: clamp(3.4rem, 2.4rem + 4vw, 6.4rem); line-height: .9; color: var(--sun); font-variant-numeric: tabular-nums; }
.num--txt { font-size: clamp(2.8rem, 2rem + 3vw, 5rem); }
.num__label { font-size: 1.05rem; color: var(--paper); max-width: 26ch; }
.num__note { font-size: .7rem; color: var(--mute-n); text-transform: uppercase; letter-spacing: .06em; }

/* ------------------------------------------------------------------------ galeria */
.galeria { padding: clamp(90px, 14vh, 160px) 0; overflow: hidden; overflow: clip; }
.galeria__intro { color: var(--fg-2); max-width: 50ch; }
.galeria__grid { display: grid; gap: 22px; margin-top: 2.2rem; }
@media (min-width: 701px) { .galeria__grid { grid-template-columns: repeat(2, 1fr); } .galeria__col:nth-child(3) { display: contents; } }
@media (min-width: 1101px) { .galeria__grid { grid-template-columns: repeat(3, 1fr); align-items: start; } .galeria__col:nth-child(3) { display: flex; } .galeria__col:nth-child(2) { margin-top: 90px; } }
.galeria__col { display: flex; flex-direction: column; gap: 22px; }
.galeria .foto__cap { color: var(--mute-p); }
@media (max-width: 700px) {
  .galeria__grid { display: block; columns: 2; column-gap: 12px; }
  .galeria__col { display: contents; }
  .galeria .foto { break-inside: avoid; margin-bottom: 16px; }
  .galeria .foto__cap { font-size: .78rem; line-height: 1.35; }
  .galeria .foto__cap .mono { font-size: .6rem; }
}

/* ------------------------------------------------------------------------ mapa */
.mapa { padding: clamp(90px, 14vh, 160px) 0; background: linear-gradient(180deg, var(--paper), var(--paper-2)); }
.mapa__grid { display: grid; gap: clamp(32px, 6vw, 80px); align-items: center; }
@media (min-width: 1001px) { .mapa__grid { grid-template-columns: 1fr 1fr; } }
.escalones { list-style: none; margin: 2rem 0 0; padding: 0; border-top: 2px solid var(--ink); }
.escalon { display: grid; grid-template-columns: auto 1fr auto; gap: 16px; align-items: start; padding: 18px 0; border-bottom: 1px solid rgba(20, 18, 15, .18); }
.escalon__n { font-size: .8rem; color: var(--mute-p); padding-top: .35rem; }
.escalon h3 { font-family: var(--f-display); font-weight: 800; text-transform: uppercase; font-size: clamp(1.4rem, 1.1rem + 1vw, 2rem); line-height: 1; margin-bottom: .3rem; }
.escalon p { margin: 0; color: var(--mute-p); }
.escalon__estado { align-self: center; font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; padding: 6px 10px; border-radius: var(--r-2); background: var(--brick-dk); color: var(--paper); white-space: nowrap; }
.escalon--pend .escalon__estado { background: transparent; color: var(--ink); border: 1.5px dashed var(--ink); }
.mapa__fig { margin: 0; }
.mapa__svg { width: 100%; height: auto; overflow: visible; }
.pais { fill: #FFFDF8; stroke: var(--ink); stroke-width: 3; stroke-linejoin: round; }
.pin__dot { fill: var(--brick); stroke: #FFFDF8; stroke-width: 4; }
.pin__pulse { fill: none; stroke: var(--brick); stroke-width: 3; opacity: .5; transform-box: fill-box; transform-origin: center; animation: pulse 2.4s var(--ease) infinite paused; animation-delay: calc(var(--i) * .3s); }
.mapa__fig.is-live .pin__pulse { animation-play-state: running; }
@keyframes pulse { 0% { transform: scale(.4); opacity: .8; } 100% { transform: scale(1.9); opacity: 0; } }
.pin text { font-family: var(--f-display); fill: var(--ink); }
.pin__name { font-size: 34px; font-weight: 900; text-transform: uppercase; }
.pin__label { font-family: var(--f-mono); font-size: 20px; fill: var(--mute-p); }

/* ------------------------------------------------------------------------ titulo: certificado + estatua */
/* the seal stamps in from 3x its size and that start state sits off screen until it plays: clip it to the section */
.titulo { padding: clamp(90px, 14vh, 160px) 0; overflow-x: hidden; overflow-x: clip; }
.titulo__grid { display: grid; gap: clamp(40px, 6vw, 90px); align-items: center; margin-top: 1rem; }
.titulo__grid > * { min-width: 0; }
@media (min-width: 1001px) { .titulo__grid { grid-template-columns: 1.2fr .8fr; } }
.cert { perspective: 1200px; }
.cert__inner { position: relative; background: #FFFDF8; color: var(--ink); border-radius: var(--r-1); padding: clamp(28px, 5vw, 60px); box-shadow: var(--sh-2); outline: 2px solid var(--ink); outline-offset: -14px; transform-style: preserve-3d; will-change: transform; }
.cert__inner::before { content: ""; position: absolute; inset: 22px; border: 1px solid rgba(20, 18, 15, .35); pointer-events: none; }
.cert__kicker { font-size: .75rem; letter-spacing: .3em; text-transform: uppercase; color: var(--brick-dk); margin-bottom: .8rem; }
.cert__title { font-family: var(--f-display); font-weight: 900; text-transform: uppercase; font-size: clamp(2.4rem, 1.6rem + 3.6vw, 4.6rem); line-height: .9; margin-bottom: 1.2rem; max-width: 11ch; }
.cert__body { font-size: 1.1rem; max-width: 42ch; }
.cert__fields { margin: 1.6rem 0 0; display: grid; gap: 10px; max-width: 46ch; }
.cert__fields div { display: grid; grid-template-columns: 9.5em 1fr; gap: 12px; border-bottom: 1px dotted rgba(20, 18, 15, .4); padding-bottom: 6px; }
.cert__fields dt { font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: var(--mute-p); padding-top: .25rem; }
.cert__fields dd { margin: 0; font-weight: 600; }
.seal { position: absolute; right: clamp(-18px, -1.5vw, -8px); bottom: clamp(-78px, -5vw, -46px); width: clamp(120px, 14vw, 176px); transform: rotate(-14deg); }
.cert__fields { max-width: min(46ch, 100% - 110px); }
@media (max-width: 700px) {
  .cert__fields { max-width: 100%; }
  .cert__fields div { grid-template-columns: 1fr; gap: 2px; }
  .seal { top: -38px; right: -8px; bottom: auto; width: 108px; }
}
.seal svg { width: 100%; height: auto; overflow: visible; }
.seal__ring { fill: none; stroke: var(--brick); stroke-width: 3; }
.seal__txt { font-family: var(--f-mono); font-size: 13.5px; font-weight: 600; letter-spacing: 1px; fill: var(--brick); }
.seal__big { font-family: var(--f-display); font-weight: 900; font-size: 44px; fill: var(--brick); }
.seal__small { font-family: var(--f-mono); font-size: 12px; letter-spacing: 3px; fill: var(--brick); }
.seal svg > text:first-of-type, .seal textPath { transform-origin: 100px 100px; }
.estatua { margin: 0; display: flex; flex-direction: column; align-items: center; }
/* the bust is a transparent cutout (SITE-TOOLS/_estatua.py), centred on the head, flat base on the plinth */
.estatua__img { position: relative; width: min(84%, 340px); }
.estatua__img img { width: 100%; }
/* the gleam runs only over the bronze: this box is masked with the statue's own alpha (inline, set by _build.py)
   and the band moves inside it */
.estatua__shine { position: absolute; inset: 0; z-index: 2; pointer-events: none; overflow: hidden; mix-blend-mode: soft-light; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; }
.estatua__shine::before { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 45%; transform: translateX(-160%); background: linear-gradient(100deg, rgba(255, 236, 200, 0), rgba(255, 236, 200, .6), rgba(255, 236, 200, 0)); animation: shine 5.5s ease-in-out infinite paused; }
.estatua.is-live .estatua__shine::before { animation-play-state: running; }
/* an even sweep (~1.5 s over the bronze), then a rest; an ease-out crossed it in 0.4 s and nobody saw it */
@keyframes shine { 0%, 50% { transform: translateX(-160%); } 100% { transform: translateX(330%); } }
/* stone plinth, bronze plaque */
.estatua__base { width: min(100%, 400px); margin-top: -1px; padding: 20px 14px 24px; text-align: center; background: linear-gradient(180deg, var(--line-n), var(--panel)); border-top: 3px solid var(--bronze-1); border-radius: var(--r-0); box-shadow: var(--sh-1); }
.estatua__base span { display: inline-block; padding: .55rem 1rem .45rem; background: var(--bronze-2); color: var(--bronze-3); outline: 1.5px solid var(--bronze-1); outline-offset: -5px; font-family: var(--f-display); font-weight: 900; text-transform: uppercase; font-size: 1.1rem; line-height: 1.15; letter-spacing: .06em; }
.estatua figcaption { margin-top: 1rem; font-size: .72rem; color: var(--mute-n); text-transform: uppercase; letter-spacing: .06em; text-align: center; }

/* ------------------------------------------------------------------------ faq */
.faq { padding: clamp(90px, 14vh, 160px) 0; }
.faq__wrap { display: grid; gap: 30px; }
@media (min-width: 1001px) { .faq__wrap { grid-template-columns: .8fr 1.2fr; } .faq__wrap > div:first-child { position: sticky; top: 110px; align-self: start; } }
.faq__list { border-top: 2px solid var(--ink); }
.faq__item { border-bottom: 1px solid rgba(20, 18, 15, .18); }
.faq__item summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 22px 0; cursor: pointer; }
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item h3 { font-family: var(--f-display); font-weight: 800; text-transform: uppercase; font-size: clamp(1.3rem, 1rem + 1vw, 1.9rem); line-height: 1.05; }
.faq__icon { position: relative; flex: none; width: 34px; height: 34px; border: 1.5px solid var(--ink); border-radius: var(--r-2); }
.faq__icon::before, .faq__icon::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 2px; margin: -1px 0 0 -6px; background: var(--ink); transition: transform .4s var(--ease); }
.faq__icon::after { transform: rotate(90deg); }
.faq__item[open] .faq__icon { background: var(--ink); }
.faq__item[open] .faq__icon::before, .faq__item[open] .faq__icon::after { background: var(--paper); }
.faq__item[open] .faq__icon::after { transform: rotate(0deg); }
.faq__a { overflow: hidden; }
.faq__a p { padding: 0 0 22px; margin: 0; max-width: 60ch; color: var(--mute-p); font-size: 1.08rem; }

/* ------------------------------------------------------------------------ como (serp) */
.como { padding: clamp(90px, 14vh, 160px) 0; }
.como__grid { display: grid; gap: clamp(32px, 6vw, 80px); align-items: start; margin-top: 1rem; }
@media (min-width: 1001px) { .como__grid { grid-template-columns: .9fr 1.1fr; } }
.como__text p { color: var(--fg-2); max-width: 50ch; }
.como__big { font-family: var(--f-display); font-weight: 900; text-transform: uppercase; font-size: clamp(2rem, 1.4rem + 2.4vw, 3.4rem) !important; line-height: .95; color: var(--paper) !important; max-width: 16ch !important; }
.serp { background: #FFFFFF; color: #1F1F1F; border-radius: var(--r-1); padding: 18px; box-shadow: var(--sh-2); font-family: Arial, Helvetica, sans-serif; }
.serp__bar { display: flex; align-items: center; gap: 12px; border: 1px solid #DADCE0; border-radius: var(--r-2); padding: 10px 16px; margin-bottom: 18px; }
.serp__g { font-family: var(--f-display); font-weight: 900; font-size: 1.3rem; color: var(--brick-dk); }
.serp__q { font-size: .92rem; color: #1F1F1F; }
.serp__caret { width: 2px; height: 1.1em; background: #1F1F1F; animation: blink 1s steps(1) infinite; }
.serp__ai { border-radius: var(--r-1); padding: 14px 16px; margin-bottom: 12px; background: #F0F4F9; }
.serp__ai--after { background: #FDF3E4; border: 1.5px solid var(--sun); }
.serp__label { font-size: .66rem; letter-spacing: .08em; text-transform: uppercase; color: #5F6368; margin-bottom: .4rem; }
.serp__ai--after .serp__label { color: var(--brick-dk); }
.serp__txt { margin: 0; font-size: .95rem; line-height: 1.55; color: #1F1F1F; }
.serp__ai--before.is-struck .serp__txt { text-decoration: line-through; text-decoration-color: var(--brick); text-decoration-thickness: 2px; color: #70757A; }
.serp__result { display: flex; flex-direction: column; gap: 2px; padding: 12px 4px 0; }
.serp__url { font-size: .75rem; color: #202124; }
.serp__title { font-size: 1.15rem; color: #1A0DAB; }
.serp__desc { font-size: .88rem; color: #4D5156; line-height: 1.5; }
.pasos { list-style: none; margin: clamp(48px, 8vh, 80px) 0 0; padding: 0; display: grid; gap: 1px; background: var(--line-n); border: 1px solid var(--line-n); border-radius: var(--r-1); overflow: hidden; }
@media (min-width: 800px) { .pasos { grid-template-columns: repeat(4, 1fr); } }
.pasos li { background: var(--night); padding: 22px; display: flex; flex-direction: column; gap: .35rem; }
.pasos .mono { color: var(--sun); font-size: .8rem; }
.pasos strong { font-family: var(--f-display); font-weight: 800; text-transform: uppercase; font-size: 1.4rem; line-height: 1.05; }
.pasos span:last-child { color: var(--mute-n); font-size: .92rem; }
.como__cta { margin: clamp(40px, 7vh, 70px) 0 0; }
.cta { display: inline-flex; align-items: center; gap: .8rem; padding: 1.1rem 1.8rem; border-radius: var(--r-2); background: var(--brick-dk); color: var(--paper); text-decoration: none; font-weight: 600; font-size: 1.1rem; box-shadow: var(--sh-1); transition: background-color .3s var(--ease); will-change: transform; }
.cta:hover { background: var(--brick); }

/* ------------------------------------------------------------------------ pie */
.pie { padding: clamp(80px, 12vh, 140px) 0 50px; border-top: 1px solid var(--line-n); }
.pie__grid { display: grid; gap: 20px; align-items: end; }
@media (min-width: 901px) { .pie__grid { grid-template-columns: 1.2fr .8fr; } }
.pie__time { font-family: var(--f-display); font-weight: 900; font-size: clamp(6rem, 3rem + 16vw, 17rem); line-height: .8; margin: 0; color: transparent; -webkit-text-stroke: 2px var(--sun); font-variant-numeric: tabular-nums; }
.pie__line { font-family: var(--f-display); font-weight: 900; text-transform: uppercase; font-size: clamp(1.8rem, 1.2rem + 2vw, 3rem); line-height: 1; }
.pie__who { color: var(--mute-n); }
.pie__cta { margin: 1.4rem 0 1.6rem; }
.pie__links { display: flex; flex-wrap: wrap; gap: 12px 24px; }
.pie__links a { text-decoration: none; border-bottom: 1.5px solid var(--sun); padding-bottom: 2px; }
.pie__legal { font-size: .7rem; color: var(--mute-n); text-transform: uppercase; letter-spacing: .08em; margin-top: 1.4rem; }

/* 404 */
.p404 { min-height: 100svh; display: grid; place-items: center; background: var(--night); color: var(--paper); text-align: center; padding: 20px; }

/* ------------------------------------------------------------------------ reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .grain { display: none; }
}