@import url("https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:wght@500;600;700;800&family=DM+Mono:wght@400;500&family=Manrope:wght@400;500;600;700;800&display=swap");

/* ============================================================
   We Cam Fest — V6 "La sala se enciende"
   Sistema cinematográfico: negro de sala, luz de proyector,
   afiches que brillan, mono como ficha técnica / créditos.
   ============================================================ */

:root {
  --ink: #0e0d0c;
  --ink-2: #161311;
  --ink-3: #211c19;
  --paper: #f3eee2;
  --paper-strong: #fbf7ed;
  --white: #ffffff;
  --cyan: #31b8c8;
  --cyan-deep: #0a6c79;
  --orange: #ff6a1a;
  --orange-soft: #ff7d33;
  --yellow: #f3cf4a;
  --green: #6acb7a;
  --muted: #5d574c;
  --muted-light: rgba(255, 255, 255, 0.62);
  --line: rgba(14, 13, 12, 0.16);
  --line-strong: rgba(14, 13, 12, 0.85);
  --line-light: rgba(255, 255, 255, 0.16);
  --radius: 2px;
  --max: 1280px;
  --beam-cyan: rgba(49, 184, 200, 0.28);
  --beam-orange: rgba(255, 106, 26, 0.32);
  --shadow-dark: 0 40px 90px rgba(0, 0, 0, 0.55);
  --shadow-paper: 0 30px 70px rgba(14, 13, 12, 0.16);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --display: "Bricolage Grotesque", "Manrope", Arial, sans-serif;
  --body: "Manrope", Arial, sans-serif;
  --mono: "DM Mono", ui-monospace, monospace;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  min-width: 320px;
  overflow-x: hidden;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Filmic grain — sutil, global, sobre todo */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 9000;
  pointer-events: none;
  opacity: 0.05;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

body.menu-open { overflow: hidden; }

img, svg { display: block; max-width: 100%; }
a { color: inherit; }
button, input, select, textarea { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }

::selection { background: var(--orange); color: var(--ink); }

:focus-visible {
  outline: 3px solid var(--orange);
  outline-offset: 4px;
  border-radius: 1px;
}

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

.skip-link {
  position: fixed;
  z-index: 10000;
  top: -5rem;
  left: 1rem;
  padding: 0.85rem 1.1rem;
  background: var(--yellow);
  color: var(--ink);
  font-family: var(--mono);
  font-weight: 500;
  text-decoration: none;
  transition: top 160ms var(--ease);
}

.skip-link:focus { top: 1rem; }

/* ---------- Header ---------- */
.site-header {
  position: sticky;
  z-index: 100;
  top: 0;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: clamp(1rem, 2.4vw, 2.4rem);
  min-height: 76px;
  padding: 0 clamp(1.2rem, 4vw, 3rem);
  background: rgba(243, 238, 226, 0.82);
  border-bottom: 1px solid var(--line);
  backdrop-filter: saturate(1.2) blur(18px);
  -webkit-backdrop-filter: saturate(1.2) blur(18px);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.85rem;
  color: var(--ink);
  font-family: var(--mono);
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-decoration: none;
  text-transform: uppercase;
}

.brand img {
  width: auto;
  height: 54px;
  max-width: 56px;
  object-fit: contain;
  object-position: center;
  transition: transform 320ms var(--ease);
}

.brand:hover img { transform: scale(1.06) rotate(-1deg); }

.brand span {
  max-width: 8rem;
  padding-left: 0.85rem;
  border-left: 1px solid var(--line);
  color: var(--muted);
}

.main-nav {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: clamp(0.55rem, 1.2vw, 1.3rem);
}

.main-nav > a,
.more-nav summary,
.more-nav div a {
  color: #3c382f;
  font-size: 0.78rem;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}

.main-nav > a, .more-nav summary { position: relative; padding: 0.2rem 0; }

.main-nav > a::after {
  position: absolute;
  right: 0;
  bottom: -0.42rem;
  left: 0;
  height: 2px;
  background: var(--orange);
  content: "";
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 220ms var(--ease);
}

.main-nav > a:hover::after,
.main-nav > a[aria-current="page"]::after { transform: scaleX(1); }
.main-nav > a[aria-current="page"] { color: var(--ink); }

.more-nav { position: relative; }

.more-nav summary {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  cursor: pointer;
  list-style: none;
}

.more-nav summary::-webkit-details-marker { display: none; }
.more-nav summary span {
  color: var(--orange);
  font-size: 1rem;
  transition: transform 240ms var(--ease);
}
.more-nav[open] summary span { transform: rotate(135deg); }

.more-nav div {
  position: absolute;
  top: 2.3rem;
  right: 0;
  display: grid;
  width: 220px;
  padding: 0.5rem;
  background: var(--paper-strong);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-paper);
  animation: pop 200ms var(--ease);
}

@keyframes pop {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: none; }
}

.more-nav div a { padding: 0.7rem 0.8rem; transition: background 160ms, padding-left 160ms; }
.more-nav div a:hover { background: rgba(49, 184, 200, 0.12); padding-left: 1.1rem; }

.header-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.9rem;
}

.language-toggle {
  display: flex;
  align-items: center;
  gap: 0.15rem;
  color: var(--muted);
  font-family: var(--mono);
  font-size: 0.72rem;
}

.language-toggle button {
  padding: 0.25rem 0.3rem;
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
  transition: color 160ms;
}
.language-toggle button:hover { color: var(--ink); }

.language-toggle button.is-active {
  color: var(--ink);
  font-weight: 500;
  text-decoration: underline;
  text-decoration-color: var(--orange);
  text-underline-offset: 0.28rem;
  text-decoration-thickness: 2px;
}

.menu-toggle {
  display: none;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  transition: background 180ms, transform 180ms;
}
.menu-toggle:hover { background: var(--ink); }
.menu-toggle:hover span:not(.sr-only) { background: var(--paper); }

.menu-toggle span:not(.sr-only) {
  display: block;
  width: 18px;
  height: 2px;
  margin: 3px auto;
  background: var(--ink);
  transition: background 180ms;
}

/* ---------- Buttons & links ---------- */
.button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 54px;
  padding: 0.85rem 1.5rem;
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.01em;
  text-decoration: none;
  overflow: hidden;
  transition: transform 220ms var(--ease), box-shadow 220ms var(--ease);
}

.button::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.18);
  transform: translateX(-101%);
  transition: transform 420ms var(--ease);
}
.button:hover { transform: translateY(-3px); box-shadow: 0 16px 34px rgba(14, 13, 12, 0.26); }
.button:hover::before { transform: translateX(101%); }
.button:active { transform: translateY(-1px); }

.button-small { min-height: 42px; padding: 0.55rem 1.15rem; font-size: 0.74rem; }
.button-dark { background: var(--ink); color: var(--paper); }
.button-orange { background: var(--orange); color: var(--ink); }
.button-light { background: var(--paper-strong); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line); }

.text-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  width: fit-content;
  color: var(--ink);
  font-size: 0.86rem;
  font-weight: 800;
  text-decoration: none;
  padding-bottom: 0.2rem;
}
.text-link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: var(--orange);
  transform-origin: left;
  transition: transform 260ms var(--ease);
}
.text-link span[aria-hidden] { transition: transform 240ms var(--ease); }
.text-link:hover span[aria-hidden] { transform: translateX(4px); }
.text-link-light { color: var(--white); }

/* ============================================================
   HERO — La pantalla en la sala oscura
   ============================================================ */
.hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.06fr) minmax(340px, 0.94fr);
  min-height: calc(100svh - 76px);
  padding: clamp(3.5rem, 7vw, 7rem) clamp(1.4rem, 6vw, 6rem) 8.5rem;
  overflow: hidden;
  background: var(--ink);
  color: var(--white);
  isolation: isolate;
}

/* haz de proyector — el triángulo del logo convertido en luz */
.hero::before {
  content: "";
  position: absolute;
  z-index: 0;
  top: 50%;
  right: 4%;
  width: 80vw;
  height: 80vw;
  max-width: 1100px;
  max-height: 1100px;
  transform: translateY(-50%);
  background: radial-gradient(circle at 70% 50%, var(--beam-cyan) 0%, rgba(49, 184, 200, 0.06) 34%, transparent 60%);
  pointer-events: none;
}


/* encuadre cinematográfico: letterbox sutil + viñeta de profundidad */
.hero::after {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(0,0,0,0.5) 0%, transparent 11%, transparent 89%, rgba(0,0,0,0.5) 100%),
    radial-gradient(125% 95% at 50% 46%, transparent 52%, rgba(0,0,0,0.5) 100%);
}

.hero-grid {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.16) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.16) 1px, transparent 1px);
  background-size: 84px 84px;
  mask-image: linear-gradient(90deg, black, transparent 78%);
  opacity: 0.14;
}

.hero-orbit {
  position: absolute;
  z-index: 0;
  right: -18vw;
  bottom: -36vw;
  width: 64vw;
  height: 64vw;
  border: 16vw solid var(--orange);
  border-radius: 50%;
  opacity: 0.08;
}

.hero-copy, .hero-visual, .subhero-visual, .hero-facts { position: relative; z-index: 2; }
.hero-copy { align-self: center; max-width: 840px; }

.eyebrow {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  margin: 0 0 1.4rem;
  color: var(--cyan-deep);
  font-family: var(--mono);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.eyebrow-light { color: var(--cyan); }
.eyebrow-dot {
  flex: 0 0 auto;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--orange);
  box-shadow: 0 0 0 0 rgba(255, 106, 26, 0.5);
  animation: pulse 2.6s var(--ease) infinite;
}
@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 106, 26, 0.45); }
  50% { box-shadow: 0 0 0 6px rgba(255, 106, 26, 0); }
}

.hero h1 {
  margin: 0;
  font-family: var(--display);
  font-size: clamp(3.6rem, 8.4vw, 9rem);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 0.86;
}
.hero h1 span { display: block; overflow: hidden; }
.hero h1 span > i { display: block; font-style: normal; }

.hero-outline {
  color: transparent;
  -webkit-text-stroke: 1.4px rgba(255, 255, 255, 0.92);
}

.hero-lead {
  max-width: 640px;
  margin: 2.1rem 0 0;
  color: rgba(255, 255, 255, 0.78);
  font-size: clamp(1rem, 1.4vw, 1.22rem);
  line-height: 1.7;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.3rem;
  margin-top: 2.4rem;
}

/* Pantalla de cine (video) */
.hero-visual { min-height: 560px; align-self: center; }

.hero-video {
  position: relative;
  display: grid;
  align-content: center;
  padding: 2.4rem 0 2.4rem 1.6rem;
}
/* glow detrás de la pantalla */
.hero-video::after {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 6% -4% 6% 6%;
  background: radial-gradient(circle at 60% 50%, var(--beam-orange), transparent 68%);
  filter: blur(8px);
  pointer-events: none;
}
.hero-video::before {
  position: absolute;
  z-index: 1;
  top: 6%;
  right: -4%;
  width: 76%;
  height: 80%;
  border: 1px solid rgba(255, 255, 255, 0.2);
  content: "";
  transform: rotate(6deg);
}

.hero-video-frame {
  position: relative;
  z-index: 2;
  overflow: hidden;
  width: 100%;
  border: 9px solid var(--paper-strong);
  background: #000;
  box-shadow: 20px 22px 0 var(--orange), var(--shadow-dark);
  aspect-ratio: 16 / 9;
  transform: rotate(1.2deg);
  transition: transform 420ms var(--ease), box-shadow 420ms var(--ease);
}
.hero-video-frame:hover {
  transform: rotate(0deg) scale(1.012);
  box-shadow: 16px 18px 0 var(--orange), var(--shadow-dark);
}
.hero-video-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

.hero-video-index {
  position: absolute;
  z-index: 4;
  top: 7%;
  left: -0.4rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 138px;
  padding: 0.6rem 0.8rem;
  background: var(--yellow);
  color: var(--ink);
  font-family: var(--mono);
  font-size: 0.6rem;
  letter-spacing: 0.05em;
  transform: rotate(-5deg);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.4);
}

.hero-video-caption {
  position: relative;
  z-index: 3;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 1rem;
  align-items: center;
  margin: 1.6rem 0 0 2.2rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(255, 255, 255, 0.2);
}
.hero-video-caption span {
  color: rgba(255, 255, 255, 0.56);
  font-family: var(--mono);
  font-size: 0.6rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.hero-video-caption strong { max-width: 190px; color: var(--white); font-size: 0.78rem; line-height: 1.35; text-align: right; }

/* facts */
.hero-facts {
  position: absolute;
  right: clamp(1.4rem, 6vw, 6rem);
  bottom: 2.2rem;
  left: clamp(1.4rem, 6vw, 6rem);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.6rem;
  padding-top: 1.3rem;
  border-top: 1px solid rgba(255, 255, 255, 0.2);
}
.hero-facts div { display: flex; align-items: baseline; gap: 0.7rem; }
.hero-facts strong {
  font-family: var(--display);
  color: var(--yellow);
  font-size: clamp(1.5rem, 2.4vw, 2rem);
  font-weight: 700;
  letter-spacing: -0.03em;
}
.hero-facts span { color: rgba(255, 255, 255, 0.56); font-family: var(--mono); font-size: 0.62rem; line-height: 1.4; }

/* Hero subpáginas */
.hero-subpage { min-height: 600px; padding-bottom: clamp(4rem, 8vw, 8rem); }
.hero-subpage h1 { font-size: clamp(3.2rem, 7vw, 7.4rem); line-height: 0.9; }

.subhero-visual {
  display: grid;
  align-self: center;
  min-height: 390px;
  padding: 2.2rem;
  overflow: hidden;
  background: var(--orange);
  box-shadow: var(--shadow-dark);
  color: var(--ink);
  font-family: var(--display);
  font-size: clamp(3.6rem, 7vw, 7.5rem);
  font-weight: 800;
  letter-spacing: -0.05em;
  line-height: 0.74;
  transform: rotate(2.5deg);
}
.subhero-visual span:nth-child(2) { color: transparent; -webkit-text-stroke: 1.5px var(--ink); }
.subhero-visual i { width: 72%; height: 1px; margin-top: auto; background: var(--ink); }

/* ---------- Marquesina (leader de película) ---------- */
.marquee {
  position: relative;
  overflow: hidden;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
  border-bottom: 1px solid var(--line);
  background: var(--yellow);
}
.marquee > div {
  display: flex;
  align-items: center;
  width: max-content;
  padding: 0.78rem 0;
  animation: marquee 34s linear infinite;
}
.marquee:hover > div { animation-play-state: paused; }
.marquee span {
  margin: 0 1.1rem;
  font-family: var(--mono);
  font-size: 0.74rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.marquee i { width: 6px; height: 6px; border-radius: 50%; background: var(--orange); }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ============================================================
   SECTION SYSTEM
   ============================================================ */
.section {
  position: relative;
  max-width: var(--max);
  margin: 0 auto;
  padding: clamp(5rem, 9vw, 8.5rem) clamp(1.4rem, 4vw, 3rem);
}

.section-number {
  position: absolute;
  top: clamp(5rem, 9vw, 8.5rem);
  left: clamp(1.4rem, 4vw, 3rem);
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--orange);
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
}
.section-number::before { content: ""; width: 14px; height: 14px; border: 1.5px solid currentColor; border-radius: 50%; }

.section-heading { max-width: 880px; margin-left: clamp(2.6rem, 7vw, 7rem); }

.section-heading h2,
.network-copy h2,
.video-copy h2,
.form-copy h2 {
  margin: 0;
  font-family: var(--display);
  font-size: clamp(2.4rem, 5vw, 5rem);
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 0.98;
  text-wrap: balance;
}

.section-heading > p:not(.eyebrow),
.network-copy > p:not(.eyebrow),
.video-copy > p:not(.eyebrow),
.form-copy > p:not(.eyebrow) {
  max-width: 700px;
  margin: 1.6rem 0 0;
  color: var(--muted);
  font-size: 1.02rem;
  line-height: 1.75;
  text-wrap: pretty;
}

/* ---------- Gateway ---------- */
.gateway-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin-top: 4.5rem;
  border: 1px solid var(--line-strong);
  background: var(--ink);
}

.gateway-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 360px;
  padding: 1.6rem;
  border-right: 1px solid rgba(255, 255, 255, 0.16);
  color: var(--ink);
  text-decoration: none;
  overflow: hidden;
  transition: transform 320ms var(--ease), box-shadow 320ms var(--ease);
}
.gateway-card:last-child { border-right: 0; }
.gateway-card::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 0;
  background: rgba(14, 13, 12, 0.14);
  transition: height 360ms var(--ease);
}
.gateway-dark::after { background: rgba(255, 255, 255, 0.1); }
.gateway-card:hover { z-index: 2; transform: translateY(-10px); box-shadow: 0 30px 60px rgba(0, 0, 0, 0.4); }
.gateway-card:hover::after { height: 6px; }
.gateway-cyan { background: var(--cyan); }
.gateway-orange { background: var(--orange); }
.gateway-yellow { background: var(--yellow); }
.gateway-dark { background: var(--ink-2); color: var(--white); }

.gateway-number { font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.05em; }

.gateway-symbol {
  display: block;
  width: 58px;
  height: 58px;
  margin: 2.6rem 0;
  border: 2px solid currentColor;
  border-radius: 50%;
  transition: transform 360ms var(--ease);
}
.gateway-card:hover .gateway-symbol { transform: rotate(90deg); }
.gateway-symbol::after {
  display: block;
  width: 0;
  height: 0;
  margin: 17px 0 0 22px;
  border-top: 9px solid transparent;
  border-bottom: 9px solid transparent;
  border-left: 15px solid currentColor;
  content: "";
}
.gateway-card h3 { margin: auto 0 0.55rem; font-family: var(--display); font-size: 1.35rem; font-weight: 700; letter-spacing: -0.02em; }
.gateway-card p { margin: 0 0 1.2rem; font-size: 0.85rem; line-height: 1.6; opacity: 0.92; }
.gateway-card b { display: inline-flex; align-items: center; gap: 0.4rem; font-family: var(--mono); font-weight: 500; font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.06em; }
.gateway-card b span { transition: transform 240ms var(--ease); }
.gateway-card:hover b span { transform: translate(3px, -3px); }

/* ---------- News / sala de prensa (teaser) ---------- */
.news-section { background: var(--paper); }
.news-masthead { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding-bottom: 1rem; border-bottom: 2px solid var(--ink); font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink); }
.news-section .section-intro { margin-top: 2.4rem; }
.news-statline { display: flex; flex-wrap: wrap; gap: clamp(1.5rem, 5vw, 4rem); margin: 2.6rem 0 2.8rem; padding: 1.4rem 0; border-top: 1px solid rgba(14,13,12,0.16); border-bottom: 1px solid rgba(14,13,12,0.16); }
.news-stat { display: flex; flex-direction: column; gap: 0.2rem; }
.news-stat strong { font-family: var(--display); font-size: clamp(2.2rem, 4.5vw, 3.4rem); font-weight: 800; letter-spacing: -0.04em; line-height: 0.9; color: var(--ink); }
.news-stat span { font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }

.news-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; margin-top: 0.4rem; background: var(--ink); border: 1px solid var(--ink); }
.news-card { display: flex; flex-direction: column; gap: 1.1rem; min-height: 240px; padding: clamp(1.4rem, 2.2vw, 1.9rem); background: var(--white); color: var(--ink); text-decoration: none; transition: transform 280ms var(--ease), box-shadow 280ms var(--ease); }
.news-card:hover { z-index: 2; transform: translateY(-5px); box-shadow: 0 22px 44px rgba(14,13,12,0.18); }
.news-card-top { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; }
.news-type { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.28rem 0.6rem; border: 1px solid var(--ink); border-radius: 999px; font-family: var(--mono); font-size: 0.6rem; letter-spacing: 0.12em; text-transform: uppercase; }
.news-type::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--ink); }
.news-meta { font-family: var(--mono); font-size: 0.64rem; letter-spacing: 0.08em; color: var(--muted); text-transform: uppercase; }
.news-headline { margin: 0; font-family: var(--display); font-size: clamp(1.12rem, 1.7vw, 1.42rem); font-weight: 700; letter-spacing: -0.02em; line-height: 1.12; text-wrap: pretty; }
.news-card-foot { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; margin-top: auto; padding-top: 0.9rem; border-top: 1px solid rgba(14,13,12,0.14); }
.news-media { font-family: var(--mono); font-size: 0.72rem; font-weight: 500; letter-spacing: 0.02em; }
.news-arrow { font-size: 1rem; transition: transform 240ms var(--ease); }
.news-card:hover .news-arrow { transform: translate(3px, -3px); }

/* lead card: ancla oscura, cinematográfica, a doble columna */
.news-card.news-card-lead { grid-column: span 2; background: var(--ink-2); color: var(--white); }
.news-card-lead .news-headline { font-size: clamp(1.6rem, 2.8vw, 2.35rem); }
.news-card-lead .news-type { border-color: rgba(255,255,255,0.6); color: var(--white); }
.news-card-lead .news-type::before { background: var(--orange); }
.news-card-lead .news-meta { color: rgba(255,255,255,0.7); }
.news-card-lead .news-card-foot { border-top-color: rgba(255,255,255,0.22); }

/* fondos cromáticos para ritmo (el logo no aplica aquí: el texto va en tinta) */
.news-card-orange { background: var(--orange); }
.news-card-cyan { background: var(--cyan); }
.news-card-orange .news-card-foot, .news-card-cyan .news-card-foot { border-top-color: rgba(14,13,12,0.22); }
.news-card-orange .news-type::before, .news-card-cyan .news-type::before { background: var(--ink); }

.news-cta { margin-top: 2.4rem; }
@media (max-width: 900px) { .news-grid { grid-template-columns: repeat(2, 1fr); } .news-card-lead { grid-column: span 2; } }
@media (max-width: 580px) { .news-grid { grid-template-columns: 1fr; } .news-card-lead { grid-column: span 1; } }

/* ---------- Audiences / wayfinding por público ---------- */
.audiences-section { background: var(--paper-strong); }
.audience-grid { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 3.5rem; border-top: 1px solid var(--ink); border-left: 1px solid var(--ink); }
.audience-card { display: flex; flex-direction: column; gap: 0.7rem; min-height: 235px; padding: clamp(1.4rem, 2.4vw, 2.1rem); border-right: 1px solid var(--ink); border-bottom: 1px solid var(--ink); color: var(--ink); text-decoration: none; transition: transform 280ms var(--ease), box-shadow 280ms var(--ease); }
.audience-card:hover { z-index: 2; transform: translateY(-6px); box-shadow: 0 22px 42px rgba(14, 13, 12, 0.16); }
.audience-symbol { position: relative; width: 30px; height: 30px; border: 1.5px solid currentColor; border-radius: 50%; }
.audience-symbol::after { content: ""; position: absolute; inset: 0; width: 9px; height: 9px; margin: auto; border-radius: 50%; background: currentColor; }
.audience-card h3 { margin: 0.3rem 0 0; font-family: var(--display); font-size: clamp(1.3rem, 2vw, 1.7rem); font-weight: 800; letter-spacing: -0.03em; line-height: 1; }
.audience-card p { margin: 0; font-size: 0.86rem; line-height: 1.55; opacity: 0.86; }
.audience-card b { display: flex; gap: 0.45rem; align-items: center; margin-top: auto; font-family: var(--mono); font-size: 0.66rem; font-weight: 500; letter-spacing: 0.04em; text-transform: uppercase; }
.audience-card b span { transition: transform 240ms var(--ease); }
.audience-card:hover b span { transform: translate(3px, -3px); }
.audience-cyan { background: var(--cyan); }
.audience-orange { background: var(--orange); }
.audience-light { background: var(--white); }
.audience-dark { background: var(--ink-2); color: var(--white); }

/* ---------- International impact atlas ---------- */
.international-section {
  max-width: none;
  padding-right: max(clamp(1.4rem, 4vw, 3rem), calc((100vw - var(--max)) / 2 + 3rem));
  padding-left: max(clamp(1.4rem, 4vw, 3rem), calc((100vw - var(--max)) / 2 + 3rem));
  color: var(--white);
  background:
    radial-gradient(circle at 87% 11%, rgba(86, 223, 227, 0.14), transparent 25%),
    linear-gradient(135deg, #0b0b0b 0%, #151310 52%, #090909 100%);
}
.international-section .section-number { color: var(--orange); border-color: rgba(255,255,255,0.3); }
.international-section .section-heading .eyebrow { color: var(--cyan); }
.international-section .section-heading h2 { max-width: 1050px; color: var(--white); }
.international-section .section-heading > p { color: rgba(255,255,255,0.67); }

.impact-atlas-shell {
  position: relative;
  margin-top: clamp(3rem, 7vw, 6rem);
  border: 1px solid rgba(255,255,255,0.24);
  background: #0c0c0c;
  box-shadow: 0 36px 100px rgba(0,0,0,0.38), 14px 14px 0 var(--orange);
  overflow: hidden;
}
.impact-atlas-shell::before {
  position: absolute;
  z-index: 0;
  top: -25%; left: 48%;
  width: 34%; height: 150%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.035), transparent);
  transform: rotate(18deg);
  content: "";
  pointer-events: none;
}
.impact-atlas-shell > * { position: relative; z-index: 1; }

.impact-atlas-topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-height: 58px;
  padding: 0 1.25rem;
  border-bottom: 1px solid rgba(255,255,255,0.18);
  color: rgba(255,255,255,0.62);
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.impact-atlas-topbar > div { display: flex; gap: 0.7rem; align-items: center; color: var(--white); }
.impact-live-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--orange); box-shadow: 0 0 0 6px rgba(255, 92, 43, 0.16); animation: atlas-pulse 2s infinite; }

.impact-atlas-controls { display: grid; grid-template-columns: repeat(2, 1fr); border-bottom: 1px solid rgba(255,255,255,0.18); }
.impact-atlas-controls button {
  display: flex;
  gap: 1rem;
  align-items: center;
  min-height: 74px;
  padding: 0 1.35rem;
  border: 0;
  border-right: 1px solid rgba(255,255,255,0.18);
  color: rgba(255,255,255,0.55);
  background: transparent;
  font: 700 0.78rem/1.2 var(--display);
  text-align: left;
  cursor: pointer;
  transition: color 200ms ease, background 200ms ease;
}
.impact-atlas-controls button:last-child { border-right: 0; }
.impact-atlas-controls button span { color: var(--cyan); font: 500 0.62rem/1 var(--mono); }
.impact-atlas-controls button:hover { color: var(--white); background: rgba(255,255,255,0.05); }
.impact-atlas-controls button.is-active { color: #0a0a0a; background: var(--cyan); }
.impact-atlas-controls button.is-active span { color: #0a0a0a; }

.impact-atlas-main { display: grid; grid-template-columns: minmax(0, 1fr) minmax(245px, 0.29fr); min-height: 570px; border-bottom: 1px solid rgba(255,255,255,0.18); }
.impact-map-panel { position: relative; min-width: 0; padding: 1.7rem 1.5rem 2.2rem 2.8rem; border-right: 1px solid rgba(255,255,255,0.18); overflow: hidden; }
.impact-map {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 495px;
  border: 1px solid rgba(86,223,227,0.16);
  background: radial-gradient(circle at 32% 53%, #17363a 0, #111b1c 28%, #0a0e0f 68%, #080808 100%);
}
.impact-map-coordinates { position: absolute; top: 2.05rem; bottom: 2.65rem; left: 0.55rem; display: flex; flex-direction: column; justify-content: space-between; color: rgba(255,255,255,0.32); font: 500 0.5rem/1 var(--mono); }
.impact-map-axis { position: absolute; right: 1.5rem; bottom: 0.72rem; left: 2.8rem; display: flex; justify-content: space-between; color: rgba(255,255,255,0.32); font: 500 0.5rem/1 var(--mono); }
.atlas-grid line { stroke: rgba(134, 230, 231, 0.12); stroke-width: 1; vector-effect: non-scaling-stroke; }
.atlas-land { pointer-events: none; }
.atlas-landmass {
  fill: rgba(86, 223, 227, 0.085);
  stroke: rgba(120, 226, 230, 0.4);
  stroke-width: 1;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}
.atlas-regions text { fill: rgba(255,255,255,0.07); font: 800 25px var(--display); letter-spacing: 3px; }
.atlas-arc { fill: none; stroke: var(--cyan); stroke-width: 1.2; stroke-dasharray: 5 7; opacity: 0.42; vector-effect: non-scaling-stroke; animation: atlas-route 11s linear infinite; }
.atlas-arc-1 { stroke: var(--orange); animation-duration: 14s; }
.atlas-arc-2 { opacity: 0.24; animation-duration: 18s; }
.atlas-marker { color: var(--orange); cursor: pointer; outline: none; transform-box: fill-box; transform-origin: center; transition: transform 180ms ease; }
.atlas-marker-halo { fill: currentColor; opacity: 0.1; animation: marker-pulse 2.8s ease-out infinite; }
.atlas-marker-dot { fill: currentColor; stroke: #090909; stroke-width: 2; filter: url(#markerGlow); vector-effect: non-scaling-stroke; }
.atlas-marker text { fill: rgba(255,255,255,0.62); font: 600 10px var(--mono); letter-spacing: 1px; opacity: 0; transition: opacity 160ms ease; pointer-events: none; }
.atlas-marker:hover, .atlas-marker:focus, .atlas-marker.is-active { color: var(--yellow); transform: scale(1.24); }
.atlas-marker:hover text, .atlas-marker:focus text, .atlas-marker.is-active text { opacity: 1; }
.atlas-marker.is-origin { color: var(--cyan); }
.atlas-marker.is-origin .atlas-marker-halo { opacity: 0.3; }

.impact-readout { display: flex; flex-direction: column; min-width: 0; padding: clamp(1.5rem, 3vw, 2.5rem); background: linear-gradient(180deg, #161616, #0d0d0d); }
.impact-readout-index { align-self: flex-end; color: rgba(255,255,255,0.2); font: 500 clamp(2.1rem, 4vw, 4rem)/0.9 var(--mono); letter-spacing: -0.08em; writing-mode: vertical-rl; }
.impact-readout > span { margin-top: auto; color: var(--orange); font: 500 0.6rem/1.3 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; }
.impact-readout > strong { display: block; margin-top: 0.9rem; font: 750 clamp(1.7rem, 3vw, 3.2rem)/0.96 var(--display); letter-spacing: -0.045em; }
.impact-readout > p { min-height: 74px; margin: 1rem 0 1.8rem; color: rgba(255,255,255,0.58); font-size: 0.8rem; line-height: 1.65; }
.impact-readout dl { display: grid; grid-template-columns: repeat(2, 1fr); margin: 0; border-top: 1px solid rgba(255,255,255,0.16); border-bottom: 1px solid rgba(255,255,255,0.16); }
.impact-readout dl div { padding: 1rem 0.5rem 1rem 0; }
.impact-readout dl div + div { padding-left: 0.8rem; border-left: 1px solid rgba(255,255,255,0.16); }
.impact-readout dt { min-height: 28px; color: rgba(255,255,255,0.45); font: 500 0.5rem/1.35 var(--mono); text-transform: uppercase; }
.impact-readout dd { margin: 0.3rem 0 0; color: var(--cyan); font: 750 2rem/1 var(--display); }
.impact-readout > small { margin-top: 1rem; color: rgba(255,255,255,0.32); font: 500 0.52rem/1.4 var(--mono); text-transform: uppercase; }

.impact-metrics { display: grid; grid-template-columns: repeat(4, 1fr); border-bottom: 1px solid rgba(255,255,255,0.18); }
.impact-metric { position: relative; display: flex; flex-direction: column; min-height: 245px; padding: 1.25rem; border-right: 1px solid rgba(255,255,255,0.18); overflow: hidden; }
.impact-metric:last-child { border-right: 0; }
.impact-metric > span { color: rgba(255,255,255,0.36); font: 500 0.56rem/1 var(--mono); }
.impact-metric > strong { margin-top: auto; color: var(--cyan); font: 780 clamp(3.7rem, 7vw, 7.4rem)/0.74 var(--display); letter-spacing: -0.07em; }
.impact-metric > p { max-width: 190px; margin: 1.2rem 0 0; color: rgba(255,255,255,0.64); font: 500 0.64rem/1.45 var(--mono); text-transform: uppercase; }
.impact-metric-primary { color: #0a0a0a; background: var(--orange); }
.impact-metric-primary > span, .impact-metric-primary > p { color: rgba(0,0,0,0.68); }
.impact-metric-primary > strong { color: #0a0a0a; }
.impact-metric-route { background: rgba(86,223,227,0.08); }
.impact-metric-route > strong { font-size: clamp(2.8rem, 5.6vw, 6rem); white-space: nowrap; }

.impact-format-rail { display: grid; grid-template-columns: repeat(3, 1fr); min-height: 96px; border-bottom: 1px solid rgba(255,255,255,0.18); }
.impact-format-rail > div { display: flex; gap: 0.75rem; align-items: baseline; padding: 1.2rem; border-right: 1px solid rgba(255,255,255,0.18); }
.impact-format-rail > div:last-child { border-right: 0; }
.impact-format-rail strong { color: var(--yellow); font: 740 2rem/1 var(--display); }
.impact-format-rail span { color: rgba(255,255,255,0.5); font: 500 0.58rem/1.4 var(--mono); text-transform: uppercase; }

.impact-forecast { display: grid; grid-template-columns: 1fr 0.7fr; gap: clamp(2rem, 5vw, 5rem); align-items: center; padding: clamp(1.8rem, 4vw, 3rem); background: var(--cyan); color: #080808; }
.impact-forecast div { display: flex; flex-direction: column; gap: 0.7rem; }
.impact-forecast span { font: 600 0.62rem/1 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; }
.impact-forecast strong { max-width: 720px; font: 760 clamp(1.8rem, 3.5vw, 3.8rem)/0.98 var(--display); letter-spacing: -0.04em; }
.impact-forecast p { margin: 0; padding-left: 1.5rem; border-left: 1px solid rgba(0,0,0,0.35); font-size: 0.82rem; line-height: 1.6; }
.impact-forecast b { display: block; margin-bottom: 0.4rem; color: #080808; font: 780 clamp(2.5rem, 5vw, 5rem)/0.8 var(--display); }
.impact-history-link { margin-top: 2.5rem; color: var(--white); }

@keyframes atlas-pulse { 50% { box-shadow: 0 0 0 12px rgba(255, 92, 43, 0); } }
@keyframes atlas-route { to { stroke-dashoffset: -120; } }
@keyframes marker-pulse { 70%, 100% { r: 28px; opacity: 0; } }

/* ---------- Story (subpáginas / ediciones) ---------- */
.story-section {
  display: grid;
  grid-template-columns: minmax(320px, 0.72fr) minmax(0, 1.28fr);
  gap: clamp(3rem, 7vw, 7rem);
  max-width: none;
  padding-right: max(clamp(1.4rem, 4vw, 3rem), calc((100vw - var(--max)) / 2 + 3rem));
  padding-left: max(clamp(1.4rem, 4vw, 3rem), calc((100vw - var(--max)) / 2 + 3rem));
  background: var(--paper-strong);
}
.story-visual { position: relative; display: grid; min-height: 720px; place-items: center; overflow: hidden; background: var(--ink); }
.story-visual::after { position: absolute; inset: 2rem; border: 1px solid rgba(255, 255, 255, 0.22); content: ""; pointer-events: none; }
.story-visual img { width: 100%; height: 100%; object-fit: contain; background: #000; }
.story-visual span {
  position: absolute;
  z-index: 2;
  right: 0; bottom: 2.6rem; left: 0;
  width: fit-content;
  margin: auto;
  padding: 0.6rem 0.9rem;
  background: var(--yellow);
  font-family: var(--mono);
  font-size: 0.64rem;
  text-transform: uppercase;
}
.story-content { align-self: center; }
.story-content .section-number { top: 0; left: 0; }
.story-content .section-heading { margin-left: clamp(2.6rem, 7vw, 7rem); }

.history-list { margin: 3rem 0 2rem; border-top: 1px solid var(--line); }
.history-item { display: grid; grid-template-columns: 110px 1fr; gap: 1.2rem; padding: 1.3rem 0; border-bottom: 1px solid var(--line); transition: padding-left 240ms var(--ease); }
.history-item:hover { padding-left: 0.6rem; }
.history-item > span { color: var(--cyan-deep); font-family: var(--mono); font-size: 0.72rem; }
.history-item h3 { margin: 0 0 0.35rem; font-family: var(--display); font-size: 1.05rem; font-weight: 700; letter-spacing: -0.02em; }
.history-item p { margin: 0; color: var(--muted); font-size: 0.82rem; line-height: 1.65; }
.history-standalone { max-width: 900px; margin-left: auto; }

/* ---------- Productions / films (la sala oscura) ---------- */
.productions-section {
  position: relative;
  max-width: none;
  padding-right: max(clamp(1.4rem, 4vw, 3rem), calc((100vw - var(--max)) / 2 + 3rem));
  padding-left: max(clamp(1.4rem, 4vw, 3rem), calc((100vw - var(--max)) / 2 + 3rem));
  background: var(--ink);
  color: var(--white);
  overflow: hidden;
}
.productions-section::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(120% 80% at 80% 0%, rgba(49, 184, 200, 0.1), transparent 55%);
  pointer-events: none;
}
.productions-section .section-heading > p:not(.eyebrow) { color: rgba(255, 255, 255, 0.66); }
.productions-section .section-number::before { border-color: var(--orange); }

.production-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(1rem, 2vw, 2rem); margin-top: 4.5rem; }
.production-card { position: relative; min-width: 0; }
.production-2 { margin-top: 4rem; }
.production-4 { margin-top: 2rem; }

.production-poster {
  position: relative;
  overflow: hidden;
  background: #070707;
  box-shadow: 14px 16px 0 rgba(49, 184, 200, 0.2);
  transition: box-shadow 380ms var(--ease), transform 380ms var(--ease);
}
.production-poster::after {
  content: "";
  position: absolute;
  inset: -30% -30% auto -30%;
  height: 70%;
  background: radial-gradient(circle at 50% 0%, rgba(255, 106, 26, 0.32), transparent 70%);
  opacity: 0;
  transition: opacity 420ms var(--ease);
  pointer-events: none;
}
.production-card:hover .production-poster {
  transform: translateY(-8px);
  box-shadow: 18px 22px 0 rgba(255, 106, 26, 0.5), 0 30px 60px rgba(0, 0, 0, 0.45);
}
.production-card:hover .production-poster::after { opacity: 1; }
.production-poster > img { width: 100%; aspect-ratio: 2 / 3; object-fit: contain; background: #050505; }

.poster-placeholder {
  display: flex;
  flex-direction: column;
  aspect-ratio: 2 / 3;
  padding: 1.2rem;
  background:
    radial-gradient(circle at 62% 32%, var(--orange) 0 7%, transparent 7.5%),
    repeating-linear-gradient(0deg, transparent 0 17px, rgba(255, 255, 255, 0.07) 17px 18px),
    #14110f;
}
.poster-placeholder span, .poster-placeholder small { font-family: var(--mono); font-size: 0.64rem; }
.poster-placeholder strong { margin: auto 0; font-family: var(--display); font-size: clamp(1.6rem, 3vw, 2.8rem); font-weight: 700; letter-spacing: -0.03em; text-transform: uppercase; }

.production-copy { padding: 1.6rem 0 0; }
.production-copy > span { color: var(--cyan); font-family: var(--mono); font-size: 0.62rem; text-transform: uppercase; letter-spacing: 0.04em; }
.production-copy h3 { margin: 0.65rem 0 0.5rem; font-family: var(--display); font-size: 1.5rem; font-weight: 700; letter-spacing: -0.03em; }
.production-copy p { margin: 0; color: rgba(255, 255, 255, 0.64); font-size: 0.83rem; }
.production-copy small { display: block; margin-top: 1rem; color: var(--yellow); font-family: var(--mono); font-size: 0.62rem; }

.film-meta { display: grid; gap: 0.45rem; margin-top: 0.9rem; }
.film-meta span { padding: 0.6rem; border: 1px solid var(--line-light); color: rgba(255, 255, 255, 0.74); font-family: var(--mono); font-size: 0.66rem; }

/* ---------- Editions ---------- */
.edition-grid { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 4.5rem; border: 1px solid var(--line); }
.edition-card { position: relative; display: flex; flex-direction: column; min-height: 440px; padding: clamp(1.6rem, 3vw, 2.5rem); border-right: 1px solid var(--line); overflow: hidden; transition: transform 320ms var(--ease); }
.edition-card:last-child { border-right: 0; }
.edition-card:hover { transform: translateY(-6px); z-index: 2; box-shadow: 0 26px 50px rgba(0,0,0,0.25); }
.edition-1 { background: var(--cyan); }
.edition-2 { background: var(--orange); }
.edition-3 { background: var(--ink-2); color: var(--white); }
.edition-card > div { display: flex; justify-content: space-between; gap: 1rem; font-family: var(--mono); font-size: 0.68rem; }
.edition-card > div small { max-width: 140px; text-align: right; }
.edition-card h3 { margin: auto 0 1rem; font-family: var(--display); font-size: clamp(1.9rem, 3.4vw, 3.4rem); font-weight: 700; line-height: 0.96; letter-spacing: -0.04em; }
.edition-card p { margin: 0 0 1.2rem; font-size: 0.85rem; }
.edition-card em { font-family: var(--mono); font-size: 0.65rem; font-style: normal; }
.edition-card .text-link { margin-top: 1.5rem; }
.edition-card .text-link::after { background: var(--ink); }
.edition-3 .text-link { color: var(--white); }
.edition-3 .text-link::after { background: var(--cyan); }

/* ---------- Living archive / edition gallery ---------- */
.edition-gallery {
  position: relative;
  max-width: none;
  padding: clamp(5rem, 9vw, 9rem) max(clamp(1.4rem, 5vw, 4rem), calc((100vw - var(--max)) / 2 + 3rem));
  overflow: hidden;
  background: var(--paper);
}
.edition-gallery::before { position: absolute; top: 0; right: 7vw; width: 18vw; height: 8px; background: var(--orange); content: ""; }
.edition-gallery-heading { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(300px, 0.72fr); gap: clamp(2rem, 6vw, 6rem); align-items: end; margin-bottom: 3rem; }
.edition-gallery-heading h2 { max-width: 780px; margin: 1rem 0 0; font-family: var(--display); font-size: clamp(3rem, 6vw, 6.4rem); letter-spacing: -0.06em; line-height: 0.9; }
.edition-gallery-heading > div:last-child p { max-width: 560px; margin: 0 0 1.2rem; color: var(--muted); font-size: 0.92rem; line-height: 1.7; }
.edition-gallery-heading > div:last-child span { color: var(--cyan-deep); font-family: var(--mono); font-size: 0.6rem; letter-spacing: 0.06em; text-transform: uppercase; }
.edition-gallery-grid { display: grid; grid-template-columns: repeat(12, 1fr); grid-auto-rows: clamp(170px, 17vw, 250px); gap: 0.8rem; }
.edition-gallery-card { position: relative; min-width: 0; min-height: 0; margin: 0; overflow: hidden; background: var(--ink-2); }
.edition-gallery-card-1 { grid-column: span 7; grid-row: span 2; }
.edition-gallery-card-2, .edition-gallery-card-3 { grid-column: span 5; }
.edition-gallery-card-4, .edition-gallery-card-5, .edition-gallery-card-6 { grid-column: span 4; }
.edition-gallery-card img { width: 100%; height: 100%; object-fit: cover; transition: transform 650ms var(--ease), filter 400ms; }
.edition-gallery-card-1 img { object-position: center 72%; }
.edition-gallery-card-2 img { object-position: center 55%; }
.edition-gallery-card-3 img { object-position: center 38%; }
.edition-gallery-card-4 img { object-position: center 40%; }
.edition-gallery-card-5 img { object-position: center; }
.edition-gallery-card-6 img { object-position: center; }
.edition-gallery-card::after { position: absolute; inset: 38% 0 0; background: linear-gradient(to bottom, transparent, rgba(14,13,12,0.82)); content: ""; pointer-events: none; }
.edition-gallery-card figcaption { position: absolute; z-index: 2; right: 0; bottom: 0; left: 0; display: flex; justify-content: space-between; gap: 1rem; align-items: end; padding: 1rem 1.1rem; color: var(--white); }
.edition-gallery-card figcaption span { color: var(--orange); font-family: var(--mono); font-size: 0.56rem; }
.edition-gallery-card figcaption strong { max-width: 220px; font-size: 0.78rem; text-align: right; }
.edition-gallery-card:hover img { filter: saturate(1.08) contrast(1.03); transform: scale(1.045); }

/* ---------- Network ---------- */
.network-section {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(420px, 1.18fr);
  gap: clamp(2rem, 6vw, 6rem);
  align-items: center;
  padding: clamp(5rem, 9vw, 9rem) max(clamp(1.4rem, 5vw, 4rem), calc((100vw - var(--max)) / 2 + 3rem));
  overflow: hidden;
  background: var(--cyan);
}
.network-number { position: absolute; top: clamp(5rem, 9vw, 9rem); left: max(clamp(1.4rem, 5vw, 4rem), calc((100vw - var(--max)) / 2 + 3rem)); color: var(--ink); font-family: var(--mono); font-size: 0.7rem; }
.network-copy h2 { font-family: var(--display); }
.network-copy > p:not(.eyebrow) { color: rgba(14, 13, 12, 0.74); }
.network-copy .button { margin-top: 1.8rem; }

.network-visual {
  position: relative;
  min-height: 620px;
  padding: 1.15rem;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 28px;
  background: var(--ink-2);
  box-shadow: 0 30px 70px rgba(14, 13, 12, 0.24);
  color: var(--white);
  isolation: isolate;
}
.network-visual::before {
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: linear-gradient(rgba(255,255,255,0.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.035) 1px, transparent 1px);
  background-size: 32px 32px;
  content: "";
  mask-image: linear-gradient(to bottom, #000, transparent 92%);
}
.network-interface-head, .network-interface-foot {
  position: relative;
  z-index: 3;
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.75rem 0.85rem;
  color: rgba(255,255,255,0.55);
  font-family: var(--mono);
  font-size: 0.58rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.network-interface-head { border-bottom: 1px solid rgba(255,255,255,0.12); }
.network-interface-head span:last-child { color: var(--cyan); }
.network-hub {
  position: relative;
  width: min(100%, 540px);
  aspect-ratio: 1;
  margin: 0.5rem auto;
}
.network-web { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.network-ring { fill: none; stroke: rgba(255,255,255,0.14); stroke-width: 0.25; }
.network-spoke { stroke: rgba(255,255,255,0.16); stroke-width: 0.3; }
.network-signal { fill: var(--orange); }

.network-node-list { position: absolute; inset: 0; margin: 0; padding: 0; list-style: none; }
.network-node {
  position: absolute;
  width: 19%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
}
.network-node-face {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: rgba(20, 19, 18, 0.92);
  border: 1.5px solid rgba(255,255,255,0.85);
  box-shadow: 0 14px 30px rgba(0,0,0,0.4);
  text-align: center;
  animation: network-float 7s ease-in-out infinite;
  transition: transform 240ms var(--ease), box-shadow 240ms var(--ease), border-color 240ms;
}
.network-node-face em { color: rgba(255,255,255,0.5); font-family: var(--mono); font-size: 0.5rem; font-style: normal; letter-spacing: 0.06em; }
.network-node-face strong { margin-top: 2px; color: var(--white); font-family: var(--mono); font-weight: 500; font-size: clamp(0.52rem, 1.1vw, 0.72rem); letter-spacing: 0.02em; }
.network-node-dot { position: absolute; top: 10%; left: 50%; width: 7px; height: 7px; border-radius: 50%; transform: translateX(-50%); }
.node-1 .network-node-face { border-color: var(--orange); } .node-1 .network-node-dot { background: var(--orange); }
.node-2 .network-node-face { border-color: var(--cyan); }   .node-2 .network-node-dot { background: var(--cyan); }
.node-3 .network-node-face { border-color: var(--yellow); } .node-3 .network-node-dot { background: var(--yellow); }
.node-4 .network-node-face { border-color: var(--orange); } .node-4 .network-node-dot { background: var(--orange); }
.node-5 .network-node-face { border-color: var(--cyan); }   .node-5 .network-node-dot { background: var(--cyan); }
.node-1 .network-node-face { animation-delay: -0.4s; }
.node-2 .network-node-face { animation-delay: -1.8s; }
.node-3 .network-node-face { animation-delay: -3.1s; }
.node-4 .network-node-face { animation-delay: -4.6s; }
.node-5 .network-node-face { animation-delay: -5.7s; }
.network-node:hover { z-index: 5; }
.network-node:hover .network-node-face { transform: translateY(-4px) scale(1.04); box-shadow: 0 20px 40px rgba(0,0,0,0.55); }

.network-center {
  position: absolute;
  top: 50%; left: 50%;
  width: 31%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--orange);
  box-shadow: 0 26px 60px rgba(244, 106, 53, 0.4);
  color: var(--ink);
  text-align: center;
  z-index: 3;
}
.network-orbit-ring { position: absolute; inset: -13%; border-radius: 50%; border: 1.5px dashed rgba(14,13,12,0.32); animation: network-spin 26s linear infinite; }
.network-radar { position: absolute; inset: 0; border-radius: 50%; border: 1.5px solid rgba(14,13,12,0.4); opacity: 0; animation: network-radar 3.4s ease-out infinite; }
.network-radar-2 { animation-delay: 1.7s; }
.network-center strong { position: relative; font-family: var(--display); font-size: clamp(1rem, 2.6vw, 1.6rem); font-weight: 800; letter-spacing: -0.03em; line-height: 0.9; }
.network-center small { position: relative; margin-top: 3px; font-family: var(--mono); font-size: clamp(0.46rem, 1vw, 0.6rem); letter-spacing: 0.22em; }
.network-center em { position: absolute; bottom: -14%; padding: 0.35rem 0.6rem; border-radius: 999px; background: var(--yellow); font-family: var(--mono); font-size: 0.46rem; font-style: normal; text-transform: uppercase; white-space: nowrap; }

@keyframes network-float { 0%, 100% { transform: translateY(-5px); } 50% { transform: translateY(5px); } }
@keyframes network-spin { to { transform: rotate(360deg); } }
@keyframes network-radar { 0% { transform: scale(1); opacity: 0.5; } 100% { transform: scale(2.5); opacity: 0; } }

.network-interface-foot { align-items: center; border-top: 1px solid rgba(255,255,255,0.12); }
.network-interface-foot span:first-child { display: flex; align-items: center; gap: 0.5rem; color: var(--white); }
.network-interface-foot i { width: 7px; height: 7px; border-radius: 50%; background: var(--yellow); box-shadow: 0 0 0 5px rgba(255,216,77,0.12); }

/* ---------- Publication / knowledge ---------- */
.publication-section {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(380px, 1.05fr);
  gap: clamp(3rem, 8vw, 8rem);
  align-items: center;
  padding: clamp(5rem, 9vw, 9rem) max(clamp(1.4rem, 5vw, 4rem), calc((100vw - var(--max)) / 2 + 3rem));
  overflow: hidden;
  background: #56569d;
  color: var(--white);
}
.publication-section::before { position: absolute; top: -18vw; right: -10vw; width: 42vw; height: 42vw; border: 1px solid rgba(255,255,255,0.16); border-radius: 50%; content: ""; }
.publication-copy { position: relative; z-index: 2; }
.publication-number { display: block; margin-bottom: 2.6rem; color: #ffb64d; font-family: var(--mono); font-size: 0.7rem; }
.publication-copy h2 { margin: 1rem 0 1.4rem; font-family: var(--display); font-size: clamp(2.8rem, 5.5vw, 5.8rem); letter-spacing: -0.055em; line-height: 0.94; }
.publication-lead { max-width: 650px; color: var(--white) !important; font-size: clamp(1.05rem, 1.8vw, 1.35rem) !important; font-weight: 700; line-height: 1.5; }
.publication-copy > p:not(.eyebrow):not(.publication-lead) { max-width: 680px; color: rgba(255,255,255,0.68); font-size: 0.86rem; line-height: 1.7; }
.publication-facts { display: grid; grid-template-columns: repeat(3, 1fr); max-width: 620px; margin: 2.2rem 0; border-top: 1px solid rgba(255,255,255,0.18); border-left: 1px solid rgba(255,255,255,0.18); }
.publication-facts div { min-height: 105px; padding: 1rem; border-right: 1px solid rgba(255,255,255,0.18); border-bottom: 1px solid rgba(255,255,255,0.18); }
.publication-facts strong, .publication-facts span { display: block; }
.publication-facts strong { color: #ffb64d; font-family: var(--display); font-size: 2.2rem; line-height: 1; }
.publication-facts span { margin-top: 0.55rem; font-family: var(--mono); font-size: 0.55rem; text-transform: uppercase; }
.publication-topics { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0; max-width: 680px; margin: 0 0 2rem; padding: 0; border-top: 1px solid rgba(255,255,255,0.16); list-style: none; }
.publication-topics li { display: grid; grid-template-columns: 30px 1fr; gap: 0.65rem; padding: 0.85rem 0; border-bottom: 1px solid rgba(255,255,255,0.16); color: rgba(255,255,255,0.78); font-size: 0.72rem; }
.publication-topics li:nth-child(odd) { padding-right: 1rem; }
.publication-topics li:nth-child(even) { padding-left: 1rem; border-left: 1px solid rgba(255,255,255,0.16); }
.publication-topics span { color: #ffb64d; font-family: var(--mono); font-size: 0.55rem; }
.publication-credit { display: block; max-width: 620px; margin-top: 1.4rem; color: rgba(255,255,255,0.58); font-family: var(--mono); font-size: 0.56rem; line-height: 1.6; }
.publication-cover { position: relative; z-index: 2; display: grid; min-height: 700px; place-items: center; color: var(--white); text-decoration: none; }
.publication-cover::before, .publication-cover::after { position: absolute; z-index: -1; border-radius: 50%; content: ""; }
.publication-cover::before { top: 8%; right: 2%; width: 230px; height: 230px; background: #ff9f43; }
.publication-cover::after { bottom: 4%; left: 0; width: 190px; height: 190px; border: 1px solid rgba(255,255,255,0.32); }
.publication-cover img { width: min(430px, 72%); max-height: 650px; object-fit: contain; box-shadow: 24px 28px 0 rgba(14,13,12,0.22), 0 34px 80px rgba(14,13,12,0.32); transform: rotate(2.2deg); transition: transform 400ms var(--ease), box-shadow 400ms var(--ease); }
.publication-cover:hover img { box-shadow: 14px 18px 0 rgba(14,13,12,0.22), 0 26px 60px rgba(14,13,12,0.28); transform: rotate(0deg) translateY(-8px); }
.publication-cover-label { position: absolute; top: 2rem; left: 0; max-width: 230px; color: rgba(255,255,255,0.72); font-family: var(--mono); font-size: 0.58rem; line-height: 1.5; text-transform: uppercase; }
.publication-cover > div { position: absolute; right: 0; bottom: 2.5rem; display: grid; grid-template-columns: auto 1fr auto; gap: 1rem; align-items: center; min-width: 280px; padding: 1rem 1.2rem; background: var(--ink); box-shadow: 8px 8px 0 var(--cyan); }
.publication-cover > div span { color: #ffb64d; font-family: var(--mono); font-size: 0.6rem; }
.publication-cover > div strong { font-family: var(--display); font-size: 1rem; }
.publication-cover > div i { color: var(--cyan); font-style: normal; }

/* ---------- Ecosystem ---------- */
.ecosystem-section {
  max-width: none;
  padding-right: max(clamp(1.4rem, 4vw, 3rem), calc((100vw - var(--max)) / 2 + 3rem));
  padding-left: max(clamp(1.4rem, 4vw, 3rem), calc((100vw - var(--max)) / 2 + 3rem));
  background: var(--paper);
}
.ecosystem-intro { display: grid; grid-template-columns: minmax(310px, 0.72fr) minmax(0, 1.28fr); margin-top: 4.5rem; background: var(--ink); color: var(--white); }
.ecosystem-total { display: flex; flex-direction: column; min-height: 320px; padding: clamp(1.8rem, 4vw, 3.4rem); background: var(--orange); color: var(--ink); }
.ecosystem-total strong { font-family: var(--display); font-size: clamp(6rem, 13vw, 12rem); font-weight: 800; letter-spacing: -0.06em; line-height: 0.74; }
.ecosystem-total span { max-width: 260px; margin-top: auto; font-weight: 700; }
.ecosystem-intro > p { max-width: 680px; margin: auto; padding: clamp(2rem, 6vw, 5rem); color: rgba(255, 255, 255, 0.74); font-size: clamp(1.05rem, 2vw, 1.4rem); line-height: 1.7; }

.ecosystem-group { padding-top: 4rem; border-top: 1px solid var(--line); }
.ecosystem-strategic-group { margin-top: 5rem; }
.ecosystem-networks { margin-top: 4rem; }
.ecosystem-label { display: grid; grid-template-columns: 70px minmax(180px, 0.6fr) 1fr; gap: 1.4rem; align-items: start; margin-bottom: 1.5rem; }
.ecosystem-label > span { color: var(--orange); font-family: var(--mono); font-size: 0.68rem; }
.ecosystem-label h3 { margin: 0; font-family: var(--display); font-size: 1.4rem; font-weight: 700; letter-spacing: -0.02em; }
.ecosystem-label p { max-width: 520px; margin: 0; color: var(--muted); font-size: 0.84rem; }

.ecosystem-strategic-grid, .ecosystem-featured-grid, .ecosystem-compact-grid, .ecosystem-sponsor-grid { display: grid; border-top: 1px solid var(--ink); border-left: 1px solid var(--ink); }
.ecosystem-strategic-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.ecosystem-featured-grid { grid-template-columns: repeat(3, 1fr); }
.ecosystem-festivals-grid { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--ink); border-left: 1px solid var(--ink); }
.ecosystem-two-column { display: grid; grid-template-columns: 1.08fr 0.92fr; gap: clamp(2rem, 4vw, 4rem); margin: 5rem 0 2.4rem; }
.ecosystem-two-column .ecosystem-label { grid-template-columns: 50px 1fr; }
.ecosystem-two-column .ecosystem-label p { grid-column: 2; }
.ecosystem-compact-grid { grid-template-columns: repeat(2, 1fr); }
.ecosystem-sponsor-grid { grid-template-columns: repeat(2, 1fr); }

.ecosystem-tile {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 1.3rem;
  border-right: 1px solid var(--ink);
  border-bottom: 1px solid var(--ink);
  color: var(--ink);
  text-decoration: none;
  transition: transform 280ms var(--ease), box-shadow 280ms var(--ease);
}
.ecosystem-tile:hover { z-index: 2; transform: translateY(-6px); box-shadow: 0 22px 42px rgba(14, 13, 12, 0.16); }
.ecosystem-strategic { min-height: 245px; }
.ecosystem-featured { min-height: 320px; }
.ecosystem-compact { min-height: 210px; }
.ecosystem-sponsor { min-height: 175px; }
.ecosystem-meta { margin-top: auto; padding-top: 1.2rem; }
.ecosystem-meta span, .ecosystem-meta small { display: block; }
.ecosystem-meta span { font-size: 0.88rem; font-weight: 800; }
.ecosystem-meta small { margin-top: 0.3rem; color: currentColor; font-family: var(--mono); font-size: 0.57rem; line-height: 1.5; opacity: 0.7; }
.ecosystem-wordmark { display: flex; align-items: center; min-height: 100px; font-family: var(--display); font-size: clamp(1.6rem, 3.6vw, 3.6rem); font-weight: 800; letter-spacing: -0.04em; line-height: 0.9; }
.ecosystem-dark { background: var(--ink-2); color: var(--white); }
.ecosystem-light { background: var(--white); }
.ecosystem-orange { background: var(--orange); }
.ecosystem-cyan { background: var(--cyan); }
.ecosystem-yellow { background: var(--yellow); }

.ecosystem-tile .logo-stage {
  margin-bottom: 1rem;
  border: 1px solid rgba(14, 13, 12, 0.14);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 10px 26px rgba(14, 13, 12, 0.06);
}
.ecosystem-dark .logo-stage { border-color: rgba(255, 255, 255, 0.2); }
.ecosystem-compact-grid > :last-child:nth-child(odd) { grid-column: 1 / -1; }

/* Cada marca conserva su proporción, pero se calibra por tamaño óptico. */
.logo-stage {
  display: grid;
  width: 100%;
  height: 118px;
  place-items: center;
  padding: 0.75rem;
  overflow: visible;
}
.logo-stage img {
  display: block;
  width: auto;
  max-width: var(--logo-width, 84%);
  height: auto;
  max-height: var(--logo-height, 84px);
  object-fit: contain;
  object-position: center;
  transform: scale(var(--logo-scale, 1));
  transform-origin: center;
}
.logo-fallback {
  display: grid;
  width: 72px;
  height: 72px;
  place-items: center;
  border: 1px solid currentColor;
  border-radius: 50%;
  font-family: var(--display);
  font-size: 1rem;
}
.logo-fallback[hidden] { display: none; }
.logo-stage-strategic { height: 106px; }
.logo-stage-sponsor { height: 86px; padding: 0.5rem; }

/* ---------- Partner strip ---------- */
.partner-strip { display: grid; grid-template-columns: repeat(4, 1fr); margin: 4rem 0 2.2rem; border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.partner-tile { display: flex; flex-direction: column; min-height: 190px; padding: 1.4rem; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); text-decoration: none; transition: transform 260ms var(--ease), box-shadow 260ms var(--ease); }
.partner-tile:hover { transform: translateY(-5px); z-index: 2; box-shadow: 0 18px 36px rgba(14,13,12,0.16); }
.partner-tile .logo-stage { margin: auto; }
.partner-tile span { margin-top: 1rem; font-family: var(--mono); font-size: 0.6rem; text-align: center; text-transform: uppercase; letter-spacing: 0.04em; }
.partner-dark { background: var(--ink-2); color: var(--white); }
.partner-light { background: var(--paper-strong); }

/* ---------- Video section (subpáginas) ---------- */
.video-section {
  display: grid;
  grid-template-columns: 0.78fr 1.22fr;
  gap: clamp(2rem, 6vw, 6rem);
  align-items: center;
  max-width: none;
  padding-right: max(clamp(1.4rem, 4vw, 3rem), calc((100vw - var(--max)) / 2 + 3rem));
  padding-left: max(clamp(1.4rem, 4vw, 3rem), calc((100vw - var(--max)) / 2 + 3rem));
  background: var(--ink);
  color: var(--white);
}
.video-copy h2 { font-family: var(--display); }
.video-copy > p:not(.eyebrow) { color: rgba(255, 255, 255, 0.68); }
.video-copy .text-link { margin-top: 1.6rem; }
.video-frame { position: relative; overflow: hidden; background: #000; aspect-ratio: 16 / 9; box-shadow: 18px 18px 0 var(--orange), var(--shadow-dark); }
.video-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* ---------- Generic cards / feature / partners / news / socials / steps ---------- */
.card-grid, .partner-grid, .news-grid, .social-grid { display: grid; gap: 1rem; margin-top: 3.5rem; }
.card-grid { grid-template-columns: repeat(4, 1fr); }
.info-card { min-height: 270px; padding: 1.5rem; border: 1px solid var(--line); background: var(--paper-strong); transition: transform 260ms var(--ease), box-shadow 260ms var(--ease); }
.info-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-paper); }
.info-card > span { color: var(--orange); font-family: var(--mono); font-size: 0.66rem; }
.info-card h3 { margin: 3.2rem 0 0.7rem; font-family: var(--display); font-size: 1.35rem; font-weight: 700; letter-spacing: -0.02em; }
.info-card p { color: var(--muted); font-size: 0.85rem; }
.info-card small { color: var(--cyan-deep); font-family: var(--mono); }

.feature-band {
  display: grid;
  grid-template-columns: 1fr 0.7fr;
  gap: 3rem;
  max-width: none;
  padding-right: max(clamp(1.4rem, 4vw, 3rem), calc((100vw - var(--max)) / 2 + 3rem));
  padding-left: max(clamp(1.4rem, 4vw, 3rem), calc((100vw - var(--max)) / 2 + 3rem));
  background: var(--ink);
  color: var(--white);
}
.feature-band .section-heading { margin-left: 0; }
.feature-band .section-heading h2 { font-family: var(--display); }
.feature-band .section-heading > p:not(.eyebrow), .feature-band > div > p { color: rgba(255, 255, 255, 0.7); }
.feature-band ul { display: grid; gap: 0.75rem; align-content: center; margin: 0; padding: 0; list-style: none; }
.feature-band li { padding: 1rem; border: 1px solid var(--line-light); font-family: var(--mono); font-size: 0.78rem; }

.partner-grid { grid-template-columns: repeat(3, 1fr); }
.partner-groups { display: grid; gap: clamp(3rem, 7vw, 5.5rem); margin-top: 4rem; }
.partner-group { min-width: 0; }
.partner-group-heading { display: flex; align-items: baseline; gap: 1rem; padding-bottom: 1rem; border-bottom: 1px solid var(--ink); }
.partner-group-heading span { color: var(--orange); font-family: var(--mono); font-size: 0.66rem; }
.partner-group-heading h3 { margin: 0; font-family: var(--display); font-size: clamp(1.5rem, 3vw, 2.5rem); letter-spacing: -0.03em; }
.partner-group .partner-grid { margin-top: 1.25rem; }
.partner-card { overflow: hidden; border: 1px solid var(--line); background: var(--paper-strong); transition: transform 260ms var(--ease), box-shadow 260ms var(--ease); }
.partner-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-paper); }
.partner-logo { display: grid; min-height: 160px; place-items: center; padding: 1rem; background: var(--white); border-bottom: 1px solid var(--line); }
.partner-logo-dark { background: var(--ink-2); }
.partner-logo .logo-stage { height: 122px; }
.partner-logo .logo-fallback { background: var(--yellow); color: var(--ink); border: 0; }
.partner-card > div:last-child { padding: 1.3rem; }
.partner-card > div:last-child > span { color: var(--cyan-deep); font-family: var(--mono); font-size: 0.64rem; text-transform: uppercase; }
.partner-card h3 { margin: 0.7rem 0 0.4rem; font-family: var(--display); font-size: 1.2rem; font-weight: 700; }
.partner-card p { margin: 0; color: var(--muted); font-size: 0.83rem; }

.steps-section { max-width: 1000px; }
.steps-list { margin: 3.5rem 0 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.steps-list li { display: grid; grid-template-columns: 90px 1fr; gap: 1rem; align-items: center; padding: 1.3rem 0; border-bottom: 1px solid var(--line); transition: padding-left 240ms var(--ease); }
.steps-list li:hover { padding-left: 0.6rem; }
.steps-list span { color: var(--orange); font-family: var(--mono); font-size: 0.7rem; }
.steps-list p { margin: 0; font-weight: 700; }

.news-grid { grid-template-columns: repeat(3, 1fr); }
.news-card { display: flex; flex-direction: column; min-height: 300px; padding: 1.5rem; border-top: 3px solid var(--ink); transition: border-color 240ms; }
.news-card:hover { border-color: var(--orange); }
.news-card > span { color: var(--cyan-deep); font-family: var(--mono); font-size: 0.64rem; text-transform: uppercase; }
.news-card h3 { margin: 3rem 0 0.7rem; font-family: var(--display); font-size: 1.25rem; font-weight: 700; }
.news-card p { color: var(--muted); font-size: 0.84rem; }
.news-card .text-link { margin-top: auto; }

.social-grid { grid-template-columns: repeat(5, 1fr); }
.social-card { display: flex; flex-direction: column; min-height: 190px; padding: 1.3rem; border: 1px solid var(--line); text-decoration: none; transition: background 220ms, color 220ms; }
.social-card:hover { background: var(--ink); color: var(--white); }
.social-card > span { color: var(--orange); font-family: var(--mono); font-size: 0.65rem; }
.social-card strong { margin: auto 0; font-size: 1rem; overflow-wrap: anywhere; }
.social-card small { color: var(--muted); font-size: 0.7rem; }
.social-card:hover small { color: rgba(255,255,255,0.6); }

/* ---------- Form ---------- */
.form-section { display: grid; grid-template-columns: minmax(0, 0.78fr) minmax(360px, 1.22fr); gap: clamp(2rem, 6vw, 6rem); align-items: start; }
.form-copy h2 { font-family: var(--display); }
.form-copy small { display: block; max-width: 620px; margin-top: 1.5rem; padding-left: 1rem; border-left: 4px solid var(--orange); color: var(--muted); font-family: var(--mono); font-size: 0.74rem; line-height: 1.6; }
.form-card { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; padding: clamp(1.3rem, 3vw, 2rem); background: var(--white); border: 1px solid var(--line); box-shadow: 14px 14px 0 var(--cyan); }
.form-card label { display: grid; gap: 0.4rem; font-family: var(--mono); font-size: 0.7rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.04em; }
.form-card label:has(textarea), .form-card .button, .form-feedback { grid-column: 1 / -1; }
.form-card input, .form-card select, .form-card textarea { width: 100%; padding: 0.9rem; border: 1px solid var(--line); border-radius: 0; background: var(--paper); color: var(--ink); font-family: var(--body); transition: border-color 200ms, box-shadow 200ms; }
.form-card input:focus, .form-card select:focus, .form-card textarea:focus { outline: none; border-color: var(--ink); box-shadow: inset 0 -2px 0 var(--orange); }
.form-card textarea { min-height: 125px; resize: vertical; }
.form-feedback { margin: 0; padding: 0.85rem; background: rgba(106, 203, 122, 0.22); font-size: 0.78rem; font-weight: 700; }


/* ---------- Enlaces a páginas internas en desarrollo (REVERSIBLE) ---------- */
a.is-soon { cursor: default; opacity: 0.62; }
a.is-soon:hover { transform: none !important; box-shadow: none !important; }
.soon-badge { display: inline-flex; align-items: center; margin-left: 0.5rem; padding: 0.12rem 0.5rem; border: 1px solid currentColor; border-radius: 999px; font-family: var(--mono); font-size: 0.52rem; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; opacity: 0.85; vertical-align: middle; white-space: nowrap; }
.main-nav a.is-soon { opacity: 0.5; }
.main-nav a.is-soon .soon-badge { font-size: 0.46rem; padding: 0.08rem 0.36rem; }
/* en tarjetas grandes (gateway/audiencias) el badge va arriba a la derecha */
.gateway-card.is-soon, .audience-card.is-soon { position: relative; }
.gateway-card.is-soon .soon-badge, .audience-card.is-soon .soon-badge { position: absolute; top: 1rem; right: 1rem; margin-left: 0; }

/* ---------- Audiencias: tarjeta amarilla (ritmo) ---------- */
.audience-yellow { background: var(--yellow); }

/* ---------- Footer: columnas de contacto institucional ---------- */
.footer-org { margin-top: 1.1rem !important; font-size: 0.82rem; }
.footer-org a { display: inline !important; color: var(--cyan) !important; font-weight: 700; text-decoration: underline; }
.footer-org-email { display: inline-block !important; margin-top: 0.4rem; color: rgba(255,255,255,0.74) !important; font-size: 0.8rem; font-weight: 500; }
.footer-contact { gap: 1.8rem; }
.footer-block h4 { margin: 0 0 0.55rem; font-family: var(--mono); font-size: 0.6rem; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--cyan); }
.footer-block + .footer-block { margin-top: 1.4rem; }
.footer-team { margin: 0; padding: 0; list-style: none; display: grid; gap: 0.55rem; }
.footer-team li { display: flex; flex-direction: column; }
.footer-team strong { color: var(--white); font-size: 0.86rem; }
.footer-team span { color: rgba(255,255,255,0.6); font-family: var(--mono); font-size: 0.6rem; letter-spacing: 0.06em; text-transform: uppercase; }
.footer-block > a { display: block; margin-bottom: 0.4rem; }

/* ---------- Footer ---------- */
.site-footer {
  position: relative;
  display: grid;
  grid-template-columns: 1.25fr 1fr 1fr;
  gap: clamp(2rem, 6vw, 6rem);
  padding: clamp(3.5rem, 7vw, 6rem) clamp(1.4rem, 5vw, 4rem);
  background: var(--ink);
  color: var(--white);
}
.footer-brand img { width: 76px; height: 96px; margin-bottom: 1.3rem; object-fit: contain; object-position: center; filter: invert(1); }
.site-footer p { max-width: 440px; color: rgba(255, 255, 255, 0.74); font-size: 0.86rem; }
.site-footer small { display: block; max-width: 440px; color: var(--cyan); font-family: var(--mono); font-size: 0.64rem; line-height: 1.5; }
.site-footer nav, .footer-contact { display: grid; align-content: start; gap: 0.55rem; }
.site-footer a { width: fit-content; color: rgba(255, 255, 255, 0.74); font-size: 0.78rem; font-weight: 700; text-decoration: none; transition: color 180ms, transform 180ms; }
.site-footer a:hover { color: var(--yellow); transform: translateX(3px); }
.footer-contact > div { display: flex; flex-wrap: wrap; gap: 0.7rem; margin-top: 1rem; }
.back-top { position: absolute; right: 2rem; bottom: 2rem; display: grid; width: 48px !important; height: 48px; place-items: center; border: 1px solid var(--line-light); border-radius: 50%; transition: background 200ms, color 200ms, transform 200ms; }
.back-top:hover { background: var(--orange); color: var(--ink); transform: translateY(-3px); }

/* ============================================================
   MOTION
   ============================================================ */
.reveal { opacity: 1; transform: none; }
.reveal-on .reveal { opacity: 0; transform: translateY(28px); transition: opacity 700ms var(--ease), transform 700ms var(--ease); }
.reveal-on .reveal.is-visible { opacity: 1; transform: none; }

/* hero entrance — visible por defecto; anima solo cuando JS marca is-ready */
@keyframes heroLine { from { transform: translateY(110%); } to { transform: none; } }
@keyframes heroFade { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes heroVisual { from { opacity: 0; transform: translateY(24px) scale(0.985); } to { opacity: 1; transform: none; } }

.hero.is-ready h1 span > i { animation: heroLine 900ms var(--ease) both; }
.hero.is-ready h1 span:nth-child(1) > i { animation-delay: 220ms; }
.hero.is-ready h1 span:nth-child(2) > i { animation-delay: 340ms; }
.hero.is-ready .eyebrow { animation: heroFade 700ms var(--ease) 120ms both; }
.hero.is-ready .hero-lead { animation: heroFade 700ms var(--ease) 520ms both; }
.hero.is-ready .hero-actions { animation: heroFade 700ms var(--ease) 620ms both; }
.hero.is-ready .hero-visual { animation: heroVisual 900ms var(--ease) 360ms both; }
.hero.is-ready .hero-facts > div { animation: heroFade 600ms var(--ease) both; }
.hero.is-ready .hero-facts > div:nth-child(1) { animation-delay: 720ms; }
.hero.is-ready .hero-facts > div:nth-child(2) { animation-delay: 800ms; }
.hero.is-ready .hero-facts > div:nth-child(3) { animation-delay: 880ms; }
.hero.is-ready .hero-facts > div:nth-child(4) { animation-delay: 960ms; }

/* staggered children inside revealed grids */
.reveal-on .reveal.is-visible [data-stagger] { animation: rise 620ms var(--ease) both; }

@keyframes rise {
  from { opacity: 0; transform: translateY(22px); }
  to { opacity: 1; transform: none; }
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1180px) {
  .site-header { grid-template-columns: auto auto 1fr; }
  .menu-toggle { display: block; }
  .main-nav {
    position: fixed;
    inset: 76px 0 auto 0;
    display: none;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.5rem;
    padding: 1rem 4vw 1.3rem;
    background: rgba(243, 238, 226, 0.99);
    border-bottom: 1px solid var(--line);
    max-height: calc(100svh - 76px);
    overflow: auto;
  }
  .menu-open .main-nav { display: grid; }
  .main-nav > a, .more-nav summary, .more-nav div a { padding: 0.8rem; border: 1px solid var(--line); background: var(--paper-strong); }
  .main-nav > a::after { display: none; }
  .more-nav { grid-column: 1 / -1; }
  .more-nav div { position: static; grid-template-columns: repeat(3, 1fr); width: auto; margin-top: 0.5rem; box-shadow: none; animation: none; }
  .header-actions { justify-self: end; }
  .hero { grid-template-columns: 1fr 0.82fr; }
  .hero-visual { min-height: 500px; }
  .hero-video { min-height: 470px; padding-left: 0; }
  .gateway-grid, .production-grid { grid-template-columns: repeat(2, 1fr); }
  .gateway-card:nth-child(2) { border-right: 0; }
  .gateway-card:nth-child(-n+2) { border-bottom: 1px solid rgba(255,255,255,0.16); }
  .production-2, .production-4 { margin-top: 0; }
  .partner-strip { grid-template-columns: repeat(3, 1fr); }
  .ecosystem-strategic-grid { grid-template-columns: repeat(3, 1fr); }
  .ecosystem-two-column { grid-template-columns: 1fr; }
  .ecosystem-sponsor-grid { grid-template-columns: repeat(4, 1fr); }
  .ecosystem-sponsor { display: flex; min-height: 190px; }
  .card-grid, .audience-grid { grid-template-columns: repeat(2, 1fr); }
  .social-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 900px) {
  .hero { grid-template-columns: 1fr; min-height: auto; padding-bottom: 7rem; }
  .hero::before { opacity: 0.7; }
  .hero-copy { padding-top: 1rem; }
  .hero-visual { min-height: 560px; margin-top: 2rem; }
  .hero-video { min-height: 430px; margin-top: 1rem; }
  .hero-facts { position: relative; right: auto; bottom: auto; left: auto; grid-template-columns: repeat(2, 1fr); grid-column: 1; margin-top: 2rem; }
  .hero-subpage { grid-template-columns: 1fr 0.6fr; min-height: 560px; }
  .hero-subpage .hero-copy { grid-column: 1 / -1; padding-right: 34%; }
  .subhero-visual { position: absolute; right: -6vw; bottom: -2rem; width: 36vw; min-height: 340px; opacity: 0.7; }
  .story-section, .video-section, .network-section, .publication-section, .feature-band, .form-section { grid-template-columns: 1fr; }
  .international-proof, .ecosystem-intro { grid-template-columns: 1fr; }
  .impact-atlas-main { grid-template-columns: 1fr; min-height: 0; }
  .impact-map-panel { border-right: 0; border-bottom: 1px solid rgba(255,255,255,0.18); padding: 1.4rem; }
  .impact-map { min-height: 380px; }
  .impact-metrics { grid-template-columns: repeat(2, 1fr); }
  .impact-metric:nth-child(2) { border-right: 0; }
  .impact-format-rail { grid-template-columns: 1fr; }
  .impact-format-rail > div { border-right: 0; border-bottom: 1px solid rgba(255,255,255,0.18); }
  .impact-forecast { grid-template-columns: 1fr; }
  .proof-lead, .ecosystem-total { min-height: 280px; }
  .guest-grid { grid-template-columns: repeat(2, 1fr); }
  .guest-country:nth-child(2) { border-right: 0; }
  .guest-country:nth-child(-n+2) { border-bottom: 1px solid var(--ink); }
  .story-visual { min-height: 620px; }
  .story-content .section-number { position: static; display: flex; margin-bottom: 1rem; }
  .story-content .section-heading { margin-left: 0; }
  .network-visual { width: min(100%, 620px); min-height: 520px; margin: auto; }
  .publication-cover { min-height: 640px; }
  .edition-grid { grid-template-columns: 1fr; }
  .edition-card { min-height: 350px; border-right: 0; border-bottom: 1px solid var(--line); }
  .edition-gallery-heading { grid-template-columns: 1fr; }
  .partner-grid, .news-grid { grid-template-columns: repeat(2, 1fr); }
  .ecosystem-strategic-grid { grid-template-columns: repeat(2, 1fr); }
  .ecosystem-strategic-grid > :last-child:nth-child(odd) { grid-column: 1 / -1; }
  .ecosystem-featured-grid, .ecosystem-festivals-grid { grid-template-columns: 1fr; }
  .audience-grid { grid-template-columns: 1fr; }
  .ecosystem-sponsor-grid { grid-template-columns: repeat(2, 1fr); }
  .ecosystem-featured { min-height: 240px; }
  .site-footer { grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }
}

@media (max-width: 680px) {
  .site-header { min-height: 68px; gap: 0.55rem; padding-inline: 5vw; }
  .brand span, .header-actions .button { display: none; }
  .main-nav { inset-block-start: 68px; grid-template-columns: 1fr; max-height: calc(100svh - 68px); }
  .more-nav { grid-column: auto; }
  .more-nav div { grid-template-columns: 1fr; }
  .hero { padding: 3.5rem 5vw 6rem; }
  .hero h1 { font-size: clamp(3.2rem, 17vw, 5rem); }
  .hero-lead { font-size: 0.98rem; }
  .hero-visual { min-height: 470px; }
  .hero-video { min-height: 350px; padding: 1.2rem 0 0; }
  .hero-video-frame { border-width: 6px; box-shadow: 11px 11px 0 var(--orange); }
  .hero-video-index { top: 0; left: -0.4rem; }
  .hero-video-caption { grid-template-columns: 1fr; margin-left: 0; }
  .hero-video-caption strong { max-width: none; text-align: left; }
  .hero-facts { grid-template-columns: 1fr 1fr; gap: 0.8rem; }
  .hero-facts div { display: block; }
  .hero-facts strong, .hero-facts span { display: block; }
  .hero-subpage .hero-copy { padding-right: 0; }
  .subhero-visual { display: none; }
  .section { padding: 4.5rem 5vw; }
  .edition-gallery { padding: 4.5rem 5vw; }
  .edition-gallery-heading h2 { font-size: clamp(2.8rem, 14vw, 4.4rem); }
  .edition-gallery-grid { grid-template-columns: 1fr; grid-auto-rows: auto; }
  .edition-gallery-card-1, .edition-gallery-card-2, .edition-gallery-card-3, .edition-gallery-card-4, .edition-gallery-card-5, .edition-gallery-card-6 { grid-column: 1; grid-row: auto; height: 260px; }
  .edition-gallery-card-1 { height: 350px; }
  .section-number { position: static; display: flex; margin-bottom: 1rem; }
  .section-heading { margin-left: 0; }
  .section-heading h2, .network-copy h2, .publication-copy h2, .video-copy h2, .form-copy h2 { font-size: clamp(2.3rem, 11vw, 3.6rem); }
  .gateway-grid, .production-grid, .partner-strip, .card-grid, .partner-grid, .news-grid, .social-grid, .site-footer { grid-template-columns: 1fr; }
  .proof-metrics { grid-template-columns: 1fr; }
  .proof-metrics div { min-height: 150px; border-top: 1px solid var(--line); border-left: 0; }
  .guest-heading { grid-template-columns: 1fr; gap: 0.8rem; }
  .guest-grid { grid-template-columns: 1fr; }
  .guest-country { min-height: 215px; border-right: 0; border-bottom: 1px solid var(--ink); }
  .guest-country:last-child { border-bottom: 0; }
  .ecosystem-label, .ecosystem-two-column .ecosystem-label { grid-template-columns: 42px 1fr; }
  .ecosystem-label p, .ecosystem-two-column .ecosystem-label p { grid-column: 2; }
  .ecosystem-strategic-grid, .ecosystem-compact-grid, .ecosystem-sponsor-grid { grid-template-columns: 1fr; }
  .ecosystem-strategic-grid > :last-child:nth-child(odd),
  .ecosystem-compact-grid > :last-child:nth-child(odd) { grid-column: auto; }
  .ecosystem-sponsor { display: grid; min-height: 145px; }
  .gateway-card { min-height: 310px; border-right: 0; border-bottom: 1px solid rgba(255,255,255,0.16); }
  .story-section { padding-inline: 5vw; }
  .story-visual { min-height: 520px; }
  .history-item { grid-template-columns: 82px 1fr; }
  .production-grid { gap: 3rem; }
  .production-card { max-width: 390px; }
  .network-section { padding: 4.5rem 5vw; }
  .impact-atlas-controls { grid-template-columns: 1fr; }
  .impact-atlas-controls button { border-right: 0; border-bottom: 1px solid rgba(255,255,255,0.18); min-height: 64px; }
  .impact-metrics { grid-template-columns: 1fr; }
  .impact-metric { min-height: 170px; border-right: 0; }
  .impact-readout-index { writing-mode: horizontal-tb; align-self: flex-start; }
  .network-number { position: static; grid-column: 1 / -1; margin-bottom: -1rem; }
  .network-visual { min-height: 0; padding: 0.7rem; border-radius: 20px; }
  .network-interface-head, .network-interface-foot { flex-direction: column; }
  .network-hub { width: min(100%, 360px); }
  .network-node-face strong { font-size: 0.58rem; }
  .publication-section { padding: 4.5rem 5vw; }
  .publication-number { margin-bottom: 1.8rem; }
  .publication-facts { grid-template-columns: repeat(3, 1fr); }
  .publication-topics { grid-template-columns: 1fr; }
  .publication-topics li:nth-child(odd), .publication-topics li:nth-child(even) { padding: 0.85rem 0; border-left: 0; }
  .publication-cover { min-height: 560px; }
  .publication-cover img { width: min(350px, 74%); box-shadow: 14px 18px 0 rgba(14,13,12,0.22), 0 24px 50px rgba(14,13,12,0.3); }
  .publication-cover-label { top: 0.5rem; }
  .publication-cover > div { right: 0; bottom: 1.5rem; min-width: 250px; }
  .partner-tile { min-height: 170px; }
  .video-section { padding-inline: 5vw; }
  .video-frame { box-shadow: 9px 9px 0 var(--orange); }
  .form-card { grid-template-columns: 1fr; box-shadow: 8px 8px 0 var(--cyan); }
  .form-card label { grid-column: 1 / -1; }
  .site-footer { padding-inline: 5vw; }
  .footer-brand { grid-column: auto; }
  .back-top { right: 1.2rem; bottom: 1.2rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation: none !important; transition: none !important; }
  body::after { display: none; }
  .reveal, .network-node { opacity: 1 !important; transform: none !important; }
  .hero h1 span > i { transform: none !important; }
}