/* ============================================================================
   FinanzaX Decide — Sistema visual (Herramienta B)
   Mismo sistema que public/assets/css/style.css (FXD-Doc00 Sección 2), con
   una sola diferencia de marca: el acento es dorado en vez de verde, tomado
   del logo oficial de FinanzaX (FXD-Doc00-Herramienta-B.md, decisión de
   color). El resto de la mecánica visual (escala, radios, tarjetas, quiz,
   comparador, banner de cookies) es intencionalmente idéntico, para que
   ambas herramientas se sientan de la misma familia.
   Contraste verificado con tools/contrast-check-investing-apps.js (todo AA
   o superior). El naranja de aviso es una familia de color distinta del
   dorado a propósito: si el acento de marca y el color de advertencia
   fueran ambos amarillentos, una advertencia podría leerse como un detalle
   de marca en vez de una alerta.
   ========================================================================== */

:root {
  /* Paleta de marca (idéntica a la Herramienta A salvo el acento) */
  --negro: #0C0C0F;
  --superficie: #141419;
  --superficie-alta: #1B1B22;
  --blanco: #F2EDE4;
  --tenue: #A8A29A;
  --borde: #35353F;

  /* Dorado: el de relleno de botón es un dorado oscuro (5,06:1 con texto
     blanco encima, válido como fondo de botón). Para texto/enlaces/iconos
     sobre negro o superficie se usa --dorado-texto, un dorado más claro
     (10,35:1 sobre negro, 9,73:1 sobre superficie). */
  --dorado: #8A6A14;
  --dorado-hover: #6E5410;
  --dorado-texto: #D9A93B;
  --dorado-tenue: rgba(138, 106, 20, 0.16);

  --naranja-aviso: #E0793D;

  --fuente: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
    'Helvetica Neue', Arial, sans-serif;

  --texto-xs: 0.78rem;
  --texto-sm: 0.85rem;
  --texto-base: 0.92rem;

  --radio: 10px;
  --radio-s: 6px;
  --ancho: 1080px;
  --ancho-texto: 720px;
  --transicion: 160ms ease;
}

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* Transiciones de pagina completa (View Transitions API, cross-document):
   simple opt-in por CSS, sin JS -- en un navegador sin soporte esta regla se
   ignora y la navegacion sigue exactamente como hoy, sin nada roto ni a
   medias. El arbol de pseudo-elementos ::view-transition-* que esto crea NO
   es parte del DOM normal, asi que el bloque de arriba no lo cubre -- se
   apaga aparte. */
@view-transition {
  navigation: auto;
}
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) {
    animation: none !important;
  }
}

body {
  margin: 0;
  background: var(--negro);
  color: var(--blanco);
  font-family: var(--fuente);
  font-size: 1rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3, h4 {
  line-height: 1.15;
  letter-spacing: -0.02em;
  font-weight: 700;
  margin: 0 0 0.6em;
  text-wrap: balance;
}
h1 { font-size: clamp(1.9rem, 6vw, 3.4rem); letter-spacing: -0.03em; }
h2 { font-size: clamp(1.5rem, 4.4vw, 2.3rem); }
h3 { font-size: clamp(1.15rem, 3vw, 1.45rem); }
h4 { font-size: 1.02rem; }

p { margin: 0 0 1em; }
p, li { text-wrap: pretty; }

a { color: var(--dorado-texto); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--blanco); }

strong { color: var(--blanco); font-weight: 650; }

:focus-visible {
  outline: 3px solid var(--dorado-texto);
  outline-offset: 3px;
  border-radius: var(--radio-s);
}

/* --- Utilidades ---------------------------------------------------------- */
.contenedor { width: 100%; max-width: var(--ancho); margin: 0 auto; padding: 0 1.15rem; }
.medida     { max-width: var(--ancho-texto); }
.centrado   { text-align: center; }
.tenue      { color: var(--tenue); }
.dorado     { color: var(--dorado-texto); }
.mono-num   { font-variant-numeric: tabular-nums; }

.saltar-al-contenido {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--dorado); color: #FFF; padding: 0.75rem 1.15rem;
  border-radius: 0 0 var(--radio) 0; font-weight: 600;
}
.saltar-al-contenido:focus { left: 0; }

.oculto { display: none !important; }
.solo-lectores {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

section { padding: 3.25rem 0; }
@media (min-width: 720px) { section { padding: 4.75rem 0; } }

.seccion-alterna { background: var(--superficie); border-block: 1px solid var(--borde); }

.etiqueta-seccion {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-size: var(--texto-xs); font-weight: 650; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--dorado-texto);
  margin-bottom: 0.85rem;
}
.etiqueta-seccion::before {
  content: ''; width: 22px; height: 2px; background: var(--dorado); display: block;
}

/* --- Cabecera ------------------------------------------------------------ */
.cabecera {
  position: sticky; top: 0; z-index: 50;
  background: rgba(12, 12, 15, 0.94);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--borde);
}
.cabecera-fila {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; min-height: 60px;
}
.logo {
  display: inline-flex; align-items: center; gap: 0.55rem;
  color: var(--blanco); text-decoration: none; font-weight: 700;
  letter-spacing: -0.02em; font-size: 1.02rem;
}
.logo:hover { color: var(--blanco); }
.logo-marca { color: var(--dorado-texto); font-weight: 500; }
/* Solo el logo del HEADER participa de la transicion -- el pie tambien usa
   class="logo" (mismo enlace repetido abajo de cada pagina), y dos
   elementos no pueden compartir un view-transition-name en el mismo
   documento a la vez. Nombre COMPARTIDO con Herramienta A a proposito
   (confirmado por el usuario 17 sep 2026): assets/images/logo.png es el
   mismo archivo, byte a byte (mismo MD5), en ambas herramientas -- no hay
   nada que "morphear" entre ellas, asi que el logo simplemente se queda
   fijo en su lugar al navegar de B a A, la confirmacion visual mas limpia
   de "misma marca, misma imagen". Si algun dia el logo de una herramienta
   cambia y deja de ser el mismo archivo que el de la otra, volver a
   nombres locales por herramienta aqui y en el stylesheet de la otra. */
.cabecera .logo { view-transition-name: fxd-logo; }

/* Envuelve nav + el boton del indice expandido como UN solo hijo flex de
   .cabecera-fila (que sigue esperando exactamente 2 hijos: logo y esto) --
   evita que un 3er hijo directo se desparrame con huecos desiguales en
   pantallas anchas bajo justify-content:space-between. flex-wrap:nowrap y
   flex-shrink:0 explicitos en ambos hijos (en vez de confiar en el default
   del navegador) para que nav y boton nunca puedan terminar ocupando el
   mismo espacio visual entre si bajo ningun ancho de pantalla. Sin gap
   propio: el espacio entre el grupo de nav y el boton es explicito via
   margin-left en .boton-indice (ver ahi), no un gap compartido, para que
   el boton de utilidad se lea a simple vista como una funcion aparte y
   nunca como un quinto link de nav mas. */
.cabecera-derecha { display: flex; align-items: center; flex-wrap: nowrap; }

.boton-indice {
  display: inline-flex; align-items: center; justify-content: center;
  position: relative;
  width: 34px; height: 34px; flex: none;
  margin-left: 1.75rem;
  border-radius: var(--radio-s); border: 1px solid var(--borde);
  background: transparent; color: var(--tenue); cursor: pointer; padding: 0;
  font-family: inherit;
  transition: color var(--transicion), border-color var(--transicion);
}
/* Linea divisoria sutil centrada en el margin-left de arriba (1.75rem) --
   si ese valor cambia, ajustar "left" aqui a la mitad. Separa el boton de
   utilidad del grupo de nav con una senal visual clara, mismo patron que
   usan los headers de sitios profesionales para distinguir "paginas" de
   "acciones". */
.boton-indice::before {
  content: '';
  position: absolute;
  left: -0.875rem;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 22px;
  background: var(--borde);
}
.boton-indice:hover, .boton-indice:focus-visible { color: var(--blanco); border-color: var(--tenue); }

.nav-principal { display: flex; gap: 0.9rem; align-items: center; flex-shrink: 0; }
.nav-principal a {
  color: var(--tenue); text-decoration: none; font-size: 0.86rem; font-weight: 500;
  white-space: nowrap;
}
.nav-principal a:hover, .nav-principal a:focus-visible { color: var(--blanco); }
@media (min-width: 720px) {
  .nav-principal { gap: 1.25rem; }
  .nav-principal a { font-size: 0.9rem; }
}
/* Refuerzo de anticipacion solo para dispositivos con hover real (nunca
   tactil): un subrayado que crece desde la izquierda. El cambio de color de
   arriba ya funciona igual para todos -- esto es puramente un extra visual,
   nunca reemplaza al clic. */
@media (hover: hover) and (pointer: fine) {
  .nav-principal a { position: relative; }
  .nav-principal a::after {
    content: '';
    position: absolute;
    left: 0; right: 0; bottom: -3px;
    height: 1px;
    background: currentColor;
    transform: scaleX(0);
    transform-origin: right;
    transition: transform var(--transicion);
  }
  .nav-principal a:hover::after, .nav-principal a:focus-visible::after {
    transform: scaleX(1);
    transform-origin: left;
  }
}
@media (max-width: 719px) { .nav-secundaria-movil { display: none; } }
@media (max-width: 559px) { .nav-terciaria-movil { display: none; } }

/* --- Botones ------------------------------------------------------------- */
.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.55rem;
  min-height: 52px; padding: 0.85rem 1.5rem;
  border-radius: var(--radio); border: 1px solid transparent;
  font: inherit; font-weight: 650; font-size: 1rem; line-height: 1.2;
  text-decoration: none; cursor: pointer; text-align: center;
  transition: background var(--transicion), border-color var(--transicion),
              transform var(--transicion), color var(--transicion);
}
.boton:active { transform: translateY(1px); }

.boton-principal { background: var(--dorado); color: #FFFFFF; }
.boton-principal:hover { background: var(--dorado-hover); color: #FFFFFF; }

.boton-secundario {
  background: transparent; color: var(--blanco); border-color: var(--borde);
}
.boton-secundario:hover { border-color: var(--dorado-texto); color: var(--blanco); }

.boton-fantasma {
  background: transparent; color: var(--tenue); border-color: transparent;
  min-height: 44px; padding: 0.5rem 0.9rem; font-size: var(--texto-base);
}
.boton-fantasma:hover { color: var(--blanco); }

.boton-ancho { width: 100%; }
@media (min-width: 560px) { .boton-ancho-auto { width: auto; } }

.boton[disabled], .boton[aria-disabled='true'] { opacity: 0.45; cursor: not-allowed; }

.grupo-botones { display: flex; flex-direction: column; gap: 0.75rem; }
@media (min-width: 560px) {
  .grupo-botones { flex-direction: row; flex-wrap: wrap; }
}

/* --- Portada ------------------------------------------------------------- */
.portada { padding: 2.75rem 0 3rem; position: relative; overflow: hidden; }
@media (min-width: 720px) { .portada { padding: 4.5rem 0 4rem; } }

/* Fundido en los bordes (no color solido edge-to-edge): la version
   solida cruzaba las 1280px+ del viewport completo, mientras que todo
   el contenido real de la pagina vive dentro de .contenedor (max-width
   + padding), asi que la linea se veia como un elemento sin relacion
   con el resto del diseno, en vez de un divisor de seccion. Mismo
   arreglo que ya usa el equivalente de la Herramienta A
   (linear-gradient con transparent en ambos extremos), solo que en
   dorado en vez de verde. */
.portada::after {
  content: ''; position: absolute; inset: auto 0 0 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--dorado), transparent);
  opacity: 0.55;
}
.portada h1 { margin-bottom: 0.7rem; }
.portada-entrada { font-size: 1.08rem; color: var(--tenue); max-width: 56ch; }
@media (min-width: 720px) { .portada-entrada { font-size: 1.18rem; } }

.marcador-fecha {
  display: inline-flex; align-items: center; gap: 0.5rem; flex-wrap: wrap;
  font-size: var(--texto-sm); color: var(--tenue);
  border: 1px solid var(--borde); border-radius: 999px;
  padding: 0.35rem 0.85rem; margin-bottom: 1.35rem;
}
.punto-vivo {
  width: 7px; height: 7px; border-radius: 50%; background: var(--dorado);
  flex: none;
}

.tira-datos {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px;
  background: var(--borde); border: 1px solid var(--borde);
  border-radius: var(--radio); overflow: hidden; margin-top: 2.25rem;
}
@media (min-width: 720px) { .tira-datos { grid-template-columns: repeat(4, 1fr); } }
.dato { background: var(--negro); padding: 1.1rem 1rem; }
.dato-cifra {
  font-size: 1.5rem; font-weight: 700; color: var(--dorado-texto);
  letter-spacing: -0.02em; display: block; font-variant-numeric: tabular-nums;
}
.dato-texto { font-size: var(--texto-sm); color: var(--tenue); line-height: 1.45; }

/* --- Tarjetas ------------------------------------------------------------ */
.tarjeta {
  background: var(--superficie); border: 1px solid var(--borde);
  border-radius: var(--radio); padding: 1.35rem;
}
.rejilla { display: grid; gap: 1rem; }
@media (min-width: 700px) { .rejilla-2 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 700px) { .rejilla-3 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 980px) { .rejilla-3 { grid-template-columns: repeat(3, 1fr); } }

/* --- Divulgación de afiliados (FXD-Doc00 Sección 4) -----------------------
   Todas las cajas informativas de esta sección (divulgacion, aviso,
   descargo, historial) siguen la misma regla, corregida tras una revisión
   externa (29 ago 2026): fondo negro puro (--negro, igual que el fondo de
   la página, cero relleno de color propio), diferenciadas únicamente con
   un borde plano de 1px, nunca con un tinte de fondo ni un degradado. El
   único lugar del sitio con tratamiento de profundidad/brillo es
   .cifra-metalica (el número ganador de la calculadora) -- en ningún otro
   elemento, ni siquiera estas cajas de aviso/divulgación. */
.divulgacion {
  display: flex; gap: 0.7rem; align-items: flex-start;
  background: var(--negro);
  border: 1px solid var(--dorado);
  border-radius: var(--radio);
  padding: 0.9rem 1rem;
  font-size: var(--texto-base); line-height: 1.5; color: var(--blanco);
}
.divulgacion svg { flex: none; margin-top: 2px; }

/* Variante junto a un boton de CTA: subordinada al boton a proposito (el
   ojo debe ir al boton primero), asi que pierde la caja de color y baja a
   texto gris discreto, no otro elemento con el mismo peso visual. Sigue
   cumpliendo la divulgacion legal, solo que como nota secundaria. */
.divulgacion-compacta {
  display: flex; gap: 0.45rem; align-items: flex-start;
  background: none; border: none; padding: 0; margin-top: 0.6rem;
  font-size: var(--texto-xs); line-height: 1.45; color: var(--tenue);
}
.divulgacion-compacta svg { width: 13px; height: 13px; margin-top: 1px; }
.divulgacion-compacta svg path,
.divulgacion-compacta svg circle { stroke: var(--tenue); fill: var(--tenue); }

.aviso {
  display: flex; gap: 0.7rem; align-items: flex-start;
  border: 1px dashed var(--borde); border-radius: var(--radio);
  padding: 0.85rem 1rem; font-size: var(--texto-base); color: var(--tenue);
  background: var(--negro);
}
.aviso-pendiente { border-color: var(--naranja-aviso); }
.aviso-pendiente strong { color: var(--naranja-aviso); }

/* Descargo de responsabilidad, más prominente que la divulgación de
   afiliados (Herramienta B toca tolerancia al riesgo y objetivos
   financieros — ver FXD-Doc00-Herramienta-B.md, Agente 11). Visualmente
   distinto de .divulgacion (borde dorado) y de .aviso-pendiente (borde
   naranja): borde gris neutro, para que no compita por atención con la
   marca ni se confunda con una alerta operativa. */
.descargo {
  display: flex; gap: 0.7rem; align-items: flex-start;
  background: var(--negro);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  padding: 0.95rem 1.05rem;
  font-size: var(--texto-base); line-height: 1.55; color: var(--tenue);
}
.descargo svg { flex: none; margin-top: 2px; }
.descargo strong { color: var(--blanco); }
/* Variante junto al boton principal del hero ("Take the 6-question
   quiz"): mismo criterio de jerarquia que .divulgacion-compacta en la
   Herramienta A (el ojo debe ir al boton primero), pero MENOS agresiva
   que esa -- aqui se mantiene el recuadro (borde + fondo), solo mas
   chico, porque este descargo especifico tiene un requisito de
   cumplimiento documentado (Agente 11, comentario en disclaimers.js)
   de ser MAS prominente que el de la Herramienta A, no menos: la
   Herramienta B toca tolerancia al riesgo y objetivos financieros.
   Reducir tamano y padding resuelve la competencia visual con el boton
   sin volverlo casi invisible como el caso de la Herramienta A. */
.descargo-compacto {
  font-size: var(--texto-sm);
  padding: 0.7rem 0.85rem;
  gap: 0.55rem;
}

/* Historial de verificación (#lista-historial): mismo tratamiento de caja
   plana que el resto de esta sección, corrigiendo el mismo hallazgo. */
.historial-caja {
  background: var(--negro); border: 1px solid var(--dorado);
  border-radius: var(--radio); padding: 0.3rem 1.15rem;
}

/* --- Quiz ---------------------------------------------------------------- */
.quiz { max-width: 760px; margin: 0 auto; }

.barra-progreso-envoltura { margin-bottom: 1.75rem; }
.barra-progreso-etiquetas {
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: var(--texto-sm); color: var(--tenue); margin-bottom: 0.5rem;
}
.barra-progreso {
  height: 6px; background: var(--superficie-alta); border-radius: 999px;
  overflow: hidden; border: 1px solid var(--borde);
}
.barra-progreso-relleno {
  height: 100%; width: 0%; background: var(--dorado);
  border-radius: 999px; transition: width 280ms ease;
}

.pregunta h2 { font-size: clamp(1.35rem, 4.5vw, 1.95rem); margin-bottom: 1.4rem; }

.opciones { display: grid; gap: 0.75rem; margin: 0 0 1.5rem; padding: 0; border: 0; }
.opciones legend { padding: 0; }

.opcion {
  display: flex; align-items: flex-start; gap: 0.85rem;
  width: 100%; text-align: left;
  background: var(--superficie); color: var(--blanco);
  border: 1px solid var(--borde); border-radius: var(--radio);
  padding: 1.05rem 1.1rem; font: inherit; cursor: pointer;
  min-height: 60px;
  transition: border-color var(--transicion), background var(--transicion);
}
.opcion:hover { border-color: var(--dorado-texto); background: var(--superficie-alta); }
.opcion[aria-pressed='true'] {
  border-color: var(--dorado); background: var(--dorado-tenue);
}
.opcion-letra {
  flex: none; width: 28px; height: 28px; border-radius: 50%;
  border: 1px solid var(--borde); display: grid; place-items: center;
  font-size: var(--texto-sm); font-weight: 700; color: var(--tenue); margin-top: 1px;
}
.opcion[aria-pressed='true'] .opcion-letra {
  background: var(--dorado); border-color: var(--dorado); color: #FFFFFF;
}
.opcion-texto { flex: 1; }
.opcion-nota { display: block; font-size: var(--texto-sm); color: var(--tenue); margin-top: 0.2rem; }

.quiz-pie { display: flex; justify-content: space-between; align-items: center; gap: 1rem; }

/* --- Resultado ----------------------------------------------------------- */
.resultado-principal {
  border: 1px solid var(--dorado); border-radius: var(--radio);
  background: var(--negro);
  padding: 1.5rem 1.25rem;
  text-align: center;
}
@media (min-width: 720px) { .resultado-principal { padding: 2.5rem 2rem; } }

.resultado-etiqueta {
  font-size: var(--texto-xs); letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--dorado-texto); font-weight: 650;
}
.resultado-nombre {
  font-size: clamp(2.1rem, 8vw, 3.6rem); margin: 0.25rem 0 0.35rem;
  letter-spacing: -0.035em;
}
.resultado-lema { color: var(--tenue); max-width: 46ch; margin: 0 auto 1.4rem; }

.resultado-plan {
  display: inline-flex; flex-direction: column; align-items: center;
  border: 1px solid var(--borde); border-radius: var(--radio);
  padding: 0.85rem 1.5rem; margin-bottom: 1.4rem; background: var(--negro);
}
.resultado-plan-precio {
  font-size: 1.75rem; font-weight: 700; letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.resultado-plan-nota { font-size: var(--texto-sm); color: var(--tenue); }

.honestidad { display: grid; gap: 1rem; text-align: left; margin-top: 1.75rem; }
@media (min-width: 760px) { .honestidad { grid-template-columns: 1fr 1fr; } }

.bloque-honestidad {
  background: var(--negro); border: 1px solid var(--borde);
  border-radius: var(--radio); padding: 1.1rem 1.15rem;
}
.bloque-honestidad h3 {
  font-size: var(--texto-xs); letter-spacing: 0.1em; text-transform: uppercase;
  margin-bottom: 0.75rem; display: flex; align-items: center; gap: 0.5rem;
}
.bloque-honestidad.a-favor h3 { color: var(--dorado-texto); }
.bloque-honestidad.en-contra h3 { color: var(--naranja-aviso); }
.bloque-honestidad ul { margin: 0; padding-left: 1.15rem; }
.bloque-honestidad li { margin-bottom: 0.6rem; font-size: var(--texto-base); }
.bloque-honestidad li:last-child { margin-bottom: 0; }

.linea-transparencia {
  font-size: var(--texto-sm); color: var(--tenue); border-top: 1px solid var(--borde);
  padding-top: 1rem; margin-top: 1.5rem; text-align: left;
}

.segundo-lugar {
  border: 1px solid var(--borde); border-radius: var(--radio);
  padding: 1.15rem 1.25rem; background: var(--superficie); margin-top: 1.25rem;
}
.segundo-lugar-cabecera {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap; margin-bottom: 0.5rem;
}
.segundo-lugar h3 { margin: 0; }

/* Enlaces en línea que reemplazaron a botones completos en la pantalla de
   resultado (hallazgo del Agente 6: 5 CTAs compitiendo, 29 ago 2026). El
   área de toque real se agranda con padding + margen negativo igual (no
   cambia el flujo del texto visualmente), porque un enlace de una sola
   palabra dentro de un párrafo es un objetivo de clic pequeño e impreciso
   en comparación con el boton que reemplazó -- una revisión externa
   encontró que el clic no siempre registraba. */
.enlace-toque {
  padding: 0.35em 0.2em; margin: -0.35em -0.2em; border-radius: var(--radio-s);
}

.puntuaciones { display: grid; gap: 0.5rem; margin-top: 1.25rem; }
.puntuacion-fila {
  display: grid; grid-template-columns: minmax(88px, auto) 1fr auto;
  align-items: center; gap: 0.75rem; font-size: var(--texto-base);
}
.puntuacion-carril {
  height: 8px; background: var(--superficie-alta); border-radius: 999px;
  border: 1px solid var(--borde); overflow: hidden;
}
.puntuacion-relleno { height: 100%; background: var(--dorado); border-radius: 999px; }
.puntuacion-fila.es-ganadora .puntuacion-relleno { background: var(--dorado-texto); }

/* --- Radar --------------------------------------------------------------- */
.radar-envoltura { display: grid; gap: 1.25rem; }
@media (min-width: 860px) { .radar-envoltura { grid-template-columns: minmax(0, 1fr) 260px; align-items: center; } }
.radar-svg { width: 100%; height: auto; max-width: 460px; margin: 0 auto; display: block; }
.radar-eje-linea { stroke: var(--borde); stroke-width: 1; }
.radar-anillo { fill: none; stroke: var(--borde); stroke-width: 1; }
.radar-etiqueta { fill: var(--tenue); font-size: 11px; font-weight: 500; }
.radar-poligono { stroke-width: 2; }
.radar-punto { r: 3; }

.leyenda-radar { display: grid; gap: 0.6rem; }
.leyenda-item { display: flex; align-items: center; gap: 0.6rem; font-size: var(--texto-base); }
.leyenda-muestra {
  width: 14px; height: 14px; border-radius: 3px; flex: none;
  border: 2px solid currentColor;
}
.leyenda-patron { width: 14px; height: 14px; flex: none; }

.nota-metodologia { font-size: var(--texto-sm); color: var(--tenue); margin-top: 1rem; }

/* --- Comparador lado a lado ---------------------------------------------- */
.selector-plataformas {
  display: flex; flex-wrap: wrap; gap: 0.6rem; margin-bottom: 1.5rem;
}
.chip {
  display: inline-flex; align-items: center; gap: 0.5rem;
  min-height: 46px; padding: 0.55rem 1rem;
  background: var(--superficie); color: var(--blanco);
  border: 1px solid var(--borde); border-radius: 999px;
  font: inherit; font-size: var(--texto-base); font-weight: 550; cursor: pointer;
  transition: border-color var(--transicion), background var(--transicion);
}
.chip:hover { border-color: var(--dorado-texto); }
.chip[aria-pressed='true'] { border-color: var(--dorado); background: var(--dorado-tenue); }
.chip-marca { width: 10px; height: 10px; border-radius: 2px; flex: none; }

.tabla-envoltura {
  overflow-x: auto; border: 1px solid var(--borde); border-radius: var(--radio);
  -webkit-overflow-scrolling: touch;
}
table { border-collapse: collapse; width: 100%; min-width: 560px; font-size: var(--texto-base); }
caption { text-align: left; padding: 0.9rem 1rem; color: var(--tenue); font-size: var(--texto-sm); }
th, td { padding: 0.8rem 1rem; text-align: left; border-bottom: 1px solid var(--borde); vertical-align: top; }
thead th {
  background: var(--superficie-alta); font-size: var(--texto-xs); letter-spacing: 0.05em;
  text-transform: uppercase; color: var(--tenue); font-weight: 650;
  position: sticky; top: 0;
}
tbody th { font-weight: 600; color: var(--tenue); font-size: var(--texto-sm); }
tbody tr:last-child th, tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover td, tbody tr:hover th { background: rgba(255, 255, 255, 0.02); }
.celda-si { color: var(--dorado-texto); font-weight: 600; }
.celda-no { color: var(--tenue); }

/* --- Calculadora ----------------------------------------------------------
   Nota de encuadre (Sección Regulatoria) reutiliza .descargo, no una clase
   nueva -- mismo tono neutro/informativo que el resto de encuadres legales.
   -------------------------------------------------------------------------- */
.calc-rejilla { display: grid; gap: 1.5rem; }
@media (min-width: 900px) { .calc-rejilla { grid-template-columns: 320px minmax(0, 1fr); align-items: start; } }

.campo { margin-bottom: 1.15rem; }
.campo label { display: block; font-size: var(--texto-base); font-weight: 600; margin-bottom: 0.4rem; }
.campo-ayuda { display: block; font-size: var(--texto-sm); color: var(--tenue); font-weight: 400; margin-top: 0.15rem; }

input[type='number'], input[type='email'], input[type='text'], select, textarea {
  width: 100%; min-height: 50px; padding: 0.7rem 0.85rem;
  background: var(--negro); color: var(--blanco);
  border: 1px solid var(--borde); border-radius: var(--radio-s);
  font: inherit; font-size: 1rem;
}
input:focus, select:focus, textarea:focus { border-color: var(--dorado-texto); }
textarea { resize: vertical; min-height: 70px; }
input::placeholder { color: #6E6E78; }

.conmutador { display: inline-flex; border: 1px solid var(--borde); border-radius: 999px; padding: 3px; gap: 3px; }
.conmutador button {
  border: 0; background: transparent; color: var(--tenue);
  font: inherit; font-size: var(--texto-base); font-weight: 600;
  padding: 0.45rem 0.9rem; border-radius: 999px; cursor: pointer; min-height: 40px;
}
.conmutador button[aria-pressed='true'] { background: var(--dorado); color: #FFFFFF; }

.calc-resultados { display: grid; gap: 0.75rem; }
.calc-fila {
  display: grid; gap: 0.5rem;
  border: 1px solid var(--borde); border-radius: var(--radio);
  padding: 1rem 1.1rem; background: var(--superficie);
}
.calc-fila.es-ganadora { border-color: var(--dorado); background: var(--dorado-tenue); }
.calc-fila-cabecera {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 0.75rem; flex-wrap: wrap;
}
.calc-nombre { font-weight: 700; font-size: 1.05rem; }
.calc-plan { font-size: var(--texto-sm); color: var(--tenue); font-weight: 500; }
.calc-total { font-size: 1.3rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.calc-barra { height: 8px; background: var(--superficie-alta); border-radius: 999px; overflow: hidden; border: 1px solid var(--borde); }
.calc-barra-relleno { height: 100%; background: var(--dorado); }
.calc-fila.es-ganadora .calc-barra-relleno { background: var(--dorado-texto); }
.calc-desglose { font-size: var(--texto-sm); color: var(--tenue); }
.calc-ahorro {
  font-size: var(--texto-sm); color: var(--dorado-texto); font-weight: 600;
}
.calc-alerta { font-size: var(--texto-sm); color: var(--naranja-aviso); }

/* --- La única excepción de profundidad/brillo de todo el sitio -----------
   FXD-Doc00-Herramienta-B.md, decisión confirmada: el número final de la
   calculadora de crecimiento compuesto lleva un tratamiento de profundidad
   dorada/metálica, conectando con el acabado real del logo. En ningún otro
   lugar del sitio se usa este efecto. Construido enteramente en CSS
   (gradiente + sombra), sin imágenes ni raster, para no romper la regla de
   "todo vectorial propio" de FXD-Doc00 Sección 2.
   -------------------------------------------------------------------------- */
.cifra-metalica {
  display: inline-block;
  font-weight: 800;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  background: linear-gradient(115deg,
    #7A5A18 0%, #E8C766 22%, #FFF4D6 32%, #C79A32 46%,
    #8A6A14 58%, #F0D27E 72%, #B8901F 86%, #7A5A18 100%);
  background-size: 240% 100%;
  background-position: 20% 50%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 1px 0 rgba(0, 0, 0, 0.5)) drop-shadow(0 2px 10px rgba(138, 106, 20, 0.35));
}
/* Sin animación por defecto (respeta "sin elementos llamativos") -- un
   brillo muy sutil solo si la persona no pidió movimiento reducido. */
@media (prefers-reduced-motion: no-preference) {
  .cifra-metalica { transition: background-position 1.4s ease; }
  .cifra-metalica.fxd-listo { background-position: 80% 50%; }
}

/* --- Captura de email ---------------------------------------------------- */
.captura {
  border: 1px solid var(--dorado); border-radius: var(--radio);
  background: var(--superficie); padding: 1.35rem 1.25rem; margin-top: 1.5rem;
}
@media (min-width: 720px) { .captura { padding: 1.85rem; } }
.captura h3 { margin-bottom: 0.5rem; }
.captura-campos {
  display: flex; flex-direction: column; gap: 0.75rem; margin-top: 1.1rem;
}
@media (min-width: 560px) {
  .captura-campos { flex-direction: row; align-items: stretch; }
  .captura-campos input { flex: 1; }
}
.captura-legal { font-size: var(--texto-sm); color: var(--tenue); margin-top: 0.85rem; margin-bottom: 0; }

/* --- Reseñas reales (FXD-Doc00 Sección 5, excepción de servidor con
   estado -- Herramienta B, misma base de datos, tablas separadas) -------- */
.resena {
  border: 1px solid var(--borde); border-radius: var(--radio);
  background: var(--superficie); padding: 1.35rem 1.25rem; margin-top: 1.25rem;
}
.resena h3 { margin-bottom: 0.3rem; }
.resena-estrellas {
  display: flex; gap: 0.4rem; margin: 1.1rem 0 1rem; border: 0; padding: 0;
}
.resena-estrella {
  border: 0; background: transparent; padding: 0.2rem; cursor: pointer;
  color: var(--tenue); line-height: 0; border-radius: var(--radio-s);
  transition: color var(--transicion), transform 120ms ease;
}
.resena-estrella:hover, .resena-estrella:focus-visible { color: var(--dorado-texto); transform: scale(1.08); }
.resena-estrella[aria-pressed='true'] { color: var(--dorado-texto); }
.resena textarea { margin-bottom: 0.9rem; }
/* Campo señuelo (honeypot): invisible para una persona, pero un bot que
   rellena "todos" los campos de un formulario sí lo completa. Nunca
   display:none -- algunos lectores de pantalla lo ignoran igual, pero esto
   es ademas mas dificil de detectar por un bot simple que solo busca
   estilos obvios de ocultamiento. */
.resena-trampa {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}
.resena-estado { margin-top: 0.9rem; margin-bottom: 0; font-size: var(--texto-sm); }
.resena-estado.exito { color: var(--dorado-texto); }

/* --- Acordeón de preguntas frecuentes ------------------------------------ */
.faq { display: grid; gap: 0.6rem; }
details {
  border: 1px solid var(--borde); border-radius: var(--radio);
  background: var(--superficie); overflow: hidden;
}
details[open] { border-color: var(--dorado); }
summary {
  cursor: pointer; padding: 1rem 1.15rem; font-weight: 600; list-style: none;
  display: flex; justify-content: space-between; gap: 1rem; align-items: center;
  min-height: 56px;
}
summary::-webkit-details-marker { display: none; }
summary::after {
  content: '+'; color: var(--dorado-texto); font-size: 1.4rem; font-weight: 400;
  line-height: 1; flex: none;
}
details[open] summary::after { content: '\2212'; }
.faq-cuerpo { padding: 0 1.15rem 1.15rem; color: var(--tenue); }
.faq-cuerpo p:last-child { margin-bottom: 0; }

/* --- Historial de verificación ------------------------------------------- */
.historial { list-style: none; margin: 0; padding: 0; }
.historial li {
  display: grid; gap: 0.15rem; padding: 0.9rem 0 0.9rem 1.15rem;
  border-left: 2px solid var(--borde); position: relative;
}
.historial li::before {
  content: ''; position: absolute; left: -5px; top: 1.35rem;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--dorado); border: 2px solid var(--negro);
}
.historial-fecha {
  font-size: var(--texto-xs); letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--dorado-texto); font-weight: 650;
}
.historial-texto { font-size: var(--texto-base); color: var(--tenue); }

/* --- Pie ----------------------------------------------------------------- */
.pie { border-top: 1px solid var(--borde); padding: 2.75rem 0 2rem; background: var(--superficie); }
.pie-rejilla { display: grid; gap: 1.75rem; }
@media (min-width: 720px) { .pie-rejilla { grid-template-columns: 1.6fr 1fr 1fr; } }
.pie h4 {
  font-size: var(--texto-xs); letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--tenue); margin-bottom: 0.85rem;
}
.pie ul { list-style: none; margin: 0; padding: 0; }
.pie li { margin-bottom: 0.55rem; }
.pie a { color: var(--blanco); text-decoration: none; font-size: var(--texto-base); }
.pie a:hover { color: var(--dorado-texto); text-decoration: underline; }
.pie-legal {
  border-top: 1px solid var(--borde); margin-top: 2rem; padding-top: 1.5rem;
  font-size: var(--texto-sm); color: var(--tenue);
}
.pie-legal p { margin-bottom: 0.6rem; }
.pie-legal p:last-child { margin-bottom: 0; }

/* --- Banner de cookies --------------------------------------------------- */
.cookies {
  position: fixed; inset: auto 0 0 0; z-index: 100;
  background: var(--superficie-alta); border-top: 1px solid var(--dorado);
  padding: 1.15rem 0; box-shadow: 0 -12px 40px rgba(0, 0, 0, 0.55);
}
.cookies-fila { display: grid; gap: 1rem; }
@media (min-width: 860px) { .cookies-fila { grid-template-columns: 1fr auto; align-items: center; } }
.cookies p { margin: 0; font-size: var(--texto-base); }
.cookies-botones { display: flex; flex-direction: column; gap: 0.6rem; }
@media (min-width: 520px) { .cookies-botones { flex-direction: row; } }
.cookies-botones .boton { min-height: 48px; padding: 0.7rem 1.25rem; font-size: var(--texto-base); }

/* --- Indice expandido (overlay) ------------------------------------------
   <dialog> nativo (site-map-overlay.js): trae focus trap, ::backdrop y
   Escape-to-close gratis, sin construir un patron de modal propio. Solo
   complementa la navegacion existente -- nunca la reemplaza. z-index no
   aplica: .indice-dialogo se pinta en el top layer nativo del navegador,
   siempre por encima de .cabecera (z-index 50) y .cookies (z-index 100)
   sin necesidad de competir con ellos. */
.indice-dialogo {
  width: min(92vw, 920px);
  max-height: min(86vh, 800px);
  margin: auto;
  padding: 0;
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  background: var(--superficie);
  color: var(--blanco);
}
.indice-dialogo::backdrop { background: rgba(12, 12, 15, 0.72); }
.indice-cabecera {
  position: sticky; top: 0;
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.1rem 1.35rem; border-bottom: 1px solid var(--borde);
  background: var(--superficie);
}
.indice-cabecera h2 { margin: 0; font-size: 1.1rem; }
.indice-cerrar {
  border: none; background: transparent; color: var(--tenue);
  font-family: inherit; font-size: 1.5rem; line-height: 1; cursor: pointer; padding: 0.25rem 0.5rem;
}
.indice-cerrar:hover, .indice-cerrar:focus-visible { color: var(--blanco); }
.indice-cuerpo { padding: 1.35rem; overflow-y: auto; }
.indice-herramienta + .indice-herramienta { margin-top: 1.75rem; }
.indice-herramienta h3 {
  font-size: var(--texto-xs); text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--tenue); margin: 0 0 0.75rem;
}
.indice-seccion + .indice-seccion { margin-top: 1rem; }
.indice-seccion h4 { font-size: var(--texto-sm); color: var(--blanco); margin: 0 0 0.5rem; font-weight: 600; }
.indice-rejilla { display: grid; gap: 0.75rem; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 560px) { .indice-rejilla { grid-template-columns: repeat(3, 1fr); } }
.indice-tarjeta {
  display: block; text-decoration: none; color: inherit;
  border: 1px solid var(--borde); border-radius: var(--radio-s);
  overflow: hidden; background: var(--superficie-alta);
  transition: border-color var(--transicion);
}
.indice-tarjeta:hover, .indice-tarjeta:focus-visible { border-color: var(--blanco); }
.indice-tarjeta img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; background: var(--negro); }
.indice-tarjeta-titulo { display: block; padding: 0.55rem 0.7rem; font-size: var(--texto-base); font-weight: 600; }

/* --- Páginas de texto legal ---------------------------------------------- */
.pagina-texto { padding: 2.5rem 0 3.5rem; }
.pagina-texto h2 { margin-top: 2.25rem; }
.pagina-texto h3 { margin-top: 1.6rem; }
.pagina-texto ul, .pagina-texto ol { padding-left: 1.35rem; }
.pagina-texto li { margin-bottom: 0.5rem; }
.parrafo-justificado { text-align: justify; hyphens: auto; }
.miga {
  font-size: var(--texto-sm); color: var(--tenue); margin-bottom: 1.25rem;
}
.miga a { color: var(--tenue); }
.miga a:hover { color: var(--dorado-texto); }

/* --- Impresión ----------------------------------------------------------- */
@media print {
  .cabecera, .cookies, .boton, .nav-principal { display: none !important; }
  body { background: #FFF; color: #000; }
}