/* ═══ KOVENANT · Test de diagnóstico (/diagnostico/) ═══
   Solo estilos propios del quiz; tokens, tipografía, botones y campos vienen de main.css.
   Columna única y estrecha (pensado para móvil: llega desde stories y anuncios) */
.pagina-diagnostico{min-height:100svh;display:flex;flex-direction:column;
  background:radial-gradient(900px 520px at 50% -10%, rgba(26,84,102,.38), transparent 62%),var(--carbon)}
/* La cabecera de la web es fija y lleva un velo; aquí va en su sitio y sin velo */
.dg-cab{position:relative;display:flex;align-items:center;height:var(--header-h);padding-inline:var(--pad-x)}
.dg-cab::before{display:none}
/* Selector de idioma a la derecha de la cabecera del test (sin menú) */
.dg-cab .idiomas{margin-left:auto;margin-right:0}
.dg-cab .logo svg{width:34px;height:34px;color:var(--marfil)}
.dg{flex:1;width:min(100% - 40px, 680px);margin:0 auto;padding:clamp(24px,5vh,64px) 0 64px}
.dg-paso[hidden]{display:none}
.dg-paso.activo{animation:dg-entra .45s var(--ease-out)}
@keyframes dg-entra{from{opacity:0;transform:translateY(14px)}}

/* Portada */
.dg-portada h1{margin-top:18px;font-size:clamp(2.3rem, 1.4rem + 3.6vw, 3.6rem)}
.dg-entradilla{margin-top:22px;font-size:var(--fs-lead);line-height:1.6;color:var(--texto);max-width:46ch}
.dg-empezar{margin-top:34px;min-height:58px;padding-inline:34px}
.dg-confianza{margin-top:18px;font-size:var(--fs-small);color:var(--piedra)}
.dg-confianza a{color:var(--cobre)}

/* Pregunta */
.dg-progreso{display:flex;align-items:center;gap:14px;font-size:var(--fs-label);font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--piedra);margin-bottom:28px}
.dg-barra{flex:1;height:3px;border-radius:3px;background:var(--linea);overflow:hidden}
.dg-barra i{display:block;height:100%;width:0;background:var(--cobre);transition:width .4s var(--ease-out)}
.dg-pregunta h2{font-size:clamp(1.6rem, 1.2rem + 1.6vw, 2.2rem);line-height:1.2;outline:none}
.dg-ayuda{margin-top:10px;color:var(--piedra);font-size:var(--fs-small)}
.dg-opciones{display:flex;flex-direction:column;gap:10px;margin-top:26px}
.dg-opcion{display:flex;align-items:center;gap:14px;width:100%;min-height:56px;padding:14px 18px;text-align:left;
  font:inherit;font-size:16px;color:var(--marfil);background:rgba(245,242,236,.04);border:1px solid var(--linea-campo);
  border-radius:8px;cursor:pointer;transition:border-color .2s,background-color .2s}
.dg-opcion::before{content:"";flex:none;width:18px;height:18px;border:1.5px solid var(--linea-campo);border-radius:50%;
  transition:background-color .2s,border-color .2s,box-shadow .2s}
.dg-opcion[aria-pressed]::before{border-radius:4px}
.dg-opcion:hover{border-color:var(--cobre);background:rgba(176,120,74,.08)}
.dg-opcion[aria-checked="true"],.dg-opcion[aria-pressed="true"]{border-color:var(--cobre);background:rgba(176,120,74,.14)}
.dg-opcion[aria-checked="true"]::before,.dg-opcion[aria-pressed="true"]::before{background:var(--cobre);border-color:var(--cobre);
  box-shadow:inset 0 0 0 3px var(--carbon)}
.dg-nav{display:flex;justify-content:space-between;align-items:center;margin-top:28px;gap:16px}
.dg-atras{display:inline-flex;align-items:center;gap:6px;background:none;border:0;padding:10px 0;font:inherit;
  font-size:var(--fs-small);color:var(--piedra);cursor:pointer}
.dg-atras:hover{color:var(--marfil)}
.dg-atras .i{font-size:16px}
.dg-nav .boton .i,.dg-empezar .i,.dg-captura .boton .i,.dg-cierre .boton .i{font-size:16px}

/* Resultado */
.dg-puntos{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin-top:18px;padding:16px 20px;
  border:1px solid rgba(176,120,74,.45);border-radius:8px;background:rgba(176,120,74,.06)}
.dg-puntos > span{font-size:var(--fs-small);color:var(--texto)}
.dg-puntos b{font-family:var(--serif);font-weight:500;font-size:2.4rem;line-height:1;color:var(--marfil)}
.dg-puntos small{font-size:.5em;color:var(--cobre);margin-left:2px}
.dg-res-cab h2{margin-top:26px;font-size:clamp(1.8rem, 1.2rem + 2.2vw, 2.6rem);outline:none}
.dg-res-detalle{margin-top:16px;font-size:var(--fs-lead);line-height:1.6;color:var(--texto)}
.dg-res-detalle b{color:var(--marfil);font-weight:600}
.dg-res-nivel{margin-top:16px;font-family:var(--serif);font-style:italic;font-size:1.15rem;line-height:1.5;color:var(--marfil);
  border-left:2px solid var(--cobre);padding-left:14px}
.dg-claves{list-style:none;display:flex;flex-direction:column;gap:12px;margin-top:22px}
.dg-claves li{position:relative;padding-left:24px;font-size:15.5px;line-height:1.6;color:var(--texto)}
.dg-claves li::before{content:"";position:absolute;left:2px;top:.62em;width:8px;height:8px;border-radius:50%;background:var(--cobre)}
.dg-claves b{color:var(--marfil);font-weight:600}
.dg-nota{margin-top:18px;font-size:12.5px;color:var(--piedra)}

/* Captación y cierre */
.dg-captura{display:flex;flex-direction:column;gap:22px;margin-top:44px;padding:clamp(24px,4vw,40px);
  border:1px solid rgba(176,120,74,.45);border-radius:10px;background:rgba(16,18,22,.6)}
.dg-captura h2,.dg-cierre h2{font-size:clamp(1.6rem, 1.2rem + 1.6vw, 2.2rem)}
.dg-captura > p{font-size:16.5px;line-height:1.6;color:var(--texto)}
.dg-captura b{color:var(--marfil);font-weight:600}
.dg-gratis{display:flex;gap:12px;align-items:flex-start;padding:14px 16px;border-radius:8px;background:rgba(176,120,74,.12)}
.dg-gratis .i{font-size:22px;color:var(--cobre);flex:none;margin-top:1px}
.dg-captura .boton{align-self:stretch;min-height:58px}
.dg-sinspam{font-size:13px!important;color:var(--piedra)!important;text-align:center;margin-top:-8px}
/* Confirmación compacta (decisión de Imanol): el bloque alto empujaba el cierre ("reserva tu llamada") fuera de
   pantalla y casi nadie lo veía. Icono al lado del texto, poco relleno y hueco corto hasta el cierre, de modo que
   confirmación y cierre caben a la vez en un móvil */
.dg-captura.enviado{padding:18px 22px;gap:0;scroll-margin-top:20px}
.dg-captura .form-recibido{display:grid;grid-template-columns:auto 1fr;align-items:center;column-gap:16px;row-gap:2px;text-align:left}
.dg-captura .form-recibido > .i{grid-row:1 / span 2;font-size:36px;color:var(--cobre);animation:none}
.dg-captura .form-recibido h2{margin:0;font-size:1.3rem;line-height:1.2}
.dg-captura .form-recibido p{margin:0;font-size:15px;line-height:1.5;color:var(--texto);max-width:none;animation:none}
.dg-captura.enviado + .dg-cierre{margin-top:26px;padding-top:26px}
.dg-cierre{margin-top:48px;padding-top:40px;border-top:1px solid var(--linea)}
.dg-cierre > p{margin-top:14px;font-size:16.5px;line-height:1.6;color:var(--texto)}
.dg-cierre b{color:var(--marfil);font-weight:600}
.dg-cierre .boton{margin-top:24px}
.dg-otras,.dg-motus{font-size:var(--fs-small)!important;color:var(--piedra)!important}
.dg-otras a,.dg-motus a{color:var(--cobre);border-bottom:1px solid rgba(176,120,74,.4)}
.dg-motus{margin-top:18px!important;padding:12px 14px;border-radius:8px;background:rgba(17,64,78,.4)}
.dg-pie{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;padding:24px var(--pad-x);
  border-top:1px solid var(--linea);font-size:var(--fs-label);letter-spacing:.14em;text-transform:uppercase;color:var(--piedra)}
@media (max-width:520px){.dg-cierre .boton{width:100%}}
@media (prefers-reduced-motion:reduce){.dg-paso.activo{animation:none}.dg-barra i{transition:none}}