@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@500;600;700;800&family=Montserrat:wght@300;400;500;600&family=Playfair+Display:ital,wght@1,400&display=swap");
/* Hallmark · pre-emit critique: P4 H5 E4 S4 R4 V5 */
/* Hallmark · V2 · macrostructure: Marquee-editorial (studied-DNA: dark gallery editorial) · theme: custom brand-dark
 * void #0a0916 (navy de marca llevado a negro) · acento único naranja #e46a25 (puntuación, no pintura)
 * Poppins caps display + Playfair italic conectivas + Montserrat body · nav: N9 edge-aligned · footer: charcoal columns
 * copy: cifras reales docs internos · señales del ticker y mockups: contenido ilustrativo */

@import url("tokens.css");

/* ── Base ─────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; }
html, body { overflow-x: clip; }
html { scroll-behavior: smooth; }
body {
  background: var(--color-void);
  color: var(--color-ash);
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--text-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3 { font-style: normal; min-width: 0; overflow-wrap: anywhere; }
img, svg, video { max-width: 100%; height: auto; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 3px; border-radius: 3px; }
::selection { background: var(--color-accent); color: var(--color-void); }

.container { max-width: 82rem; margin-inline: auto; padding-inline: clamp(1.25rem, 4vw, 3rem); }

/* Display voice — caps arquitectónicas + conectiva serif */
.display {
  font-family: var(--font-display);
  font-weight: 800;
  text-transform: uppercase;
  color: var(--color-bone);
  line-height: 0.95;
  letter-spacing: var(--tracking-display);
}
.display .serif {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  text-transform: none;
  letter-spacing: -0.02em;
  font-size: 0.82em;
  color: var(--color-bone);
}
.display .accent-word { color: var(--color-accent); }

/* Labels — caps tracked out */
.label {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--text-label);
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps-out);
  color: var(--color-pebble);
}

/* Ghost CTA — la acción como cita editorial */
.ghost-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--text-label);
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps-out);
  color: var(--color-bone);
  text-decoration: none;
  padding-block: var(--sp-2);
  white-space: nowrap;
  transition: transform var(--dur-short) var(--ease-out);
}
.ghost-cta .arrow { transition: transform var(--dur-short) var(--ease-out); }
.ghost-cta:hover .arrow { transform: translate(3px, -3px); }

/* Botón outlined — el único que parece botón */
.btn-outline {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  min-height: 44px;
  padding: 0.7rem 1.5rem;
  border: 1px solid var(--color-iron);
  border-radius: var(--radius-card);
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--text-label);
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps-out);
  color: var(--color-bone);
  text-decoration: none;
  white-space: nowrap;
  transition: border-color var(--dur-short) var(--ease-out);
}
.btn-outline:hover { border-color: var(--color-ash); }

/* Botón lleno — uno por página */
.btn-fill {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  min-height: 48px;
  padding: 0.8rem 1.8rem;
  background: var(--color-accent);
  border: 1px solid var(--color-accent);
  border-radius: var(--radius-card);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-label);
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps-out);
  color: var(--color-void);
  text-decoration: none;
  white-space: nowrap;
  transition: background-color var(--dur-short) var(--ease-out);
}
.btn-fill:hover { background: var(--color-accent-deep); border-color: var(--color-accent-deep); }

.dot { display: inline-block; width: 14px; height: 14px; border-radius: 50%; background: var(--color-accent); }

/* ── Nav — transparente sobre el void ─────────────── */
.nav {
  position: relative;
  z-index: var(--z-nav);
}
.nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  padding-block: var(--sp-3);
}
.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.35rem;
  color: var(--color-bone);
  text-decoration: none;
  letter-spacing: -0.01em;
}
.wordmark svg { width: 1.4em; height: auto; flex-shrink: 0; }
.wordmark .um { color: var(--color-accent); }
.nav__links { display: flex; gap: var(--sp-4); list-style: none; padding: 0; }
.nav__links a {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--text-label);
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps-out);
  color: var(--color-ash);
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--dur-short) var(--ease-out);
}
.nav__links a:hover { color: var(--color-bone); }

/* ── Hero ─────────────────────────────────────────── */
.hero { position: relative; padding-block: var(--sp-16) var(--sp-10); overflow: clip; }
.hero__shape {
  position: absolute;
  right: -12%;
  top: -18%;
  width: 58%;
  min-width: 520px;
  color: var(--color-smoke);
  pointer-events: none;
}
.hero__inner { position: relative; }
.hero h2 { font-size: var(--text-display-xl); letter-spacing: var(--tracking-display-xl); max-width: 15ch; overflow-wrap: normal; hyphens: none; }
.hero__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2) var(--sp-3);
  margin-top: var(--sp-4);
}
.hero__meta .label { color: var(--color-ash); }
.hero__meta .dot { width: 8px; height: 8px; }
.hero__sub { margin-top: var(--sp-3); max-width: 52ch; font-size: var(--text-body-lg); font-weight: 300; color: var(--color-ash); }
.hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-4); margin-top: var(--sp-4); }

/* ── Panel mockup (producto) ──────────────────────── */
.panel-wrap { position: relative; margin-top: var(--sp-7); }
.panel {
  background: var(--color-charcoal);
  border: 1px solid var(--color-iron);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-inset);
  overflow: clip;
  font-family: var(--font-body);
}
.panel__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
  padding: 0.8rem 1.25rem;
  border-bottom: 1px solid var(--color-smoke);
}
.panel__title { font-family: var(--font-display); font-weight: 600; font-size: 0.8rem; color: var(--color-bone); }
.panel__tag {
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-pebble);
  border: 1px solid var(--color-smoke);
  border-radius: 999px;
  padding: 0.2rem 0.6rem;
  white-space: nowrap;
}
.panel__grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
.panel__list { border-right: 1px solid var(--color-smoke); }
.lead-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--sp-2);
  padding: 0.75rem 1.25rem;
  border-bottom: 1px solid var(--color-smoke);
  font-size: 0.78rem;
}
.lead-row:last-child { border-bottom: none; }
.lead-row__who strong { display: block; color: var(--color-bone); font-weight: 600; }
.lead-row__who span { color: var(--color-pebble); font-size: 0.7rem; }
.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.68rem;
  color: var(--color-ash);
  background: var(--color-smoke);
  border-radius: 999px;
  padding: 0.28rem 0.7rem;
  white-space: nowrap;
}
.chip i { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.i-cyan { background: var(--color-dot-cyan); }
.i-amber { background: var(--color-dot-amber); }
.i-green { background: var(--color-dot-green); }
.i-pink { background: var(--color-dot-pink); }
.i-violet { background: var(--color-dot-violet); }
.i-accent { background: var(--color-accent); }
.panel__detail { padding: 1.1rem 1.25rem; font-size: 0.78rem; }
.panel__detail h4 { font-family: var(--font-display); font-weight: 600; font-size: 0.85rem; color: var(--color-bone); }
.panel__detail .role { color: var(--color-pebble); font-size: 0.7rem; }
.panel__detail .sig { margin-top: 0.8rem; }
.panel__seq { margin-top: 0.9rem; border-top: 1px solid var(--color-smoke); padding-top: 0.9rem; }
.seq-step {
  display: flex;
  gap: 0.6rem;
  align-items: baseline;
  padding-block: 0.35rem;
  color: var(--color-ash);
}
.seq-step b { color: var(--color-pebble); font-weight: 500; font-variant-numeric: tabular-nums; }
.panel__send {
  margin-top: 0.9rem;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--color-accent);
  color: var(--color-void);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  border-radius: 6px;
  padding: 0.55rem 1rem;
}
/* Tooltips flotantes */
.float-card {
  position: absolute;
  max-width: 15.5rem;
  background: var(--color-graphite);
  border: 1px solid var(--color-iron);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-inset);
  padding: 0.9rem 1rem;
  font-size: 0.72rem;
  color: var(--color-ash);
}
.float-card b { display: block; color: var(--color-bone); font-family: var(--font-display); font-weight: 600; font-size: 0.78rem; margin-top: 0.4rem; }
.float-card--tl { top: 14%; left: -1.5rem; }
.float-card--br { bottom: 10%; right: -1.5rem; }

/* ── Muro de clientes (linen strip) ───────────────── */
.logos { background: var(--color-linen); color: var(--color-ink-on-linen); }
.logos__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-3) var(--sp-6);
  padding-block: var(--sp-6);
}
.logos__claim { font-size: var(--text-body); color: var(--color-ink2-on-linen); max-width: 24ch; }
.logos__wall { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-6); flex: 1; justify-content: flex-end; }
.logos__wall span {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: 0.02em;
  color: var(--color-ink-on-linen);
  opacity: 0.85;
  white-space: nowrap;
}

/* ── Secciones ────────────────────────────────────── */
.section { padding-block: var(--sp-14); }
.section__head { text-align: center; max-width: 46rem; margin-inline: auto; margin-bottom: var(--sp-7); }
.section__head h2 { font-size: var(--text-heading-lg); }
.section__head p { margin-top: var(--sp-2); color: var(--color-pebble); font-weight: 300; max-width: 44ch; margin-inline: auto; }

/* ── Audiencias ───────────────────────────────────── */
.audience { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--sp-2); }
.aud-card {
  border: 1px solid var(--color-smoke);
  border-radius: var(--radius-card);
  background: var(--color-charcoal);
  padding: var(--sp-3) var(--sp-2);
  text-align: center;
  text-decoration: none;
  transition: border-color var(--dur-short) var(--ease-out);
}
.aud-card:hover { border-color: var(--color-iron); }
.aud-card--featured { border-color: var(--color-accent); }
.aud-card h3 { font-family: var(--font-display); font-weight: 600; font-size: 0.9rem; color: var(--color-bone); letter-spacing: 0.01em; }
.aud-card svg { display: block; margin: var(--sp-3) auto 0; width: 76%; color: var(--color-iron); }
.aud-card--featured svg { color: var(--color-pebble); }
.aud-card--featured svg .route { stroke: var(--color-accent); }

.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: var(--sp-7); margin-top: var(--sp-10); align-items: start; }
.split h2 { font-size: var(--text-heading); }
.split__cta { margin-top: var(--sp-3); }
.benefit { border-top: 1px solid var(--color-smoke); padding-block: var(--sp-3); }
.benefit h3 { font-family: var(--font-display); font-weight: 600; font-size: var(--text-body-lg); color: var(--color-bone); }
.benefit p { margin-top: 0.5rem; color: var(--color-pebble); font-weight: 300; max-width: 52ch; }

/* ── Plataforma: tabs apiladas ────────────────────── */
.stack { position: relative; }
.stack__back { list-style: none; padding: 0; }
.stack__back li {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 0.85rem;
  color: var(--color-pebble);
  background: var(--color-charcoal);
  border: 1px solid var(--color-smoke);
  border-bottom: none;
  padding: 0.8rem 1.4rem;
  border-radius: var(--radius-card) var(--radius-card) 0 0;
}
.stack__back li:nth-child(2) { margin-left: var(--sp-3); }
.stack__back li:nth-child(3) { margin-left: var(--sp-6); }
.stack__front {
  margin-left: var(--sp-10);
  background: var(--color-smoke);
  border: 1px solid var(--color-iron);
  border-radius: 0 var(--radius-lg) var(--radius-lg) var(--radius-lg);
  padding: var(--sp-4);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
  gap: var(--sp-4);
}
.stack__front .tab-label { display: flex; align-items: center; gap: 0.7rem; font-family: var(--font-display); font-weight: 600; font-size: 0.9rem; color: var(--color-bone); margin-bottom: var(--sp-2); }
.stack__front h3 { font-family: var(--font-display); font-weight: 700; font-size: var(--text-heading-sm); color: var(--color-bone); letter-spacing: -0.03em; line-height: 1.1; }
.stack__front > div > p { margin-top: var(--sp-2); color: var(--color-pebble); font-weight: 300; max-width: 40ch; }
.icp {
  background: var(--color-charcoal);
  border: 1px solid var(--color-iron);
  border-radius: var(--radius-card);
  padding: var(--sp-3);
}
.icp__q { font-family: var(--font-display); font-weight: 600; color: var(--color-bone); font-size: 0.95rem; }
.icp__search {
  margin-top: var(--sp-2);
  border: 1px solid var(--color-iron);
  border-radius: 6px;
  padding: 0.7rem 0.9rem;
  font-size: 0.78rem;
  color: var(--color-ash);
  background: var(--color-void);
}
.icp__hint { margin-top: var(--sp-2); font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--color-pebble); }
.icp__grid { margin-top: 0.8rem; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.6rem; }
.icp__card {
  background: var(--color-smoke);
  border: 1px solid var(--color-graphite);
  border-radius: 6px;
  padding: 0.7rem 0.8rem;
  font-size: 0.7rem;
  color: var(--color-pebble);
}
.icp__card b { display: block; color: var(--color-ash); font-weight: 600; margin-bottom: 0.2rem; }
.annot {
  position: absolute;
  top: -1.5rem;
  right: 2%;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.1rem;
  color: var(--color-ash);
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* ── Ticker de señales ────────────────────────────── */
.ticker-section { padding-block: var(--sp-10); border-block: 1px solid var(--color-charcoal); overflow: clip; }
.ticker-section h2 { text-align: center; font-size: var(--text-heading); margin-bottom: var(--sp-6); }
.ticker { display: flex; gap: var(--sp-2); width: max-content; }
.ticker + .ticker { margin-top: var(--sp-2); }
.ticker .chip { font-size: 0.78rem; padding: 0.5rem 1rem; background: var(--color-charcoal); border: 1px solid var(--color-smoke); }
@media (prefers-reduced-motion: no-preference) {
  .ticker--l { animation: slide-l 42s linear infinite; }
  .ticker--r { animation: slide-r 48s linear infinite; }
  @keyframes slide-l { to { transform: translateX(-50%); } }
  @keyframes slide-r { from { transform: translateX(-50%); } to { transform: translateX(0); } }
}

/* ── Copilot ──────────────────────────────────────── */
.copilot { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); gap: var(--sp-7); align-items: center; }
.copilot h2 { font-size: var(--text-heading); }
.copilot > div > p { margin-top: var(--sp-2); color: var(--color-pebble); font-weight: 300; max-width: 40ch; }
.copilot .ghost-cta { margin-top: var(--sp-2); }

/* ── Linen panel: casos ───────────────────────────── */
.linen { background: var(--color-linen); color: var(--color-ink-on-linen); }
.linen .section__head h2 { color: var(--color-ink-on-linen); }
.linen .section__head p { color: var(--color-ink2-on-linen); }
.cases { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-3); max-width: 60rem; margin-inline: auto; }
.case {
  border: 1px solid var(--color-rule-linen);
  border-radius: var(--radius-card);
  padding: var(--sp-4) var(--sp-3);
  background: #fbfaf8;
}
.case h3 { font-family: var(--font-display); font-weight: 700; font-size: var(--text-subheading); letter-spacing: -0.02em; color: var(--color-ink-on-linen); }
.case .who { font-size: 0.75rem; color: var(--color-ink2-on-linen); margin-top: 0.2rem; }
.case__figs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-2); margin-top: var(--sp-3); border-top: 1px solid var(--color-rule-linen); padding-top: var(--sp-3); }
.case__figs b { display: block; font-family: var(--font-display); font-weight: 800; font-size: var(--text-heading-sm); letter-spacing: -0.03em; color: var(--color-ink-on-linen); font-variant-numeric: tabular-nums; line-height: 1; }
.case__figs span { font-size: 0.72rem; color: var(--color-ink2-on-linen); }
.case .window { margin-top: var(--sp-2); font-size: 0.72rem; color: var(--color-ink2-on-linen); }
.linen__claim {
  text-align: center;
  margin-top: var(--sp-7);
  font-family: var(--font-display);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -0.03em;
  font-size: var(--text-heading-sm);
  color: var(--color-ink-on-linen);
}
.linen__claim .serif { font-family: var(--font-serif); font-style: italic; font-weight: 400; text-transform: none; letter-spacing: -0.02em; }

/* ── CTA final — momento de transición ────────────── */
.finale { position: relative; text-align: center; padding-block: var(--sp-16); overflow: clip; }
.finale__shape { position: absolute; left: -10%; bottom: -30%; width: 50%; min-width: 420px; color: var(--color-charcoal); pointer-events: none; }
.finale h2 { position: relative; font-size: var(--text-display); letter-spacing: var(--tracking-display); }
.finale p { position: relative; margin-top: var(--sp-3); color: var(--color-pebble); font-weight: 300; max-width: 46ch; margin-inline: auto; }
.finale__actions { position: relative; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: var(--sp-4); margin-top: var(--sp-6); }
.finale .note { margin-top: var(--sp-2); font-size: var(--text-label); color: var(--color-pebble); position: relative; }

/* ── FAQ compacto ─────────────────────────────────── */
.faq { max-width: 46rem; margin-inline: auto; border-top: 1px solid var(--color-charcoal); }
.faq details { border-bottom: 1px solid var(--color-charcoal); }
.faq summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--sp-2);
  padding-block: var(--sp-3);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-body-lg);
  color: var(--color-bone);
  cursor: pointer;
  list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--color-pebble); font-weight: 400; transition: transform var(--dur-med) var(--ease-out); }
.faq details[open] summary::after { transform: rotate(45deg); color: var(--color-accent); }
.faq details p { padding-bottom: var(--sp-3); color: var(--color-pebble); font-weight: 300; max-width: 60ch; }

/* ── Footer ───────────────────────────────────────── */
.footer { background: var(--color-charcoal); padding-block: var(--sp-10) var(--sp-6); }
.footer__mast { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--sp-4); align-items: flex-start; }
.footer__tagline { margin-top: var(--sp-2); color: var(--color-pebble); font-weight: 300; max-width: 30ch; }
.footer__links { display: flex; flex-wrap: wrap; gap: var(--sp-1) var(--sp-4); list-style: none; padding: 0; }
.footer__links a {
  font-family: var(--font-display);
  font-size: var(--text-label);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps-out);
  color: var(--color-ash);
  text-decoration: none;
  white-space: nowrap;
  border-bottom: 1px solid var(--color-iron);
  padding-bottom: 2px;
}
.footer__links a:hover { border-color: var(--color-accent); }
.footer__meta {
  margin-top: var(--sp-7);
  padding-top: var(--sp-3);
  border-top: 1px solid var(--color-smoke);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--sp-2);
  font-size: var(--text-label);
  color: var(--color-pebble);
}

/* ── Motion: reveal on scroll (IntersectionObserver) ── */
@media (prefers-reduced-motion: no-preference) {
  .reveal { opacity: 0; transform: translateY(14px); transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out); }
  .reveal.is-in { opacity: 1; transform: none; }
}

/* ── Responsive ───────────────────────────────────── */
@media (max-width: 64rem) {
  .nav__links { display: none; }
  .panel__grid { grid-template-columns: minmax(0, 1fr); }
  .panel__list { border-right: none; border-bottom: 1px solid var(--color-smoke); }
  .float-card--tl { position: static; margin-bottom: var(--sp-2); }
  .float-card--br { position: static; margin-top: var(--sp-2); }
  .float-card { max-width: none; }
  .audience { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .split { grid-template-columns: minmax(0, 1fr); }
  .stack__front { margin-left: 0; grid-template-columns: minmax(0, 1fr); border-radius: 0 0 var(--radius-lg) var(--radius-lg); }
  .stack__back li:nth-child(2), .stack__back li:nth-child(3) { margin-left: 0; }
  .annot { display: none; }
  .copilot { grid-template-columns: minmax(0, 1fr); }
  .cases { grid-template-columns: minmax(0, 1fr); }
  .logos__wall { justify-content: flex-start; }
}
@media (max-width: 40rem) {
  .section { padding-block: var(--sp-10); }
  .audience { grid-template-columns: minmax(0, 1fr); }
  .aud-card { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); text-align: left; }
  .aud-card svg { width: 5.5rem; margin: 0; flex-shrink: 0; }
  .case__figs { grid-template-columns: minmax(0, 1fr); }
  .icp__grid { grid-template-columns: minmax(0, 1fr); }
  .hero { padding-block: var(--sp-6); }
}

/* ══ V3 ═══════════════════════════════════════════════ */

/* ── Portada — vídeo industrial ───────────────────── */
.nav--over { position: absolute; inset-inline: 0; top: 0; }
.cover { position: relative; min-height: 100svh; display: grid; align-items: end; overflow: clip; }
.cover__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.cover__veil {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to bottom, rgba(10, 9, 22, 0.72) 0%, rgba(10, 9, 22, 0.45) 45%, var(--color-void) 98%),
    rgba(10, 9, 22, 0.35);
}
.cover__inner { position: relative; padding-bottom: var(--sp-10); }
.cover__kicker { color: var(--color-ash); margin-bottom: var(--sp-2); }
.cover__title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(4.5rem, 17vw, 16.5rem);
  line-height: 0.95;
  letter-spacing: -0.06em;
  color: var(--color-bone);
  display: flex;
  align-items: baseline;
}
.cover__title .um { color: var(--color-accent); }
.cover__dot { width: 0.09em; height: 0.09em; border-radius: 50%; background: var(--color-accent); margin-left: 0.06em; }
.cover__cue {
  position: absolute;
  right: clamp(1.25rem, 4vw, 3rem);
  bottom: var(--sp-10);
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 0.7rem;
  color: var(--color-ash);
  text-decoration: none;
  min-height: 44px;
}
@media (prefers-reduced-motion: no-preference) {
  .cover__cue svg { animation: cue 2.2s var(--ease-out) infinite; }
  @keyframes cue { 0%, 100% { transform: translateY(0); opacity: 1; } 50% { transform: translateY(5px); opacity: 0.55; } }
}

/* ── Panel XL — gran presencia ────────────────────── */
.panel-wrap--xl { margin-top: var(--sp-4); }
.panel--xl { font-size: 1rem; }
.panel--xl .panel__bar { padding: 1.1rem 1.75rem; }
.panel--xl .panel__title { font-size: 0.95rem; }
.panel--xl .panel__tag { font-size: 0.72rem; }
.panel--xl .lead-row { padding: 1rem 1.75rem; font-size: 0.88rem; }
.panel--xl .lead-row__who span { font-size: 0.78rem; }
.panel--xl .chip { font-size: 0.75rem; padding: 0.35rem 0.85rem; }
.panel--xl .panel__detail { padding: 1.5rem 1.75rem; font-size: 0.88rem; }
.panel--xl .panel__detail h4 { font-size: 1.05rem; }
.panel--xl .panel__detail .role { font-size: 0.78rem; }
.panel--xl .seq-step { padding-block: 0.45rem; }
.panel--xl .panel__send { font-size: 0.78rem; padding: 0.7rem 1.25rem; }
.panel-wrap--xl .float-card { max-width: 17.5rem; font-size: 0.78rem; }
.panel-wrap--xl .float-card--tl { top: 8%; left: -2rem; }
.panel-wrap--xl .float-card--br { bottom: 6%; right: -2rem; }

/* ── Clientes — marquee editorial ─────────────────── */
.clients { padding-block: var(--sp-14); border-block: 1px solid var(--color-charcoal); overflow: clip; }
.clients__label { text-align: center; margin-bottom: var(--sp-6); }
.clients__track {
  display: flex;
  align-items: center;
  gap: var(--sp-6);
  width: max-content;
  padding-inline: var(--sp-3);
}
.clients__track span {
  font-family: var(--font-display);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -0.03em;
  font-size: clamp(2.5rem, 5.5vw, 4.5rem);
  line-height: 1;
  color: var(--color-iron);
  white-space: nowrap;
  transition: color var(--dur-med) var(--ease-out);
}
.clients__track span:hover { color: var(--color-bone); }
.clients__track i { width: 12px; height: 12px; border-radius: 50%; background: var(--color-accent); flex-shrink: 0; }
@media (prefers-reduced-motion: no-preference) {
  .clients__track { animation: slide-l 38s linear infinite; }
}
@media (prefers-reduced-motion: reduce) {
  .clients__marquee { overflow-x: auto; }
}

/* ── Soluciones — lista editorial ─────────────────── */
.sol-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-top: 1px solid var(--color-charcoal);
  border-left: 1px solid var(--color-charcoal);
}
.sol {
  display: flex;
  gap: var(--sp-3);
  align-items: flex-start;
  padding: var(--sp-4) var(--sp-3);
  border-right: 1px solid var(--color-charcoal);
  border-bottom: 1px solid var(--color-charcoal);
  text-decoration: none;
  transition: background-color var(--dur-med) var(--ease-out);
}
.sol:hover { background: var(--color-charcoal); }
.sol__num {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--text-label);
  letter-spacing: 0.06em;
  color: var(--color-accent);
  padding-top: 0.3rem;
  flex-shrink: 0;
}
.sol h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.1rem;
  color: var(--color-bone);
  letter-spacing: -0.01em;
}
.sol p { margin-top: 0.4rem; color: var(--color-pebble); font-weight: 300; font-size: 0.85rem; max-width: 44ch; }
.sol__arrow { margin-left: auto; color: var(--color-iron); flex-shrink: 0; transition: color var(--dur-short) var(--ease-out), transform var(--dur-short) var(--ease-out); }
.sol:hover .sol__arrow { color: var(--color-bone); transform: translate(2px, -2px); }
.sol--featured { border-top: 1px solid var(--color-accent); margin-top: -1px; }

/* ── Equipo — carrusel horizontal ─────────────────── */
.team {
  display: flex;
  gap: var(--sp-4);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-inline: clamp(1.25rem, 4vw, 3rem);
  padding-bottom: var(--sp-3);
  scrollbar-width: thin;
  scrollbar-color: var(--color-iron) transparent;
}
.guide { scroll-snap-align: start; flex-shrink: 0; text-align: center; }
.guide img {
  width: clamp(11rem, 16vw, 14.5rem);
  height: clamp(11rem, 16vw, 14.5rem);
  object-fit: cover;
  border-radius: 50%;
  border: 1px solid var(--color-smoke);
  display: block;
}
.guide figcaption { margin-top: var(--sp-2); }
.guide b {
  display: block;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1rem;
  color: var(--color-bone);
}
.guide span {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--text-caption);
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps-out);
  color: var(--color-pebble);
}

/* ── V3 responsive ────────────────────────────────── */
@media (max-width: 64rem) {
  .sol-grid { grid-template-columns: minmax(0, 1fr); }
  .panel-wrap--xl .float-card--tl { position: static; margin-bottom: var(--sp-2); }
  .panel-wrap--xl .float-card--br { position: static; margin-top: var(--sp-2); }
}
@media (max-width: 40rem) {
  .cover__title { font-size: clamp(4rem, 21vw, 7rem); }
  .cover__cue { display: none; }
  .panel--xl .lead-row { flex-direction: column; align-items: flex-start; gap: 0.4rem; }
}

/* ══ V4 ═══════════════════════════════════════════════ */

/* ── Nav retráctil ────────────────────────────────── */
.nav--retract {
  position: fixed;
  inset-inline: 0;
  top: 0;
  transition: transform var(--dur-med) var(--ease-out), background-color var(--dur-med) var(--ease-out);
}
.nav--solid { background: rgba(10, 9, 22, 0.86); backdrop-filter: blur(10px); border-bottom: 1px solid var(--color-charcoal); }
.nav--hidden { transform: translateY(-100%); }
.nav__right { display: flex; align-items: center; gap: var(--sp-2); }

/* ── Burger + menú móvil ──────────────────────────── */
.burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 7px;
  width: 48px;
  height: 48px;
  padding: 12px;
  background: transparent;
  border: 1px solid var(--color-iron);
  border-radius: var(--radius-card);
  cursor: pointer;
}
.burger span { display: block; height: 2px; background: var(--color-bone); transition: transform var(--dur-med) var(--ease-out); }
.burger--x span:first-child { transform: translateY(4.5px) rotate(45deg); }
.burger--x span:last-child { transform: translateY(-4.5px) rotate(-45deg); }
.menu {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: var(--color-void);
  overflow-y: auto;
}
.menu__inner { padding-block: calc(var(--sp-10) + 3rem) var(--sp-6); display: flex; flex-direction: column; gap: var(--sp-6); min-height: 100%; }
.menu__link {
  display: flex;
  align-items: baseline;
  gap: var(--sp-2);
  font-family: var(--font-display);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -0.03em;
  font-size: clamp(2rem, 9vw, 3.5rem);
  line-height: 1.15;
  color: var(--color-bone);
  text-decoration: none;
  padding-block: 0.35rem;
  border-bottom: 1px solid var(--color-charcoal);
}
.menu__num { font-family: var(--font-display); font-weight: 500; font-size: var(--text-label); letter-spacing: 0.08em; color: var(--color-accent); }
.menu__cta { align-self: flex-start; }
.menu__social { display: flex; gap: var(--sp-4); }
.menu__social a {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--text-label);
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps-out);
  color: var(--color-ash);
  text-decoration: none;
  border-bottom: 1px solid var(--color-iron);
  padding-bottom: 2px;
}
@media (max-width: 64rem) {
  .burger { display: flex; }
  .nav__cta { display: none; }
}

/* ── Manifiesto — No somos una agencia → SOMOS KHUMBU ── */
.manifesto { height: 560vh; position: relative; }
.manifesto__sticky { position: sticky; top: 0; height: 100vh; overflow: clip; display: grid; }
.manifesto__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.22;
}
.manifesto__phase, .manifesto__knock {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  text-align: center;
  padding-inline: clamp(1.25rem, 4vw, 3rem);
}
.manifesto__phase--a h2 { font-size: var(--text-display); max-width: 14ch; }
.manifesto__knock { background: var(--color-void); mix-blend-mode: darken; opacity: 0; }
.manifesto__word {
  font-family: var(--font-display);
  font-weight: 800;
  text-transform: uppercase;
  line-height: 0.9;
  letter-spacing: -0.06em;
  font-size: clamp(4.5rem, 18.5vw, 17rem);
  color: #fff;
}
.manifesto__phase--c { opacity: 0; transform-origin: 58% 72%; will-change: transform, opacity; }
.manifesto__word--accent { color: var(--color-accent); }
.manifesto--static { height: auto; }
.manifesto--static .manifesto__sticky { position: relative; }

/* ── Acordeón audiencias ──────────────────────────── */
.acc { border-top: 1px solid var(--color-charcoal); }
.acc__item { border-bottom: 1px solid var(--color-charcoal); }
.acc__head {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  width: 100%;
  padding-block: var(--sp-3);
  background: transparent;
  border: none;
  cursor: pointer;
  text-align: left;
}
.acc__title {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: -0.02em;
  font-size: clamp(1.4rem, 3vw, 2.4rem);
  color: var(--color-bone);
  transition: color var(--dur-short) var(--ease-out);
}
.acc__head:hover .acc__title { color: var(--color-ash); }
.acc__peak { width: 110px; color: var(--color-iron); margin-left: auto; flex-shrink: 0; }
.acc__item.is-open .acc__peak { color: var(--color-pebble); }
.acc__plus {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.6rem;
  color: var(--color-pebble);
  flex-shrink: 0;
  transition: transform var(--dur-med) var(--ease-out);
}
.acc__item.is-open .acc__plus { transform: rotate(45deg); color: var(--color-accent); }
.acc__body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.45s var(--ease-out); }
.acc__item.is-open .acc__body { grid-template-rows: 1fr; }
.acc__content { overflow: hidden; }
.acc__content p { max-width: 62ch; color: var(--color-pebble); font-weight: 300; padding-bottom: var(--sp-2); }
.acc__content .ghost-cta { padding-block: var(--sp-1) var(--sp-3); }

/* ── Testimonios — filas ──────────────────────────── */
.voices { border-top: 1px solid var(--color-charcoal); }
.voice {
  display: flex;
  align-items: baseline;
  gap: var(--sp-3);
  width: 100%;
  padding-block: var(--sp-3);
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--color-charcoal);
  cursor: pointer;
  text-align: left;
  transition: background-color var(--dur-med) var(--ease-out);
}
.voice:hover { background: var(--color-charcoal); }
.voice__co {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: -0.02em;
  font-size: clamp(1.3rem, 2.6vw, 2.1rem);
  color: var(--color-bone);
}
.voice__who { font-family: var(--font-body); font-weight: 300; font-size: var(--text-body); color: var(--color-pebble); }
.voice__play {
  margin-left: auto;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--text-label);
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps-out);
  color: var(--color-ash);
  white-space: nowrap;
  flex-shrink: 0;
  transition: color var(--dur-short) var(--ease-out);
}
.voice:hover .voice__play { color: var(--color-accent); }

/* ── Modal vídeo ──────────────────────────────────── */
.video-modal {
  border: 1px solid var(--color-iron);
  border-radius: var(--radius-lg);
  background: var(--color-absolute);
  padding: 0;
  width: min(64rem, calc(100vw - 2rem));
}
.video-modal::backdrop { background: rgba(5, 4, 9, 0.82); backdrop-filter: blur(4px); }
.video-modal__frame { aspect-ratio: 16 / 9; }
.video-modal__frame iframe { width: 100%; height: 100%; border: 0; display: block; }
.video-modal__close {
  position: absolute;
  top: 0.5rem;
  right: 0.75rem;
  z-index: 2;
  width: 44px;
  height: 44px;
  background: rgba(5, 4, 9, 0.6);
  border: 1px solid var(--color-iron);
  border-radius: 50%;
  color: var(--color-bone);
  font-size: 1.3rem;
  cursor: pointer;
}

/* ── Blog ─────────────────────────────────────────── */
.posts { border-top: 1px solid var(--color-charcoal); }
.post {
  display: flex;
  align-items: baseline;
  gap: var(--sp-3);
  padding-block: var(--sp-4);
  border-bottom: 1px solid var(--color-charcoal);
  text-decoration: none;
  transition: background-color var(--dur-med) var(--ease-out);
}
.post:hover { background: var(--color-charcoal); }
.post__num { font-family: var(--font-display); font-weight: 500; font-size: var(--text-label); letter-spacing: 0.06em; color: var(--color-accent); flex-shrink: 0; }
.post h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.2rem, 2.4vw, 1.9rem);
  letter-spacing: -0.02em;
  color: var(--color-bone);
  transition: transform var(--dur-med) var(--ease-out);
}
.post:hover h3 { transform: translateX(6px); }
.post__go {
  margin-left: auto;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--text-label);
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps-out);
  color: var(--color-ash);
  white-space: nowrap;
  flex-shrink: 0;
}
.post__go i { font-style: normal; }
.posts__more { margin-top: var(--sp-3); }

/* ── Podcast ──────────────────────────────────────── */
.podcast {
  display: flex;
  align-items: center;
  gap: var(--sp-6);
  border: 1px solid var(--color-accent);
  border-radius: var(--radius-lg);
  padding: var(--sp-6);
  text-decoration: none;
  background: var(--color-charcoal);
  transition: background-color var(--dur-med) var(--ease-out);
}
.podcast:hover { background: var(--color-smoke); }
.podcast__title {
  font-family: var(--font-display);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -0.03em;
  font-size: clamp(2rem, 4.5vw, 3.6rem);
  line-height: 1;
  color: var(--color-bone);
  margin-top: 0.4rem;
}
.podcast__title .serif { font-family: var(--font-serif); font-style: italic; font-weight: 400; text-transform: none; letter-spacing: -0.02em; font-size: 0.85em; }
.podcast__sub { margin-top: var(--sp-2); color: var(--color-pebble); font-weight: 300; max-width: 46ch; }
.podcast__go { margin-left: auto; color: var(--color-ash); white-space: nowrap; flex-shrink: 0; }
.podcast__eq { display: flex; align-items: flex-end; gap: 5px; height: 64px; flex-shrink: 0; }
.podcast__eq i { width: 7px; background: var(--color-accent); border-radius: 2px; height: 30%; }
@media (prefers-reduced-motion: no-preference) {
  .podcast__eq i { animation: eq 1.1s var(--ease-in-out) infinite alternate; }
  .podcast__eq i:nth-child(1) { animation-delay: 0ms; }
  .podcast__eq i:nth-child(2) { animation-delay: 140ms; }
  .podcast__eq i:nth-child(3) { animation-delay: 280ms; }
  .podcast__eq i:nth-child(4) { animation-delay: 90ms; }
  .podcast__eq i:nth-child(5) { animation-delay: 220ms; }
  @keyframes eq { from { height: 22%; } to { height: 96%; } }
}

/* ── Footer cols ──────────────────────────────────── */
.footer__cols { display: flex; gap: var(--sp-7); flex-wrap: wrap; }
.footer__cols .footer__links { flex-direction: column; display: flex; gap: var(--sp-1); }

/* ── V4 responsive ────────────────────────────────── */
@media (max-width: 64rem) {
  .voice { flex-wrap: wrap; }
  .voice__play { margin-left: 0; width: 100%; }
  .podcast { flex-direction: column; align-items: flex-start; gap: var(--sp-3); }
  .podcast__go { margin-left: 0; }
  .post { flex-wrap: wrap; }
  .post__go { margin-left: 0; }
}
@media (max-width: 40rem) {
  .acc__peak { display: none; }
  .manifesto { height: 260vh; }
}

/* ══ V5 ═══════════════════════════════════════════════ */

/* ── Apertura directa ─────────────────────────────── */
.opening__title { font-size: clamp(2.6rem, 7.2vw, 6.8rem); max-width: 16ch; }
.opening__title .serif { font-size: 0.85em; }
.opening__dot { color: var(--color-accent); }
.opening__hint { margin-top: var(--sp-4); color: var(--color-ash); }

/* ── Manifiesto: párrafo final ────────────────────── */
.manifesto__phase--d { opacity: 0; }
.manifesto__creed {
  --wfade: 1;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.7rem, 3.8vw, 3.3rem);
  line-height: 1.32;
  letter-spacing: -0.02em;
  color: rgba(252, 252, 253, var(--wfade));
  max-width: 34ch;
  text-align: center;
  text-wrap: balance;
}
.manifesto__creed em { font-style: normal; color: var(--color-accent); }

/* ── Audiencias: panel expandible ─────────────────── */
.aud-card { cursor: pointer; font: inherit; }
.aud-panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.45s var(--ease-out), opacity 0.45s var(--ease-out); opacity: 0; }
.aud-panel.is-open { grid-template-rows: 1fr; opacity: 1; }
.aud-panel__inner { overflow: hidden; }
.aud-panel__body {
  margin-top: var(--sp-2);
  border: 1px solid var(--color-smoke);
  border-radius: var(--radius-lg);
  background: var(--color-charcoal);
  padding: var(--sp-4);
}
.aud-panel__label { color: var(--color-accent); }
.aud-panel__situation {
  margin-top: var(--sp-2);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-subheading);
  letter-spacing: -0.02em;
  color: var(--color-bone);
  max-width: 34ch;
  line-height: 1.25;
}
.aud-panel__wins { margin-top: var(--sp-3); padding: 0; list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-3); }
.aud-panel__wins li {
  border-top: 1px solid var(--color-graphite);
  padding-top: var(--sp-2);
  color: var(--color-ash);
  font-weight: 300;
  font-size: 0.9rem;
}
.aud-panel__body .ghost-cta { margin-top: var(--sp-2); }

/* ── Guías: marquee automático ────────────────────── */
.team-marquee { overflow: clip; }
.team-track { display: flex; gap: var(--sp-4); width: max-content; padding-block: var(--sp-1) var(--sp-3); }
.team-track .guide { flex-shrink: 0; text-align: center; }
.guide img { transition: transform var(--dur-med) var(--ease-out), border-color var(--dur-med) var(--ease-out); }
.guide:hover img { transform: scale(1.06) rotate(-2deg); border-color: var(--color-accent); }
@media (prefers-reduced-motion: no-preference) {
  .team-track { animation: slide-l 46s linear infinite; }
  .team-marquee:hover .team-track { animation-play-state: paused; }
}
@media (prefers-reduced-motion: reduce) {
  .team-marquee { overflow-x: auto; }
}

/* ── Casos: cuadros flotantes ─────────────────────── */
.float-cases { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-4); max-width: 62rem; margin-inline: auto; }
.fcase {
  border: 1px solid var(--color-rule-linen);
  border-radius: var(--radius-card);
  padding: var(--sp-4) var(--sp-3);
  background: #fbfaf8;
  transition: transform var(--dur-med) var(--ease-out), border-color var(--dur-med) var(--ease-out);
}
.fcase:hover { transform: translateY(-8px) !important; animation-play-state: paused; border-color: var(--color-accent); }
.fcase h3 { font-family: var(--font-display); font-weight: 700; font-size: var(--text-subheading); letter-spacing: -0.02em; color: var(--color-ink-on-linen); }
.fcase .who { font-size: 0.75rem; color: var(--color-ink2-on-linen); margin-top: 0.2rem; }
.fcase__figs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-2); margin-top: var(--sp-3); border-top: 1px solid var(--color-rule-linen); padding-top: var(--sp-3); }
.fcase__figs--one { grid-template-columns: minmax(0, 1fr); }
.fcase__figs b { display: block; font-family: var(--font-display); font-weight: 800; font-size: var(--text-heading-sm); letter-spacing: -0.03em; color: var(--color-ink-on-linen); font-variant-numeric: tabular-nums; line-height: 1; }
.fcase__figs span { font-size: 0.72rem; color: var(--color-ink2-on-linen); }
.fcase .window { margin-top: var(--sp-2); font-size: 0.72rem; color: var(--color-ink2-on-linen); }
@media (prefers-reduced-motion: no-preference) {
  .fcase--drift1 { animation: drift 7s var(--ease-in-out) infinite alternate; }
  .fcase--drift2 { animation: drift 7s var(--ease-in-out) infinite alternate-reverse; }
  @keyframes drift { from { transform: translateY(0); } to { transform: translateY(-10px); } }
}

/* ── Blog: tarjetas con foto ──────────────────────── */
.postcards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-3); }
.postcard {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  border: 1px solid var(--color-charcoal);
  border-radius: var(--radius-lg);
  overflow: clip;
  text-decoration: none;
  background: var(--color-charcoal);
  transition: border-color var(--dur-med) var(--ease-out);
}
.postcard:hover { border-color: var(--color-iron); }
.postcard__img { display: block; aspect-ratio: 16 / 10; overflow: clip; }
.postcard__img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.5s var(--ease-out); }
.postcard:hover .postcard__img img { transform: scale(1.045); }
.postcard__img--brand { display: grid; place-items: center; background: var(--color-smoke); }
.postcard__img--brand svg { width: 34%; }
.postcard__num { padding-inline: var(--sp-3); font-family: var(--font-display); font-weight: 500; font-size: var(--text-label); letter-spacing: 0.06em; color: var(--color-accent); }
.postcard h3 {
  padding-inline: var(--sp-3);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.15rem;
  letter-spacing: -0.015em;
  color: var(--color-bone);
  line-height: 1.3;
}
.postcard__go { padding: 0 var(--sp-3) var(--sp-3); color: var(--color-ash); }

/* ── Podcast XL ───────────────────────────────────── */
.podcast-xl__head { text-align: center; max-width: 52rem; margin-inline: auto; margin-bottom: var(--sp-7); }
.podcast-xl__title {
  font-family: var(--font-display);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -0.04em;
  overflow-wrap: normal;
  font-size: clamp(2.4rem, 6.6vw, 6rem);
  line-height: 0.95;
  color: var(--color-bone);
  margin-top: var(--sp-2);
}
.podcast-xl__title .serif { font-family: var(--font-serif); font-style: italic; font-weight: 400; text-transform: none; letter-spacing: -0.02em; font-size: 0.85em; }
.podcast-xl__sub { margin-top: var(--sp-2); color: var(--color-pebble); font-weight: 300; max-width: 44ch; margin-inline: auto; }
.podcast__eq--big { justify-content: center; height: 44px; margin-bottom: var(--sp-2); display: flex; align-items: flex-end; gap: 5px; }
.episodes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-3); }
.episode {
  text-decoration: none;
  border: 1px solid var(--color-charcoal);
  border-radius: var(--radius-lg);
  overflow: clip;
  background: var(--color-charcoal);
  transition: border-color var(--dur-med) var(--ease-out);
}
.episode:hover { border-color: var(--color-accent); }
.episode__thumb { position: relative; display: block; aspect-ratio: 16 / 9; overflow: clip; }
.episode__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.5s var(--ease-out); }
.episode:hover .episode__thumb img { transform: scale(1.05); }
.episode__play {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: var(--color-bone);
  font-size: 1.6rem;
  background: rgba(10, 9, 22, 0.35);
  transition: background-color var(--dur-med) var(--ease-out);
}
.episode:hover .episode__play { background: rgba(10, 9, 22, 0.12); }
.episode h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.98rem;
  letter-spacing: -0.01em;
  color: var(--color-bone);
  line-height: 1.35;
  padding: var(--sp-2) var(--sp-3) var(--sp-3);
}
.podcast-xl__cta { text-align: center; margin-top: var(--sp-6); }

/* ── V5 responsive ────────────────────────────────── */
@media (max-width: 64rem) {
  .aud-panel__wins { grid-template-columns: minmax(0, 1fr); }
  .float-cases { grid-template-columns: minmax(0, 1fr); }
  .postcards { grid-template-columns: minmax(0, 1fr); }
  .episodes { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 40rem) {
  .manifesto { height: 460vh; }
  .manifesto__creed { font-size: 1.15rem; max-width: 26ch; }
}

/* ══ V6 ═══════════════════════════════════════════════ */

/* ── Marca oficial ────────────────────────────────── */
.brand { display: inline-flex; align-items: center; text-decoration: none; }
.nav .brand img { height: 2rem; width: auto; }
.footer .brand img { height: 2.4rem; width: auto; }

/* ── Manifiesto: zoom nítido + columna ────────────── */
/* La palabra del zoom se compone ×4 y se escala a 0.24: al ampliar nunca se rasteriza borrosa */
.manifesto__word--zoom {
  color: var(--color-accent);
}
.manifesto__phase--e { opacity: 0; }
.manifesto__column {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35em;
  font-family: var(--font-display);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -0.03em;
  font-size: clamp(2.1rem, 5.4vw, 4.8rem);
  line-height: 1;
  color: var(--color-accent);
  text-align: center;
}

/* ── Capas del sistema clicables ──────────────────── */
.ldot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.stack__tab {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  width: 100%;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 0.85rem;
  color: var(--color-pebble);
  background: var(--color-charcoal);
  border: 1px solid var(--color-smoke);
  border-bottom: none;
  padding: 0.8rem 1.4rem;
  border-radius: var(--radius-card) var(--radius-card) 0 0;
  cursor: pointer;
  text-align: left;
  transition: color var(--dur-short) var(--ease-out), background-color var(--dur-short) var(--ease-out);
}
.stack__tab:hover { color: var(--color-bone); background: var(--color-smoke); }
.layer-pane { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: var(--sp-4); grid-column: 1 / -1; }
.layer-pane[hidden] { display: none; }
.stack__front { display: block; }
.pipe { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.5rem; margin-top: var(--sp-2); }
.pipe__col {
  border: 1px solid var(--color-graphite);
  border-radius: 6px;
  background: var(--color-smoke);
  padding: 0.7rem 0.6rem;
  text-align: center;
}
.pipe__col b { display: block; font-family: var(--font-body); font-weight: 600; font-size: 0.62rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-pebble); }
.pipe__col span { display: block; margin-top: 0.35rem; font-family: var(--font-display); font-weight: 800; font-size: 1.4rem; color: var(--color-bone); font-variant-numeric: tabular-nums; }
.pipe__col--hot { border-color: var(--color-accent); }

/* ── Audiencias: detalle activo en el icono ───────── */
.aud-card .spark { transition: stroke var(--dur-med) var(--ease-out), fill var(--dur-med) var(--ease-out); }
.aud-card.is-active { border-color: var(--color-accent); }
.aud-card.is-active .spark { stroke: var(--color-accent); }
.aud-card.is-active .spark--fill { fill: var(--color-accent); stroke: none; }
.aud-card.is-active svg { color: var(--color-pebble); }

/* ── Fichas de casos con vídeo ────────────────────── */
.fcase {
  display: flex;
  flex-direction: column;
  padding: 0;
  overflow: clip;
  cursor: pointer;
  font: inherit;
  text-align: left;
}
.fcase__thumb { position: relative; display: block; aspect-ratio: 16 / 8.2; overflow: clip; }
.fcase__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.5s var(--ease-out); }
.fcase:hover .fcase__thumb img { transform: scale(1.05); }
.fcase__play {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: #fff;
  font-size: 1.5rem;
  background: rgba(20, 18, 42, 0.35);
  transition: background-color var(--dur-med) var(--ease-out);
}
.fcase:hover .fcase__play { background: rgba(20, 18, 42, 0.12); }
.fcase__body { display: block; padding: var(--sp-3); }
.fcase .who { display: block; }
.fcase__figs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-2); margin-top: var(--sp-2); border-top: 1px solid var(--color-rule-linen); padding-top: var(--sp-2); }
.fcase__figs--one { grid-template-columns: minmax(0, 1fr); }
.fcase__figs span { display: block; }
.fcase__figs b { display: block; font-family: var(--font-display); font-weight: 800; font-size: 1.6rem; letter-spacing: -0.03em; color: var(--color-ink-on-linen); font-variant-numeric: tabular-nums; line-height: 1; }
.fcase__figs i { font-style: normal; font-size: 0.7rem; color: var(--color-ink2-on-linen); }
.fcase .window { display: block; margin-top: var(--sp-2); font-size: 0.72rem; color: var(--color-ink2-on-linen); }

/* ── V6 responsive ────────────────────────────────── */
@media (max-width: 64rem) {
  .layer-pane { grid-template-columns: minmax(0, 1fr); }
  .nav .brand img { height: 1.7rem; }
}

/* Fixes de cascada V6 */
.stack__back li { background: none; border: none; padding: 0; display: block; border-radius: 0; }
/* drift con `translate` para que el hover-lift (transform) componga */
@keyframes drift { from { translate: 0 0; } to { translate: 0 -10px; } }

/* ══ V6.1 ═════════════════════════════════════════════ */

/* ── Zoom en dos capas: base centrada, zoom por la U ── */
.manifesto__phase--c { transform: none !important; display: grid; place-items: center; }
.manifesto__zoomer { transform-origin: 58% 66%; display: grid; place-items: center; width: 100%; height: 100%; }
.manifesto__zoomer .manifesto__word--zoom { font-size: clamp(4.5rem, 18.5vw, 17rem); will-change: auto; }

/* ── Palabras viajeras (FLIP credo → columna) ─────── */
.manifesto__fliers { position: absolute; inset: 0; pointer-events: none; opacity: 0; }
.flier {
  position: absolute;
  left: 0;
  top: 0;
  font-family: var(--font-display);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -0.03em;
  color: var(--color-accent);
  line-height: 1;
  white-space: nowrap;
  transform-origin: left top;
  will-change: transform;
}

/* ── Deck: naipes horizontales sobre el void ──────── */
.deck {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--sp-3);
  align-items: start;
  padding-block: var(--sp-4) var(--sp-6);
}
.deck .fcase {
  background: var(--color-charcoal);
  border: 1px solid var(--color-graphite);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-inset);
  color: var(--color-ash);
}
.deck .fcase:nth-child(1) { rotate: -5deg; margin-top: var(--sp-4); }
.deck .fcase:nth-child(2) { rotate: 2.5deg; }
.deck .fcase:nth-child(3) { rotate: -2deg; margin-top: var(--sp-6); }
.deck .fcase:nth-child(4) { rotate: 5deg; margin-top: var(--sp-2); }
.deck .fcase:hover { rotate: 0deg; border-color: var(--color-accent); }
.deck .fcase { transition: rotate 0.45s var(--ease-out), transform var(--dur-med) var(--ease-out), border-color var(--dur-med) var(--ease-out); }
.deck .fcase h3 { color: var(--color-bone); font-size: 1.3rem; }
.deck .fcase .who { color: var(--color-pebble); }
.deck .fcase__figs { border-top: 1px solid var(--color-graphite); }
.deck .fcase__figs b { color: var(--color-bone); font-size: 1.35rem; }
.deck .fcase__figs i { color: var(--color-pebble); }
.deck .fcase .window { color: var(--color-pebble); }
.deck .fcase__body { padding: var(--sp-2) var(--sp-3) var(--sp-3); }
.deck__claim {
  text-align: center;
  margin-top: var(--sp-4);
  font-family: var(--font-display);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -0.03em;
  font-size: var(--text-heading-sm);
  color: var(--color-bone);
}
.deck__claim .serif { font-family: var(--font-serif); font-style: italic; font-weight: 400; text-transform: none; letter-spacing: -0.02em; }
@media (prefers-reduced-motion: no-preference) {
  .deck .fcase:nth-child(odd) { animation: drift 7s var(--ease-in-out) infinite alternate; }
  .deck .fcase:nth-child(even) { animation: drift 7s var(--ease-in-out) infinite alternate-reverse; }
  .deck .fcase:hover { animation-play-state: paused; transform: translateY(-8px); }
}
@media (max-width: 64rem) {
  .deck { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 40rem) {
  .deck { grid-template-columns: minmax(0, 1fr); }
  .deck .fcase { rotate: 0deg !important; margin-top: 0 !important; }
}
.deck .fcase__figs { gap: var(--sp-2) 1.25rem; }
.deck .fcase__figs i { font-size: 0.66rem; overflow-wrap: anywhere; }


/* ============================================================================