/* ══════════════════════════════════════════════════════════
   TEMA TRICOLOR — verde + rojo sobre negro
   Extraído de flayers/finales/redes/magnific_…tCEbChLmZJ.png
   Se carga DESPUÉS de styles.css y solo redefine tokens.
   ══════════════════════════════════════════════════════════ */
:root{
  /* fondos */
  --black:#000000;
  --coal:#040303;
  --forest-deep:#051C13;
  --wine-deep:#210504;
  --forest:#376530;

  /* acentos */
  --green:#3ED84A;
  --green-lit:#6BE86B;
  --red:#F90908;
  --red-lit:#FF5C50;
  --gold:#E69820;

  /* neutros */
  --bone:#F2F0EC;
  --chrome-warm:#C6BDB8;
  --sage:#95A590;
  --muted:#8A857F;

  /* canales RGB de acento: de aquí salen todos los bordes, glows y
     sombras del CSS base. Sin esto, el azul sobrevive en los rgba(). */
  --accent-rgb:62 216 74;     /* verde */
  --accent2-rgb:107 232 107;  /* verde claro */
  --urgent-rgb:249 9 8;       /* rojo */
  --urgent2-rgb:255 92 80;    /* rojo claro #FF5C50 */
  --surface-rgb:5 28 19;      /* cápsula del menú */
  --warm-rgb:255 92 80;       /* #FF5C50 rojo claro */
  --warm2-rgb:255 138 61;     /* #FF8A3D naranja */

  /* ── remapeo: los tokens del sistema apuntan a la paleta de arriba,
        así todo el CSS existente hereda sin tocar una sola regla ── */
  --night:var(--black);
  --deep:var(--coal);
  --navy:var(--forest-deep);
  --plum:var(--wine-deep);
  --wine:var(--wine-deep);

  --blue:var(--green);        /* primario */
  --blue-lit:var(--green-lit);
  --magenta:var(--red);       /* urgencia */
  --pink-lit:var(--red-lit);
  --violet:#8FDE67;

  --chrome-hi:var(--bone);
  --chrome:var(--chrome-warm);
  --hairline:var(--forest);

  /* tokens heredados del CSS original */
  --ink:var(--black);
  --ink-2:var(--forest-deep);
  --cyan:var(--green);
  --cyan-neon:var(--green-lit);
  --silver:var(--bone);
  --silver-2:var(--muted);
  --white:var(--bone);
  --petrol:var(--forest-deep);
  --card-top:#0A2417;
  --card-bottom:var(--coal);
  --line:rgba(62,216,74,.26);
}

/* superficies: las secciones van en carbón #040303, no en negro puro.
   El negro queda para el lienzo del documento y el hero. */
body{background:var(--black)}
/* ritmo entre secciones: el carbón alterna con un tono levantado.
   #0A0B09 quedaba en luma 3 contra 1 — imperceptible en pantalla. */
:root{--sec-a:#040303;--sec-b:#12140F;--sec-line:rgb(62 216 74 / .18)}
.quote-track blockquote,.ticket-card{background:var(--forest-deep)}
.lead-modal{background:linear-gradient(180deg,rgba(5,28,19,.98),rgba(4,3,3,.99))}
.final-cta{background:
  linear-gradient(180deg,var(--coal) 0,transparent 22%,transparent 74%,var(--coal) 100%),
  url("assets/escenario-azul.jpg") center 48%/cover no-repeat,
  var(--coal);}

/* ── #FF5C50: el rojo claro es el segundo protagonista, no un respaldo ── */
h2 em,.speaker-copy h2 em,.final-cta h2 em{color:var(--green)}   /* los títulos se quedan en verde */
.timeline time{color:var(--red-lit)}
.speaker-stats b{color:var(--red-lit)}
.countdown i{color:var(--red-lit);opacity:.65}
.quote-track blockquote:hover{border-color:var(--red-lit)}
.host .text-link:hover{color:var(--red-lit);border-color:var(--red-lit)}

/* ── hover de las tarjetas: rampa naranja derivada de #FF5C50 ──
   Mismo efecto que el original (gradiente vertical + borde encendido
   + glow interior), pero en cálidos. */
.benefit-grid article{--warm:var(--warm-rgb);--warm-lit:var(--warm2-rgb)}
.benefit-grid article:hover{
  /* el tramo medio va opaco a propósito: con stops translúcidos CSS
     interpola color y alfa por separado y el centro se aclaraba,
     tirando el texto a 3.5:1 */
  background:linear-gradient(180deg,
    rgb(var(--warm) / .20) 0,
    rgba(58,17,8,.93) 45%,
    rgba(19,6,3,.98) 100%);
  border-color:rgb(var(--warm-lit) / .52)!important;
  box-shadow:0 12px 35px rgba(0,0,0,.55),
             inset 0 0 26px rgb(var(--warm) / .10);
}
.benefit-grid article:hover .icon{
  color:#FF8A3D;
  text-shadow:0 0 20px rgb(var(--warm) / .55);
}
.benefit-grid article:hover>span{color:rgb(var(--warm-lit) / .20)}
.benefit-grid article:hover h3{color:#FFEDE6}
.benefit-grid article:hover p{color:#D8C6BD}

/* ── “El conferencista”: baño naranja al centro, esquinas al negro ──
   El velo de esquinas va todo en negro con el alfa variando; así se evita
   que CSS interpole color y alfa a la vez, que es lo que aclaraba el tramo
   medio en el hover de las tarjetas.
   El alfa del naranja está topado en .18: por encima de eso el fondo sube
   de 0.0128 de luminancia y --muted (8A857F) cae por debajo de 4.5:1 en los
   textos de 8px de .speaker-stats. Medido, no estimado. */
.speaker{
  background:
    radial-gradient(132% 118% at 50% 42%,
      rgba(0,0,0,0) 0%,rgba(0,0,0,0) 52%,
      rgba(0,0,0,.62) 82%,rgba(0,0,0,.93) 100%),
    radial-gradient(116% 96% at 50% 38%,
      rgb(var(--warm2-rgb) / .18) 0%,
      rgb(var(--warm-rgb) / .11) 44%,
      rgb(var(--warm-rgb) / .04) 72%,
      rgb(var(--warm-rgb) / 0) 100%),
    var(--sec-a);
}
/* el velo del retrato acompaña el cálido; si lo quieres verde otra vez,
   basta borrar esta línea. (.speaker-halo NO se toca: vive en el hero.) */
.portrait-frame:before{background:linear-gradient(125deg,rgb(var(--warm2-rgb) / .14),rgb(var(--warm-rgb) / 0) 48%,rgb(var(--warm-rgb) / .12))}

/* los rgba() que quedaron literales en el tema neón */
.stars{text-shadow:0 0 10px rgba(249,9,8,.45)}
.countdown b{text-shadow:0 0 16px rgba(249,9,8,.30)}
.speaker-halo{background:radial-gradient(circle,rgba(249,9,8,.15),rgba(62,216,74,.10) 40%,transparent 70%)}
.final-cta .button-primary{box-shadow:0 18px 50px rgba(0,0,0,.7),0 0 0 6px rgba(62,216,74,.14),0 0 40px rgba(249,9,8,.24)}
.mobile-ticket{background:var(--green);color:#04140A;box-shadow:0 0 35px 8px rgba(62,216,74,.22)}
.mobile-ticket:hover{background:var(--forest-deep);color:var(--green-lit);border-color:var(--green)}
.lead-modal input:focus,.lead-modal select:focus{border-color:var(--green);box-shadow:0 0 0 2px rgba(62,216,74,.12)}
:focus-visible{outline-color:var(--green)}
.ticket-top b{background:var(--red);color:#120201}   /* 4.9:1 — el rojo está a media luminancia: con texto claro daba 3.6:1 */

/* el hero mantiene su foto pero el velo se vuelve neutro-verde */
.hero{background:
  radial-gradient(ellipse at 74% 46%,rgba(62,216,74,.06) 0,transparent 56%),
  url("assets/hero-pachuca.jpg") 100% bottom/max(1500px,150%) auto no-repeat,
  #000000;}
.hero:before{background:
  linear-gradient(96deg,rgba(0,0,0,.96) 0,rgba(2,6,4,.88) 32%,rgba(2,10,6,.44) 60%,rgba(2,10,6,.12) 100%),
  linear-gradient(0deg,#000 0,rgba(0,0,0,.32) 16%,transparent 38%);}

/* el oro queda reservado al logo: no se usa como color de interfaz */