/* ============================================================================
   LAYOUT.CSS — Header, hero, secciones específicas, footer
   ----------------------------------------------------------------------------
   Estructuras que aparecen una sola vez o que son propias de una sección.
   Todo lo reutilizable vive en components.css.
   ========================================================================== */

/* ---------------------------------------------------------------------------
   HEADER
   ------------------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
  background: color-mix(in srgb, var(--c-base) 92%, transparent);
  backdrop-filter: blur(12px) saturate(1.2);
  border-bottom: 1px solid var(--c-border);
  transition: background-color var(--dur-base) var(--ease), border-color var(--dur-base) var(--ease);
}
/* app.js agrega .is-scrolled después de 40px de scroll */
.site-header.is-scrolled {
  background: color-mix(in srgb, var(--c-base) 98%, transparent);
  border-bottom-color: var(--c-border-strong);
}
@supports not (background: color-mix(in srgb, red 50%, blue)) {
  .site-header { background: rgba(10, 13, 22, 0.92); }
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-md);
  padding-block: var(--sp-sm);
}

.logo {
  font-family: var(--font-serif);
  font-size: var(--fs-md);
  letter-spacing: var(--ls-widest);
  white-space: nowrap;
}
.logo b { font-weight: 600; }
.logo span { color: var(--c-text-muted); font-weight: 300; }

.nav { display: none; }
@media (min-width: 1024px) {
  .nav {
    display: flex;
    gap: clamp(1rem, 1.6vw, 1.9rem);
  }
}
.nav__link {
  position: relative;
  padding-block: var(--sp-3xs);
  font-size: var(--fs-2xs);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--c-text-muted);
  transition: color var(--dur-base) var(--ease);
}
.nav__link::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 0;
  height: 1px;
  background: var(--c-accent-500);
  transition: width var(--dur-base) var(--ease);
}
.nav__link:hover,
.nav__link[aria-current='true'] { color: var(--c-accent-300); }
.nav__link:hover::after,
.nav__link[aria-current='true']::after { width: 100%; }

/* Botón hamburguesa — solo mobile/tablet */
.nav-toggle {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--c-border);
  border-radius: var(--radius-sm);
  color: var(--c-text);
}
@media (min-width: 1024px) { .nav-toggle { display: none; } }
.nav-toggle__bars,
.nav-toggle__bars::before,
.nav-toggle__bars::after {
  display: block;
  width: 18px;
  height: 1.5px;
  background: currentColor;
  transition: transform var(--dur-base) var(--ease), opacity var(--dur-fast) var(--ease);
}
.nav-toggle__bars::before,
.nav-toggle__bars::after { content: ''; position: absolute; }
.nav-toggle__bars::before { transform: translateY(-6px); }
.nav-toggle__bars::after  { transform: translateY(6px); }
.nav-toggle[aria-expanded='true'] .nav-toggle__bars { background: transparent; }
.nav-toggle[aria-expanded='true'] .nav-toggle__bars::before { transform: rotate(45deg); }
.nav-toggle[aria-expanded='true'] .nav-toggle__bars::after  { transform: rotate(-45deg); }

/* Panel de navegación mobile */
.nav-drawer {
  display: grid;
  grid-template-rows: 0fr;
  overflow: hidden;
  z-index: var(--z-overlay);
  transition: grid-template-rows var(--dur-slow) var(--ease-out);
  border-top: 1px solid transparent;
}
.nav-drawer.is-open {
  grid-template-rows: 1fr;
  border-top-color: var(--c-border);
}
@media (min-width: 1024px) { .nav-drawer { display: none; } }
.nav-drawer__inner { min-height: 0; padding-block: var(--sp-sm); }
.nav-drawer__link {
  display: block;
  padding: var(--sp-xs) 0;
  font-size: var(--fs-sm);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--c-text-secondary);
  border-bottom: 1px solid var(--c-border);
}
.nav-drawer__link:hover { color: var(--c-accent-300); }

/* El CTA del header se esconde en pantallas muy chicas para no apretar el logo */
.site-header .btn { display: none; }
@media (min-width: 640px) { .site-header .btn { display: inline-flex; } }

/* ---------------------------------------------------------------------------
   HERO
   ------------------------------------------------------------------------- */
.hero {
  position: relative;
  padding-block: clamp(3.5rem, 2rem + 6vw, 7rem);
  border-bottom: 1px solid var(--c-border);
  overflow: hidden;
  container-type: inline-size;
}
/* Dos halos, uno por polo: el cálido arriba a la derecha y el frío abajo a
   la izquierda. Juntos insinúan el recorrido completo ya desde el hero, antes
   de que la persona empiece a bajar. Respiran muy lento — un movimiento que
   se percibe pero no distrae de la lectura. */
.hero::before {
  content: '';
  position: absolute;
  top: -20%;
  right: -10%;
  width: 60vw;
  height: 60vw;
  max-width: 720px;
  max-height: 720px;
  background: radial-gradient(circle, rgb(var(--c-accent-rgb) / 0.22) 0%, transparent 68%);
  pointer-events: none;
  z-index: var(--z-base);
  animation: hero-breathe 14s var(--ease) infinite alternate;
}
.hero::after {
  content: '';
  position: absolute;
  bottom: -25%;
  left: -15%;
  width: 55vw;
  height: 55vw;
  max-width: 640px;
  max-height: 640px;
  background: radial-gradient(circle, rgb(56 208 255 / 0.14) 0%, transparent 66%);
  pointer-events: none;
  z-index: var(--z-base);
  animation: hero-breathe 18s var(--ease) infinite alternate-reverse;
}
/* Campo de ondas: ocupa todo el hero, detrás del contenido. El canvas lo
   inyecta waves.js; acá solo se le da lugar y se lo saca del camino del
   puntero para que no robe clics a los botones. */
.hero__waves {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: var(--z-base);
}

.hero > *:not(.hero__waves) { position: relative; z-index: var(--z-raised); }

@keyframes hero-breathe {
  from { transform: translate3d(0, 0, 0) scale(1); opacity: .85; }
  to   { transform: translate3d(2%, -3%, 0) scale(1.12); opacity: 1; }
}

/* El nombre lleva el viaje entero en una sola palabra: arranca en el naranja
   del latido y termina en el cian del algoritmo. Es el único lugar donde se
   ve el degradado completo — por eso usa los polos fijos y no el acento que
   cambia con el scroll. */
.hero__title {
  font-size: var(--fs-4xl);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  margin-bottom: var(--sp-md);
  background: var(--grad-brand);
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: brand-drift 12s var(--ease) infinite alternate;
}

@keyframes brand-drift {
  from { background-position: 0% 50%; }
  to   { background-position: 100% 50%; }
}

/* Quien pidió menos movimiento recibe el mismo diseño, quieto. */
@media (prefers-reduced-motion: reduce) {
  .hero::before,
  .hero::after,
  .hero__title { animation: none; }
}
.hero__tagline {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--fs-md);
  color: var(--c-text-secondary);
  max-width: var(--measure-narrow);
  margin-bottom: var(--sp-md);
}
.hero__role {
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--c-accent-300);
  margin-bottom: var(--sp-md);
}
.hero__statement {
  font-size: var(--fs-md);
  max-width: var(--measure-narrow);
  margin-bottom: var(--sp-lg);
}
.hero__statement strong {
  display: block;
  font-family: var(--font-serif);
  font-size: var(--fs-lg);
  font-weight: 500;
}
.hero__footnote {
  margin-top: var(--sp-lg);
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-wide);
  color: var(--c-text-muted);
}

/* Retrato con marco y badges flotantes */
.hero__media { position: relative; }
.portrait {
  position: relative;
  aspect-ratio: 4 / 5;
  border: 1px solid var(--c-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  background:
    radial-gradient(120% 90% at 70% 20%, rgba(201, 162, 75, 0.1), transparent 60%),
    linear-gradient(165deg, var(--c-surface), var(--c-base));
}
.portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 22%;
}
/* Placeholder visible si todavía no cargaste la foto */
.portrait__placeholder {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  gap: var(--sp-2xs);
  text-align: center;
  padding: var(--sp-lg);
  color: var(--c-text-faint);
  font-size: var(--fs-xs);
}
/* OBLIGATORIO: sin esto, el cartel "Falta la foto de Daniel" se ve ENCIMA de
   la foto real. El atributo `hidden` del HTML aplica display:none con
   especificidad mínima, así que el display:grid de arriba le gana. Pasó en
   producción: el aviso para el desarrollador quedó visible sobre el retrato. */
.portrait__placeholder[hidden] { display: none; }
/* Esquinas decorativas con el acento */
.portrait::before,
.portrait::after {
  content: '';
  position: absolute;
  width: 34px;
  height: 34px;
  border-color: var(--c-accent-500);
  border-style: solid;
  border-width: 0;
  z-index: 2;
}
.portrait::before { top: 16px; left: 16px; border-top-width: 1px; border-left-width: 1px; }
.portrait::after  { bottom: 16px; right: 16px; border-bottom-width: 1px; border-right-width: 1px; }

.portrait__badge {
  position: absolute;
  top: var(--sp-md);
  left: var(--sp-md);
  z-index: 3;
  padding: 0.4rem 0.8rem;
  background: color-mix(in srgb, var(--c-base) 90%, transparent);
  border: 1px solid var(--c-border-accent);
  border-radius: var(--radius-sm);
  font-size: var(--fs-2xs);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--c-accent-300);
  backdrop-filter: blur(6px);
}
/* El nombre va SOBRE la foto, sin recuadro: la caja partía la imagen en dos
   y le robaba presencia al retrato.
   Para que el texto siga siendo legible —el traje es claro justo donde caen
   las letras— la base de la foto se funde a oscuro con un degradado que nace
   de la nada. No tiene bordes ni esquinas, así que no se lee como caja:
   parece parte de la iluminación del retrato. El text-shadow es el refuerzo
   final para los píxeles más claros. */
.portrait__caption {
  position: absolute;
  inset: auto 0 0 0;
  z-index: 3;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--sp-sm);
  padding: var(--sp-xl) var(--sp-md) var(--sp-md);
  background: linear-gradient(
    to top,
    rgb(6 8 14 / 0.92) 0%,
    rgb(6 8 14 / 0.72) 38%,
    rgb(6 8 14 / 0.3) 68%,
    transparent 100%
  );
  text-shadow: 0 1px 12px rgb(6 8 14 / 0.85);
}
.portrait__name { font-family: var(--font-serif); font-size: var(--fs-md); }
.portrait__role { font-size: var(--fs-2xs); color: var(--c-text-muted); }
.portrait__stat { text-align: right; white-space: nowrap; }
.portrait__stat b {
  display: block;
  font-family: var(--font-serif);
  font-size: var(--fs-lg);
  font-weight: 400;
  color: var(--c-accent-300);
  line-height: 1;
}
.portrait__stat span {
  font-size: var(--fs-2xs);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--c-text-muted);
}

/* Marquesina de credenciales bajo el hero */
.ticker {
  margin-top: var(--sp-lg);
  border-block: 1px solid var(--c-border);
  padding-block: var(--sp-xs);
  overflow: hidden;
  /* Los #000 acá NO son un color: son la opacidad de la máscara (negro = opaco,
     transparente = oculto). Difuminan los bordes de la marquesina. No los
     reemplaces por un token de color — rompería el efecto. */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.ticker__track {
  display: flex;
  gap: var(--sp-xl);
  width: max-content;
  animation: ticker-scroll 42s linear infinite;
}
.ticker:hover .ticker__track { animation-play-state: paused; }
.ticker__item {
  font-size: var(--fs-2xs);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--c-text-muted);
  white-space: nowrap;
}
.ticker__item::after { content: ' ·'; color: var(--c-accent-500); }
@keyframes ticker-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .ticker__track { animation: none; flex-wrap: wrap; width: auto; }
}

/* ---------------------------------------------------------------------------
   PANEL LATAM AI BOARD
   ------------------------------------------------------------------------- */
.board-panel__head {
  display: flex;
  align-items: center;
  gap: var(--sp-sm);
  padding-bottom: var(--sp-md);
  margin-bottom: var(--sp-md);
  border-bottom: 1px solid var(--c-border);
}
.board-panel__mark {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 54px;
  height: 54px;
  border: 1px solid var(--c-accent-500);
  border-radius: var(--radius-sm);
  font-family: var(--font-serif);
  font-size: var(--fs-sm);
  letter-spacing: var(--ls-wide);
  color: var(--c-accent-300);
}
.board-panel__title { font-family: var(--font-serif); font-size: var(--fs-md); }
.board-panel__sub {
  font-size: var(--fs-2xs);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--c-text-muted);
}

/* Grid de países: auto-fit, así agregar un 5to país no rompe nada */
.country-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--sp-2xs);
  margin-block: var(--sp-md);
}
.country {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2xs);
  padding: 0.7rem 0.85rem;
  background: var(--c-surface-inset);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-sm);
  font-size: var(--fs-sm);
  transition: border-color var(--dur-base) var(--ease);
}
.country:hover { border-color: var(--c-border-accent); }
.country__code {
  font-size: var(--fs-2xs);
  letter-spacing: var(--ls-wide);
  color: var(--c-accent-400);
}
.country__name { flex: 1; color: var(--c-text-secondary); }
.country__count {
  font-family: var(--font-serif);
  font-variant-numeric: oldstyle-nums;
  color: var(--c-accent-300);
}
.country--expand {
  grid-column: 1 / -1;
  border-left: 2px solid var(--c-accent-500);
  color: var(--c-accent-300);
}

/* ---------------------------------------------------------------------------
   TIMELINE — línea central en desktop, lateral en mobile
   ------------------------------------------------------------------------- */
.timeline {
  position: relative;
  margin-top: var(--sp-lg);
}
.timeline::before {
  content: '';
  position: absolute;
  left: 7px;
  top: 0;
  bottom: 0;
  width: 1px;
  background: linear-gradient(180deg, transparent, var(--c-border-strong) 6%, var(--c-border-strong) 94%, transparent);
}

/* La línea se dibuja sola mientras se recorre la sección: la trayectoria
   profesional avanza a medida que se lee, en vez de estar toda ahí desde el
   principio. Es una animación manejada por el scroll, no por el tiempo, así
   que va y viene con el gesto de la persona.

   Sin soporte de scroll-driven animations no se pinta nada y queda la línea
   base gris de arriba — que es exactamente como se veía antes. */
@supports (animation-timeline: view()) {
  .timeline::after {
    content: '';
    position: absolute;
    left: 7px;
    top: 0;
    bottom: 0;
    width: 1px;
    background: linear-gradient(180deg, var(--c-accent-500), var(--c-accent-300));
    transform-origin: top center;
    transform: scaleY(0);
    animation: timeline-draw linear both;
    animation-timeline: view();
    animation-range: cover 12% cover 78%;
  }
}

@keyframes timeline-draw {
  to { transform: scaleY(1); }
}
.timeline__item {
  position: relative;
  padding-left: var(--sp-xl);
  padding-bottom: var(--sp-lg);
}
.timeline__dot {
  position: absolute;
  left: 0;
  top: var(--sp-lg);
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: var(--c-base);
  border: 1px solid var(--c-accent-500);
  display: grid;
  place-items: center;
}
.timeline__dot::after {
  content: '';
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--c-accent-500);
}
.timeline__years {
  font-size: var(--fs-2xs);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--c-accent-300);
  margin-bottom: var(--sp-2xs);
}
.timeline__org {
  font-size: var(--fs-2xs);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--c-accent-400);
  margin-block: var(--sp-3xs) var(--sp-xs);
}

/* Desktop: zig-zag alrededor de la línea central */
@container (min-width: 820px) {
  .timeline::before,
  .timeline::after { left: 50%; }
  .timeline__item { width: calc(50% - var(--sp-lg)); padding-left: 0; }
  .timeline__item:nth-child(odd)  { margin-left: 0; text-align: right; }
  .timeline__item:nth-child(even) { margin-left: calc(50% + var(--sp-lg)); }
  .timeline__item:nth-child(odd)  .timeline__dot { left: auto; right: calc(-1 * var(--sp-lg) - 7px); }
  .timeline__item:nth-child(even) .timeline__dot { left: calc(-1 * var(--sp-lg) - 7px); }
  .timeline__item:nth-child(odd) .cluster { justify-content: flex-end; }
  .timeline__item:nth-child(odd) p { margin-left: auto; }
}
@supports not (container-type: inline-size) {
  @media (min-width: 880px) {
    .timeline::before,
    .timeline::after { left: 50%; }
    .timeline__item { width: calc(50% - var(--sp-lg)); padding-left: 0; }
    .timeline__item:nth-child(odd)  { text-align: right; }
    .timeline__item:nth-child(even) { margin-left: calc(50% + var(--sp-lg)); }
    .timeline__item:nth-child(odd)  .timeline__dot { left: auto; right: calc(-1 * var(--sp-lg) - 7px); }
    .timeline__item:nth-child(even) .timeline__dot { left: calc(-1 * var(--sp-lg) - 7px); }
  }
}

/* ---------------------------------------------------------------------------
   LISTA NUMERADA (Veedor 360)
   ------------------------------------------------------------------------- */
.numbered__item {
  display: flex;
  gap: var(--sp-md);
  padding-block: var(--sp-md);
  border-bottom: 1px solid var(--c-border);
}
.numbered__item:last-child { border-bottom: none; }
.numbered__n {
  flex-shrink: 0;
  min-width: 2.2rem;
  font-family: var(--font-serif);
  font-variant-numeric: oldstyle-nums;
  font-size: var(--fs-lg);
  color: var(--c-accent-300);
  line-height: 1.2;
}
.numbered__title {
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  font-weight: 400;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--c-text);
  margin-bottom: var(--sp-3xs);
}

/* Horizontes 30/90/180 */
.horizon {
  display: flex;
  gap: var(--sp-md);
  align-items: flex-start;
  padding: var(--sp-md);
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-md);
  transition: border-color var(--dur-base) var(--ease);
}
.horizon:hover { border-color: var(--c-border-accent); }
.horizon__days {
  flex-shrink: 0;
  min-width: 4rem;
  font-family: var(--font-serif);
  font-variant-numeric: oldstyle-nums;
  font-size: var(--fs-xl);
  color: var(--c-accent-300);
  line-height: 1;
}
.horizon__days span {
  display: block;
  margin-top: var(--sp-3xs);
  font-family: var(--font-sans);
  font-size: var(--fs-2xs);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--c-text-muted);
}

/* ---------------------------------------------------------------------------
   MATRIZ (¿Para qué me contratás?)
   Bordes internos con gap:1px sobre fondo de borde — truco limpio que evita
   el problema de bordes dobles y se adapta a cualquier cantidad de items.
   ------------------------------------------------------------------------- */
.matrix {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: 1px;
  background: var(--c-border);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.matrix__cell {
  background: var(--c-base);
  padding: var(--sp-lg);
  transition: background-color var(--dur-base) var(--ease);
}
.matrix__cell:hover { background: var(--c-surface); }
.matrix__n {
  font-family: var(--font-serif);
  font-variant-numeric: oldstyle-nums;
  font-size: var(--fs-xl);
  color: transparent;
  -webkit-text-stroke: 1px var(--c-accent-600);
  line-height: 1;
  margin-bottom: var(--sp-2xs);
}

/* ---------------------------------------------------------------------------
   METODOLOGÍA 4C
   ------------------------------------------------------------------------- */
.method-track {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-block: var(--sp-xl) var(--sp-lg);
}
.method-node {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: clamp(48px, 6vw, 72px);
  aspect-ratio: 1;
  border: 1px solid var(--c-border-strong);
  font-family: var(--font-serif);
  font-variant-numeric: oldstyle-nums;
  font-size: var(--fs-md);
  color: var(--c-accent-300);
  transition: background-color var(--dur-base) var(--ease), color var(--dur-base) var(--ease), border-color var(--dur-base) var(--ease);
}
.method-node.is-active {
  background: var(--c-accent-500);
  border-color: var(--c-accent-500);
  color: var(--c-text-on-accent);
}
.method-line {
  flex: 1;
  max-width: 140px;
  height: 1px;
  background: var(--c-border-strong);
}
.method-cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
  gap: var(--sp-lg);
  text-align: center;
}
.method-cols h3 { margin-bottom: var(--sp-2xs); }

/* Métricas de impacto: 2×2 con bordes internos */
.metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(150px, 45%), 1fr));
  gap: 1px;
  background: var(--c-border);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.metrics__cell {
  background: var(--c-base);
  padding: var(--sp-md);
}

/* ---------------------------------------------------------------------------
   CANALES / ECOSISTEMA (landing)
   ------------------------------------------------------------------------- */
.channel__name {
  font-family: var(--font-serif);
  font-size: var(--fs-lg);
  color: var(--c-accent-300);
  margin-bottom: var(--sp-3xs);
}
.channel__kind {
  font-size: var(--fs-2xs);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--c-text-muted);
  margin-bottom: var(--sp-sm);
}
.channel__link {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3xs);
  margin-top: var(--sp-sm);
  font-size: var(--fs-sm);
  color: var(--c-accent-300);
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur-base) var(--ease);
}
.channel__link:hover { border-bottom-color: var(--c-accent-500); }

/* Fundadores del Board */
.founder {
  text-align: center;
  padding: var(--sp-md) var(--sp-sm);
}
.founder__initials {
  display: grid;
  place-items: center;
  width: 52px;
  aspect-ratio: 1;
  margin: 0 auto var(--sp-2xs);
  border: 1px solid var(--c-border-accent);
  border-radius: 50%;
  font-family: var(--font-serif);
  font-size: var(--fs-sm);
  color: var(--c-accent-300);
}
.founder__name { font-family: var(--font-serif); font-size: var(--fs-sm); }
.founder__country { font-size: var(--fs-2xs); color: var(--c-text-muted); margin-top: var(--sp-3xs); }
.founder--self { border: 1px solid var(--c-border-accent); border-radius: var(--radius-md); background: var(--c-surface); }

/* ---------------------------------------------------------------------------
   FOOTER
   ------------------------------------------------------------------------- */
.site-footer {
  background: var(--c-elevated);
  padding-block: var(--sp-3xl) var(--sp-lg);
}
.site-footer__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
  gap: var(--sp-xl);
}
/* h3 y no h4 a propósito: el footer viene después de secciones con h2, y
   saltar de h2 a h4 rompe la jerarquía para lectores de pantalla. */
.site-footer h3 {
  font-family: var(--font-sans);
  font-size: var(--fs-2xs);
  font-weight: 400;
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--c-accent-300);
  margin-bottom: var(--sp-md);
}
.site-footer a,
.site-footer p {
  display: block;
  color: var(--c-text-muted);
  font-size: var(--fs-sm);
  margin-bottom: var(--sp-xs);
  max-width: none;
}
.site-footer a { transition: color var(--dur-base) var(--ease); }
.site-footer a:hover { color: var(--c-accent-300); }
.site-footer__tagline {
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  letter-spacing: var(--ls-wide);
  color: var(--c-accent-400) !important;
}
.site-footer__legal {
  margin-top: var(--sp-2xl);
  padding-top: var(--sp-md);
  border-top: 1px solid var(--c-border);
  text-align: center;
  font-size: var(--fs-2xs);
  color: var(--c-text-faint);
}