/* Guías de quantsentiment.com: se cargan después de /legal/legal.css. Usan las piezas de la
   landing publicada (src/beta/landing-beta.css) y de las pantallas de la app: tarjetas en
   panel lavanda, cajas de app, ventana, cifras en mono, rótulo «Datos de ejemplo» con punto
   lavanda y el perfil de gamma por strike con barras horizontales (calls en lavanda a la
   derecha, puts en gris a la izquierda) y niveles en píldora. Sin humo ni animaciones. */
:root {
  --panel-2: #1c1a24;
  --lav-velo: rgba(197, 175, 255, 0.14);
  --panel-lav: rgba(197, 175, 255, 0.055);
  --gris-barra: #4a4658;
  --r-grande: 24px;
  --sombra: inset 0 1px 0 var(--luz), 0 24px 60px rgba(0, 0, 0, 0.32);
}

.lectura h3 { margin: 26px 0 8px; font: 500 16px/1.4 var(--display); color: var(--t1); letter-spacing: -0.01em; }
.lectura ol { margin: 12px 0 0; padding-left: 22px; }
.lectura ol li { margin: 8px 0; }
.lectura ol li::marker { color: var(--lav); font-family: var(--mono); font-size: 0.9em; }

/* Respuesta corta: tarjeta como las de «Para qué sirve» */
.corto { margin-top: 28px; padding: 26px; border: 1px solid var(--linea); border-radius: var(--r-grande); background: var(--panel-lav); }
.corto h2 { margin: 0 0 10px; font: 500 11px/1.2 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--lav); }
.corto ul { margin-top: 4px; }
.corto li { color: var(--t1); }

/* Rótulo de ficción: el mismo que «Datos de ejemplo» de la landing */
.ficticio {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 12px;
  font: 500 10px/1 var(--mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--t3);
  white-space: nowrap;
}
.ficticio::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--lav); opacity: 0.8; }

/* Caja de app */
.ejemplo-caja { margin-top: 14px; padding: 18px; border: 1px solid var(--linea); border-radius: 18px; background: rgba(21, 20, 28, 0.82); }
.ejemplo-caja p + p { margin-top: 10px; }

.formula {
  margin: 14px 0;
  padding: 12px 14px;
  border-radius: 12px;
  background: var(--lav-velo);
  font: 500 13.5px/1.5 var(--mono);
  color: var(--t1);
  overflow-x: auto;
  white-space: nowrap;
}

.tabla { margin-top: 14px; overflow-x: auto; border: 1px solid var(--linea); border-radius: 14px; background: var(--panel); }
.tabla table { width: 100%; min-width: 520px; border-collapse: collapse; font-size: 14.5px; }
.tabla th, .tabla td { padding: 10px 12px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--linea); }
.tabla tr:last-child td { border-bottom: 0; }
.tabla th { font: 500 10.5px/1.3 var(--mono); letter-spacing: 0.09em; text-transform: uppercase; color: var(--t3); }
.tabla td.num, .tabla th.num { text-align: right; font-family: var(--mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
.tabla td:first-child { color: var(--t1); }

.contra { margin-top: 12px; padding: 12px 16px; border-radius: 12px; border: 1px solid var(--linea); color: var(--t3); }
.bien { margin-top: 10px; padding: 12px 16px; border-radius: 12px; background: var(--lav-velo); color: var(--t1); }
.contra b, .bien b { display: block; margin-bottom: 4px; font: 500 10.5px/1.3 var(--mono); letter-spacing: 0.09em; text-transform: uppercase; color: var(--t3); }
.bien b { color: var(--lav); }

/* Enlace a las pantallas: tarjeta lavanda con botón como los de la portada */
.ir-demo { display: grid; gap: 10px; justify-items: start; margin-top: 40px; padding: 26px; border: 1px solid var(--linea); border-radius: var(--r-grande); background: var(--panel-lav); }
.ir-demo .k { font: 500 11px/1.2 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--lav); }
.ir-demo a {
  display: inline-flex;
  align-items: center;
  min-height: 46px;
  margin-top: 6px;
  padding: 0 22px;
  border-radius: 9999px;
  border: 1px solid var(--linea-2);
  background: rgba(255, 255, 255, 0.03);
  color: var(--t1);
  font: 600 15px/1 var(--sans);
  text-decoration: none;
  transition: background-color 160ms, border-color 160ms;
}
.ir-demo a:hover { border-color: rgba(255, 255, 255, 0.4); background: rgba(255, 255, 255, 0.06); }

.fuentes { font-size: 14px; }
.fuentes li { color: var(--t3); }
.fuentes a { color: var(--t2); }

/* Índice de guías: tarjetas como las de «Para qué sirve» */
.indice-guias { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 28px; padding: 0; list-style: none; }
.indice-guias li { margin: 0; }
.indice-guias li::marker { content: ""; }
.indice-guias a { display: grid; gap: 10px; align-content: start; height: 100%; padding: 26px; border: 1px solid var(--linea); border-radius: var(--r-grande); background: var(--panel-lav); text-decoration: none; transition: border-color 200ms; }
.indice-guias a:hover { border-color: var(--linea-2); }
.indice-guias i { font: 500 11px/1.2 var(--mono); font-style: normal; letter-spacing: 0.1em; text-transform: uppercase; color: var(--lav); }
.indice-guias b { font: 400 22px/1.25 var(--display); color: var(--t1); letter-spacing: -0.02em; }
.indice-guias span { color: var(--t2); font-size: 15px; }
@media (max-width: 700px) { .indice-guias { grid-template-columns: minmax(0, 1fr); } .indice-guias a, .corto, .ir-demo { padding: 22px; } }

/* Glosario: ventana de app con el perfil ficticio */
.figura {
  margin: 22px 0 0;
  padding: 12px;
  border: 1px solid var(--linea-2);
  border-radius: 28px;
  background: linear-gradient(180deg, rgba(30, 28, 42, 0.78), rgba(16, 15, 24, 0.86));
  box-shadow: inset 0 1px 0 var(--luz), 0 40px 100px rgba(0, 0, 0, 0.5);
}
.figura .caja { padding: 16px; border: 1px solid var(--linea); border-radius: 18px; background: rgba(21, 20, 28, 0.82); }
.figura .caja + .caja { margin-top: 10px; }
.caja-cab { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.caja-cab b { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; font: 500 14px/1.25 var(--display); color: var(--t1); }
.caja-cab b small { font: 400 12.5px/1.3 var(--sans); color: var(--t3); }
.caja-cab .ficticio { margin: 0; }
.grafico { display: block; width: 100%; height: auto; }
.grafico text { font: 500 10.5px var(--sans); fill: var(--t2); }
.grafico text.p { font: 400 10px var(--mono); fill: var(--t3); }
.figura label { display: block; font: 500 10.5px/1.3 var(--mono); letter-spacing: 0.09em; text-transform: uppercase; color: var(--t3); }
.figura input[type="range"] { width: 100%; margin: 10px 0 0; accent-color: var(--lav); }
.lecturas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px 10px; margin: 16px 0 0; }
.lecturas div { display: grid; gap: 4px; align-content: start; }
.lecturas dt { font: 500 10.5px/1.3 var(--mono); letter-spacing: 0.09em; text-transform: uppercase; color: var(--t3); }
.lecturas dd { margin: 0; font: 500 24px/1.05 var(--mono); color: var(--t1); letter-spacing: -0.04em; font-variant-numeric: tabular-nums; }
.lecturas dd.acento { color: var(--lav); }
.pie-figura { margin: 12px 4px 2px; font: 400 11.5px/1.5 var(--mono); color: var(--t3); }
@media (max-width: 560px) {
  .lecturas { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .lecturas dd { font-size: 20px; }
  .grafico text { font-size: 15px; }
  .grafico text.p { font-size: 14px; }
}

/* Fichas: tarjetas en dos columnas */
.fichas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 18px; }
.ficha { display: grid; gap: 12px; align-content: start; padding: 24px; border: 1px solid var(--linea); border-radius: var(--r-grande); background: var(--panel-lav); }
.ficha h3 { margin: 0; font: 400 21px/1.25 var(--display); letter-spacing: -0.02em; }
.ficha dl { display: grid; gap: 10px; margin: 0; }
.ficha dt { font: 500 10.5px/1.3 var(--mono); letter-spacing: 0.09em; text-transform: uppercase; color: var(--lav); }
.ficha dd { margin: 2px 0 0; font-size: 15px; }
@media (max-width: 700px) { .fichas { grid-template-columns: minmax(0, 1fr); } .ficha { padding: 22px; } }

.pie nav + nav { margin-top: 22px; }