/* ETH Cinco de Mayo 2026 - base stylesheet
   Clean rewrite, no Mobirise/Bootstrap. Inherits brand palette from legacy. */

:root {
  --c-bg: #ffffff;
  --c-bg-alt: #f0f8ff;
  --c-bg-soft: #e8f4ff;
  --c-ink: #0f1c2c;
  --c-ink-soft: #3a4759;
  --c-muted: #6f7c8c;
  --c-line: #d8e3ee;
  --c-primary: #1a8cff;        /* ETH CDM bright blue */
  --c-primary-dark: #0c66cc;
  --c-accent: #ffd400;         /* yellow callout (from PDF) */
  --c-accent-2: #ff6b3d;       /* arturo orange */
  --c-success: #16a34a;
  --c-danger: #dc2626;
  --c-ink-on-primary: #ffffff;

  --radius-sm: 6px;
  --radius: 14px;
  --radius-lg: 22px;

  --shadow-sm: 0 1px 2px rgba(15, 28, 44, 0.06), 0 2px 8px rgba(15, 28, 44, 0.04);
  --shadow: 0 4px 14px rgba(15, 28, 44, 0.08), 0 1px 3px rgba(15, 28, 44, 0.05);
  --shadow-lg: 0 18px 50px rgba(15, 28, 44, 0.12), 0 4px 14px rgba(15, 28, 44, 0.06);

  --font-display: 'Darker Grotesque', 'DM Sans', system-ui, -apple-system, sans-serif;
  --font-body: 'DM Sans', system-ui, -apple-system, sans-serif;

  --container: 1180px;
  --gutter: clamp(16px, 4vw, 32px);
  --section-y: clamp(32px, 4.5vw, 64px);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.55;
  color: var(--c-ink);
  background: var(--c-bg);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--c-primary); text-decoration: none; }
a:hover { color: var(--c-primary-dark); }

h1, h2, h3, h4, h5 {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.1;
  margin: 0 0 0.5em;
  color: var(--c-ink);
}
h1 { font-size: clamp(2.4rem, 5vw, 4rem); }
h2 { font-size: clamp(1.9rem, 3.5vw, 2.7rem); }
h3 { font-size: clamp(1.4rem, 2.5vw, 1.85rem); }
h4 { font-size: 1.25rem; }
p { margin: 0 0 1em; }
strong { font-weight: 700; }
em { font-style: italic; }
ul, ol { padding-left: 1.2em; margin: 0 0 1em; }
li { margin-bottom: 0.3em; }
hr { border: 0; border-top: 1px solid var(--c-line); margin: var(--section-y) 0; }

/* --- Layout primitives --- */
.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
}
section { padding: var(--section-y) 0; }
section.tight { padding: calc(var(--section-y) * 0.6) 0; }
.section-head { max-width: 760px; margin: 0 auto clamp(36px, 5vw, 64px); text-align: center; }
.section-head h2 { margin-bottom: 0.3em; }
.section-head .lead { color: var(--c-ink-soft); font-size: 1.1rem; }
.section-head.align-left { text-align: left; margin-left: 0; margin-right: 0; }
.kicker {
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-primary-dark);
  background: var(--c-bg-soft);
  padding: 6px 14px;
  border-radius: 999px;
  margin-bottom: 18px;
}

/* --- Buttons --- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 12px 22px;
  border-radius: 999px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1rem;
  letter-spacing: 0;
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform 0.12s ease, box-shadow 0.12s ease, background 0.12s ease, color 0.12s ease;
  white-space: nowrap;
  text-decoration: none;
}
.btn:hover { transform: translateY(-1px); box-shadow: var(--shadow); }
.btn-primary {
  background: var(--c-primary);
  color: var(--c-ink-on-primary);
}
.btn-primary:hover { background: var(--c-primary-dark); color: #fff; }
.btn-ghost {
  background: transparent;
  color: var(--c-primary-dark);
  border-color: var(--c-primary);
}
.btn-ghost:hover { background: var(--c-bg-soft); }
.btn-dark {
  background: var(--c-ink);
  color: #fff;
}
.btn-dark:hover { background: #1a2840; color: #fff; }
.btn-lg { padding: 16px 30px; font-size: 1.1rem; }
.btn-sm { padding: 8px 16px; font-size: 0.9rem; }
.btn[data-placeholder="tbd"] {
  position: relative;
}

/* --- Nav --- */
.nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: saturate(180%) blur(10px);
  -webkit-backdrop-filter: saturate(180%) blur(10px);
  border-bottom: 1px solid var(--c-line);
}
.nav-inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 14px var(--gutter);
  display: flex;
  align-items: center;
  gap: 24px;
}
.nav-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--c-ink);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.15rem;
  text-decoration: none;
}
.nav-brand img { height: 36px; width: auto; }
.nav-brand-lg img { height: 54px; width: auto; }
.nav-brand-fallback {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.05rem;
}
.nav-menu {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 24px;
}
.nav-links {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  gap: 22px;
}
.nav-links a {
  color: var(--c-ink-soft);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.02rem;
  padding: 6px 0;
  border-bottom: 2px solid transparent;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.nav-links a:hover { color: var(--c-primary); }
.nav-links a.is-active {
  color: var(--c-primary-dark);
  border-bottom-color: var(--c-primary);
}
.nav-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}
.lang-switch {
  display: inline-flex;
  background: var(--c-bg-soft);
  border-radius: 999px;
  padding: 3px;
}
.lang-switch a {
  display: block;
  padding: 5px 12px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.85rem;
  border-radius: 999px;
  color: var(--c-muted);
}
.lang-switch a.is-active {
  background: #fff;
  color: var(--c-primary-dark);
  box-shadow: var(--shadow-sm);
}
.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 4px;
  background: transparent;
  border: 0;
  cursor: pointer;
  padding: 8px;
  margin-left: auto;
}
.nav-toggle span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--c-ink);
}

@media (max-width: 900px) {
  .nav-toggle { display: inline-flex; }
  .nav-menu {
    position: fixed;
    inset: 64px 0 0 0;
    background: #fff;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 24px var(--gutter);
    transform: translateY(-200%);
    transition: transform 0.25s ease;
    border-bottom: 1px solid var(--c-line);
    overflow-y: auto;
  }
  .nav-menu.is-open { transform: translateY(0); }
  .nav-links {
    flex-direction: column;
    gap: 4px;
    margin-bottom: 18px;
  }
  .nav-links a {
    display: block;
    padding: 12px 0;
    font-size: 1.2rem;
    border-bottom: 1px solid var(--c-line);
  }
  .nav-links a.is-active { border-bottom-color: var(--c-primary); }
  .nav-actions {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }
  .nav-actions .btn { width: 100%; }
  .lang-switch { align-self: flex-start; }
}

/* --- Hero (with optional YouTube video background) --- */
.hero {
  position: relative;
  padding: clamp(34px, 5.5vw, 70px) 0 clamp(30px, 4.5vw, 56px);
  background:
    radial-gradient(1100px 600px at 80% -10%, var(--c-bg-soft), transparent 60%),
    radial-gradient(800px 500px at -10% 80%, #fff8dd, transparent 60%),
    linear-gradient(180deg, #fbfdff 0%, #fff 100%);
  overflow: hidden;
  isolation: isolate;
}
.hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
.hero-bg iframe,
.hero-bg #hero-yt-player {
  opacity: 0;
  transition: opacity 0.5s ease;
}
.hero-bg.is-playing iframe,
.hero-bg.is-playing #hero-yt-player {
  opacity: 1;
}
.hero-bg iframe,
.hero-bg #hero-yt-player {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 177.78vh;
  min-width: 100%;
  height: 56.25vw;
  min-height: 100%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  border: 0;
}
.hero-overlay {
  position: absolute;
  inset: 0;
  background: rgba(255,255,255,0.55);
  z-index: 1;
}
.hero .container { position: relative; z-index: 2; }
.hero-inner {
  max-width: 960px;
  margin: 0 auto;
  text-align: center;
}
/* Per-element white glow: each text/box in the hero gets its OWN soft, wide
   halo right behind itself, not a single glow on the wrapper. Low alpha, large
   blur, no hard edge. Helps the eye pull the foreground forward when the
   video shows more through the overlay. */
.hero h1 {
  text-shadow:
    0 0 28px rgba(255,255,255,0.9),
    0 0 56px rgba(255,255,255,0.57);
}
.hero p.lead {
  text-shadow:
    0 0 22px rgba(255,255,255,0.9),
    0 0 44px rgba(255,255,255,0.51);
}
.hero-tag {
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.3rem, 3vw, 2.4rem);
  color: var(--c-primary-dark);
  background: rgba(255,255,255,0.88);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  padding: 12px 28px;
  border-radius: 999px;
  margin-bottom: 18px;
  line-height: 1.1;
  letter-spacing: -0.01em;
  box-shadow:
    var(--shadow),
    0 0 36px rgba(255,255,255,0.82),
    0 0 72px rgba(255,255,255,0.48);
  border: 1px solid rgba(26,140,255,0.22);
}
/* Same per-element glow on the hero CTAs. The colored brand shadow stays so
   the buttons still feel "pressable", we just add a white outer halo on top. */
.hero-actions .btn {
  box-shadow:
    0 0 34px rgba(255,255,255,0.75),
    0 0 68px rgba(255,255,255,0.42);
}
.hero-actions .btn-primary {
  box-shadow:
    0 8px 24px rgba(26,140,255,0.32),
    0 0 34px rgba(255,255,255,0.82),
    0 0 68px rgba(255,255,255,0.45);
}
/* Ghost button: transparent looked washed out against the video. Add a soft
   tinted backdrop so it reads as a real button. */
.hero-actions .btn-ghost {
  background: rgba(232, 244, 255, 0.55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.hero-actions .btn-ghost:hover {
  background: rgba(255, 255, 255, 0.85);
}
.hero h1 {
  font-size: clamp(2.6rem, 6vw, 5rem);
  margin-bottom: 0.4em;
}
.hero h1 em {
  background: linear-gradient(100deg, #ff3d00 0%, #ff6f00 55%, #ffa000 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-style: normal;
  /* darker, saturated shadow so the warm gradient text reads strongly against
     the lightened overlay instead of bleeding into white. */
  text-shadow: 0 0 36px rgba(255, 88, 0, 0.45);
}
.hero p.lead {
  font-size: clamp(1.05rem, 1.6vw, 1.3rem);
  /* One line tweak for legibility against the video: darker text color than
     the rest of the site's lead paragraphs. Revert by changing to
     var(--c-ink-soft). */
  color: var(--c-ink);
  max-width: 720px;
  margin: 0 auto 1.5em;
}
.hero-actions {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 30px;
  align-items: center;
}
.btn-xl {
  padding: 18px 38px;
  font-size: 1.2rem;
  font-weight: 700;
  box-shadow: 0 8px 24px rgba(26,140,255,0.28);
}

/* --- Cards / tiles --- */
.grid {
  display: grid;
  gap: 22px;
}
.grid.cols-2 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.grid.cols-3 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.grid.cols-4 { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.grid.cols-5 { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }

.card {
  background: #fff;
  border: 1px solid var(--c-line);
  border-radius: var(--radius);
  padding: 24px;
  box-shadow: var(--shadow-sm);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.card:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.card h3 { margin-bottom: 0.3em; }
.card p { color: var(--c-ink-soft); margin-bottom: 0; }
.card .card-kicker {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-primary-dark);
  display: block;
  margin-bottom: 10px;
}

.card.callout {
  background: linear-gradient(135deg, var(--c-bg-soft), #fff);
  border-color: transparent;
}

/* Track Record image header: sits flush at the top of each card, extends to
   the card edges (negative margins cancel the card padding), 16:9 ratio so
   event photos and collages fit cleanly. Replace .tr-img.is-placeholder with
   `<img src="...">` when the real asset is ready. */
.tr-img {
  margin: -24px -24px 18px;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius) var(--radius) 0 0;
  overflow: hidden;
  background: var(--c-bg-soft);
  display: flex;
  align-items: center;
  justify-content: center;
}
.tr-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.tr-img.is-placeholder {
  background:
    repeating-linear-gradient(135deg, #e8f4ff 0, #e8f4ff 10px, #d1e7ff 10px, #d1e7ff 20px);
}
.tr-img.is-placeholder span {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.82rem;
  color: var(--c-primary-dark);
  padding: 6px 14px;
  background: rgba(255,255,255,0.7);
  border-radius: 4px;
  border: 1px dashed rgba(26,140,255,0.4);
  letter-spacing: 0.04em;
}

/* Stat tiles (numbers grid) */
.stat {
  background: var(--c-bg-soft);
  border-radius: var(--radius);
  padding: 28px 22px;
  text-align: center;
}
.stat .stat-num {
  display: block;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2.2rem, 4vw, 3rem);
  color: var(--c-primary-dark);
  line-height: 1;
  margin-bottom: 6px;
}
.stat .stat-label {
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--c-ink);
}
.stat.accent { background: var(--c-accent); }
.stat.accent .stat-num { color: var(--c-ink); }
.stat.dark { background: var(--c-ink); color: #fff; }
.stat.dark .stat-num { color: #fff; }
.stat.dark .stat-label { color: rgba(255,255,255,0.85); }

/* --- Calendar table --- */
.calendar {
  border-radius: var(--radius);
  background: #fff;
  border: 1px solid var(--c-line);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.cal-row {
  display: grid;
  grid-template-columns: minmax(120px, 0.9fr) minmax(240px, 2.2fr) minmax(130px, 1fr) 130px;
  gap: 14px;
  align-items: center;
  padding: 12px 20px;
  border-bottom: 1px solid var(--c-line);
}
.cal-action { display: flex; justify-content: stretch; }
.cal-action > * { width: 100%; }
.cal-row:last-child { border-bottom: 0; }
.cal-row.is-main {
  background: linear-gradient(135deg, #fff8dd 0%, #fffefa 100%);
}
.cal-row.is-main .cal-event { font-weight: 800; }
.cal-date {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--c-primary-dark);
}
.cal-event {
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--c-ink);
  font-size: 1.05rem;
}
.cal-venue { color: var(--c-ink-soft); font-size: 0.95rem; }
.cal-action .btn { padding: 8px 16px; font-size: 0.9rem; }
.cal-row.is-soon { opacity: 0.7; }
.cal-row.is-soon .cal-action .btn { background: transparent; color: var(--c-muted); border-color: var(--c-line); cursor: default; }
.cal-row.is-soon .cal-action .btn:hover { transform: none; box-shadow: none; }

.cal-row.is-past {
  opacity: 0.6;
  background: linear-gradient(180deg, #f6f9fc 0%, #fff 100%);
}

/* Main event standalone "table" highlight, plus the divider title for the
   smaller list of remaining events below. */
.calendar-main {
  margin-bottom: 20px;
  border-color: var(--c-primary);
  box-shadow:
    var(--shadow-sm),
    0 8px 30px rgba(26,140,255,0.18);
}
.calendar-main .cal-row.is-main { border-bottom: 0; }
.cal-others-title {
  text-align: center;
  margin: 28px 0 14px;
  font-size: 0.9rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-muted);
  font-weight: 700;
  font-family: var(--font-display);
}
.cal-row.is-past .cal-event { color: var(--c-muted); }
.past-tag {
  display: inline-block;
  background: #e8f7ec;
  color: var(--c-success);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.7rem;
  padding: 2px 9px;
  border-radius: 999px;
  margin-left: 6px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  vertical-align: middle;
}
.cal-row .cal-action [aria-disabled="true"] {
  pointer-events: none;
  opacity: 0.55;
  cursor: default;
}

@media (max-width: 780px) {
  .cal-row {
    grid-template-columns: 1fr;
    gap: 6px;
    padding: 16px 18px;
  }
  .cal-action { margin-top: 8px; }
}

/* --- Event detail sections (incubathon / pop-up / etc) --- */
.event-detail {
  scroll-margin-top: 90px;
}
.event-detail .container { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(28px, 5vw, 64px); align-items: center; }
.event-detail.alt .container { grid-template-columns: 1fr 1.1fr; }
.event-detail.alt .event-media { order: -1; }
.event-detail .event-media {
  background: var(--c-bg-soft);
  border-radius: var(--radius-lg);
  aspect-ratio: 4 / 3;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.event-media.is-square {
  aspect-ratio: 1 / 1;
  background: var(--c-bg-soft);
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  padding: 24px;
  text-align: center;
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--c-primary-dark);
}
/* Square transparent PNG icon inside an event-detail column. Lets the parent
   section's bg (the dark gradient on event-dark) show through. */
.event-detail .event-media.event-media-square-transparent {
  aspect-ratio: 1 / 1;
  background: transparent;
  padding: 24px;
}
.event-media.event-media-square-transparent img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
.event-detail .event-media img { width: 100%; height: 100%; object-fit: cover; }
.event-detail .event-media[data-placeholder] {
  background: repeating-linear-gradient(
    135deg,
    var(--c-bg-soft) 0,
    var(--c-bg-soft) 12px,
    #ddeeff 12px,
    #ddeeff 24px
  );
  color: var(--c-primary-dark);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.05rem;
  padding: 28px;
  text-align: center;
}
.event-meta {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--c-primary-dark);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: 0.85rem;
  margin-bottom: 10px;
}
.event-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 18px;
}

@media (max-width: 880px) {
  .event-detail .container,
  .event-detail.alt .container {
    grid-template-columns: 1fr;
  }
  .event-detail .event-media { aspect-ratio: 16 / 10; }
  .event-detail.alt .event-media { order: 0; }
}

/* --- Pillars (Pop-Up City) --- */
.pillars {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
  margin-top: 20px;
}
.pillar {
  background: #fff;
  border: 1px solid var(--c-line);
  border-radius: var(--radius);
  padding: 18px 20px;
}
.pillar-title {
  display: inline-block;
  background: var(--c-primary);
  color: #fff;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 4px 12px;
  border-radius: 999px;
  margin-bottom: 10px;
}
.pillar p { margin: 0; color: var(--c-ink-soft); font-size: 0.95rem; }

/* --- Speakers / Founders / Lists --- */
.founders {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 18px;
}
@media (max-width: 1000px) {
  .founders { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 22px; }
}
.founder {
  text-align: center;
  background: #fff;
  border: 1px solid var(--c-line);
  border-radius: var(--radius);
  padding: 20px;
}
.founder-photo {
  width: 120px; height: 120px;
  border-radius: 50%;
  background: var(--c-bg-soft);
  margin: 0 auto 14px;
  overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display);
  font-weight: 800;
  color: var(--c-primary-dark);
  font-size: 1.4rem;
}
.founder-photo img { width: 100%; height: 100%; object-fit: cover; }
.founder h4 { margin: 0 0 0.2em; font-size: 1.1rem; }
.founder .handle { color: var(--c-primary); font-weight: 600; }
.founder p.bio { color: var(--c-ink-soft); font-size: 0.95rem; margin: 8px 0 0; }

.speaker-list,
.topics-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 10px;
}
.speaker-list li {
  padding: 14px 18px;
  background: #fff;
  border: 1px solid var(--c-line);
  border-radius: var(--radius-sm);
  font-size: 1rem;
}
.topics-list { gap: 7px; }
.topics-list li {
  padding: 9px 14px 9px 38px;
  background: #fff;
  border: 1px solid var(--c-line);
  border-radius: var(--radius-sm);
  font-size: 0.92rem;
  line-height: 1.35;
  position: relative;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.topics-list li:hover {
  transform: translateX(2px);
  box-shadow: var(--shadow-sm);
}
.topics-list li::before {
  content: "→";
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--c-primary);
  font-weight: 800;
  font-size: 1rem;
}

/* Logo grids (communities, partners, universities) */
.logo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 14px;
  align-items: center;
}
.logo-grid .logo {
  background: #fff;
  border: 1px solid var(--c-line);
  border-radius: var(--radius-sm);
  aspect-ratio: 1.6 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px;
  filter: grayscale(20%);
  transition: filter 0.2s ease, transform 0.2s ease;
}
.logo-grid .logo:hover { filter: none; transform: translateY(-2px); }
.logo-grid .logo img { max-width: 100%; max-height: 60px; object-fit: contain; }
.logo-grid .logo[data-placeholder] {
  background: var(--c-bg-soft);
  color: var(--c-primary-dark);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.85rem;
  text-align: center;
}

/* Sponsor tiers (past editions) */
.tier { margin-bottom: 32px; }
.tier h4 {
  font-size: 0.9rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c-primary-dark);
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--c-primary);
  display: inline-block;
}

/* --- Form --- */
.contact-form {
  background: var(--c-bg-soft);
  border-radius: var(--radius-lg);
  padding: clamp(24px, 4vw, 44px);
}
.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.form-grid .full { grid-column: 1 / -1; }
.form-field { display: flex; flex-direction: column; }
.form-field label {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.95rem;
  margin-bottom: 6px;
  color: var(--c-ink);
}
.form-field input,
.form-field select,
.form-field textarea {
  font-family: var(--font-body);
  font-size: 1rem;
  padding: 12px 14px;
  border: 1px solid var(--c-line);
  border-radius: var(--radius-sm);
  background: #fff;
  color: var(--c-ink);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
  outline: 0;
  border-color: var(--c-primary);
  box-shadow: 0 0 0 3px rgba(26, 140, 255, 0.18);
}
.form-field textarea { min-height: 140px; resize: vertical; }
.form-altcha {
  grid-column: 1 / -1;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.form-actions {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 6px;
}
/* Status banner: lives ABOVE the form-grid now, before any field gets focus. */
.contact-form .form-msg {
  padding: 12px 16px;
  border-radius: var(--radius-sm);
  font-weight: 600;
  margin-bottom: 18px;
  border: 1px solid transparent;
}
.form-msg[hidden] { display: none !important; }
#cf-ok  { background: #e8f7ec; color: var(--c-success); border-color: #b9e2c4; }
#cf-err { background: #fde7e7; color: var(--c-danger);  border-color: #f3bcbc; }

/* Honeypot - bots see and fill, humans don't. Off-screen but valid form control. */
.form-honeypot {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Fallback if the ALTCHA widget script never loads. Without this, the element
   renders empty and the user only sees the captcha error after submit.
   Once altcha.min.js executes and defines the custom element, the :not(:defined)
   selector stops matching and this block disappears. */
altcha-widget:not(:defined) {
  display: block;
  padding: 12px 14px;
  border-radius: var(--radius-sm);
  background: #fff7d6;
  color: #8a5a00;
  border: 1px dashed #e0a800;
  font-size: 0.92rem;
  font-family: var(--font-body);
}
altcha-widget:not(:defined)::before {
  content: "Cargando verificación anti bot...";
}

@media (max-width: 640px) {
  .form-grid { grid-template-columns: 1fr; }
}

/* --- CDMX attractions --- */
.attractions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 18px;
}
.attraction {
  background: #fff;
  border: 1px solid var(--c-line);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.attraction .att-media {
  aspect-ratio: 4 / 3;
  background: var(--c-bg-soft);
  overflow: hidden;
}
.attraction .att-media img { width: 100%; height: 100%; object-fit: cover; }
/* Attraction without an image yet: striped placeholder, same aspect ratio. */
.attraction .att-media.att-placeholder {
  display: block;
  background:
    repeating-linear-gradient(
      135deg,
      var(--c-bg-soft) 0,
      var(--c-bg-soft) 12px,
      #ddeeff 12px,
      #ddeeff 24px
    );
  position: relative;
}
.attraction .att-media.att-placeholder::after {
  content: "imagen pendiente";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.78rem;
  color: var(--c-primary-dark);
  opacity: 0.7;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.attraction .att-body { padding: 18px 20px; flex-grow: 1; display: flex; flex-direction: column; }
.attraction h4 { margin-bottom: 6px; color: var(--c-primary-dark); }
.attraction p { font-size: 0.95rem; color: var(--c-ink-soft); margin-bottom: 0; }

/* --- Misc --- */
.media-bullets {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 8px;
}
.media-bullets li {
  padding-left: 26px;
  position: relative;
  font-size: 1rem;
}
.media-bullets li::before {
  content: "✓";
  position: absolute;
  left: 0; top: 0;
  color: var(--c-primary);
  font-weight: 800;
}

.verticals {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px;
}
.vertical {
  background: #fff;
  border: 2px dashed var(--c-line);
  border-radius: var(--radius);
  padding: 18px 16px;
  text-align: center;
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--c-ink);
}

/* Verticals as a numbered 2 col list (Mision page). Different vibe from the
   3 col cards on the home, so the two pages don't repeat themselves. */
.verticals-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px 28px;
  counter-reset: vertical;
}
@media (max-width: 760px) {
  .verticals-list { grid-template-columns: 1fr; }
}
.verticals-list li {
  counter-increment: vertical;
  position: relative;
  padding: 20px 22px 20px 70px;
  background: #fff;
  border: 1px solid var(--c-line);
  border-radius: var(--radius);
  margin: 0;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.verticals-list li:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-sm);
}
.verticals-list li::before {
  content: counter(vertical, decimal-leading-zero);
  position: absolute;
  left: 20px;
  top: 18px;
  font-family: var(--font-display);
  font-weight: 800;
  color: var(--c-primary);
  font-size: 1.7rem;
  line-height: 1;
  letter-spacing: -0.02em;
}
.verticals-list h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--c-ink);
  margin: 0 0 6px;
  line-height: 1.25;
}
.verticals-list p {
  font-size: 0.92rem;
  color: var(--c-ink-soft);
  margin: 0;
  line-height: 1.55;
}

.map-wrap {
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--c-line);
  margin-top: 22px;
}
.map-wrap iframe { display: block; width: 100%; height: 360px; border: 0; }

/* --- Footer --- */
.footer {
  background: var(--c-ink);
  color: #fff;
  text-align: center;
  padding: 48px var(--gutter) 60px;
  margin-top: 0;
}
.footer-inner { max-width: var(--container); margin: 0 auto; }
.footer-link {
  color: #fff;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.05rem;
  border-bottom: 1px solid rgba(255,255,255,0.3);
  padding-bottom: 2px;
}
.footer-link:hover { color: var(--c-accent); }
.footer-tagline {
  margin-top: 18px;
  color: rgba(255,255,255,0.75);
  font-size: 0.95rem;
}
.footer-tagline a { color: var(--c-accent); }
.footer-tagline a:hover { color: #fff; }

/* --- Back to top --- */
.back-to-top {
  position: fixed;
  right: 22px;
  bottom: 22px;
  background: var(--c-primary);
  color: #fff;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 1.2rem;
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
  box-shadow: var(--shadow);
  z-index: 50;
}
.back-to-top.is-visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* --- Reveal --- */
[data-reveal] {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}
[data-reveal].is-revealed {
  opacity: 1;
  transform: translateY(0);
}

/* --- Page hero (smaller, for inner pages) --- */
.page-hero {
  background:
    radial-gradient(800px 400px at 80% 0, var(--c-bg-soft), transparent 70%),
    linear-gradient(180deg, #fbfdff, #fff);
  padding: clamp(28px, 4.5vw, 56px) 0 clamp(22px, 3.5vw, 40px);
  text-align: center;
}
.page-hero h1 {
  font-size: clamp(2.2rem, 4.4vw, 3.4rem);
  max-width: 880px;
  margin: 0 auto 0.3em;
}
.page-hero p {
  color: var(--c-ink-soft);
  font-size: 1.1rem;
  max-width: 720px;
  margin: 0 auto;
}

/* --- Quote block --- */
.quote {
  border-left: 4px solid var(--c-primary);
  padding: 6px 0 6px 22px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.15rem;
  font-style: italic;
  color: var(--c-ink);
  margin: 22px 0;
}

/* --- Past edition block --- */
.past-edition {
  border-top: 4px solid var(--c-primary);
  padding-top: clamp(36px, 5vw, 56px);
  margin-top: clamp(36px, 5vw, 56px);
}
.past-edition:first-of-type { border-top: 0; margin-top: 0; padding-top: 0; }
.past-edition h2 .badge {
  display: inline-block;
  background: var(--c-primary);
  color: #fff;
  padding: 2px 10px;
  border-radius: 6px;
  font-size: 0.85em;
  margin-left: 8px;
  vertical-align: middle;
}

/* --- Process steps --- */
.process {
  counter-reset: step;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 18px;
}
.process .step {
  background: #fff;
  border: 1px solid var(--c-line);
  border-radius: var(--radius);
  padding: 22px;
  position: relative;
}
.process .step::before {
  counter-increment: step;
  content: counter(step);
  display: block;
  font-family: var(--font-display);
  font-weight: 800;
  color: var(--c-primary);
  font-size: 2rem;
  line-height: 1;
  margin-bottom: 8px;
}

/* --- Event detail: dark variant (Security Day "under" vibe) --- */
.event-detail.event-dark {
  background: linear-gradient(135deg, #06081a 0%, #0d1428 50%, #0a1c3a 100%);
  color: rgba(255,255,255,0.86);
  position: relative;
  isolation: isolate;
}
.event-detail.event-dark::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(700px 350px at 90% 0%, rgba(0,255,140,0.08), transparent 60%),
    radial-gradient(500px 250px at 5% 100%, rgba(26,140,255,0.10), transparent 60%);
  z-index: 0;
  pointer-events: none;
}
.event-detail.event-dark .container { position: relative; z-index: 1; }
.event-detail.event-dark h2 { color: #fff; }
.event-detail.event-dark .event-meta { color: #6cffc1; letter-spacing: 0.08em; }
.event-detail.event-dark p { color: rgba(255,255,255,0.78); }
.event-detail.event-dark p.lead { color: rgba(255,255,255,0.92); }
.event-detail.event-dark strong { color: #fff; }
.event-detail.event-dark em { color: rgba(255,255,255,0.66); }
.event-detail.event-dark .topics-list li {
  background: rgba(255,255,255,0.04);
  border-color: rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.86);
}
.event-detail.event-dark .topics-list li::before { color: #6cffc1; }
.event-detail.event-dark .topics-list li:hover {
  background: rgba(255,255,255,0.07);
  box-shadow: 0 4px 14px rgba(0,0,0,0.3);
}
.event-detail.event-dark .event-media[data-placeholder] {
  background:
    repeating-linear-gradient(
      135deg,
      rgba(255,255,255,0.04) 0,
      rgba(255,255,255,0.04) 12px,
      rgba(255,255,255,0.08) 12px,
      rgba(255,255,255,0.08) 24px
    );
  color: rgba(255,255,255,0.55);
}
.event-detail.event-dark .event-media[data-placeholder] code {
  color: rgba(255,255,255,0.4);
  background: rgba(0,0,0,0.35);
  padding: 1px 6px;
  border-radius: 3px;
}
.event-detail.event-dark .btn-primary {
  background: #6cffc1;
  color: var(--c-ink);
  font-weight: 800;
}
.event-detail.event-dark .btn-primary:hover {
  background: #fff;
  color: var(--c-ink);
}

/* --- Media coverage: 2 col, text + bullets left, 3 video thumb placeholders right --- */
.media-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(28px, 5vw, 56px);
  align-items: start;
}
@media (max-width: 880px) {
  .media-grid { grid-template-columns: 1fr; gap: 28px; }
}
.media-text h2 { margin-bottom: 0.3em; }
.media-text .lead { color: var(--c-ink-soft); font-size: 1.05rem; margin-bottom: 18px; }
.media-videos { display: grid; gap: 14px; }
.media-videos-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1rem;
  color: var(--c-ink-soft);
  margin: 0 0 6px;
  min-height: 1.4em;
}
.media-videos-title[data-placeholder="tbd"]::before {
  content: "Título de la sección de videos";
  color: var(--c-muted);
  font-style: italic;
  opacity: 0.7;
}
.media-videos-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.media-video-thumb {
  display: block;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius);
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
  background-size: cover;
  background-position: center;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
  text-decoration: none;
}
/* Document variant (PDF / press release): same dark circle as the video button
   but with a proper download icon (SVG via data URI). Visually matches the
   weight of the play triangle while reading clearly as "download". */
.media-video-thumb.is-document::before {
  content: "";
  border: 0;
  background: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4v12'/%3E%3Cpath d='m7 11 5 5 5-5'/%3E%3Cpath d='M5 20h14'/%3E%3C/svg%3E") no-repeat center / contain;
  width: 22px;
  height: 22px;
  top: 50%;
  left: 50%;
  right: auto;
  bottom: auto;
  transform: translate(-50%, -50%);
}
.media-video-thumb.is-document:hover::before {
  transform: translate(-50%, -50%) scale(1.1);
}
.media-video-thumb::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(400px 200px at 70% 30%, rgba(255,255,255,0.08), transparent 70%),
    repeating-linear-gradient(45deg, transparent 0, transparent 22px, rgba(255,255,255,0.025) 22px, rgba(255,255,255,0.025) 44px);
}
.media-video-thumb::after {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(0,0,0,0.55);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  transform: translate(-50%, -50%);
  box-shadow: 0 2px 10px rgba(0,0,0,0.25);
  transition: transform 0.15s ease, background 0.15s ease;
}
.media-video-thumb::before {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  width: 0; height: 0;
  border-left: 12px solid #fff;
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  transform: translate(-40%, -50%);
  z-index: 2;
  transition: transform 0.15s ease;
}
.media-video-thumb:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.media-video-thumb:hover::after { transform: translate(-50%, -50%) scale(1.08); background: rgba(0,0,0,0.7); }
.media-video-thumb:hover::before { transform: translate(-40%, -50%) scale(1.08); }
.media-video-thumb[data-placeholder="tbd"]::before {
  background:
    repeating-linear-gradient(135deg, rgba(255,255,255,0.04) 0, rgba(255,255,255,0.04) 14px, rgba(255,255,255,0.10) 14px, rgba(255,255,255,0.10) 28px);
}

/* --- Pop-Up City IAldea theme: borrow the actual IAldea palette
   (https://ialdea.org/assets/css/tokens.css). Cream "Oaxaca paper" base,
   Pacific ocean for the pillar headers, clay red for the date meta. Pillars
   stay light/translucent on top of cream so the section reads warm but the
   layout is identical to the other event-detail blocks. Easily revertible by
   removing this whole block + the `popup-iAldea-theme` class from the section. */
.popup-iAldea-theme {
  background: #F4EFE6; /* --paper */
}
.popup-iAldea-theme h2          { color: #0E2A33; }   /* ocean-deep */
.popup-iAldea-theme p           { color: #1B1A17; }   /* ink */
.popup-iAldea-theme .event-meta { color: #B2202E; }   /* clay */
.popup-iAldea-theme .event-meta em { color: #2E6B45; } /* green */
.popup-iAldea-theme .quote      { color: #4A4640; font-style: italic; }
.popup-iAldea-theme .pillar {
  background: rgba(255, 255, 255, 0.7);
  border-color: rgba(27, 26, 23, 0.14);
}
.popup-iAldea-theme .pillar p   { color: #4A4640; }   /* ink-soft */
.popup-iAldea-theme .pillar-title {
  background: #1E4D5C; /* ocean */
  color: #F4EFE6;
}
.popup-iAldea-theme .event-media[data-placeholder] {
  background: repeating-linear-gradient(
    135deg,
    #ECE4D2 0,
    #ECE4D2 12px,
    #E8DCC4 12px,
    #E8DCC4 24px
  );
  color: #1E4D5C;
}
.popup-iAldea-theme .event-media[data-placeholder] code {
  color: #B2202E;
  background: rgba(255, 255, 255, 0.55);
  padding: 1px 6px;
  border-radius: 3px;
}
.popup-iAldea-theme .btn-primary {
  background: #1E4D5C; /* ocean */
  color: #F4EFE6;
}
.popup-iAldea-theme .btn-primary:hover {
  background: #0E2A33; /* ocean-deep */
  color: #F4EFE6;
}
/* IAldea.org inline links inside the popup theme: ocean instead of brand blue. */
.popup-iAldea-theme p a {
  color: #1E4D5C;
  text-decoration: underline;
}
.popup-iAldea-theme p a:hover { color: #0E2A33; }

/* --- IAldea video block, LEFT column of the Pop-Up section.
   TEMPORARY: aspect-ratio is 9:16 because the placeholder is a YouTube Short.
   When the real horizontal interview lands, change `aspect-ratio: 9 / 16`
   below to `16 / 9` (and drop the max-width if you want it full column).
   The .iAldea-media uses align-items:flex-end so the vertical video hugs
   the right edge of its column, sitting flush against the text block. */
.iAldea-media {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}
.iAldea-video {
  aspect-ratio: 9 / 16;
  width: 100%;
  max-width: 320px;
  border-radius: var(--radius);
  overflow: hidden;
  background: #000;
  box-shadow: var(--shadow);
}
.iAldea-video iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}
.iAldea-video-desc {
  margin: 16px 0 0;
  font-size: 0.95rem;
  color: var(--c-ink-soft);
  line-height: 1.55;
  max-width: 320px;
  text-align: right;
}
@media (max-width: 880px) {
  .iAldea-media { align-items: center; }
  .iAldea-video-desc { text-align: center; }
}

/* --- Sponsors 2026 (no tier names exposed; sizes encode visual hierarchy) --- */
.sponsors-grid {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: clamp(22px, 3vw, 44px);
  padding: clamp(24px, 4vw, 44px);
  background: #fff;
  border: 1px solid var(--c-line);
  border-radius: var(--radius-lg);
  min-height: 200px;
  box-shadow: var(--shadow-sm);
}
.sponsor {
  display: flex;
  align-items: center;
  justify-content: center;
  filter: grayscale(15%);
  transition: filter 0.2s ease, transform 0.2s ease;
}
.sponsor:hover { filter: none; transform: translateY(-2px); }
.sponsor img { display: block; object-fit: contain; max-width: 100%; }
.sponsor[data-size="huge"] img   { max-height: 110px; width: clamp(220px, 28vw, 320px); }
.sponsor[data-size="big"] img    { max-height: 80px;  width: clamp(170px, 20vw, 220px); }
.sponsor[data-size="medium"] img { max-height: 60px;  width: clamp(130px, 16vw, 170px); }
.sponsor[data-size="small"] img  { max-height: 44px;  width: clamp(100px, 12vw, 130px); }

.sponsors-empty {
  text-align: center;
  background: var(--c-bg-soft);
  border-radius: var(--radius);
  padding: 40px 32px;
  width: 100%;
  max-width: 560px;
}
.sponsors-empty p { color: var(--c-ink-soft); margin-bottom: 8px; font-size: 1rem; }

/* Tiered layout: 4 rows, one per size, centered horizontally inside the grid box. */
.sponsors-grid-tiered {
  display: flex;
  flex-direction: column;
  gap: clamp(22px, 3vw, 40px);
}
.sponsors-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: clamp(18px, 2.5vw, 32px);
}

/* Dimension placeholder: same striped pattern repeated per tier, with the
   pixel spec embedded inside so the designer knows exactly what size to ship. */
.sponsor-placeholder {
  background:
    repeating-linear-gradient(135deg, #e8f4ff 0, #e8f4ff 10px, #d1e7ff 10px, #d1e7ff 20px);
  border: 1px dashed rgba(26, 140, 255, 0.45);
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--c-primary-dark);
  letter-spacing: 0.04em;
}
.sponsor[data-size="huge"] .sponsor-placeholder   { width: clamp(220px, 28vw, 320px); height: 110px; font-size: 0.95rem; }
.sponsor[data-size="big"] .sponsor-placeholder    { width: clamp(170px, 20vw, 220px); height: 80px;  font-size: 0.82rem; }
.sponsor[data-size="medium"] .sponsor-placeholder { width: clamp(130px, 16vw, 170px); height: 60px;  font-size: 0.74rem; }
.sponsor[data-size="small"] .sponsor-placeholder  { width: clamp(100px, 12vw, 130px); height: 44px;  font-size: 0.68rem; }

/* CTAs that bracket the partners box (one above, one below) */
.sponsors-cta-top {
  margin-top: 20px;
  text-align: center;
}
.sponsors-cta-bottom {
  margin-top: 28px;
  text-align: center;
}
/* The cta-top sits INSIDE the section-head, so the visible gap between the
   top button and the grid is the section-head's bottom margin (~64px), much
   bigger than the 28px below. Pull section-head's bottom margin down to 28px
   here only, so the box has equal breathing room above and below. */
#sponsors-2026 .section-head,
#supporters .section-head { margin-bottom: 28px; }

/* --- Historical track record (quienes-somos) --- */
.history-card {
  background: #fff;
  border: 1px solid var(--c-line);
  border-radius: var(--radius);
  padding: 24px;
  display: flex;
  flex-direction: column;
}
.history-card h3 { margin-bottom: 0.3em; color: var(--c-primary-dark); }
.history-card p { color: var(--c-ink-soft); margin-bottom: 18px; font-size: 0.96rem; }
.history-card .history-img {
  margin-top: auto;
  border-radius: var(--radius-sm);
  background: var(--c-bg-soft);
  padding: 14px;
  overflow: hidden;
  border: 1px solid var(--c-line);
}
.history-card .history-img img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 4px;
}
/* Placeholder for transparent PNG collages provided by the user. The bg of the
   .history-img is var(--c-bg-soft), the exact color that will show through
   their transparent png, so they can preview contrast before exporting. */
.history-img.is-placeholder {
  aspect-ratio: 16 / 9;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--c-primary-dark);
  font-size: 0.92rem;
  letter-spacing: 0.03em;
}
.history-img.is-placeholder.is-wide { aspect-ratio: 32 / 9; }
.history-img.is-placeholder span {
  display: inline-block;
  padding: 8px 16px;
  background: rgba(255, 255, 255, 0.7);
  border-radius: 6px;
  border: 1px dashed rgba(26, 140, 255, 0.4);
}

/* @handle link styling: looks identical to the static handle text, underlines
   on hover so it still feels like a link without screaming. */
.founder .handle a {
  color: inherit;
  text-decoration: none;
}
.founder .handle a:hover { text-decoration: underline; }

/* --- Libertadores Cup section (dark, festive) --- */
.cup-section {
  position: relative;
  background: linear-gradient(135deg, #0c1a2e 0%, #16213e 45%, #0a3d7a 100%);
  color: #fff;
  overflow: hidden;
  isolation: isolate;
  padding: var(--section-y) 0;
}
.cup-bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(800px 400px at 18% 0%, rgba(255,212,0,0.22), transparent 60%),
    radial-gradient(700px 350px at 88% 100%, rgba(255,107,61,0.18), transparent 60%),
    radial-gradient(500px 300px at 50% 50%, rgba(26,140,255,0.10), transparent 70%);
  z-index: -1;
}
.cup-section .container { position: relative; z-index: 1; }
.cup-header {
  text-align: center;
  max-width: 820px;
  margin: 0 auto clamp(36px, 5vw, 56px);
}
.cup-trophy {
  display: block;
  height: clamp(120px, 11vw, 172px);
  width: auto;
  margin: 0 auto 16px;
}
.cup-header .kicker {
  background: rgba(255,255,255,0.14);
  color: var(--c-accent);
  border: 1px solid rgba(255,212,0,0.3);
}
.cup-header h2 { color: #fff; }
.cup-header .lead {
  color: rgba(255,255,255,0.88);
  font-size: 1.1rem;
}
.cup-body {
  display: grid;
  grid-template-columns: 1fr 1.25fr;
  gap: 28px;
  max-width: 1080px;
  margin: 0 auto 36px;
  align-items: start;
}
@media (max-width: 860px) {
  .cup-body { grid-template-columns: 1fr; gap: 18px; }
}
.cup-prizes-col {
  display: grid;
  gap: 12px;
}
.cup-prize {
  background: rgba(255,255,255,0.06);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: var(--radius);
  padding: 14px 16px;
  display: flex;
  gap: 12px;
  align-items: flex-start;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.cup-prize:hover {
  transform: translateX(2px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.28);
}
.cup-prize-gold {
  background: linear-gradient(135deg, rgba(255,212,0,0.22) 0%, rgba(255,212,0,0.06) 100%);
  border-color: rgba(255,212,0,0.5);
}
.cup-prize-silver {
  background: linear-gradient(135deg, rgba(220,224,234,0.18) 0%, rgba(220,224,234,0.04) 100%);
  border-color: rgba(220,224,234,0.32);
}
.cup-prize-bronze {
  background: linear-gradient(135deg, rgba(255,150,80,0.18) 0%, rgba(255,150,80,0.04) 100%);
  border-color: rgba(255,150,80,0.32);
}
.cup-prize-medal {
  font-size: 2rem;
  line-height: 1;
  flex-shrink: 0;
}
.cup-prize-body { flex: 1; min-width: 0; }
.cup-prize-label {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1rem;
  color: #fff;
  margin-bottom: 2px;
  line-height: 1.1;
}
.cup-prize-desc {
  margin: 0;
}
.cup-prize-desc ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.cup-prize-desc li {
  position: relative;
  padding: 0 0 0 12px;
  margin: 0 0 2px;
  font-size: 0.78rem;
  line-height: 1.4;
  color: rgba(255,255,255,0.84);
}
.cup-prize-desc li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--c-accent);
}

.cup-agenda {
  background: rgba(0,0,0,0.20);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--radius);
  padding: 22px 24px;
}
.cup-agenda h3 {
  color: var(--c-accent);
  font-size: 0.92rem;
  margin: 0 0 14px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 700;
}
.cup-agenda ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 8px;
}
.cup-agenda li {
  padding: 10px 14px 10px 30px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 8px;
  color: rgba(255,255,255,0.82);
  font-size: 0.92rem;
  line-height: 1.5;
  position: relative;
}
.cup-agenda li::before {
  content: "";
  position: absolute;
  left: 14px;
  top: 18px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--c-accent);
}
.cup-agenda li strong { color: var(--c-accent); font-weight: 700; }
.cup-actions {
  text-align: center;
}
.cup-section .btn-primary {
  background: var(--c-accent);
  color: var(--c-ink);
  font-weight: 800;
  box-shadow: 0 8px 28px rgba(255,212,0,0.35);
}
.cup-section .btn-primary:hover {
  background: #fff;
  color: var(--c-primary-dark);
  box-shadow: 0 10px 32px rgba(255,212,0,0.45);
}