/* Parque General San Martín · 130 años — v3 (paleta del calendario oficial) */

:root {
  /* the official calendar: pine ground, forest bands, lime accents, white */
  --pino: #004A39;           /* ground of the calendar; ink on light grounds */
  --bosque: #0C5537;         /* the bands and silhouettes of the calendar */
  --lima: #92C020;           /* the flags, the times, every accent */
  --white: #FFFFFF;
  /* contrast and shade pair */
  --salvia: #C7CBB8;         /* light ground; secondary text on dark */
  --salvia-hi: #D8DBCC;      /* one tone step up from salvia, for hover */
  --oliva: #3D4337;          /* shadows, scrims, secondary text on light */
  --verde-marca: #3DA535;    /* the original brand green, kept on the hero's 130 AÑOS banner */
  --shadow: rgba(61, 67, 55, .5);

  --ink: var(--pino);
  --ink-soft: var(--oliva);

  --font: "Montserrat", system-ui, sans-serif;

  --t-mega: clamp(88px, 14vw, 240px);
  --t-h2: clamp(44px, 6.4vw, 104px);
  --t-lead: clamp(20px, 1.7vw, 24px);
  --t-body: 17px;
  --t-small: 14px;

  --margin: clamp(20px, 4vw, 56px);
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --ease-spring: cubic-bezier(0.34, 1.4, 0.64, 1);
}

*, *::before, *::after { box-sizing: border-box; }
/* a reload or a #link: the page is held blank while the scenes are built and the scroll is put back
   (head script + restoreScroll in app.js), then fades in at the right place */
body { transition: opacity .35s ease; }
.is-restoring body { opacity: 0; transition: none; }
@media (prefers-reduced-motion: reduce) { body { transition: none; } }
/* the canvas is the hero's own green: nothing light can show behind a half-painted first frame */
html { -webkit-text-size-adjust: 100%; overflow-x: clip; background: var(--pino); }
body {
  margin: 0; background: var(--salvia); color: var(--ink);
  font-family: var(--font); font-size: var(--t-body); line-height: 1.55;
  -webkit-font-smoothing: antialiased; overflow-x: clip;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3, p, dl, dd, figure, ol { margin: 0; }
::selection { background: var(--lima); color: var(--pino); }
:focus-visible { outline: 3px solid var(--pino); outline-offset: 3px; }
.portones :focus-visible, .programa :focus-visible, .footer :focus-visible, .anios :focus-visible, .nav.on-dark :focus-visible, .nav.is-green :focus-visible { outline-color: var(--lima); }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

.skip { position: absolute; left: 16px; top: -60px; z-index: 100; background: var(--white); color: var(--ink); padding: 12px 16px; text-decoration: none; font-weight: 600; }
.skip:focus { top: 16px; }

/* ---------- buttons: a flat fill that sweeps up on hover ---------- */
.btn {
  --bg: var(--bosque); --fg: var(--white); --sweep: var(--pino); --fg-hover: var(--white);
  position: relative; overflow: hidden; isolation: isolate;
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 54px; padding: 0 28px;
  background: var(--bg); color: var(--fg);
  font: 600 16px/1 var(--font); text-decoration: none; border: 0; cursor: pointer;
  transition: color .3s ease, transform .16s var(--ease-out);
}
.btn::before {
  content: ""; position: absolute; inset: 0; z-index: -1; background: var(--sweep);
  transform: translateY(101%); transition: transform .45s var(--ease-out);
}
.btn:active { transform: scale(.97); }
@media (hover: hover) and (pointer: fine) {
  .btn:hover { color: var(--fg-hover); }
  .btn:hover::before { transform: translateY(0); }
}
.btn--light { --bg: var(--white); --fg: var(--pino); --sweep: var(--lima); --fg-hover: var(--pino); }
.btn--nav { min-height: 44px; padding: 0 20px; font-size: 14px; --bg: var(--white); --fg: var(--pino); --sweep: var(--lima); --fg-hover: var(--pino); }

/* ---------- nav ---------- */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 50; color: var(--white);
  transition: transform .5s var(--ease-out), background-color .4s ease, color .4s ease;
}
.nav__inner { display: flex; align-items: center; gap: 32px; padding: 18px var(--margin); }
.nav__brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 800; font-size: 20px; letter-spacing: -0.02em; text-decoration: none; }
.nav__mark { width: 34px; height: 22px; }
.nav__links { display: flex; gap: 28px; list-style: none; margin: 0 0 0 auto; padding: 0; }
.nav__links a { position: relative; text-decoration: none; font-weight: 600; font-size: 14px; padding-bottom: 4px; }
.nav__links a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: currentColor; transform: scaleX(0); transform-origin: 100% 50%; transition: transform .35s var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .nav__links a:hover::after { transform: scaleX(1); transform-origin: 0 50%; } }
.nav.is-solid { background: var(--salvia); color: var(--ink); }
.nav.is-solid .btn--nav { --bg: var(--pino); --fg: var(--white); --sweep: var(--bosque); --fg-hover: var(--white); }
.nav.is-solid :focus-visible { outline-color: var(--pino); }
.nav.is-green { background: var(--pino); color: var(--white); }
.nav.is-hidden { transform: translateY(-100%); }

/* ---------- pennant (the 130 AÑOS banderola) ---------- */
.pennant {
  --notch: 24%;
  position: relative;
  background: var(--white); color: var(--verde-marca);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% calc(100% - var(--notch)), 0 100%);
}
.pennant__body { display: flex; flex-direction: column; align-items: center; }
.pennant__num { font-size: clamp(44px, 5vw, 80px); font-weight: 900; line-height: .9; letter-spacing: -0.04em; }
.pennant__word { font-size: clamp(22px, 2.2vw, 34px); font-weight: 400; text-transform: uppercase; line-height: 1.1; }

/* =========================================================
   1 · PORTONES — the gates open onto the park
   ========================================================= */
.portones .scene-stage { height: 100svh; min-height: 640px; background: var(--pino); color: var(--white); overflow: clip; }
.portones__park, .portones__gate, .portones__scrim { position: absolute; inset: 0; }
.portones__park img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 60%; }
.portones__gate { perspective: 1800px; perspective-origin: 50% 45%; }
.leaf { position: absolute; top: 0; bottom: 0; width: 50.2%; overflow: hidden; backface-visibility: hidden; }
/* each leaf is 50.2% of the stage (they overlap a hair so no seam shows); its picture is exactly the
   stage's width, so both halves share one centre and split on the gate's own axis (the photo is cut
   symmetric about it by tools/prepare-hero.mjs) */
.leaf img { position: absolute; top: 0; height: 100%; width: calc(100% / 0.502); max-width: none; object-fit: cover; object-position: 50% var(--gate-y, 45%); }  /* the gate fills ~12-80% of the photo's height: keep it whole when the top or bottom is cut */
/* gate-placeholder:start (tools/make-placeholders.mjs) */
.leaf img, .js:not(.scenes-ready) .portones__gate { background: var(--pino) url("data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/4gHYSUNDX1BST0ZJTEUAAQEAAAHIAAAAAAQwAABtbnRyUkdCIFhZWiAH4AABAAEAAAAAAABhY3NwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAQAA9tYAAQAAAADTLQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAlkZXNjAAAA8AAAACRyWFlaAAABFAAAABRnWFlaAAABKAAAABRiWFlaAAABPAAAABR3dHB0AAABUAAAABRyVFJDAAABZAAAAChnVFJDAAABZAAAAChiVFJDAAABZAAAAChjcHJ0AAABjAAAADxtbHVjAAAAAAAAAAEAAAAMZW5VUwAAAAgAAAAcAHMAUgBHAEJYWVogAAAAAAAAb6IAADj1AAADkFhZWiAAAAAAAABimQAAt4UAABjaWFlaIAAAAAAAACSgAAAPhAAAts9YWVogAAAAAAAA9tYAAQAAAADTLXBhcmEAAAAAAAQAAAACZmYAAPKnAAANWQAAE9AAAApbAAAAAAAAAABtbHVjAAAAAAAAAAEAAAAMZW5VUwAAACAAAAAcAEcAbwBvAGcAbABlACAASQBuAGMALgAgADIAMAAxADb/2wBDAA4KCw0LCQ4NDA0QDw4RFiQXFhQUFiwgIRokNC43NjMuMjI6QVNGOj1OPjIySGJJTlZYXV5dOEVmbWVabFNbXVn/2wBDAQ8QEBYTFioXFypZOzI7WVlZWVlZWVlZWVlZWVlZWVlZWVlZWVlZWVlZWVlZWVlZWVlZWVlZWVlZWVlZWVlZWVn/wAARCAAZABQDASIAAhEBAxEB/8QAGAAAAwEBAAAAAAAAAAAAAAAAAAIEBQP/xAAkEAACAgICAgAHAAAAAAAAAAABAgARAwQSIQUyMUFCQ1Fhof/EABcBAQEBAQAAAAAAAAAAAAAAAAEEAgP/xAAaEQACAwEBAAAAAAAAAAAAAAAAAQIDERJR/9oADAMBAAIRAxEAPwDE19ZUBDCioBNidRiD2KH66nLx22lrk3Mi0V4hiOruWbu/opibGhD5WFLwN0fzObtkniKYVxcenhmPrFyGXtSLHUJJs+Rz4sxTHkUKoFDiOoTSlMNq8HQqwrGnX0g90Y7h75OvL+RNT4yrL6mOIn6Zmk4PuYiz/M8quEMnvCI6f//Z") 50% var(--gate-y, 45%) / cover no-repeat; }
@media (min-aspect-ratio: 1/1) { .leaf img, .js:not(.scenes-ready) .portones__gate { background-image: url("data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/4gHYSUNDX1BST0ZJTEUAAQEAAAHIAAAAAAQwAABtbnRyUkdCIFhZWiAH4AABAAEAAAAAAABhY3NwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAQAA9tYAAQAAAADTLQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAlkZXNjAAAA8AAAACRyWFlaAAABFAAAABRnWFlaAAABKAAAABRiWFlaAAABPAAAABR3dHB0AAABUAAAABRyVFJDAAABZAAAAChnVFJDAAABZAAAAChiVFJDAAABZAAAAChjcHJ0AAABjAAAADxtbHVjAAAAAAAAAAEAAAAMZW5VUwAAAAgAAAAcAHMAUgBHAEJYWVogAAAAAAAAb6IAADj1AAADkFhZWiAAAAAAAABimQAAt4UAABjaWFlaIAAAAAAAACSgAAAPhAAAts9YWVogAAAAAAAA9tYAAQAAAADTLXBhcmEAAAAAAAQAAAACZmYAAPKnAAANWQAAE9AAAApbAAAAAAAAAABtbHVjAAAAAAAAAAEAAAAMZW5VUwAAACAAAAAcAEcAbwBvAGcAbABlACAASQBuAGMALgAgADIAMAAxADb/2wBDAA4KCw0LCQ4NDA0QDw4RFiQXFhQUFiwgIRokNC43NjMuMjI6QVNGOj1OPjIySGJJTlZYXV5dOEVmbWVabFNbXVn/2wBDAQ8QEBYTFioXFypZOzI7WVlZWVlZWVlZWVlZWVlZWVlZWVlZWVlZWVlZWVlZWVlZWVlZWVlZWVlZWVlZWVlZWVn/wAARCAASACADASIAAhEBAxEB/8QAGQAAAwADAAAAAAAAAAAAAAAAAAQFAQIG/8QAIxAAAgICAgEEAwAAAAAAAAAAAQIAAwQREjETISIyYTNSsf/EABgBAAIDAAAAAAAAAAAAAAAAAAACAQME/8QAGhEAAwADAQAAAAAAAAAAAAAAAAECERIhMf/aAAwDAQACEQMRAD8A5nH8Va1K6FuIIL98B9ymlKlmWnVmgCCp2JDxPKn4rEQnvZ7H3HsW6zEYBGQbPu0vIGK6rHC2dc9KBr4OiWHgSOyQBJthpPNqrfVnJIY66muTbdlnVtoJP7DQURO6lt7ayk6HoJC29bHdT4kYx/iI/jfIwhHM4ZA/knX9QhAD/9k="); } }
/* gate-placeholder:end */
.leaf--l { left: 0; transform-origin: 0 50%; }
.leaf--l img { left: 0; }
.leaf--r { right: 0; transform-origin: 100% 50%; }
.leaf--r img { right: 0; }
.portones__scrim { background: rgba(0, 46, 35, .38); }

.portones__pennant {
  position: absolute; top: 80px; right: var(--margin); z-index: 3;
  width: clamp(110px, 10vw, 168px);
  transform-origin: 50% 0;
}
/* the outer box drops in and leaves with the scene; the banner inside is the cloth that sways */
.portones__pennant .pennant { padding: clamp(92px, 9vw, 124px) 0 clamp(56px, 5vw, 76px); }
/* the lockup and the foot share one column between the nav and the bottom edge, so they never
   collide: the lockup sits centred in the free space, the foot closes the screen. The pennant owns
   the top-right corner; the lockup's width is capped so it always ends before the pennant starts. */
.portones__stack {
  position: absolute; left: var(--margin); right: var(--margin); top: 80px; bottom: clamp(24px, 4.5svh, 40px); z-index: 2;
  display: flex; flex-direction: column; gap: clamp(20px, 4svh, 40px);
}
.portones__lockup {
  align-self: center; margin-block: auto; transform-origin: 50% 50%;
  display: flex; flex-direction: column; align-items: center; text-align: center; width: max-content;
}
.portones__mark { width: clamp(56px, min(6vw, 10svh), 100px); height: clamp(36px, min(3.8vw, 6.4svh), 62px); margin-bottom: 4px; overflow: visible; }
.portones__title { font-size: clamp(72px, min(13vw, 21svh), 230px); font-weight: 900; line-height: .86; letter-spacing: -0.045em; text-transform: uppercase; }
.portones__sub { display: block; font-size: clamp(18px, min(2.2vw, 3.6svh), 38px); font-weight: 700; letter-spacing: .01em; line-height: 1.25; margin-top: .3em; }
/* hero logo: the calendar's logo artwork, cropped (1100 × 630 of its 1220 × 1166) to the gull, PARQUE and GENERAL SAN MARTÍN */
.logo-crop { display: block; position: relative; width: clamp(200px, min(25vw, 44svh), 500px); aspect-ratio: 1100 / 630; overflow: hidden; }
.logo-crop img { position: absolute; max-width: none; height: auto; width: 110.909%; left: -5.4545%; top: -6.349%; }
/* glass card behind "Pasá, que es tu parque." so the water's glare never swallows it */
.statement__card {
  display: inline-block; padding: .24em .6em .3em; border-radius: 16px; line-height: 1.2;
  background: rgba(0, 74, 57, .74); border: 1px solid rgba(255, 255, 255, .18);  /* --pino, the calendar's dark green */
  -webkit-backdrop-filter: blur(16px) saturate(1.1); backdrop-filter: blur(16px) saturate(1.1);
  box-shadow: 0 10px 34px rgba(0, 0, 0, .28);
}
.line { display: block; overflow: hidden; padding-bottom: .04em; }
.line__in { display: block; }
.portones__title .char { display: inline-block; }

.portones__foot {
  display: grid; grid-template-columns: auto 1fr; align-items: end; gap: 32px;
}
.portones__foot { grid-template-columns: 1fr auto; }   /* the lead on the left, the dates in the bottom-right corner under the banner */
.portones__date { order: 2; text-align: right; font-size: 17px; font-weight: 700; line-height: 1.4; white-space: nowrap; }
.portones__lead { font-size: 17px; font-weight: 500; max-width: 34ch; }
.portones__statement {
  position: absolute; left: 0; right: 0; top: 50%; z-index: 2; transform: translateY(-50%);
  text-align: center; font-size: clamp(28px, 2.5vw, 36px); font-weight: 800; letter-spacing: -0.02em;
  display: none;
}
.portones__hint { display: none; }

/* live: the scene drives these */
.portones.is-live .portones__statement { display: block; opacity: 0; }
.portones.is-live .portones__hint,
.js:not(.scenes-ready) .portones__hint {
  display: flex; flex-direction: column; align-items: center; gap: 6px; margin-top: clamp(10px, 2.4svh, 26px);
  font-size: 16px; font-weight: 700; letter-spacing: .02em;
}
/* the hint only exists once the scene is live, and it pushes the title up when it arrives: until then its
   room is kept (hidden), so a title that rises before the scenes are built does not jump. Without motion
   the scene never goes live and there is no hint to make room for. */
@media (prefers-reduced-motion: reduce) { .js:not(.scenes-ready) .portones__hint { display: none; } }
.js:not(.scenes-ready) .portones__hint { visibility: hidden; }
.hint__arrow { width: 18px; height: clamp(22px, 3.4svh, 30px); overflow: visible; }
@media (prefers-reduced-motion: no-preference) {
  .js .portones.is-live .portones__hint { animation: fade-up .8s var(--ease-out) 1.35s both; }
  .hint__text { animation: hint-glow 2.2s ease-in-out 2.2s infinite; }
  .hint__arrow { animation: hint-arrow 2.2s var(--ease-in-out) 2.2s infinite; }
}
/* one cycle: the arrow slides down and the words light up as it lands */
@keyframes hint-arrow {
  0% { transform: translateY(-8px); opacity: 0; filter: drop-shadow(0 0 0 rgba(255, 255, 255, 0)); } /* taste-skill-ignore: glow requested by the client */
  30% { opacity: 1; }
  55% { transform: translateY(6px); opacity: 1; filter: drop-shadow(0 0 8px rgba(255, 255, 255, 1)); } /* taste-skill-ignore: glow requested by the client */
  100% { transform: translateY(12px); opacity: 0; filter: drop-shadow(0 0 0 rgba(255, 255, 255, 0)); } /* taste-skill-ignore: glow requested by the client */
}
@keyframes hint-glow {
  0%, 25%, 85%, 100% { text-shadow: 0 0 0 rgba(255, 255, 255, 0); } /* taste-skill-ignore: glow requested by the client */
  55% { text-shadow: 0 0 10px rgba(255, 255, 255, 1), 0 0 22px rgba(255, 255, 255, .7), 0 0 38px rgba(146, 192, 32, 1); } /* taste-skill-ignore: glow requested by the client */
}

/* load choreography (CSS, so it runs while the page is still busy) */
.js .portones__pennant { animation: drop 1.2s var(--ease-out) .2s both; }
@keyframes drop { from { translate: 0 -105%; } to { translate: 0 0; } }
.js .portones__mark path { stroke-dasharray: 80; stroke-dashoffset: 80; animation: draw 1s var(--ease-in-out) .25s forwards; }
.js .portones__mark path + path { animation-delay: .5s; }
@keyframes draw { to { stroke-dashoffset: 0; } }
.js .portones__title .char { transform: translateY(105%); animation: rise .9s var(--ease-out) forwards; animation-delay: calc(.45s + var(--i) * 55ms); }
.js .portones__sub { transform: translateY(105%); animation: rise .9s var(--ease-out) .85s forwards; }
.js .portones__logo { transform: translateY(105%); animation: rise .9s var(--ease-out) .45s forwards; }
@keyframes rise { to { transform: translateY(0); } }
.js .portones__foot > * { opacity: 0; animation: fade-up .8s var(--ease-out) forwards; }
.js .portones__foot > :nth-child(1) { animation-delay: 1s; }
.js .portones__foot > :nth-child(2) { animation-delay: 1.08s; }
.js .portones__foot > :nth-child(3) { animation-delay: 1.16s; }
@keyframes fade-up { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
.js .portones__gate img { animation: settle 2.4s var(--ease-out) both; }
@keyframes settle { from { scale: 1.12; } to { scale: 1; } }

/* =========================================================
   2 · PROGRAMA — the official calendar, its flags hung as cloth
   ========================================================= */
/* the printed calendar's own artwork: the Fuente de los Continentes and the leaves behind the days,
   the tiled band with Mendoza's crest at the foot (cut from the client's piece, assets/cal/) */
.programa { position: relative; z-index: 2; overflow-x: clip; color: var(--white); background: var(--pino); }
/* the fountain stands on the tiled band, as on the poster: the illustration sits on the field's floor,
   at its own proportions (never cropped, never stretched) and its flat ground fades up into the
   section's green, so no edge of the artwork can ever be seen */
.programa__field { display: flow-root; padding-top: 40px; position: relative; overflow: clip; }
/* leaves, butterflies and bees carried by the wind (app.js, WindLeaves): over the fountain artwork, under the flags and the text.
   One screen tall and stuck to the window while the calendar scrolls; the creatures are drawn in the section's own coordinates */
.wind-leaves { position: sticky; top: 0; display: block; width: 100%; height: 100svh; margin-bottom: -100svh; z-index: 0; pointer-events: none; }
.programa__field::before {
  content: ""; position: absolute; left: -34%; right: -34%; bottom: 0; z-index: 0;
  aspect-ratio: 2800 / 3750;
  background: url("assets/cal/fondo-fuente-grande.png") center bottom / 100% 100% no-repeat;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 10%);
  mask-image: linear-gradient(to bottom, transparent, #000 10%);
  pointer-events: none;
}
.programa__logo { display: block; width: clamp(200px, 22vw, 320px); height: auto; margin: 0 auto clamp(48px, 6vw, 96px); }
.programa__band { position: relative; aspect-ratio: 1600 / 261; background: var(--pino); }
.programa__band img { position: absolute; left: 50%; top: 35%; width: clamp(240px, 28%, 400px); height: auto; transform: translate(-50%, -50%); }
.programa__arch {
  position: absolute; left: 50%; bottom: calc(100% - 2px); width: 100vw; height: clamp(100px, 16vw, 260px);
  margin-left: -50vw; background: var(--pino);
  border-radius: 50% 50% 0 0 / 100% 100% 0 0; transform-origin: 50% 100%;
}
/* before the scenes are built the page is unpinned and this arch sits over the foot of the hero, a
   flash of green dome; app.js adds `scenes-ready` the moment the scenes exist (head script: net) */
.js:not(.scenes-ready) .programa__arch { visibility: hidden; }
.programa__inner { position: relative; z-index: 1; max-width: 1240px; margin: 0 auto; padding: 0 var(--margin); }
.programa__head {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 24px 64px; align-items: end;
  margin-bottom: clamp(48px, 6vw, 88px);
}
.programa__title { font-size: clamp(48px, 7.4vw, 112px); line-height: .92; letter-spacing: -0.04em; text-transform: uppercase; }
.programa__title .word { display: block; }
.programa__kicker { font-weight: 300; color: var(--lima); font-size: .52em; letter-spacing: .02em; margin-bottom: .08em; }
.programa__month { font-weight: 900; }
.programa__aside { display: grid; gap: 24px; justify-items: start; padding-bottom: .4em; }
.programa__note { max-width: 40ch; font-size: 19px; font-weight: 600; line-height: 1.4; }
.programa__note strong { display: block; margin-top: 4px; color: var(--lima); }

.filters { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  appearance: none; border: 0; cursor: pointer; font: 600 14px/1 var(--font);
  min-height: 44px; padding: 0 18px; border-radius: 999px;
  background: var(--bosque); color: var(--white);
  transition: background-color .25s ease, color .25s ease, transform .16s var(--ease-out);
}
@media (hover: hover) and (pointer: fine) { .chip:hover { background: var(--oliva); } }
.chip:active { transform: scale(.96); }
.chip[aria-pressed="true"] { background: var(--lima); color: var(--pino); }

/* the four days, two by two as on the printed calendar */
.cal { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(40px, 5vw, 72px) clamp(32px, 5vw, 80px); align-items: start; align-content: start; }  /* each day (and its flag) takes the height of its own list: short days 6 and 9, long days 7 and 8 */
.cal__col { display: grid; gap: clamp(40px, 5vw, 72px); align-content: start; min-width: 0; }  /* left: 6 and 8, right: 7 and 9; each day rises under the one above it */
.day { position: relative; display: grid; grid-template-columns: clamp(64px, 7vw, 100px) minmax(0, 1fr); gap: clamp(16px, 2vw, 28px); }
.day.is-today .day__num::after { content: "hoy"; display: block; font-size: 13px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--bosque); margin-top: 2px; }

/* the flag: a white head with the date, notched where the lime cloth begins, the weekday read upward */
.day__pole { position: relative; }
.day__pole::before {             /* its shade, in the olive of the contrast pair */
  content: ""; position: absolute; inset: 10px -8px -10px 8px; border-radius: 22px;
  background: var(--oliva); opacity: .55; filter: blur(10px);
}
.day__roll { position: relative; height: 100%; }
.day__flag {
  --notch: 26px;
  position: relative; display: flex; flex-direction: column; height: 100%; min-height: 360px;
  background: var(--lima); color: var(--pino); border-radius: 22px; overflow: hidden;
}
.day__top {
  display: flex; justify-content: center; align-items: flex-start;
  padding: 18px 4px calc(var(--notch) + 22px); background: var(--white);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% calc(100% - var(--notch)), 0 100%);
}
.day__num { font-size: clamp(34px, 3.6vw, 52px); font-weight: 900; line-height: 1; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; text-align: center; }
.day__dow {
  margin-top: auto; padding: 24px 0 26px; align-self: center;
  writing-mode: vertical-rl; transform: rotate(180deg);
  font-size: clamp(30px, 3.3vw, 48px); font-weight: 900; letter-spacing: .01em; line-height: 1; text-transform: uppercase;
}
/* cloth: app.js draws each flag as one SVG shape whose outline follows the wave; the flag's own
   box stays for layout and for its text, with its paint handed to the SVG behind it. */
.cloth { position: absolute; left: 0; top: 0; z-index: 0; overflow: visible; pointer-events: none; }
.is-cloth-src { position: relative; z-index: 1; background: none !important; clip-path: none !important; overflow: visible !important; }
.is-cloth-src .day__top { background: none; clip-path: none; }

/* the day's list, set like the printed piece */
.day__body { padding-top: 6px; min-width: 0; }
.acts { display: grid; gap: 22px; }
.acts__when {
  display: inline-block; margin: 0 0 12px; padding: 4px 12px; border-radius: 999px;
  font-size: 13px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; line-height: 1.2;
  background: var(--lima); color: var(--pino);
}
.acts__when--tarde, .acts__when--todo { background: none; color: var(--lima); box-shadow: inset 0 0 0 1.5px var(--lima); }
.acts__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.act { transition: opacity .5s var(--ease-out), transform .5s var(--ease-out); }
.act__text { min-width: 0; }
.act { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.act__head { font-size: 18px; font-weight: 400; line-height: 1.3; }
.act__head strong, .act__desc strong { font-weight: 800; }
.act__desc em { font-style: italic; }
.act__small { font-size: .72em; font-weight: 400; }
.act.is-music .act__head::before { content: "♪"; color: var(--lima); font-weight: 800; margin-right: .35em; }
.act__time { color: var(--lima); font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; margin-right: .3em; }
.act__desc { margin-top: 2px; font-size: 16px; font-weight: 400; line-height: 1.45; }
.act__ticket { position: relative; flex: none; display: grid; place-items: center; width: 72px; height: 72px; margin-top: -4px; color: var(--pino); text-decoration: none; transition: transform .3s var(--ease-out); }
.act__ticket svg { position: absolute; inset: 0; width: 100%; height: 100%; fill: var(--lima); }
.act__ticket span { position: relative; font-size: 12px; font-weight: 800; line-height: 1.1; text-align: center; }
.act__ticket:hover, .act__ticket:focus-visible { transform: scale(1.08) rotate(-4deg); }
.act__ticket:focus-visible { outline: 2px solid var(--white); outline-offset: 3px; }
.act.is-filtered-out { display: none; }
.act.is-now { position: relative; }
.act.is-now::before { content: ""; position: absolute; inset: 0 auto 0 -14px; width: 4px; border-radius: 2px; background: var(--lima); }
.act__badge { display: inline-block; margin-left: 8px; font-size: 13px; font-weight: 800; color: var(--pino); background: var(--white); padding: 2px 8px; border-radius: 999px; vertical-align: 2px; }
.acts__empty { color: var(--salvia); font-weight: 600; }
.acts.is-leaving .act, .acts.is-leaving .acts__when { opacity: 0; transform: translateY(-10px); transition-duration: .2s; transition-delay: 0ms !important; }
.acts.is-entering .act, .acts.is-entering .acts__when { opacity: 0; transform: translateY(18px); transition: none; }
.acts__when { transition: opacity .5s var(--ease-out), transform .5s var(--ease-out); }
.programa__foot { margin: clamp(48px, 6vw, 80px) 0 clamp(48px, 6vw, 80px); max-width: 64ch; font-size: 15px; font-weight: 600; color: var(--salvia); }
.noscript { grid-column: 1 / -1; }

/* entrance: each flag unrolls from its rail, then the day's list rises in */
@media (prefers-reduced-motion: no-preference) {
  /* unrolled, the clip stands clear of the cloth so the swinging tail is never cut */
  .js .day .day__roll { clip-path: inset(0 -24px -24px -24px); transition: clip-path 1.2s var(--ease-in-out); transition-delay: var(--d, 0ms); }
  .js .day:not(.is-in) .day__roll { clip-path: inset(0 -24px 100% -24px); }
  .js .day .day__pole::before { transition: opacity .8s ease calc(var(--d, 0ms) + .7s); }
  .js .day:not(.is-in) .day__pole::before { opacity: 0; }
  .js .day .day__body { transition: opacity .8s var(--ease-out), transform .8s var(--ease-out); transition-delay: calc(var(--d, 0ms) + .35s); }
  .js .day:not(.is-in) .day__body { opacity: 0; transform: translateY(24px); }
}

/* =========================================================
   3 · AÑOS — 1896 → 2026
   ========================================================= */
.anios { background: var(--bosque); color: var(--white); }
.anios .scene-stage {
  display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 24px;
  padding: 120px var(--margin) 80px; min-height: 100svh; align-content: start;
}
.anios__title { grid-column: 1 / -1; font-size: clamp(36px, 4vw, 60px); font-weight: 800; letter-spacing: -0.035em; line-height: 1; max-width: 16ch; }
.anios__year { display: none; }
.anios__progress { display: none; }
.anios__photos { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; margin-top: 56px; }
.anios__frame { display: block; overflow: clip; }  /* holds the zoom inside the photo's own box */
.anios__photo img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.anios__photo figcaption { margin-top: 10px; font-size: var(--t-small); color: var(--salvia); }
.anios__beats { grid-column: 1 / -1; list-style: none; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 32px 24px; margin-top: 48px; }
.beat__year { display: block; font-size: 56px; font-weight: 900; letter-spacing: -0.04em; line-height: 1; color: var(--lima); }
.beat p { margin-top: 8px; font-size: 20px; line-height: 1.4; max-width: 34ch; }
.anios__progress { display: none; }

.anios.is-live .scene-stage { grid-template-rows: auto minmax(0, 1fr) auto auto; padding-top: clamp(88px, 13svh, 112px); padding-bottom: clamp(20px, 4svh, 40px); height: 100svh; }
.anios.is-live .anios__title { grid-column: 1 / span 7; grid-row: 1; }
.anios.is-live .anios__year {
  display: flex; grid-column: 1 / span 7; grid-row: 2; align-self: center;
  font-size: clamp(88px, min(20vw, 28svh), 340px); font-weight: 900; letter-spacing: -0.06em; line-height: 1;
  font-variant-numeric: tabular-nums; color: var(--lima);
}
.digit { display: block; height: 1em; overflow: hidden; }
.digit__col { display: flex; flex-direction: column; }
.digit__col span { display: block; height: 1em; text-align: center; }
.digit__col span::before { content: attr(data-n); }
.anios.is-live .anios__photos { display: block; position: relative; grid-column: 8 / -1; grid-row: 1 / span 3; margin: 0 0 32px; align-self: center; justify-self: end; height: min(60svh, 620px); aspect-ratio: 4 / 5; max-width: 100%; }
.anios.is-live .anios__photo { position: absolute; inset: 0; }
.anios.is-live .anios__frame { position: absolute; inset: 0; box-shadow: 18px 22px 0 var(--pino); }
.anios.is-live .anios__photo img { height: 100%; aspect-ratio: auto; }
.anios.is-live .anios__photo figcaption { position: absolute; left: 0; bottom: -30px; margin: 0; }
.anios.is-live .anios__beats { display: grid; grid-column: 1 / span 6; grid-row: 3; margin: 2svh 0 0; }
.anios.is-live .beat { grid-area: 1 / 1; }
.anios.is-live .beat__year { display: none; }
.anios.is-live .beat p { font-size: clamp(18px, min(1.9vw, 3.6svh), 28px); font-weight: 600; max-width: 32ch; margin: 0; }
.anios.is-live .anios__progress { display: block; grid-column: 1 / -1; grid-row: 4; margin-top: clamp(16px, 3.4svh, 32px); height: 6px; background: var(--pino); }
.anios__progress span { display: block; height: 100%; background: var(--lima); transform-origin: 0 50%; transform: scaleX(0); }

/* =========================================================
   4 · RECORRIDO — a walk across the park
   ========================================================= */
.recorrido { background: var(--salvia); }
.recorrido .scene-stage { padding: 120px var(--margin) 96px; }
.recorrido__title { font-size: clamp(36px, 4vw, 60px); font-weight: 800; letter-spacing: -0.035em; line-height: 1; max-width: 18ch; }
.track { display: grid; gap: 72px; margin-top: 56px; }
.stop__pic { overflow: hidden; box-shadow: 14px 16px 0 var(--oliva); }
.stop__pic img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.stop__name { font-size: clamp(64px, 9vw, 150px); font-weight: 900; letter-spacing: -0.05em; line-height: .9; margin-top: -0.42em; position: relative; color: var(--pino); }
.stop__text { margin-top: 12px; font-size: 20px; max-width: 32ch; }
.recorrido__bar { display: none; }

.recorrido.is-live .scene-stage { height: 100svh; padding: 104px 0 56px; display: flex; flex-direction: column; }
.recorrido.is-live .recorrido__title { padding-inline: var(--margin); margin-bottom: 32px; }
.recorrido.is-live .track-window { margin: auto var(--margin) 0; overflow: clip; }
.recorrido.is-live .track {
  display: flex; gap: 6vw; padding-right: 12vw; width: max-content; align-items: flex-end;
}
.recorrido.is-live .stop { width: 46vw; flex: none; }
.recorrido.is-live .stop:nth-child(even) { width: 34vw; margin-bottom: 8vh; }
.recorrido.is-live .stop__pic { box-shadow: none; }
.recorrido.is-live .stop__pic img { aspect-ratio: auto; height: 46svh; transform: scale(1.18); }
.recorrido.is-live .stop:nth-child(even) .stop__pic img { height: 34svh; }
.recorrido.is-live .recorrido__bar { display: block; margin: 40px var(--margin) 0; height: 6px; background: var(--salvia-hi); }
.recorrido__bar span { display: block; height: 100%; background: var(--pino); transform-origin: 0 50%; transform: scaleX(0); }

/* =========================================================
   5 · CÓMO LLEGAR
   ========================================================= */
.llegar { position: relative; min-height: 130svh; }
.llegar__media { position: absolute; inset: 0; overflow: clip; }
.llegar__media img { width: 100%; height: 120%; object-fit: cover; object-position: 30% 50%; }
.llegar__rail { position: relative; min-height: 130svh; padding: 96px var(--margin) 60px; display: flex; justify-content: flex-end; }
.card { position: sticky; top: 96px; align-self: flex-start; width: 420px; background: var(--salvia); padding: 36px 36px 0; box-shadow: 0 28px 60px -12px var(--shadow); }
.card__title { font-size: 40px; font-weight: 800; letter-spacing: -0.03em; line-height: 1.05; }
.card__addr { margin-top: 16px; }
.hours { margin-top: 22px; display: grid; gap: 10px; }
.hours div { display: flex; justify-content: space-between; gap: 16px; }
.hours dd { font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; flex: none; }
.card__tip { margin-top: 22px; }
.card__btn { margin: 30px -36px 0; width: calc(100% + 72px); min-height: 60px; }

/* =========================================================
   FOOTER
   ========================================================= */
.footer { background: var(--pino); color: var(--white); overflow: clip; }
.footer__inner { min-height: 100svh; display: flex; flex-direction: column; padding: 40px var(--margin) 32px; }
.footer__top { display: grid; grid-template-columns: repeat(3, auto); justify-content: space-between; gap: 24px; font-size: 15px; font-weight: 600; }
.footer__up { align-self: start; text-decoration: none; font-weight: 700; color: var(--lima); }
@media (hover: hover) and (pointer: fine) { .footer__up:hover { text-decoration: underline; text-underline-offset: 4px; } }
.footer__mark { width: clamp(120px, 14vw, 220px); height: auto; margin: auto auto 0; overflow: visible; color: var(--lima); }
.footer__name {
  font-size: clamp(64px, 19.6vw, 360px); font-weight: 900; line-height: .9; letter-spacing: -0.06em;
  text-transform: uppercase; text-align: center; white-space: nowrap; margin: 12px 0 0; padding-bottom: .12em;
  overflow: clip; overflow-clip-margin: .2em;
}
.footer__name .char { display: inline-block; }
.footer__meta { margin-top: 40px; display: grid; grid-template-columns: 1fr auto; gap: 24px; align-items: end; font-size: var(--t-small); font-weight: 500; color: var(--salvia); }
.footer__meta a { text-decoration: none; font-weight: 700; color: var(--white); }
@media (hover: hover) and (pointer: fine) { .footer__meta a:hover { text-decoration: underline; text-underline-offset: 3px; } }
.footer__credits { text-align: center; max-width: 64ch; justify-self: center; }
.footer__meta p:last-child { text-align: right; }

/* ---------- quiet reveals (visible without JS and under reduced motion) ---------- */
@media (prefers-reduced-motion: no-preference) {
  .js .reveal { opacity: 0; transform: translateY(28px); transition: opacity .8s var(--ease-out), transform .8s var(--ease-out); transition-delay: var(--d, 0ms); }
  .js .reveal.is-in { opacity: 1; transform: none; }
}

/* =========================================================
   PHONE
   ========================================================= */
@media (max-width: 1080px) {
  .cal { grid-template-columns: minmax(0, 1fr); max-width: 680px; }
  .cal__col { display: contents; }  /* one column again: the days go back to 6, 7, 8, 9 by their order */
}
@media (max-width: 900px) {
  .nav__links { display: none; }
  .btn--nav { margin-left: auto; }
  .footer__inner { min-height: 80svh; }
  .programa__head { grid-template-columns: 1fr; }
}
@media (max-width: 767px) {
  .portones__pennant { right: 20px; top: 84px; width: 96px; }
  .portones__pennant .pennant { padding: 64px 0 40px; }
  .pennant__num { font-size: 38px; }
  .pennant__word { font-size: 18px; }
  .portones__lockup { margin-block: auto 0; transform-origin: 50% 100%; }  /* phone: below the pennant, not beside it */
  .portones__title { font-size: min(21vw, 13svh); }
  .portones__sub { font-size: 5.6vw; }
  .logo-crop { width: min(66vw, 38svh); }
  .portones__foot { grid-template-columns: 1fr; gap: 12px; }
  .portones__date { white-space: normal; }

  .programa__head { margin-bottom: 40px; }
  .programa__title { font-size: 13.4vw; }  /* "NOVIEMBRE" is about 6.5em wide: this keeps it inside the margins */
  .filters { gap: 6px; }
  .day { grid-template-columns: 58px minmax(0, 1fr); gap: 16px; }
  .day__flag { --notch: 18px; border-radius: 16px; min-height: 300px; }
  .day__pole::before { border-radius: 16px; }
  .day__top { padding: 12px 2px calc(var(--notch) + 14px); }
  .day__num { font-size: 28px; }
  .day__dow { font-size: 28px; padding: 18px 0 20px; }
  .programa__field::before { left: -50%; right: -50%; }  /* on a phone the artwork reads larger, still on the field's floor */
  .programa__band { aspect-ratio: auto; height: 150px; }
  .programa__band img { top: 50%; width: 250px; }
  .act__head { font-size: 17px; }
  .act.is-now::before { left: -10px; }

  .anios .scene-stage { padding-top: 96px; }
  .anios__photos, .anios__beats { grid-template-columns: 1fr; }
  .anios.is-live .scene-stage { grid-template-columns: 1fr; grid-template-rows: auto auto minmax(0, 1fr) auto auto; }
  .anios.is-live .anios__year { grid-column: 1; grid-row: 2; font-size: 30vw; margin-top: 12px; }
  .anios.is-live .anios__photos { grid-column: 1; grid-row: 3; aspect-ratio: auto; width: 100%; height: 100%; min-height: 0; justify-self: stretch; margin-top: 16px; }
  .anios.is-live .anios__frame { box-shadow: 10px 12px 0 var(--pino); }
  .anios.is-live .anios__beats { grid-column: 1; grid-row: 4; margin-top: 40px; }
  .anios.is-live .anios__progress { grid-row: 5; }
  .anios.is-live .anios__photos { margin-bottom: 0; }

  .stop__pic { box-shadow: 8px 10px 0 var(--oliva); }

  .llegar { min-height: auto; }
  .llegar__media { position: relative; height: 70svh; }
  .llegar__rail { min-height: 0; padding: 0 16px; margin-top: -80px; }
  .card { position: relative; top: 0; width: 100%; padding: 28px 24px 0; }
  .card__btn { margin-inline: -24px; width: calc(100% + 48px); }

  .footer__top { grid-template-columns: 1fr; }
  .footer__inner { min-height: 80svh; }
  .footer__meta { grid-template-columns: 1fr; font-size: 13px; }
  .footer__credits, .footer__meta p:last-child { text-align: left; justify-self: start; }
}


@media (prefers-reduced-motion: reduce) {
  .js .portones__pennant { animation: none; translate: none; }
  .js .portones__mark path, .js .portones__title .char, .js .portones__sub, .js .portones__logo, .js .portones__foot > *, .js .portones__gate img { animation: none; transform: none; opacity: 1; stroke-dashoffset: 0; scale: 1; }
  .act, .act__ticket, .btn, .btn::before, .chip, .acts__when { transition-duration: .01ms; }
}