/* Artículos de testdetemperamento.com: mismo mundo visual que la app Temple (noche, oro y el color de cada temperamento).
   Cada sección es un bloque separado con fondo alterno; primero lo visual, después texto corto. */
:root {
  --fondo: #07070F; --fondo-alt: #0D0C18; --panel: #13121F; --linea: rgba(201,169,97,.22);
  --oro: #C9A961; --oro-claro: #E6C98A; --marfil: #EDE6D6; --suave: #D6CEBD; --ceniza: #A8A193;
  --display: 'Cinzel', Georgia, serif; --texto: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--fondo); color: var(--marfil); font-family: var(--texto); font-size: 20px; line-height: 1.55; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--oro-claro); text-underline-offset: 3px; }
a:hover { color: var(--marfil); }
:focus-visible { outline: 2px solid var(--oro-claro); outline-offset: 3px; border-radius: 4px; }
p { margin: 0 0 10px; }
strong { color: var(--acento-claro); font-weight: 600; }
.eyebrow { font-family: var(--display); font-size: 12px; letter-spacing: .26em; color: var(--oro); margin: 0 0 8px; }

/* barra superior y pie */
.top { position: sticky; top: 0; z-index: 10; background: rgba(7,7,15,.94); backdrop-filter: blur(8px); border-bottom: 1px solid var(--linea); padding-top: env(safe-area-inset-top, 0px); }
.top-in, .pie-in, .portada-in, .bloque-in, .cierre-in { max-width: 780px; margin: 0 auto; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
.top-in { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-block: 10px; }
.marca { font-family: var(--display); letter-spacing: .32em; color: var(--oro); text-decoration: none; font-size: 17px; display: flex; flex-direction: column; line-height: 1.2; }
.marca span { font-family: var(--texto); letter-spacing: .02em; font-size: 14px; color: var(--ceniza); font-style: italic; }
.btn { display: inline-block; font-family: var(--display); letter-spacing: .12em; font-size: 15px; text-decoration: none; color: #1A1406; background: linear-gradient(180deg, #E6C98A, #C9A961); border-radius: 999px; padding: 14px 26px; text-align: center; box-shadow: 0 0 18px rgba(201,169,97,.35); transition: transform .2s, filter .2s; }
.btn:hover { color: #1A1406; filter: brightness(1.08); transform: translateY(-1px); }
.btn.chico { padding: 9px 16px; font-size: 13px; white-space: nowrap; flex: none; }
.btn.grande { display: block; padding: 18px 20px; font-size: 17px; }

/* portada */
.portada { padding-block: 18px 30px; background: radial-gradient(90% 60% at 50% 0%, color-mix(in srgb, var(--acento) 18%, transparent), transparent 70%); }
.migas { font-size: 15px; color: var(--ceniza); }
.migas a { color: var(--ceniza); }
h1 { font-family: var(--display); font-weight: 600; font-size: clamp(28px, 6vw, 40px); line-height: 1.2; margin: 14px 0 14px; text-wrap: balance; }
.gancho p { font-size: 22px; color: var(--marfil); margin-bottom: 6px; }
.meta { font-size: 15px; color: var(--ceniza); font-style: italic; margin: 14px 0 18px; }
.hero { margin: 0 0 18px; border: 1px solid var(--linea); border-radius: 18px; overflow: hidden; background: #000; }
.hero img { width: 100%; aspect-ratio: 1 / 1; max-height: 440px; object-fit: cover; }
.hero.ancho img { aspect-ratio: 3 / 2; }
.rapida { border: 1px solid var(--acento); border-radius: 16px; padding: 18px; background: linear-gradient(180deg, rgba(255,255,255,.04), transparent); margin: 0 0 18px; }
.rapida > p:not(.eyebrow) { font-size: 21px; }
.ficha { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; margin-top: 12px; }
.ficha div { border-top: 1px solid var(--linea); padding-top: 8px; }
.ficha span { display: block; font-family: var(--display); font-size: 11px; letter-spacing: .2em; color: var(--oro); text-transform: uppercase; }
.ficha b { font-weight: 500; color: var(--acento-claro); }
.toc { border: 1px solid var(--linea); border-radius: 16px; padding: 16px 18px; background: var(--panel); }
.toc ol { margin: 0; padding-left: 26px; columns: 2 230px; column-gap: 24px; }
.toc li { margin: 4px 0; break-inside: avoid; font-size: 18px; }
.toc li::marker { color: var(--oro); font-family: var(--display); font-size: 14px; }
.toc a { color: var(--suave); text-decoration: none; }
.toc a:hover { color: var(--oro-claro); text-decoration: underline; }

/* bloques: cada sección separada, con número y fondo alterno */
.bloque { padding-block: 44px; border-top: 1px solid var(--linea); scroll-margin-top: 64px; }
.bloque.alt { background: var(--fondo-alt); }
.num { font-family: var(--display); font-size: 15px; letter-spacing: .3em; color: var(--acento); margin: 0; }
h2 { font-family: var(--display); font-weight: 600; font-size: clamp(23px, 4.8vw, 30px); line-height: 1.22; margin: 4px 0 6px; text-wrap: balance; }
.para { font-style: italic; color: var(--ceniza); margin-bottom: 18px; font-size: 18px; }
.para::before { content: 'Para qué te sirve · '; font-style: normal; font-family: var(--display); font-size: 11px; letter-spacing: .16em; color: var(--oro); text-transform: uppercase; }
h3 { font-family: var(--display); font-size: 18px; letter-spacing: .05em; margin: 26px 0 10px; color: var(--oro-claro); }
.intro { color: var(--suave); }
.lista-corta p { position: relative; padding-left: 22px; color: var(--suave); }
.lista-corta p::before { content: ''; position: absolute; left: 4px; top: .7em; width: 7px; height: 7px; border-radius: 50%; background: var(--acento); }

/* tarjetas */
.tarjetas { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px; margin: 6px 0 12px; }
.tarjetas.una { grid-template-columns: 1fr; }
.tarjeta { border: 1px solid var(--linea); border-top: 3px solid var(--acento); border-radius: 14px; padding: 14px 16px; background: var(--panel); transition: transform .2s, border-color .2s; }
.tarjeta:hover { transform: translateY(-2px); }
.tarjeta b { display: block; font-family: var(--display); font-size: 15px; letter-spacing: .06em; color: var(--acento-claro); margin-bottom: 4px; }
.tarjeta p { margin: 0; color: var(--suave); font-size: 19px; }
.tarjetas.retos .tarjeta { border-top-color: var(--ceniza); }
.tarjetas.retos .tarjeta b { color: var(--marfil); }
.tarjetas.escenas .tarjeta b::before { content: '▸ '; color: var(--acento); }

ul.checks { list-style: none; padding: 0; margin: 0 0 12px; display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 8px; }
ul.checks li { position: relative; padding: 10px 12px 10px 38px; border: 1px solid var(--linea); border-radius: 12px; background: var(--panel); color: var(--suave); font-size: 18px; }
ul.checks li::before { content: '✓'; position: absolute; left: 13px; top: 9px; color: var(--acento); font-weight: 700; }
ol.pasos { list-style: none; counter-reset: p; padding: 0; margin: 6px 0 12px; display: grid; gap: 10px; }
ol.pasos li { counter-increment: p; position: relative; padding: 10px 12px 10px 52px; border: 1px solid var(--linea); border-radius: 12px; background: var(--panel); color: var(--suave); min-height: 48px; }
ol.pasos li::before { content: counter(p); position: absolute; left: 12px; top: 10px; width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--acento); color: var(--acento-claro); font-family: var(--display); font-size: 14px; display: flex; align-items: center; justify-content: center; }
ol.pasos b { color: var(--marfil); font-weight: 600; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 12px; }
.chips span { border: 1px solid var(--acento); color: var(--acento-claro); border-radius: 999px; padding: 4px 14px; font-size: 18px; background: color-mix(in srgb, var(--acento) 10%, transparent); }

/* matriz de rapidez y duración */
.matriz { display: grid; grid-template-columns: minmax(70px, .7fr) 1fr 1fr; gap: 8px; margin: 6px 0 16px; }
.eje { font-family: var(--display); font-size: 10px; letter-spacing: .14em; color: var(--ceniza); text-align: center; align-self: end; }
.eje.lado { text-align: left; align-self: center; }
.celda { display: flex; flex-direction: column; gap: 2px; padding: 14px 10px; border-radius: 14px; border: 1px solid color-mix(in srgb, var(--c) 45%, transparent); background: color-mix(in srgb, var(--c) 8%, transparent); text-decoration: none; text-align: center; color: var(--suave); opacity: .7; }
.celda b { font-family: var(--display); font-size: 15px; color: var(--marfil); letter-spacing: .04em; }
.celda small { font-size: 15px; }
.celda.yo { opacity: 1; border: 2px solid var(--c); background: color-mix(in srgb, var(--c) 20%, transparent); box-shadow: 0 0 20px color-mix(in srgb, var(--c) 40%, transparent); }
.celda em, .slide em { font-style: normal; font-family: var(--display); font-size: 9px; letter-spacing: .18em; color: var(--c); }

/* el cuadrante de la app: arriba el temperamento, a los lados sus vecinos, abajo su opuesto */
.cuadrante { position: relative; width: 100%; max-width: 420px; margin: 4px auto 6px; aspect-ratio: 1 / 1; }
.cuadrante .aro { position: absolute; left: 19%; top: 19%; width: 62%; height: 62%; border-radius: 50%; border: 1px solid rgba(201,169,97,.32); }
.cuadrante .casa { position: absolute; width: 31%; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 8px 4px; border-radius: 12px; border: 1px solid color-mix(in srgb, var(--c) 45%, transparent); background: linear-gradient(180deg, color-mix(in srgb, var(--c) 16%, #08080f), #08080f); text-decoration: none; text-align: center; }
.cuadrante .casa.top { border: 2px solid var(--c); box-shadow: 0 0 18px color-mix(in srgb, var(--c) 40%, transparent); }
.cuadrante .b { font-family: var(--display); font-size: 8px; letter-spacing: .12em; color: var(--oro-claro); min-height: 10px; line-height: 1.2; }
.cuadrante .n { font-family: var(--display); font-size: clamp(11px, 3.2vw, 14px); letter-spacing: .04em; color: var(--marfil); }
.cuadrante .m { font-size: 14px; font-style: italic; color: var(--ceniza); line-height: 1; }
.cuadrante .qual { position: absolute; width: 30%; transform: translate(-50%, -50%); text-align: center; font-size: 16px; font-style: italic; color: var(--oro-claro); line-height: 1.2; }
.cuadrante .qual small { display: block; font-family: var(--display); font-style: normal; font-size: 8px; letter-spacing: .22em; color: var(--ceniza); }
.pie-cuad { text-align: center; font-size: 17px; color: var(--ceniza); font-style: italic; max-width: 46ch; margin: 0 auto 14px; }
.sym { display: block; overflow: visible; }
.pareja .sim { flex: none; width: 56px; height: 56px; border-radius: 50%; border: 1px solid var(--c); display: flex; align-items: center; justify-content: center; background: color-mix(in srgb, var(--c) 12%, transparent); }
.sim2 { display: flex; align-items: center; gap: 6px; flex: none; }
.sim2 i { font-style: normal; color: var(--oro); font-size: 18px; }
.mezcla { grid-template-columns: 92px minmax(0, 1fr); }
.cita { text-align: center; font-style: italic; color: var(--acento-claro); font-size: 19px; margin: -6px 0 18px; }

/* capítulos: una franja que agrupa varias secciones */
.cap { padding-block: 34px 26px; border-top: 1px solid var(--linea); background: radial-gradient(80% 120% at 50% 0%, color-mix(in srgb, var(--acento) 22%, transparent), transparent 70%); text-align: center; }
.cap-in { max-width: 780px; margin: 0 auto; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
.cap-t { font-family: var(--display); font-weight: 600; font-size: clamp(30px, 7vw, 42px); color: var(--acento-claro); margin: 0; letter-spacing: .04em; }
.cap-s { font-style: italic; color: var(--ceniza); margin: 4px 0 0; }
.toc-cap + .toc-cap { margin-top: 10px; }
.toc-cap > p { font-family: var(--display); font-size: 13px; letter-spacing: .12em; color: var(--acento-claro); margin: 0 0 2px; }
.toc-cap ol { columns: 1; }

/* mini prueba interactiva */
.mini { margin: 22px 0 6px; border: 1px solid var(--acento); border-radius: 18px; padding: 18px; background: color-mix(in srgb, var(--acento) 8%, var(--panel)); }
.mini-q { list-style: none; counter-reset: mq; padding: 0; margin: 10px 0 0; display: grid; gap: 14px; }
.mini-q li { counter-increment: mq; }
.mini-q li > p::before { content: counter(mq) '. '; font-family: var(--display); color: var(--acento-claro); }
.mini-q li > p { margin-bottom: 6px; color: var(--marfil); }
.ops { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ops button { font: inherit; font-size: 17px; line-height: 1.3; color: var(--suave); background: var(--fondo); border: 1px solid var(--linea); border-radius: 12px; padding: 10px; cursor: pointer; text-align: left; min-height: 48px; }
.ops button[aria-pressed="true"] { border-color: var(--acento); color: var(--marfil); background: color-mix(in srgb, var(--acento) 20%, var(--fondo)); }
.mini-res { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--linea); text-align: center; }
.mini-res b { color: var(--acento-claro); }

/* lo que tu opuesto te puede enseñar */
.balanza { display: grid; grid-template-columns: 1fr auto 1fr; gap: 10px; align-items: center; margin: 6px 0 8px; }
.balanza > i { font-style: normal; color: var(--oro); font-size: 22px; }
.balanza .lado { border: 1px solid color-mix(in srgb, var(--c) 50%, transparent); border-radius: 14px; padding: 12px; background: color-mix(in srgb, var(--c) 10%, var(--panel)); display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; }
.balanza .lado .eyebrow { font-size: 10px; letter-spacing: .14em; margin: 6px 0 2px; }
.balanza .lado b { font-family: var(--display); font-size: 15px; color: var(--marfil); font-weight: 400; }

/* prueba de la ofensa */
.flujo { display: grid; gap: 8px; margin: 6px 0 16px; }
.flujo > div { display: grid; grid-template-columns: 36px 1fr; column-gap: 12px; align-items: center; padding: 12px; border-radius: 12px; border: 1px solid var(--linea); background: var(--panel); }
.flujo span { grid-row: span 2; width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--acento); color: var(--acento-claro); display: flex; align-items: center; justify-content: center; font-family: var(--display); }
.flujo b { font-family: var(--display); font-size: 15px; letter-spacing: .03em; color: var(--marfil); font-weight: 400; }
.flujo em { font-style: normal; color: var(--acento-claro); }
.flujo .res { border-color: var(--acento); background: color-mix(in srgb, var(--acento) 12%, var(--panel)); }
.flujo .res em { color: var(--suave); }

/* carruseles para comparar */
.carrusel { margin: 8px 0 18px; }
.pista { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 4px 2px 10px; scrollbar-width: thin; scrollbar-color: var(--oro) transparent; }
.slide { flex: 0 0 min(78%, 330px); scroll-snap-align: start; margin: 0; border: 1px solid color-mix(in srgb, var(--c) 40%, transparent); border-radius: 16px; background: #000; overflow: hidden; display: flex; flex-direction: column; }
.slide.yo { border: 2px solid var(--c); box-shadow: 0 0 22px color-mix(in srgb, var(--c) 35%, transparent); }
.slide > img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; }
.slide .dos { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; }
.slide .dos img { width: 100%; aspect-ratio: 2 / 3; object-fit: cover; }
.sinfoto { aspect-ratio: 2 / 3; display: flex; flex-direction: column; justify-content: center; gap: 6px; padding: 10px; background: color-mix(in srgb, var(--c) 10%, #000); text-align: center; font-size: 15px; color: var(--suave); }
.sinfoto b { font-family: var(--display); font-size: 13px; letter-spacing: .1em; color: var(--marfil); }
.sl-t { font-family: var(--display); font-size: 16px; letter-spacing: .1em; color: var(--marfil); margin: 10px 12px 2px; }
.sl-s { font-size: 17px; color: var(--suave); margin: 0 12px 6px; }
.slide figcaption { margin-top: auto; padding: 6px 12px 12px; font-size: 16px; }
.desliza { text-align: right; font-size: 15px; font-style: italic; color: var(--ceniza); margin: 2px 4px 4px; }
.puntos { display: flex; justify-content: center; gap: 6px; }
.puntos i { width: 7px; height: 7px; border-radius: 50%; background: var(--linea); }
.puntos i.on { background: var(--acento); }

/* cuerpo: rasgos punto por punto */
.detalle { display: grid; gap: 14px; }
.fotos { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.fotos figure { margin: 0; border: 1px solid var(--linea); border-radius: 14px; overflow: hidden; background: #000; }
.fotos img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; }
.fotos figcaption { font-family: var(--display); font-size: 11px; letter-spacing: .18em; color: var(--oro); text-align: center; padding: 6px; }
@media (min-width: 720px) { .detalle { grid-template-columns: 260px 1fr; align-items: start; } .fotos { grid-template-columns: 1fr; } }

/* relaciones y mezclas */
.parejas { display: grid; gap: 10px; margin: 6px 0 12px; }
.pareja { display: flex; gap: 14px; align-items: center; text-decoration: none; color: var(--suave); padding: 12px; border-radius: 14px; border: 1px solid var(--linea); border-left: 3px solid var(--c); background: var(--panel); transition: border-color .2s; }
.pareja:hover { border-color: var(--c); color: var(--marfil); }
.pareja img { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; flex: none; border: 1px solid var(--c); }
.pareja span { min-width: 0; font-size: 18px; }
.pareja i { display: block; font-size: 15px; color: var(--ceniza); }
.pareja b { display: block; font-family: var(--display); font-size: 16px; letter-spacing: .04em; color: var(--marfil); margin-bottom: 2px; }
.pareja.doble { border-left-color: var(--oro); }
.pareja .ava { display: flex; flex: none; }
.pareja .ava img + img { margin-left: -16px; }
.mezclas { display: grid; gap: 12px; margin: 6px 0 12px; }
.mezcla { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 14px; align-items: center; padding: 12px; border-radius: 16px; border: 1px solid var(--linea); background: var(--panel); }
.mezcla img { width: 120px; height: 120px; border-radius: 14px; object-fit: cover; }
.mezcla i { display: block; font-size: 15px; color: var(--ceniza); }
.mezcla b { display: block; font-family: var(--display); font-size: 19px; color: var(--acento-claro); letter-spacing: .06em; }
.mezcla p { margin: 4px 0 0; font-size: 18px; color: var(--suave); }
.ojo span { font-family: var(--display); font-size: 11px; letter-spacing: .12em; color: var(--oro); text-transform: uppercase; }
.mezclas-g { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; margin: 6px 0 12px; }
.mezclas-g a { text-decoration: none; border: 1px solid color-mix(in srgb, var(--c) 45%, transparent); border-radius: 14px; overflow: hidden; background: var(--panel); text-align: center; }
.mezclas-g img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; }
.mezclas-g b { display: block; font-family: var(--display); font-size: 14px; letter-spacing: .08em; color: var(--marfil); margin-top: 6px; }
.mezclas-g span { display: block; font-size: 15px; color: var(--ceniza); padding: 0 6px 8px; }

/* alimentación guiada paso a paso */
.guia-alimento { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
.guia-alimento > *, .pasoA > div, .carrusel, .detalle > * { min-width: 0; }
.pasoA { display: grid; grid-template-columns: 38px 1fr; gap: 12px; align-items: start; }
.pasoA > span { width: 36px; height: 36px; border-radius: 50%; background: var(--acento); color: #111; font-family: var(--display); font-weight: 600; display: flex; align-items: center; justify-content: center; }
.pasoA > div > b { display: block; font-family: var(--display); font-size: 17px; letter-spacing: .04em; color: var(--marfil); margin: 4px 0 6px; }
.pasoA p { color: var(--suave); }
.frase-animal { border-left: 3px solid var(--acento); padding: 6px 0 6px 16px; margin: 6px 0 14px; }
.frase-animal b { font-family: var(--display); font-size: 20px; letter-spacing: .1em; color: var(--acento-claro); }
.frase-animal p { font-size: 21px; font-style: italic; color: var(--marfil); margin-top: 4px; }

/* mitos y preguntas */
.mitos { display: grid; gap: 10px; }
.mito { border: 1px solid var(--linea); border-radius: 14px; overflow: hidden; background: var(--panel); }
.mito p { margin: 0; padding: 10px 14px; }
.mito span { display: block; font-family: var(--display); font-size: 11px; letter-spacing: .2em; margin-bottom: 2px; }
.mito .m { color: var(--ceniza); text-decoration: line-through; text-decoration-color: rgba(168,161,147,.5); }
.mito .m span { color: var(--ceniza); text-decoration: none; display: block; }
.mito .r { color: var(--marfil); background: color-mix(in srgb, var(--acento) 10%, transparent); border-top: 1px solid var(--linea); }
.mito .r span { color: var(--acento-claro); }
.faq details { border-bottom: 1px solid var(--linea); padding: 12px 0; }
.faq summary { cursor: pointer; font-family: var(--display); font-size: 16px; letter-spacing: .03em; color: var(--marfil); list-style: none; display: flex; justify-content: space-between; gap: 12px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; color: var(--oro); font-size: 22px; line-height: 1; }
.faq details[open] summary::after { content: '−'; }
.faq details p { margin: 10px 0 0; color: var(--suave); }

/* artículo general */
.tipos { display: grid; gap: 12px; }
.tipo { display: grid; grid-template-columns: 110px 1fr; gap: 14px; align-items: center; text-decoration: none; color: var(--suave); border: 1px solid var(--linea); border-left: 3px solid var(--c); border-radius: 16px; padding: 12px; background: var(--panel); }
.tipo img { width: 110px; height: 110px; border-radius: 12px; object-fit: cover; }
.tipo span { min-width: 0; font-size: 18px; }
.tipo b { display: block; font-family: var(--display); font-size: 19px; letter-spacing: .08em; color: var(--marfil); }
.tipo i { display: block; font-size: 15px; color: var(--ceniza); margin-bottom: 4px; }
.tipo em { display: block; font-style: normal; color: var(--oro-claro); margin-top: 6px; font-size: 16px; }
.tipo:hover { border-color: var(--c); }
ol.linea { list-style: none; padding: 0 0 0 18px; margin: 6px 0; border-left: 2px solid var(--linea); }
ol.linea li { position: relative; padding: 0 0 16px 16px; }
ol.linea li::before { content: ''; position: absolute; left: -26px; top: 6px; width: 12px; height: 12px; border-radius: 50%; background: var(--oro); }
ol.linea b { font-family: var(--display); font-size: 14px; letter-spacing: .12em; color: var(--oro-claro); }
ol.linea p { margin: 2px 0 0; color: var(--suave); }

/* llamadas a la acción y cierre */
.cta { margin: 26px 0 4px; border: 1px solid var(--oro); border-radius: 18px; padding: 20px; background: radial-gradient(120% 120% at 0% 0%, rgba(201,169,97,.16), rgba(19,18,31,.9)); text-align: center; }
.cta-t { font-family: var(--display); font-size: 20px; color: var(--oro-claro); }
.cta-nota { font-size: 15px; color: var(--ceniza); font-style: italic; margin: 10px 0 0; }
.cierre-in { padding-block: 36px 10px; }
.cierre { font-size: 24px; font-style: italic; color: var(--oro-claro); text-align: center; margin: 0 auto 22px; max-width: 34ch; }
.cta-final { border: 1px solid var(--oro); border-radius: 22px; padding: 26px 18px; text-align: center; background: radial-gradient(120% 100% at 50% 0%, rgba(201,169,97,.2), rgba(19,18,31,.95)); }
.cta-final h2 { margin: 4px 0 16px; }
/* aviso «Próximamente» mientras el test no abre al público */
.pronto { position: fixed; inset: 0; z-index: 50; display: flex; align-items: center; justify-content: center; padding: 20px; background: rgba(7,7,15,.82); backdrop-filter: blur(4px); }
.pronto[hidden] { display: none; }
.pronto-in { max-width: 380px; width: 100%; border: 1px solid var(--oro); border-radius: 22px; padding: 28px 22px; text-align: center; background: radial-gradient(120% 100% at 50% 0%, rgba(201,169,97,.22), var(--panel)); box-shadow: 0 0 40px rgba(201,169,97,.25); }
.pronto-t { font-family: var(--display); font-size: 30px; letter-spacing: .08em; color: var(--oro-claro); margin: 6px 0 10px; }
.pronto-in p { color: var(--suave); }
.pronto-in .btn { border: 0; cursor: pointer; margin-top: 8px; }
.gana { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; margin-bottom: 18px; }
.gana div { border: 1px solid var(--linea); border-radius: 12px; padding: 10px; background: rgba(0,0,0,.25); }
.gana b { display: block; font-family: var(--display); font-size: 13px; letter-spacing: .06em; color: var(--marfil); }
.gana span { font-size: 16px; color: var(--ceniza); }
.aviso { font-size: 16px; font-style: italic; color: var(--ceniza); }
.rel { margin-top: 34px; }
.rel-g { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 10px; }
.rel-g a { display: flex; gap: 12px; align-items: center; text-decoration: none; border: 1px solid var(--linea); border-radius: 14px; padding: 10px; background: var(--panel); }
.rel-g img { width: 56px; height: 56px; border-radius: 10px; object-fit: cover; flex: none; }
.rel-g b { display: block; font-family: var(--display); font-size: 14px; letter-spacing: .05em; color: var(--marfil); }
.rel-g i { font-size: 16px; color: var(--ceniza); }
.rel-g a:hover { border-color: var(--oro); }
.como { margin-top: 26px; border: 1px dashed var(--linea); border-radius: 14px; padding: 16px 18px; font-size: 17px; }
.como p { color: var(--suave); }
.pie { border-top: 1px solid var(--linea); margin-top: 26px; padding-bottom: calc(80px + env(safe-area-inset-bottom, 0px)); }
.pie-in { display: flex; flex-direction: column; gap: 10px; padding-block: 22px; }
.pie nav { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 17px; }
.pie p { font-size: 15px; color: var(--ceniza); margin: 0; }
.pegado { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; display: flex; align-items: center; justify-content: space-between; gap: 10px; background: rgba(14,13,25,.97); border-top: 1px solid var(--oro); padding: 10px max(16px, env(safe-area-inset-right, 0px)) calc(10px + env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px)); font-family: var(--display); font-size: 14px; letter-spacing: .06em; }
.pegado[hidden] { display: none; }
@media (min-width: 900px) { .pegado { left: auto; right: 24px; bottom: 24px; border: 1px solid var(--oro); border-radius: 999px; padding: 8px 8px 8px 20px; } }

/* aparición suave al bajar (sólo si el navegador lo soporta y la persona no pidió reducir movimiento) */
.anima .rev { opacity: 0; transform: translateY(14px); transition: opacity .6s ease, transform .6s ease; }
.anima .rev.visto { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .tarjeta, .btn { transition: none; } }