/* ==========================================================================
   WEBINAR — landing de registro + confirmacion.  Scope: .wb-*
   Reutilizable para futuros webinars: nada aca nombra a MEDDICC.

   v1.8.0 — REESCRITO DE CERO sobre la estructura que pidio Carlos:
   dos columnas para toda la pagina. Izquierda el argumento, derecha el
   formulario pegado al viewport durante todo el scroll. En movil una sola
   columna, con el formulario inmediatamente despues del hero y una barra
   fija abajo.

   Reglas que manda DESIGN.md y que esta hoja respeta:
   - Sin cards por defecto. Tipo + espacio, no cajas. La unica caja es el
     panel del formulario, que SI es un objeto aparte.
   - Sin iconos. Ni checks, ni pictogramas, ni emoji. El orden lo llevan los
     numerales mono.
   - Presupuesto de filetes: un filete horizontal significa que empieza una
     seccion. Nada mas. Excepcion unica y declarada: el separador ENTRE
     preguntas del acordeon.
   - Botones mono, uppercase, 0.08em, radio 2px, relleno tinta, hover azul.
   - Azul solo donde vive la energia de "unlock" y el dato del lector.
   - Sin gradientes, sin sombras decorativas, sin grillas de cards iguales.
   ========================================================================== */

.wb-page { background: var(--bg-base); }

/* Ancho compartido con el resto del sitio, para las paginas que no usan la
   grilla de dos columnas (la confirmacion). */
.wb-shell {
  width: min(100%, var(--container-max));
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

/* Telemetria: la etiqueta mono que abre un bloque. */
.wb-tele {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 0;
}

/* ==========================================================================
   1. LA GRILLA DE LA PAGINA
   El formulario vive en la columna derecha y es sticky: se despega del hero
   y acompana al lector hasta el pie. Para que sticky funcione, la columna
   ocupa las dos filas de la grilla (hero y flujo) y se ancla arriba.
   ========================================================================== */

.wb-main {
  width: min(100%, var(--container-max));
  margin-inline: auto;
  padding-inline: var(--container-pad);
  /* El .site-header es fixed y en movil mide ~90px: el hero se despeja solo. */
  padding-block: 7.25rem clamp(3rem, 2rem + 4vw, 5rem);
  display: grid;
  gap: clamp(2.5rem, 1.5rem + 3vw, 3.5rem);
}

/* Movil: la barra fija de abajo no puede tapar el final de la pagina. */
@media (max-width: 67.99rem) {
  .wb-main { padding-bottom: 6.5rem; }
}

@media (min-width: 68rem) {
  .wb-main {
    padding-top: 9rem;
    grid-template-columns: minmax(0, 1fr) clamp(20rem, 27vw, 23.5rem);
    column-gap: clamp(2.5rem, 1rem + 4vw, 5rem);
    row-gap: 0;
    align-items: start;
  }
  .wb-hero { grid-column: 1; grid-row: 1; }
  .wb-flow { grid-column: 1; grid-row: 2; }
  .wb-rail {
    grid-column: 2;
    grid-row: 1 / span 2;
    align-self: start;
    position: sticky;
    top: 6.5rem;
    /* Si el panel fuera mas alto que la pantalla, sticky clavaria su borde
       de arriba y el boton quedaria inalcanzable. Con esto el panel scrolea
       por dentro; cuando entra entero, no aparece ninguna barra. */
    max-height: calc(100dvh - 8.5rem);
    overflow-y: auto;
    scrollbar-width: thin;
    overscroll-behavior: contain;
  }
}

/* Ancla del salto desde la barra movil. */
.wb-rail { scroll-margin-top: 5.5rem; }

/* El unico filete de la pagina que no abre una seccion numerada: cierra el
   hero y abre el cuerpo. */
.wb-flow {
  min-width: 0;
  border-top: var(--border-hairline);
}

/* ==========================================================================
   2. HERO
   ========================================================================== */

/* --- Lockup de co-branding, arriba de todo ------------------------------ */

.wb-lockup {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: clamp(2rem, 1rem + 2vw, 2.75rem);
}

.wb-lockup__logo { display: block; width: auto; height: 24px; }

.wb-lockup__partner {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
}

/* El PNG que publica Meddicc Score trae fondo navy opaco, sin canal alfa.
   Se trata como badge para que lea deliberado y no como un recorte fallado.
   PENDIENTE: pedirle a David el SVG transparente y sacar la caja. */
.wb-lockup__partner img {
  display: block;
  height: 26px;
  width: auto;
  border-radius: 3px;
}

.wb-lockup__partner-name {
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--ink);
  white-space: nowrap;
}

.wb-lockup__x {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--text-muted);
}

/* --- Eyebrow, titular, bajada ------------------------------------------- */

.wb-eyebrow {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--accent-alt);
  margin: 0 0 var(--space-3);
}

.wb-eyebrow__sep { color: var(--text-muted); margin-inline: 0.2rem; }

/* El titular promete el resultado, no el nombre de la sesion.
   Azul y con aire: el tracking negativo fuerte lo dejaba comprimido. */
.wb-hero__title {
  font-size: clamp(2.15rem, 1.2rem + 3.1vw, 3.55rem);
  line-height: 1.06;
  letter-spacing: -0.005em;
  word-spacing: 0.08em;
  color: var(--accent);
  font-weight: 600;
  margin: 0;
  max-width: 19ch;
  text-wrap: balance;
}

.wb-hero__lead {
  font-size: var(--fs-lead);
  line-height: 1.45;
  letter-spacing: -0.015em;
  color: var(--text-primary);
  margin: var(--space-3) 0 0;
  max-width: 52ch;
}

/* --- Cuando ------------------------------------------------------------
   Etiqueta mono a la izquierda, dato a la derecha. Sin iconos y sin filetes:
   las filas se separan por aire.
   ---------------------------------------------------------------------- */

.wb-when {
  margin: clamp(2rem, 1rem + 2vw, 2.5rem) 0 0;
  display: grid;
  gap: 0.75rem;
}

.wb-when__row {
  display: grid;
  grid-template-columns: 5rem minmax(0, 1fr);
  gap: 0 var(--space-2);
  align-items: baseline;
}

.wb-when dt {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-alt);
}

.wb-when dd {
  margin: 0;
  font-size: 1.0625rem;
  line-height: 1.5;
  color: var(--ink);
  letter-spacing: -0.01em;
}

/* Los cuatro husos, en un renglon. */
.wb-zones {
  display: flex;
  flex-wrap: wrap;
  gap: 0.15rem 1.15rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.wb-zone {
  font-family: var(--font-mono);
  font-size: 0.86rem;
  letter-spacing: 0;
  white-space: nowrap;
}

.wb-zone__key {
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.wb-zone__time { font-weight: 500; color: var(--ink); }

/* La fila del lector: su huso, resuelto por JS. Azul, porque mide AL lector. */
.wb-zone.is-local .wb-zone__key,
.wb-zone.is-local .wb-zone__time { color: var(--accent); }

.wb-localzone {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  line-height: 1.5;
  margin-top: 0.5rem;
  min-height: 1.1em;
}

.wb-localzone b { color: var(--accent); font-weight: 500; }

/* --- Quienes lo dan ----------------------------------------------------- */

.wb-hosts { margin-top: clamp(2rem, 1rem + 2vw, 2.5rem); }

.wb-hosts .wb-tele { color: var(--accent-alt); }

.wb-hosts__list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3) clamp(1.5rem, 1rem + 2vw, 3rem);
  list-style: none;
  margin: 0.85rem 0 0;
  padding: 0;
}

.wb-host {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  grid-template-rows: auto auto;
  column-gap: 0.7rem;
  align-items: center;
}

.wb-host__photo {
  grid-row: 1 / span 2;
  display: block;
  width: 48px;
  height: 48px;
  object-fit: cover;
  border-radius: var(--radius);
  background: var(--bg-raised);
  filter: grayscale(1);
  transition: filter var(--dur-base) var(--ease-out);
}

.wb-host:hover .wb-host__photo { filter: grayscale(0); }

.wb-host__name {
  align-self: end;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--ink);
  line-height: 1.2;
}

.wb-host__role {
  align-self: start;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-top: 0.3rem;
}

/* --- Para quien es ------------------------------------------------------ */

.wb-for {
  margin: clamp(2rem, 1rem + 2vw, 2.5rem) 0 0;
  font-size: 0.95rem;
  line-height: 1.62;
  color: var(--text-muted);
  max-width: 62ch;
}

/* ==========================================================================
   3. EL PANEL DEL FORMULARIO
   Markup nativo de Zoho (.zf-*) re-estilado. La form.css de Zoho NO se
   carga: es un reset global que aplastaria la pagina.
   ========================================================================== */

.wb-panel {
  position: relative;
  background: var(--bg-raised);
  border: 1px solid var(--line-strong);
  padding: clamp(1.35rem, 1rem + 1.2vw, 1.85rem);
}

/* Marcas de esquina, como el HUD de la home. Dos pseudo-elementos cubren
   las cuatro esquinas con bordes opuestos. */
.wb-panel::before,
.wb-panel::after {
  content: '';
  position: absolute;
  width: 9px;
  height: 9px;
  border: 1px solid var(--ink);
  pointer-events: none;
}

.wb-panel::before { top: 0; left: 0; border-right: 0; border-bottom: 0; }
.wb-panel::after { bottom: 0; right: 0; border-left: 0; border-top: 0; }

.wb-panel__head { margin-bottom: var(--space-3); }

.wb-panel__title {
  font-size: 1.4rem;
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.05;
  color: var(--ink);
  margin: 0 0 0.45rem;
}

.wb-panel__meta {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 0;
}

.wb-panel form { margin: 0; }

/* Zoho envuelve cada campo en .zf-tempFrmWrapper. */
.wb-panel .zf-tempFrmWrapper { margin-bottom: 1.75rem; }

.wb-panel .zf-labelName {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.64rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 0.45rem;
  transition: color var(--dur-fast) var(--ease-out);
}

.wb-panel .zf-tempFrmWrapper:focus-within .zf-labelName { color: var(--accent); }

.wb-panel .zf-important { color: var(--accent-alt); margin-left: 0.2rem; }

.wb-panel .zf-nameWrapper {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-2);
}

/* Campos con linea inferior, no cajas: la pagina no usa cajas. */
.wb-panel input[type="text"] {
  display: block;
  width: 100%;
  box-sizing: border-box;
  font-family: var(--font-sans);
  font-size: 1rem;
  color: var(--ink);
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--line-strong);
  border-radius: 0;
  padding: 0.55rem 0.1rem;
  min-height: 44px;
  transition: border-color var(--dur-fast) var(--ease-out);
}

.wb-panel input::placeholder { color: var(--text-muted); }

.wb-panel input[type="text"]:hover { border-bottom-color: var(--text-muted); }

.wb-panel input[type="text"]:focus {
  outline: none;
  border-bottom-color: var(--accent);
  box-shadow: 0 1px 0 0 var(--accent);
}

.wb-panel .zf-instruction {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 0.45rem 0 0;
}

.wb-panel .zf-errorMessage {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.06em;
  color: var(--accent-alt);
  margin: 0.45rem 0 0;
}

/* --- Nota de campo -------------------------------------------------------
   La regla del email corporativo, explicada donde se decide. El resumen
   queda siempre a la vista; el detalle aparece al pasar el puntero o al
   llegar con el teclado. Un <button> y no un span: el teclado tiene que
   poder enfocarlo, y en tactil un toque lo abre.

   La etiqueta cierra antes del hint (un <button> dentro de un <label> hace
   que el clic enfoque el campo). Se vuelven a juntar en un renglon aca.
   ------------------------------------------------------------------------ */

.wb-panel .zf-labelName:has(+ .wb-hint) { display: inline-block; margin-bottom: 0; }

.wb-hint {
  position: relative;
  display: inline-block;
  margin-left: 0.45rem;
  margin-bottom: 0.45rem;
}

.wb-hint__trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 15px;
  height: 15px;
  padding: 0;
  font-family: var(--font-mono);
  font-size: 0.6rem;
  font-weight: 500;
  line-height: 1;
  color: var(--accent-alt);
  background: transparent;
  border: 1px solid var(--accent-alt);
  border-radius: 50%;
  cursor: help;
  vertical-align: 0.05em;
  transition: color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out);
}

.wb-hint__trigger:hover,
.wb-hint__trigger:focus-visible {
  color: var(--accent);
  border-color: var(--accent);
}

.wb-hint__trigger:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.wb-hint__body {
  position: absolute;
  left: 0;
  bottom: calc(100% + 0.6rem);
  z-index: 2;
  width: max-content;
  max-width: 15.5rem;
  padding: 0.7rem 0.8rem;
  background: var(--ink);
  color: var(--text-inverse);
  border-radius: var(--radius);
  font-family: var(--font-sans);
  font-size: 0.78rem;
  line-height: 1.5;
  letter-spacing: 0;
  text-transform: none;
  opacity: 0;
  visibility: hidden;
  transform: translate(-0.4rem, 4px);
  transition: opacity var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out),
              visibility var(--dur-fast);
}

/* Punta del globo. */
.wb-hint__body::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 0.8rem;
  border: 4px solid transparent;
  border-top-color: var(--ink);
}

.wb-hint:hover .wb-hint__body,
.wb-hint:focus-within .wb-hint__body {
  opacity: 1;
  visibility: visible;
  transform: translate(-0.4rem, 0);
}

/* En pantallas angostas el globo se ancla al campo, no al disparador, para
   que no se salga por el costado. */
@media (max-width: 30rem) {
  .wb-hint { position: static; }
  .wb-hint__body { left: 0; right: 0; width: auto; max-width: none; transform: translate(0, 4px); }
  .wb-hint__body::after { display: none; }
  .wb-hint:hover .wb-hint__body,
  .wb-hint:focus-within .wb-hint__body { transform: translate(0, 0); }
}

/* --- Consentimiento: obligatorio y sin marcar por defecto ---------------- */

.wb-consent {
  display: grid;
  grid-template-columns: 1.15rem minmax(0, 1fr);
  gap: 0.7rem;
  align-items: start;
  margin: var(--space-3) 0 var(--space-3);
}

.wb-consent input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 1.15rem;
  height: 1.15rem;
  margin: 0.05rem 0 0;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--bg-base);
  cursor: pointer;
  position: relative;
  flex-shrink: 0;
  transition: background var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out);
}

.wb-consent input[type="checkbox"]:hover { border-color: var(--text-muted); }

.wb-consent input[type="checkbox"]:checked {
  background: var(--accent);
  border-color: var(--accent);
}

.wb-consent input[type="checkbox"]:checked::after {
  content: '';
  position: absolute;
  left: 0.36rem;
  top: 0.11rem;
  width: 0.28rem;
  height: 0.58rem;
  border: solid var(--bg-raised);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.wb-consent input[type="checkbox"]:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.wb-consent label {
  font-size: 0.78rem;
  line-height: 1.5;
  color: var(--text-muted);
  cursor: pointer;
}

.wb-consent a { color: var(--accent); text-decoration: underline; }

/* ==========================================================================
   4. CTA
   El boton vive en Assets/css/cta-cryptex.css (.cx-*), que esta pagina
   carga aparte. Aca solo queda donde se PONE, nunca como se ve.
   ========================================================================== */

/* El CTA repetido dentro del cuerpo. No se estira a todo el ancho: es una
   puerta, no una banda. */
.wb-inline-cta {
  margin-top: clamp(2rem, 1rem + 2vw, 2.75rem);
  max-width: 21rem;
}

/* ==========================================================================
   5. SECCIONES DEL CUERPO
   ========================================================================== */

.wb-section { padding-block: clamp(2.25rem, 1.5rem + 2.6vw, 3.5rem); }

/* Unico filete permitido: empieza una seccion. */
.wb-section + .wb-section { border-top: var(--border-hairline); }

.wb-head { margin-bottom: clamp(1.5rem, 1rem + 1.4vw, 2.25rem); }

/* El numeral cuelga en su propio renglon: asi el titular y el cuerpo
   comparten un unico borde izquierdo. */
.wb-head__num {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  color: var(--accent-alt);
  margin-bottom: 0.8rem;
}

.wb-h2 {
  font-size: clamp(1.55rem, 1.1rem + 1.5vw, 2.3rem);
  line-height: 1.0;
  letter-spacing: -0.035em;
  font-weight: 600;
  color: var(--ink);
  margin: 0;
  max-width: 24ch;
  text-wrap: balance;
}

/* La palabra que el titular pone a prueba, en azul. */
.wb-h2 em { font-style: normal; color: var(--accent); }

/* --- 01 · La respuesta (capa AEO) ---------------------------------------
   Es el segundo momento tipografico de la pagina despues del H1, asi que lo
   carga el tamano, no un adorno. Nada de filete lateral de color.
   ---------------------------------------------------------------------- */

.wb-answer p {
  font-size: clamp(1.12rem, 1rem + 0.55vw, 1.38rem);
  line-height: 1.5;
  letter-spacing: -0.018em;
  color: var(--ink);
  margin: 0;
  max-width: 58ch;
  text-wrap: pretty;
}

/* Las tres piezas, en un renglon: hacen visible el "three things" sin tener
   que anunciarlo, y es el unico lugar donde el azul cuenta algo. */
.wb-mech {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) clamp(1.5rem, 1rem + 2vw, 2.75rem);
  list-style: none;
  margin: clamp(1.75rem, 1rem + 1.5vw, 2.25rem) 0 0;
  padding: 0;
}

.wb-mech li {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
}

.wb-mech__n {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  color: var(--accent);
}

.wb-mech__t {
  font-size: 1.05rem;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--ink);
  line-height: 1.25;
}

/* --- 02 · Que vas a ver -------------------------------------------------
   Filas con el numeral colgando en mono. Nada de tres cards identicas:
   eso esta baneado.
   ---------------------------------------------------------------------- */

.wb-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-4);
}

.wb-list li {
  display: grid;
  /* 4rem + 1rem = la MISMA sangria colgada que la agenda y los speakers.
     Tres sangrias distintas leian como tres alineaciones fallidas. */
  grid-template-columns: 4rem minmax(0, 1fr);
  gap: var(--space-2);
  align-items: baseline;
}

.wb-list__n {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  color: var(--text-muted);
}

.wb-list p {
  font-size: 1.0625rem;
  line-height: 1.55;
  color: var(--text-primary);
  margin: 0;
  max-width: 56ch;
}

/* --- Captura de producto ------------------------------------------------ */

.wb-shot { margin: clamp(2.25rem, 1rem + 3vw, 3.25rem) 0 0; }

/* Sin marco alrededor de la figura: el pie mono ya la anuncia. */
.wb-shot img {
  display: block;
  width: 100%;
  height: auto;
}

.wb-shot figcaption {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-top: 0.8rem;
}

.wb-shot figcaption b {
  color: var(--accent-alt);
  font-weight: 500;
}

/* --- 03 · Agenda --------------------------------------------------------
   Registro de tiempos: el minuto en mono a la izquierda, el bloque a la
   derecha y el orador debajo. Sin filete por fila: las separa el aire.
   ---------------------------------------------------------------------- */

.wb-agenda {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-3);
}

.wb-agenda__row {
  display: grid;
  grid-template-columns: 4rem minmax(0, 1fr);
  gap: 0 var(--space-2);
  align-items: baseline;
  transition: transform var(--dur-base) var(--ease-out);
}

.wb-agenda__row:hover { transform: translate3d(4px, 0, 0); }

.wb-agenda__time {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--text-muted);
  letter-spacing: 0.06em;
  font-variant-numeric: tabular-nums;
}

.wb-agenda__what {
  font-size: 1.0625rem;
  line-height: 1.45;
  color: var(--ink);
  letter-spacing: -0.01em;
}

.wb-agenda__who {
  grid-column: 2;
  font-family: var(--font-mono);
  font-size: 0.64rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-top: 0.35rem;
  opacity: 0.8;
  transition: opacity var(--dur-fast) var(--ease-out);
}

.wb-agenda__row:hover .wb-agenda__who { opacity: 1; }

/* La demo en vivo: el unico momento azul de la agenda. */
.wb-agenda__row--live .wb-agenda__time { color: var(--accent); }
.wb-agenda__row--live .wb-agenda__what { font-weight: 500; }

.wb-tag {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.58rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--bg-raised);
  background: var(--accent);
  border-radius: var(--radius);
  padding: 0.18rem 0.4rem;
  margin-left: 0.5rem;
  vertical-align: 0.1em;
}

/* Marcador vivo delante del tag: tres puntos de vida en toda la pagina, y
   ninguno cuesta layout. */
.wb-agenda__row--live .wb-tag::before {
  content: '';
  display: inline-block;
  width: 5px;
  height: 5px;
  margin-right: 0.45em;
  vertical-align: 0.06em;
  background: var(--bg-raised);
  animation: wb-armed 3.2s var(--ease-out) infinite;
}

@keyframes wb-armed { 0%, 100% { opacity: 1; } 50% { opacity: 0.25; } }

.wb-note {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  line-height: 1.6;
  margin: var(--space-4) 0 0;
  max-width: 60ch;
}

/* --- 04 · Speakers ------------------------------------------------------
   Dos registros apilados, no dos cards. La foto cuelga a la izquierda y la
   bio se alinea con el nombre.
   ---------------------------------------------------------------------- */

.wb-speakers { display: grid; gap: clamp(2rem, 1rem + 2vw, 2.75rem); }

.wb-speaker__head {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
}

.wb-speaker__photo {
  display: block;
  width: 64px;
  height: 64px;
  object-fit: cover;
  flex-shrink: 0;
  border-radius: var(--radius);
  filter: grayscale(1);
  background: var(--bg-raised);
  transition: filter var(--dur-base) var(--ease-out);
}

.wb-speaker:hover .wb-speaker__photo { filter: grayscale(0); }

.wb-speaker__name {
  font-size: 1.2rem;
  font-weight: 600;
  letter-spacing: -0.025em;
  color: var(--ink);
  margin: 0 0 0.3rem;
  line-height: 1.1;
}

.wb-speaker__role {
  font-family: var(--font-mono);
  font-size: 0.64rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 0;
}

.wb-speaker__bio {
  font-size: 1.0625rem;
  line-height: 1.58;
  color: var(--text-primary);
  margin: 0;
  max-width: 62ch;
}

/* La bio arranca donde arranca el nombre, no debajo de la foto. */
@media (min-width: 40rem) {
  .wb-speaker__bio { padding-left: calc(64px + var(--space-2)); }
}

/* --- 05 · FAQ, acordeon con <details> -----------------------------------
   Nativo a proposito: accesible por teclado sin JS, y el texto de las
   respuestas queda en el HTML crudo aunque el bloque este colapsado, que es
   lo que exige la capa AEO. Colapsar no oculta; inyectar por JS si.

   Excepcion declarada al presupuesto de filetes: el separador ENTRE
   preguntas. Sin el no hay acordeon legible.
   ---------------------------------------------------------------------- */

.wb-faq__item + .wb-faq__item { border-top: var(--border-hairline); }

.wb-faq__q {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2);
  list-style: none;
  cursor: pointer;
  padding-block: var(--space-3);
  font-size: 1.0625rem;
  font-weight: 500;
  letter-spacing: -0.015em;
  color: var(--ink);
  transition: color var(--dur-fast) var(--ease-out);
}

/* Saca el triangulo nativo en Safari y en Chrome. */
.wb-faq__q::-webkit-details-marker { display: none; }

.wb-faq__q:hover { color: var(--accent); }

.wb-faq__q:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}

.wb-faq__q > span {
  max-width: 52ch;
  display: inline-block;
  transition: transform var(--dur-fast) var(--ease-out);
}

.wb-faq__q:hover > span { transform: translate3d(3px, 0, 0); }

/* Signo mas que gira a menos al abrir. Solo transform, nunca layout. */
.wb-faq__sign {
  position: relative;
  flex-shrink: 0;
  width: 11px;
  height: 11px;
  margin-top: 0.35rem;
}

.wb-faq__sign::before,
.wb-faq__sign::after {
  content: '';
  position: absolute;
  left: 0;
  top: 5px;
  width: 11px;
  height: 1px;
  background: var(--accent-alt);
  transition: transform var(--dur-base) var(--ease-out),
              background var(--dur-fast) var(--ease-out);
}

.wb-faq__sign::after { transform: rotate(90deg); }

.wb-faq__item[open] .wb-faq__sign::after { transform: rotate(0deg); }

.wb-faq__item[open] .wb-faq__q { color: var(--accent); }

.wb-faq__a {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--text-primary);
  margin: 0 0 var(--space-3);
  max-width: 62ch;
  padding-right: var(--space-3);
}

.wb-faq__a a { color: var(--accent); text-decoration: underline; }

@keyframes wb-faq-in { from { opacity: 0; transform: translate3d(0, -4px, 0); } to { opacity: 1; transform: none; } }
.wb-js .wb-faq__item[open] .wb-faq__a { animation: wb-faq-in var(--dur-base) var(--ease-out) both; }

/* ==========================================================================
   6. BARRA FIJA (movil)
   Arriba de 68rem no hace falta: el formulario ya esta fijo a la derecha.
   ========================================================================== */

.wb-sticky {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: var(--z-header);
  display: none;
  gap: var(--space-2);
  align-items: center;
  justify-content: space-between;
  background: var(--bg-raised);
  border-top: 1px solid var(--line-strong);
  padding: 0.7rem var(--container-pad);
  padding-bottom: calc(0.7rem + env(safe-area-inset-bottom, 0px));
  transition: transform var(--dur-base) var(--ease-out);
}

/* Arranca visible: sin JS queda igualmente a la vista, no escondida. El JS
   solo la estaciona cuando el formulario esta en pantalla. */
@media (max-width: 67.99rem) {
  .wb-sticky { display: flex; transform: translateY(0); }
  .wb-sticky.is-parked { transform: translateY(110%); }
}

.wb-sticky__meta { min-width: 0; }

.wb-sticky__date {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 0.2rem;
}

.wb-sticky__time {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--ink);
  letter-spacing: 0.02em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}


/* ==========================================================================
   7. PAGINA DE CONFIRMACION
   ========================================================================== */

.wb-confirm { padding-block: clamp(6.5rem, 4rem + 6vw, 10rem) clamp(4rem, 2rem + 6vw, 8rem); }

.wb-confirm__title {
  font-size: var(--fs-h1);
  line-height: 0.94;
  letter-spacing: -0.04em;
  font-weight: 600;
  color: var(--ink);
  margin: 0 0 var(--space-3);
  max-width: 14ch;
}

.wb-confirm .wb-body p {
  font-size: var(--fs-lead);
  line-height: 1.5;
  color: var(--text-primary);
  margin: 0;
  max-width: 52ch;
}

.wb-confirm__grid {
  display: grid;
  gap: clamp(2rem, 1rem + 4vw, 4rem);
  margin-top: clamp(2.5rem, 1rem + 4vw, 4rem);
  padding-top: clamp(2.5rem, 1rem + 4vw, 4rem);
  border-top: var(--border-hairline);
}

@media (min-width: 48rem) {
  .wb-confirm__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.wb-confirm__block-title {
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 0 0 var(--space-2);
}

.wb-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

/* Boton secundario: mono, contorno, sin relleno. */
.wb-ghost {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink);
  background: transparent;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  padding: 0.75rem 0.95rem;
  min-height: 44px;
  cursor: pointer;
  text-decoration: none;
  transition: border-color var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out);
}

.wb-ghost:hover,
.wb-ghost:focus-visible { border-color: var(--accent); color: var(--accent); }
.wb-ghost:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ==========================================================================
   8. MOVIMIENTO
   Todo el estado oculto cuelga de .wb-js, que pone un script inline en el
   <head>. Sin JS la pagina se ve completa y estatica, nunca en blanco.
   ========================================================================== */

.wb-page { --wb-rise: 18px; --wb-slide: 10px; }

.wb-js [data-wb-reveal],
.wb-js [data-wb-item] {
  opacity: 0;
  transform: translate3d(0, var(--wb-rise), 0);
  transition: opacity var(--dur-slow) var(--ease-out),
              transform var(--dur-slow) var(--ease-out);
  transition-delay: var(--wb-d, 0s);
}

.wb-js [data-wb-reveal]:not(.is-in),
.wb-js [data-wb-item]:not(.is-in) { will-change: opacity, transform; }

.wb-js [data-wb-reveal].is-in,
.wb-js [data-wb-item].is-in { opacity: 1; transform: none; will-change: auto; }

.wb-js [data-wb-reveal="fade"],
.wb-js [data-wb-item="fade"] { transform: none; }

.wb-js [data-wb-reveal="slide"],
.wb-js [data-wb-item="slide"] { transform: translate3d(calc(var(--wb-slide) * -1), 0, 0); }

/* --- Arranque del hero, por tiempo y no por scroll ----------------------- */

@keyframes wb-in      { from { opacity: 0; transform: translate3d(0, var(--wb-rise), 0); } to { opacity: 1; transform: none; } }
@keyframes wb-in-sm   { from { opacity: 0; transform: translate3d(0, 8px, 0); }           to { opacity: 1; transform: none; } }
@keyframes wb-in-soft { from { opacity: 0; }                                              to { opacity: 1; } }
@keyframes wb-mark-in { from { opacity: 0; transform: scale(0.25); }                      to { opacity: 1; transform: none; } }

.wb-js .wb-lockup       { animation: wb-in-soft var(--dur-base) var(--ease-out) 0.05s both; }
.wb-js .wb-eyebrow      { animation: wb-in-soft var(--dur-base) var(--ease-out) 0.12s both; }
.wb-js .wb-hero__title  { animation: wb-in      var(--dur-slow) var(--ease-out) 0.18s both; }
.wb-js .wb-hero__lead   { animation: wb-in-sm   var(--dur-slow) var(--ease-out) 0.34s both; }

.wb-js .wb-when__row { animation: wb-in-sm var(--dur-base) var(--ease-out) both; }
.wb-js .wb-when__row:nth-child(1) { animation-delay: 0.46s; }
.wb-js .wb-when__row:nth-child(2) { animation-delay: 0.53s; }

.wb-js .wb-hosts { animation: wb-in-soft var(--dur-base) var(--ease-out) 0.68s both; }
.wb-js .wb-for   { animation: wb-in-soft var(--dur-base) var(--ease-out) 0.76s both; }

/* El panel entra con el hero: es lo primero que el lector tiene que ver
   entero, asi que no espera a ninguna cascada. */
.wb-js .wb-panel { animation: wb-in-soft var(--dur-base) var(--ease-out) 0.22s both; }

.wb-js .wb-panel::before,
.wb-js .wb-panel::after { animation: wb-mark-in var(--dur-base) var(--ease-out) 0.40s both; }
.wb-js .wb-panel::before { transform-origin: top left; }
.wb-js .wb-panel::after  { transform-origin: bottom right; }

/* El quinto anillo: el huso del lector, que webinar.js resuelve async. */
.wb-js .wb-localzone {
  opacity: 0;
  transform: translate3d(0, 6px, 0);
  transition: opacity var(--dur-base) var(--ease-out),
              transform var(--dur-base) var(--ease-out);
}
.wb-js .wb-localzone.is-in { opacity: 1; transform: none; }

/* --- Cascada de dos niveles: la fila entra, el dato mono se posa despues -- */

.wb-js .wb-list li .wb-list__n,
.wb-js .wb-agenda__row .wb-agenda__time {
  opacity: 0;
  transition: opacity var(--dur-base) var(--ease-out);
  transition-delay: calc(var(--wb-d, 0s) + 0.14s);
}
.wb-js .wb-list li.is-in .wb-list__n,
.wb-js .wb-agenda__row.is-in .wb-agenda__time { opacity: 1; }

/* ==========================================================================
   9. ACCESIBILIDAD
   ========================================================================== */

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

@media (prefers-reduced-motion: reduce) {
  .wb-js [data-wb-reveal],
  .wb-js [data-wb-item],
  .wb-js .wb-localzone,
  .wb-js .wb-list li .wb-list__n,
  .wb-js .wb-agenda__row .wb-agenda__time {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  .wb-js .wb-lockup,
  .wb-js .wb-eyebrow,
  .wb-js .wb-hero__title,
  .wb-js .wb-hero__lead,
  .wb-js .wb-when__row,
  .wb-js .wb-hosts,
  .wb-js .wb-for,
  .wb-js .wb-panel,
  .wb-js .wb-panel::before,
  .wb-js .wb-panel::after,
  .wb-js .wb-faq__item[open] .wb-faq__a,
  .wb-agenda__row--live .wb-tag::before {
    animation: none !important;
    opacity: 1;
    transform: none;
  }

  .wb-sticky,
  .wb-faq__sign::before,
  .wb-faq__sign::after,
  .wb-agenda__row,
  .wb-agenda__row:hover,
  .wb-speaker__photo,
  .wb-host__photo,
  .wb-faq__q > span { transition: none; transform: none; }
}