/* ===== Font =====
   Self-hosted: served from this domain, so no extra DNS lookup and TLS handshake to
   Google before any text can be drawn. Same files Google serves, same subsets. */
@font-face {
  font-family: "Instrument Sans";
  font-style: normal;
  font-weight: 400 700;
  font-stretch: 100%;
  font-display: swap;
  src: url("../assets/fonts/instrument-sans-latin.woff2?v=adbdfd9a") 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-stretch: 100%;
  font-display: swap;
  src: url("../assets/fonts/instrument-sans-latin-ext.woff2?v=69e21e25") 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;
}

/* ===== Design tokens ===== */
:root {
  --cream: #f6f1ed;
  --white: #fcfbf8;
  --brand: #89743a;
  --brand-dark: #6e5d2e;
  --tan: #e5e0d2;
  --border-input: #747a7c;
  --placeholder: #797369;
  --divider: #dddbd9;

  --yellow: #ffe70f;
  --green: #43cc37;
  --red: #f96742;
  --blue: #79bfff;
  --orange: #ff8d3e;

  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-pill: 100px;

  --container-w: 1280px;
  --gutter: 80px;
  --nav-h: 69px; /* 65px bar + 4px chromatic rule */

  --font-body: "Instrument Sans", system-ui, sans-serif;
  color-scheme: light;
}

/* ===== Reset & base ===== */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
/* Anchor jumps stop below the sticky bar instead of under it */
html { scroll-padding-top: var(--nav-h); }
body {
  margin: 0;
  background: var(--cream);
  color: var(--brand);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  /* Safety net: nothing may widen the page into a sideways scroll on phones.
     clip, not hidden, so the sticky nav and cards keep working. */
  overflow-x: clip;
}
img { max-width: 100%; display: block; }
h1, h2, h3, p { margin: 0; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; margin: 0; padding: 0; }
button, input { font-family: inherit; }

/* Content measure is --container-w with the gutters OUTSIDE it, matching the design's
   1280 content inside 80px page margins (not 1280 inclusive of margins). */
.container {
  max-width: calc(var(--container-w) + 2 * clamp(20px, 5vw, var(--gutter)));
  margin: 0 auto;
  padding-inline: clamp(20px, 5vw, var(--gutter));
}

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ===== Reusable pieces ===== */
.eyebrow {
  font-weight: 600;
  font-size: 16px;
  letter-spacing: -0.4px;
  text-transform: uppercase;
  color: var(--brand);
}
.eyebrow--light { color: var(--white); }
.eyebrow--centered { text-align: center; width: 100%; font-size: 32px; letter-spacing: -0.64px; text-transform: none; }

.section-pill {
  display: inline-block;
  font-weight: 600;
  font-size: 24px;
  letter-spacing: -0.48px;
  color: var(--white);
}
.section-pill--ghost { font-size: 20px; }
/* "Qué es Climate Week Argentina" and "¿Por qué Argentina?": headings/H5 */
.what-is__card--brand .section-pill,
.why-argentina__text .section-pill {
  color: var(--white);
  font-family: var(--font-body);
  font-size: 24px;
  font-style: normal;
  font-weight: 600;
  line-height: 23px;
  letter-spacing: -0.48px;
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 42px;
  padding: 8px 24px;
  border-radius: var(--radius-pill);
  font-weight: 600;
  font-size: 16px;
  letter-spacing: -0.32px;
  white-space: nowrap;
  border: 1px solid transparent;
  cursor: pointer;
}
.btn--solid { background: var(--brand); color: var(--white); }
.btn--solid:hover { background: var(--brand-dark); }
.btn--outline { background: transparent; border-color: var(--brand); color: var(--brand); }
.btn--outline:hover { background: rgba(137, 116, 58, 0.08); }

/* Placeholder links (href="#") stay hidden until they get a real URL —
   filling in the href makes them appear again, no other change needed. */
a[href="#"] { display: none !important; }
.btn .icon { width: 16px; height: 16px; }

.gradient-bar { display: flex; width: 100%; height: 4px; border-radius: 2px; overflow: hidden; }
.gradient-bar span { flex: 1; }

.logo-grid { display: grid; gap: 11px; width: 100%; }
.logo-grid--4 { grid-template-columns: repeat(4, 1fr); }
.logo-grid--5 { grid-template-columns: repeat(5, 1fr); }
.logo-grid--6 { grid-template-columns: repeat(6, 1fr); }

.logo-tile {
  background: var(--white);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  aspect-ratio: 311 / 99;
}
/* Logos are absolutely positioned in their tile and sized with calc() against
   the tile. A percentage height on an in-flow image needs a definite parent
   height, which Safari does not derive from aspect-ratio: there the logos fell
   back to their full file size and blew the grid apart. An absolutely positioned
   box always resolves percentages against its tile, in every browser.
   --h is the share of the tile's inner height (tile minus padding) a logo gets. */
.logo-tile { --pad: 20px; position: relative; min-width: 0; }
.logo-tile img {
  position: absolute;
  /* longhands, not inset: shorthand support only arrived in iOS 14.5 */
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  width: auto;
  height: calc((100% - 2 * var(--pad)) * var(--h, 1));
  max-width: calc(100% - 2 * var(--pad));
  object-fit: contain;
}

/* Organizer marks are sized by ink area, not bounding-box height: matching heights
   would make the wide wordmarks read ~5x heavier than the compact square marks. */
/* the logo no longer props the tile open, so browsers without aspect-ratio
   (before iOS 15) get a fixed height instead of a collapsed tile */
@supports not (aspect-ratio: 1) {
  .logo-tile { height: 80px; }
}
.logo-grid--4 .logo-tile { --pad: 8px; padding: 8px; }
.logo-grid--4 .logo-tile img { max-width: calc((100% - 16px) * 0.88); }
.logo-tile--cwn img { --h: 0.78; }
.logo-tile--climatech img { --h: 0.45; }
.logo-tile--house img { --h: 0.8; }
.logo-tile--antom img { --h: 0.36; }
/* Organizer logos link out: the tile lifts on hover so it reads as clickable */
.logo-tile--link {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
@media (hover: hover) and (pointer: fine) {
  .logo-tile--link:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(110, 93, 46, 0.16);
  }
}
.logo-tile--link:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 3px;
}
@media (prefers-reduced-motion: reduce) {
  .logo-tile--link { transition: none; }
  .logo-tile--link:hover { transform: none; }
}
/* Ally logos keep their own colors. Each file is trimmed to its ink, and the
   height is tuned per logo by ink area, the same way the organizer row is. */
.logo-tile--mark { --pad: 12px; padding: 12px; }
.logo-tile--satellites-on-fire .logo-mark { --h: 0.62; }
.logo-tile--ruuts .logo-mark { --h: 0.51; }
.logo-tile--nunatak .logo-mark { --h: 0.75; }
.logo-tile--arcap .logo-mark { --h: 0.53; }
.logo-tile--climatebase .logo-mark { --h: 0.52; }
.logo-tile--re-forest-latam .logo-mark { --h: 0.61; }
.logo-tile--nativas .logo-mark { --h: 0.47; }
.logo-tile--nideport .logo-mark { --h: 0.44; }
.logo-tile--tintte .logo-mark { --h: 0.45; }
.logo-tile--biotoken .logo-mark { --h: 0.72; }
.logo-tile--qumir-nano .logo-mark { --h: 0.75; }
.logo-tile--edra .logo-mark { --h: 0.62; }
.logo-tile--kilimo .logo-mark { --h: 0.53; }
.logo-tile--we-circular .logo-mark { --h: 0.4; }
.logo-tile--einsted .logo-mark { --h: 0.35; }
.logo-tile--guiaa .logo-mark { --h: 0.79; }
.logo-tile--eiru .logo-mark { --h: 0.48; }
.logo-tile--becaps .logo-mark { --h: 0.49; }
.logo-tile--creative-capital .logo-mark { --h: 0.51; }
.logo-tile--text {
  font-weight: 500;
  font-size: 16px;
  color: var(--brand);
  text-align: center;
}
.logo-tile--placeholder { color: var(--placeholder); }

/* ===== Nav ===== */
.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(6px);
}
.nav__gradient { display: flex; width: 100%; height: 4px; }
.nav__gradient span { flex: 1; }
.nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  height: calc(var(--nav-h) - 4px);
}
.nav__logo img { height: 32px; width: auto; }
.nav__links { display: flex; align-items: center; gap: 22px; }
.nav__links a {
  font-weight: 500;
  font-size: 16px;
  letter-spacing: -0.32px;
  color: var(--brand-dark);
}
.nav__links a:hover { opacity: 0.7; }
.nav__lang {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 16px;
  letter-spacing: -0.32px;
}
.nav__lang button {
  /* padded out to a comfortable tap target, pulled back so the bar looks unchanged */
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 0 8px;
  margin: 0 -8px;
  border: 0;
  background: none;
  font: inherit;
  font-weight: 500;
  letter-spacing: -0.32px;
  color: var(--brand-dark);
  cursor: pointer;
}
.nav__lang button.is-active { font-weight: 600; }
.nav__lang button:not(.is-active):hover { opacity: 0.7; }
.nav__lang .sep { color: rgba(137, 116, 58, 0.5); } /* brand brown at 50% */

/* Hamburger: hidden above the mobile breakpoint, where the links sit inline */
.nav__toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  margin-right: -8px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--brand-dark);
  cursor: pointer;
}
.nav__toggle-bars {
  position: relative;
  display: block;
  width: 22px;
  height: 16px;
}
.nav__toggle-bars span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  transition: transform 0.25s ease, opacity 0.2s ease, top 0.25s ease;
}
.nav__toggle-bars span:nth-child(1) { top: 0; }
.nav__toggle-bars span:nth-child(2) { top: 7px; }
.nav__toggle-bars span:nth-child(3) { top: 14px; }
/* Open: the outer bars meet in the middle and cross, the middle one fades out */
.nav.is-open .nav__toggle-bars span:nth-child(1) { top: 7px; transform: rotate(45deg); }
.nav.is-open .nav__toggle-bars span:nth-child(2) { opacity: 0; }
.nav.is-open .nav__toggle-bars span:nth-child(3) { top: 7px; transform: rotate(-45deg); }

/* ===== Hero ===== */
/* Text block + photo fill exactly one fold; the sticky nav sits above them in flow,
   so its height comes out of the total. svh keeps mobile browser chrome from overflowing. */
.hero {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: calc(100vh - var(--nav-h));
  min-height: calc(100svh - var(--nav-h));
}

/* Text block: solid cream background, sits above the photo (no overlap) */
.hero__top {
  background: var(--cream);
  padding: 43px 20px 0;
  flex: 0 0 auto;
}
.hero__content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  text-align: center;
  max-width: 900px;
  margin-inline: auto;
  color: var(--brand);
}
.hero__content h1 {
  font-weight: 700;
  font-size: clamp(36px, 6vw, 64px);
  letter-spacing: -1.28px;
  line-height: 1.05;
  color: var(--brand);
}
.hero__dates {
  font-weight: 600;
  font-size: 16px;
  letter-spacing: -0.4px;
  text-transform: uppercase;
  color: var(--brand);
}
.hero__ctas { display: flex; flex-wrap: wrap; justify-content: center; gap: 19px; }
.hero__network { font-size: 16px; letter-spacing: -0.32px; color: var(--brand); opacity: 0.9; margin-bottom: 40px; }

/* Photo block: separate section below the text, image only. Takes whatever the
   text block leaves so the two together equal one fold. */
.hero__photo-block {
  position: relative;
  flex: 1;
  min-height: 180px;
  overflow: hidden;
}
.hero__photo {
  position: absolute;
  inset: 0;
  z-index: 0;
}
/* Star-shaped PNG, transparent outside the star: contain it so the points never get
   cropped, and seat its flat base on the bottom edge */
.hero__photo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center bottom;
  /* --star-py is set while scrolling (see the parallax script): the star drifts down
     inside its block, so it trails the page and slips behind the band below. */
  transform: translate3d(0, var(--star-py, 0px), 0);
  will-change: transform;
}
@media (prefers-reduced-motion: reduce) {
  .hero__photo img { transform: none; }
}

.organizers-mini {
  position: relative;
  background: var(--cream);
  padding-block: 43px 48px;
}
.organizers-mini .container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}
.organizers-mini h2 {
  font-weight: 600;
  font-size: clamp(16px, 2.4vw, 32px);
  line-height: 1.2;
  letter-spacing: -0.64px;
  text-align: center;
  color: var(--brand);
  white-space: nowrap;
}
.organizers-mini .eyebrow { text-align: center; width: 100%; margin-top: 8px; }

/* ===== Qué es Climate Week Argentina ===== */
.what-is { padding-block: 64px 24px; }
.what-is .container { display: flex; flex-direction: column; gap: 40px; }

.what-is__card {
  border-radius: var(--radius-md);
  padding: 24px;
  min-height: 448px;
  display: flex;
  flex-direction: column;
}
.what-is__card--brand { background: var(--brand); }
.what-is__card--light { background: var(--white); }

.what-is__stack { display: flex; flex-direction: column; gap: inherit; }
/* Sticks just under the nav; the extra bottom margin (cancelled by the light
   card's negative top margin, so layout is unchanged) sets where it lets go */
.what-is__card--brand {
  position: sticky;
  /* --wi-top is the live nav height + 24px, set by script; the token is the fallback */
  top: var(--wi-top, calc(var(--nav-h) + 24px));
  z-index: 0;
  margin-bottom: var(--wi-shift, 0px);
}
.what-is__card--light {
  position: relative;
  z-index: 1;
  margin-top: calc(-1 * var(--wi-shift, 0px));
}

.what-is__row {
  display: flex;
  gap: 18px;
  align-items: stretch;
  margin-top: 21px;
  flex: 1;
}
.what-is__card--light .what-is__row { margin-top: 0; }

/* headings/h3 */
.what-is__text {
  flex: 1;
  font-weight: 600;
  font-size: 40px;
  line-height: 38px;
  letter-spacing: -0.8px;
  color: var(--white);
}
.what-is__card--light .what-is__text { color: var(--brand); }

/* Square, sized by width with the ratio deriving the height. Stretching it instead would
   let the width drive the height and blow the card open. */
.what-is__media {
  position: relative;
  flex: 0 0 auto;
  align-self: flex-start;
  width: min(400px, 45%);
  aspect-ratio: 1;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--brand);
}
.what-is__media img:first-child { width: 100%; height: 100%; object-fit: cover; }
.what-is__isologo {
  position: absolute;
  top: 14%;
  right: 6.5%;
  width: 25%;
  max-width: 103px;
}

.network-figures {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 24px;
  padding-block: 8px;
}
/* Icon sits beside the text, not above it: it spans both rows of the text column. */
.network-figures li {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 16px;
  row-gap: 16px;
  align-items: start;
  /* items stretch to the tallest cell; keep rows content-sized so the leftover
     space collects at the bottom instead of inflating the 16px row gap */
  align-content: start;
}
.network-figures__icon { grid-row: 1 / span 2; width: 31px; height: 31px; }
.network-figures h3 {
  font-weight: 600;
  font-size: clamp(22px, 2.4vw, 32px);
  /* headings/h4 ratio (30/32): a tight line box so the 16px gap below reads as 16px */
  line-height: 0.94;
  letter-spacing: -0.64px;
  color: var(--brand);
}
.network-figures p {
  font-size: 16px;
  letter-spacing: -0.32px;
  color: var(--brand);
  opacity: 0.8;
}

/* ===== Territorio band: one photo behind the next three blocks ===== */
/* Pre-darkened photo, anchored top so the peaks lead */
/* Parallax photo: the image is its own layer inside the section, and a small script
   (data-parallax) slides it so it scrolls slower than the page. --ph makes the layer
   just tall enough to cover the section for the whole ride; --py is the offset.
   Without the script, or with reduced motion, it is a plain static background.
   Only transform changes while scrolling, so the GPU does the work. */
.territorio-band,
.newsletter {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.territorio-band::before,
.newsletter::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  width: 100%;
  height: var(--ph, 100%);
  transform: translate3d(0, var(--py, 0px), 0);
  will-change: transform;
  pointer-events: none;
}
.territorio-band::before {
  background: url("../assets/img/territorio-bg.webp?v=39961c90") center top / cover no-repeat;
}
.newsletter::before {
  background:
    linear-gradient(180deg, rgba(72, 109, 132, 0.15), rgba(72, 109, 132, 0.55)),
    /* mostly sky, so anchor the frame to the bottom and let the ground fill it */
    url("../assets/img/cta-bg-field.webp?v=c277b2ae") center bottom / cover no-repeat;
}

/* ===== Global conversation ===== */
.global-conversation {
  margin-top: 56px;
  color: var(--white);
}
/* The territorio photo is lighter behind the heading than the previous one
   (bright snow on the peaks); a soft shadow keeps white text readable there */
.global-conversation h2,
.global-conversation__lede {
  text-shadow: 0 1px 2px rgba(20, 30, 40, 0.35), 0 2px 18px rgba(20, 30, 40, 0.45);
}
.global-conversation__content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  text-align: center;
  padding-block: 300px 80px;
}
.global-conversation h2 {
  font-weight: 600;
  font-size: clamp(30px, 4vw, 48px);
  letter-spacing: -0.96px;
  max-width: 1100px;
}
.global-conversation__lede {
  font-weight: 600;
  font-size: clamp(18px, 2vw, 24px);
  letter-spacing: -0.48px;
  max-width: 1100px;
  opacity: 0.92;
}

.stats-compare {
  display: flex;
  gap: 24px;
  align-items: stretch;
  width: 100%;
  max-width: 1252px;
  margin-top: 32px;
  text-align: left;
}
.stats-grid {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px 19px;
}
.stat-card {
  background: var(--white);
  border-radius: var(--radius-md);
  padding: 16px;
  color: var(--brand);
}
.stat-card--tan { background: var(--tan); }
.stat-card__number {
  font-weight: 500;
  font-size: clamp(36px, 4vw, 64px);
  letter-spacing: -1.28px;
  margin-bottom: 16px;
}
.stat-card__label {
  font-weight: 600;
  font-size: 20px;
  letter-spacing: -0.4px;
  opacity: 0.8;
  line-height: 1.2;
}

.compare-card {
  flex: 0 0 380px;
  min-width: 0; /* the slide row is wider than the card; don't let it stretch the flex item */
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 16px;
  background: var(--brand);
  border-radius: var(--radius-md);
  padding: 24px;
}
.compare-card h3 {
  font-weight: 600;
  font-size: 24px;
  letter-spacing: -0.48px;
  color: var(--white);
  margin-bottom: 8px;
}
.compare-card p {
  font-weight: 600;
  font-size: 20px;
  letter-spacing: -0.4px;
  color: var(--white);
  opacity: 0.8;
}

/* Carousel: the track is a row of full-width slides; its height comes from the
   tallest one, so advancing never changes the card's height. */
.compare-card__viewport { overflow: hidden; min-width: 0; }
.compare-card__track {
  display: flex;
  transform: translateX(calc(var(--slide, 0) * -100%));
  transition: transform 0.5s ease;
}
.compare-slide {
  flex: 0 0 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 16px;
}
.compare-slide__media {
  border-radius: var(--radius-sm);
  overflow: hidden;
  /* Holds the slot open while a photo loads, and backs the empty state */
  min-height: 150px;
  background: rgba(252, 251, 248, 0.12);
}
.compare-slide__media img { display: block; width: 100%; height: 150px; object-fit: cover; }
/* No photo supplied yet: show the city name instead of a broken image */
.compare-slide__media.is-empty {
  display: grid;
  place-content: center;
  height: 150px;
}
.compare-slide__media.is-empty::after {
  content: attr(data-city);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: -0.28px;
  color: rgba(252, 251, 248, 0.6);
}
.compare-card__nav { display: flex; align-items: center; justify-content: space-between; }
.compare-card__dots { display: flex; align-items: center; gap: 8px; }
.compare-card__dot {
  width: 8px;
  height: 8px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--white);
  opacity: 0.4;
  cursor: pointer;
  transition: opacity 0.3s ease;
}
.compare-card__dot.is-active { opacity: 1; }
.compare-card__next {
  display: flex;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}
.compare-card__next .arrow { width: 20px; height: 20px; transform: scaleX(-1); }
@media (prefers-reduced-motion: reduce) {
  .compare-card__track { transition: none; }
}

/* ===== Por qué Argentina ===== */
/* 762px in the design (Figma node 1:598) */
.why-argentina {
  padding-block: 80px 0; /* design: 80 top + 682 card = 762, no bottom padding */
  min-height: 762px;
  display: flex;
  align-items: center;
}
.why-argentina > .container { width: 100%; }
.why-argentina__card {
  background: var(--brand);
  border-radius: var(--radius-md);
  padding: 64px 40px;
  display: flex;
  gap: 32px;
  align-items: center;
  justify-content: space-between;
}
.why-argentina__text {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 24px;
  color: var(--white);
}
.why-argentina__text h2 {
  font-weight: 600;
  font-size: clamp(28px, 4vw, 48px);
  line-height: 1.05;
  letter-spacing: -0.96px;
}
.why-argentina__text > p:not(.section-pill):not(.why-argentina__sub) {
  font-size: 20px;
  letter-spacing: -0.4px;
  opacity: 0.9;
  max-width: 500px;
}
.why-argentina__sub {
  font-weight: 600;
  font-size: 24px;
  letter-spacing: -0.48px;
  max-width: 380px;
}
.why-argentina__media {
  position: relative;
  flex: 0 0 45%;
  max-width: 624px;
  aspect-ratio: 624 / 522; /* the frames are stacked, so the box holds its own height */
  border-radius: var(--radius-md);
  overflow: hidden;
}
/* Each capacity is a full frame; only the active one is opaque, so they cross-fade.
   The isologo plate and the label are baked into the artwork. */
.why-argentina__media .capacidad {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.9s ease;
}
.why-argentina__media .capacidad.is-active { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .why-argentina__media .capacidad { transition: none; }
}

/* ===== Ticker + claim ===== */
/* 580px in the design (Figma node 1:612): 71px ticker bar + 509px claim area */
.outro {
  min-height: 580px;
  display: flex;
  flex-direction: column;
  color: var(--white);
}
.ticker {
  min-height: 71px;
  display: flex;
  align-items: center;
  padding-block: 24px;
  overflow: hidden; /* single row that runs past both edges, as in the design */
}
/* Marquee: the track holds two identical groups and slides one group's
   width (plus one gap), so the loop restarts exactly where it began. */
.ticker__track {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 16px;
  width: max-content;
  will-change: transform;
  animation: ticker-scroll 45s linear infinite;
}
.ticker__group {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 16px;
}
@keyframes ticker-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(calc(-50% - 8px)); }
}
.ticker:hover .ticker__track,
.ticker:focus-within .ticker__track {
  animation-play-state: paused;
}
@media (prefers-reduced-motion: reduce) {
  .ticker__track { animation: none; }
}
.ticker__track span {
  font-weight: 600;
  font-size: clamp(18px, 2.4vw, 24px);
  line-height: 0.96; /* headings/h5: 24/23, keeping the bar at 71px */
  letter-spacing: -0.48px;
  color: var(--white);
  white-space: nowrap;
}
/* Rotated square, as in the design; colour is set per item inline */
.ticker__track .dot {
  width: 10.8px;
  height: 10.8px;
  transform: rotate(45deg);
  flex-shrink: 0;
}
.outro__claim {
  flex: 1;
  display: grid;
  place-content: center;
  max-width: 1160px;
  margin: 0 auto;
  padding: 64px 24px 96px;
  text-align: center;
  font-weight: 600;
  font-size: clamp(28px, 5vw, 48px);
  line-height: 1.15;
  letter-spacing: -0.96px;
  color: var(--white);
}

/* ===== Agenda 2026 ===== */
.agenda { padding-block: 96px; }
.agenda__header {
  background: var(--brand);
  border-radius: var(--radius-md);
  padding: 40px 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.agenda__header h2 {
  font-weight: 600;
  font-size: clamp(36px, 5vw, 64px);
  letter-spacing: -1.28px;
  color: var(--white);
}
.agenda__header p {
  font-weight: 600;
  font-size: 24px;
  letter-spacing: -0.48px;
  color: var(--white);
  max-width: 700px;
}
.agenda__header .gradient-bar { position: absolute; left: 0; bottom: 0; }

.tracks { border-top: 0.5px solid var(--brand); margin-top: 48px; }
.track {
  display: flex;
  align-items: center;
  gap: 16px;
  padding-inline: 16px;
  border-bottom: 0.5px solid var(--brand);
  transition: padding 0.35s ease, background-color 0.3s ease;
}
/* Open row: cream plate, and the 14px swatch grows into a colour block + photo.
   The open row carries its own padding so the photo has the same 24px of air on
   every side; closed rows keep their 78px rhythm from the toggle's padding. */
.track.is-open {
  background: var(--white);
  padding: 24px;
  gap: 24px;
}
.track__visual {
  display: flex;
  flex: 0 0 auto;
  width: 0;
  height: 0; /* collapsed, so a closed row keeps its 78px rhythm */
  opacity: 0;
  overflow: hidden;
  transition: width 0.35s ease, height 0.35s ease, opacity 0.3s ease;
}
.track.is-open .track__visual { width: 296px; height: 148px; opacity: 1; }
.track__block { width: 148px; height: 148px; flex: 0 0 148px; }
.track__photo { width: 148px; height: 148px; flex: 0 0 148px; object-fit: cover; display: block; }
.track__body { flex: 1; min-width: 0; }

.track__heading { margin: 0; }
.track__toggle {
  display: flex;
  align-items: center;
  gap: 20px;
  width: 100%;
  padding: 26px 0;
  border: 0;
  background: none;
  text-align: left;
  cursor: pointer;
  transition: padding 0.35s ease;
}
.track.is-open .track__toggle { padding: 0 0 14px; }
.track__swatch {
  width: 14px;
  height: 14px;
  border-radius: 2px;
  flex-shrink: 0;
  transition: width 0.25s ease, margin 0.25s ease, opacity 0.2s ease;
}
/* The colour moves to the block on the left, so the dot goes away */
.track.is-open .track__swatch { width: 0; margin-right: -20px; opacity: 0; }
.track__name {
  flex: 1;
  font-weight: 600;
  font-size: clamp(18px, 2.2vw, 24px);
  line-height: 26px;
  letter-spacing: -0.48px;
  color: var(--brand);
}
.track__sign {
  flex-shrink: 0;
  width: 13px;
  font-size: 24px;
  line-height: 24px;
  color: var(--brand);
}
.track__sign::before { content: "+"; }
.track.is-open .track__sign::before { content: "−"; }

/* Panel: 0fr → 1fr keeps the open/close height animated without a fixed max-height */
.track__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.35s ease;
}
.track.is-open .track__panel { grid-template-rows: 1fr; }
.track__panel-inner {
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
}
.track.is-open .track__panel-inner { padding-bottom: 0; }
.track__panel p {
  max-width: 760px;
  font-size: 16px;
  line-height: 23px;
  letter-spacing: -0.32px;
  color: var(--brand-dark);
}
.track__panel .btn { font-weight: 500; }
@media (prefers-reduced-motion: reduce) {
  .track__visual,
  .track__toggle,
  .track__swatch,
  .track__panel { transition: none; }
}
.badge {
  border: 1px solid var(--divider);
  border-radius: var(--radius-sm);
  padding: 6px 10px;
  font-weight: 500;
  font-size: 12px;
  letter-spacing: -0.24px;
  color: var(--brand);
  margin-right: 12px;
}

.agenda__footer {
  background: var(--white);
  border-radius: var(--radius-md);
  padding: 32px;
  margin-top: 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}
.agenda__footer p { max-width: 480px; font-size: 16px; letter-spacing: -0.32px; }
/* the agenda is not published yet: a date chip stands where the CTA will go */
/* Same button as the hero's: .btn .btn--solid carries the pill, the brand fill and
   the hover. Only the row layout belongs here. */
.agenda__launch {
  flex: none;
  justify-content: center;
  text-decoration: none;
}

/* The calendar embed, between the track list and the banner. The height follows the
   screen so it shows a useful number of events without running past the fold on a
   phone, and the gap above it matches the one under it. */
.agenda__embed {
  margin-top: 48px;
}
.agenda__embed iframe {
  display: block;
  width: 100%;
  height: clamp(520px, 72vh, 720px);
  border: 1px solid var(--tan);
  border-radius: var(--radius-md);
  background: var(--white);
}

/* ===== Evento ancla ===== */
/* 343px in the design (node 1:683) */
.anchor-event__intro {
  background: var(--white);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  text-align: center;
  padding: 64px 20px;
  min-height: 343px;
}
.anchor-event__intro h2 {
  font-weight: 600;
  font-size: clamp(32px, 5vw, 64px);
  letter-spacing: -1.28px;
  color: var(--brand);
}
.anchor-event__intro p {
  font-weight: 600;
  font-size: 20px;
  letter-spacing: -0.4px;
  color: var(--brand);
}

/* One photo behind the card band AND the brown panel, with no cream between them —
   in the design the photo layer (node 1:688) runs past where S6 starts. */
.anchor-event__photo-area { position: relative; }
/* The star is baked into the top of this image, so it's anchored to the top edge */
.anchor-event__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: url("../assets/img/anchor-intro-bg.webp?v=48177ae5") center top / cover no-repeat;
}

/* 901px band in the design (node 1:687, up to where S6 starts at y=901), with the
   card sitting 358px down so the photo reads above it. */
.anchor-event__scene {
  position: relative;
  z-index: 1;
  min-height: 901px;
  padding-top: clamp(120px, 25vw, 358px);
  padding-bottom: 84px;
  overflow: hidden;
}
.anchor-event__scene > .container { position: relative; z-index: 1; }

.anchor-card {
  background: rgba(137, 116, 58, 0.92);
  backdrop-filter: blur(20px);
  border-radius: var(--radius-md);
  padding: 48px;
  min-height: 459px; /* node 1:690 */
  display: flex;
  gap: 40px;
  justify-content: space-between;
  flex-wrap: wrap;
  color: var(--white);
}
/* Grows into the free space so the four ejes tags stay on one row, as in the design */
.anchor-card__text {
  flex: 1;
  min-width: min(500px, 100%);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 40px;
}
/* headings/h4: 32/30 */
.anchor-card__text > p {
  font-weight: 600;
  font-size: clamp(22px, 2.6vw, 32px);
  line-height: 0.94;
  letter-spacing: -0.64px;
}
.ejes p.eyebrow { margin-bottom: 12px; text-transform: none; font-weight: 400; color: var(--white); font-size: 16px; }
.ejes__tags { display: flex; flex-wrap: wrap; gap: 15px; }
.ejes__tags span {
  border-bottom: 4px solid var(--white);
  padding: 16px 24px 12px;
  font-weight: 600;
  font-size: 20px;
  letter-spacing: -0.4px;
}

.anchor-card__aside {
  flex: 0 0 273px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.participar-card {
  background: var(--cream);
  border-radius: var(--radius-lg);
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  color: var(--brand);
}
.participar-card__date {
  font-weight: 600;
  font-size: 48px;
  letter-spacing: -1.28px;
  line-height: 1;
}
.participar-card__place { font-size: 16px; letter-spacing: -0.32px; opacity: 0.85; margin-top: 4px; }
.participar-card .btn { align-self: flex-start; }
.organizan p:first-child { font-size: 16px; letter-spacing: -0.32px; margin-bottom: 4px; }
.organizan__names { font-weight: 600; font-size: 24px; letter-spacing: -0.48px; }

/* Full-bleed 734px brown panel sitting straight on the photo (node 1:717, w=1440) */
.ways-to-participate {
  position: relative;
  z-index: 1;
  background: var(--brand);
  border-radius: var(--radius-md);
  min-height: 734px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-block: 40px;
}
/* Square on desktop, where it runs edge to edge; rounded when inset on mobile */
@media (min-width: 961px) {
  .ways-to-participate { border-radius: 0; }
}
.ways-to-participate__header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  text-align: center;
  padding-block: 40px;
}
.ways-to-participate__header .isologo { width: 80px; height: 80px; }
.ways-to-participate__header h2 {
  font-weight: 600;
  font-size: clamp(28px, 4vw, 48px);
  letter-spacing: -0.96px;
  color: var(--white);
  max-width: 900px;
}

.caminos {
  background: var(--tan);
  border-radius: var(--radius-md);
  display: flex;
  overflow: hidden;
}
/* One card at a time widens from 1fr to 3fr — the design's 180.5 / 558 split */
.camino {
  flex: 1 1 0;
  min-width: 0;
  background: var(--tan);
  padding: 32px 28px 28px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 14px;
  min-height: 300px;
  overflow: hidden;
  transition: flex-grow 0.4s ease, background-color 0.3s ease;
}
.camino.is-open {
  /* 4 not 3: the 56px of side padding sits outside the distributed space,
     so grow:4 lands on the design widths of 180.5 / 558 */
  flex-grow: 4;
  background: var(--cream);
  border-radius: var(--radius-md);
}
.camino__head {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  text-align: left;
  cursor: pointer;
  color: inherit;
}
.camino h3 {
  font-weight: 600;
  font-size: 24px;
  line-height: 26px;
  letter-spacing: -0.48px;
  color: var(--brand-dark);
}
/* 0fr → 1fr so the copy takes no room at all while the card is closed */
.camino__panel {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transition: grid-template-rows 0.35s ease, opacity 0.25s ease;
}
.camino.is-open .camino__panel {
  grid-template-rows: 1fr;
  opacity: 1;
  transition: grid-template-rows 0.35s ease, opacity 0.3s ease 0.1s;
}
.camino__panel p {
  /* the open card is wide: hold the copy to a comfortable measure */
  max-width: 60%;
  overflow: hidden;
  font-size: 16px;
  line-height: 23px;
  letter-spacing: -0.32px;
  color: var(--brand-dark);
}
/* the gap belongs to the open state, or a closed card keeps 14 phantom pixels */
.camino.is-open .camino__panel p { margin-top: 14px; }
.camino__mail { font-weight: 500; text-decoration: underline; }
.camino__phone { white-space: nowrap; }
.camino__foot {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.camino__sign {
  display: inline-block;
  font-size: 24px;
  line-height: 24px;
  color: var(--brand);
  cursor: pointer;
  /* a finger-sized target around the glyph, without moving the glyph */
  padding: 10px 16px;
  margin: -10px -16px;
}
.camino__sign::before { content: "+"; }
.camino.is-open .camino__sign::before { content: "−"; }
.camino__foot a {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  font-weight: 500;
  font-size: 16px;
  line-height: 16px;
  letter-spacing: -0.32px;
  color: var(--brand-dark);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease, visibility 0s linear 0.25s;
}
.camino.is-open .camino__foot a {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.3s ease 0.1s, visibility 0s;
}
.camino__foot a:hover { text-decoration: underline; }
@media (prefers-reduced-motion: reduce) {
  .camino,
  .camino__panel,
  .camino__foot a { transition: none; }
}

/* ===== Community platform ===== */
.community { background: var(--white); padding: 77px 0 96px; }
.community__header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  text-align: center;
  margin-bottom: 56px;
}
.community__header h2 {
  font-weight: 600;
  font-size: clamp(30px, 4vw, 48px);
  letter-spacing: -0.96px;
  color: var(--brand-dark);
}
.community__header p {
  font-weight: 500;
  font-size: 20px;
  letter-spacing: -0.4px;
  color: var(--brand-dark);
  max-width: 900px;
}
.organizers-tier { display: flex; flex-direction: column; gap: 24px; margin-bottom: 48px; }
/* The section is white, so white tiles vanished: the organizer logos get cream boxes */
.community .logo-grid--4 .logo-tile { background: var(--cream); }
.organizers-tier--tan .logo-tile { background: var(--white); }
.organizers-tier--tan { background: var(--tan); border-radius: var(--radius-md); padding: 24px; }
.organizers-tier--tan .logo-grid { gap: 8px; }
.organizers-tier--tan .logo-tile { aspect-ratio: unset; height: 89px; }

/* ===== Newsletter ===== */
/* 357px section (node 1:854); the 1282px CTA row sits on its bottom edge */
.newsletter {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  min-height: 357px;
  padding-inline: clamp(20px, 5vw, var(--gutter));
  overflow: hidden;
}
/* Card (786) + star panel (496) = 1282, matching the CTA frame (node 1:858) */
.newsletter__cta {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: stretch;
  width: 100%;
  max-width: 1282px;
}
/* Cream panel with the isologo cut out, so the photo shows through the star */
.newsletter__star {
  flex: 0 0 496px;
  width: 496px;
  height: 260px;
  display: block;
}
.newsletter__card {
  flex: 1 1 786px;
  min-width: 0;
  min-height: 260px;
  background: var(--white);
  border-radius: var(--radius-md) 0 0 0;
  padding: 40px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.newsletter__card h2 {
  font-weight: 600;
  font-size: 32px;
  letter-spacing: -0.64px;
  line-height: 1.1;
  color: var(--brand);
}
.newsletter__card > p {
  font-size: 16px;
  letter-spacing: -0.32px;
  color: var(--brand);
  opacity: 0.85;
}
.newsletter__form { position: relative; display: flex; gap: 12px; flex-wrap: wrap; }
.newsletter__form input {
  flex: 1 1 220px;
  height: 40px;
  border: 1px solid var(--border-input);
  border-radius: var(--radius-sm);
  padding-inline: 16px;
  font-size: 16px;
  color: var(--brand);
  background: var(--white);
}
.newsletter__form input::placeholder { color: var(--placeholder); }
.newsletter__form button {
  height: 40px;
  padding-inline: 32px;
  border: none;
  border-radius: var(--radius-pill);
  background: var(--brand);
  color: var(--white);
  font-size: 16px;
  letter-spacing: -0.32px;
  cursor: pointer;
}
.newsletter__form button:hover { background: var(--brand-dark); }
.newsletter__form button:disabled { opacity: 0.6; cursor: default; }
.newsletter__form input[aria-invalid="true"] { border-color: var(--red); }
/* Status line sits in the card's bottom padding, 6px under the field, so
   showing it never changes the card height or runs into the star panel */
.newsletter__msg {
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: 6px;
  white-space: nowrap;
  font-size: 14px;
  line-height: 20px;
  letter-spacing: -0.28px;
}
.newsletter__hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
}
.newsletter__msg:empty { display: none; }
.newsletter__msg.is-error { color: #b3402a; }
.newsletter__msg.is-success { color: var(--brand-dark); font-weight: 600; }

/* ===== Footer ===== */
.site-footer { background: var(--brand); color: var(--white); }
/* padding-block, not the shorthand: these are .container elements and must keep its gutters */
.footer__claim { padding-block: 96px 72px; display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
/* Design (node 1:868): 88px / 84px line / +0.88px tracking, 930px wide → two lines */
.footer__claim h2 {
  font-weight: 600;
  font-size: clamp(36px, 6.12vw, 88px);
  line-height: 0.955;
  letter-spacing: 0.01em;
  max-width: 930px;
}
.footer__claim p { font-weight: 500; font-size: 20px; line-height: 26px; letter-spacing: -0.4px; opacity: 0.75; max-width: 174px; }

.footer__rule { border: none; border-top: 1px solid var(--white); opacity: 0.2; margin: 0 clamp(20px, 5vw, 80px); }

.footer__nav { padding-block: 40px; display: flex; align-items: center; gap: 32px; flex-wrap: wrap; }
.footer__logo { flex: 0 0 300px; }
.footer__logo img { width: 240px; height: auto; }
.footer__links { flex: 1; display: flex; flex-wrap: wrap; justify-content: center; gap: 14px 28px; }
.footer__links a { font-weight: 500; font-size: 16px; line-height: 20px; letter-spacing: -0.32px; }
.footer__links a:hover { opacity: 0.75; }
.footer__social { display: flex; flex-direction: column; gap: 10px; width: 296px; }
.social-icons { display: flex; gap: 14px; }
.social-icons img { width: 24px; height: 24px; }
/* Footer logo and social icons fade slightly on hover */
.footer__logo,
.social-icons a {
  display: inline-block;
  border-radius: var(--radius-sm);
  transition: opacity 0.2s ease;
}
@media (hover: hover) and (pointer: fine) {
  .footer__logo:hover,
  .social-icons a:hover { opacity: 0.75; }
}
.footer__logo:focus-visible,
.social-icons a:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 4px;
}
.footer__social p { font-weight: 500; font-size: 16px; line-height: 20px; letter-spacing: -0.32px; }
/* the address is long: let it break rather than push the footer wider */
.footer__email { overflow-wrap: anywhere; }
.footer__email a { color: inherit; }
.footer__email a:hover { text-decoration: underline; }

.footer__legal { padding-block: 24px; display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; font-weight: 500; font-size: 12px; line-height: 16px; letter-spacing: -0.24px; }
.footer__legal p { opacity: 0.7; }

/* ===== Responsive ===== */
@media (max-width: 960px) {
  .nav__toggle { display: inline-flex; }
  /* Drop-down panel under the bar; collapsed by default, no layout shift */
  .nav__links {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 4px 0 12px;
    background: var(--cream);
    border-bottom: 1px solid var(--divider);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.06);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    pointer-events: none;
    transition: opacity 0.2s ease, transform 0.25s ease, visibility 0s linear 0.25s;
  }
  .nav.is-open .nav__links {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
    transition: opacity 0.2s ease, transform 0.25s ease, visibility 0s;
  }
  .nav__links a {
    padding: 14px clamp(20px, 5vw, var(--gutter));
    font-size: 18px;
  }
  .nav__links a:active { background: rgba(137, 116, 58, 0.08); }
  @media (prefers-reduced-motion: reduce) {
    .nav__links,
    .nav__toggle-bars span { transition: none; }
  }
  /* Narrow screens: the star is width-limited, so filling the fold would leave empty
     cream above it. Size the block to the star instead and let the hero hug its content. */
  .hero { min-height: 0; }
  .hero__photo-block { flex: none; aspect-ratio: 1126 / 556; min-height: 0; }
  .organizers-mini h2 { white-space: normal; font-size: 24px; }
  /* Stacked sections make the band tall and narrow, so cover only ever shows a centre
     strip of the photo (≤1427px of its 3287px width). Serve just that strip. */
  .territorio-band::before { background-image: url("../assets/img/territorio-bg-mobile.webp?v=b196fa9c"); }
  /* No room for the 496px star panel beside the card: drop it, card takes the row */
  .newsletter__star { display: none; }
  /* no star on mobile, so the card may grow: let the message flow and wrap */
  .newsletter__msg { position: static; flex: 0 0 100%; margin-top: -6px; white-space: normal; }
  .newsletter__card { border-radius: var(--radius-md) var(--radius-md) 0 0; }
  /* The wrapped card is taller than the section's min-height, so keep a strip of photo
     above it like the 97px band on desktop */
  .newsletter { padding-top: 96px; }
  .what-is__row { flex-direction: column; }
  /* stacked: a full-width square would be enormous, so drop back to a banner */
  .what-is__media { width: 100%; aspect-ratio: auto; min-height: 220px; }
  .network-figures { grid-template-columns: repeat(2, 1fr); }
  .stats-compare { flex-direction: column; }
  .compare-card { flex: none; }
  .why-argentina__card { flex-direction: column; }
  .why-argentina__media { max-width: 100%; width: 100%; flex: none; }
  .anchor-card { flex-direction: column; }
  .anchor-card__aside { flex: none; }
  .caminos { flex-wrap: wrap; }
  .camino { flex: 1 1 100%; min-height: 0; }
  /* stacked cards are narrow already, so the copy uses the full width */
  .camino__panel p { max-width: 100%; }
  /* the +/− and the CTA each get a line, so a thumb can't land on the wrong one */
  .camino__foot { flex-direction: column; align-items: flex-start; gap: 36px; }
  .camino:not(.is-open) .camino__foot a { display: none; }
  .camino.is-open { flex-grow: 1; }
  .logo-grid--6 { grid-template-columns: repeat(3, 1fr); }
  .logo-grid--5, .logo-grid--4 { grid-template-columns: repeat(2, 1fr); }
  .footer__nav { flex-direction: column; align-items: flex-start; }
  /* In the stacked column the 300px flex-basis would become a 300px-tall logo slot */
  .footer__logo { flex: none; }
  .what-is__text { font-size: 24px; line-height: normal; }
  .logo-tile { aspect-ratio: 200 / 99; }

  /* Mobile rhythm: desktop section spacing (and fixed desktop heights) leave large empty
     bands once everything stacks, so tighten to a ~48px section / 24–32px inner scale. */
  /* The media box only has a min-height here, so the photo's height:100% didn't resolve and
     a short image left a brand-coloured strip under it (read as extra card padding). */
  .what-is__media img:first-child { position: absolute; inset: 0; }
  .organizers-mini { padding-block: 32px; }
  .what-is { padding-block: 40px 16px; }
  .what-is .container { gap: 24px; }
  .global-conversation { margin-top: 32px; }
  .global-conversation__content { padding-block: 360px 48px; }
  .why-argentina { padding-block: 40px 0; min-height: 0; }
  .why-argentina__card { padding: 32px 24px; gap: 24px; }
  .agenda { padding-block: 48px; }
  .track__visual { display: none; }
  .track.is-open .track__swatch { width: 14px; margin-right: 0; opacity: 1; }
  .tracks, .agenda__embed, .agenda__footer { margin-top: 32px; }
  .agenda__footer { flex-direction: column; align-items: stretch; gap: 24px; padding: 24px; }
  .agenda__launch { width: 100%; padding-inline: 16px; }
  .anchor-event__intro { min-height: 0; padding-block: 48px 0; }
  .anchor-event__scene { min-height: 0; padding-top: clamp(340px, 25vw, 358px); padding-bottom: 48px; }
  .anchor-card { min-height: 0; padding: 24px; gap: 24px; }
  .ways-to-participate { min-height: 0; padding-block: 24px; margin: 40px 24px 0 24px; }
  .ways-to-participate__header { padding-block: 24px; }
  .community { padding-block: 48px; }
  .community__header { margin-bottom: 32px; }
  .organizers-tier { margin-bottom: 32px; }
  .newsletter { padding-top: 64px; }
  /* the tall layer would show the photo whole here, sky and all: use the ground crop */
  .newsletter::before {
    background-image:
      linear-gradient(180deg, rgba(72, 109, 132, 0.15), rgba(72, 109, 132, 0.55)),
      url("../assets/img/cta-bg-field-mobile.webp?v=202baf72");
  }
  .newsletter__card { padding: 24px; }
  .footer__claim { padding-block: 48px 40px; }
  .footer__nav { padding-block: 32px; }
}

@media (max-width: 600px) {
  .network-figures { grid-template-columns: 1fr; }
  .stats-grid { grid-template-columns: 1fr; }
  /* stacked in one column the two tan cards would meet: move the third one last
     so the colours keep alternating white, tan, white, tan */
  .stats-grid > :nth-child(3) { order: 1; }
  .camino { flex: 1 1 100%; }
  .logo-grid--6 { grid-template-columns: repeat(2, 1fr); }
  /* Mobile hero per the phone mock: place on its own line, both CTAs side by side */
  .hero__top { padding-inline: 16px; }
  .hero__dates { font-size: 14px; letter-spacing: -0.3px; }
  .hero__place { display: block; }
  .hero__ctas { flex-wrap: nowrap; gap: 8px; width: 100%; }
  .hero__ctas .btn {
    flex: 1 1 0;
    min-width: 0;
    justify-content: center;
    height: 40px;
    padding: 0 10px;
    /* 14px on a 375px phone, shrinking just enough to keep one line at 320px */
    font-size: clamp(12px, 3.73vw, 14px);
  }
  .nav__logo img { height: 37px; }
  /* language switch sits beside the menu button, not centred between logo and menu */
  .nav__lang { margin-left: auto; }
  .footer__claim { flex-direction: column; }

  /* Main event, per the phone mock */
  .anchor-event__intro { padding: 48px 16px 24px; gap: 12px; }
  .anchor-event__intro h2 { font-size: 26px; line-height: 1.15; letter-spacing: -0.52px; }
  .anchor-event__intro p { font-size: 14px; letter-spacing: -0.28px; }
  /* Phone crop: the sculpture is centred and the star is its own layer on top, so the
     star (85% of the width) sits right over it, as in the mock. The photo tiles down
     behind the tall card; only the card's side margins show it. */
  .anchor-event__bg {
    background:
      url("../assets/img/anchor-star.webp?v=741b4ae9") center top / 85% auto no-repeat,
      url("../assets/img/anchor-bg-mobile.webp?v=80ecbc8e") center top / 100% auto repeat-y;
  }
  .anchor-event__scene { padding-top: 330px; padding-bottom: 16px; }
  .anchor-event__scene > .container { padding-inline: 16px; }
  .anchor-card {
    background: var(--brand);
    backdrop-filter: none;
    padding: 36px 24px 40px;
    gap: 30px;
  }
  .anchor-card__text { gap: 40px; }
  .anchor-card__text > p { font-size: 20px; line-height: 22px; letter-spacing: -0.4px; }
  .ejes p.eyebrow { font-size: 14px; letter-spacing: -0.28px; margin-bottom: 8px; }
  .ejes__tags { gap: 12px 8px; }
  .ejes__tags span {
    padding: 0 0 6px;
    border-bottom-width: 2px;
    font-size: 14px;
    letter-spacing: -0.28px;
  }
  .anchor-card__aside { gap: 38px; }
  .participar-card { padding: 24px; }
  .participar-card .btn { align-self: stretch; justify-content: center; }
  .organizan p:first-child { font-size: 14px; letter-spacing: -0.28px; margin-bottom: 12px; }
  .organizan__names { font-size: 18px; letter-spacing: -0.36px; }
  .global-conversation h2 { max-width: 320px; }
}

/* ===== Tablet (601–960px) ===== */
@media (min-width: 601px) and (max-width: 960px) {
  /* Language selector sits right, next to the menu button, with 60px between
     the EN label and the burger icon so the two are hard to mis-tap */
  .nav__lang { margin-left: auto; }
  .nav__toggle { margin-left: 27px; } /* + 24px row gap + 9px icon inset = 60px */

  /* Organizer logos at half size; the tiles keep their shape */
  .logo-grid--4 .logo-tile img { transform: scale(0.5); }

  /* Carousel photos closer to 16:9 than the thin desktop strip */
  .compare-slide__media { min-height: 0; }
  .compare-slide__media img { height: auto; aspect-ratio: 16 / 9; }
  .compare-slide__media.is-empty { height: auto; aspect-ratio: 16 / 9; }
}

/* ===== Entry animation =====
   Blocks rise 40px and fade in as they scroll into view. The hiding class is only
   applied by the script, so without it (or with reduced motion) nothing is hidden. */
.js-reveal .reveal {
  opacity: 0;
  transform: translate3d(0, 40px, 0);
  transition:
    opacity 0.9s ease,
    transform 0.9s cubic-bezier(0.2, 0.7, 0.2, 1);
  transition-delay: var(--reveal-delay, 0s);
}
.js-reveal .reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* ===== Lazy backgrounds =====
   Until a section is near the screen its photo is not requested (see the script in
   index.html). Without JavaScript the class is never set and photos load normally. */
.js-lazybg .territorio-band:not(.bg-in)::before,
.js-lazybg .newsletter:not(.bg-in)::before,
.js-lazybg .anchor-event__bg:not(.bg-in) {
  background-image: none;
}

/* ===== Legal pages (privacy policy) ===== */
.legal { background: var(--cream); padding-block: 64px 96px; }
.legal__inner { max-width: 820px; }
.legal h1 {
  font-weight: 600;
  font-size: clamp(32px, 5vw, 48px);
  line-height: 1.05;
  letter-spacing: -0.96px;
  color: var(--brand);
}
.legal__meta { margin-top: 12px; font-size: 16px; color: var(--brand); opacity: 0.75; }
.legal__note { margin-top: 8px; font-size: 15px; color: var(--brand); opacity: 0.75; font-style: italic; }
.legal__doc[hidden] { display: none; }
.legal__mail { overflow-wrap: anywhere; }
.legal h2 {
  margin-top: 40px;
  font-weight: 600;
  font-size: 24px;
  line-height: 1.2;
  letter-spacing: -0.48px;
  color: var(--brand-dark);
}
.legal h3 {
  margin-top: 24px;
  font-weight: 600;
  font-size: 18px;
  letter-spacing: -0.36px;
  color: var(--brand-dark);
}
.legal p,
.legal li {
  margin-top: 14px;
  font-size: 17px;
  line-height: 1.6;
  letter-spacing: -0.2px;
  color: var(--brand);
}
.legal ul { margin-top: 8px; padding-left: 22px; list-style: disc; }
.legal li { margin-top: 8px; }
.legal a { color: var(--brand-dark); text-decoration: underline; overflow-wrap: anywhere; }
.legal a:hover { opacity: 0.75; }
/* the privacy link sits with the copyright line */
.footer__legal a { font-weight: 500; text-decoration: underline; opacity: 0.7; }
.footer__legal a:hover { opacity: 1; }
@media (max-width: 600px) {
  .legal { padding-block: 40px 64px; }
  .legal p, .legal li { font-size: 16px; }
}