/* Camino al 10 (publicado el 19-oct-2026): test con una frase por pantalla, cabecera de cada página y acabado común. */

/* ---------- Barra de arriba oscura en todas las páginas ---------- */
.top { background: var(--noche); border-bottom-color: transparent; }
.top .logo { color: #fff; }
@media (min-width: 761px) {
  .top .menu2 a { color: rgba(255,255,255,.72); }
  .top .menu2 a:hover, .top .menu2 a[aria-current="page"] { background: rgba(255,255,255,.1); color: #fff; }
}

/* ---------- Cabecera de cada página (título y entradilla) ---------- */
.d-cab { position: relative; isolation: isolate; overflow: hidden; margin: 0 -16px 22px; padding: 20px 16px 24px; border-radius: 0 0 30px 30px; background: var(--noche); color: #fff; }
.d-cab::before { content: ''; position: absolute; z-index: -1; width: 280px; height: 280px; right: -90px; top: -110px; border-radius: 50%; background: #8a6630; filter: blur(60px); opacity: .55; }
.d-cab::after { content: ''; position: absolute; z-index: -1; width: 220px; height: 220px; left: -80px; bottom: -140px; border-radius: 50%; background: #5a4320; filter: blur(60px); opacity: .6; }
.d-kick { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 10px; padding: 5px 12px 5px 8px; border-radius: 999px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14); color: var(--oro2); font-size: .78rem; font-weight: 700; letter-spacing: .02em; }
.d-kick svg { width: 16px; height: 16px; }
.d-cab h1 { margin: 0 0 8px; color: #fff; font-weight: 900; font-size: clamp(2rem, 8.6vw, 3.2rem); line-height: 1.03; letter-spacing: -.04em; }
.d-cab .lead { margin: 0; color: rgba(255,255,255,.72); font-size: 1rem; }
@media (min-width: 761px) { .d-cab { margin: 14px 0 26px; padding: 30px 34px; border-radius: 30px; } }

/* ---------- Acabado común de tarjetas y botones ---------- */
.noticia, .mito details, .quiz, .vv-card, .vot, .prom, .trib, .trib-regla, .tema, .faq, .tiles a, .comp > li, .resultados li, .claves li,
.prog-card, .cmp-panel, .vs-par > div, .grid-h a, .puntos li, .apoyo, .nueva, .td-q, .img-compartir { border-radius: 18px; box-shadow: var(--sombra); }
main li::marker { color: var(--kraft); }
.boton, .test-ver, .test-otra { border-radius: 999px; background: linear-gradient(135deg, #e3bf7e, #a8814a); color: #1b1408; font-weight: 800; box-shadow: 0 10px 22px -12px rgba(143,106,51,.9); }
.filtros button, .tabs button, .elegir button { border-radius: 999px; font-weight: 600; }
select { border-radius: 14px; }

/* ---------- Test: una frase por pantalla ---------- */
.t-pasos .test-q { display: none; }
.t-pasos .test-q.t-actual { display: block; }
.t-barra { position: sticky; top: 56px; z-index: 20; margin: 0 -16px; padding: 10px 16px 8px; background: color-mix(in srgb, var(--papel) 94%, transparent); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.t-prog { height: 8px; border-radius: 8px; background: var(--resalte); overflow: hidden; }
.t-prog i { display: block; height: 100%; width: 0; border-radius: 8px; background: linear-gradient(90deg, #e3bf7e, #a8814a); transition: width .35s cubic-bezier(.2,.9,.25,1); }
.t-info { display: flex; justify-content: space-between; margin-top: 6px; font-size: .8rem; font-weight: 700; color: var(--suave); }
.t-pasos .test-q { margin: 10px 0 0; padding: 22px 18px 18px; border: 0; border-radius: 24px; background: var(--superficie); box-shadow: var(--sombra); }
.t-pasos .test-q.t-de-der { animation: t-der .38s cubic-bezier(.2,.9,.25,1); }
.t-pasos .test-q.t-de-izq { animation: t-izq .38s cubic-bezier(.2,.9,.25,1); }
@keyframes t-der { from { transform: translateX(40px); opacity: 0; } }
@keyframes t-izq { from { transform: translateX(-40px); opacity: 0; } }
.t-pasos .test-q legend { float: left; width: 100%; padding: 0; margin: 0 0 18px; font-weight: 800; font-size: clamp(1.35rem, 6vw, 1.75rem); line-height: 1.18; letter-spacing: -.025em; }
.t-pasos .test-q legend + * { clear: both; }
.t-pasos .test-num { margin-bottom: 10px; font-size: .78rem; font-weight: 800; letter-spacing: .08em; color: var(--oro-osc); }
.t-pasos .test-opc { display: grid; grid-template-columns: 1fr; gap: 8px; margin: 0 0 12px; }
.t-pasos .test-opc label:last-child { grid-column: auto; }
.t-pasos .test-opc span { display: flex; align-items: center; gap: 12px; padding: 13px 16px; border: 1.5px solid var(--linea); border-radius: 16px; font-size: 1rem; font-weight: 700; text-align: left; background: var(--papel); transition: transform .12s, background .15s, border-color .15s; }
.t-pasos .test-opc span::before { content: ''; width: 20px; height: 20px; flex: none; border-radius: 50%; border: 2px solid var(--linea); background: var(--superficie); transition: border-color .15s, background .15s; }
.t-pasos .test-opc label:active span { transform: scale(.98); }
.t-pasos .test-opc input:checked + span { background: var(--tinta); color: var(--papel); border-color: var(--tinta); }
.t-pasos .test-opc input:checked + span::before { border-color: var(--oro); background: radial-gradient(circle, var(--oro) 45%, transparent 50%); }
.t-pasos .test-opc label:last-child span { justify-content: center; color: var(--suave); border-style: dashed; background: transparent; }
.t-pasos .test-opc label:last-child span::before { display: none; }
.t-pasos .test-opc label:last-child input:checked + span { color: var(--papel); }
.t-pasos .test-imp { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-radius: 14px; border: 1.5px solid var(--linea); font-size: .88rem; font-weight: 700; opacity: 1; cursor: pointer; }
.t-pasos .test-imp input { position: absolute; opacity: 0; }
.t-pasos .test-imp::before { content: '☆'; font-size: 1.05rem; color: var(--oro-osc); }
.t-pasos .test-imp:has(input:checked) { background: color-mix(in srgb, var(--kraft) 18%, var(--superficie)); border-color: var(--kraft); }
.t-pasos .test-imp:has(input:checked)::before { content: '★'; }
.t-nav { display: flex; justify-content: space-between; align-items: center; margin: 12px 2px 10px; }
.t-nav button { padding: 10px 4px; border: 0; background: none; color: var(--suave); font: 700 .95rem var(--sans); cursor: pointer; }
.t-nav button:disabled { opacity: .35; cursor: default; }
.t-pasos .test-ver { display: block; width: 100%; padding: 16px; font-size: 1.05rem; }
.t-pasos .test-ver[hidden] { display: none; }
.t-pasos.t-fin .test-q, .t-pasos.t-fin .t-nav, .t-pasos.t-fin .t-barra, .t-pasos.t-fin .test-ver { display: none; }

/* ---------- Resultado del test ---------- */
#test-res > h2 { font-size: 1.7rem; font-weight: 900; letter-spacing: -.035em; }
.test-ranking > li { margin: 0 0 12px; padding: 14px 16px; border-radius: 18px; background: var(--superficie); box-shadow: var(--sombra); }
.test-barra { grid-template-columns: 1fr auto; row-gap: 8px; }
.test-sig { font-size: 1.1rem; font-weight: 800; }
.test-pct { grid-column: 2; grid-row: 1; font-size: 1.6rem; font-weight: 900; letter-spacing: -.03em; }
.test-fondo { grid-column: 1 / -1; grid-row: 2; height: 12px; background: var(--resalte); }
.test-fondo span { border-radius: 12px; animation: t-llena 1s cubic-bezier(.2,.9,.25,1) both; transform-origin: left; }
@keyframes t-llena { from { transform: scaleX(0); } }
.test-ranking summary { font-weight: 700; color: var(--oro-osc); cursor: pointer; }
.img-compartir { border: 0; background: linear-gradient(135deg, color-mix(in srgb, var(--kraft) 16%, var(--superficie)), var(--superficie)); }

@media (prefers-reduced-motion: reduce) {
  .t-pasos .test-q.t-de-der, .t-pasos .test-q.t-de-izq, .test-fondo span { animation: none; }
}