:root {
  --fondo: #f6f3ee;
  --papel: #ffffff;
  --tinta: #14213d;
  --tinta-2: #4b5563;
  --tinta-3: #8a93a3;
  --linea: #e4dfd6;
  --acento: #2f5bea;
  --acento-suave: #e8eefe;
  --acuerdo: #1f8a70;
  --desacuerdo: #d1495b;
  --radio: 18px;
  --sombra: 0 1px 2px rgba(20, 33, 61, .06), 0 8px 30px rgba(20, 33, 61, .07);
  --titular: "Bricolage Grotesque", system-ui, sans-serif;
  --texto: "Inter", system-ui, sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    --fondo: #0f1422;
    --papel: #181f31;
    --tinta: #eef1f7;
    --tinta-2: #b4bccb;
    --tinta-3: #7d8799;
    --linea: #2a3349;
    --acento: #7c9bff;
    --acento-suave: #222d4d;
    --sombra: 0 1px 2px rgba(0, 0, 0, .3), 0 8px 30px rgba(0, 0, 0, .25);
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--fondo);
  color: var(--tinta);
  font: 16px/1.55 var(--texto);
  min-height: 100dvh;
}
button, select { font: inherit; color: inherit; }
button { cursor: pointer; }
svg.lucide { width: 18px; height: 18px; stroke-width: 2; flex: none; }

/* Barra */
.barra {
  display: flex; align-items: center; justify-content: space-between;
  max-width: 760px; margin: 0 auto; padding: 16px;
}
.marca {
  display: flex; align-items: center; gap: 8px;
  background: none; border: 0; padding: 0;
  font: 700 18px var(--titular); letter-spacing: -.01em;
}
.marca b { color: var(--acento); }
.marca svg.lucide { width: 24px; height: 24px; color: var(--acento); }
.enlace {
  display: inline-flex; align-items: center; gap: 6px;
  background: none; border: 0; padding: 8px 4px;
  color: var(--tinta-2); font-weight: 500; font-size: 15px;
}
.enlace:hover { color: var(--tinta); }

main { max-width: 760px; margin: 0 auto; padding: 0 16px 64px; }
.vista { display: none; }
.vista.activa { display: block; animation: entra .35s ease both; }
@keyframes entra { from { opacity: 0; transform: translateY(8px); } }

/* Tipografía */
h1 {
  font: 800 clamp(34px, 7vw, 56px)/1.04 var(--titular);
  letter-spacing: -.03em; margin: 8px 0 16px;
}
h1 em { font-style: normal; color: var(--acento); }
h2 { font: 700 clamp(24px, 4.6vw, 32px)/1.2 var(--titular); letter-spacing: -.02em; margin: 14px 0 28px; }
.sobre {
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--tinta-2); font-weight: 600; font-size: 14px; margin: 24px 0 0;
}
.entradilla { color: var(--tinta-2); font-size: 18px; max-width: 34em; margin: 0 0 28px; }

/* Botones */
.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  background: var(--acento); color: #fff; border: 0; border-radius: 12px;
  padding: 12px 18px; font-weight: 600; text-decoration: none;
  transition: transform .12s ease, filter .12s ease;
}
.boton:hover { filter: brightness(1.06); }
.boton:active { transform: scale(.98); }
.boton.grande { padding: 16px 26px; font-size: 18px; border-radius: 14px; }
.boton.fantasma { background: transparent; color: var(--tinta); border: 1px solid var(--linea); }
.boton.whatsapp { background: #1f9d55; }

/* Portada */
.portada { padding-top: 8px; }
.campo { display: grid; gap: 6px; margin: 0 0 24px; max-width: 420px; }
.campo span { font-weight: 600; }
.campo small { color: var(--tinta-3); }
select {
  appearance: none; background: var(--papel); border: 1px solid var(--linea);
  border-radius: 12px; padding: 12px 40px 12px 14px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%238a93a3' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center;
}
.garantias { list-style: none; padding: 0; margin: 32px 0 0; display: grid; gap: 10px; color: var(--tinta-2); }
.garantias li { display: flex; align-items: center; gap: 10px; }
.garantias svg.lucide { color: var(--acuerdo); }

/* Test */
.progreso { height: 6px; background: var(--linea); border-radius: 99px; overflow: hidden; margin-top: 8px; }
.progreso-barra { height: 100%; width: 0; background: var(--acento); border-radius: 99px; transition: width .3s ease; }
.test-cab { display: flex; justify-content: space-between; align-items: center; margin: 10px 0 6px; }
.contador { color: var(--tinta-3); font-weight: 600; font-variant-numeric: tabular-nums; }
.tarjeta {
  background: var(--papel); border-radius: var(--radio); box-shadow: var(--sombra);
  padding: clamp(20px, 5vw, 36px);
}
.tarjeta.cambia { animation: cambia .3s ease both; }
@keyframes cambia { from { opacity: 0; transform: translateX(14px); } }
.tema {
  display: inline-block; background: var(--acento-suave); color: var(--acento);
  font-weight: 700; font-size: 13px; text-transform: uppercase; letter-spacing: .06em;
  padding: 5px 10px; border-radius: 99px;
}
.escala { display: grid; gap: 10px; }
.escala button {
  display: flex; align-items: center; gap: 14px; text-align: left;
  background: var(--fondo); border: 2px solid transparent; border-radius: 14px;
  padding: 14px 16px; font-weight: 600; font-size: 17px;
  transition: border-color .12s ease, background .12s ease;
}
.escala button:hover { border-color: var(--linea); }
.escala .punto {
  width: 22px; height: 22px; border-radius: 50%; flex: none;
  border: 2px solid currentColor; opacity: .9;
}
.escala [data-v="2"] { color: var(--acuerdo); }
.escala [data-v="1"] { color: color-mix(in srgb, var(--acuerdo) 70%, var(--tinta-2)); }
.escala [data-v="0"] { color: var(--tinta-2); }
.escala [data-v="-1"] { color: color-mix(in srgb, var(--desacuerdo) 70%, var(--tinta-2)); }
.escala [data-v="-2"] { color: var(--desacuerdo); }
.escala button.elegido { border-color: currentColor; background: color-mix(in srgb, currentColor 8%, var(--papel)); }
.escala button.elegido .punto { background: currentColor; }
.test-pie { display: flex; justify-content: space-between; align-items: center; margin-top: 18px; gap: 12px; flex-wrap: wrap; }
.interruptor {
  display: inline-flex; align-items: center; gap: 8px;
  background: none; border: 1px solid var(--linea); border-radius: 99px;
  padding: 8px 14px; color: var(--tinta-2); font-weight: 600; font-size: 15px;
}
.interruptor[aria-pressed="true"] { border-color: #e0a100; color: #b07d00; background: #fff6dc; }
.interruptor[aria-pressed="true"] svg.lucide { fill: #e0a100; stroke: #e0a100; }
.pista { color: var(--tinta-3); font-size: 14px; text-align: center; margin-top: 18px; }
@media (hover: none) { .pista { display: none; } }

/* Resultados */
.resultado-cab h1 { margin-bottom: 8px; }
.acciones { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.seccion { font: 700 20px var(--titular); margin: 40px 0 14px; }
.ranking { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.fila {
  background: var(--papel); border-radius: 14px; box-shadow: var(--sombra); overflow: hidden;
}
.fila-cab {
  display: grid; grid-template-columns: 34px 1fr auto 22px; gap: 12px; align-items: center;
  width: 100%; background: none; border: 0; padding: 14px 16px; text-align: left;
}
.pos { font: 800 18px var(--titular); color: var(--tinta-3); }
.nombre { font-weight: 700; }
.nombre small { display: block; font-weight: 500; color: var(--tinta-3); font-size: 13px; }
.pct { font: 800 22px var(--titular); font-variant-numeric: tabular-nums; }
.fila-cab svg.lucide { color: var(--tinta-3); transition: transform .2s ease; }
.fila.abierta .fila-cab svg.lucide { transform: rotate(180deg); }
.barra-pct { grid-column: 2 / 4; height: 8px; background: var(--linea); border-radius: 99px; overflow: hidden; }
.barra-pct span { display: block; height: 100%; border-radius: 99px; transition: width .8s cubic-bezier(.2,.8,.2,1); }
.separador { color: var(--tinta-3); font-size: 14px; font-weight: 600; margin: 14px 4px 2px; }
.fila.pocos { opacity: .7; box-shadow: none; border: 1px dashed var(--linea); }
.detalle { display: none; border-top: 1px solid var(--linea); padding: 6px 16px 14px; }
.fila.abierta .detalle { display: block; }
.det { display: grid; gap: 4px; padding: 12px 0; border-bottom: 1px dashed var(--linea); font-size: 15px; }
.det:last-child { border-bottom: 0; }
.det-af { font-weight: 600; }
.det-comp { display: flex; flex-wrap: wrap; gap: 6px 14px; color: var(--tinta-2); font-size: 14px; }
.det-comp b { color: var(--tinta); }
.det-nota { color: var(--tinta-2); }
.det-fuente { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--acento); text-decoration: none; }
.det-fuente svg.lucide { width: 14px; height: 14px; }
.etiqueta { font-size: 12px; font-weight: 700; color: var(--tinta-3); text-transform: uppercase; letter-spacing: .04em; }
.coinc { font-weight: 700; }
.coinc.alta { color: var(--acuerdo); }
.coinc.baja { color: var(--desacuerdo); }

/* Por temas */
#temas { display: grid; gap: 10px; }
.tema-caja { background: var(--papel); border-radius: 14px; box-shadow: var(--sombra); overflow: hidden; }
.tema-caja summary {
  display: grid; grid-template-columns: 22px 1fr 18px; gap: 4px 12px; align-items: center;
  padding: 14px 16px; cursor: pointer; list-style: none;
}
.tema-caja summary::-webkit-details-marker { display: none; }
.tema-caja summary > svg.lucide:first-child { color: var(--acento); }
.tema-tit { font: 700 17px var(--titular); }
.tema-res { grid-column: 2 / 3; display: flex; flex-wrap: wrap; gap: 6px; }
.flecha { grid-row: 1; grid-column: 3; color: var(--tinta-3); transition: transform .2s ease; }
.tema-caja[open] .flecha { transform: rotate(180deg); }
.mini {
  font-size: 12px; font-weight: 700; padding: 2px 8px; border-radius: 99px;
  color: var(--c); background: color-mix(in srgb, var(--c) 12%, transparent);
}
.sin { font-size: 13px; color: var(--tinta-3); }
.tema-cuerpo { padding: 0 16px 16px; border-top: 1px solid var(--linea); }
.contexto { color: var(--tinta-2); font-size: 15px; margin: 14px 0 6px; }
.contexto b { color: var(--tinta); }
.esc { padding: 14px 0 6px; border-top: 1px dashed var(--linea); }
.esc:first-of-type { border-top: 0; }
.esc-af { font-weight: 600; margin: 0 0 8px; }
.esc-ejes { display: flex; justify-content: space-between; font-size: 11px; font-weight: 600; color: var(--tinta-3); text-transform: uppercase; letter-spacing: .04em; }
.esc-cols { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; margin-top: 4px; }
.col {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  min-width: 0; min-height: 34px; padding: 6px 2px; border-radius: 10px;
  background: var(--fondo);
}
.col:nth-child(1), .col:nth-child(5) { background: color-mix(in srgb, var(--tinta-3) 10%, var(--fondo)); }
.col.tuya { outline: 2px solid var(--tinta); outline-offset: -2px; }
.tu-marca { font: 800 11px var(--titular); background: var(--tinta); color: var(--fondo); border-radius: 99px; padding: 1px 8px; }
.ficha {
  border: 0; border-radius: 99px; padding: 3px 7px; max-width: 100%;
  font-size: 11px; font-weight: 700; color: #fff; background: var(--c);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ficha.activa { box-shadow: 0 0 0 2px var(--papel), 0 0 0 4px var(--c); }
.esc-nota { font-size: 14px; color: var(--tinta-2); margin: 10px 0 0; display: grid; gap: 4px; }
.esc-nota[hidden] { display: none; }

.mapa-caja { background: var(--papel); border-radius: var(--radio); box-shadow: var(--sombra); padding: 12px; }
#mapa { width: 100%; height: auto; display: block; }
#mapa .eje { stroke: var(--linea); stroke-width: 1.5; }
#mapa .rotulo { fill: var(--tinta-3); font: 600 11px var(--texto); }
#mapa .sigla { font: 700 11px var(--texto); fill: var(--tinta); }
#mapa .tu { fill: var(--tinta); }
#mapa .tu-texto { font: 800 13px var(--titular); fill: var(--fondo); }
.nota-mapa { color: var(--tinta-3); font-size: 14px; }
.aviso {
  display: flex; gap: 10px; align-items: flex-start; margin-top: 32px;
  background: var(--acento-suave); border-radius: 14px; padding: 14px 16px; color: var(--tinta-2); font-size: 15px;
}
.aviso svg.lucide { margin-top: 2px; color: var(--acento); }

/* Método */
.texto { max-width: 640px; }
.texto h3 { font: 700 20px var(--titular); margin: 28px 0 8px; }
.texto p, .texto li { color: var(--tinta-2); }
.texto .boton { margin-top: 24px; }
.fecha { font-size: 14px; color: var(--tinta-3); }

@media (min-width: 720px) {
  .escala { grid-template-columns: repeat(5, 1fr); }
  .escala button { flex-direction: column; text-align: center; gap: 10px; padding: 18px 8px; font-size: 15px; }
  .escala .punto { width: 28px; height: 28px; }
}