/* Portada pública de Cripto Bot.

   Hoja aparte de la aplicación a propósito. El panel está pensado para
   trabajar horas: denso, tipografía pequeña, todo a la vista. Una portada
   tiene diez segundos para explicarse, así que aquí manda el aire, el
   contraste y el movimiento. Mezclar las dos hojas habría estropeado las dos.

   Se carga sola, sin depender de style.css, para que la portada sea lo más
   ligera posible: es la página que más gente va a abrir y muchos desde el
   móvil con mala conexión.

   Todo el movimiento se apaga con `prefers-reduced-motion`. Una página que se
   mueve sola marea a bastante gente, y a quien lo ha pedido en su sistema hay
   que hacerle caso. */

:root {
  --fondo: #0b1417;
  --fondo-2: #0e1a1e;
  --superficie: #12222738;
  --linea: #1e3a42;
  --linea-suave: #172d34;
  --texto: #e6f1f3;
  --texto-tenue: #93aeb5;
  --texto-debil: #6c8b93;
  --acento: #3ac7b4;
  --acento-2: #6ee7d2;
  --acento-hondo: #1f7f74;
  --morado: #a99bf0;
  --rojo: #f2635f;
  --display: "Space Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --r: 16px;
  --r-s: 10px;
  --ancho: 1140px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--fondo);
  color: var(--texto);
  font-family: var(--display);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3 { line-height: 1.15; margin: 0; letter-spacing: -0.02em; }
p { margin: 0; }
a { color: inherit; }

.ancho { width: min(100% - 40px, var(--ancho)); margin-inline: auto; }
.ancho.estrecho { max-width: 780px; }

/* El enlace de salto solo aparece con el tabulador: quien navega con teclado
   no debería tener que pasar por la cabecera entera en cada página. */
.saltar {
  position: absolute; left: -9999px; top: 8px; z-index: 100;
  background: var(--acento); color: #06181a; padding: 10px 16px;
  border-radius: var(--r-s); font-weight: 600; text-decoration: none;
}
.saltar:focus { left: 8px; }

/* ------------------------------------------------------------- cabecera */
.cabecera {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; gap: 16px;
  padding: 14px clamp(20px, 4vw, 40px);
  background: rgba(11, 20, 23, 0.72);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.25s, background 0.25s;
}
.cabecera.pegada { border-bottom-color: var(--linea-suave); background: rgba(11, 20, 23, 0.92); }
.marca {
  display: flex; align-items: center; gap: 10px;
  font-weight: 700; font-size: 1.05rem; text-decoration: none; letter-spacing: -0.01em;
}
.marca img { border-radius: 7px; }
.cab-nav { margin-left: auto; display: flex; align-items: center; gap: 12px; }

.idiomas { display: flex; gap: 2px; padding: 3px; border-radius: 999px;
  border: 1px solid var(--linea-suave); }
.idiomas a {
  padding: 4px 11px; border-radius: 999px; font-size: 0.76rem; font-weight: 600;
  text-decoration: none; color: var(--texto-debil); font-family: var(--mono);
  transition: background 0.2s, color 0.2s;
}
.idiomas a:hover { color: var(--texto); }
.idiomas a.on { background: var(--acento); color: #06181a; }

/* --------------------------------------------------------------- botones */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 22px; border-radius: 999px; border: 1px solid transparent;
  font-family: var(--display); font-size: 0.95rem; font-weight: 600;
  text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: transform 0.16s, box-shadow 0.16s, background 0.16s, border-color 0.16s;
}
.btn:hover { transform: translateY(-2px); }
.btn-primario {
  background: linear-gradient(135deg, var(--acento-2), var(--acento));
  color: #06181a; box-shadow: 0 8px 26px -10px var(--acento);
}
.btn-primario:hover { box-shadow: 0 14px 34px -10px var(--acento); }
.btn-borde { background: transparent; border-color: var(--linea); color: var(--texto); }
.btn-borde:hover { border-color: var(--acento); color: var(--acento); }
.btn-fantasma { background: transparent; color: var(--texto); padding: 9px 16px; font-size: 0.9rem; }
.btn-fantasma:hover { color: var(--acento); }
.btn-grande { padding: 16px 34px; font-size: 1.05rem; }
.btn-chico { padding: 8px 15px; font-size: 0.85rem; }
.btn[disabled] { opacity: 0.42; cursor: not-allowed; transform: none; box-shadow: none; }
.apagado { opacity: 0.42; }

/* El botón apagado con su etiqueta: se ve que la función existe y que llega,
   en vez de esconderla y que parezca que no está prevista. */
/* La etiqueta va DEBAJO, no encima. Puesta sobre la esquina del botón tapaba
   parte de su texto, que es justo lo que hay que poder leer para entender qué
   es lo que llega pronto. */
.cta-pronto {
  display: inline-flex; flex-direction: column; align-items: center; gap: 7px;
}
.cta-pronto.ancho-total, .cta-pronto.ancho-total .btn { width: 100%; }
.pronto {
  background: rgba(169, 155, 240, 0.14); color: var(--morado);
  border: 1px solid rgba(169, 155, 240, 0.35);
  font-family: var(--mono); font-size: 0.62rem; font-weight: 600;
  letter-spacing: 0.09em; text-transform: uppercase;
  padding: 2px 10px; border-radius: 999px; white-space: nowrap;
  animation: pulso 2.6s ease-in-out infinite;
}

/* ---------------------------------------------------------------- portada */
.hero {
  position: relative; overflow: hidden;
  padding: clamp(56px, 9vw, 110px) 0 clamp(50px, 7vw, 90px);
  display: grid; place-items: center; text-align: center;
}
#velas { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0.42; }
/* Un velo entre las velas y el texto. Sin él, el párrafo cae justo encima de
   las mechas y hay líneas que se leen mal: el gráfico es ambiente, y el
   ambiente nunca puede ganarle al texto que tiene que leerse. */
.hero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 1;
  background: radial-gradient(62% 56% at 50% 44%,
    rgba(11, 20, 23, 0.94) 0%, rgba(11, 20, 23, 0.78) 46%, transparent 80%);
}
/* Dos manchas de color que respiran despacio. Es lo que separa una página que
   está viva de una captura de pantalla. */
.aurora {
  position: absolute; inset: -30% -10% auto; height: 130%;
  background:
    radial-gradient(46% 42% at 22% 26%, rgba(58, 199, 180, 0.20), transparent 65%),
    radial-gradient(40% 38% at 78% 18%, rgba(169, 155, 240, 0.16), transparent 65%);
  filter: blur(12px);
  animation: respirar 15s ease-in-out infinite alternate;
  pointer-events: none;
}
.hero-caja { position: relative; z-index: 2; width: min(100% - 40px, 900px); }

.gancho {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 6px 15px 6px 11px; margin-bottom: 22px;
  border: 1px solid var(--linea); border-radius: 999px;
  background: rgba(18, 34, 39, 0.55);
  font-family: var(--mono); font-size: 0.76rem; color: var(--texto-tenue);
}
.punto {
  width: 7px; height: 7px; border-radius: 50%; background: var(--acento);
  box-shadow: 0 0 0 0 var(--acento); animation: latir 2.2s infinite;
}

.hero h1 {
  font-size: clamp(2.1rem, 6.2vw, 4.1rem); font-weight: 700;
  background: linear-gradient(180deg, #ffffff 20%, #9fd8d0 130%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero-texto {
  margin: 22px auto 0; max-width: 640px;
  font-size: clamp(1rem, 2.1vw, 1.16rem); color: var(--texto-tenue);
}
.hero-botones {
  margin-top: 34px; display: flex; gap: 16px; justify-content: center;
  align-items: flex-start; flex-wrap: wrap;
}

/* ------------------------------------------------------------ cifras vivas */
.vivo {
  margin: 46px auto 0; max-width: 760px; padding: 20px 24px 16px;
  border: 1px solid var(--linea-suave); border-radius: var(--r);
  background: linear-gradient(180deg, rgba(18, 34, 39, 0.75), rgba(11, 20, 23, 0.45));
  backdrop-filter: blur(8px);
}
.vivo-cab {
  display: flex; align-items: center; gap: 8px; justify-content: center;
  font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--texto-debil); margin-bottom: 14px;
}
.latido {
  width: 8px; height: 8px; border-radius: 50%; background: var(--acento);
  animation: latir 1.8s infinite;
}
.vivo-cifras {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; text-align: center;
}
.vivo-cifras b {
  display: block; font-family: var(--mono); font-size: clamp(1.3rem, 3.4vw, 1.9rem);
  font-weight: 600; color: var(--acento); font-variant-numeric: tabular-nums;
}
.vivo-cifras span { font-size: 0.72rem; color: var(--texto-debil); }
.capacidad { margin-top: 16px; }
.barra {
  height: 6px; border-radius: 999px; background: var(--linea-suave); overflow: hidden;
}
.barra i {
  display: block; height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, var(--acento-hondo), var(--acento-2));
  transition: width 1.1s cubic-bezier(0.22, 1, 0.36, 1);
}
.capacidad small { display: block; margin-top: 7px; font-size: 0.72rem; color: var(--texto-debil); }
.capacidad small b { color: var(--texto-tenue); font-family: var(--mono); }
.vivo-pie { margin-top: 12px; font-size: 0.7rem; color: var(--texto-debil); text-align: center; }

/* -------------------------------------------------------------- secciones */
.seccion { padding: clamp(56px, 8vw, 100px) 0; }
.seccion.alterna { background: var(--fondo-2); border-block: 1px solid var(--linea-suave); }
.seccion h2 {
  font-size: clamp(1.6rem, 3.9vw, 2.5rem); font-weight: 700; text-align: center;
}
.entrada {
  margin: 14px auto 0; max-width: 640px; text-align: center; color: var(--texto-tenue);
}

.pasos {
  margin-top: 46px; display: grid; gap: 18px;
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
}
.paso {
  padding: 26px 24px; border-radius: var(--r);
  border: 1px solid var(--linea-suave); background: var(--superficie);
  position: relative; overflow: hidden;
}
.paso::after {
  content: ""; position: absolute; inset: 0 auto 0 0; width: 3px;
  background: linear-gradient(180deg, var(--acento), transparent);
  transform: scaleY(0); transform-origin: top; transition: transform 0.5s;
}
.paso.visible::after { transform: scaleY(1); }
.paso-n {
  font-family: var(--mono); font-size: 0.78rem; color: var(--acento); font-weight: 600;
}
.paso h3 { margin: 8px 0 10px; font-size: 1.16rem; }
.paso p { color: var(--texto-tenue); font-size: 0.95rem; }

/* La escalera que se dibuja sola: los peldaños los pinta el JavaScript. */
.escalera-demo {
  margin-top: 40px; padding: 22px; border-radius: var(--r);
  border: 1px solid var(--linea-suave); background: var(--superficie);
}
.ed-precio {
  font-family: var(--mono); font-size: 0.8rem; color: var(--texto-debil);
  text-align: right; margin-bottom: 10px;
}
.ed-precio span { color: var(--acento); font-weight: 600; }
.ed-pista { display: flex; flex-direction: column; gap: 5px; }
.ed-peldano {
  display: flex; align-items: center; gap: 12px;
  padding: 8px 12px; border-radius: var(--r-s);
  border: 1px dashed var(--linea-suave); background: rgba(11, 20, 23, 0.5);
  font-family: var(--mono); font-size: 0.78rem; color: var(--texto-debil);
  opacity: 0.5; transition: all 0.45s;
}
.ed-peldano.hecho {
  opacity: 1; border-style: solid; border-color: var(--acento-hondo);
  background: rgba(58, 199, 180, 0.08); color: var(--texto-tenue);
}
.ed-peldano.vendido { border-color: var(--acento); background: rgba(58, 199, 180, 0.18); }
.ed-peldano i { font-style: normal; margin-left: auto; color: var(--acento); }

/* --------------------------------------------------------------- ventajas */
.rejilla {
  margin-top: 46px; display: grid; gap: 18px;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
}
.tarjeta {
  padding: 26px 24px; border-radius: var(--r);
  border: 1px solid var(--linea-suave); background: var(--superficie);
  transition: transform 0.25s, border-color 0.25s;
}
.tarjeta:hover { transform: translateY(-4px); border-color: var(--linea); }
.tarjeta .icono { font-size: 1.7rem; line-height: 1; }
.tarjeta h3 { margin: 14px 0 9px; font-size: 1.08rem; }
.tarjeta p { color: var(--texto-tenue); font-size: 0.93rem; }

/* ----------------------------------------------------------------- planes */
.planes {
  margin-top: 46px; display: grid; gap: 20px;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  align-items: start;
}
.plan {
  position: relative; padding: 30px 26px; border-radius: var(--r);
  border: 1px solid var(--linea-suave); background: var(--superficie);
  display: flex; flex-direction: column;
}
.plan.destacado {
  border-color: var(--acento-hondo);
  background: linear-gradient(180deg, rgba(58, 199, 180, 0.09), rgba(18, 34, 39, 0.3));
  box-shadow: 0 24px 60px -34px var(--acento);
}
.cinta {
  position: absolute; top: -11px; left: 26px;
  background: var(--acento); color: #06181a; border-radius: 999px;
  font-family: var(--mono); font-size: 0.62rem; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase; padding: 3px 12px;
}
.plan h3 { font-size: 1.3rem; }
.plan-resumen { margin-top: 5px; color: var(--texto-debil); font-size: 0.88rem; }
.precio {
  margin: 18px 0 4px; font-family: var(--mono); font-size: 2.6rem; font-weight: 600;
  line-height: 1; display: flex; align-items: baseline; gap: 3px;
}
.precio .moneda { font-size: 1.2rem; color: var(--texto-debil); }
.precio small { font-size: 0.78rem; font-family: var(--display); color: var(--texto-debil);
  font-weight: 400; margin-left: 6px; }
.plan ul { list-style: none; margin: 22px 0; padding: 0; display: grid; gap: 11px; }
.plan li {
  position: relative; padding-left: 26px; font-size: 0.92rem; color: var(--texto-tenue);
}
.plan li::before {
  content: "✓"; position: absolute; left: 0; top: -1px;
  color: var(--acento); font-weight: 700;
}
.plan .btn, .plan .cta-pronto { margin-top: auto; }
.nota-planes {
  margin-top: 22px; text-align: center; font-size: 0.8rem; color: var(--texto-debil);
}

.referidos {
  margin-top: 40px; padding: 26px; border-radius: var(--r);
  border: 1px dashed var(--linea); text-align: center;
}
.referidos h3 { font-size: 1.1rem; }
.referidos p { margin: 10px auto 18px; max-width: 600px; color: var(--texto-tenue);
  font-size: 0.92rem; }
.ref-enlaces { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }

/* -------------------------------------------------------------------- FAQ */
.faq { margin-top: 40px; display: grid; gap: 10px; }
.faq details {
  border: 1px solid var(--linea-suave); border-radius: var(--r-s);
  background: var(--superficie); overflow: hidden;
}
.faq summary {
  padding: 17px 20px; cursor: pointer; font-weight: 600; font-size: 1rem;
  list-style: none; display: flex; align-items: center; gap: 12px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; margin-left: auto; color: var(--acento);
  font-family: var(--mono); font-size: 1.2rem; transition: transform 0.25s;
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq summary:hover { color: var(--acento); }
.faq p { padding: 0 20px 18px; color: var(--texto-tenue); font-size: 0.95rem; }

/* ----------------------------------------------------------------- cierre */
.cierre {
  padding: clamp(60px, 9vw, 110px) 0; text-align: center;
  background:
    radial-gradient(60% 130% at 50% 0%, rgba(58, 199, 180, 0.13), transparent 70%),
    var(--fondo);
  border-top: 1px solid var(--linea-suave);
}
.cierre h2 { font-size: clamp(1.6rem, 4.2vw, 2.6rem); }
.cierre p { margin: 16px auto 30px; max-width: 560px; color: var(--texto-tenue); }

/* -------------------------------------------------------------------- pie */
.pie { padding: 34px 0 44px; border-top: 1px solid var(--linea-suave); background: var(--fondo-2); }
.riesgo {
  font-size: 0.8rem; color: var(--texto-debil); max-width: 780px;
  padding: 14px 18px; border-radius: var(--r-s);
  border: 1px solid var(--linea-suave); background: rgba(242, 99, 95, 0.05);
}
.riesgo strong { color: var(--rojo); }
.pie-fila {
  margin-top: 22px; display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
  font-size: 0.82rem; color: var(--texto-debil);
}
.pie-fila a { color: var(--texto-debil); text-decoration: none; }
.pie-fila a:hover { color: var(--acento); }
.pie-fila .idiomas { margin-left: auto; }

/* ------------------------------------------------------------ movimiento */
/* Cada bloque entra cuando llega a la pantalla. El retardo --r escalona los
   hermanos para que la fila no aparezca de golpe como un telón. */
.revelar {
  opacity: 0; transform: translateY(22px);
  transition: opacity 0.65s ease, transform 0.65s cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: var(--r, 0ms);
}
.revelar.visible { opacity: 1; transform: none; }

@keyframes latir {
  0% { box-shadow: 0 0 0 0 rgba(58, 199, 180, 0.6); }
  70% { box-shadow: 0 0 0 11px rgba(58, 199, 180, 0); }
  100% { box-shadow: 0 0 0 0 rgba(58, 199, 180, 0); }
}
@keyframes respirar {
  from { transform: translate3d(-3%, 0, 0) scale(1); }
  to { transform: translate3d(3%, 2%, 0) scale(1.09); }
}
@keyframes pulso {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.55; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important; animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .revelar { opacity: 1; transform: none; }
  #velas { display: none; }
}

/* ---------------------------------------------------------------- pantalla */
@media (max-width: 700px) {
  body { font-size: 16px; }
  .vivo-cifras { grid-template-columns: repeat(2, 1fr); gap: 16px 10px; }
  .hero-botones { flex-direction: column; align-items: stretch; }
  .hero-botones .btn, .cta-pronto, .cta-pronto .btn { width: 100%; }
  .cabecera { padding: 11px 16px; }
  .marca span { font-size: 0.98rem; }
  .pie-fila .idiomas { margin-left: 0; }
}
/* En pantallas muy estrechas se aprieta el botón de entrar, pero NO se
   esconde: es la acción principal de quien ya tiene cuenta y quitarla del
   móvil, que es donde más se entra, sería quitarla para casi todos. */
@media (max-width: 400px) {
  .cabecera { gap: 8px; padding: 10px 12px; }
  .cab-nav { gap: 6px; }
  .cab-nav .btn-fantasma { padding: 8px 10px; font-size: 0.84rem; }
  .idiomas a { padding: 4px 8px; font-size: 0.7rem; }
  .marca span { font-size: 0.92rem; }
}

/* ------------------------------------------------ pruebas: bot vs mercado */
/* La comparación es el argumento entero de la sección, así que se dibuja: dos
   barras a la misma escala. Los números van escritos al lado porque de la
   barra se saca la sensación y del número, la conclusión. */
.pruebas {
  margin-top: 44px; display: grid; gap: 18px;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
}
.prueba {
  padding: 24px; border-radius: var(--r);
  border: 1px solid var(--linea-suave); background: var(--superficie);
}
.prueba h3 { font-family: var(--mono); font-size: 1rem; color: var(--acento); }
.barras { margin: 18px 0 14px; display: grid; gap: 12px; }
.barra-fila { display: grid; grid-template-columns: 1fr; gap: 5px; }
.barra-fila .et { font-size: 0.76rem; color: var(--texto-debil); }
.barra-fila b {
  font-family: var(--mono); font-size: 1.05rem; color: var(--acento);
  font-variant-numeric: tabular-nums;
}
.barra-fila.tenue b { color: var(--texto-tenue); font-size: 0.92rem; }
.barra-fila .barra { height: 9px; }
.barra i.crece { width: 0; transition: width 1.1s cubic-bezier(0.22, 1, 0.36, 1); }
.barra i.gris { background: linear-gradient(90deg, #3f5a61, #6c8b93); }
.visible .barra i.crece, .prueba.visible .barra i.crece { width: var(--w); }
.prueba-pie {
  display: flex; gap: 14px; flex-wrap: wrap; padding-top: 12px;
  border-top: 1px solid var(--linea-suave);
  font-size: 0.74rem; color: var(--texto-debil); font-family: var(--mono);
}
.condiciones {
  margin: 24px auto 0; max-width: 760px; text-align: center;
  font-size: 0.82rem; color: var(--texto-debil);
}
/* El aviso no es letra pequeña escondida: va del ancho del texto, con marco y
   en el color de advertencia, justo debajo de la cifra que lo necesita. */
.aviso-fuerte {
  margin: 16px auto 0; max-width: 760px; padding: 13px 18px;
  border: 1px solid rgba(242, 99, 95, 0.3); border-radius: var(--r-s);
  background: rgba(242, 99, 95, 0.06);
  font-size: 0.83rem; color: #d99a97; text-align: center;
}

/* ------------------------------------------------------------- simulador */
.sim {
  margin-top: 42px; display: grid; gap: 24px;
  grid-template-columns: minmax(280px, 380px) 1fr;
  padding: 26px; border-radius: var(--r);
  border: 1px solid var(--linea-suave); background: var(--superficie);
}
.sim-mandos { display: grid; gap: 18px; align-content: start; }
.campo label {
  display: block; font-size: 0.78rem; color: var(--texto-tenue); margin-bottom: 7px;
}
.campo label b { color: var(--acento); font-family: var(--mono); }
.con-simbolo { position: relative; }
.con-simbolo span {
  position: absolute; left: 13px; top: 50%; transform: translateY(-50%);
  color: var(--texto-debil); font-family: var(--mono); font-size: 0.9rem;
}
.sim input[type="number"] {
  width: 100%; padding: 11px 12px 11px 28px; border-radius: var(--r-s);
  border: 1px solid var(--linea); background: var(--fondo);
  color: var(--texto); font-family: var(--mono); font-size: 1rem;
}
.sim input[type="number"]:focus { outline: none; border-color: var(--acento); }
.sim input[type="range"] { width: 100%; accent-color: var(--acento); }
.enlace {
  margin-top: 6px; background: none; border: 0; padding: 0; cursor: pointer;
  color: var(--acento); font-size: 0.74rem; font-family: var(--display);
  text-decoration: underline; text-underline-offset: 3px;
}
.ritmos { display: grid; gap: 6px; }
.ritmos button {
  display: flex; align-items: baseline; gap: 8px; text-align: left;
  padding: 9px 13px; border-radius: var(--r-s); cursor: pointer;
  border: 1px solid var(--linea-suave); background: var(--fondo);
  color: var(--texto-tenue); font-family: var(--display); font-size: 0.86rem;
  transition: border-color 0.2s, color 0.2s, background 0.2s;
}
.ritmos button small {
  margin-left: auto; font-family: var(--mono); font-size: 0.78rem;
  color: var(--texto-debil);
}
.ritmos button small span { font-size: 0.66rem; }
.ritmos button:hover { border-color: var(--linea); color: var(--texto); }
.ritmos button.on {
  border-color: var(--acento); color: var(--texto);
  background: rgba(58, 199, 180, 0.09);
}
.ritmos button.on small { color: var(--acento); }
.ritmo-pie { margin-top: 7px; font-size: 0.72rem; color: var(--texto-debil); }
.conmutador {
  display: flex; align-items: center; gap: 10px; cursor: pointer;
  font-size: 0.85rem; color: var(--texto-tenue);
}
.conmutador input { accent-color: var(--acento); width: 17px; height: 17px; }
.conmutador b { color: #f0a75e; font-family: var(--mono); }

.sim-salida { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
#simGrafico { width: 100%; height: 150px; display: block; }
.sim-cifras {
  display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
.sim-cifras > div {
  padding: 13px 15px; border-radius: var(--r-s);
  border: 1px solid var(--linea-suave); background: var(--fondo);
}
.sim-cifras > div.destaca { border-color: var(--acento-hondo); }
/* Solo el rótulo de arriba, no cualquier span de dentro: la regla general
   ponía `display:block` a todos y eso le gana al atributo `hidden`, así que la
   coletilla del BTC salía siempre, incluso con la acumulación apagada. */
.sim-cifras > div > span {
  display: block; font-size: 0.68rem; text-transform: uppercase;
  letter-spacing: 0.08em; color: var(--texto-debil); font-family: var(--mono);
}
.sim-cifras [hidden] { display: none; }
.sim-cifras b {
  display: block; margin-top: 5px; font-family: var(--mono);
  font-size: 1.3rem; font-variant-numeric: tabular-nums;
}
.sim-cifras b.verde { color: var(--acento); }
.sim-cifras b.naranja { color: #f0a75e; font-size: 1.05rem; }
.sim-cifras small {
  display: block; margin-top: 4px; font-size: 0.68rem; color: var(--texto-debil);
}
.sim-cifras small i { font-style: normal; color: var(--acento); font-family: var(--mono); }

/* ------------------------------------------------------------- vs grid */
.comparativa {
  margin-top: 42px; border: 1px solid var(--linea-suave); border-radius: var(--r);
  overflow: hidden;
}
.comp-cab, .comp-fila {
  display: grid; grid-template-columns: 0.8fr 1.1fr 1.1fr; gap: 16px;
  padding: 15px 20px; align-items: start;
}
.comp-cab {
  background: var(--fondo); font-family: var(--mono); font-size: 0.7rem;
  letter-spacing: 0.1em; text-transform: uppercase;
}
.comp-fila { border-top: 1px solid var(--linea-suave); font-size: 0.9rem; }
.comp-fila:nth-child(odd) { background: rgba(11, 20, 23, 0.35); }
.comp-fila .tema { color: var(--texto); font-weight: 600; font-size: 0.88rem; }
.comp-cab .mal, .comp-fila .mal { color: var(--texto-debil); }
.comp-cab .bien { color: var(--acento); }
.comp-fila .bien { color: var(--texto-tenue); }
.comp-fila .bien::before, .comp-fila .mal::before {
  font-family: var(--mono); margin-right: 7px; font-weight: 700;
}
.comp-fila .bien::before { content: "✓"; color: var(--acento); }
.comp-fila .mal::before { content: "✗"; color: var(--rojo); opacity: 0.65; }

/* -------------------------------------------------------------- activos */
.bloques { margin-top: 34px; display: grid; gap: 16px; }
.bloque {
  padding: 20px 22px; border-radius: var(--r);
  border: 1px solid var(--linea-suave); background: var(--superficie);
  color: var(--texto-tenue); font-size: 0.96rem;
}
.bloque.acento {
  border-color: var(--acento-hondo);
  background: linear-gradient(180deg, rgba(58, 199, 180, 0.08), transparent);
}

/* --------------------------------------------------------------- riesgo */
.destacado-riesgo {
  color: var(--texto) !important; font-size: 1.05rem; font-weight: 600;
}
.tarjeta.aviso { border-color: rgba(242, 99, 95, 0.28); }
.tarjeta.aviso:hover { border-color: rgba(242, 99, 95, 0.5); }
.tarjeta.aviso h3 { color: #e8a5a2; }

@media (max-width: 860px) {
  .sim { grid-template-columns: 1fr; }
  .comp-cab, .comp-fila { grid-template-columns: 1fr; gap: 6px; padding: 14px 16px; }
  .comp-cab { display: none; }
  .comp-fila .tema { margin-bottom: 4px; }
}

/* --------------------------------------------------------- el bot en vivo */
/* El reproductor. Los mandos son grandes a propósito: la mayoría de la gente
   va a abrir esta página desde el móvil, y un botón de 20 píxeles no se pulsa
   con el dedo. Los 44px son el mínimo que recomiendan Apple y Google. */
.visor {
  margin-top: 40px; border-radius: var(--r); overflow: hidden;
  border: 1px solid var(--linea-suave); background: var(--superficie);
}
.visor-cab {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 13px 18px; border-bottom: 1px solid var(--linea-suave);
  background: rgba(11, 20, 23, 0.5);
}
.visor-par { font-family: var(--mono); font-weight: 600; color: var(--texto); }
.visor-est { font-size: 0.8rem; color: var(--texto-debil); }
.visor-modo {
  margin-left: auto; font-family: var(--mono); font-size: 0.62rem;
  letter-spacing: 0.08em; text-transform: uppercase;
  padding: 3px 10px; border-radius: 999px;
  background: rgba(58, 199, 180, 0.14); color: var(--acento);
  border: 1px solid rgba(58, 199, 180, 0.32);
}
.visor-modo.real {
  background: rgba(242, 169, 59, 0.14); color: #f2a93b;
  border-color: rgba(242, 169, 59, 0.34);
}
.visor-lienzo { height: 340px; }

.visor-mandos {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 12px 18px; border-top: 1px solid var(--linea-suave);
}
.periodos { display: flex; gap: 4px; padding: 3px; border-radius: 999px;
  border: 1px solid var(--linea-suave); }
.periodos button {
  padding: 7px 14px; border-radius: 999px; border: 0; cursor: pointer;
  background: transparent; color: var(--texto-debil);
  font-family: var(--display); font-size: 0.82rem; font-weight: 600;
}
.periodos button.on { background: var(--acento); color: #06181a; }
.mandos-play { display: flex; align-items: center; gap: 8px; }
.mando {
  width: 44px; height: 44px; border-radius: 50%; cursor: pointer;
  border: 1px solid var(--linea); background: var(--fondo);
  color: var(--texto); font-size: 1rem; line-height: 1;
  display: grid; place-items: center;
  transition: border-color 0.2s, transform 0.15s;
}
.mando:hover { border-color: var(--acento); transform: translateY(-2px); }
.mando.grande { width: 54px; height: 54px; font-size: 1.15rem;
  background: linear-gradient(135deg, var(--acento-2), var(--acento));
  color: #06181a; border: 0; }
.mando.on { border-color: var(--acento); color: var(--acento); }
.visor-mandos input[type="range"] {
  flex: 1; min-width: 160px; accent-color: var(--acento); height: 28px;
}

.visor-cifras {
  display: grid; gap: 1px; background: var(--linea-suave);
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  border-top: 1px solid var(--linea-suave);
}
.visor-cifras > div { background: var(--fondo-2); padding: 14px 18px; }
.visor-cifras span {
  display: block; font-family: var(--mono); font-size: 0.64rem;
  letter-spacing: 0.09em; text-transform: uppercase; color: var(--texto-debil);
}
.visor-cifras b {
  display: block; margin-top: 5px; font-family: var(--mono); font-size: 1.15rem;
}
.visor-cifras b.verde { color: var(--acento); }
.visor-cifras b.rojo { color: var(--rojo); }
.visor-cifras small {
  display: block; margin-top: 3px; font-size: 0.7rem; color: var(--texto-debil);
}

@media (max-width: 700px) {
  .visor-lienzo { height: 260px; }
  .visor-mandos { gap: 10px; padding: 12px; justify-content: center; }
  .mandos-play { order: -1; width: 100%; justify-content: center; }
  .periodos { width: 100%; justify-content: center; }
  .visor-mandos input[type="range"] { width: 100%; flex: 1 1 100%; }
  .visor-cifras { grid-template-columns: repeat(2, 1fr); }
  .visor-cab { padding: 11px 14px; gap: 8px; }
  .visor-modo { margin-left: 0; }
}
/* Los mandos llevan SVG y no emoji: un control tiene que verse siempre, y un
   emoji depende de que el sistema tenga fuente para él —en un servidor sin
   pantalla salen cuadros vacíos, y en algún móvil viejo también. */
.mando svg { width: 18px; height: 18px; fill: currentColor; stroke: none; }
.mando.grande svg { width: 22px; height: 22px; }
.mando svg .onda { fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; opacity: 0.15; transition: opacity 0.2s; }