/* ==========================================================================
   Breeze Lingo · SECCIÓN 01 · Hero
   Prefijo .hero-* / .hero__*. Sin literales: todo desde tokens.css.
   Layout en grid; position:absolute solo para lo que de verdad flota
   (los tres paneles sobre la foto y la nube de fondo).
   ========================================================================== */

/* El hero sube por detrás de la cabecera: el color tiene que llegar al
   borde superior de la ventana, no empezar bajo el navbar. */
.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  margin-top: calc(var(--bz-nav-alto) * -1);
  background: var(--bz-bg);
  padding-block: calc(var(--bz-nav-alto) + var(--bz-section-y))
    calc(var(--bz-section-y) + var(--bz-space-4));
}

/* ---- Nube: cubre la sección entera, detrás de todo ------------------- */
.hero__nube {
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.hero__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--bz-space-10);
  align-items: center;
}

/* ---- Copy ------------------------------------------------------------ */
.hero__titulo {
  font-size: var(--bz-size-display);
  line-height: var(--bz-leading-tight);
  letter-spacing: var(--bz-tracking-tight);
}

.hero__entrada {
  margin-top: var(--bz-space-5);
  max-width: var(--bz-measure-narrow);
  font-size: var(--bz-size-lead);
  line-height: var(--bz-leading-loose);
  color: var(--bz-text);
}

.hero__acciones {
  margin-top: var(--bz-space-8);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--bz-space-6);
}

.hero__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--bz-tap);
  height: var(--bz-space-14);
  padding-inline: var(--bz-space-8);
  border-radius: var(--bz-radius-md);
  background: var(--bz-brand);
  color: var(--bz-ink-deep); /* §11: blanco sobre menta da 1,78:1 */
  font-size: var(--bz-size-body);
  font-weight: var(--bz-weight-semibold);
  box-shadow: var(--bz-shadow-brand);
  transition:
    background var(--bz-dur-hover) var(--bz-ease),
    box-shadow var(--bz-dur-hover) var(--bz-ease),
    transform var(--bz-dur-press) var(--bz-ease);
}

.hero__cta:hover {
  background: var(--bz-brand-hover);
  color: var(--bz-surface); /* sobre rgb(31,142,114) el blanco sí pasa AA */
  box-shadow: var(--bz-shadow-brand-hover);
}

.hero__cta:active {
  background: var(--bz-brand-press);
  color: var(--bz-surface);
  transform: scale(var(--bz-press));
}

/* ---- Prueba social -------------------------------------------------- */
.hero__prueba {
  display: flex;
  align-items: center;
  gap: var(--bz-space-3);
}

.hero__caras {
  display: flex;
}

.hero__caras > li + li {
  margin-left: calc(var(--bz-space-3) * -1);
}

.hero__cara {
  width: var(--bz-space-12);
  height: var(--bz-space-12);
  border-radius: var(--bz-radius-pill);
  object-fit: cover;
  box-shadow: 0 0 0 3px var(--bz-bg);
}

.hero__cara--mas {
  display: grid;
  place-items: center;
  background: var(--bz-accent);
  color: var(--bz-surface);
  font-size: var(--bz-size-xs);
  font-weight: var(--bz-weight-semibold);
}

.hero__prueba-texto {
  font-size: var(--bz-size-xs);
  font-weight: var(--bz-weight-medium);
  line-height: var(--bz-leading-snug);
  color: var(--bz-text);
}

/* ---- Visual --------------------------------------------------------- */
.hero__visual {
  position: relative;
  margin: 0;
  min-height: clamp(340px, 42vw, 540px);
}

.hero__foto {
  width: 100%;
  max-width: var(--bz-panel-foto-w);
  height: auto;
  margin-left: auto;
  object-fit: contain;
}

/* ---- Paneles flotantes ---------------------------------------------- */
.hero__panel {
  position: absolute;
  border-radius: var(--bz-radius-lg);
  background: var(--bz-surface);
  /* Filo claro arriba y proyección abajo: los paneles parecen desprenderse
     de la pantalla, no flotar sueltos sobre el fondo. */
  box-shadow:
    inset 0 1px 0 var(--bz-cristal-filo),
    0 var(--bz-panel-alto) var(--bz-panel-difuso) var(--bz-panel-sombra);
  padding: var(--bz-space-4);
  animation: hero-flota var(--bz-dur-flota-1) var(--bz-ease) infinite;
}

.hero__panel--clase {
  left: 4%;
  top: 18%;
  width: min(206px, 50%);
}

.hero__panel--nivel {
  left: 10%;
  bottom: 16%;
  width: min(220px, 54%);
  animation-duration: var(--bz-dur-flota-2);
  animation-direction: reverse;
}

.hero__panel--coins {
  right: 6%;
  top: 34%;
  display: flex;
  align-items: center;
  gap: var(--bz-space-3);
  background: var(--bz-night);
  animation-duration: var(--bz-dur-flota-3);
  animation-delay: var(--bz-delay-flota);
}

.hero__panel-cabecera {
  display: flex;
  align-items: center;
  gap: var(--bz-space-2);
}

.hero__panel-icono {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: var(--bz-space-8);
  height: var(--bz-space-8);
  border-radius: var(--bz-radius-sm);
}

.hero__panel-icono--menta {
  background: var(--bz-mint-100);
  color: var(--bz-accent);
}

.hero__panel-icono--ambar {
  background: var(--bz-warning);
  color: var(--bz-surface);
}

.hero__panel-icono--redondo {
  border-radius: var(--bz-radius-pill);
  background: var(--bz-warning);
  color: var(--bz-surface);
}

.hero__panel-textos {
  display: grid;
  gap: var(--bz-space-1);
  min-width: 0;
}

.hero__panel-titulo {
  font-family: var(--bz-font-title);
  font-weight: var(--bz-weight-medium);
  font-size: var(--bz-size-2xs);
  color: var(--bz-ink);
}

.hero__panel-meta {
  font-size: calc(var(--bz-size-2xs) - 2px);
  color: var(--bz-text); /* §11: --bz-muted a 9px da 3,07:1 */
}

.hero__panel-pie {
  margin-top: var(--bz-space-3);
  display: flex;
  align-items: center;
  gap: var(--bz-space-3);
}

.hero__caras--mini > li + li {
  margin-left: calc(var(--bz-space-2) * -0.75);
}

.hero__caras--mini .hero__cara {
  width: var(--bz-space-5);
  height: var(--bz-space-5);
  font-size: calc(var(--bz-size-2xs) - 4px);
  box-shadow: 0 0 0 2px var(--bz-surface);
}

.hero__panel-progreso {
  flex: 1;
  min-width: 0;
}

.hero__barra {
  display: block;
  height: var(--bz-space-1);
  border-radius: var(--bz-radius-pill);
  background: var(--bz-border);
  overflow: hidden;
}

.hero__barra--gruesa {
  margin-top: var(--bz-space-3);
  height: calc(var(--bz-space-2) - 1px);
}

/* La barra entra escalando en X: no anima width (§4) */
.hero__barra-relleno {
  display: block;
  width: var(--hero-pct, 0%);
  height: 100%;
  border-radius: var(--bz-radius-pill);
  background: var(--bz-brand);
  transform-origin: left center;
  animation: hero-barra var(--bz-dur-card) var(--bz-ease) both;
}

.hero__barra-relleno--oscuro {
  background: var(--bz-accent);
}

.hero__panel-estado {
  display: block;
  margin-top: var(--bz-space-1);
  text-align: right;
  font-size: calc(var(--bz-size-2xs) - 3px);
  font-weight: var(--bz-weight-medium);
  color: var(--bz-accent);
}

.hero__panel-leyenda {
  margin-top: var(--bz-space-2);
  display: flex;
  justify-content: space-between;
  font-size: calc(var(--bz-size-2xs) - 3px);
  color: var(--bz-text);
}

.hero__panel-dato {
  font-weight: var(--bz-weight-semibold);
  color: var(--bz-accent);
}

.hero__coins-cifra {
  font-family: var(--bz-font-title);
  font-weight: var(--bz-weight-semibold);
  font-size: var(--bz-size-h4);
  line-height: 1;
  color: var(--bz-on-night);
}

.hero__coins-unidad {
  font-size: var(--bz-size-2xs);
  color: var(--bz-on-night-soft);
}

/* ---- Animaciones: solo transform y opacity -------------------------- */
@keyframes hero-flota {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(var(--bz-lift-flota));
  }
}

@keyframes hero-barra {
  from {
    transform: scaleX(0);
  }
  to {
    transform: scaleX(1);
  }
}

/* ---- Cortes: ~880 / 640 / 420 -------------------------------------- */
@media (min-width: 880px) {
  .hero__grid {
    grid-template-columns: minmax(0, 1.04fr) minmax(0, 1fr);
    gap: var(--bz-space-12);
  }
}

@media (max-width: 640px) {
  .hero__acciones {
    gap: var(--bz-space-5);
  }

  .hero__panel--coins {
    top: 12%;
  }
}

@media (max-width: 420px) {
  .hero__cta {
    width: 100%;
  }

  .hero__panel--clase,
  .hero__panel--nivel {
    width: min(206px, 66%);
  }

  .hero__panel--clase {
    left: 0;
    top: 12%;
  }

  .hero__panel--nivel {
    left: 4%;
    bottom: 8%;
  }

  /* El de coins es adorno: en móvil angosto estorba sobre la foto */
  .hero__panel--coins {
    display: none;
  }
}
/* ==========================================================================
   Breeze Lingo · SECCIÓN 02 · Aprende con Breeze
   Prefijo .aprende__*. Sin literales: todo desde tokens.css.
   ========================================================================== */

.aprende {
  background: var(--bz-bg);
  padding-block: var(--bz-section-y);
}

/* ---- Cabecera -------------------------------------------------------- */
.aprende__cabecera {
  text-align: center;
}

.aprende__titulo {
  font-size: var(--bz-size-h2);
  line-height: var(--bz-leading-snug);
}

/* La pastilla del icono va dentro del titular, alineada a la línea base */
.aprende__marca {
  display: inline-grid;
  place-items: center;
  width: calc(var(--bz-space-14) - var(--bz-space-1));
  height: var(--bz-space-10);
  vertical-align: middle;
  border-radius: var(--bz-radius-pill);
  background: var(--bz-brand);
  color: var(--bz-ink-deep);
}

.aprende__entrada {
  margin-inline: auto;
  margin-top: var(--bz-space-4);
  max-width: var(--bz-measure);
  font-size: var(--bz-size-body);
  line-height: var(--bz-leading-loose);
  color: var(--bz-text);
}

/* ---- Pestañas -------------------------------------------------------- */
.aprende__pestanas {
  margin-top: var(--bz-space-6);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--bz-space-3);
}

.aprende__pestana {
  display: inline-flex;
  align-items: center;
  min-height: var(--bz-tap);
  padding-inline: var(--bz-space-6);
  border-radius: var(--bz-radius-lg);
  background: var(--bz-surface);
  box-shadow: var(--bz-ring);
  font-size: var(--bz-size-sm);
  font-weight: var(--bz-weight-semibold);
  color: var(--bz-text);
  white-space: nowrap;
  transition:
    box-shadow var(--bz-dur-hover) var(--bz-ease),
    color var(--bz-dur-hover) var(--bz-ease),
    transform var(--bz-dur-press) var(--bz-ease);
}

.aprende__pestana:hover {
  color: var(--bz-accent);
  box-shadow: inset 0 0 0 1px var(--bz-mint-300);
}

.aprende__pestana:active {
  transform: scale(var(--bz-press));
}

/* El estado no se comunica solo con color: además cambia el peso del anillo */
.aprende__pestana[aria-selected="true"] {
  color: var(--bz-accent);
  box-shadow: var(--bz-ring-brand);
}

/* ---- Cuerpo ---------------------------------------------------------- */
.aprende__cuerpo {
  margin-top: var(--bz-space-6);
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--bz-space-4);
  align-items: stretch;
}

/* Apilada, la figura fija su proporción. En dos columnas se anula: con
   align-items:stretch, un aspect-ratio convertía el alto de la fila en
   ancho (355 × 21/9 = 828 px) e ignoraba el track, y el desbordamiento se
   propagaba a toda la página. */
.aprende__figura {
  aspect-ratio: 21 / 9;
}

.aprende__paneles {
  border-radius: var(--bz-radius-xl);
  background: var(--bz-surface);
  box-shadow: var(--bz-ring), var(--bz-shadow-md);
  padding: var(--bz-space-7);
}

.aprende__panel[hidden] {
  display: none;
}

/* Entrada del panel al cambiar de pestaña */
.aprende__panel:not([hidden]) {
  animation: aprende-entra var(--bz-dur-panel) var(--bz-ease) both;
}

.aprende__panel-titulo {
  font-size: var(--bz-size-h3);
}

.aprende__panel-texto {
  margin-top: var(--bz-space-3);
  max-width: var(--bz-measure-narrow);
  font-size: var(--bz-size-sm);
  line-height: var(--bz-leading-normal);
  color: var(--bz-text);
}

.aprende__rotulo {
  margin-top: var(--bz-space-5);
  font-size: var(--bz-size-xs);
  font-weight: var(--bz-weight-semibold);
  color: var(--bz-ink);
}

.aprende__lista {
  margin-top: var(--bz-space-3);
  display: grid;
  gap: var(--bz-space-3);
}

.aprende__item {
  display: flex;
  align-items: center;
  gap: var(--bz-space-3);
  font-size: var(--bz-size-xs);
  color: var(--bz-text);
}

/* En el Figma el check va suelto, sin pastilla de fondo */
.aprende__check {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: var(--bz-space-6);
  height: var(--bz-space-6);
  color: var(--bz-accent);
}

.aprende__cta {
  margin-top: var(--bz-space-6);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--bz-tap);
  padding-inline: var(--bz-space-6);
  border-radius: var(--bz-radius-pill);
  background: var(--bz-brand);
  color: var(--bz-ink-deep); /* §11 */
  font-size: var(--bz-size-sm);
  font-weight: var(--bz-weight-semibold);
  box-shadow: var(--bz-shadow-brand);
  transition:
    background var(--bz-dur-hover) var(--bz-ease),
    box-shadow var(--bz-dur-hover) var(--bz-ease),
    transform var(--bz-dur-press) var(--bz-ease);
}

.aprende__cta:hover {
  background: var(--bz-brand-hover);
  color: var(--bz-surface);
  box-shadow: var(--bz-shadow-brand-hover);
}

.aprende__cta:active {
  background: var(--bz-brand-press);
  color: var(--bz-surface);
  transform: scale(var(--bz-press));
}

.aprende__cta--linea {
  background: transparent;
  color: var(--bz-accent);
  box-shadow: inset 0 0 0 1.5px var(--bz-accent);
}

.aprende__cta--linea:hover {
  background: var(--bz-mint-100);
  color: var(--bz-accent);
  box-shadow: inset 0 0 0 1.5px var(--bz-accent);
}

/* ---- Figura ---------------------------------------------------------- */
.aprende__figura {
  position: relative;
  margin: 0;
  border-radius: var(--bz-radius-xl);
  overflow: hidden;
}

/* Fuera del flujo: la foto es vertical (1400×2100) y en el flujo su alto
   natural estiraba la fila por encima del panel. Así la figura manda y la
   imagen solo la rellena. */
.aprende__foto {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 30%;
  transition: transform var(--bz-dur-card) var(--bz-ease);
}

.aprende__figura:hover .aprende__foto {
  transform: scale(var(--bz-zoom));
}

@keyframes aprende-entra {
  from {
    opacity: 0;
    transform: translateY(var(--bz-rise));
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* ---- Panel 2 · agenda de Breeze Community --------------------------- */
.aprende__agenda {
  margin-top: var(--bz-space-4);
  display: grid;
  gap: var(--bz-space-2);
}

.aprende__sesion {
  display: flex;
  align-items: center;
  gap: var(--bz-space-4);
  padding: var(--bz-space-3) var(--bz-space-4);
  border-radius: var(--bz-radius-md);
  background: var(--bz-bg);
}

/* La que está en vivo lleva anillo de marca, no solo el badge */
.aprende__sesion--viva {
  background: var(--bz-mint-100);
  box-shadow: var(--bz-ring-brand);
}

.aprende__hora {
  flex-shrink: 0;
  width: var(--bz-col-hora);
  font-family: var(--bz-font-title);
  font-weight: var(--bz-weight-semibold);
  font-size: var(--bz-size-xs);
  color: var(--bz-accent);
}

.aprende__sesion-datos {
  flex: 1;
  min-width: 0;
  display: grid;
  gap: var(--bz-space-1);
}

.aprende__sesion-titulo {
  font-size: var(--bz-size-xs);
  font-weight: var(--bz-weight-semibold);
  color: var(--bz-ink);
}

.aprende__sesion-meta {
  font-size: var(--bz-size-2xs);
  color: var(--bz-text);
}

.aprende__vivo {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: var(--bz-space-2);
  padding: var(--bz-space-1) var(--bz-space-3);
  border-radius: var(--bz-radius-pill);
  background: var(--bz-surface);
  font-size: var(--bz-size-2xs);
  font-weight: var(--bz-weight-semibold);
  color: var(--bz-accent);
  white-space: nowrap;
}

/* El punto queda sólido y late el anillo: un indicador de estado no puede
   apagarse a mitad del ciclo. */
.aprende__punto {
  position: relative;
  flex-shrink: 0;
  display: block;
  width: var(--bz-space-2);
  height: var(--bz-space-2);
  border-radius: var(--bz-radius-pill);
  background: var(--bz-live);
}

.aprende__punto::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--bz-live);
  animation: aprende-pulso var(--bz-dur-pulso) var(--bz-ease) infinite;
}

.aprende__premio {
  flex-shrink: 0;
  padding: var(--bz-space-1) var(--bz-space-3);
  border-radius: var(--bz-radius-pill);
  background: var(--bz-mint-100);
  font-size: var(--bz-size-2xs);
  font-weight: var(--bz-weight-semibold);
  color: var(--bz-accent);
  white-space: nowrap;
}

/* ---- Panel 3 · informe del evaluador -------------------------------- */
.aprende__informe {
  margin-top: var(--bz-space-4);
  padding: var(--bz-space-4);
  border-radius: var(--bz-radius-lg);
  background: var(--bz-bg);
}

.aprende__global {
  display: flex;
  align-items: baseline;
  gap: var(--bz-space-2);
}

.aprende__global-cifra {
  font-family: var(--bz-font-title);
  font-weight: var(--bz-weight-semibold);
  font-size: var(--bz-size-h2-cta);
  line-height: 1;
  color: var(--bz-ink);
}

.aprende__global-sobre {
  font-size: var(--bz-size-xs);
  color: var(--bz-text);
}

.aprende__global-nivel {
  margin-left: auto;
  padding: var(--bz-space-1) var(--bz-space-3);
  border-radius: var(--bz-radius-pill);
  background: var(--bz-mint-100);
  font-family: var(--bz-font-title);
  font-weight: var(--bz-weight-semibold);
  font-size: var(--bz-size-xs);
  color: var(--bz-accent);
}

.aprende__metricas {
  margin-top: var(--bz-space-4);
  display: grid;
  gap: var(--bz-space-2);
}

.aprende__metrica {
  display: flex;
  align-items: center;
  gap: var(--bz-space-3);
}

.aprende__metrica-nombre {
  flex-shrink: 0;
  width: var(--bz-rotulo-metrica);
  font-size: var(--bz-size-2xs);
  color: var(--bz-text);
}

.aprende__riel {
  flex: 1;
  min-width: 0;
  display: block;
  height: var(--bz-space-2);
  border-radius: var(--bz-radius-pill);
  background: var(--bz-riel);
  overflow: hidden;
}

/* Escala en X: no anima width (§4) */
.aprende__relleno {
  display: block;
  width: var(--aprende-pct, 0%);
  height: 100%;
  border-radius: var(--bz-radius-pill);
  background: var(--bz-brand);
  transform-origin: left center;
  /* Entra una vez y se queda: es un dato, no un adorno en bucle */
  animation: aprende-barra var(--bz-dur-card) var(--bz-ease) both;
}

.aprende__relleno--violeta {
  background: var(--bz-violet);
}

.aprende__metrica-dato {
  flex-shrink: 0;
  width: var(--bz-col-dato);
  text-align: right;
  font-size: var(--bz-size-2xs);
  font-weight: var(--bz-weight-semibold);
  color: var(--bz-ink);
}

.aprende__avance {
  margin-top: var(--bz-space-4);
  padding-top: var(--bz-space-3);
  border-top: 1px solid var(--bz-border);
  display: flex;
  align-items: center;
  gap: var(--bz-space-2);
  font-size: var(--bz-size-2xs);
  font-weight: var(--bz-weight-semibold);
  color: var(--bz-accent);
}

.aprende__avance-icono {
  flex-shrink: 0;
  display: grid;
  place-items: center;
}

@keyframes aprende-barra {
  from {
    transform: scaleX(0);
  }
  to {
    transform: scaleX(1);
  }
}

@keyframes aprende-pulso {
  0% {
    transform: scale(1);
    opacity: var(--bz-pulso-op);
  }
  70%,
  100% {
    transform: scale(var(--bz-pulso-escala));
    opacity: 0;
  }
}

/* ---- Cortes: ~880 / 640 / 420 -------------------------------------- */
@media (min-width: 880px) {
  .aprende__cuerpo {
    margin-top: var(--bz-space-8);
    grid-template-columns: minmax(0, 560fr) minmax(0, 581fr);
    gap: var(--bz-space-12);
  }

  /* Acá la fila tiene alto resuelto: la figura iguala al panel hermano y
     pierde su proporción, para no derivar ancho del alto. */
  .aprende__figura {
    align-self: stretch;
    aspect-ratio: auto;
  }
}

@media (max-width: 640px) {
  .aprende__paneles {
    padding: var(--bz-space-6);
  }

  .aprende__foto {
    aspect-ratio: 16 / 10;
  }
}

@media (max-width: 420px) {
  .aprende__pestanas {
    /* Apiladas: a este ancho, en fila quedan cortadas */
    flex-direction: column;
  }

  .aprende__pestana,
  .aprende__cta {
    width: 100%;
    justify-content: center;
  }
}
/* ==========================================================================
   Breeze Lingo · SECCIÓN 03 · Lo que hace distinto a Breeze
   Prefijo .features__*. Sin literales: todo desde tokens.css.
   Las manchas difuminadas se rehacen en CSS (§3): radios asimétricos,
   degradado radial que se desvanece a transparente y deriva lenta.
   Sin mix-blend-mode, para que el border-radius del padre siga recortando.
   ========================================================================== */

.features {
  background: var(--bz-bg);
  padding-block: 0 var(--bz-section-y);
}

.features__caja {
  border-radius: var(--bz-radius-xl);
  background: var(--bz-surface);
  box-shadow: var(--bz-ring);
  padding: clamp(var(--bz-space-6), 4vw, var(--bz-space-14));
}

.features__titulo {
  font-size: var(--bz-size-h2);
  line-height: var(--bz-leading-snug);
}

.features__acento {
  color: var(--bz-accent);
}

/* ---- Bento ----------------------------------------------------------- */
.features__bento {
  margin-top: var(--bz-space-8);
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--bz-space-5);
}

.features__tarjeta {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-radius: var(--bz-radius-xl);
  background: var(--bz-surface);
  box-shadow: var(--bz-ring), var(--bz-shadow-md);
  padding: var(--bz-space-6);
  transition:
    transform var(--bz-dur-card) var(--bz-ease),
    box-shadow var(--bz-dur-card) var(--bz-ease);
}

.features__tarjeta:hover {
  transform: translateY(var(--bz-lift));
  box-shadow: var(--bz-ring), var(--bz-shadow-xl);
}

.features__tarjeta--ia {
  background: var(--bz-night);
  box-shadow: var(--bz-shadow-lg);
}

.features__tarjeta--ia:hover {
  box-shadow: var(--bz-shadow-xl);
}

/* ---- Manchas difuminadas (§3) ---------------------------------------- */
.features__mancha {
  position: absolute;
  z-index: -1;
  display: block;
  width: var(--bz-mancha-size);
  height: var(--bz-mancha-size);
  /* Radios asimétricos: una elipse plana se ve barata */
  border-radius: 58% 42% 47% 53% / 46% 51% 49% 54%;
  filter: blur(var(--bz-blur-mancha));
  animation: features-deriva var(--bz-dur-ambient-1) var(--bz-ease) infinite;
}

.features__mancha--menta {
  left: -10%;
  top: -30%;
  background: radial-gradient(
    circle at 40% 40%,
    color-mix(in srgb, var(--bz-brand) 34%, transparent),
    transparent 68%
  );
}

.features__mancha--noche {
  right: -24%;
  top: -14%;
  background: radial-gradient(
    circle at 50% 50%,
    color-mix(in srgb, var(--bz-brand) 42%, transparent),
    transparent 70%
  );
  animation-duration: var(--bz-dur-ambient-2);
  animation-direction: reverse;
}

/* ---- Contenido de la tarjeta ---------------------------------------- */
.features__icono {
  display: grid;
  place-items: center;
  width: var(--bz-space-12);
  height: var(--bz-space-12);
  border-radius: var(--bz-radius-lg);
  background: var(--bz-mint-100);
  color: var(--bz-accent);
}

.features__icono--noche {
  background: color-mix(in srgb, var(--bz-brand) 22%, transparent);
  color: var(--bz-brand);
}

.features__tarjeta-titulo {
  margin-top: var(--bz-space-4);
  font-family: var(--bz-font-title);
  font-weight: var(--bz-weight-medium);
  font-size: var(--bz-size-h4);
}

.features__tarjeta-titulo--noche {
  color: var(--bz-on-night);
}

.features__tarjeta-texto {
  margin-top: var(--bz-space-3);
  max-width: var(--bz-measure-narrow);
  font-size: var(--bz-size-sm);
  line-height: var(--bz-leading-normal);
  color: var(--bz-text);
}

.features__tarjeta-texto--noche {
  color: var(--bz-on-night-soft);
}

/* ---- Métricas -------------------------------------------------------- */
.features__metricas {
  margin-top: var(--bz-space-5);
  display: grid;
  gap: var(--bz-space-3);
}

.features__metrica {
  display: flex;
  align-items: center;
  gap: var(--bz-space-3);
}

.features__metrica-nombre {
  flex-shrink: 0;
  width: var(--bz-rotulo-w);
  font-size: var(--bz-size-xs);
  color: var(--bz-text);
}

.features__barra {
  flex: 1;
  min-width: var(--bz-space-6);
  display: block;
  height: var(--bz-space-2);
  border-radius: var(--bz-radius-pill);
  background: var(--bz-border);
  overflow: hidden;
}

/* Escala en X: no anima width (§4) */
.features__barra-relleno {
  display: block;
  width: var(--features-pct, 0%);
  height: 100%;
  border-radius: var(--bz-radius-pill);
  background: var(--bz-brand);
  transform-origin: left center;
  animation: features-barra var(--bz-dur-card) var(--bz-ease) both;
}

.features__metrica-dato {
  flex-shrink: 0;
  width: var(--bz-space-10);
  text-align: right;
  font-size: var(--bz-size-xs);
  font-weight: var(--bz-weight-semibold);
  color: var(--bz-ink);
}

/* ---- Packs de coins -------------------------------------------------- */
.features__packs {
  margin-top: var(--bz-space-5);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--bz-space-3);
}

.features__pack {
  padding: var(--bz-space-3);
  border-radius: var(--bz-radius-md);
  background: var(--bz-bg);
  text-align: center;
}

.features__pack-cifra {
  display: block;
  font-family: var(--bz-font-title);
  font-weight: var(--bz-weight-semibold);
  font-size: var(--bz-size-body);
  line-height: 1;
  color: var(--bz-ink);
}

.features__pack-precio {
  display: block;
  margin-top: var(--bz-space-1);
  font-size: var(--bz-size-xs);
  color: var(--bz-text);
}

.features__pack-bonus {
  display: block;
  margin-top: var(--bz-space-1);
  font-size: var(--bz-size-xs);
  font-weight: var(--bz-weight-semibold);
  color: var(--bz-accent);
}

/* ---- Animaciones: solo transform y opacity -------------------------- */
@keyframes features-barra {
  from {
    transform: scaleX(0);
  }
  to {
    transform: scaleX(1);
  }
}

@keyframes features-deriva {
  0% {
    transform: translate3d(0, 0, 0) scale(1) rotate(0deg);
  }
  50% {
    transform: translate3d(var(--bz-drift-x), var(--bz-drift-y), 0)
      scale(var(--bz-drift-scale)) rotate(var(--bz-drift-rot));
  }
  100% {
    transform: translate3d(0, 0, 0) scale(1) rotate(0deg);
  }
}

/* ---- Cortes: ~880 / 640 / 420 (los tres del contrato) -------------- */
@media (min-width: 640px) {
  .features__bento {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-areas:
      "tutores progreso"
      "privacidad progreso"
      "ia coins";
  }

  .features__tarjeta--tutores {
    grid-area: tutores;
  }
  .features__tarjeta--progreso {
    grid-area: progreso;
  }
  .features__tarjeta--privacidad {
    grid-area: privacidad;
  }
  .features__tarjeta--ia {
    grid-area: ia;
  }
  .features__tarjeta--coins {
    grid-area: coins;
  }
}

@media (min-width: 880px) {
  .features__bento {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-areas:
      "tutores tutores progreso"
      "privacidad ia coins";
  }
}

@media (max-width: 420px) {
  .features__packs {
    grid-template-columns: 1fr;
  }

  .features__metrica-nombre {
    width: var(--bz-rotulo-w-sm);
  }
}
/* ==========================================================================
   Breeze Lingo · SECCIÓN 04 · Reconocimientos
   Prefijo .reconocimientos__*. Sin literales: todo desde tokens.css.

   Las cinco manchas del frame llegan como capas con rotación y opacidad.
   Acá se rehacen en CSS (§3): degradado radial que se desvanece a
   transparente, radios asimétricos, filter: blur() y deriva lenta en
   ciclos distintos. Sin mix-blend-mode, para que el radio 46 de la banda
   siga recortando en las cuatro esquinas.
   ========================================================================== */

.reconocimientos {
  background: var(--bz-surface);
  padding-block: var(--bz-section-y);
}

/* ---- La banda oscura ------------------------------------------------- */
.reconocimientos__banda {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-radius: var(--bz-radius-banda);
  /* Del frame: linear-gradient(105.267deg, rgb(11,39,33) 4.6%, rgb(5,16,18) 80.92%) */
  background: linear-gradient(
    var(--bz-angulo-banda),
    var(--bz-night-2) var(--bz-stop-banda-1),
    var(--bz-night-3) var(--bz-stop-banda-2)
  );
  padding: clamp(var(--bz-space-6), 4vw, var(--bz-space-14));
}

/* ---- Manchas --------------------------------------------------------- */
.reconocimientos__mancha {
  position: absolute;
  z-index: -1;
  display: block;
  border-radius: 58% 42% 47% 53% / 46% 51% 49% 54%;
  filter: blur(var(--bz-blur-banda));
  animation: reconocimientos-deriva var(--bz-dur-ambient-1) var(--bz-ease) infinite;
}

/* Las cinco del frame, con su tamaño, giro y opacidad */
.reconocimientos__mancha--1 {
  left: -12%;
  bottom: -8%;
  width: 47.5rem;
  height: 15rem;
  rotate: -18deg;
  background: radial-gradient(
    ellipse at center,
    color-mix(in srgb, var(--bz-brand) 26%, transparent),
    transparent 70%
  );
}

.reconocimientos__mancha--2 {
  right: -8%;
  top: -14%;
  width: 38.75rem;
  height: 11.875rem;
  rotate: 14deg;
  background: radial-gradient(
    ellipse at center,
    color-mix(in srgb, var(--bz-accent) 75%, transparent),
    transparent 72%
  );
  animation-duration: var(--bz-dur-ambient-2);
  animation-direction: reverse;
}

.reconocimientos__mancha--3 {
  left: 20%;
  bottom: 22%;
  width: 32.5rem;
  height: 9.375rem;
  rotate: -34deg;
  border-radius: var(--bz-radius-capsula);
  background: radial-gradient(
    ellipse at center,
    color-mix(in srgb, var(--bz-violet) 22%, transparent),
    transparent 74%
  );
  animation-duration: var(--bz-dur-ambient-3);
}

.reconocimientos__mancha--4 {
  left: -4%;
  bottom: 4%;
  width: 61.25rem;
  height: var(--bz-space-12);
  rotate: -13deg;
  border-radius: var(--bz-radius-pill);
  background: radial-gradient(
    ellipse at center,
    color-mix(in srgb, var(--bz-brand) 45%, transparent),
    transparent 76%
  );
  animation-duration: var(--bz-dur-ambient-2);
}

.reconocimientos__mancha--5 {
  right: -6%;
  bottom: 10%;
  width: 26.25rem;
  height: 8.125rem;
  rotate: 22deg;
  background: radial-gradient(
    ellipse at center,
    color-mix(in srgb, var(--bz-brand) 18%, transparent),
    transparent 72%
  );
  animation-duration: var(--bz-dur-ambient-3);
  animation-direction: reverse;
}

/* ---- Rejilla --------------------------------------------------------- */
.reconocimientos__grid {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--bz-space-8);
  align-items: center;
}

/* ---- Copy ------------------------------------------------------------ */
.reconocimientos__eyebrow {
  display: inline-block;
  padding: var(--bz-space-2) var(--bz-space-4);
  border-radius: var(--bz-radius-lg);
  background: color-mix(in srgb, var(--bz-brand) 16%, transparent);
  color: var(--bz-brand);
  font-size: var(--bz-size-2xs);
  font-weight: var(--bz-weight-semibold);
  letter-spacing: var(--bz-tracking-wide);
  text-transform: uppercase;
}

.reconocimientos__titulo {
  margin-top: var(--bz-space-5);
  font-size: var(--bz-size-h2);
  line-height: var(--bz-leading-snug);
  color: var(--bz-on-night);
}

.reconocimientos__entrada {
  margin-top: var(--bz-space-5);
  max-width: var(--bz-measure);
  font-size: var(--bz-size-body);
  line-height: var(--bz-leading-loose);
  color: var(--bz-on-night-soft);
}

/* ---- Insignias ------------------------------------------------------- */
.reconocimientos__insignias {
  margin-top: var(--bz-space-8);
  display: flex;
  flex-wrap: wrap;
  gap: var(--bz-space-4);
}

.reconocimientos__insignia {
  display: grid;
  place-items: center;
  width: var(--bz-insignia);
  height: var(--bz-insignia);
  padding: var(--bz-space-3);
  border-radius: var(--bz-radius-insignia);
  background: var(--bz-surface);
  box-shadow: var(--bz-shadow-insignia);
  transition: transform var(--bz-dur-card) var(--bz-ease);
}

.reconocimientos__insignia:hover {
  transform: translateY(var(--bz-lift-corto));
}

.reconocimientos__insignia img {
  width: 100%;
  height: 100%;
  border-radius: var(--bz-radius-badge);
  object-fit: contain;
}

/* ---- Foto ------------------------------------------------------------ */
.reconocimientos__figura {
  margin: 0;
  align-self: center;
  display: grid;
  aspect-ratio: 520 / 352;
  border-radius: var(--bz-radius-xl);
  overflow: hidden;
  box-shadow: var(--bz-ring-claro), var(--bz-shadow-foto);
}

.reconocimientos__foto {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--bz-dur-card) var(--bz-ease);
}

.reconocimientos__figura:hover .reconocimientos__foto {
  transform: scale(var(--bz-zoom));
}

@keyframes reconocimientos-deriva {
  0% {
    transform: translate3d(0, 0, 0) scale(1);
  }
  50% {
    transform: translate3d(var(--bz-drift-x), var(--bz-drift-y), 0)
      scale(var(--bz-drift-scale));
  }
  100% {
    transform: translate3d(0, 0, 0) scale(1);
  }
}

/* ---- Cortes: ~880 / 640 / 420 --------------------------------------- */
@media (min-width: 880px) {
  /* Del frame: copy 520 y foto 520, con la foto pegada al borde derecho */
  .reconocimientos__grid {
    grid-template-columns: minmax(0, 520fr) minmax(0, 520fr);
    gap: var(--bz-space-12);
  }
}

@media (max-width: 420px) {
  .reconocimientos__insignia {
    width: var(--bz-insignia-sm);
    height: var(--bz-insignia-sm);
  }
}
/* ==========================================================================
   Breeze Lingo · SECCIÓN 05 · ¿Es Breeze para ti?
   Prefijo .para-quien__*. Sin literales: todo desde tokens.css.
   Cuatro columnas en flujo, sin position:absolute en ninguna parte.
   ========================================================================== */

.para-quien {
  background: var(--bz-bg);
  padding-block: var(--bz-section-y);
}

.para-quien__cabecera {
  text-align: center;
}

.para-quien__eyebrow {
  display: inline-block;
  padding: var(--bz-space-2) var(--bz-space-4);
  border-radius: var(--bz-radius-eyebrow);
  background: var(--bz-mint-100);
  color: var(--bz-accent);
  font-size: var(--bz-size-2xs);
  font-weight: var(--bz-weight-semibold);
  letter-spacing: var(--bz-tracking-wide);
  text-transform: uppercase;
}

.para-quien__titulo {
  margin-top: var(--bz-space-5);
  font-size: var(--bz-size-h2);
  line-height: var(--bz-leading-snug);
}

/* ---- Los cuatro casos ------------------------------------------------ */
.para-quien__lista {
  margin-top: var(--bz-space-12);
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--bz-space-8);
}

.para-quien__caso {
  text-align: center;
}

/* El halo del archivo: 0 0 60px 8px de verde muy claro */
.para-quien__icono {
  margin-inline: auto;
  display: grid;
  place-items: center;
  width: var(--bz-icono-caso);
  height: var(--bz-icono-caso);
  border-radius: var(--bz-radius-icono);
  background: var(--bz-mint-100);
  color: var(--bz-accent);
  box-shadow: var(--bz-halo-menta);
  transition: transform var(--bz-dur-card) var(--bz-ease);
}

.para-quien__caso:hover .para-quien__icono {
  transform: translateY(var(--bz-lift-corto));
}

.para-quien__caso-titulo {
  margin-top: var(--bz-space-4);
  font-family: var(--bz-font-title);
  font-weight: var(--bz-weight-medium);
  font-size: var(--bz-size-h4);
}

.para-quien__caso-texto {
  margin-top: var(--bz-space-2);
  margin-inline: auto;
  max-width: var(--bz-measure-corto);
  font-size: var(--bz-size-sm);
  line-height: var(--bz-leading-normal);
  color: var(--bz-text);
}

/* ---- Cortes: ~1000 / 640 / 420 -------------------------------------- */
@media (min-width: 640px) {
  .para-quien__lista {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1000px) {
  .para-quien__lista {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--bz-space-12);
  }
}
/* ==========================================================================
   Breeze Lingo · SECCIÓN 06 · Así es Breeze por dentro
   Prefijo .plataforma__*. Sin literales: todo desde tokens.css.
   Rejilla 2×2. Los cuatro paneles son interfaz reconstruida en HTML/CSS (§5).
   ========================================================================== */

.plataforma {
  background: var(--bz-surface);
  padding-block: var(--bz-section-y);
}

.plataforma__cabecera {
  text-align: center;
}

.plataforma__eyebrow {
  display: inline-block;
  padding: var(--bz-space-2) var(--bz-space-4);
  border-radius: var(--bz-radius-eyebrow);
  background: var(--bz-mint-100);
  color: var(--bz-accent);
  font-size: var(--bz-size-2xs);
  font-weight: var(--bz-weight-semibold);
  letter-spacing: var(--bz-tracking-wide);
  text-transform: uppercase;
}

.plataforma__titulo {
  margin-top: var(--bz-space-5);
  font-size: var(--bz-size-h2);
  line-height: var(--bz-leading-snug);
}

/* ---- Rejilla ---------------------------------------------------------- */
.plataforma__lista {
  margin-top: var(--bz-space-12);
  display: grid;
  grid-template-columns: 1fr;
  align-items: start;
  gap: var(--bz-space-6);
}

/* ---- La tarjeta ------------------------------------------------------- */
.plataforma__item {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  border-radius: var(--bz-radius-xl);
  background: var(--bz-mint-050);
  padding: var(--bz-space-5);
  transition:
    transform var(--bz-dur-card) var(--bz-ease),
    box-shadow var(--bz-dur-card) var(--bz-ease);
}

.plataforma__item:hover {
  transform: translateY(var(--bz-lift-corto));
  box-shadow: var(--bz-shadow-md);
}

/* La cuarta va oscura y a doble alto */
.plataforma__item--evaluacion {
  background: linear-gradient(
    var(--bz-angulo-panel),
    var(--bz-night-2),
    var(--bz-night-3)
  );
}

.plataforma__item-titulo {
  margin-top: var(--bz-space-5);
  font-family: var(--bz-font-title);
  font-weight: var(--bz-weight-semibold);
  font-size: var(--bz-size-h4);
}

.plataforma__item-titulo--marca {
  color: var(--bz-brand);
}

.plataforma__item-texto {
  margin-top: var(--bz-space-1);
  font-size: var(--bz-size-body);
  line-height: var(--bz-leading-normal);
  color: var(--bz-text);
}

.plataforma__item-texto--noche {
  color: var(--bz-on-night);
}

/* ---- Mancha de la tarjeta oscura (§3) -------------------------------- */
.plataforma__mancha {
  position: absolute;
  z-index: -1;
  right: -18%;
  top: -14%;
  display: block;
  width: var(--bz-mancha-size);
  height: var(--bz-mancha-size);
  border-radius: 58% 42% 47% 53% / 46% 51% 49% 54%;
  background: radial-gradient(
    circle,
    color-mix(in srgb, var(--bz-brand) 30%, transparent),
    transparent 68%
  );
  filter: blur(var(--bz-blur-mancha));
  animation: plataforma-deriva var(--bz-dur-ambient-3) var(--bz-ease) infinite;
}

/* ---- El panel interior ----------------------------------------------- */
.plataforma__panel {
  position: relative;
  border-radius: var(--bz-radius-lg);
  background: var(--bz-surface);
  padding: var(--bz-space-4);
}

.plataforma__panel--menta {
  background: var(--bz-mint-100);
}

/* Cristal sobre la tarjeta oscura. El backdrop-filter funciona: ningún
   ancestro lleva filter, transform ni will-change. */
.plataforma__panel--cristal {
  background: var(--bz-cristal-noche);
  box-shadow: var(--bz-ring-claro);
  backdrop-filter: blur(var(--bz-blur-cristal));
}

.plataforma__panel-cabecera {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--bz-space-3);
}

.plataforma__panel-marca {
  display: flex;
  align-items: center;
  gap: var(--bz-space-2);
  min-width: 0;
}

.plataforma__panel-icono {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  color: var(--bz-accent);
}

.plataforma__panel-titulo {
  font-size: var(--bz-size-xs);
  font-weight: var(--bz-weight-semibold);
  color: var(--bz-ink);
}

.plataforma__panel-titulo--noche {
  color: var(--bz-on-night);
}

/* ---- 1 · Calendario -------------------------------------------------- */
.plataforma__pastilla--mes {
  flex-shrink: 0;
  padding: var(--bz-space-1) var(--bz-space-3);
  border-radius: var(--bz-radius-pill);
  background: var(--bz-mint-100);
  font-size: var(--bz-size-2xs);
  font-weight: var(--bz-weight-medium);
  color: var(--bz-accent);
  white-space: nowrap;
}

.plataforma__semana {
  margin-top: var(--bz-space-4);
  width: 100%;
  table-layout: fixed;
  border-spacing: var(--bz-space-1);
}

.plataforma__semana th {
  padding-bottom: var(--bz-space-1);
  font-size: var(--bz-size-2xs);
  font-weight: var(--bz-weight-regular);
  color: var(--bz-muted);
}

.plataforma__semana abbr {
  text-decoration: none;
}

.plataforma__dia {
  display: grid;
  place-items: center;
  height: var(--bz-space-10);
  border-radius: var(--bz-radius-md);
  background: var(--bz-bg);
  font-size: var(--bz-size-xs);
  font-weight: var(--bz-weight-medium);
  color: var(--bz-text);
}

/* El día activo no se marca solo con color: también cambia el peso */
.plataforma__dia--hoy {
  background: var(--bz-brand);
  color: var(--bz-ink-deep);
  font-weight: var(--bz-weight-semibold);
}

.plataforma__reserva {
  margin-top: var(--bz-space-3);
  display: flex;
  align-items: center;
  gap: var(--bz-space-3);
  padding: var(--bz-space-3);
  border-radius: var(--bz-radius-md);
  background: var(--bz-mint-100);
}

.plataforma__reserva-icono {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: var(--bz-space-6);
  height: var(--bz-space-6);
  border-radius: var(--bz-radius-sm);
  background: var(--bz-brand);
  color: var(--bz-ink-deep);
}

.plataforma__reserva-texto {
  flex: 1;
  min-width: 0;
  font-size: var(--bz-size-2xs);
  font-weight: var(--bz-weight-medium);
  color: var(--bz-ink-deep);
}

.plataforma__reserva-estado {
  flex-shrink: 0;
  font-size: var(--bz-size-2xs);
  font-weight: var(--bz-weight-semibold);
  color: var(--bz-accent);
  white-space: nowrap;
}

/* ---- 2 · Breezy AI --------------------------------------------------- */
.plataforma__chat {
  display: grid;
  gap: var(--bz-space-3);
}

.plataforma__burbuja-fila {
  display: flex;
  align-items: flex-start;
  gap: var(--bz-space-3);
}

.plataforma__burbuja-fila--propia {
  align-items: flex-end;
  justify-content: flex-end;
}

.plataforma__avatar-ia {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: var(--bz-space-8);
  height: var(--bz-space-8);
  border-radius: var(--bz-radius-pill);
  background: var(--bz-accent);
  color: var(--bz-surface);
}

.plataforma__avatar-yo {
  flex-shrink: 0;
  width: var(--bz-space-8);
  height: var(--bz-space-8);
  border-radius: var(--bz-radius-pill);
  object-fit: cover;
}

.plataforma__burbuja {
  padding: var(--bz-space-3) var(--bz-space-4);
  font-size: var(--bz-size-sm);
  line-height: var(--bz-leading-normal);
}

.plataforma__burbuja--ia {
  border-radius: var(--bz-radius-md) var(--bz-radius-md) var(--bz-radius-md)
    var(--bz-space-1);
  background: var(--bz-surface);
  color: var(--bz-ink);
  box-shadow: var(--bz-shadow-sm);
}

.plataforma__burbuja--propia {
  border-radius: var(--bz-radius-md) var(--bz-radius-md) var(--bz-space-1)
    var(--bz-radius-md);
  background: var(--bz-brand);
  color: var(--bz-ink-deep);
}

.plataforma__reproductor {
  margin-top: var(--bz-space-4);
  display: flex;
  align-items: center;
  gap: var(--bz-space-3);
  padding: var(--bz-space-2);
  padding-right: var(--bz-space-4);
  border-radius: var(--bz-radius-pill);
  background: var(--bz-night);
}

.plataforma__play {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: var(--bz-space-8);
  height: var(--bz-space-8);
  border-radius: var(--bz-radius-pill);
  background: var(--bz-brand);
  color: var(--bz-night);
}

.plataforma__tiempo {
  flex-shrink: 0;
  font-size: var(--bz-size-2xs);
  font-weight: var(--bz-weight-medium);
  color: var(--bz-on-night-soft);
}

/* ---- Onda de audio: las barras las escribe plataforma.js ------------- */
.plataforma__onda {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--bz-space-1);
  height: var(--bz-space-5);
}

.plataforma__onda--corta {
  flex: 0 0 auto;
  width: var(--bz-onda-corta);
  height: var(--bz-space-4);
}

.plataforma__onda span {
  flex: 0 0 auto;
  width: var(--bz-onda-barra);
  border-radius: var(--bz-radius-pill);
  background: var(--bz-brand);
  transform-origin: center;
  animation: plataforma-onda var(--bz-dur-onda) var(--bz-ease) infinite;
}

/* ---- 3 · Speaking Room ----------------------------------------------- */
.plataforma__vivo {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: var(--bz-space-2);
  padding: var(--bz-space-1) var(--bz-space-3);
  border-radius: var(--bz-radius-pill);
  background: var(--bz-danger-soft);
  font-size: var(--bz-size-2xs);
  font-weight: var(--bz-weight-semibold);
  color: var(--bz-danger-ink);
  white-space: nowrap;
  text-transform: uppercase;
  letter-spacing: var(--bz-tracking-wide);
}

.plataforma__punto {
  position: relative;
  flex-shrink: 0;
  display: block;
  width: var(--bz-space-2);
  height: var(--bz-space-2);
  border-radius: var(--bz-radius-pill);
  background: var(--bz-danger);
}

/* El anillo que late. El punto se queda sólido: si se apagara, un indicador
   «En vivo» comunicaría lo contrario de lo que dice el rótulo. */
.plataforma__punto::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--bz-danger);
  animation: plataforma-pulso var(--bz-dur-pulso) var(--bz-ease) infinite;
}

.plataforma__asistentes {
  margin-top: var(--bz-space-5);
  display: flex;
  flex-wrap: wrap;
  gap: var(--bz-space-4);
  justify-content: space-between;
}

.plataforma__asistentes > li {
  text-align: center;
}

.plataforma__cara {
  width: var(--bz-avatar);
  height: var(--bz-avatar);
  border-radius: var(--bz-radius-pill);
  object-fit: cover;
}

/* El host lleva aro de marca; el nombre además va en verde y en 600, para
   no comunicar el rol solo con color */
.plataforma__aro {
  display: grid;
  place-items: center;
  padding: var(--bz-space-1);
  border-radius: var(--bz-radius-pill);
  box-shadow: inset 0 0 0 2px var(--bz-brand);
}

.plataforma__nombre {
  display: block;
  margin-top: var(--bz-space-2);
  font-size: var(--bz-size-2xs);
  color: var(--bz-text);
}

.plataforma__nombre--host {
  font-weight: var(--bz-weight-semibold);
  color: var(--bz-accent);
}

.plataforma__micro {
  margin-top: var(--bz-space-4);
  display: inline-flex;
  align-items: center;
  gap: var(--bz-space-2);
  padding: var(--bz-space-2) var(--bz-space-4);
  border-radius: var(--bz-radius-pill);
  background: var(--bz-mint-100);
}

.plataforma__micro-icono {
  display: grid;
  place-items: center;
  color: var(--bz-accent);
}

.plataforma__micro-texto {
  font-size: var(--bz-size-2xs);
  font-weight: var(--bz-weight-medium);
  color: var(--bz-accent);
}

/* ---- 4 · Evaluación -------------------------------------------------- */
.plataforma__evaluacion {
  position: relative;
  padding-bottom: var(--bz-space-2);
}

.plataforma__tendencia {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  color: var(--bz-brand);
}

.plataforma__metricas {
  margin-top: var(--bz-space-4);
  display: grid;
  gap: var(--bz-space-3);
}

.plataforma__metrica {
  display: flex;
  align-items: center;
  gap: var(--bz-space-3);
}

.plataforma__metrica-nombre {
  flex-shrink: 0;
  width: var(--bz-rotulo-w);
  font-size: var(--bz-size-2xs);
  color: var(--bz-on-night-soft);
}

.plataforma__barra {
  flex: 1;
  min-width: 0;
  display: block;
  height: var(--bz-space-2);
  border-radius: var(--bz-radius-pill);
  background: var(--bz-on-night-mute);
  overflow: hidden;
}

/* Escala en X: no anima width (§4) */
.plataforma__barra-relleno {
  display: block;
  width: var(--plataforma-pct, 0%);
  height: 100%;
  border-radius: var(--bz-radius-pill);
  background: var(--bz-brand);
  transform-origin: left center;
  animation: plataforma-barra var(--bz-dur-card) var(--bz-ease) both;
}

.plataforma__barra-relleno--violeta {
  background: var(--bz-violet);
}

/* ---- Fichas que se solapan al panel ---------------------------------- */
.plataforma__fichas {
  position: absolute;
  right: 0;
  bottom: calc(var(--bz-space-4) * -1);
  display: grid;
  gap: var(--bz-space-2);
  justify-items: end;
}

.plataforma__ficha {
  display: flex;
  align-items: center;
  gap: var(--bz-space-3);
  padding: var(--bz-space-2) var(--bz-space-3);
  border-radius: var(--bz-radius-md);
  background: var(--bz-surface);
  box-shadow: var(--bz-shadow-lg);
  animation: plataforma-flota var(--bz-dur-flota-1) var(--bz-ease) infinite;
}

.plataforma__ficha--nivel {
  margin-right: var(--bz-space-6);
}

.plataforma__ficha--fluidez {
  margin-right: var(--bz-space-3);
  animation-duration: var(--bz-dur-flota-2);
  animation-delay: var(--bz-delay-flota);
}

.plataforma__ficha--precision {
  animation-duration: var(--bz-dur-flota-3);
  animation-direction: reverse;
}

.plataforma__ficha-icono {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: var(--bz-space-8);
  height: var(--bz-space-8);
  border-radius: var(--bz-radius-sm);
  background: var(--bz-bg);
  color: var(--bz-text);
}

.plataforma__ficha-icono--menta {
  background: var(--bz-mint-100);
  color: var(--bz-accent);
}

.plataforma__ficha-textos {
  display: grid;
  gap: var(--bz-space-1);
  min-width: 0;
}

.plataforma__ficha-rotulo {
  font-size: var(--bz-size-2xs);
  color: var(--bz-muted);
}

.plataforma__ficha-dato {
  font-family: var(--bz-font-title);
  font-weight: var(--bz-weight-semibold);
  font-size: var(--bz-size-sm);
  color: var(--bz-ink);
}

/* ---- Animaciones: solo transform y opacity -------------------------- */
@keyframes plataforma-barra {
  from {
    transform: scaleX(0);
  }
  to {
    transform: scaleX(1);
  }
}

@keyframes plataforma-onda {
  0%,
  100% {
    transform: scaleY(var(--bz-onda-min));
  }
  50% {
    transform: scaleY(1);
  }
}

@keyframes plataforma-pulso {
  0% {
    transform: scale(1);
    opacity: var(--bz-pulso-op);
  }
  70%,
  100% {
    transform: scale(var(--bz-pulso-escala));
    opacity: 0;
  }
}

@keyframes plataforma-flota {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(var(--bz-lift-corto));
  }
}

@keyframes plataforma-deriva {
  0% {
    transform: translate3d(0, 0, 0) scale(1);
  }
  50% {
    transform: translate3d(var(--bz-drift-x), var(--bz-drift-y), 0)
      scale(var(--bz-drift-scale));
  }
  100% {
    transform: translate3d(0, 0, 0) scale(1);
  }
}

/* ---- Cortes: ~1000 / 640 / 420 -------------------------------------- */
@media (min-width: 1000px) {
  .plataforma__lista {
    /* 2×2: la evaluación ocupa la segunda columna de las dos filas */
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-areas:
      "calendario chat"
      "sala evaluacion";
  }

  .plataforma__item--calendario {
    grid-area: calendario;
  }
  .plataforma__item--chat {
    grid-area: chat;
  }
  .plataforma__item--sala {
    grid-area: sala;
  }
  .plataforma__item--evaluacion {
    grid-area: evaluacion;
  }

  .plataforma__item {
    padding: var(--bz-space-6);
  }
}

@media (max-width: 420px) {
  .plataforma__asistentes {
    gap: var(--bz-space-3);
  }

  /* En móvil angosto las fichas vuelven al flujo, a ancho completo */
  .plataforma__evaluacion {
    padding-bottom: 0;
  }

  .plataforma__fichas {
    position: static;
    margin-top: var(--bz-space-3);
    justify-items: stretch;
  }

  .plataforma__ficha--nivel,
  .plataforma__ficha--fluidez {
    margin-right: 0;
  }
}
/* ==========================================================================
   Breeze Lingo · SECCIÓN 07 · Tres pasos hasta tu primera clase
   Prefijo .pasos__*. Sin literales: todo desde tokens.css.
   En escritorio, rejilla intercalada de 2×3: cada paso comparte fila con su
   tarjeta, así que el número queda alineado a su centro vertical.
   ========================================================================== */

.pasos {
  background: var(--bz-surface);
  padding-block: var(--bz-section-y);
}

.pasos__titulo {
  text-align: center;
  font-size: var(--bz-size-h2);
  line-height: var(--bz-leading-snug);
}

.pasos__grid {
  position: relative;
  --bz-gap-paso: var(--bz-space-6);
  margin-top: var(--bz-space-10);
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--bz-space-5);
}

/* ---- Tarjetas de producto -------------------------------------------- */
.pasos__tarjeta {
  border-radius: var(--bz-radius-xl);
  background: var(--bz-surface);
  box-shadow: var(--bz-ring-frio), var(--bz-shadow-lg);
  padding: var(--bz-space-5);
}

.pasos__logo {
  height: auto;
  object-fit: contain;
}

/* ---- 1 · Alta -------------------------------------------------------- */
.pasos__alta {
  margin-top: var(--bz-space-4);
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--bz-space-3);
  align-items: end;
}

.pasos__campos {
  display: grid;
  gap: var(--bz-space-2);
}

.pasos__campo {
  display: flex;
  align-items: center;
  gap: var(--bz-space-3);
  padding: var(--bz-space-3) var(--bz-space-4);
  border-radius: var(--bz-radius-campo);
  background: var(--bz-surface);
  box-shadow: var(--bz-ring);
}

.pasos__campo-valor {
  position: relative;
  overflow: hidden;
  flex: 1;
  min-width: 0;
  font-size: var(--bz-size-xs);
  color: var(--bz-ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pasos__campo-ok {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  color: var(--bz-brand);
}

.pasos__boton {
  display: grid;
  place-items: center;
  min-height: var(--bz-space-10);
  border-radius: var(--bz-radius-pill);
  background: var(--bz-brand);
  color: var(--bz-ink-deep); /* §11: blanco sobre menta da 1,78:1 */
  font-size: var(--bz-size-xs);
  font-weight: var(--bz-weight-semibold);
  box-shadow: var(--bz-shadow-brand);
}

/* ---- 2 · Evaluación -------------------------------------------------- */
.pasos__marca {
  display: flex;
  align-items: center;
  gap: var(--bz-space-2);
}

.pasos__marca-icono {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: var(--bz-space-6);
  height: var(--bz-space-6);
  border-radius: var(--bz-radius-sm);
  background: var(--bz-mint-100);
  color: var(--bz-accent);
}

.pasos__marca-texto {
  font-size: var(--bz-size-xs);
  font-weight: var(--bz-weight-semibold);
  color: var(--bz-ink);
}

.pasos__evaluacion {
  margin-top: var(--bz-space-4);
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--bz-space-4);
  align-items: center;
}

.pasos__metricas {
  display: grid;
  gap: var(--bz-space-3);
}

.pasos__metrica {
  display: flex;
  align-items: center;
  gap: var(--bz-space-3);
}

.pasos__metrica-nombre {
  flex-shrink: 0;
  width: var(--bz-rotulo-metrica);
  font-size: var(--bz-size-2xs);
  color: var(--bz-text);
}

.pasos__barra {
  flex: 1;
  min-width: 0;
  display: block;
  height: var(--bz-space-2);
  border-radius: var(--bz-radius-pill);
  background: var(--bz-riel);
  overflow: hidden;
}

/* Escala en X: no anima width (§4) */
.pasos__barra-relleno {
  display: block;
  width: var(--pasos-pct, 0%);
  height: 100%;
  border-radius: var(--bz-radius-pill);
  background: var(--bz-brand);
  transform-origin: left center;
  animation: pasos-barra var(--bz-dur-card) var(--bz-ease) both;
}

.pasos__barra-relleno--violeta {
  background: var(--bz-violet);
}

.pasos__nivel {
  display: grid;
  gap: var(--bz-space-1);
  justify-items: center;
  padding: var(--bz-space-3) var(--bz-space-5);
  border-radius: var(--bz-radius-lg);
  background: var(--bz-mint-100);
  text-align: center;
}

.pasos__nivel-rotulo {
  font-size: var(--bz-size-3xs);
  font-weight: var(--bz-weight-semibold);
  letter-spacing: var(--bz-tracking-wider);
  color: var(--bz-accent);
  text-transform: uppercase;
  white-space: nowrap;
}

.pasos__nivel-dato {
  font-family: var(--bz-font-title);
  font-weight: var(--bz-weight-semibold);
  font-size: var(--bz-size-h3);
  line-height: 1;
  color: var(--bz-ink);
}

/* ---- 3 · Clase en vivo ----------------------------------------------- */
.pasos__tarjeta--clase {
  background: var(--bz-night);
  box-shadow: var(--bz-shadow-lg);
}

.pasos__clase {
  display: flex;
  flex-wrap: wrap;
  gap: var(--bz-space-5);
  align-items: center;
}

.pasos__video {
  position: relative;
  flex-shrink: 0;
  margin: 0;
  width: var(--bz-video-w);
  border-radius: var(--bz-radius-md);
  overflow: hidden;
}

.pasos__video > img:first-child {
  width: 100%;
  height: var(--bz-video-h);
  object-fit: cover;
}

/* Las miniaturas flotan sobre el vídeo: es el caso que §1 permite */
.pasos__mini {
  position: absolute;
  border-radius: var(--bz-radius-sm);
  object-fit: cover;
}

.pasos__mini--1 {
  right: var(--bz-space-2);
  bottom: var(--bz-space-2);
  box-shadow: 0 0 0 1.5px var(--bz-on-night-soft);
}

.pasos__mini--2 {
  left: var(--bz-space-2);
  bottom: var(--bz-space-2);
  box-shadow: 0 0 0 1.5px var(--bz-on-night-mute);
}

.pasos__clase-datos {
  flex: 1;
  min-width: var(--bz-col-clase);
}

.pasos__clase-titulo {
  font-size: var(--bz-size-xs);
  font-weight: var(--bz-weight-semibold);
  color: var(--bz-on-night);
}

.pasos__clase-tiempo {
  margin-top: var(--bz-space-1);
  font-size: var(--bz-size-2xs);
  color: var(--bz-on-night-soft);
}

.pasos__controles {
  margin-top: var(--bz-space-4);
  display: flex;
  gap: var(--bz-space-3);
}

.pasos__control {
  display: grid;
  place-items: center;
  width: var(--bz-space-8);
  height: var(--bz-space-8);
  border-radius: var(--bz-radius-sm);
  background: var(--bz-brand);
  color: var(--bz-surface);
}

.pasos__control--colgar {
  background: var(--bz-danger);
}

/* ---- Los tres pasos -------------------------------------------------- */
.pasos__lista {
  display: grid;
  gap: var(--bz-space-6);
}

.pasos__paso {
  display: flex;
  gap: var(--bz-space-6);
  align-items: center;
}

.pasos__via {
  position: relative;
  flex-shrink: 0;
  align-self: stretch;
  display: grid;
  place-items: center;
}

/* La vía, por maquetación: medio hueco desde el centro de cada número.
   No depende del JS, así que si no corre la línea sigue ahí (§4). */
.pasos__via::before,
.pasos__via::after {
  content: "";
  position: absolute;
  left: 50%;
  width: var(--bz-via);
  margin-left: calc(var(--bz-via) / -2);
  border-radius: var(--bz-radius-pill);
  background: var(--bz-via-color);
}

/* Tramo de salida */
.pasos__via::after {
  top: 50%;
  bottom: calc(var(--bz-gap-paso) / -2);
}

.pasos__paso:last-child .pasos__via::after {
  content: none;
}

/* Tramo de entrada */
.pasos__via::before {
  top: calc(var(--bz-gap-paso) / -2);
  bottom: 50%;
}

.pasos__paso:first-child .pasos__via::before {
  content: none;
}

/* Cuadrado con radio, no círculo. La cara va en 3D: perspectiva propia,
   giro leve y sombra en dos capas para que se lea el volumen. */
.pasos__numero {
  position: relative;
  z-index: 1;
  width: var(--bz-paso);
  height: var(--bz-paso);
  border-radius: var(--bz-radius-lg);
  perspective: var(--bz-paso-perspectiva);
}

.pasos__numero-cara {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  /* La luz entra por arriba a la izquierda: el degradado da el relieve */
  background: linear-gradient(
    145deg,
    var(--bz-paso-luz) 0%,
    var(--bz-accent) 45%,
    var(--bz-paso-sombra) 100%
  );
  color: var(--bz-surface);
  font-family: var(--bz-font-title);
  font-weight: var(--bz-weight-semibold);
  font-size: var(--bz-size-h4);
  box-shadow:
    inset 0 1.5px 0 var(--bz-paso-brillo),
    inset 0 -1.5px 0 var(--bz-paso-canto),
    0 var(--bz-paso-alto) 0 var(--bz-paso-base),
    0 calc(var(--bz-paso-alto) + 6px) 16px var(--bz-paso-proyeccion);
  transform: rotateX(var(--bz-paso-giro)) translateZ(0);
  animation:
    pasos-relieve var(--bz-dur-viaje) var(--bz-ease) infinite,
    pasos-encendido var(--bz-dur-viaje) var(--bz-ease) infinite;
  /* El gesto de hundido está al 79 % del keyframe y el encendido al 82 %:
     el retardo resta esa posición al instante en que pasa la luz. */
  animation-delay:
    calc((var(--pasos-instante, 0) - 0.79) * var(--bz-dur-viaje)),
    calc((var(--pasos-instante, 0) - 0.82) * var(--bz-dur-viaje));
}

/* ---- El riel: uno solo, de extremo a extremo -------------------------
   pasos.js lo mide y lo coloca (left/top/height en línea): el recorrido
   depende de la altura de cada tarjeta y solo se sabe al renderizar. */
.pasos__riel {
  position: absolute;
  z-index: 0;
  /* Sin la medición del JS no hay recorrido: el riel no se pinta */
  display: none;
  width: var(--bz-via);
  margin-left: calc(var(--bz-via) / -2);
  border-radius: var(--bz-radius-pill);
  /* Sin fondo: la línea la pinta .pasos__via en la maqueta. Este riel solo
     existe para que el cometa tenga un recorrido continuo que medir. */
  /* Recorta arriba y abajo, pero deja salir el resplandor a los lados */
  clip-path: inset(0 calc(var(--bz-resplandor) * -1));
}

/* El cometa. Dos capas a propósito:
   · la de fuera SOLO se desplaza, y en lineal, para que la posición de la
     cabeza sea proporcional al tiempo — de eso depende que el encendido de
     cada número caiga donde está la luz;
   · la de dentro SOLO se aplasta, con su curva, así el easing no distorsiona
     el recorrido.
   Antes iban juntas y la cabeza avanzaba a saltos. */
.pasos__riel[data-medido] {
  display: block;
}

.pasos__cometa {
  position: absolute;
  inset-inline: calc(var(--bz-resplandor) * -1);
  top: 0;
  height: var(--bz-sable);
  /* La cabeza es el borde inferior: empieza y acaba desplazada un sable */
  --pasos-desde: calc(var(--bz-sable) * -1);
  --pasos-hasta: calc(var(--bz-riel-alto, 100%) - var(--bz-sable));
  animation: pasos-cometa var(--bz-dur-viaje) linear infinite;
}

.pasos__cometa-cuerpo {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: var(--bz-radius-pill);
  background: linear-gradient(
    to bottom,
    transparent 0%,
    var(--bz-via-estela) 30%,
    var(--bz-brand) 72%,
    var(--bz-cometa) 88%,
    transparent 100%
  );
  transform-origin: center bottom;
  animation: pasos-cometa-cuerpo var(--bz-dur-viaje) var(--bz-ease-viaje) infinite;
}

/* El halo del número, en la fracción del recorrido donde está: pasos.js
   calcula --pasos-llegada y de ahí sale el retardo. */
.pasos__numero::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: 0 0 0 0 var(--bz-via-halo);
  animation: pasos-llegada var(--bz-dur-viaje) var(--bz-ease) infinite;
  /* El halo se expande al 86 % del keyframe */
  animation-delay: calc((var(--pasos-instante, 0) - 0.86) * var(--bz-dur-viaje));
}

.pasos__texto {
  display: grid;
  gap: var(--bz-space-2);
}

.pasos__paso-titulo {
  font-family: var(--bz-font-title);
  font-weight: var(--bz-weight-semibold);
  font-size: var(--bz-size-h4);
  color: var(--bz-ink);
}

.pasos__paso-cuerpo {
  font-size: var(--bz-size-body);
  line-height: var(--bz-leading-normal);
  color: var(--bz-text);
}

/* ---- La UI de la izquierda, en movimiento ---------------------------
   Los tres paneles cuentan lo que dice el paso de al lado: el alta se
   valida campo a campo, las métricas crecen y la clase corre. Todo en
   bucle sobre un mismo ciclo, para que se lea como una secuencia. */

/* El campo se rellena: la marca de validado entra cuando le toca */
.pasos__campo-ok {
  transform: scale(0);
  animation: pasos-valida var(--bz-dur-ui) var(--bz-ease-bounce) infinite;
}

.pasos__campo:nth-child(2) .pasos__campo-ok {
  animation-delay: calc(var(--bz-dur-ui) * 0.12);
}

/* El cursor que escribe: una barra que tapa el valor y se retira */
.pasos__campo-valor {
  position: relative;
}

/* El velo se retira con scaleX desde la derecha: animar left forzaría
   layout en cada fotograma, y §4 lo prohíbe en bucles. */
.pasos__campo-valor::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--bz-surface);
  border-left: var(--bz-cursor) solid var(--bz-brand);
  transform-origin: right center;
  animation: pasos-escribe var(--bz-dur-ui) steps(18, end) infinite;
}

.pasos__campo:nth-child(2) .pasos__campo-valor::after {
  animation-delay: calc(var(--bz-dur-ui) * 0.12);
}

/* El botón se ilumina cuando los dos campos están listos */
.pasos__boton {
  animation: pasos-listo var(--bz-dur-ui) var(--bz-ease) infinite;
}

/* Las barras crecen en bucle, escalonadas */
.pasos__barra-relleno {
  animation: pasos-barra-bucle var(--bz-dur-ui) var(--bz-ease) infinite;
}

.pasos__metrica:nth-child(2) .pasos__barra-relleno {
  animation-delay: calc(var(--bz-dur-ui) * 0.08);
}

.pasos__metrica:nth-child(3) .pasos__barra-relleno {
  animation-delay: calc(var(--bz-dur-ui) * 0.16);
}

/* El nivel aparece cuando las tres barras han llegado */
.pasos__nivel-dato {
  display: block;
  animation: pasos-nivel var(--bz-dur-ui) var(--bz-ease-bounce) infinite;
}

/* Los controles de la clase respiran, y el de colgar late */
.pasos__control {
  animation: pasos-control var(--bz-dur-ui) var(--bz-ease) infinite;
}

.pasos__control:nth-child(2) {
  animation-delay: calc(var(--bz-dur-ui) * 0.06);
}

.pasos__control--colgar {
  animation-delay: calc(var(--bz-dur-ui) * 0.12);
}

@keyframes pasos-valida {
  0%,
  16% {
    transform: scale(0);
  }
  24%,
  92% {
    transform: scale(1);
  }
  100% {
    transform: scale(0);
  }
}

@keyframes pasos-escribe {
  0% {
    transform: scaleX(1);
    opacity: 1;
  }
  18% {
    transform: scaleX(0);
    opacity: 1;
  }
  19%,
  92% {
    transform: scaleX(0);
    opacity: 0;
  }
  100% {
    transform: scaleX(1);
    opacity: 1;
  }
}

@keyframes pasos-listo {
  0%,
  26% {
    transform: scale(0.98);
    box-shadow: 0 0 0 0 var(--bz-via-halo);
  }
  34% {
    transform: scale(1);
    box-shadow: 0 0 0 var(--bz-halo-paso) transparent;
  }
  44%,
  100% {
    transform: scale(1);
    box-shadow: var(--bz-shadow-brand);
  }
}

/* La barra crece una vez y se queda: un porcentaje de evaluación no puede
   mostrar 0 % durante dos segundos de cada ciclo. Solo pulsa al refrescarse. */
@keyframes pasos-barra-bucle {
  0% {
    transform: scaleX(0);
  }
  30%,
  86% {
    transform: scaleX(1);
  }
  92% {
    transform: scaleX(0.97);
  }
  100% {
    transform: scaleX(1);
  }
}

/* El dato entra una vez y se queda: es información, no adorno, así que no
   puede pasar 4 s de cada 7,5 invisible. Solo destella al recalcularse. */
@keyframes pasos-nivel {
  0% {
    transform: scale(0.7);
    opacity: 0;
  }
  8%,
  52% {
    transform: scale(1);
    opacity: 1;
  }
  58% {
    transform: scale(1.12);
  }
  66%,
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

@keyframes pasos-control {
  0%,
  66% {
    transform: translateY(var(--bz-space-2));
    opacity: 0;
  }
  74%,
  94% {
    transform: translateY(0);
    opacity: 1;
  }
  100% {
    transform: translateY(var(--bz-space-2));
    opacity: 0;
  }
}

/* ---- Animaciones: solo transform y opacity -------------------------- */
@keyframes pasos-barra {
  from {
    transform: scaleX(0);
  }
  to {
    transform: scaleX(1);
  }
}

/* La cabeza se estira al acelerar y se recoge al llegar: es lo que hace
   que el recorrido se lea como movimiento y no como un bloque que resbala. */
/* Desplazamiento lineal: la cabeza recorre el riel entre el 6 % y el 78 %
   del ciclo, y en ese tramo su posición es proporcional al tiempo. */
@keyframes pasos-cometa {
  0%,
  6% {
    transform: translateY(var(--pasos-desde));
  }
  78%,
  100% {
    transform: translateY(var(--pasos-hasta));
  }
}

/* Aplastado y fundido, con su propia curva */
@keyframes pasos-cometa-cuerpo {
  0% {
    transform: scaleY(0.6);
    opacity: 0;
  }
  6% {
    transform: scaleY(1);
    opacity: 1;
  }
  55% {
    transform: scaleY(1.35);
  }
  78% {
    transform: scaleY(0.7);
    opacity: 1;
  }
  86%,
  100% {
    transform: scaleY(0.6);
    opacity: 0;
  }
}

/* Al paso de la luz la cara se enciende: pasa del verde oscuro al de marca
   y vuelve. Es el mismo instante en que se hunde. */
@keyframes pasos-encendido {
  0%,
  74% {
    background: linear-gradient(
      145deg,
      var(--bz-paso-luz) 0%,
      var(--bz-accent) 45%,
      var(--bz-paso-sombra) 100%
    );
    color: var(--bz-surface);
  }
  81%,
  83% {
    background: linear-gradient(
      145deg,
      var(--bz-mint-300) 0%,
      var(--bz-brand) 45%,
      var(--bz-accent) 100%
    );
    color: var(--bz-ink-deep);
  }
  94%,
  100% {
    background: linear-gradient(
      145deg,
      var(--bz-paso-luz) 0%,
      var(--bz-accent) 45%,
      var(--bz-paso-sombra) 100%
    );
    color: var(--bz-surface);
  }
}

/* La cara se hunde un instante cuando la luz pasa por encima: el mismo
   gesto de un botón que se pulsa, en el momento exacto del paso. */
@keyframes pasos-relieve {
  0%,
  74% {
    transform: rotateX(var(--bz-paso-giro)) translateY(0);
  }
  79% {
    transform: rotateX(calc(var(--bz-paso-giro) * 2.4))
      translateY(var(--bz-paso-hundido));
  }
  88%,
  100% {
    transform: rotateX(var(--bz-paso-giro)) translateY(0);
  }
}

/* El halo se expande y se apaga en el instante en que la luz pasa */
@keyframes pasos-llegada {
  0%,
  74% {
    box-shadow: 0 0 0 0 var(--bz-via-halo);
  }
  86% {
    box-shadow: 0 0 0 var(--bz-halo-paso) transparent;
  }
  100% {
    box-shadow: 0 0 0 0 transparent;
  }
}

/* ---- Cortes: ~1000 / 640 / 420 -------------------------------------- */
@media (min-width: 460px) {
  .pasos__alta {
    grid-template-columns: minmax(0, 1fr) var(--bz-col-boton);
  }

  .pasos__evaluacion {
    grid-template-columns: minmax(0, 1fr) var(--bz-col-nivel);
  }
}

@media (min-width: 1000px) {
  /* Rejilla intercalada: cada paso comparte fila con su tarjeta, así que el
     número cae en el centro vertical del frame de la izquierda. */
  .pasos__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: clamp(var(--bz-space-8), 4vw, var(--bz-space-14));
    row-gap: var(--bz-space-5);
    align-items: stretch;
  }

  .pasos__tarjeta--alta {
    grid-area: 1 / 1;
  }
  .pasos__tarjeta--evaluacion {
    grid-area: 2 / 1;
  }
  .pasos__tarjeta--clase {
    grid-area: 3 / 1;
  }

  /* La lista se disuelve para que cada <li> sea celda de la rejilla */
  .pasos__lista {
    display: contents;
  }

  .pasos__paso:nth-child(1) {
    grid-area: 1 / 2;
  }
  .pasos__paso:nth-child(2) {
    grid-area: 2 / 2;
  }
  .pasos__paso:nth-child(3) {
    grid-area: 3 / 2;
  }

  /* El gap de fila cambia, y la vía lo lee del token */
  .pasos__grid {
    --bz-gap-paso: var(--bz-space-5);
  }
}
/* ==========================================================================
   Breeze Lingo · SECCIÓN 08 · Más formas de practicar
   Prefijo .practicar__*. Sin literales: todo desde tokens.css.
   El halo del icono se rehace en CSS (§3): degradado radial que se desvanece
   a transparente, con deriva lenta. Sin mix-blend-mode.
   ========================================================================== */

.practicar {
  background: var(--bz-surface);
  padding-block: 0 var(--bz-section-y);
}

.practicar__titulo {
  font-size: var(--bz-size-h3-lg);
  line-height: var(--bz-leading-snug);
}

.practicar__entrada {
  margin-top: var(--bz-space-2);
  font-size: var(--bz-size-entrada-sm);
  color: var(--bz-text);
}

/* ---- Las tres tarjetas ----------------------------------------------- */
.practicar__lista {
  margin-top: var(--bz-space-8);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(var(--bz-col-practicar), 1fr));
  gap: var(--bz-space-6);
}

.practicar__lista > li {
  display: flex;
}

/* Toda la tarjeta es el enlace: el objetivo táctil es la tarjeta entera */
.practicar__tarjeta {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  flex: 1;
  display: flex;
  flex-direction: column;
  border-radius: var(--bz-radius-xl);
  background: var(--bz-bg);
  box-shadow: var(--bz-ring);
  padding: var(--bz-space-7);
  transition:
    transform var(--bz-dur-card) var(--bz-ease),
    box-shadow var(--bz-dur-card) var(--bz-ease);
}

.practicar__tarjeta:hover {
  transform: translateY(var(--bz-lift));
  box-shadow: var(--bz-ring), var(--bz-shadow-md);
}

/* ---- Icono y halo ---------------------------------------------------- */
/* Pastilla de cristal: los círculos van detrás y el velo translúcido los
   difumina con backdrop-filter. Ningún ancestro lleva filter, transform ni
   will-change, así que el desenfoque de fondo funciona (§3). */
.practicar__icono {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  display: grid;
  place-items: center;
  width: var(--bz-icono-practicar);
  height: var(--bz-icono-practicar);
  border-radius: var(--bz-radius-lg);
  background: var(--bz-mint-250);
  color: var(--bz-accent);
}

/* El velo: es lo que convierte los círculos en cristal */
.practicar__icono::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(
    145deg,
    var(--bz-cristal-alto),
    var(--bz-cristal-bajo)
  );
  backdrop-filter: blur(var(--bz-blur-vidrio));
  box-shadow:
    inset 0 1px 0 var(--bz-cristal-filo),
    inset 0 -1px 0 var(--bz-cristal-canto);
}

/* El icono, sobre el cristal */
.practicar__icono > svg {
  z-index: 1;
}

/* Los dos círculos del archivo: nítidos y recortados al cuadrado. Con
   desenfoque y desborde el radio 16 se perdía y quedaba un borrón. */
.practicar__circulo {
  position: absolute;
  border-radius: var(--bz-radius-pill);
  animation: practicar-deriva var(--bz-dur-ambient-1) var(--bz-ease) infinite;
}

.practicar__circulo--1 {
  left: calc(var(--bz-space-3) * -1);
  top: var(--bz-space-6);
  width: var(--bz-circulo-1);
  height: var(--bz-circulo-1);
  background: var(--bz-circulo-verde);
}

.practicar__circulo--2 {
  left: var(--bz-space-8);
  top: calc(var(--bz-space-4) * -1);
  width: var(--bz-circulo-2);
  height: var(--bz-circulo-2);
  background: var(--bz-circulo-menta);
  animation-duration: var(--bz-dur-ambient-2);
  animation-direction: reverse;
}

.practicar__lista > li:nth-child(2) .practicar__circulo--1 {
  animation-duration: var(--bz-dur-ambient-3);
}

.practicar__lista > li:nth-child(3) .practicar__circulo--2 {
  animation-duration: var(--bz-dur-ambient-1);
}

/* ---- Texto ----------------------------------------------------------- */
.practicar__tarjeta-titulo {
  margin-top: var(--bz-space-5);
  font-size: var(--bz-size-h4-sm);
  color: var(--bz-ink);
}

.practicar__tarjeta-texto {
  margin-top: var(--bz-space-2);
  font-size: var(--bz-size-sm-plus);
  line-height: var(--bz-leading-normal);
  color: var(--bz-text);
}

.practicar__enlace {
  margin-top: auto;
  padding-top: var(--bz-space-5);
  display: inline-flex;
  align-items: center;
  gap: var(--bz-space-2);
  font-size: var(--bz-size-sm-plus);
  font-weight: var(--bz-weight-semibold);
  color: var(--bz-accent);
}

.practicar__flecha {
  display: grid;
  place-items: center;
  transition: transform var(--bz-dur-hover) var(--bz-ease);
}

.practicar__tarjeta:hover .practicar__flecha {
  transform: translateX(var(--bz-space-1));
}

@keyframes practicar-deriva {
  0% {
    transform: translate3d(0, 0, 0) scale(1);
  }
  50% {
    transform: translate3d(var(--bz-drift-x), var(--bz-drift-y), 0)
      scale(var(--bz-drift-scale));
  }
  100% {
    transform: translate3d(0, 0, 0) scale(1);
  }
}
/* ==========================================================================
   Breeze Lingo · SECCIÓN 07 · Nuestro impacto
   Prefijo .impacto__*. Sin literales: todo desde tokens.css.
   La pista es un scroller nativo con scroll-snap: el dedo funciona sin JS,
   y el JS solo añade avance automático, flechas y puntos.
   ========================================================================== */

.impacto {
  background: var(--bz-bg);
  padding-block: var(--bz-section-y);
}

/* ---- Cabecera -------------------------------------------------------- */
.impacto__cabecera {
  display: flex;
  flex-wrap: wrap;
  gap: var(--bz-space-6);
  justify-content: space-between;
  align-items: flex-end;
}

.impacto__eyebrow {
  display: inline-block;
  padding: var(--bz-space-2) var(--bz-space-4);
  border-radius: var(--bz-radius-eyebrow);
  background: var(--bz-mint-100);
  color: var(--bz-accent);
  font-size: var(--bz-size-2xs);
  font-weight: var(--bz-weight-semibold);
  letter-spacing: var(--bz-tracking-wide);
  text-transform: uppercase;
}

.impacto__titulo {
  margin-top: var(--bz-space-4);
  max-width: var(--bz-measure-narrow);
  font-size: var(--bz-size-h2);
  line-height: var(--bz-leading-snug);
}

.impacto__nota-marca {
  display: flex;
  align-items: center;
  gap: var(--bz-space-2);
}

.impacto__estrellas {
  display: flex;
  align-items: center;
  gap: var(--bz-space-1);
}

.impacto__estrellas--valor {
  gap: 0;
}

.impacto__estrella {
  display: grid;
  place-items: center;
  color: var(--bz-trust);
}

/* Las estrellas rellenas: el set las trae con trazo */
.impacto__estrella svg {
  fill: currentColor;
}

/* Una valoración de 4,8 no puede mostrar cinco estrellas llenas: la última
   se rellena a medias con un recorte, y la vacía se queda en el trazo. */
.impacto__estrella--media svg {
  clip-path: inset(0 var(--bz-estrella-media) 0 0);
}

.impacto__estrella--vacia {
  color: var(--bz-punto);
}

.impacto__estrella--vacia svg {
  fill: none;
}

.impacto__estrella--ambar {
  color: var(--bz-warning);
}

.impacto__nota-titulo {
  font-family: var(--bz-font-title);
  font-weight: var(--bz-weight-semibold);
  font-size: var(--bz-size-h4);
}

.impacto__nota-texto {
  margin-top: var(--bz-space-1);
  font-size: var(--bz-size-xs);
  font-weight: var(--bz-weight-medium);
  color: var(--bz-text);
}

/* ---- La pista -------------------------------------------------------- */
.impacto__carrusel {
  margin-top: var(--bz-space-8);
}

.impacto__pista {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: var(--bz-tarjeta-cita);
  gap: var(--bz-space-6);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  /* Sitio para que la sombra de la destacada no se recorte */
  padding: var(--bz-space-2);
  margin: calc(var(--bz-space-2) * -1);
  scrollbar-width: none;
}

.impacto__pista::-webkit-scrollbar {
  height: 0;
}

.impacto__tarjeta {
  scroll-snap-align: start;
  border-radius: var(--bz-radius-2xl);
  background: var(--bz-surface);
  box-shadow: var(--bz-shadow-md);
  transition:
    transform var(--bz-dur-card) var(--bz-ease),
    box-shadow var(--bz-dur-card) var(--bz-ease);
}

.impacto__tarjeta:hover {
  transform: translateY(var(--bz-lift-corto));
  box-shadow: var(--bz-shadow-xl);
}

/* La primera lleva el halo de marca del diseño */
.impacto__tarjeta--destacada {
  box-shadow: var(--bz-halo-marca);
}

.impacto__cita {
  margin: 0;
  padding: var(--bz-space-8);
  display: flex;
  flex-direction: column;
  height: 100%;
}

.impacto__comilla {
  font-family: var(--bz-font-title);
  font-weight: var(--bz-weight-semibold);
  font-size: var(--bz-size-comilla);
  line-height: var(--bz-leading-comilla);
  color: var(--bz-brand);
}

.impacto__cita-titulo {
  margin-top: var(--bz-space-6);
  font-size: var(--bz-size-h4);
}

.impacto__cita-texto {
  margin-top: var(--bz-space-3);
  font-size: var(--bz-size-sm);
  line-height: var(--bz-leading-normal);
  color: var(--bz-text);
}

/* Marca visible de que el texto no es la reseña real (§9) */
.impacto__pendiente {
  font-weight: var(--bz-weight-semibold);
  color: var(--bz-muted-ink);
}

.impacto__pie {
  margin-top: auto;
  padding-top: var(--bz-space-8);
  display: flex;
  align-items: center;
  gap: var(--bz-space-3);
}

.impacto__cara {
  flex-shrink: 0;
  width: var(--bz-space-12);
  height: var(--bz-space-12);
  border-radius: var(--bz-radius-pill);
  object-fit: cover;
}

.impacto__autor {
  flex: 1;
  min-width: 0;
  display: grid;
  align-content: center;
  gap: var(--bz-space-1);
  /* Altura estable: si el meta parte en dos líneas, el pie no crece y los
     avatares de las cuatro tarjetas siguen alineados. */
  min-height: var(--bz-space-12);
}

.impacto__nombre {
  font-family: var(--bz-font-title);
  font-weight: var(--bz-weight-semibold);
  font-size: var(--bz-size-sm);
  font-style: normal;
  color: var(--bz-ink);
}

.impacto__meta {
  font-size: var(--bz-size-xs);
  color: var(--bz-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.impacto__nota-valor {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: var(--bz-space-2);
}

.impacto__valor {
  font-family: var(--bz-font-title);
  font-weight: var(--bz-weight-semibold);
  font-size: var(--bz-size-sm);
  color: var(--bz-ink);
}

/* ---- Controles ------------------------------------------------------- */
.impacto__controles {
  margin-top: var(--bz-space-8);
  display: flex;
  flex-wrap: wrap;
  gap: var(--bz-space-4);
  justify-content: space-between;
  align-items: center;
}

.impacto__navegacion {
  display: flex;
  align-items: center;
  gap: var(--bz-space-5);
}

.impacto__flecha {
  display: grid;
  place-items: center;
  width: var(--bz-tap);
  height: var(--bz-tap);
  border-radius: var(--bz-radius-pill);
  background: var(--bz-surface);
  box-shadow: var(--bz-ring);
  color: var(--bz-ink);
  transition:
    box-shadow var(--bz-dur-hover) var(--bz-ease),
    transform var(--bz-dur-press) var(--bz-ease);
}

.impacto__flecha:hover {
  box-shadow: inset 0 0 0 1px var(--bz-mint-300);
}

.impacto__flecha:active {
  transform: scale(var(--bz-press));
}

.impacto__navegacion > .impacto__flecha + .impacto__flecha {
  margin-left: calc(var(--bz-space-5) - var(--bz-space-3));
}

.impacto__puntos {
  display: flex;
  align-items: center;
  gap: var(--bz-space-2);
}

.impacto__punto {
  display: block;
  width: var(--bz-space-2);
  height: var(--bz-space-2);
  border-radius: var(--bz-radius-pill);
  background: var(--bz-punto);
  transition:
    width var(--bz-dur-panel) var(--bz-ease),
    background var(--bz-dur-panel) var(--bz-ease);
}

/* El punto activo no se distingue solo por color: también se alarga */
.impacto__punto[aria-selected="true"] {
  width: var(--bz-space-6);
  background: var(--bz-accent);
}

.impacto__enlace {
  display: inline-flex;
  align-items: center;
  gap: var(--bz-space-2);
  min-height: var(--bz-tap);
  padding-inline: var(--bz-space-6);
  border-radius: var(--bz-radius-pill);
  box-shadow: inset 0 0 0 1.5px var(--bz-accent);
  font-size: var(--bz-size-sm);
  font-weight: var(--bz-weight-semibold);
  color: var(--bz-accent);
  transition: background var(--bz-dur-hover) var(--bz-ease);
}

.impacto__enlace:hover {
  background: var(--bz-mint-100);
  color: var(--bz-accent);
}

/* ---- Cortes: ~1000 / 640 / 420 -------------------------------------- */
@media (max-width: 640px) {
  .impacto__cita {
    padding: var(--bz-space-6);
  }

  .impacto__controles {
    justify-content: center;
  }
}

@media (max-width: 420px) {
  .impacto__enlace {
    width: 100%;
    justify-content: center;
  }
}
/* ==========================================================================
   Breeze Lingo · SECCIÓN 09 · CTA final
   Prefijo .cta__*. Sin literales: todo desde tokens.css.
   Manchas rehechas en CSS (§3), sin mix-blend-mode, para que el radio de la
   banda siga recortando en las cuatro esquinas.
   ========================================================================== */

.cta {
  background: var(--bz-surface);
  padding-block: 0 var(--bz-section-y);
}

.cta__banda {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-radius: var(--bz-radius-banda);
  background: linear-gradient(
    var(--bz-angulo-banda),
    var(--bz-night-2) var(--bz-stop-banda-1),
    var(--bz-night-3) var(--bz-stop-banda-2)
  );
  padding: clamp(var(--bz-space-6), 4vw, var(--bz-space-14));
}

/* ---- Rejilla --------------------------------------------------------- */
.cta__grid {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--bz-space-8);
  align-items: center;
}

/* ---- Copy ------------------------------------------------------------ */
.cta__eyebrow {
  display: inline-block;
  padding: var(--bz-space-2) var(--bz-space-4);
  border-radius: var(--bz-radius-eyebrow);
  background: color-mix(in srgb, var(--bz-brand) 16%, transparent);
  color: var(--bz-brand);
  font-size: var(--bz-size-2xs);
  font-weight: var(--bz-weight-semibold);
  letter-spacing: var(--bz-tracking-wide);
  text-transform: uppercase;
}

.cta__titulo {
  margin-top: var(--bz-space-5);
  font-size: var(--bz-size-h2-cta);
  line-height: var(--bz-leading-snug);
  color: var(--bz-on-night);
}

.cta__entrada {
  margin-top: var(--bz-space-4);
  max-width: var(--bz-measure-cta);
  font-size: var(--bz-size-entrada);
  line-height: var(--bz-leading-entrada);
  color: var(--bz-on-night-soft);
}

.cta__acciones {
  margin-top: var(--bz-space-8);
  display: flex;
  flex-wrap: wrap;
  gap: var(--bz-space-4);
}

.cta__boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--bz-tap);
  height: var(--bz-space-14);
  padding-inline: var(--bz-space-8);
  border-radius: var(--bz-radius-md);
  background: var(--bz-brand);
  color: var(--bz-ink-deep); /* §11: blanco sobre menta da 1,78:1 */
  font-size: var(--bz-size-body);
  font-weight: var(--bz-weight-semibold);
  box-shadow: var(--bz-shadow-brand);
  transition:
    background var(--bz-dur-hover) var(--bz-ease),
    box-shadow var(--bz-dur-hover) var(--bz-ease),
    transform var(--bz-dur-press) var(--bz-ease);
}

.cta__boton:hover {
  background: var(--bz-brand-hover);
  color: var(--bz-surface);
  box-shadow: var(--bz-shadow-brand-hover);
}

.cta__boton:active {
  background: var(--bz-brand-press);
  color: var(--bz-surface);
  transform: scale(var(--bz-press));
}

.cta__boton--linea {
  background: transparent;
  color: var(--bz-on-night);
  box-shadow: inset 0 0 0 1px var(--bz-on-night-mute);
}

.cta__boton--linea:hover {
  background: var(--bz-cristal-noche);
  color: var(--bz-on-night);
  box-shadow: inset 0 0 0 1px var(--bz-on-night);
}

/* ---- Panel de ranking ------------------------------------------------ */
/* Cristal claro que se despega de la banda, no oscuro sobre oscuro */
.cta__panel {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-radius: var(--bz-radius-xl);
  background: var(--bz-cristal-claro);
  box-shadow: var(--bz-shadow-cristal);
  backdrop-filter: blur(var(--bz-blur-esmerilado));
  padding: var(--bz-space-6);
}

.cta__panel-cabecera {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--bz-space-3);
}

.cta__panel-titulo {
  font-size: var(--bz-size-sm-plus);
  font-weight: var(--bz-weight-semibold);
  color: var(--bz-text);
}

.cta__insignia {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: var(--bz-space-2);
  padding: var(--bz-space-2) var(--bz-space-3);
  border-radius: var(--bz-radius-badge-cta);
  background: color-mix(in srgb, var(--bz-brand) 18%, transparent);
  font-size: var(--bz-size-2xs);
  font-weight: var(--bz-weight-semibold);
  color: var(--bz-accent);
  white-space: nowrap;
}

/* ---- Moneda que gira en 3D ------------------------------------------
   Un disco que rota sobre su eje vertical. El canto se ve porque la cara
   lleva un degradado que se oscurece hacia los bordes, y la propia
   rotación en perspectiva lo estrecha al pasar de perfil. */
.cta__moneda {
  flex-shrink: 0;
  display: block;
  width: var(--bz-moneda);
  height: var(--bz-moneda);
  perspective: var(--bz-moneda-perspectiva);
}

.cta__moneda-cara {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: var(--bz-radius-pill);
  background: linear-gradient(
    100deg,
    var(--bz-oro-canto) 0%,
    var(--bz-warning) 38%,
    var(--bz-oro-luz) 52%,
    var(--bz-warning) 66%,
    var(--bz-oro-canto) 100%
  );
  box-shadow: inset 0 0 0 1px var(--bz-oro-canto);
  transform-style: preserve-3d;
  animation: cta-moneda var(--bz-dur-moneda) linear infinite;
}

.cta__ranking {
  margin-top: var(--bz-space-5);
  display: grid;
  gap: var(--bz-space-2);
}

.cta__fila {
  display: flex;
  align-items: center;
  gap: var(--bz-space-3);
  padding: var(--bz-space-3) var(--bz-space-4);
  border-radius: var(--bz-radius-fila);
  background: var(--bz-cristal-fila);
}

/* Tu fila lleva anillo de marca y el nombre en 600: no solo color */
.cta__fila--tu {
  background: var(--bz-mint-100);
  box-shadow: var(--bz-ring-brand);
}

/* Medalla por puesto: el podio se lee de un vistazo, sin contar filas */
.cta__puesto {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: var(--bz-space-6);
  height: var(--bz-space-6);
  border-radius: var(--bz-radius-pill);
  font-size: var(--bz-size-2xs);
  font-weight: var(--bz-weight-semibold);
  color: var(--bz-ink-deep);
}

.cta__puesto--oro {
  background: var(--bz-oro);
}

.cta__puesto--plata {
  background: var(--bz-plata);
}

.cta__puesto--bronce {
  background: var(--bz-bronce);
}

/* ---- Aurora: velos de luz que derivan tras el cristal ---------------
   Tres capas con degradado cónico, radios asimétricos y ciclos largos y
   distintos, para que no se lea la repetición. Sin mix-blend-mode: el
   radio del panel tiene que seguir recortando en las cuatro esquinas. */
.cta__aurora {
  position: absolute;
  inset: 0;
  z-index: -1;
  display: block;
  border-radius: inherit;
  overflow: hidden;
}

.cta__velo {
  position: absolute;
  display: block;
  width: var(--bz-velo-size);
  height: var(--bz-velo-size);
  border-radius: 58% 42% 47% 53% / 46% 51% 49% 54%;
  filter: blur(var(--bz-blur-aurora));
  opacity: var(--bz-velo-op);
  animation: cta-aurora var(--bz-dur-aurora-1) var(--bz-ease) infinite;
}

.cta__aurora--banda .cta__velo {
  width: var(--bz-velo-size-xl);
  height: var(--bz-velo-size-xl);
  filter: blur(var(--bz-blur-aurora-xl));
  opacity: var(--bz-velo-op-banda);
}

.cta__velo--banda-1 {
  left: -18%;
  top: -70%;
  background: conic-gradient(
    from 20deg,
    var(--bz-brand),
    var(--bz-accent),
    var(--bz-violet),
    var(--bz-brand)
  );
  animation-duration: var(--bz-dur-aurora-2);
}

.cta__velo--banda-2 {
  right: -24%;
  bottom: -80%;
  background: conic-gradient(
    from 200deg,
    var(--bz-accent),
    var(--bz-mint-300),
    var(--bz-brand),
    var(--bz-accent)
  );
  animation-duration: var(--bz-dur-aurora-3);
  animation-direction: reverse;
}

.cta__velo--banda-3 {
  left: 34%;
  top: -40%;
  background: conic-gradient(
    from 300deg,
    var(--bz-violet),
    var(--bz-brand),
    var(--bz-accent),
    var(--bz-violet)
  );
  animation-duration: var(--bz-dur-aurora-4);
}

.cta__velo--1 {
  left: -30%;
  top: -60%;
  background: conic-gradient(
    from 0deg,
    var(--bz-brand),
    var(--bz-violet),
    var(--bz-accent),
    var(--bz-brand)
  );
}

.cta__velo--2 {
  right: -40%;
  top: -20%;
  background: conic-gradient(
    from 140deg,
    var(--bz-accent),
    var(--bz-brand),
    var(--bz-mint-300),
    var(--bz-accent)
  );
  animation-duration: var(--bz-dur-aurora-2);
  animation-direction: reverse;
}

.cta__velo--3 {
  left: 10%;
  bottom: -70%;
  background: conic-gradient(
    from 260deg,
    var(--bz-violet),
    var(--bz-brand),
    var(--bz-accent),
    var(--bz-violet)
  );
  animation-duration: var(--bz-dur-aurora-3);
}
.cta__cara {
  flex-shrink: 0;
  width: var(--bz-space-8);
  height: var(--bz-space-8);
  border-radius: var(--bz-radius-pill);
  object-fit: cover;
}

.cta__persona {
  flex: 1;
  min-width: 0;
  display: grid;
  gap: var(--bz-space-1);
}

.cta__nombre {
  font-size: var(--bz-size-xs);
  font-weight: var(--bz-weight-semibold);
  color: var(--bz-ink);
}

/* La fuente usa #8894A8 en las dos primeras filas, pero sobre el cristal al
   70 % da ~3,4:1 y no pasa AA: se sube a --bz-text (§11). */
.cta__meta {
  font-size: var(--bz-size-2xs);
  color: var(--bz-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cta__coins {
  flex-shrink: 0;
  font-family: var(--bz-font-title);
  font-weight: var(--bz-weight-semibold);
  font-size: var(--bz-size-sm-plus);
  color: var(--bz-accent);
}

.cta__pie {
  margin-top: var(--bz-space-4);
  display: flex;
  align-items: center;
  gap: var(--bz-space-2);
  font-size: var(--bz-size-2xs);
  color: var(--bz-text);
}

.cta__pie-icono {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  color: var(--bz-accent);
}

/* ---- Animaciones: solo transform y opacity -------------------------- */
@keyframes cta-moneda {
  from {
    transform: rotateY(0deg);
  }
  to {
    transform: rotateY(360deg);
  }
}

@keyframes cta-aurora {
  0% {
    transform: rotate(0deg) scale(1);
  }
  50% {
    transform: rotate(180deg) scale(var(--bz-drift-scale));
  }
  100% {
    transform: rotate(360deg) scale(1);
  }
}

/* ---- Cortes: ~1000 / 640 / 420 -------------------------------------- */
@media (min-width: 1000px) {
  .cta__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--bz-space-12);
  }
}

@media (max-width: 420px) {
  .cta__boton {
    width: 100%;
  }
}