/* eneatipos.es · hoja de estilos */
@font-face { font-family: 'Bricolage'; src: url(../fonts/bricolage-latin.woff2) format('woff2'); font-weight: 400 800; font-display: swap; }
@font-face { font-family: 'Inter'; src: url(../fonts/inter-latin.woff2) format('woff2'); font-weight: 400 700; font-display: swap; }

:root {
  --papel: #f8f5ef; --papel-2: #f1ece3; --tarjeta: #fff; --tinta: #17142a; --tinta-2: #3d3852; --suave: #6a6480;
  --linea: #e4ddd0; --noche: #14112a; --noche-2: #1e1a3a; --noche-linea: rgba(255,255,255,.12);
  --marca: #6d4aff; --tipo: var(--marca);
  --t1: #3b5bdb; --t2: #e64980; --t3: #e8a400; --t4: #7048e8; --t5: #0c8599; --t6: #2b8a3e; --t7: #f76707; --t8: #c92a2a; --t9: #9c6644;
  --arcoiris: linear-gradient(90deg, var(--t1), var(--t2), var(--t3), var(--t7), var(--t8), var(--t4), var(--t5), var(--t6));
  --titulos: 'Bricolage', 'Segoe UI', system-ui, sans-serif; --texto: 'Inter', 'Segoe UI', system-ui, sans-serif;
  --radio: 18px; --sombra: 0 1px 2px rgba(23,20,42,.05), 0 8px 30px rgba(23,20,42,.07);
  --ancho: 1180px; --lectura: 720px;
}
@media (prefers-color-scheme: dark) {
  :root { --papel: #110f20; --papel-2: #171430; --tarjeta: #1c1936; --tinta: #f1eef8; --tinta-2: #cfc9e2; --suave: #9d97b5; --linea: #2c2849; --sombra: 0 8px 30px rgba(0,0,0,.35); }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 90px; }
body { margin: 0; background: var(--papel); color: var(--tinta); font: 400 1.0625rem/1.7 var(--texto); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img, svg, video { max-width: 100%; display: block; }
a { color: inherit; text-decoration-color: color-mix(in srgb, currentColor 35%, transparent); text-underline-offset: 3px; }
a:hover { text-decoration-color: currentColor; }
h1, h2, h3, h4 { font-family: var(--titulos); line-height: 1.12; letter-spacing: -.02em; margin: 0 0 .5em; font-weight: 700; text-wrap: balance; }
h1 { font-size: clamp(2.3rem, 5.5vw, 4.4rem); font-weight: 800; letter-spacing: -.035em; }
h2 { font-size: clamp(1.7rem, 3.4vw, 2.5rem); }
h3 { font-size: clamp(1.2rem, 2vw, 1.45rem); }
p { margin: 0 0 1.1em; }
.saltar { position: absolute; left: -9999px; }
.saltar:focus { left: 1rem; top: 1rem; z-index: 99; background: var(--tinta); color: var(--papel); padding: .5rem 1rem; border-radius: 8px; }
:focus-visible { outline: 3px solid var(--marca); outline-offset: 3px; border-radius: 6px; }
.envoltura { width: min(var(--ancho), 100% - 32px); margin-inline: auto; }
.lectura { width: min(var(--lectura), 100% - 32px); margin-inline: auto; }
.antetitulo { display: inline-block; font: 600 .82rem/1 var(--texto); letter-spacing: .02em; color: var(--suave); margin-bottom: 1rem; }
.destacado { background: var(--arcoiris); -webkit-background-clip: text; background-clip: text; color: transparent; }
.destacado-tipo { color: var(--tipo); }
.entradilla { font-size: clamp(1.1rem, 1.6vw, 1.3rem); color: var(--tinta-2); line-height: 1.6; max-width: 46em; }

/* botones */
.boton { display: inline-flex; align-items: center; gap: .55em; padding: .9em 1.5em; border-radius: 999px; background: var(--tinta); color: var(--papel); font: 600 1rem/1 var(--texto); text-decoration: none; border: 0; cursor: pointer; transition: transform .2s, box-shadow .2s, background .2s; }
.boton:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(23,20,42,.18); }
.boton .ico { width: 1.1em; height: 1.1em; transition: transform .2s; }
.boton:hover .ico { transform: translateX(3px); }
.boton--claro { background: #fff; color: var(--noche); }
.boton--borde { background: transparent; color: inherit; box-shadow: inset 0 0 0 1.5px currentColor; }
.boton--tipo { background: var(--tipo); color: #fff; }
.boton--grande { font-size: 1.1rem; padding: 1.05em 1.8em; }
.ico { width: 1.25em; height: 1.25em; flex: none; }

/* cabecera */
.cabecera { position: sticky; top: 0; z-index: 50; background: color-mix(in srgb, var(--papel) 82%, transparent); backdrop-filter: saturate(1.4) blur(14px); -webkit-backdrop-filter: saturate(1.4) blur(14px); border-bottom: 1px solid color-mix(in srgb, var(--linea) 70%, transparent); }
.cabecera__in { width: min(var(--ancho), 100% - 32px); margin-inline: auto; display: flex; align-items: center; gap: 1.5rem; height: 68px; }
.marca { display: flex; align-items: center; gap: .6rem; text-decoration: none; font: 800 1.35rem/1 var(--titulos); letter-spacing: -.03em; margin-right: auto; }
.marca__simbolo { width: 34px; height: 34px; }
.marca__simbolo .s-circulo, .pie__simbolo .s-circulo { stroke: var(--tinta); stroke-width: 7; fill: none; }
.marca__simbolo .s-triangulo, .marca__simbolo .s-hexada, .pie__simbolo .s-triangulo, .pie__simbolo .s-hexada { fill: none; stroke: var(--marca); stroke-width: 5; stroke-linejoin: round; }
.marca__simbolo .s-hexada, .pie__simbolo .s-hexada { stroke: #e8a400; }
.menu { display: flex; align-items: center; gap: 1.6rem; }
.menu > a:not(.boton) { text-decoration: none; font-weight: 500; color: var(--tinta-2); }
.menu > a:not(.boton):hover, .menu > a[aria-current] { color: var(--tinta); }
.menu > a[aria-current] { box-shadow: 0 2px 0 var(--marca); }
.menu__tipos { display: flex; gap: 4px; }
.menu__tipos a { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font: 700 .78rem/1 var(--titulos); text-decoration: none; color: var(--c); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--c) 45%, transparent); transition: background .2s, color .2s, transform .2s; }
.menu__tipos a:hover { background: var(--c); color: #fff; transform: translateY(-2px); }
.boton--menu { padding: .7em 1.2em; font-size: .95rem; }
.menu-boton { display: none; background: none; border: 0; color: inherit; padding: 8px; cursor: pointer; }
@media (max-width: 960px) {
  .menu-boton { display: block; }
  .menu { position: fixed; inset: 68px 0 auto 0; flex-direction: column; align-items: stretch; gap: 0; background: var(--papel); padding: 8px 16px 20px; border-bottom: 1px solid var(--linea); box-shadow: var(--sombra); transform: translateY(-8px); opacity: 0; pointer-events: none; transition: .2s; }
  .menu.abierto { transform: none; opacity: 1; pointer-events: auto; }
  .menu > a:not(.boton) { padding: 14px 4px; border-bottom: 1px solid var(--linea); font-size: 1.1rem; }
  .menu > a[aria-current] { box-shadow: none; color: var(--marca); }
  .menu__tipos { justify-content: space-between; padding: 16px 0; }
  .menu__tipos a { width: 32px; height: 32px; }
  .boton--menu { justify-content: center; }
}

/* migas */
.migas { font-size: .88rem; color: var(--suave); display: flex; flex-wrap: wrap; gap: .45em; margin-bottom: 1.4rem; }
.migas a { text-decoration: none; }
.migas a:hover { color: var(--tinta); }
.oscuro .migas { color: rgba(255,255,255,.6); }
.oscuro .migas a:hover { color: #fff; }

/* bloques oscuros con fondo vivo */
.oscuro { background: var(--noche); color: #f3f0fb; position: relative; overflow: hidden; isolation: isolate; }
.oscuro .antetitulo { color: rgba(255,255,255,.62); }
.oscuro .entradilla { color: rgba(255,255,255,.78); }
.aurora { position: absolute; inset: -20%; z-index: -1; background:
  radial-gradient(40% 35% at 20% 30%, color-mix(in srgb, var(--tipo) 55%, transparent), transparent 70%),
  radial-gradient(35% 40% at 80% 70%, rgba(232,164,0,.22), transparent 70%),
  radial-gradient(30% 30% at 70% 15%, rgba(12,133,153,.25), transparent 70%);
  filter: blur(40px); animation: aurora 22s ease-in-out infinite alternate; }
.grano { position: absolute; inset: 0; z-index: -1; opacity: .07; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E"); }
@keyframes aurora { to { transform: translate3d(4%, -3%, 0) rotate(8deg) scale(1.08); } }

/* portada */
.portada { padding: clamp(48px, 8vw, 110px) 0 clamp(56px, 8vw, 110px); }
.portada__in { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(24px, 5vw, 70px); align-items: center; }
.portada h1 { margin-bottom: .35em; }
.portada__acciones { display: flex; flex-wrap: wrap; gap: 12px; margin: 2rem 0 1.4rem; }
.portada__datos { display: flex; flex-wrap: wrap; gap: 8px 22px; font-size: .92rem; color: rgba(255,255,255,.66); }
.portada__datos span { display: inline-flex; align-items: center; gap: .4em; }
.portada__datos .ico { width: 1.05em; color: #e8a400; }
.portada__simbolo { position: relative; aspect-ratio: 1; }
@media (max-width: 860px) { .portada__in { grid-template-columns: 1fr; } .portada__simbolo { max-width: 420px; margin: 0 auto; order: -1; width: 82%; } }

/* símbolo grande animado */
.simbolo-vivo .s-circulo { fill: none; stroke: rgba(255,255,255,.22); stroke-width: 1.6; }
.simbolo-vivo .s-triangulo, .simbolo-vivo .s-hexada { fill: none; stroke-width: 1.6; stroke-linejoin: round; stroke-dasharray: 1600; stroke-dashoffset: 1600; animation: trazo 3.2s cubic-bezier(.6,.1,.2,1) forwards; }
.simbolo-vivo .s-triangulo { stroke: rgba(232,164,0,.75); animation-delay: .3s; }
.simbolo-vivo .s-hexada { stroke: rgba(160,140,255,.75); animation-delay: .9s; }
.simbolo-vivo .s-punto circle { fill: var(--noche-2); stroke: var(--c); stroke-width: 2.4; transition: fill .3s, r .3s; }
.simbolo-vivo .s-punto text { fill: #fff; font: 700 20px var(--titulos); pointer-events: none; }
.simbolo-vivo .s-punto text:not(.s-etiqueta) { text-anchor: middle; }
.simbolo-vivo .s-punto { opacity: 0; animation: aparece .6s ease forwards; transform-box: fill-box; transform-origin: center; }
.simbolo-vivo .s-punto:hover circle { fill: var(--c); }
.simbolo-vivo .s-etiqueta { fill: rgba(255,255,255,.66) !important; font: 500 14px var(--texto) !important; }
.simbolo-vivo .s-punto:nth-of-type(1) { animation-delay: 1.6s } .simbolo-vivo .s-punto:nth-of-type(2) { animation-delay: 1.7s } .simbolo-vivo .s-punto:nth-of-type(3) { animation-delay: 1.8s }
.simbolo-vivo .s-punto:nth-of-type(4) { animation-delay: 1.9s } .simbolo-vivo .s-punto:nth-of-type(5) { animation-delay: 2s } .simbolo-vivo .s-punto:nth-of-type(6) { animation-delay: 2.1s }
.simbolo-vivo .s-punto:nth-of-type(7) { animation-delay: 2.2s } .simbolo-vivo .s-punto:nth-of-type(8) { animation-delay: 2.3s } .simbolo-vivo .s-punto:nth-of-type(9) { animation-delay: 2.4s }
.halo { position: absolute; inset: 6%; border-radius: 50%; background: conic-gradient(from 0deg, var(--t9), var(--t1), var(--t2), var(--t3), var(--t4), var(--t5), var(--t6), var(--t7), var(--t8), var(--t9)); filter: blur(60px); opacity: .32; animation: gira 30s linear infinite; z-index: -1; }
.orbita { position: absolute; inset: 0; animation: gira 60s linear infinite; }
.orbita::before { content: ''; position: absolute; top: 3%; left: 50%; width: 7px; height: 7px; border-radius: 50%; background: #fff; box-shadow: 0 0 14px 4px rgba(255,255,255,.6); }
@keyframes trazo { to { stroke-dashoffset: 0; } }
@keyframes aparece { from { opacity: 0; transform: scale(.4); } to { opacity: 1; transform: none; } }
@keyframes gira { to { transform: rotate(360deg); } }

/* secciones */
.seccion { padding: clamp(56px, 8vw, 104px) 0; }
.seccion--papel2 { background: var(--papel-2); }
.seccion__cabeza { max-width: 760px; margin-bottom: clamp(28px, 4vw, 48px); }
.seccion__cabeza--centro { margin-inline: auto; text-align: center; }

/* rejilla de tipos */
.rejilla-tipos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
@media (max-width: 900px) { .rejilla-tipos { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .rejilla-tipos { grid-template-columns: 1fr; } }
.tarjeta-tipo { position: relative; display: block; padding: 26px 24px 24px; border-radius: var(--radio); background: var(--tarjeta); text-decoration: none; box-shadow: var(--sombra); overflow: hidden; transition: transform .3s, box-shadow .3s; isolation: isolate; }
.tarjeta-tipo::before { content: ''; position: absolute; inset: auto -30% -60% auto; width: 220px; height: 220px; border-radius: 50%; background: var(--c); opacity: .1; transition: transform .5s, opacity .3s; z-index: -1; }
.tarjeta-tipo:hover { transform: translateY(-4px); box-shadow: 0 18px 40px color-mix(in srgb, var(--c) 22%, transparent); }
.tarjeta-tipo:hover::before { transform: scale(1.6); opacity: .16; }
.tarjeta-tipo__num { font: 800 3.2rem/1 var(--titulos); color: var(--c); letter-spacing: -.05em; }
.tarjeta-tipo h3 { margin: .5rem 0 .35rem; }
.tarjeta-tipo p { color: var(--suave); margin: 0; font-size: .97rem; }
.tarjeta-tipo__centro { position: absolute; top: 22px; right: 22px; font-size: .76rem; color: var(--suave); padding: .3em .7em; border-radius: 999px; background: var(--papel-2); }

/* chapas */
.chapa { --c: var(--tipo); display: inline-grid; place-items: center; width: 2.1em; height: 2.1em; border-radius: 50%; background: var(--c); color: #fff; font: 700 .95em/1 var(--titulos); flex: none; }
.chapa--mini { width: 1.6em; height: 1.6em; font-size: .78em; vertical-align: middle; }

/* tres pasos / centros */
.tres { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
@media (max-width: 820px) { .tres { grid-template-columns: 1fr; } }
.caja { background: var(--tarjeta); border-radius: var(--radio); padding: 26px; box-shadow: var(--sombra); }
.caja h3 { margin-top: .2rem; }
.caja p:last-child { margin-bottom: 0; }
.caja__tipos { display: flex; gap: 6px; margin-bottom: 14px; }
.caja__emocion { font-size: .85rem; color: var(--suave); }

/* anuncios: espacio reservado para no mover la página */
.anuncio { margin: 2.2rem auto; text-align: center; min-height: 280px; display: flex; flex-direction: column; justify-content: center; }
.anuncio__etiqueta { display: block; font-size: .7rem; color: var(--suave); margin-bottom: 4px; letter-spacing: .04em; }
.anuncio--demo { border: 1.5px dashed var(--linea); border-radius: 12px; color: var(--suave); font-size: .8rem; background: repeating-linear-gradient(45deg, transparent 0 12px, color-mix(in srgb, var(--linea) 35%, transparent) 12px 13px); }
.anuncio--lateral { min-height: 600px; margin: 0; }
.anuncio--ancho { min-height: 250px; }
@media (max-width: 700px) { .anuncio { min-height: 300px; } }

/* revelado al hacer scroll */
.revela { opacity: 0; transform: translateY(26px); transition: opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1); transition-delay: var(--d, 0s); }
.revela.visto { opacity: 1; transform: none; }

/* pie */
.pie { background: var(--noche); color: rgba(255,255,255,.78); padding: 64px 0 28px; margin-top: 0; }
.pie__in { width: min(var(--ancho), 100% - 32px); margin-inline: auto; display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 40px; }
@media (max-width: 820px) { .pie__in { grid-template-columns: 1fr; } }
.pie h2 { font-size: 1rem; color: #fff; margin: 0 0 1rem; }
.pie h2 + ul + h2, .pie ul + h2 { margin-top: 1.6rem; }
.pie ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.pie a { text-decoration: none; }
.pie a:hover { color: #fff; }
.pie__simbolo { width: 54px; height: 54px; margin-bottom: 1rem; }
.pie__simbolo .s-circulo { stroke: #fff; }
.pie__marca strong { color: #fff; font: 800 1.3rem var(--titulos); }
.pie__nota { width: min(var(--ancho), 100% - 32px); margin: 48px auto 0; padding-top: 22px; border-top: 1px solid var(--noche-linea); font-size: .85rem; color: rgba(255,255,255,.5); }

/* llamada final */
.llamada { border-radius: 28px; padding: clamp(36px, 6vw, 72px); display: grid; grid-template-columns: 1fr auto; gap: 30px; align-items: center; }
.llamada h2 { margin-bottom: .3em; }
.llamada p { margin: 0; color: rgba(255,255,255,.75); max-width: 40em; }
@media (max-width: 760px) { .llamada { grid-template-columns: 1fr; } }

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

/* capas dinámicas del símbolo */
.simbolo-vivo .d-ala { fill: none; stroke-width: 7; stroke-linecap: round; opacity: .85; animation: aparece-suave .5s ease; }
.simbolo-vivo .d-flecha { stroke-width: 3; transition: stroke-dashoffset .7s cubic-bezier(.6,.1,.2,1); }
.simbolo-vivo .d-estres { stroke: #ff6b6b; }
.simbolo-vivo .d-crece { stroke: #51cf66; }
.simbolo-vivo .d-centro { opacity: .14; animation: aparece-suave .4s ease; }
.simbolo-vivo .s-triangulo, .simbolo-vivo .s-hexada, .simbolo-vivo .s-circulo { transition: opacity .3s; }
.simbolo-vivo.con-tipo .s-triangulo, .simbolo-vivo.con-tipo .s-hexada { opacity: .35; }
.simbolo-vivo.con-tipo .s-punto { opacity: .4; transition: opacity .3s; }
.simbolo-vivo.con-tipo .s-punto.relacionado, .simbolo-vivo.con-tipo .s-punto.activo { opacity: 1; }
.simbolo-vivo .s-punto.activo circle { fill: var(--c); filter: drop-shadow(0 0 14px var(--c)); }
.simbolo-vivo[data-eneagrama] .s-punto { cursor: pointer; }
@keyframes aparece-suave { from { opacity: 0; } }

/* explorador */
.explorador { padding: clamp(28px, 4vw, 48px) 0 clamp(48px, 7vw, 90px); }
.explorador__cabeza { max-width: 760px; margin-bottom: 1.5rem; }
.explorador__in { display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(20px, 4vw, 56px); align-items: center; }
@media (max-width: 900px) { .explorador__in { grid-template-columns: 1fr; } }
.explorador__simbolo { position: relative; max-width: 600px; margin: 0 auto; }
.capas { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-bottom: 8px; }
.capa { display: inline-flex; align-items: center; gap: .35em; border: 0; border-radius: 999px; padding: .5em 1em; font: 500 .9rem var(--texto); background: rgba(255,255,255,.07); color: rgba(255,255,255,.6); cursor: pointer; box-shadow: inset 0 0 0 1px var(--noche-linea); transition: .2s; }
.capa .ico { width: 1em; height: 1em; }
.capa.activa { background: rgba(255,255,255,.16); color: #fff; }
.capa[data-capa=estres].activa .ico { color: #ff6b6b; }
.capa[data-capa=crecimiento].activa .ico { color: #51cf66; }
.ficha-viva { --c: var(--marca); background: rgba(255,255,255,.05); border: 1px solid var(--noche-linea); border-radius: 24px; padding: clamp(22px, 3vw, 34px); backdrop-filter: blur(6px); min-height: 380px; display: flex; flex-direction: column; justify-content: center; }
.ficha-viva__guia { color: rgba(255,255,255,.7); font-size: 1.1rem; }
.ficha-viva__botones { display: grid; grid-template-columns: repeat(9, 1fr); gap: 6px; }
.ficha-viva__botones button { aspect-ratio: 1; border-radius: 50%; border: 0; background: color-mix(in srgb, var(--c) 25%, transparent); color: #fff; font: 700 1rem var(--titulos); cursor: pointer; box-shadow: inset 0 0 0 1.5px var(--c); transition: .2s; }
.ficha-viva__botones button:hover { background: var(--c); }
.ficha-viva__llena.entra { animation: sube .5s cubic-bezier(.2,.7,.2,1); }
@keyframes sube { from { opacity: 0; transform: translateY(12px); } }
.ficha-viva__top { display: flex; gap: 16px; align-items: center; }
.ficha-viva__num { font: 800 4.2rem/1 var(--titulos); color: var(--c); text-shadow: 0 0 40px var(--c); }
.ficha-viva__centro { margin: 0; font-size: .82rem; color: rgba(255,255,255,.55); }
.ficha-viva h2 { margin: 0; font-size: 1.9rem; }
.ficha-viva__lema { color: rgba(255,255,255,.8); font-size: 1.08rem; margin: .8rem 0 1.2rem; }
.ficha-viva__datos { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 0 0 1.2rem; }
.ficha-viva__datos div { grid-column: 1 / -1; background: rgba(255,255,255,.05); border-radius: 12px; padding: 10px 14px; }
.ficha-viva__datos .mitad { grid-column: auto; }
.ficha-viva__datos dt { font-size: .76rem; color: rgba(255,255,255,.5); }
.ficha-viva__datos dd { margin: 0; font-size: .95rem; line-height: 1.45; }
.ficha-viva__mov { list-style: none; margin: 0 0 1.4rem; padding: 0; display: grid; gap: 6px; font-size: .93rem; }
.ficha-viva__mov li { display: flex; justify-content: space-between; gap: 10px; padding-bottom: 6px; border-bottom: 1px solid var(--noche-linea); }
.ficha-viva__mov span { display: inline-flex; gap: .4em; align-items: center; color: rgba(255,255,255,.6); }
.ficha-viva__mov .ico { width: 1em; }
.mov-estres .ico { color: #ff6b6b; } .mov-crece .ico { color: #51cf66; }

/* prosa larga */
.prosa { font-size: 1.08rem; }
.prosa h2 { margin-top: 2.2em; }
.prosa h3 { margin-top: 1.8em; }
.prosa ul, .prosa ol { padding-left: 1.3em; margin: 0 0 1.2em; }
.prosa li { margin-bottom: .5em; }
.prosa li::marker { color: var(--tipo); }
.prosa blockquote { margin: 1.8em 0; padding: .2em 0 .2em 1.3em; border-left: 3px solid var(--tipo); font: 500 1.3rem/1.45 var(--titulos); color: var(--tinta); }
.prosa strong { color: var(--tinta); }
.llamada--compacta { margin-top: 3rem; padding: 32px; border-radius: 22px; }
.llamada--compacta h2 { margin: 0 0 .3em; font-size: 1.6rem; }

/* 404 */
.vacio { text-align: center; padding: 120px 0; }

/* ficha de eneatipo */
.tipo-cabeza { padding: clamp(28px, 4vw, 44px) 0 clamp(110px, 12vw, 150px); }
.tipo-cabeza .aurora { background: radial-gradient(45% 45% at 75% 40%, color-mix(in srgb, var(--tipo) 70%, transparent), transparent 70%), radial-gradient(35% 40% at 15% 80%, color-mix(in srgb, var(--tipo) 35%, transparent), transparent 70%); }
.tipo-cabeza__fondo { position: absolute; right: -2vw; bottom: -14vw; font: 800 clamp(260px, 42vw, 620px)/1 var(--titulos); color: transparent; -webkit-text-stroke: 1.5px color-mix(in srgb, var(--tipo) 45%, transparent); letter-spacing: -.06em; z-index: -1; pointer-events: none; }
.tipo-cabeza__in { display: grid; grid-template-columns: 1.25fr .75fr; gap: clamp(20px, 4vw, 60px); align-items: center; }
.tipo-cabeza h1 { font-size: clamp(2.2rem, 5vw, 4rem); }
.tipo-cabeza .destacado-tipo { color: color-mix(in srgb, var(--tipo) 70%, #fff); display: block; font-size: .55em; letter-spacing: -.02em; margin-bottom: .15em; }
.tipo-cabeza__alias { color: rgba(255,255,255,.55); margin: -.2rem 0 1.1rem; }
.tipo-cabeza__simbolo { position: relative; max-width: 420px; justify-self: center; width: 100%; }
.halo--tipo { background: var(--tipo); opacity: .35; }
@media (max-width: 860px) { .tipo-cabeza__in { grid-template-columns: 1fr; } .tipo-cabeza__simbolo { max-width: 220px; order: -1; margin-bottom: -10px; } }
.pildoras { list-style: none; padding: 0; margin: 1.6rem 0 0; display: flex; flex-wrap: wrap; gap: 8px; }
.pildoras li { padding: .5em 1em; border-radius: 999px; background: rgba(255,255,255,.08); box-shadow: inset 0 0 0 1px var(--noche-linea); font-weight: 600; }
.pildoras span { font-weight: 400; color: rgba(255,255,255,.55); margin-right: .3em; }

.claves { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: -80px; position: relative; z-index: 2; }
@media (max-width: 820px) { .claves { grid-template-columns: 1fr; } }
.clave { background: var(--tarjeta); border-radius: var(--radio); padding: 22px 24px; box-shadow: 0 20px 50px rgba(23,20,42,.14); border-top: 4px solid var(--tipo); }
.clave span { font-size: .8rem; font-weight: 600; color: var(--tipo); }
.clave p { margin: .4rem 0 0; font: 600 1.06rem/1.45 var(--titulos); }

.columnas { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: clamp(30px, 5vw, 72px); padding: clamp(40px, 6vw, 72px) 0 80px; }
@media (max-width: 1020px) { .columnas { grid-template-columns: 1fr; } .lateral { display: none; } }
.articulo { max-width: 760px; }
.articulo .bloque:first-child h2 { margin-top: 0; }
.lateral { position: relative; }
.indice { position: sticky; top: 90px; margin-bottom: 24px; }
.indice__titulo { font-size: .8rem; color: var(--suave); font-weight: 600; margin-bottom: .6rem; }
.indice ol { list-style: none; padding: 0; margin: 0; border-left: 2px solid var(--linea); }
.indice a { display: block; padding: .32em 0 .32em 1em; margin-left: -2px; border-left: 2px solid transparent; text-decoration: none; font-size: .9rem; color: var(--suave); line-height: 1.35; transition: .2s; }
.indice a:hover { color: var(--tinta); }
.indice a.activo { color: var(--tipo); border-left-color: var(--tipo); font-weight: 600; }

.rasgos { background: color-mix(in srgb, var(--tipo) 7%, var(--tarjeta)); border-radius: var(--radio); padding: 24px 26px; margin: 2rem 0; }
.rasgos h3 { margin-top: 0; }
.rasgos ul { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.rasgos li { margin: 0; padding: .45em .9em; border-radius: 999px; background: var(--tarjeta); font-size: .93rem; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tipo) 25%, transparent); }

.nucleo { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.nucleo__item { background: var(--tarjeta); border-radius: var(--radio); padding: 22px; box-shadow: var(--sombra); font-size: .98rem; }
.nucleo__item h3 { margin: .2rem 0 .5rem; color: var(--tipo); }
.nucleo__item p { margin: 0; }
.nucleo__item--idea_santa, .nucleo__item--defensa { background: var(--papel-2); box-shadow: none; }
.nucleo__item--defensa { grid-column: 1 / -1; }
.nucleo__item--virtud { background: color-mix(in srgb, var(--tipo) 9%, var(--tarjeta)); }
.nucleo__et, .tarjeta-mini__et, .subtipo__et, .nivel__et { display: inline-flex; align-items: center; gap: .4em; font-size: .78rem; font-weight: 600; color: var(--suave); }
.tarjeta-mini__et .ico { width: 1.1em; }
@media (max-width: 640px) { .nucleo { grid-template-columns: 1fr; } }

.dos { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 1.4rem 0; }
@media (max-width: 680px) { .dos { grid-template-columns: 1fr; } }
.tarjeta-mini { border-radius: var(--radio); padding: 22px; background: var(--tarjeta); box-shadow: var(--sombra); border-top: 4px solid var(--c); font-size: .97rem; }
.tarjeta-mini h3 { margin: .3rem 0 .6rem; }
.tarjeta-mini h3 a { text-decoration: none; color: var(--c); }
.tarjeta-mini p:last-child { margin-bottom: 0; }
.tarjeta-mini--estres .tarjeta-mini__et .ico { color: #e03131; }
.tarjeta-mini--crecimiento .tarjeta-mini__et .ico { color: #2f9e44; }

.subtipos { display: grid; gap: 14px; }
.subtipo { padding: 22px 24px; border-radius: var(--radio); background: var(--tarjeta); box-shadow: var(--sombra); font-size: .98rem; }
.subtipo h3 { margin: .3rem 0 .5rem; }
.subtipo p:last-child { margin-bottom: 0; }
.subtipo--contra { box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--tipo) 45%, transparent), var(--sombra); }
.subtipo--contra .subtipo__et { color: var(--tipo); }

.niveles { display: grid; gap: 10px; }
.nivel { padding: 20px 22px 20px 26px; border-radius: 14px; background: var(--tarjeta); position: relative; font-size: .98rem; overflow: hidden; }
.nivel::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 6px; }
.nivel--sano::before { background: #2f9e44; }
.nivel--medio::before { background: #e8a400; }
.nivel--insano::before { background: #e03131; }
.nivel p:last-child { margin-bottom: 0; }
.nivel__et { display: block; margin-bottom: .3rem; }

.luces { margin: 2.4rem 0; }
.luces > div { background: var(--tarjeta); border-radius: var(--radio); padding: 22px 24px; box-shadow: var(--sombra); }
.luces h3 { margin-top: 0; }
.luces ul { padding-left: 1.1em; margin: 0; font-size: .98rem; }

.confusiones { margin: 1.6rem 0 2rem; }
.confusion { display: grid; grid-template-columns: auto 1fr; gap: 18px; align-items: start; padding: 18px 0; border-bottom: 1px solid var(--linea); }
.confusion__par { display: flex; align-items: center; gap: 6px; text-decoration: none; color: var(--suave); font-size: .85rem; }
.confusion p { margin: 0; font-size: .98rem; }
@media (max-width: 520px) { .confusion { grid-template-columns: 1fr; gap: 8px; } }

.practicas ol { counter-reset: p; list-style: none; padding: 0; }
.practicas li { counter-increment: p; position: relative; padding: 14px 16px 14px 56px; margin: 0 0 8px; border-radius: 14px; background: var(--tarjeta); box-shadow: var(--sombra); font-size: .98rem; }
.practicas li::before { content: counter(p); position: absolute; left: 14px; top: 12px; width: 28px; height: 28px; border-radius: 50%; background: var(--tipo); color: #fff; display: grid; place-items: center; font: 700 .85rem var(--titulos); }

.frases { margin: 2.4rem 0; }
.frases blockquote { margin: .7rem 0; font-size: 1.15rem; border-left-color: color-mix(in srgb, var(--tipo) 60%, transparent); }
.famosos ul { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.famosos li { margin: 0; padding: .4em .9em; border-radius: 999px; background: var(--papel-2); font-size: .93rem; }
.famosos p a { display: inline-flex; gap: .4em; align-items: center; color: var(--tipo); font-weight: 600; text-decoration: none; }
.famosos .ico { width: 1em; }

.faq details { border-bottom: 1px solid var(--linea); padding: 4px 0; }
.faq summary { cursor: pointer; list-style: none; padding: 14px 36px 14px 0; position: relative; font: 600 1.08rem/1.4 var(--titulos); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 4px; top: 10px; font-size: 1.5rem; color: var(--tipo); transition: transform .25s; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { margin: 0 0 16px; color: var(--tinta-2); }

.vecinos { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 2.6rem; }
.vecinos a { padding: 18px 20px; border-radius: var(--radio); background: var(--tarjeta); box-shadow: var(--sombra); text-decoration: none; border-bottom: 3px solid var(--c); transition: transform .2s; }
.vecinos a:last-child { text-align: right; }
.vecinos a:hover { transform: translateY(-3px); }
.vecinos span { display: block; font-size: .8rem; color: var(--suave); }
.vecinos strong { font: 700 1.05rem var(--titulos); }

.cifras { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 40px; padding-top: 28px; border-top: 1px solid var(--noche-linea); max-width: 520px; }
.cifras strong { display: block; font: 800 clamp(2rem, 4vw, 3rem)/1 var(--titulos); letter-spacing: -.04em; color: #fff; }
.cifras span { font-size: .85rem; color: rgba(255,255,255,.6); }

/* test */
.test { min-height: calc(100vh - 68px); padding: clamp(24px, 4vw, 44px) 0 80px; }
.test__intro { max-width: 760px; }
.versiones { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 2.2rem 0 2rem; max-width: 900px; }
@media (max-width: 700px) { .versiones { grid-template-columns: 1fr; } }
.version { text-align: left; display: flex; flex-direction: column; gap: .5rem; padding: 28px; border-radius: 22px; border: 0; cursor: pointer; background: rgba(255,255,255,.06); color: #fff; box-shadow: inset 0 0 0 1px var(--noche-linea); font: inherit; transition: transform .25s, background .25s, box-shadow .25s; }
.version:hover { transform: translateY(-4px); background: rgba(255,255,255,.1); box-shadow: inset 0 0 0 1px rgba(255,255,255,.3); }
.version strong { font: 700 1.7rem/1.1 var(--titulos); letter-spacing: -.02em; }
.version > span:not(.version__tiempo):not(.version__ir) { color: rgba(255,255,255,.72); }
.version__tiempo { display: inline-flex; align-items: center; gap: .4em; font-size: .85rem; color: #e8a400; }
.version__tiempo .ico { width: 1em; }
.version__ir { margin-top: auto; padding-top: 1rem; display: inline-flex; align-items: center; gap: .4em; font-weight: 600; }
.version--completa { background: linear-gradient(135deg, rgba(109,74,255,.35), rgba(232,164,0,.15)); }
.consejos { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; max-width: 900px; color: rgba(255,255,255,.7); font-size: .95rem; }
.consejos strong { color: #fff; display: block; }
@media (max-width: 700px) { .consejos { grid-template-columns: 1fr; } }
.enlace { background: none; border: 0; color: inherit; font: inherit; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; padding: 0; opacity: .8; }
.enlace:hover { opacity: 1; }
.test__reanudar { margin-top: 1.6rem; color: #e8a400; }

.progreso { height: 6px; background: rgba(255,255,255,.1); border-radius: 99px; overflow: hidden; max-width: 820px; margin: 1rem auto 0; }
.progreso__barra { height: 100%; width: 0; background: linear-gradient(90deg, var(--t1), var(--t4), var(--t2), var(--t3)); border-radius: 99px; transition: width .4s ease; }
.test__estado { display: flex; justify-content: space-between; max-width: 820px; margin: .8rem auto 0; font-size: .85rem; color: rgba(255,255,255,.6); }
.pregunta { max-width: 820px; margin: clamp(30px, 6vh, 70px) auto 0; text-align: center; min-height: 340px; }
.pregunta.entra { animation: sube .45s cubic-bezier(.2,.7,.2,1); }
.pregunta__guia { color: rgba(255,255,255,.55); font-size: .95rem; }
.pregunta__texto { font: 600 clamp(1.5rem, 3.4vw, 2.4rem)/1.25 var(--titulos); margin: 0 auto 2.4rem; max-width: 24em; outline: none; }
.escala { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; }
.escala button { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 18px 6px 16px; border: 0; border-radius: 18px; background: rgba(255,255,255,.05); color: rgba(255,255,255,.75); font: 500 .88rem/1.25 var(--texto); cursor: pointer; transition: background .2s, transform .2s, color .2s; }
.escala button:hover { background: rgba(255,255,255,.11); color: #fff; transform: translateY(-3px); }
.escala__punto { width: 22px; height: 22px; border-radius: 50%; box-shadow: inset 0 0 0 2px rgba(255,255,255,.4); transition: .2s; }
.escala button:nth-child(1) .escala__punto { width: 30px; height: 30px; } .escala button:nth-child(2) .escala__punto { width: 24px; height: 24px; }
.escala button:nth-child(4) .escala__punto { width: 24px; height: 24px; } .escala button:nth-child(5) .escala__punto { width: 30px; height: 30px; }
.escala button:nth-child(4) .escala__punto, .escala button:nth-child(5) .escala__punto { box-shadow: inset 0 0 0 2px #a78bfa; }
.escala button:nth-child(1) .escala__punto, .escala button:nth-child(2) .escala__punto { box-shadow: inset 0 0 0 2px #f59f00; }
.escala button.elegido { background: rgba(255,255,255,.16); color: #fff; }
.escala button.elegido .escala__punto { background: #fff; box-shadow: 0 0 0 5px rgba(255,255,255,.18); }
@media (max-width: 560px) { .escala { grid-template-columns: 1fr; gap: 8px; } .escala button { flex-direction: row; padding: 14px 18px; text-align: left; } .escala__punto { width: 20px !important; height: 20px !important; } }
.par { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 1rem; }
.par[hidden], .escala[hidden] { display: none; }
@media (max-width: 640px) { .par { grid-template-columns: 1fr; } }
.par button { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; text-align: left; padding: 26px; min-height: 180px; border: 0; border-radius: 22px; background: rgba(255,255,255,.06); color: #fff; cursor: pointer; font: 500 1.15rem/1.45 var(--titulos); box-shadow: inset 0 0 0 1px var(--noche-linea); transition: .2s; }
.par button:hover { background: rgba(255,255,255,.11); transform: translateY(-3px); }
.par button.elegido { background: rgba(255,255,255,.18); box-shadow: inset 0 0 0 2px #fff; }
.par__letra { width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; font: 700 .85rem var(--texto); background: rgba(255,255,255,.12); }
.test__nav { display: flex; justify-content: space-between; max-width: 820px; margin: 2rem auto 0; font-size: .9rem; color: rgba(255,255,255,.55); }
@media (max-width: 700px) { .test__teclas { display: none; } }

.calculando { text-align: center; padding: 60px 0; }
.simbolo-calcula { width: 240px; margin: 0 auto 1rem; animation: gira 6s linear infinite; }
.calculando p { color: rgba(255,255,255,.7); font-size: 1.1rem; }

/* resultado */
.resultado__cabeza { padding: clamp(40px, 6vw, 80px) 0 clamp(90px, 10vw, 130px); }
.resultado__cabeza .aurora { background: radial-gradient(45% 50% at 78% 45%, color-mix(in srgb, var(--tipo) 75%, transparent), transparent 70%); }
.resultado__in { display: grid; grid-template-columns: 1fr auto; gap: 30px; align-items: center; }
.resultado__titulo { font-size: clamp(2.2rem, 5vw, 4rem); font-weight: 800; letter-spacing: -.035em; }
.resultado__titulo .r-num { color: color-mix(in srgb, var(--tipo) 65%, #fff); }
.resultado__num { width: clamp(150px, 22vw, 260px); aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--tipo) 80%, #fff), var(--tipo) 55%, color-mix(in srgb, var(--tipo) 60%, #000)); box-shadow: 0 0 80px color-mix(in srgb, var(--tipo) 60%, transparent); animation: aparece .9s cubic-bezier(.2,.7,.2,1); }
.resultado__num span { font: 800 clamp(5rem, 11vw, 9rem)/1 var(--titulos); color: #fff; }
@media (max-width: 760px) { .resultado__in { grid-template-columns: 1fr; } .resultado__num { order: -1; width: 130px; } .resultado__num span { font-size: 4.5rem; } }
.r-fiabilidad { margin-top: 1.4rem; color: rgba(255,255,255,.7); font-size: .95rem; }
.resultado__cuerpo { margin-top: -70px; position: relative; z-index: 2; padding-bottom: 80px; }
.resultado__barras h3 { margin-top: 0; }
.barras { display: grid; gap: 8px; margin: 1rem 0; }
.barra { display: grid; grid-template-columns: 190px 1fr 48px; gap: 14px; align-items: center; text-decoration: none; font-size: .93rem; }
.barra__et b { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--c); color: #fff; font: 700 .8rem var(--titulos); margin-right: 6px; }
.barra__et i { font-style: normal; }
.barra__pista { height: 12px; border-radius: 99px; background: var(--papel-2); overflow: hidden; }
.barra__llena { display: block; height: 100%; width: 0; border-radius: 99px; background: var(--c); transition: width 1.1s cubic-bezier(.2,.7,.2,1); }
.barra__pct { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }
.barra--top { font-weight: 700; }
.barra--top .barra__pista { height: 16px; }
@media (max-width: 560px) { .barra { grid-template-columns: 1fr 44px; } .barra__pista { grid-column: 1 / -1; grid-row: 2; } }
.nota { font-size: .88rem; color: var(--suave); margin: 0; }
.resultado__datos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin: 16px 0; }
.resultado__datos h3 { margin: .3rem 0 .5rem; color: var(--tipo); }
.resultado__datos p { font-size: .95rem; margin: 0; }
@media (max-width: 820px) { .resultado__datos { grid-template-columns: 1fr; } }

.informe { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(20px, 4vw, 48px); padding: clamp(26px, 4vw, 44px); border-radius: 26px; margin: 28px 0; background: linear-gradient(135deg, color-mix(in srgb, var(--tipo) 14%, var(--tarjeta)), var(--tarjeta)); box-shadow: var(--sombra), inset 0 0 0 1.5px color-mix(in srgb, var(--tipo) 30%, transparent); }
@media (max-width: 820px) { .informe { grid-template-columns: 1fr; } }
.informe h3 { font-size: clamp(1.5rem, 2.6vw, 2rem); margin-top: 0; }
.informe__campos { display: grid; gap: 12px; align-content: start; }
.informe label { display: grid; gap: 4px; font-size: .88rem; font-weight: 600; }
.informe input[type=text], .informe input[type=email] { font: inherit; font-weight: 400; padding: .85em 1em; border-radius: 12px; border: 1.5px solid var(--linea); background: var(--papel); color: var(--tinta); }
.informe input:focus { outline: none; border-color: var(--tipo); }
.informe__acepto { display: flex !important; grid-template-columns: none; align-items: flex-start; gap: 10px !important; font-weight: 400 !important; font-size: .82rem !important; color: var(--suave); }
.informe__acepto input { margin-top: 3px; accent-color: var(--tipo); }
.informe__trampa { position: absolute; left: -9999px; }
.informe .boton { justify-content: center; background: var(--tipo); }
.informe__msg { margin: 0; font-size: .92rem; min-height: 1.4em; }
.informe__msg.ok { color: #2f9e44; font-weight: 600; }
.informe__msg.error { color: #e03131; }
.informe.enviado input, .informe.enviado .boton { opacity: .5; pointer-events: none; }
.resultado__siguiente { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }

.portada--corta { padding: clamp(28px, 4vw, 44px) 0 clamp(48px, 6vw, 80px); }
h2.h3 { font-size: clamp(1.2rem, 2vw, 1.45rem); }
.tabla-envoltura { overflow-x: auto; border-radius: var(--radio); box-shadow: var(--sombra); background: var(--tarjeta); }
.tabla-tipos { width: 100%; border-collapse: collapse; font-size: .92rem; min-width: 860px; }
.tabla-tipos th, .tabla-tipos td { padding: 14px 16px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--linea); }
.tabla-tipos thead th { font-size: .8rem; color: var(--suave); font-weight: 600; background: var(--papel-2); }
.tabla-tipos tbody th a { display: flex; align-items: center; gap: 8px; text-decoration: none; font-family: var(--titulos); white-space: nowrap; }
.tabla-tipos__mov { white-space: nowrap; }
.tabla-tipos__mov .ico { width: 1em; display: inline; vertical-align: -2px; }

/* artículos */
.articulo-cabeza { padding: clamp(28px, 4vw, 44px) 0 clamp(48px, 7vw, 84px); }
.articulo-cabeza .aurora { background: radial-gradient(45% 45% at 80% 40%, color-mix(in srgb, var(--tipo) 60%, transparent), transparent 70%), radial-gradient(35% 40% at 10% 90%, rgba(232,164,0,.18), transparent 70%); }
.articulo-cabeza h1 { max-width: 18em; font-size: clamp(2.2rem, 5vw, 4rem); }
.articulo-cabeza .entradilla { max-width: 42em; }
.articulo-cabeza__tipos { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 1.4rem; }
.articulo-cabeza__tipos a { display: inline-flex; align-items: center; gap: 8px; padding: .35em .9em .35em .35em; border-radius: 999px; background: rgba(255,255,255,.08); text-decoration: none; font-weight: 500; }
.h2-tipo { display: flex; align-items: center; gap: .5em; }
.h2-tipo .chapa { font-size: .55em; width: 2.2em; height: 2.2em; }
.h2-tipo span:not(.chapa) { flex: 1; }
.h2-tipo .chapa { flex: none; }
.prosa a { color: var(--marca); }
.prosa a.enlace-tipo, a.enlace-tipo { color: var(--c); font-weight: 600; text-decoration-color: color-mix(in srgb, var(--c) 40%, transparent); }
a.enlace-tipo { display: inline-flex; align-items: center; gap: .35em; }
a.enlace-tipo .ico { width: 1em; }

.famosos-rejilla { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 640px) { .famosos-rejilla { grid-template-columns: 1fr; } }
.famoso { display: grid; grid-template-columns: 52px 1fr; gap: 14px; padding: 20px; border-radius: var(--radio); background: var(--tarjeta); box-shadow: var(--sombra); font-size: .95rem; }
.famoso__ini { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; font: 600 1.4rem var(--titulos); color: #fff; background: radial-gradient(circle at 30% 30%, color-mix(in srgb, var(--tipo) 70%, #fff), var(--tipo)); }
.famoso h3 { margin: 0; font-size: 1.1rem; }
.famoso__ambito { font-size: .8rem; color: var(--suave); }
.famoso p { margin: .5rem 0 0; }

.relacionados { margin-top: 3rem; }
.relacionados h2 { font-size: 1.5rem; }
.relacionados__lista { display: grid; gap: 10px; }
.relacionados__lista a { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 2px 14px; padding: 16px 20px; border-radius: 14px; background: var(--tarjeta); box-shadow: var(--sombra); text-decoration: none; color: var(--tinta); transition: transform .2s; }
.relacionados__lista a:hover { transform: translateX(4px); }
.relacionados__lista span { grid-column: 1; font-size: .78rem; color: var(--suave); }
.relacionados__lista strong { grid-column: 1; font: 600 1.05rem/1.3 var(--titulos); }
.relacionados__lista .ico { grid-column: 2; grid-row: 1 / span 2; color: var(--marca); }

.lista-articulos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
@media (max-width: 900px) { .lista-articulos { grid-template-columns: 1fr 1fr; } }
@media (max-width: 580px) { .lista-articulos { grid-template-columns: 1fr; } }
.tarjeta-articulo { display: flex; flex-direction: column; gap: .4rem; padding: 24px; border-radius: var(--radio); background: var(--tarjeta); box-shadow: var(--sombra); text-decoration: none; transition: transform .25s, box-shadow .25s; }
.tarjeta-articulo:hover { transform: translateY(-3px); box-shadow: 0 0 0 1px rgba(109,74,255,.3), 0 16px 34px rgba(109,74,255,.12); }
.tarjeta-articulo span { font-size: .78rem; color: var(--suave); }
.tarjeta-articulo h3 { margin: 0; font-size: 1.2rem; }
.tarjeta-articulo p { margin: 0; font-size: .93rem; color: var(--suave); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.atajos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 40px; }
@media (max-width: 760px) { .atajos { grid-template-columns: 1fr; } }
.atajos a { padding: 22px 24px; border-radius: var(--radio); text-decoration: none; background: var(--noche); color: #fff; display: grid; gap: 4px; transition: transform .2s; }
.atajos a:hover { transform: translateY(-3px); }
.atajos strong { font: 600 1.2rem var(--titulos); }
.atajos span { color: rgba(255,255,255,.65); font-size: .9rem; }
.menu__tipos--grande { gap: 10px; flex-wrap: wrap; }
.menu__tipos--grande a { width: 54px; height: 54px; font-size: 1.2rem; }

/* subtipos */
.hermanos { margin-top: 2.4rem; }
.hermanos .tarjeta-mini { text-decoration: none; display: block; }
.hermanos .tarjeta-mini h3 { color: var(--c); }
.matriz-subtipos { display: grid; gap: 10px; }
.fila-subtipos { display: grid; grid-template-columns: 220px repeat(3, 1fr); gap: 10px; }
@media (max-width: 760px) { .fila-subtipos { grid-template-columns: 1fr; } }
.fila-subtipos__tipo { display: flex; align-items: center; gap: 10px; text-decoration: none; font: 600 1.05rem var(--titulos); }
.celda-subtipo { padding: 16px 18px; border-radius: 14px; background: var(--tarjeta); box-shadow: var(--sombra); text-decoration: none; display: grid; gap: 2px; border-left: 4px solid var(--c); transition: transform .2s; }
.celda-subtipo:hover { transform: translateY(-2px); }
.celda-subtipo span { font-size: .76rem; color: var(--suave); }
.celda-subtipo strong { font: 600 1.02rem var(--titulos); }
.celda-subtipo--contra { background: color-mix(in srgb, var(--c) 8%, var(--tarjeta)); }

/* comparativas y parejas */
.duelo { padding: clamp(28px, 4vw, 44px) 0 clamp(48px, 7vw, 84px); }
.duelo__aurora { background: radial-gradient(40% 50% at 72% 45%, color-mix(in srgb, var(--ca) 60%, transparent), transparent 70%), radial-gradient(40% 50% at 92% 55%, color-mix(in srgb, var(--cb) 60%, transparent), transparent 70%); }
.duelo__in { display: grid; grid-template-columns: 1fr auto; gap: 30px; align-items: center; }
@media (max-width: 760px) { .duelo__in { grid-template-columns: 1fr; } .duelo__nums { order: -1; } }
.duelo h1 { font-size: clamp(2.1rem, 4.6vw, 3.6rem); }
.duelo__nums { display: flex; align-items: center; gap: 14px; font: 600 clamp(4rem, 10vw, 8rem)/1 var(--titulos); letter-spacing: -.05em; }
.duelo__a { color: color-mix(in srgb, var(--ca) 75%, #fff); text-shadow: 0 0 50px var(--ca); }
.duelo__b { color: color-mix(in srgb, var(--cb) 75%, #fff); text-shadow: 0 0 50px var(--cb); }
.duelo__nums i { font: 500 1.2rem var(--texto); font-style: normal; color: rgba(255,255,255,.5); letter-spacing: .1em; }
.parecidos { list-style: none; padding: 0; display: grid; gap: 8px; }
.parecidos li { padding: 14px 18px 14px 46px; border-radius: 12px; background: var(--tarjeta); box-shadow: var(--sombra); position: relative; margin: 0; }
.parecidos li::before { content: "≈"; position: absolute; left: 18px; top: 12px; color: var(--marca); font-weight: 700; }
.tabla-duelo { border-radius: var(--radio); overflow: hidden; background: var(--tarjeta); box-shadow: var(--sombra); font-size: .95rem; }
.tabla-duelo__fila { display: grid; grid-template-columns: 150px 1fr 1fr; border-bottom: 1px solid var(--linea); }
.tabla-duelo__fila > * { padding: 14px 16px; margin: 0; }
.tabla-duelo__fila > :nth-child(2) { border-left: 3px solid var(--ca); }
.tabla-duelo__fila > :nth-child(3) { border-left: 3px solid var(--cb); }
.tabla-duelo__cabeza { background: var(--papel-2); }
.tabla-duelo__cabeza a { display: flex; align-items: center; gap: 8px; text-decoration: none; font: 600 .95rem var(--titulos); color: var(--tinta); }
.tabla-duelo__fila strong { font-size: .85rem; color: var(--suave); font-weight: 600; }
@media (max-width: 640px) { .tabla-duelo__fila { grid-template-columns: 1fr 1fr; } .tabla-duelo__fila > :first-child { grid-column: 1 / -1; padding-bottom: 0; } }

.matriz { display: grid; gap: 6px; max-width: 760px; margin: 0 auto; }
.matriz__fila { display: grid; grid-template-columns: repeat(10, 1fr); gap: 6px; }
.matriz__cab { display: grid; place-items: center; }
.matriz__cab .chapa { font-size: .85rem; }
.matriz__celda, .matriz__vacia { aspect-ratio: 1; border-radius: 10px; }
.matriz__celda { display: flex; align-items: center; justify-content: center; text-decoration: none; font: 600 .9rem var(--titulos); color: #fff; background: linear-gradient(135deg, var(--ca), var(--cb)); opacity: .82; transition: transform .2s, opacity .2s; }
.matriz__celda { white-space: nowrap; }
.matriz__celda i { font-style: normal; font-size: .62em; opacity: .75; margin: 0 2px; font-weight: 500; }
.matriz__celda:hover { opacity: 1; transform: scale(1.12); position: relative; z-index: 1; }
.matriz__vacia { background: transparent; }
@media (max-width: 520px) { .matriz__fila { gap: 3px; } .matriz { gap: 3px; } .matriz__celda { font-size: .7rem; border-radius: 6px; } }

.legal { padding: 50px 0 80px; }
.legal h2 { font-size: 1.5rem; }

/* pie moderno: llamada, rejilla de enlaces y marca gigante */
.pie { position: relative; overflow: hidden; isolation: isolate; padding: 0; background: #0f0c22; color: rgba(255,255,255,.7); }
.pie::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--t4), var(--t2), var(--t3), transparent); opacity: .7; }
.pie__brillo { position: absolute; z-index: -1; left: 50%; top: -260px; width: 900px; height: 520px; transform: translateX(-50%); background: radial-gradient(closest-side, rgba(109,74,255,.35), transparent); filter: blur(30px); }
.pie__envoltura { width: min(var(--ancho), 100% - 32px); margin-inline: auto; padding-top: clamp(56px, 8vw, 96px); }
.pie__llamada { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 24px 40px; padding-bottom: clamp(40px, 6vw, 64px); border-bottom: 1px solid var(--noche-linea); }
.pie__frase { font: 600 clamp(1.8rem, 4vw, 3.2rem)/1.05 var(--titulos); letter-spacing: -.04em; color: #fff; margin: .4rem 0 0; }
.pie__frase span { background: linear-gradient(90deg, #b9a6ff, #ffd6e8 55%, #ffd696); -webkit-background-clip: text; background-clip: text; color: transparent; }
.pie__rejilla { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 40px; padding: clamp(40px, 6vw, 64px) 0; }
@media (max-width: 900px) { .pie__rejilla { grid-template-columns: 1fr 1fr; } .pie__marca { grid-column: 1 / -1; } }
@media (max-width: 480px) { .pie__rejilla { grid-template-columns: 1fr; } }
.pie .marca { color: #fff; margin: 0 0 1rem; }
.pie__simbolo .s-circulo { stroke: #fff !important; }
.pie__marca p { max-width: 30em; font-size: .95rem; line-height: 1.6; }
.pie__chapas { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 1.4rem; }
.pie__chapas a { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font: 600 .85rem var(--titulos); text-decoration: none; color: #fff; background: color-mix(in srgb, var(--c) 22%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 60%, transparent); transition: background .2s, transform .2s, box-shadow .2s; }
.pie__chapas a:hover { background: var(--c); transform: translateY(-3px); box-shadow: 0 8px 20px color-mix(in srgb, var(--c) 45%, transparent); }
.pie nav { display: flex; flex-direction: column; gap: .7rem; }
.pie nav h2 { font: 500 .78rem/1 var(--texto); letter-spacing: .12em; color: rgba(255,255,255,.45); margin: 0 0 .5rem; }
.pie nav a { text-decoration: none; width: fit-content; position: relative; transition: color .2s; }
.pie nav a::after { content: ""; position: absolute; left: 0; bottom: -3px; width: 100%; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform .3s; }
.pie nav a:hover { color: #fff; }
.pie nav a:hover::after { transform: scaleX(1); }
.pie__base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; padding: 22px 0; border-top: 1px solid var(--noche-linea); font-size: .82rem; color: rgba(255,255,255,.45); }
.pie__gigante { margin: 0 0 -.22em; text-align: center; font: 600 clamp(4.5rem, 21vw, 19rem)/.9 var(--titulos); letter-spacing: -.06em; white-space: nowrap; background: linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,0) 80%), linear-gradient(90deg, var(--t1), var(--t4), var(--t2), var(--t3), var(--t7)); background-blend-mode: normal; -webkit-background-clip: text; background-clip: text; color: transparent; opacity: .22; user-select: none; pointer-events: none; }
.pie .marca__simbolo { width: 34px; height: 34px; margin: 0; }

.profundiza { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(20px, 4vw, 48px); padding: clamp(26px, 4vw, 44px); border-radius: 26px; margin: 28px 0; background: linear-gradient(135deg, color-mix(in srgb, var(--tipo) 12%, var(--tarjeta)), var(--tarjeta)); box-shadow: var(--sombra); }
@media (max-width: 820px) { .profundiza { grid-template-columns: 1fr; } }
.profundiza h3 { font-size: clamp(1.5rem, 2.6vw, 2rem); margin-top: 0; }
.profundiza__enlaces { display: grid; gap: 10px; align-content: start; }
.profundiza__enlaces a { display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; align-items: center; padding: 16px 20px; border-radius: 14px; background: var(--tarjeta); box-shadow: var(--sombra); text-decoration: none; transition: transform .2s; }
.profundiza__enlaces a:hover { transform: translateX(4px); }
.profundiza__enlaces span { font-size: .78rem; color: var(--suave); }
.profundiza__enlaces strong { grid-column: 1; font: 600 1.08rem var(--titulos); color: var(--tipo); }
.profundiza__enlaces .ico { grid-column: 2; grid-row: 1 / span 2; color: var(--tipo); }

/* ebook gratis */
.eb-hero { padding: clamp(28px, 4vw, 48px) 0 clamp(48px, 7vw, 90px); position: relative; overflow: hidden; }
.eb-hero__in { display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(28px, 5vw, 70px); align-items: center; margin-top: 18px; }
.eb-hero h1 { font-size: clamp(2.4rem, 5.4vw, 4.2rem); margin: 10px 0 14px; }
.eb-chapa { display: inline-block; padding: 6px 14px; border-radius: 99px; font-size: .85rem; font-weight: 700; background: rgba(255,255,255,.1); box-shadow: inset 0 0 0 1px rgba(255,255,255,.18); margin: 0; }
.eb-lista { list-style: none; padding: 0; margin: 20px 0 0; display: grid; gap: 8px; }
.eb-lista li { display: flex; gap: 10px; align-items: center; font-weight: 600; }
.eb-lista .ico { color: #8ce99a; flex: none; }
.eb-portada { perspective: 1400px; }
.eb-portada img { display: block; width: 100%; max-width: 380px; height: auto; margin: 0 auto; border-radius: 6px 14px 14px 6px; transform: rotateY(-14deg) rotateX(3deg); box-shadow: -18px 30px 60px -18px rgba(0,0,0,.65), inset 4px 0 0 rgba(255,255,255,.15); }
.eb-form { --tipo: #6d4aff; margin: 0; }
.eb-mini { font-size: .92rem; opacity: .85; }
.eb-form .boton + .boton, .eb-form .informe__msg + .boton { justify-self: start; }
.eb-muestras { display: grid; grid-template-columns: repeat(5, 1fr); gap: 18px; }
.eb-muestra { margin: 0; }
.eb-muestra img { width: 100%; height: auto; display: block; border-radius: 10px; box-shadow: var(--sombra); background: #fff; }
.eb-muestra figcaption { margin-top: 12px; display: grid; gap: 4px; font-size: .9rem; line-height: 1.45; }
.eb-muestra figcaption span { opacity: .8; }
.eb-indice ol { list-style: none; padding: 0; margin: 0 auto; max-width: 760px; }
.eb-indice li { display: grid; grid-template-columns: 56px 1fr; gap: 10px; padding: 14px 0; border-bottom: 1px solid var(--linea, rgba(127,127,127,.2)); }
.eb-indice li span { font-weight: 800; font-size: 1.3rem; color: #6d4aff; }
.eb-indice li small { display: block; opacity: .75; font-size: .9rem; margin-top: 2px; }
.eb-cta { text-align: center; margin-top: 30px; }
.eb-faq { max-width: 760px; }
.eb-faq details { padding: 16px 0; border-bottom: 1px solid var(--linea, rgba(127,127,127,.2)); }
.eb-faq summary { font-weight: 700; cursor: pointer; }
.eb-faq details p { margin: 10px 0 0; }
@media (max-width: 980px) { .eb-muestras { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 820px) { .eb-hero__in { grid-template-columns: 1fr; } .eb-portada img { max-width: 260px; transform: none; } }
@media (max-width: 560px) { .eb-muestras { grid-template-columns: repeat(2, 1fr); gap: 14px; } }

/* firma editorial y fuentes */
.firma-editorial { display: flex; gap: 8px; align-items: flex-start; font-size: .86rem; opacity: .85; margin: 14px 0 0; line-height: 1.5; }
.firma-editorial .ico { flex: none; width: 16px; height: 16px; margin-top: 2px; }
.firma-editorial a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.fuentes-editorial { margin: 40px 0 10px; padding: 22px 24px; border-radius: 18px; background: color-mix(in srgb, var(--tarjeta, #fff) 70%, transparent); box-shadow: inset 0 0 0 1px rgba(127,127,127,.18); font-size: .92rem; }
.fuentes-editorial h2 { font-size: 1.15rem; margin: 0 0 8px; }
.fuentes-editorial ul { margin: 10px 0; padding-left: 20px; }
.fuentes-editorial li { margin-bottom: 4px; }
.fuentes-editorial__nota { opacity: .8; font-size: .86rem; margin-bottom: 0; }

/* test de heridas emocionales */
.th-rueda { display: grid; gap: 12px; align-content: center; }
.th-rueda span { display: flex; align-items: baseline; gap: 12px; padding: 14px 18px; border-radius: 16px; background: rgba(255,255,255,.06); box-shadow: inset 4px 0 0 var(--c); animation: thEntra .6s calc(var(--i) * .12s) both; }
.th-rueda b { color: #fff; font-size: 1.1rem; }
.th-rueda small { opacity: .75; }
@keyframes thEntra { from { opacity: 0; transform: translateX(16px); } to { opacity: 1; transform: none; } }
.th-res { --c: #6d4aff; }
.th-principal { padding: clamp(24px, 4vw, 44px); border-radius: 26px; background: linear-gradient(135deg, color-mix(in srgb, var(--c) 16%, var(--tarjeta, #fff)), var(--tarjeta, #fff)); box-shadow: var(--sombra), inset 0 0 0 1.5px color-mix(in srgb, var(--c) 35%, transparent); }
.th-pre { margin: 0; font-weight: 700; color: var(--c); }
.th-principal h2 { font-size: clamp(2rem, 4.6vw, 3.2rem); margin: 6px 0 4px; }
.th-frase { font-size: 1.2rem; font-weight: 700; margin: 0 0 14px; color: var(--c); }
.th-barras { display: grid; gap: 14px; margin: 30px 0; }
.th-barra span { display: flex; justify-content: space-between; margin-bottom: 6px; }
.th-barra i { font-style: normal; font-weight: 800; color: var(--c); }
.th-barra em { display: block; height: 12px; border-radius: 99px; background: rgba(127,127,127,.15); overflow: hidden; }
.th-barra s { display: block; height: 100%; border-radius: 99px; background: var(--c); text-decoration: none; transition: width .8s; }
.th-dos { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.th-dos > div { padding: 22px 24px; border-radius: 20px; background: var(--tarjeta, #fff); box-shadow: var(--sombra); }
.th-dos h3 { margin-top: 0; }
.th-nota { opacity: .85; margin: 22px 0 10px; }
.th-acc { margin-bottom: 10px; }
.th-form { --tipo: var(--c); }
.th-curso { margin-top: 30px; }
@media (max-width: 760px) { .th-dos { grid-template-columns: 1fr; } }

/* catálogo de cursos */
.cat-cursos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.cat-curso { display: flex; flex-direction: column; border-radius: 24px; overflow: hidden; background: var(--tarjeta, #fff); box-shadow: var(--sombra); text-decoration: none; color: inherit; transition: transform .2s, box-shadow .2s; }
.cat-curso:hover { transform: translateY(-4px); }
.cat-curso__img { display: block; aspect-ratio: 16/9; background: radial-gradient(120% 90% at 20% 10%, color-mix(in srgb, var(--c) 70%, #fff), var(--c) 55%, #14112a); background-size: cover; background-position: center; }
.cat-curso__cuerpo { display: grid; gap: 10px; padding: 22px 24px 26px; flex: 1; align-content: start; }
.cat-curso__precio { justify-self: start; font-weight: 800; color: var(--c); background: color-mix(in srgb, var(--c) 12%, transparent); padding: 4px 12px; border-radius: 99px; }
.cat-curso b { font-size: 1.35rem; line-height: 1.2; }
.cat-curso__chips { display: flex; gap: 6px; flex-wrap: wrap; }
.cat-curso__chips i { font-style: normal; font-size: .82rem; font-weight: 600; padding: 3px 10px; border-radius: 99px; background: rgba(127,127,127,.12); }
.cat-curso__ir { display: flex; align-items: center; gap: 6px; font-weight: 700; color: var(--c); margin-top: 4px; }
.cat-gratis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.cat-gratis a { display: grid; gap: 6px; padding: 20px; border-radius: 18px; background: var(--tarjeta, #fff); box-shadow: var(--sombra); text-decoration: none; color: inherit; }
.cat-gratis span { opacity: .8; font-size: .92rem; }
@media (max-width: 980px) { .cat-cursos { grid-template-columns: 1fr 1fr; } .cat-gratis { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .cat-cursos, .cat-gratis { grid-template-columns: 1fr; } }

/* test de apego: plano de los dos ejes */
.ta-mapa { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 6px; aspect-ratio: 1; max-width: 320px; margin: 0 auto; }
.ta-q { display: grid; place-items: center; border-radius: 14px; font-weight: 700; color: var(--c); background: color-mix(in srgb, var(--c) 12%, transparent); }
.ta-punto { position: absolute; width: 22px; height: 22px; margin: -11px 0 0 -11px; border-radius: 50%; background: var(--c, #6d4aff); box-shadow: 0 0 0 5px #fff, 0 6px 16px rgba(0,0,0,.35); transition: left .8s, top .8s; }
.ta-ejes { display: flex; justify-content: space-between; max-width: 320px; margin: 8px auto 0; font-size: .85rem; opacity: .75; }

/* test de emociones faciales */
.te-mosaico { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; align-content: center; }
.te-mosaico span { background: rgba(255,255,255,.06); border-radius: 18px; padding: 8px; }
.te-svg { width: 100%; display: block; }
.te-item { max-width: 560px; margin: 0 auto; text-align: center; }
.te-cara { width: min(260px, 70vw); margin: 0 auto 10px; background: rgba(255,255,255,.06); border-radius: 26px; padding: 14px; }
.te-preg { font: 600 1.2rem/1.3 var(--titulos); color: #fff; }
.te-ops { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 14px 0; }
.te-op.te-bien { background: #2f9e44 !important; border-color: #2f9e44 !important; color: #fff !important; }
.te-op.te-mal { background: #e03131 !important; border-color: #e03131 !important; color: #fff !important; }
.te-fb { min-height: 3em; color: #e4dff5; }
.te-repaso { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; margin: 26px 0; }
.te-rep { display: grid; grid-template-columns: 70px 1fr; gap: 12px; align-items: center; padding: 12px; border-radius: 16px; background: var(--tarjeta, #fff); box-shadow: var(--sombra); border-left: 4px solid #2f9e44; }
.te-rep.mal { border-left-color: #e03131; }
.te-rep p { margin: 4px 0 0; font-size: .88rem; opacity: .85; }
.te-mini { display: block; width: 70px; }