/* ==========================================================================
   topinversion.com · SISTEMA DE DISEÑO «ESTILO NUEVO» (morado intenso + turquesa)
   Guía de uso y lista de clases: docs/estilo-nuevo.md  (LÉELA antes de tocar nada)
   Medidas y colores sacados de la portada aprobada (planning/portada-nueva/index.html,
   4.ª vuelta) y de la maqueta de calculadora (planning/calculadora-nueva/index.html).

   Orden de carga (templates/layout.php):
     1. base.css            ← ESTE: variables, base, cabecera, pie y TODOS los componentes comunes
     2. fondos.css          ← fondos de cabecera y franjas del kit (se pueden añadir más)
     3. antiguo/*.css       ← CSS viejo de las páginas, TEMPORAL, repintado con el «puente» (§2b)
     4. lo que pida la página (calculadoras.css, pro.css, contratos.css, mercados.css…)

   La CSP no deja estilos en línea (ni style="…"): todo va por clases.
   Móvil primero: las reglas base son para 360 px y se amplían con min-width.
   ========================================================================== */

/* ---------- 1. Fuente (servida desde la web, licencia OFL) ---------- */
@font-face {
  font-family: "Plus Jakarta Sans";
  src: url("../fonts/plus-jakarta-sans-latin.woff2") format("woff2");
  font-weight: 400 800;            /* variable */
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Reserva con métricas ajustadas: el cambio de fuente apenas mueve la página */
@font-face { font-family: "Jakarta Reserva"; src: local("Arial"), local("Helvetica"); font-display: swap; size-adjust: 104%; ascent-override: 96%; descent-override: 24%; }

/* ---------- 2. Variables ---------- */
:root {
  /* Color (medido en diseno-elegido.png; contrastes AA comprobados):
     blanco/morado 6,3 · tinta/blanco 17 · tinta-2/blanco 7,9 · etiqueta/blanco 9,9 ·
     turquesa/cabecera 9+ · verde-texto/verde-fondo 5,6 · ambar-texto/ambar-fondo 7,4 · rojo-texto/rojo-fondo 7,2 */
  --cab-1: #2e0a4c;          /* cabecera morada: lado oscuro */
  --cab-2: #3a1162;          /* centro */
  --cab-3: #5a24a8;          /* lado claro */
  --franja: #31103f;         /* franja oscura (comparativas) */
  --morado: #7a12f2;         /* botones, enlaces */
  --morado-hover: #6408d6;
  --morado-vivo: #9336fe;    /* botón «vivo», círculos de flecha */
  --morado-oscuro: #3a1162;  /* fondos oscuros pequeños (tooltips, pastillas oscuras) */
  --lila-200: #ddd0fb;
  --lila-100: #efe7fe;
  --lila-50: #f7f3ff;
  --turquesa: #1affe0;       /* SOLO sobre fondo oscuro (titular de cabecera, ondas) */
  --turquesa-2: #13deb8;     /* rayas sobre titulares, adornos */
  --icono: #5100f2;          /* iconos de línea */
  --etiqueta: #3503ce;       /* antetítulos en mayúsculas */
  --titulo-pie: #2c00aa;
  --tinta: #0d0526;          /* titulares y texto */
  --tinta-2: #4a4363;        /* texto secundario */
  --borde: #ebe6f5;
  --borde-campo: #ddd4ef;
  --verde-fondo: #c9f5df; --verde-texto: #0a4f47;    /* «Guardado», éxito */
  --ambar-fondo: #ffefc2; --ambar-texto: #634100;    /* ojo, beta */
  --rojo-fondo: #ffe0e5;  --rojo-texto: #8c1231;     /* error, revisar */
  --rojo: #c0264a;

  /* Tipografía: una sola familia (Plus Jakarta Sans 400-800) */
  --f: "Plus Jakarta Sans", "Jakarta Reserva", "Manrope", "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --t-xs: 1rem;      /* Joan (05-11-2026): ningún texto por debajo de 16 px */
  --t-sm: 1rem;
  --t-base: clamp(1rem, .97rem + .15vw, 1.0625rem);
  --t-lg: clamp(1.0625rem, 1rem + .3vw, 1.1875rem);
  --t-xl: clamp(1.2rem, 1.1rem + .5vw, 1.4rem);
  --t-h3: clamp(1.25rem, 1.15rem + .55vw, 1.5rem);
  --t-h2: clamp(2rem, 1.1rem + 3vw, 3.3rem);          /* = .titular de la portada */
  --t-h1: clamp(2.25rem, 1.2rem + 3.6vw, 3.9rem);
  --t-display: clamp(2.7rem, 1.1rem + 4.4vw, 5rem);    /* titular de la cabecera de portada */
  --t-cifra: clamp(2.25rem, 1.7rem + 2.6vw, 3.5rem);
  --interlineado: 1.6;
  --tracking-titulo: -.035em;

  /* Espacio (escala 4 px) */
  --e-1: .25rem; --e-2: .5rem; --e-3: .75rem; --e-4: 1rem; --e-5: 1.5rem;
  --e-6: 2rem; --e-7: 3rem; --e-8: 4rem; --e-9: 6rem;
  --seccion: clamp(2.25rem, 1.4rem + 2.4vw, 3.6rem);
  --margen: clamp(1rem, .3rem + 2.6vw, 2.5rem);
  --ancho: 82.5rem;          /* 1320 px, como la portada */
  --ancho-lectura: 42rem;    /* ≈ 70 caracteres */

  /* Radios y sombras */
  --r-1: 6px; --r-2: 12px; --r-3: 18px; --r-4: 22px; --r-redondo: 999px;
  --s-1: 0 1px 2px rgb(27 11 62 / .05), 0 4px 14px -6px rgb(27 11 62 / .12);
  --s-2: 0 18px 40px -20px rgb(42 10 94 / .45);
  --s-3: 0 34px 70px -26px rgb(14 3 40 / .65);
  --s-barra: 0 24px 50px -24px rgb(42 10 94 / .45), 0 2px 6px rgb(27 11 62 / .06);

  --cabecera-alto: 4rem;
  --transicion: 200ms cubic-bezier(.2, .7, .2, 1);
  --foco: var(--morado);
  color-scheme: light;

  /* ---------- 2b. PUENTE (TEMPORAL) ----------
     Nombres de variable del estilo viejo (verde y crema) apuntando a los colores nuevos,
     para que el CSS de assets/css/antiguo/*.css, calculadoras.css, contratos.css, bloques.css,
     enlazado.css y mercados.css salgan ya en morado sin tocarlos. En CSS NUEVO no uses estos
     nombres: usa los de arriba. Se borra el puente cuando ya no quede CSS viejo. */
  --verde-950: #1d0838;
  --verde-900: var(--cab-2);
  --verde-800: var(--cab-1);
  --verde-700: var(--morado);
  --verde-500: var(--morado-vivo);
  --verde-300: #c9a8ff;
  --verde-200: var(--lila-200);
  --verde-100: var(--lila-100);
  --crema: var(--lila-50);
  --papel: #fff;
  --arena: var(--lila-50);
  --arena-2: var(--borde-campo);
  --borde-suave: var(--borde);
  --ocre: var(--etiqueta);
  --ocre-marca: var(--morado);
  --ocre-claro: var(--turquesa);
  --coral: var(--rojo);
  --coral-fondo: var(--rojo-fondo);
  --azul-fondo: var(--lila-50);
  --f-titulo: var(--f);
  --f-texto: var(--f);
  --ti-verde-oscuro: var(--cab-2); --ti-acento: var(--morado-vivo); --ti-verde-claro: var(--lila-100);
  --ti-texto: var(--tinta); --ti-texto-tenue: var(--tinta-2); --ti-crema: var(--lila-50);
}

/* ---------- 3. Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--cabecera-alto) + 1rem); }
body { margin: 0; background: #fff; color: var(--tinta); font: 400 var(--t-base)/var(--interlineado) var(--f); -webkit-font-smoothing: antialiased; overflow-x: clip; }
img, svg, video { display: block; max-width: 100%; height: auto; }
picture { display: contents; }
picture > source { display: none; }   /* que las <source> no ocupen hueco en rejillas y filas */
.ico3d-pic { display: inline-flex; flex: none; line-height: 0; }
input, button, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
h1, h2, h3, h4 { font-family: var(--f); font-weight: 800; line-height: 1.08; letter-spacing: var(--tracking-titulo); margin: 0 0 var(--e-4); text-wrap: balance; color: var(--tinta); -webkit-text-stroke: .01em currentColor; }
h1 { font-size: var(--t-h1); }
h2 { font-size: var(--t-h2); }
h3 { font-size: var(--t-h3); letter-spacing: -.025em; }
h4 { font-size: var(--t-lg); letter-spacing: -.015em; -webkit-text-stroke: 0; }
p { margin: 0 0 var(--e-4); text-wrap: pretty; }
a { color: var(--morado); text-decoration-thickness: 1px; text-underline-offset: .18em; }
a:hover { color: var(--morado-hover); text-decoration-thickness: 2px; }
ul, ol { margin: 0 0 var(--e-4); padding-left: 1.25em; }
table { border-collapse: collapse; width: 100%; }
hr { border: 0; border-top: 1px solid var(--borde); margin: var(--e-7) 0; }
strong, b { font-weight: 700; }
:focus-visible { outline: 3px solid var(--foco); outline-offset: 3px; border-radius: 6px; }
.sobre-oscuro :focus-visible, .franja--oscura :focus-visible, .cabeza--oscura :focus-visible { --foco: var(--turquesa); }
::selection { background: var(--lila-200); }
[hidden] { display: none !important; }
.sr-only, .oculto { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.cifra, .tabular { font-variant-numeric: tabular-nums lining-nums; }

/* ---------- 4. Estructura ---------- */
.contenedor { width: min(100% - 2 * var(--margen), var(--ancho)); margin-inline: auto; }
.contenedor--estrecho { width: min(100% - 2 * var(--margen), 52rem); margin-inline: auto; }
.contenedor--lectura { width: min(100% - 2 * var(--margen), var(--ancho-lectura)); margin-inline: auto; }
.seccion { padding-block: var(--seccion); }
.seccion:not([class*="--"]) + .seccion:not([class*="--"]) { padding-top: 0; }
.principal { display: block; min-height: 60vh; }
.rejilla { display: grid; gap: var(--e-5); grid-template-columns: repeat(auto-fill, minmax(min(100%, 18rem), 1fr)); }
.rejilla--2 { grid-template-columns: repeat(auto-fill, minmax(min(100%, 26rem), 1fr)); }
.rejilla--3 { grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr)); }
.rejilla > *, .dos-columnas > * { min-width: 0; }
.dos-columnas { display: grid; gap: var(--e-6); }
@media (min-width: 64rem) { .dos-columnas { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--e-8); align-items: center; } }
.pila > * + * { margin-top: var(--e-4); }
.saltar { position: absolute; left: var(--e-4); top: -100px; z-index: 100; background: var(--morado); color: #fff; padding: var(--e-2) var(--e-4); border-radius: var(--r-2); font-weight: 700; }
.saltar:focus { top: var(--e-2); color: #fff; }
.aviso-dev { margin: 0; padding: var(--e-2) var(--margen); background: var(--ambar-fondo); color: var(--ambar-texto); font-size: var(--t-sm); text-align: center; font-weight: 600; }

/* Titulares de sección: raya turquesa + titular + entradilla (como la portada) */
.raya { display: block; width: 52px; height: 6px; border-radius: 6px; background: var(--turquesa-2); margin-bottom: .9rem; }
.titular { font-size: var(--t-h2); line-height: 1.05; margin: 0; }
.titular--medio { font-size: clamp(1.6rem, 1.1rem + 1.6vw, 2.3rem); }
.entradilla { color: var(--tinta-2); font-size: clamp(1rem, .95rem + .3vw, 1.15rem); margin: .55rem 0 0; max-width: 42rem; }
.antetitulo { display: inline-block; margin: 0 0 var(--e-2); font: 800 1rem/1.3 var(--f); letter-spacing: .05em; text-transform: uppercase; color: var(--etiqueta); }
.sobre-oscuro .antetitulo, .franja--oscura .antetitulo { color: var(--turquesa); }
.cabeza-seccion { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1rem 2rem; margin-bottom: var(--e-5); }
.cabeza-seccion h2 { margin: 0; }
.cabeza-seccion__texto { margin: .55rem 0 0; color: var(--tinta-2); max-width: 42rem; }
.cabeza-seccion__mas { margin-left: auto; }
.subrayado { display: block; width: 52px; height: 6px; border-radius: 6px; background: var(--turquesa-2); margin-bottom: .9rem; }   /* = .raya (nombre viejo) */
.enlace-fuerte, .enlace-flecha { display: inline-flex; align-items: center; gap: .35rem; font-weight: 800; color: var(--morado); text-decoration: none; }
.enlace-fuerte:hover, .enlace-flecha:hover { color: var(--morado-hover); text-decoration: underline; text-underline-offset: 3px; }
.enlace-fuerte .icono, .enlace-flecha .icono, .flecha { transition: transform var(--transicion); }
a:hover > .icono-flecha, a:hover > .flecha, .enlace-fuerte:hover .icono, .enlace-flecha:hover .icono, button:hover > .flecha { transform: translateX(3px); }

/* ---------- 5. Iconos ---------- */
/* De línea (sprite assets/img/iconos.svg → ti_icono('flecha')) */
.icono { width: 1.25em; height: 1.25em; flex: none; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; display: inline-block; vertical-align: -.22em; }
.icono--sm { width: 1em; height: 1em; }
.icono--lg { width: 2rem; height: 2rem; }
.icono-caja { display: inline-grid; place-items: center; width: 3rem; height: 3rem; border-radius: var(--r-2); background: var(--lila-100); color: var(--icono); flex: none; }
.icono-caja .icono { width: 1.6rem; height: 1.6rem; }
.icono-img { display: inline-flex; flex: none; line-height: 0; }
.icono--img { width: 1.5em; height: 1.5em; stroke: none; object-fit: contain; vertical-align: middle; }
/* 3D del kit (assets/img/iconos/ic-*.png|webp|avif → ti_ico3d('ic-banco', 48)) */
.ico3d { display: inline-block; flex: none; width: var(--ico, 48px); height: var(--ico, 48px); object-fit: contain; background: none; vertical-align: middle; }
.ico3d--xs { --ico: 24px; } .ico3d--sm { --ico: 32px; } .ico3d--md { --ico: 48px; } .ico3d--lg { --ico: 64px; } .ico3d--xl { --ico: 96px; } .ico3d--xxl { --ico: 128px; }

/* ---------- 6. Botones ----------
   .boton (= morado relleno) · --borde (blanco con borde morado) · --turquesa · --claro (borde blanco, sobre oscuro)
   · --vivo (degradado, sobre la cabecera morada) · --blanco (relleno blanco sobre oscuro)
   · --pequeno · --grande · --bloque · --enlace · --peligro.  Nombres viejos que siguen valiendo:
   --secundario (= --borde), --fantasma, --google, --afiliado. */
.boton { --b-fondo: var(--morado); --b-color: #fff; --b-borde: transparent; --b-sombra: 0 12px 26px -12px rgb(122 18 242 / .85);
  display: inline-flex; align-items: center; justify-content: center; gap: .6rem; min-height: 50px; padding: .75rem 1.5rem;
  border: 1.5px solid var(--b-borde); border-radius: var(--r-2); background: var(--b-fondo); color: var(--b-color); box-shadow: var(--b-sombra);
  font: 700 1rem/1.2 var(--f); text-decoration: none; text-align: center; cursor: pointer; white-space: nowrap;
  transition: transform var(--transicion), box-shadow var(--transicion), background-color var(--transicion), color var(--transicion), border-color var(--transicion); }
.boton:hover { --b-fondo: var(--morado-hover); color: var(--b-color); text-decoration: none; transform: translateY(-1px); }
.boton:active { transform: translateY(0); }
.boton .icono, .boton .ico3d { width: 20px; height: 20px; flex: none; }
.boton[aria-disabled="true"], .boton:disabled { opacity: .55; pointer-events: none; }
.boton--morado { }
.boton--borde, .boton--secundario { --b-fondo: #fff; --b-color: var(--morado); --b-borde: var(--morado); --b-sombra: none; }
.boton--borde:hover, .boton--secundario:hover { --b-fondo: var(--lila-50); --b-color: var(--morado-hover); }
.boton--turquesa { --b-fondo: var(--turquesa); --b-color: var(--tinta); --b-sombra: 0 12px 26px -12px rgb(19 222 184 / .9); }
.boton--turquesa:hover { --b-fondo: #4dffe8; --b-color: var(--tinta); }
.boton--claro { --b-fondo: rgb(255 255 255 / .04); --b-color: #fff; --b-borde: rgb(255 255 255 / .75); --b-sombra: none; }
.boton--claro:hover { --b-fondo: rgb(255 255 255 / .12); --b-color: #fff; }
.boton--blanco { --b-fondo: #fff; --b-color: var(--morado); --b-sombra: var(--s-1); }
.boton--blanco:hover { --b-fondo: var(--lila-50); --b-color: var(--morado-hover); }
.boton--vivo { --b-sombra: 0 14px 30px -12px rgb(147 54 254 / .9), inset 0 1px 0 rgb(255 255 255 / .25); background: linear-gradient(180deg, #9a42ff, #7d16f5); }
.boton--vivo:hover { background: linear-gradient(180deg, #8a2cff, #6a07e0); }
.boton--fantasma { --b-fondo: transparent; --b-color: var(--morado); --b-sombra: none; padding-inline: .6em; }
.boton--fantasma:hover { --b-fondo: var(--lila-50); --b-color: var(--morado-hover); }
.boton--google { --b-fondo: #fff; --b-color: var(--tinta); --b-borde: var(--borde-campo); --b-sombra: var(--s-1); width: 100%; }
.boton--google:hover { --b-fondo: var(--lila-50); --b-color: var(--tinta); }
.boton--afiliado { }
.boton--peligro { --b-fondo: var(--rojo); --b-sombra: none; }
.boton--peligro:hover { --b-fondo: #9b1c3b; }
.boton--enlace { --b-fondo: transparent; --b-color: var(--morado); --b-sombra: none; min-height: auto; padding: 0; text-decoration: underline; }
.boton--enlace:hover { --b-fondo: transparent; transform: none; }
.boton--pequeno { min-height: 44px; padding: .5rem 1.15rem; font-size: 1rem; border-radius: 11px; }
.boton--grande { min-height: 56px; padding-inline: 1.8rem; font-size: 1.05rem; }
.boton--bloque { width: 100%; }
.boton--repartido { justify-content: space-between; }   /* texto a la izquierda, flecha a la derecha */
.boton-icono { display: inline-grid; place-items: center; width: 44px; height: 44px; border: 1.5px solid var(--borde); border-radius: 11px; background: #fff; color: var(--tinta); text-decoration: none; cursor: pointer; }
.boton-icono:hover { background: var(--lila-50); color: var(--morado); }
.boton-icono .icono { width: 1.375rem; height: 1.375rem; }
.circulo-flecha { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--morado-vivo); color: #fff; flex: none; box-shadow: 0 10px 22px -8px rgb(147 54 254 / .95); }
.circulo-flecha--claro { width: 42px; height: 42px; background: var(--lila-100); color: var(--morado); box-shadow: none; transition: background-color var(--transicion), color var(--transicion); }
a:hover .circulo-flecha--claro { background: var(--morado); color: #fff; }

/* ---------- 7. Pastillas, chips y etiquetas ----------
   .pastilla (morada) · --clara (blanca, sobre foto) · --tema (lila) · --beta (ámbar) · --pro (morado oscuro + candado)
   · --exito (verde «Guardado») · --oscura · --borde */
.pastilla { display: inline-flex; align-items: center; gap: .35em; padding: .3rem .75rem; border-radius: var(--r-redondo); font: 800 1rem/1.2 var(--f); letter-spacing: .04em; text-transform: uppercase; background: var(--morado); color: #fff; white-space: nowrap; text-decoration: none; }
.pastilla .icono { width: 1em; height: 1em; stroke-width: 2.4; }
.pastilla--clara { background: rgb(255 255 255 / .92); color: var(--tinta); }
.pastilla--tema { background: var(--lila-100); color: var(--etiqueta); }
a.pastilla--tema:hover { background: var(--lila-200); }
.pastilla--beta { background: var(--ambar-fondo); color: var(--ambar-texto); }
.pastilla--pro { background: linear-gradient(135deg, var(--cab-2), var(--morado)); color: #fff; letter-spacing: .08em; }
.pastilla--exito { background: var(--verde-fondo); color: var(--verde-texto); text-transform: none; letter-spacing: 0; font-weight: 700; }
.pastilla--oscura { background: var(--tinta); color: #fff; }
.pastilla--borde { background: #fff; color: var(--morado); border: 1px solid var(--borde); text-transform: none; letter-spacing: 0; font-weight: 700; box-shadow: var(--s-1); }
.pastilla--min { padding: .15rem .5rem; font-size: 1rem; }
/* Función Pro: candado discreto junto al texto de un botón o enlace */
.con-candado { display: inline-flex; align-items: center; gap: .4em; }
.con-candado::after { content: ""; width: .95em; height: .95em; flex: none; opacity: .75; background: currentColor; -webkit-mask: url("../img/candado.svg") center / contain no-repeat; mask: url("../img/candado.svg") center / contain no-repeat; }
.chip { display: inline-flex; align-items: center; gap: .4em; min-height: 2.25rem; padding: .3rem .8rem; border: 1px solid var(--borde); border-radius: var(--r-redondo); background: var(--lila-50); color: var(--tinta); font-size: var(--t-sm); font-weight: 600; text-decoration: none; cursor: pointer; transition: background-color var(--transicion), color var(--transicion); }
.chip:hover { background: var(--lila-100); color: var(--morado); }
.chip[aria-selected="true"], .chip.is-activo, .chip[aria-current] { border-color: var(--morado); background: var(--morado); color: #fff; }
.chip__n { font-size: var(--t-xs); opacity: .75; font-variant-numeric: tabular-nums; }
.etiqueta { display: inline-flex; align-items: center; gap: .3em; padding: .22em .6em; border-radius: var(--r-redondo); background: var(--lila-100); color: var(--etiqueta); font: 800 1rem/1.4 var(--f); letter-spacing: .05em; text-transform: uppercase; text-decoration: none; }
.etiqueta--ocre { background: var(--ambar-fondo); color: var(--ambar-texto); }
.etiqueta--pais, .etiqueta-pais { display: inline-flex; align-items: center; gap: .35em; padding: .15em .55em; border: 1px solid var(--borde); border-radius: var(--r-redondo); background: #fff; color: var(--tinta-2); font-size: var(--t-xs); font-weight: 600; margin: 0; }

/* ---------- 8. Formularios ---------- */
.campo { display: grid; gap: var(--e-2); margin-bottom: var(--e-4); }
.campo label, .campo__etiqueta { font-size: var(--t-sm); font-weight: 700; color: var(--tinta); }
.campo__ayuda { font-size: var(--t-xs); color: var(--tinta-2); }
.campo__error { font-size: var(--t-xs); color: var(--rojo-texto); font-weight: 700; }
.entrada, .campo input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), .campo select, .campo textarea {
  width: 100%; min-height: 48px; padding: .6em .85em; border: 1.5px solid var(--borde-campo); border-radius: 10px; background: #fff; color: var(--tinta); font-weight: 600;
  box-shadow: 0 1px 2px rgb(27 11 62 / .05); transition: border-color var(--transicion), box-shadow var(--transicion); }
.campo textarea { min-height: 9rem; resize: vertical; font-weight: 500; }
.entrada:hover, .campo input:hover, .campo select:hover, .campo textarea:hover { border-color: #c4b3ec; }
.entrada:focus, .campo input:focus, .campo select:focus, .campo textarea:focus { outline: none; border-color: var(--morado); box-shadow: 0 0 0 4px rgb(122 18 242 / .16); }
.campo.is-error input, .campo.is-error textarea, .campo.is-error select { border-color: var(--rojo); }
.casilla, .campo--check { display: flex; flex-direction: row; gap: var(--e-3); align-items: flex-start; font-size: var(--t-sm); color: var(--tinta-2); }
.casilla input, .campo--check input { width: 1.2rem; height: 1.2rem; margin-top: .15em; accent-color: var(--morado); flex: none; }
.campo--check label { font-weight: 500; color: var(--tinta-2); }
input[type="range"] { accent-color: var(--morado); width: 100%; }
/* Selector de dos o tres opciones (p. ej. Sencillo / Detallado) */
.selector { display: inline-flex; padding: 4px; gap: 4px; border-radius: 12px; background: var(--lila-100); }
.selector > button, .selector > a, .selector > label { min-height: 40px; padding: .45rem 1rem; border: 0; border-radius: 9px; background: transparent; color: var(--tinta-2); font-weight: 700; font-size: var(--t-sm); text-decoration: none; cursor: pointer; display: inline-flex; align-items: center; gap: .4em; }
.selector > [aria-pressed="true"], .selector > [aria-selected="true"], .selector > .is-activo, .selector input:checked + label { background: #fff; color: var(--morado); box-shadow: var(--s-1); }
.buscador-grande { position: relative; display: flex; gap: var(--e-2); max-width: 44rem; margin: var(--e-4) 0 var(--e-5); }
.buscador-grande > .icono { position: absolute; left: 1rem; top: 50%; translate: 0 -50%; color: var(--tinta-2); pointer-events: none; }
.buscador-grande .entrada { padding-left: 2.8rem; min-height: 52px; }

/* ---------- 9. Avisos ----------
   .aviso (lila, información) · --ok/--exito · --alerta/--ojo · --error · --mantenimiento · --beta · --oscuro (sobre franja)
   Estructura: <div class="aviso aviso--ojo" role="note">[icono] <p>…</p></div> */
.aviso { display: flex; gap: var(--e-3); align-items: flex-start; margin: var(--e-4) 0; padding: .85rem 1rem; border-radius: var(--r-2); background: var(--lila-50); border: 1px solid var(--borde); color: var(--tinta); font-size: var(--t-sm); line-height: 1.5; }
.aviso > .icono { color: var(--morado); margin-top: .1em; }
.aviso > p, .aviso > div { margin: 0; }
.aviso a { font-weight: 700; }
.aviso--ok, .aviso--exito { background: var(--verde-fondo); border-color: transparent; color: var(--verde-texto); }
.aviso--ok > .icono, .aviso--exito > .icono { color: var(--verde-texto); }
.aviso--alerta, .aviso--ojo, .aviso--mantenimiento, .aviso--beta { background: var(--ambar-fondo); border-color: transparent; color: var(--ambar-texto); }
.aviso--alerta > .icono, .aviso--ojo > .icono, .aviso--beta > .icono { color: var(--ambar-texto); }
.aviso--error { background: var(--rojo-fondo); border-color: transparent; color: var(--rojo-texto); }
.aviso--error > .icono { color: var(--rojo-texto); }
.aviso--oscuro { background: transparent; border: 0; padding: 0; color: rgb(255 255 255 / .82); }
.aviso--oscuro > .icono { color: #fff; }
.aviso--oscuro a { color: var(--turquesa); }
.mensaje { display: flex; gap: var(--e-3); align-items: flex-start; padding: var(--e-4); border-radius: var(--r-2); background: var(--lila-50); color: var(--tinta); font-size: var(--t-sm); }
.mensaje--error { background: var(--rojo-fondo); color: var(--rojo-texto); }
.aviso-legal { margin: var(--e-6) 0; padding-top: var(--e-4); border-top: 1px solid var(--borde); font-size: var(--t-xs); color: var(--tinta-2); }
.aviso-afiliacion { display: grid; grid-template-columns: auto 1fr; gap: var(--e-3); margin-top: var(--e-5); padding: .85rem 1rem; border-radius: var(--r-2); background: var(--lila-50); border: 1px solid var(--borde); font-size: var(--t-sm); color: var(--tinta-2); }
.aviso-afiliacion .icono { color: var(--morado); margin-top: .15em; }
.aviso-afiliacion p { margin: 0; }

/* ---------- 10. Cabecera (blanca, logo en color) ---------- */
.cabecera { position: sticky; top: 0; z-index: 50; background: #fff; border-bottom: 1px solid var(--borde); }
.cabecera__barra { display: flex; align-items: center; gap: .6rem; min-height: var(--cabecera-alto); }
.cabecera__logo { display: inline-flex; align-items: center; margin-right: auto; text-decoration: none; min-height: 44px; flex: none; }
.cabecera__logo img { width: 168px; height: auto; }
.cabecera__acciones { display: flex; align-items: center; gap: .6rem; }
.cabecera__buscar { display: none; }
.cabecera__entrar { display: flex; }
.cuenta-menu { display: flex; align-items: center; gap: .6rem; }
.cuenta-menu__enlace { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: .5rem 1.15rem; border-radius: 11px; border: 1.5px solid var(--morado); background: #fff; color: var(--morado); font-weight: 700; font-size: 1rem; text-decoration: none; white-space: nowrap; transition: background-color var(--transicion); }
.cuenta-menu__enlace:hover { background: var(--lila-50); color: var(--morado-hover); }
.cuenta-menu__crear { min-height: 44px; padding: .5rem 1.15rem; font-size: 1rem; border-radius: 11px; }
.cuenta-menu [data-cuenta-conectado] ~ .cuenta-menu__crear { display: none; }

/* Menú de escritorio */
.menu { display: none; }
.menu__lista { display: flex; align-items: center; gap: .3rem; list-style: none; margin: 0; padding: 0; }
.menu__enlace, .menu__desplegable > summary { display: inline-flex; align-items: center; gap: .35rem; min-height: 44px; padding: .55rem .85rem; border-radius: 10px; color: var(--tinta); font-size: 1rem; font-weight: 700; text-decoration: none; cursor: pointer; list-style: none; white-space: nowrap; }
.menu__desplegable > summary::-webkit-details-marker { display: none; }
.menu__enlace:hover, .menu__desplegable > summary:hover, .menu__desplegable[open] > summary { background: var(--lila-50); color: var(--morado); text-decoration: none; }
.menu__enlace[aria-current="page"], .menu__enlace.is-actual { color: var(--morado); }
.menu__desplegable > summary .icono { width: 15px; height: 15px; stroke-width: 2.4; transition: transform var(--transicion); }
.menu__desplegable { position: relative; }
.menu__desplegable[open] > summary .icono { transform: rotate(180deg); }
.menu__panel { position: absolute; left: -1rem; top: calc(100% + .6rem); width: 36rem; padding: .75rem; border: 1px solid var(--borde); border-radius: var(--r-3); background: #fff; box-shadow: var(--s-2), var(--s-1); display: grid; grid-template-columns: 1fr 1fr; gap: .2rem; animation: aparecer 160ms ease-out; }
.menu__panel a { display: flex; gap: .75rem; align-items: center; padding: .6rem .7rem; border-radius: var(--r-2); color: var(--tinta); text-decoration: none; font-weight: 700; font-size: 1rem; line-height: 1.3; }
.menu__panel a:hover { background: var(--lila-50); color: var(--morado); }
.menu__panel a > .icono { color: var(--icono); }
.menu__panel a span small { display: block; color: var(--tinta-2); font-size: var(--t-xs); font-weight: 500; margin-top: .1em; }
.menu__panel .menu__todas { grid-column: 1 / -1; justify-content: space-between; border-top: 1px solid var(--borde); border-radius: 0 0 var(--r-2) var(--r-2); margin-top: .3rem; padding-top: .8rem; font-weight: 800; color: var(--morado); }
.menu .pastilla, .menu-movil .pastilla { margin-left: .15rem; }

/* Idioma (oculto mientras solo haya español) */
.idioma { position: relative; }
.idioma > summary { display: inline-flex; align-items: center; gap: .3em; min-height: 44px; padding: 0 .6rem; border-radius: 10px; font-size: var(--t-sm); font-weight: 700; list-style: none; cursor: pointer; }
.idioma > summary::-webkit-details-marker { display: none; }
.idioma > summary:hover, .idioma[open] > summary { background: var(--lila-50); }
.idioma__lista { position: absolute; right: 0; top: calc(100% + .4rem); min-width: 11rem; margin: 0; padding: var(--e-2); list-style: none; border: 1px solid var(--borde); border-radius: var(--r-3); background: #fff; box-shadow: var(--s-2); z-index: 5; }
.idioma__lista a, .idioma__lista span { display: flex; justify-content: space-between; padding: .55em .75em; border-radius: var(--r-1); color: var(--tinta); text-decoration: none; font-size: var(--t-sm); }
.idioma__lista a:hover { background: var(--lila-50); }
.idioma__lista [aria-current] { font-weight: 700; color: var(--morado); background: var(--lila-100); }

/* Menú del móvil: <details> a pantalla completa (funciona sin JS) */
.menu-movil > summary { list-style: none; }
.menu-movil > summary::-webkit-details-marker { display: none; }
.menu-movil__panel { position: fixed; inset: var(--cabecera-alto) 0 0 0; z-index: 60; overflow-y: auto; overscroll-behavior: contain; background: #fff; padding: var(--e-4) var(--margen) var(--e-8); border-top: 1px solid var(--borde); animation: aparecer 160ms ease-out; }
.menu-movil[open] .i-abrir, .menu-movil:not([open]) .i-cerrar { display: none; }
.menu-movil__panel form { margin: 0 0 var(--e-4); }
.menu-movil__grupo { border-bottom: 1px solid var(--borde); }
.menu-movil__grupo > summary, .menu-movil__enlace { display: flex; justify-content: space-between; align-items: center; gap: .5rem; min-height: 3.5rem; font: 800 1.2rem/1.2 var(--f); letter-spacing: -.02em; color: var(--tinta); text-decoration: none; list-style: none; cursor: pointer; }
.menu-movil__grupo > summary::-webkit-details-marker { display: none; }
.menu-movil__grupo > summary .icono { transition: transform var(--transicion); }
.menu-movil__grupo[open] > summary .icono { transform: rotate(180deg); }
.menu-movil__grupo ul { list-style: none; margin: 0 0 var(--e-3); padding: 0; display: grid; gap: .15rem; }
.menu-movil__grupo li a { display: flex; gap: .75rem; align-items: center; min-height: 48px; padding: .25rem .5rem; border-radius: var(--r-2); color: var(--tinta); font-weight: 700; text-decoration: none; }
.menu-movil__grupo li a:hover { background: var(--lila-50); color: var(--morado); }
.menu-movil__enlace { border-bottom: 1px solid var(--borde); }
.menu-movil__enlace > span { display: inline-flex; align-items: center; gap: .5rem; }
.menu-movil__pie { display: grid; gap: var(--e-3); margin-top: var(--e-5); }
.menu-movil__idiomas { display: flex; flex-wrap: wrap; gap: var(--e-2); list-style: none; padding: 0; margin: 0; }
body.menu-abierto { overflow: hidden; }

.cuenta-menu__crear { display: none; }
@media (min-width: 48rem) { .cuenta-menu__crear { display: inline-flex; } }
/* 360 px con la sesión abierta: «Mi espacio» es más ancho que «Entrar»; el logo se reduce ya por debajo de 23 rem (368 px) */
@media (max-width: 23rem) { .cabecera__logo img { width: 140px; } .cuenta-menu__enlace { padding-inline: .8rem; } }
/* Menú de escritorio desde 80 rem (1280 px). Entre 64 y 80 rem no cabe con «Entrar» + «Crear cuenta gratis» (se salía
   de la pantalla): ahí se queda la hamburguesa. Las medidas de abajo dejan aire a 1280, 1366, 1440 y en las anchas
   (contenedor de 1320 px), con y sin sesión: planning/estilo-nuevo/final/cabecera-ancho.mjs lo comprueba. */
@media (min-width: 64rem) {
  :root { --cabecera-alto: 4.625rem; }      /* 74 px, como la portada */
  .cabecera__logo img { width: 200px; }
}
@media (min-width: 80rem) {
  .cabecera__barra { gap: .9rem; }
  .cabecera__logo { margin-right: 0; }
  .cabecera__logo img { width: 164px; }
  .menu { display: block; margin: 0 auto; }
  .menu__lista { gap: .1rem; }
  .menu__enlace, .menu__desplegable > summary { padding-inline: .5rem; }
  .menu-movil, .cabecera__buscar-movil { display: none; }
  .cuenta-menu { gap: .45rem; }
  .cuenta-menu__enlace, .cuenta-menu__crear { padding-inline: .95rem; }
}
@media (min-width: 90rem) {
  .cabecera__barra { gap: 1.1rem; }
  .cabecera__logo img { width: 200px; }
  .menu__enlace, .menu__desplegable > summary { padding-inline: .6rem; }
  .cabecera__buscar { display: inline-grid; }
}
@media (max-width: 39.99rem) { .cabecera__barra { gap: .5rem; } }

/* ---------- 11. Migas de pan ---------- */
.migas { padding-top: var(--e-4); }
.migas__lista { display: flex; flex-wrap: wrap; gap: .25em .5em; list-style: none; margin: 0; padding: 0; font-size: var(--t-xs); font-weight: 600; color: var(--tinta-2); }
.migas__item { display: inline-flex; align-items: center; gap: .5em; }
.migas__item + .migas__item::before { content: ""; width: .4em; height: .4em; border-right: 1.6px solid currentColor; border-top: 1.6px solid currentColor; rotate: 45deg; opacity: .55; }
.migas__item a { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; color: var(--tinta-2); text-decoration: none; }   /* tocable de 44 px */
.migas__item a:hover { color: var(--morado); text-decoration: underline; }
.migas__item [aria-current] { color: var(--tinta); display: inline-block; max-width: 28ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; }
.cabeza--oscura .migas__lista, .cabeza--oscura .migas__item a { color: rgb(255 255 255 / .78); }
.cabeza--oscura .migas__item [aria-current] { color: #fff; }

/* ---------- 12. Cabeceras de página ----------
   <header class="cabeza cabeza--tema fondo-tema-ahorro">  (el fondo se cambia con una clase de fondos.css)
     .cabeza--portada     morada con ondas (la de la portada)
     .cabeza--tema        morada, más baja, con icono 3D del tema a la derecha
     .cabeza--guia        lila clara, titular oscuro (lectura)
     .cabeza--calculadora morada baja: la calculadora se solapa debajo (.solapa)
     .cabeza--herramienta morada oscura (analizador, herramientas con IA)
   Piezas: .cabeza__rejilla (texto | lado) · .cabeza__texto · .cabeza__titulo (+ <span> en turquesa)
           .cabeza__entradilla · .cabeza__botones · .cabeza__sellos · .cabeza__lado · .cabeza__icono · .cabeza__meta
   Fondo: variable --cabeza-fondo (una imagen del kit) encima del degradado. Sin fondo, solo degradado. */
.cabeza { --cabeza-fondo: none; position: relative; isolation: isolate; overflow: hidden; padding: clamp(1.6rem, 1rem + 2.2vw, 2.8rem) 0 clamp(2rem, 1.2rem + 2.6vw, 3.2rem); }
.cabeza--oscura, .cabeza--portada, .cabeza--tema, .cabeza--calculadora, .cabeza--herramienta { color: #fff;
  background:
    var(--cabeza-fondo) center / cover no-repeat,
    radial-gradient(34rem 20rem at 74% 92%, rgb(160 80 255 / .55), transparent 70%),
    radial-gradient(28rem 18rem at 98% 60%, rgb(130 60 230 / .45), transparent 70%),
    radial-gradient(30rem 16rem at 40% 0%, rgb(90 30 160 / .35), transparent 70%),
    linear-gradient(100deg, var(--cab-1) 0%, var(--cab-2) 48%, #451884 76%, var(--cab-3) 100%); }
.cabeza--oscura::before, .cabeza--portada::before, .cabeza--tema::before, .cabeza--calculadora::before, .cabeza--herramienta::before {
  content: ""; position: absolute; inset: 0; z-index: -1; background-image: radial-gradient(rgb(255 255 255 / .07) 1px, transparent 1.3px); background-size: 24px 24px; -webkit-mask-image: linear-gradient(90deg, #000, transparent 60%); mask-image: linear-gradient(90deg, #000, transparent 60%); }
.cabeza--herramienta { background: var(--cabeza-fondo) center / cover no-repeat, radial-gradient(36rem 18rem at 100% 100%, rgb(147 54 254 / .3), transparent 70%), radial-gradient(40rem 20rem at 0% 0%, rgb(91 33 214 / .35), transparent 70%), var(--franja); }
.cabeza--guia { background: var(--cabeza-fondo) center / cover no-repeat, linear-gradient(100deg, #f5eefe 0%, #eee3fd 55%, #e2d1fc 100%); color: var(--tinta); }
.cabeza--clara { background: var(--cabeza-fondo) center / cover no-repeat, var(--lila-50); color: var(--tinta); }
.cabeza :is(h1, h2) { color: inherit; }
.cabeza__rejilla { position: relative; z-index: 2; display: grid; gap: var(--e-6); align-items: center; }
.cabeza__rejilla > * { min-width: 0; }
@media (min-width: 64rem) { .cabeza__rejilla { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: var(--e-7); } }
.cabeza__titulo { font-size: var(--t-h1); line-height: 1; letter-spacing: -.04em; margin: 0; max-width: 20ch; }
.cabeza--portada .cabeza__titulo { font-size: var(--t-display); line-height: .98; letter-spacing: -.045em; max-width: none; }
.cabeza__titulo span { display: block; }
.cabeza--oscura .cabeza__titulo span, .cabeza--portada .cabeza__titulo span, .cabeza--tema .cabeza__titulo span, .cabeza--calculadora .cabeza__titulo span, .cabeza--herramienta .cabeza__titulo span { color: var(--turquesa); text-shadow: 0 0 28px rgb(26 255 224 / .25); }
.cabeza--guia .cabeza__titulo span, .cabeza--clara .cabeza__titulo span { color: var(--morado); }
.cabeza__entradilla { margin: 1.1rem 0 0; font-size: clamp(1.05rem, .95rem + .45vw, 1.32rem); line-height: 1.45; max-width: 36rem; }
.cabeza--oscura .cabeza__entradilla, .cabeza--portada .cabeza__entradilla, .cabeza--tema .cabeza__entradilla, .cabeza--calculadora .cabeza__entradilla, .cabeza--herramienta .cabeza__entradilla { color: rgb(255 255 255 / .9); }
.cabeza--guia .cabeza__entradilla, .cabeza--clara .cabeza__entradilla { color: var(--tinta-2); }
.cabeza__botones { margin-top: 1.6rem; display: flex; flex-wrap: wrap; gap: .6rem; }
.cabeza__sellos { margin: 1.15rem 0 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: .4rem 1.1rem; font-size: 1rem; font-weight: 600; }
.cabeza__sellos li { display: inline-flex; align-items: center; gap: .4rem; }
.cabeza__sellos .icono { width: 17px; height: 17px; color: var(--turquesa); }
.cabeza--oscura .cabeza__sellos, .cabeza--portada .cabeza__sellos, .cabeza--tema .cabeza__sellos, .cabeza--calculadora .cabeza__sellos, .cabeza--herramienta .cabeza__sellos { color: rgb(255 255 255 / .86); }
.cabeza--guia .cabeza__sellos .icono, .cabeza--clara .cabeza__sellos .icono { color: var(--verde-texto); }
.cabeza__meta { margin-top: 1rem; display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; font-size: 1rem; font-weight: 600; }
.cabeza__lado { position: relative; z-index: 2; }
/* Icono 3D de la cabecera (Joan, 05-11): presencia de ilustración, no de icono. Un solo tamaño para todas las cabeceras:
   --cabeza-ico (el archivo servido es el de 512 px: nítido al doble de densidad hasta ~272 px). El dibujo ocupa ~2/3 del
   lienzo, así que el margen negativo se come el aire transparente y la cabecera no se alarga.
   Sin sombra oscura sobre el morado (hacía una mancha): un brillo lila suave; en las cabeceras claras, sombra muy leve.
   En escritorio se ajusta al alto del bloque de texto (como mucho --cabeza-ico): una cabecera corta no se alarga por el icono.
   Por debajo de 64rem el icono va arriba a la derecha y el texto lo rodea (hueco flotante al principio del bloque de texto). */
.cabeza { --cabeza-ico: 112px; }
@media (min-width: 40rem) { .cabeza { --cabeza-ico: 176px; } }
@media (min-width: 64rem) { .cabeza { --cabeza-ico: 236px; } }
@media (min-width: 80rem) { .cabeza { --cabeza-ico: 272px; } }
.cabeza__icono { --ico: var(--cabeza-ico); width: var(--ico); height: var(--ico); justify-self: end; margin-block: calc(var(--ico) * -.1); filter: drop-shadow(0 0 36px rgb(190 150 255 / .3)); }
.cabeza--guia .cabeza__icono, .cabeza--clara .cabeza__icono { filter: drop-shadow(0 14px 22px rgb(58 17 98 / .14)); }
@media (min-width: 64rem) {
  .cabeza__rejilla > :last-child:has(.cabeza__icono) { position: relative; align-self: stretch; min-height: 8rem; min-width: calc(var(--cabeza-ico) * .8); }
  .cabeza__rejilla > :last-child .cabeza__icono { position: absolute; top: 0; bottom: 0; right: 0; width: auto; max-width: none; height: min(var(--ico), 140%); aspect-ratio: 1; margin: auto 0; }
}
@media (max-width: 63.99rem) {
  .cabeza__rejilla:has(> :last-child .cabeza__icono) { display: block; }
  .cabeza__rejilla:has(> :last-child .cabeza__icono) > :first-child::before { content: ""; float: right; width: calc(var(--cabeza-ico) * .78); height: calc(var(--cabeza-ico) * .82); margin: 0 0 var(--e-2) var(--e-3); }
  .cabeza__rejilla:has(> :last-child .cabeza__icono) > :first-child > .antetitulo { display: block; }   /* en bloque, el antetítulo rodea el icono en vez de saltar debajo */
  .cabeza__rejilla > :last-child:has(.cabeza__icono) { position: absolute; top: 0; right: 0; display: block; margin: 0; pointer-events: none; }
  .cabeza__rejilla > :last-child .cabeza__icono { display: block; max-width: none; margin: calc(var(--ico) * -.1) calc(var(--ico) * -.1) 0 0; }
}
.cabeza--tema { padding-bottom: clamp(2.2rem, 1.4rem + 2.6vw, 3.4rem); }
.cabeza--calculadora { padding-bottom: clamp(5rem, 3rem + 5vw, 7rem); }
/* Algo que se monta sobre el borde inferior de la cabecera (barra de iconos, calculadora…) */
.solapa { position: relative; z-index: 5; margin-top: clamp(-5.6rem, -3rem - 2.8vw, -3.6rem); }
/* Ondas neón al pie (SVG de partials/ondas.php) */
.cabeza__ondas { position: absolute; z-index: 1; left: 0; bottom: 0; width: 100%; height: clamp(140px, 19vw, 290px); pointer-events: none; }
.cabeza--tema .cabeza__ondas, .cabeza--calculadora .cabeza__ondas { height: clamp(90px, 12vw, 180px); opacity: .85; }

/* ---------- 13. Franjas (secciones a todo lo ancho) ----------
   .franja (blanca) · --lila (lila clara) · --oscura (morada oscura, texto blanco) · --caja (lila con esquinas, dentro del contenedor) */
.franja { position: relative; padding-block: var(--seccion); isolation: isolate; }
.franja--lila { background: var(--lila-50); }
.franja--oscura { --franja-fondo: none; color: #fff; overflow: hidden; background: var(--franja-fondo) center / cover no-repeat, radial-gradient(40rem 20rem at 0% 0%, rgb(91 33 214 / .35), transparent 70%), radial-gradient(36rem 18rem at 100% 100%, rgb(147 54 254 / .25), transparent 70%), var(--franja); }
.franja--oscura :is(h2, h3, .titular) { color: #fff; }
.franja--oscura .entradilla { color: rgb(255 255 255 / .86); }
.franja--oscura a:not(.boton):not([class*="tarjeta"]) { color: var(--turquesa); }
.franja__caja { position: relative; overflow: hidden; isolation: isolate; border-radius: var(--r-4); padding: clamp(1.6rem, 1rem + 2.4vw, 2.6rem) clamp(1.4rem, .8rem + 3vw, 3.4rem); background: linear-gradient(100deg, #f5eefe 0%, #eee3fd 55%, #dcc6fb 100%); }

/* ---------- 14. Barra de iconos 3D (calculadoras a un clic) ----------
   <ul class="barra-iconos"><li><a class="barra-iconos__item" href>…ico3d… Nombre <span class="barra-iconos__ir">→</span></a></li>…</ul> */
.barra-iconos { display: grid; grid-template-columns: repeat(3, 1fr); margin: 0; padding: .25rem; list-style: none; background: #fff; border-radius: var(--r-3); box-shadow: var(--s-barra); border: 1px solid var(--borde); }
.barra-iconos > li { min-width: 0; }
.barra-iconos > li:nth-child(3n+2), .barra-iconos > li:nth-child(3n+3) { border-left: 1px solid var(--borde); }
.barra-iconos > li:nth-child(n+4) { border-top: 1px solid var(--borde); }
.barra-iconos__item { display: grid; grid-template-columns: 1fr; justify-items: center; text-align: center; row-gap: .45rem; align-items: center; height: 100%; padding: .9rem .35rem .75rem; border-radius: 14px; text-decoration: none; color: var(--tinta); font-weight: 800; font-size: 1rem; line-height: 1.2; letter-spacing: -.01em; transition: background-color var(--transicion); }
.barra-iconos__item:hover { background: var(--lila-50); color: var(--tinta); }
.barra-iconos__item .ico3d { --ico: 52px; transition: transform .25s ease; }
.barra-iconos__item:hover .ico3d { transform: translateY(-3px) scale(1.04); }
.barra-iconos__ir { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--lila-100); color: var(--morado); }
.barra-iconos__ir .icono { width: 15px; height: 15px; stroke-width: 2.3; }
@media (min-width: 74rem) {
  .barra-iconos { grid-template-columns: repeat(6, 1fr); padding: .4rem; }
  .barra-iconos > li { border-left: 0 !important; border-top: 0 !important; }
  .barra-iconos > li + li { border-left: 1px solid var(--borde) !important; }
  .barra-iconos__item { grid-template-columns: auto 1fr; grid-template-rows: auto auto; justify-items: start; text-align: left; column-gap: .85rem; row-gap: .5rem; padding: 1.05rem 1.1rem .9rem; font-size: 1.02rem; }
  .barra-iconos__item .ico3d { --ico: 64px; }
  .barra-iconos__item .ico3d-pic { grid-row: 1 / span 2; }
  .barra-iconos__ir { grid-column: 2; width: 30px; height: 30px; }
}
.barra-iconos__mas { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem .5rem; margin-top: 1rem; font-size: 1rem; }
.barra-iconos__mas b { font-weight: 800; margin-right: .35rem; }
.barra-iconos__mas .enlace-fuerte { margin-left: auto; }

/* ---------- 15. Tarjetas ----------
   .tarjeta-art            artículo/guía: foto + antetítulo + título + resumen + meta (autor · fecha)
     --grande              foto a sangre con el texto encima (guía destacada)
     --fila                horizontal: foto pequeña | texto | círculo con flecha (listas de «Ideas»)
   .tarjeta-herr           herramienta/calculadora: icono 3D + nombre + texto corto + flecha
   .tarjeta-comp           comparativa: foto de fondo + título + dato + «Ver comparativa»
   .tarjeta-obj            objetivo: foto + pastilla + título con icono + guía + texto + botón
   Toda la tarjeta es clicable con un solo <a> (el título) que se estira con ::after,
   o con la tarjeta entera dentro de <a> (variantes --grande y --fila). */
.foto { display: block; overflow: hidden; background: var(--lila-50); }
.foto img { width: 100%; height: 100%; object-fit: cover; }
.autor-mini { display: inline-flex; align-items: center; gap: .45rem; font-size: 1rem; font-weight: 600; color: var(--tinta-2); }
.avatar { flex: none; width: 28px; height: 28px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 2px var(--lila-100); background: var(--lila-100); }
.sobre-oscuro .avatar, .tarjeta-art--grande .avatar { box-shadow: 0 0 0 2px rgb(255 255 255 / .9); }

.tarjeta-art { position: relative; display: flex; flex-direction: column; border-radius: var(--r-3); overflow: hidden; background: #fff; border: 1px solid var(--borde); box-shadow: var(--s-1); transition: transform .25s ease, box-shadow .25s ease; }
.tarjeta-art:hover { transform: translateY(-4px); box-shadow: var(--s-2); }
.tarjeta-art__foto { aspect-ratio: 16 / 10; }
.tarjeta-art__cuerpo { display: flex; flex-direction: column; gap: .45rem; flex: 1; padding: 1.1rem 1.25rem 1.25rem; }
.tarjeta-art__titulo { margin: 0; font-size: 1.15rem; line-height: 1.22; letter-spacing: -.02em; }
.tarjeta-art__titulo a { color: var(--tinta); text-decoration: none; }
.tarjeta-art__titulo a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.tarjeta-art:hover .tarjeta-art__titulo a { color: var(--morado); }
.tarjeta-art__texto { margin: 0; font-size: 1rem; line-height: 1.45; color: var(--tinta-2); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.tarjeta-art__meta { margin-top: auto; padding-top: .35rem; }
.tarjeta-art .antetitulo { margin: 0; }
/* --grande: foto a sangre */
a.tarjeta-art--grande, .tarjeta-art--grande { justify-content: space-between; min-height: 430px; color: #fff; text-decoration: none; border: 0; box-shadow: var(--s-2); isolation: isolate; }
.tarjeta-art--grande .tarjeta-art__foto { position: absolute; inset: 0; z-index: -2; aspect-ratio: auto; }
.tarjeta-art--grande .tarjeta-art__foto img { transition: transform .8s ease; }
.tarjeta-art--grande:hover .tarjeta-art__foto img { transform: scale(1.04); }
.tarjeta-art--grande::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgb(20 4 52 / .08) 0%, rgb(20 4 52 / .15) 35%, rgb(20 4 52 / .8) 64%, rgb(20 4 52 / .95) 100%); }
.tarjeta-art--grande .tarjeta-art__arriba { display: flex; justify-content: space-between; align-items: flex-start; gap: .5rem; padding: 1.1rem 1.2rem 0; }
.tarjeta-art--grande .tarjeta-art__cuerpo { flex: none; padding: 1.4rem 1.5rem 1.5rem; gap: .55rem; }
.tarjeta-art--grande .tarjeta-art__titulo { color: #fff; font-size: clamp(1.5rem, 1.05rem + 1.3vw, 2.3rem); line-height: 1.06; }
.tarjeta-art--grande .tarjeta-art__texto { color: rgb(255 255 255 / .9); font-size: 1rem; -webkit-line-clamp: 4; max-width: 32rem; }
.tarjeta-art--grande .tarjeta-art__pie { margin-top: .8rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.tarjeta-art--grande .autor-mini { color: #fff; font-size: 1rem; font-weight: 700; }
.tarjeta-art__leer { display: inline-flex; align-items: center; gap: .45rem; font-weight: 800; }
.tarjeta-art__fecha { padding: .25rem .6rem; border-radius: var(--r-redondo); background: rgb(255 255 255 / .92); color: var(--tinta); font-size: 1rem; font-weight: 700; box-shadow: var(--s-1); }
/* --fila: horizontal */
.lista-filas { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; }
.lista-filas > li + li { border-top: 1px solid var(--borde); }
a.tarjeta-art--fila, .tarjeta-art--fila { display: grid; grid-template-columns: 112px 1fr; align-items: center; gap: .9rem; padding: .85rem 0; border: 0; border-radius: 0; background: none; box-shadow: none; text-decoration: none; color: var(--tinta); }
.tarjeta-art--fila:hover { transform: none; box-shadow: none; }
.tarjeta-art--fila .tarjeta-art__foto { aspect-ratio: 16 / 9.4; border-radius: var(--r-2); box-shadow: var(--s-1); }
.tarjeta-art--fila .tarjeta-art__cuerpo { padding: 0; gap: .25rem; }
.tarjeta-art--fila .tarjeta-art__titulo { font-size: 1rem; line-height: 1.25; }
.tarjeta-art--fila:hover .tarjeta-art__titulo { color: var(--morado); }
.tarjeta-art--fila .tarjeta-art__texto { display: none; font-size: 1rem; -webkit-line-clamp: 2; }
.tarjeta-art--fila .circulo-flecha--claro { display: none; }
@media (min-width: 42rem) {
  a.tarjeta-art--fila, .tarjeta-art--fila { grid-template-columns: 200px 1fr auto; gap: 1.2rem; padding: .95rem .2rem; }
  .tarjeta-art--fila .tarjeta-art__titulo { font-size: 1.12rem; }
  .tarjeta-art--fila .tarjeta-art__texto { display: -webkit-box; }
  .tarjeta-art--fila .circulo-flecha--claro { display: grid; }
}

.tarjeta-herr { position: relative; display: grid; grid-template-columns: auto 1fr auto; gap: .9rem; align-items: center; padding: 1rem 1.1rem; border-radius: var(--r-3); background: #fff; border: 1px solid var(--borde); box-shadow: var(--s-1); color: var(--tinta); text-decoration: none; transition: transform .25s ease, box-shadow .25s ease, background-color .2s ease; }
.tarjeta-herr:hover { transform: translateY(-3px); box-shadow: var(--s-2); color: var(--tinta); }
.tarjeta-herr .ico3d { --ico: 52px; }
.tarjeta-herr__nombre { display: block; font-weight: 800; font-size: 1.02rem; line-height: 1.2; letter-spacing: -.01em; }
.tarjeta-herr__texto { display: block; margin-top: .2rem; font-size: 1rem; line-height: 1.4; color: var(--tinta-2); font-weight: 500; }
.tarjeta-herr .pastilla { margin-left: .35rem; vertical-align: middle; }

.tarjeta-comp { display: flex; flex-direction: column; height: 100%; border-radius: var(--r-3); overflow: hidden; background: #fff; color: var(--tinta); text-decoration: none; box-shadow: var(--s-3); transition: transform .25s ease; }
.tarjeta-comp:hover { transform: translateY(-5px); color: var(--tinta); }
.tarjeta-comp__foto { position: relative; flex: 1; min-height: 250px; padding: 1.4rem 1.5rem 1.2rem; display: flex; flex-direction: column; align-items: flex-start; isolation: isolate; }
.tarjeta-comp__foto > picture img, .tarjeta-comp__foto > img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: 85% 55%; }
.tarjeta-comp__foto::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgb(255 255 255 / .9) 0%, rgb(255 255 255 / .35) 45%, rgb(255 255 255 / 0) 60%), linear-gradient(0deg, rgb(255 255 255 / .97) 0%, rgb(255 255 255 / .8) 24%, rgb(255 255 255 / 0) 42%); }
.tarjeta-comp__titulo { margin: 0; font-size: clamp(1.55rem, 1.2rem + .9vw, 1.95rem); line-height: 1.04; max-width: 11ch; color: var(--tinta); }
.tarjeta-comp__dato { margin-top: .55rem; padding: .22rem .6rem; border-radius: var(--r-redondo); background: var(--lila-100); color: var(--etiqueta); font-size: 1rem; font-weight: 800; }
.tarjeta-comp__texto { margin: auto 0 0; padding-top: 1rem; max-width: 22rem; font-size: 1rem; line-height: 1.45; font-weight: 500; }
.tarjeta-comp__ir { display: flex; align-items: center; justify-content: center; gap: .45rem; padding: 1rem; background: var(--lila-50); border-top: 1px solid var(--borde); font-weight: 800; color: var(--morado); }
@media (min-width: 42rem) { .tarjeta-comp__foto { min-height: 215px; } .tarjeta-comp__foto::after { background: linear-gradient(90deg, rgb(255 255 255 / .94) 0%, rgb(255 255 255 / .7) 36%, rgb(255 255 255 / 0) 60%), linear-gradient(0deg, rgb(255 255 255 / .97) 0%, rgb(255 255 255 / .9) 32%, rgb(255 255 255 / 0) 58%); } }

.tarjeta-obj { display: flex; flex-direction: column; border-radius: var(--r-4); overflow: hidden; background: #fff; border: 1px solid var(--borde); box-shadow: var(--s-1); transition: transform .25s ease, box-shadow .25s ease; scroll-margin-top: calc(var(--cabecera-alto) + 1rem); }
.tarjeta-obj:hover { transform: translateY(-4px); box-shadow: var(--s-2); }
.tarjeta-obj__foto { position: relative; aspect-ratio: 16 / 8.4; }
.tarjeta-obj__foto .pastilla { position: absolute; left: 1rem; top: 1rem; z-index: 1; }
.tarjeta-obj__cuerpo { display: flex; flex-direction: column; gap: .7rem; padding: 1.25rem 1.3rem 1.35rem; flex: 1; }
.tarjeta-obj__titulo { display: flex; align-items: center; gap: .7rem; margin: 0; font-size: 1.35rem; letter-spacing: -.03em; }
.tarjeta-obj__titulo .icono { width: 34px; height: 34px; color: var(--icono); }
.tarjeta-obj__guia { display: inline-flex; align-items: center; gap: .4rem; font-weight: 800; color: var(--morado); text-decoration: none; }
.tarjeta-obj__guia:hover { text-decoration: underline; text-underline-offset: 3px; }
.tarjeta-obj__texto { margin: 0; color: var(--tinta-2); font-size: 1rem; }
.tarjeta-obj .boton { margin-top: auto; width: 100%; justify-content: space-between; white-space: normal; text-align: left; }
.tarjeta-obj .boton > span { display: inline-flex; align-items: center; gap: .55rem; }
@media (min-width: 42rem) { .tarjeta-obj__titulo { font-size: 1.5rem; } }

/* ---------- 16. Bloque Pro ----------
   Banda morada con pastilla PRO, oferta «Gratis durante el lanzamiento» y contador de plazas.
   <section class="bloque-pro"> .bloque-pro__texto · .bloque-pro__plazas (+ .barra-progreso) · .bloque-pro__accion
   El contador sale de la BD (promociones, migración 0004) y lo refresca /api/cuenta/estado. */
.bloque-pro { position: relative; display: grid; gap: 1rem 2rem; align-items: center; padding: 1.4rem clamp(1.2rem, .8rem + 2vw, 2.2rem); border-radius: var(--r-4); color: #fff; overflow: hidden; isolation: isolate;
  background: radial-gradient(30rem 14rem at 100% 0%, rgb(147 54 254 / .5), transparent 70%), linear-gradient(100deg, var(--cab-1), var(--cab-2) 55%, #4a1890); box-shadow: var(--s-2); }
.bloque-pro__arriba { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .75rem; margin: 0 0 .4rem; }
.bloque-pro__oferta { font-weight: 800; font-size: 1rem; color: var(--turquesa); }
.bloque-pro__titulo { margin: 0; font-size: clamp(1.3rem, 1rem + 1vw, 1.75rem); line-height: 1.1; color: #fff; }
.bloque-pro__texto { margin: .45rem 0 0; color: rgb(255 255 255 / .86); font-size: 1rem; max-width: 40rem; }
.bloque-pro__plazas { display: grid; gap: .45rem; font-size: 1rem; font-weight: 700; color: rgb(255 255 255 / .92); }
.bloque-pro__plazas b { color: #fff; font-size: 1.05rem; }
.bloque-pro__nota { margin: .35rem 0 0; font-size: 1rem; color: rgb(255 255 255 / .7); }
.barra-progreso { display: block; height: 8px; border-radius: 99px; background: rgb(255 255 255 / .18); overflow: hidden; }
.barra-progreso > span { display: block; height: 100%; width: var(--progreso, 0%); border-radius: inherit; background: linear-gradient(90deg, var(--turquesa-2), var(--turquesa)); transition: width 1s ease; }
@media (min-width: 56rem) { .bloque-pro { grid-template-columns: minmax(0, 1.5fr) minmax(14rem, .8fr) auto; } }

/* ---------- 17. Bloque de cuenta («Guarda tu camino») ----------
   .bloque-cuenta (caja lila con imagen a la derecha) > texto + .panel-escenarios (lista de ejemplo) */
.bloque-cuenta { position: relative; display: grid; gap: clamp(1rem, .5rem + 2vw, 2.5rem); align-items: center; padding: clamp(1.6rem, 1rem + 2.4vw, 2.6rem) clamp(1.4rem, .8rem + 3vw, 3.4rem); border-radius: var(--r-4); overflow: hidden; isolation: isolate; background: linear-gradient(100deg, #f5eefe 0%, #eee3fd 55%, #dcc6fb 100%); }
.bloque-cuenta__fondo { display: none; }
.bloque-cuenta__titulo { margin: 0; font-size: clamp(1.9rem, 1.2rem + 1.9vw, 2.65rem); line-height: 1.02; }
.bloque-cuenta__titulo span { display: block; color: var(--morado); }
.bloque-cuenta__texto { margin: .8rem 0 0; font-size: 1.05rem; color: var(--tinta-2); max-width: 30rem; }
.bloque-cuenta__botones { margin-top: 1.3rem; display: flex; flex-wrap: wrap; gap: .7rem; }
.bloque-cuenta__nota { margin: .8rem 0 0; font-size: 1rem; color: var(--tinta-2); }
@media (max-width: 41.99rem) { .bloque-cuenta__botones .boton { flex: 1 1 100%; } }
@media (min-width: 64rem) {
  .bloque-cuenta { grid-template-columns: 1.2fr 1fr .5fr; padding-right: 0; }
  .bloque-cuenta__fondo { display: block; position: absolute; z-index: -1; top: 0; right: 0; bottom: 0; width: 40%; -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 38%); mask-image: linear-gradient(90deg, transparent 0%, #000 38%); }
  .bloque-cuenta__fondo img { width: 100%; height: 100%; object-fit: cover; object-position: 100% 60%; }
}
.panel-escenarios { position: relative; z-index: 1; background: #fff; border-radius: var(--r-3); padding: 1.1rem 1.1rem 1rem; box-shadow: var(--s-2), 0 0 0 1px var(--borde); }
.panel-escenarios__cabeza { display: flex; align-items: center; gap: .6rem; font-weight: 800; font-size: 1.08rem; margin: .1rem .2rem .8rem; }
.panel-escenarios__cabeza .ico3d { --ico: 32px; }
.panel-escenarios__cabeza small { margin-left: auto; font-size: 1rem; font-weight: 700; color: var(--tinta-2); }
.panel-escenarios ul { margin: 0; padding: 0; list-style: none; display: grid; gap: .55rem; }
.panel-escenarios li { display: grid; grid-template-columns: 30px 1fr auto; align-items: center; gap: .75rem; padding: .7rem .8rem; border-radius: var(--r-2); border: 1px solid var(--borde); background: #fff; box-shadow: 0 1px 2px rgb(27 11 62 / .04); font-weight: 700; font-size: 1rem; }
.panel-escenarios li .ico3d { --ico: 30px; }
.panel-escenarios li small { display: none; font-size: 1rem; color: var(--tinta-2); font-weight: 600; }
@media (min-width: 42rem) { .panel-escenarios li small { display: block; } }

/* ---------- 18. Índice lateral («En esta guía») ---------- */
.indice { font-size: var(--t-sm); }
.indice__titulo { margin: 0 0 var(--e-3); font: 800 1rem/1.3 var(--f); letter-spacing: .05em; text-transform: uppercase; color: var(--etiqueta); }
.indice ol { list-style: none; margin: 0; padding: 0; border-left: 2px solid var(--borde); }
.indice li { margin: 0; }
.indice a { display: block; margin-left: -2px; padding: .45em .5em .45em var(--e-4); border-left: 2px solid transparent; border-radius: 0 8px 8px 0; color: var(--tinta-2); text-decoration: none; line-height: 1.35; font-weight: 600; }
.indice a { min-height: 44px; display: flex; align-items: center; }   /* tocable de 44 px (antes 33) */
.indice a:hover { color: var(--morado); background: var(--lila-50); }
.indice a.is-activo, .indice a[aria-current="true"] { border-left-color: var(--morado); color: var(--morado); background: var(--lila-50); font-weight: 800; }
.indice-movil { margin: var(--e-5) 0; border: 1px solid var(--borde); border-radius: var(--r-2); background: #fff; box-shadow: var(--s-1); }
.indice-movil > summary { display: flex; justify-content: space-between; align-items: center; min-height: 3rem; padding: 0 var(--e-4); font-weight: 800; font-size: var(--t-sm); cursor: pointer; list-style: none; }
.indice-movil > summary::-webkit-details-marker { display: none; }
.indice-movil[open] > summary .icono { transform: rotate(180deg); }
.indice-movil .indice { padding: 0 var(--e-4) var(--e-4); }

/* ---------- 19. Tablas ---------- */
.tabla-scroll { position: relative; overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--borde); border-radius: var(--r-2); background: #fff; }
.tabla-scroll:focus-visible { outline-offset: 0; }
.tabla-scroll table { min-width: 34rem; }
.tabla-scroll.is-desliza { box-shadow: inset -18px 0 14px -14px rgb(42 10 94 / .28); }
th, td { padding: .75em .95em; text-align: left; vertical-align: top; border-bottom: 1px solid var(--borde); }
thead th { background: var(--lila-50); color: var(--tinta); font-size: var(--t-xs); font-weight: 800; letter-spacing: .02em; white-space: nowrap; }
tbody tr:hover { background: rgb(247 243 255 / .7); }
td { font-variant-numeric: tabular-nums; }
tbody tr:last-child > * { border-bottom: 0; }
caption { padding: var(--e-3) var(--e-4); text-align: left; font-weight: 800; font-size: var(--t-sm); caption-side: top; }
.tabla td.num, .tabla th.num, td.num { text-align: right; }
.tabla tr.is-destacada > * { background: var(--lila-50); }

/* ---------- 20. Hojas y paneles modales (<dialog class="hoja">) ----------
   Ventana centrada en escritorio y hoja que sube desde abajo en el móvil.
   Piezas: .hoja__cabeza (título + .hoja__cerrar) · .hoja__cuerpo · .hoja__pie */
dialog.hoja { width: min(100% - 2rem, 34rem); max-height: min(88vh, 46rem); margin: auto; padding: 0; border: 0; border-radius: var(--r-4); background: #fff; color: var(--tinta); box-shadow: var(--s-3); overflow: auto; }
dialog.hoja::backdrop { background: rgb(13 5 38 / .55); backdrop-filter: blur(3px); }
.hoja--ancha { width: min(100% - 2rem, 52rem) !important; }
.hoja__cabeza { position: sticky; top: 0; z-index: 1; display: flex; align-items: flex-start; gap: 1rem; padding: 1.2rem 1.3rem 1rem; background: #fff; border-bottom: 1px solid var(--borde); }
.hoja__cabeza h2 { margin: 0; font-size: 1.35rem; flex: 1; }
.hoja__cerrar { flex: none; margin-left: auto; }
.hoja__cuerpo { padding: 1.2rem 1.3rem; }
.hoja__pie { position: sticky; bottom: 0; display: flex; flex-wrap: wrap; gap: .6rem; justify-content: flex-end; padding: 1rem 1.3rem; background: #fff; border-top: 1px solid var(--borde); }
@media (max-width: 39.99rem) {
  dialog.hoja { width: 100%; max-width: none; max-height: 92vh; margin: auto 0 0; border-radius: var(--r-4) var(--r-4) 0 0; }
  dialog.hoja[open] { animation: subir 220ms ease-out; }
}

/* ---------- 21. Estados vacíos (sin escenarios, sin resultados, 404) ---------- */
.vacio { display: grid; justify-items: center; gap: .6rem; padding: clamp(2rem, 1.4rem + 3vw, 3.5rem) 1.25rem; border: 1.5px dashed var(--borde-campo); border-radius: var(--r-4); background: var(--lila-50); text-align: center; color: var(--tinta-2); }
.vacio .ico3d { --ico: 96px; margin-bottom: .3rem; }
.vacio__titulo { margin: 0; font-size: clamp(1.3rem, 1rem + 1vw, 1.7rem); color: var(--tinta); }
.vacio__texto { margin: 0; max-width: 34rem; }
.vacio__acciones { display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem; margin-top: .6rem; }
.vacio--grande { border: 0; background: none; }
.vacio .buscador-grande { width: 100%; margin-inline: auto; text-align: left; }
.error-pagina .titular--medio { margin: var(--e-6) 0 var(--e-4); }
.vacio__codigo { margin: 0; font: 800 clamp(4rem, 2.5rem + 7vw, 7.5rem)/.9 var(--f); letter-spacing: -.05em; color: var(--lila-200); }

/* ---------- 22. Pie (blanco, como la portada) ---------- */
.pie { padding: 2rem 0 1.2rem; border-top: 1px solid var(--borde); background: #fff; color: var(--tinta-2); font-size: 1rem; }
.pie__rejilla { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem 2rem; }
.pie__marca { grid-column: 1 / -1; }
.pie__marca img { width: 200px; height: auto; }
.pie__marca p { margin: .9rem 0 0; max-width: 24rem; }
.pie__titulo { margin: 0 0 .45rem; font: 800 1rem/1.2 var(--f); letter-spacing: -.01em; color: var(--titulo-pie); }
.pie ul { margin: 0; padding: 0; list-style: none; display: grid; gap: .2rem; }
.pie ul a { display: inline-block; padding: .15rem 0; color: var(--tinta-2); text-decoration: none; }
.pie ul a:hover { color: var(--morado); text-decoration: underline; }
.pie__idiomas { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; margin-top: 1.2rem; }
.pie__idiomas ul { display: flex; flex-wrap: wrap; gap: .5rem 1rem; }
.pie__idiomas [aria-current] { color: var(--tinta); font-weight: 700; }
.pie__final { margin-top: 1.4rem; padding-top: .9rem; border-top: 1px solid var(--borde); display: flex; justify-content: space-between; gap: .6rem 1.5rem; flex-wrap: wrap; font-size: 1rem; }
.pie__final p { margin: 0; }
.pie__cookies { padding: 0; border: 0; background: none; color: var(--tinta-2); font: inherit; text-decoration: underline; cursor: pointer; }
.pie__cookies:hover { color: var(--morado); }
@media (min-width: 48rem) { .pie__rejilla { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 64rem) {
  .pie__rejilla { grid-template-columns: 1.35fr 1fr 1fr 1fr .8fr; }
  .pie__marca { grid-column: auto; padding-right: 2rem; border-right: 1px solid var(--borde); }
  .pie__marca img { width: 232px; }
}

/* ---------- 23. Aviso de cookies (assets/js/analitica.js): Aceptar y Rechazar iguales ---------- */
.aviso-cookies { position: fixed; z-index: 70; left: var(--e-3); right: var(--e-3); bottom: var(--e-3); display: grid; gap: var(--e-3); max-width: 34rem; padding: 1.1rem 1.25rem; border: 1px solid var(--borde); border-radius: var(--r-3); background: #fff; box-shadow: var(--s-3); }
.aviso-cookies__texto { margin: 0; font-size: var(--t-sm); color: var(--tinta); }
.aviso-cookies__botones { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--e-2); }   /* Rechazar · Configurar · Aceptar, iguales */
.aviso-cookies__titulo { margin: 0; font-weight: 800; color: var(--tinta); }
.aviso-cookies__panel { display: grid; gap: var(--e-2); padding: var(--e-3); border-radius: var(--r-2); background: var(--lila-50); }
.aviso-cookies__casilla { display: flex; gap: .6rem; align-items: flex-start; min-height: 44px; font-size: var(--t-sm); cursor: pointer; }
.aviso-cookies__casilla input { width: 1.2rem; height: 1.2rem; margin-top: .15rem; flex: none; accent-color: var(--morado); }
.aviso-cookies__boton { min-height: 44px; }
@media (min-width: 40rem) { .aviso-cookies { left: var(--e-5); right: auto; bottom: var(--e-5); } }
@media (prefers-reduced-motion: no-preference) { .aviso-cookies { animation: aparecer 220ms ease-out; } }

/* ---------- 24. Movimiento ----------
   [data-aparece]: lo que empieza por debajo de la pantalla sube y aparece al llegar a él (ui.js le pone
   .por-aparecer y luego .visto; lo que ya se ve al cargar no se mueve, así no parpadea). Retardos: .retardo-1…4. */
@keyframes aparecer { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@keyframes subir { from { transform: translateY(40px); opacity: .4; } to { transform: none; opacity: 1; } }
@keyframes crecer { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes ondear { to { translate: -40px 6px; } }
.revelar { opacity: 0; transform: translateY(14px); transition: opacity 600ms ease, transform 600ms ease; }
.revelar.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
  .por-aparecer { opacity: 0; translate: 0 26px; transition: opacity .7s ease, translate .7s cubic-bezier(.2, .7, .2, 1); }
  .por-aparecer.visto { opacity: 1; translate: 0 0; }
  .retardo-1 { transition-delay: .08s !important; } .retardo-2 { transition-delay: .16s !important; }
  .retardo-3 { transition-delay: .25s !important; } .retardo-4 { transition-delay: .35s !important; }
  .cabeza__ondas .onda { animation: ondear 12s ease-in-out infinite alternate; }
  .cabeza__ondas .onda--2 { animation-duration: 16s; animation-direction: alternate-reverse; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; scroll-behavior: auto !important; }
  .revelar { opacity: 1; transform: none; }
}

/* ---------- 25. Impresión (base) ----------
   Fuera cabecera, pie, menús y adornos; texto negro sobre blanco; las cabeceras moradas pasan a blancas;
   los enlaces del texto llevan su dirección. Cada área añade lo suyo (informes de calculadora, analizador…). */
@media print {
  @page { margin: 16mm 14mm; }
  .cabecera, .pie, .menu-movil, .franja-mercados, .saltar, .aviso-dev, .aviso-cookies, .migas, .compartir, .boletin, .indice, .indice-movil, .cabeza__ondas, .barra-iconos, .bloque-pro, .bloque-cuenta, .no-imprimir, dialog { display: none !important; }
  body { background: #fff; color: #000; font-size: 11pt; }
  .cabeza, .franja--oscura, .franja--lila { background: none !important; color: #000 !important; padding-block: 0 8mm; }
  .cabeza :is(h1, h2, p, span), .franja--oscura :is(h2, h3, p) { color: #000 !important; text-shadow: none !important; }
  h1, h2, h3 { -webkit-text-stroke: 0; break-after: avoid; }
  .prosa a::after { content: " (" attr(href) ")"; font-size: 1em; color: #555; }
  .tarjeta-art, .tarjeta-herr, .tarjeta-comp, .tarjeta-obj, tr, img { break-inside: avoid; box-shadow: none !important; }
  .solo-imprimir { display: block !important; }
}
.solo-imprimir { display: none; }

/* Títulos de tarjeta que no son <h*> (span dentro de un <a>): mismo peso que los titulares */
.tarjeta-art__titulo, .tarjeta-comp__titulo, .tarjeta-obj__titulo, .bloque-pro__titulo { display: block; font-weight: 800; letter-spacing: -.03em; -webkit-text-stroke: .01em currentColor; text-wrap: balance; }
.tarjeta-obj__titulo { display: flex; }

/* ---------- 26. Texto largo (.prosa), cajas del texto, fuentes y preguntas ----------
   Lo que aún se usaba de antiguo/compartido.css, pasado a las variables nuevas (repaso final, 05-11-2026).
   Las guías lo afinan en guias.css (.guia .caja…, section.fuentes, .faq .preguntas__*); esto es lo de serie
   para el resto de páginas con texto (calculadoras, comparativas, temas, legales, analizador, portada). */
.prosa { font-size: var(--t-lg); line-height: 1.7; }
.prosa > * { max-width: var(--ancho-lectura); }
.prosa > :first-child { margin-top: 0; }
.prosa h2 { font-size: clamp(1.625rem, 1.3rem + 1.3vw, 2.25rem); margin: var(--e-7) 0 var(--e-4); }
.prosa h3 { font-size: clamp(1.25rem, 1.15rem + .6vw, 1.5rem); margin: var(--e-6) 0 var(--e-3); }
.prosa h4 { font-weight: 800; font-size: var(--t-lg); margin: var(--e-5) 0 var(--e-2); }
.prosa li { margin-bottom: var(--e-2); }
.prosa li::marker { color: var(--morado); font-weight: 800; }
.prosa strong { font-weight: 750; color: var(--tinta); }
.prosa blockquote { margin: var(--e-6) 0; padding: var(--e-2) 0 var(--e-2) var(--e-5); border-left: 4px solid var(--turquesa-2); font-weight: 600; font-size: var(--t-xl); line-height: 1.45; color: var(--tinta); }
.prosa figure { margin: var(--e-6) 0; }
.prosa figure img { border-radius: var(--r-2); }
.prosa figcaption { margin-top: var(--e-2); font-size: var(--t-sm); color: var(--tinta-2); }
.prosa code { padding: .1em .35em; border-radius: var(--r-1); background: var(--lila-50); font-size: 1em; }
.prosa table { font-size: var(--t-sm); }
.prosa .tabla-scroll, .prosa > table { margin: var(--e-6) 0; }
.prosa iframe { max-width: 100%; border: 0; border-radius: var(--r-2); }
.prosa .bloque, .prosa .ica, .prosa .pasos, .prosa .calc { max-width: none; }   /* bloques interactivos: a todo lo ancho */
.prosa sup a { text-decoration: none; font-weight: 800; padding: 0 .1em; }
/* Fuentes numeradas dentro del texto: <ol class="fuentes"> con <li id="fuente-N"> */
.prosa ol.fuentes { font-size: var(--t-sm); line-height: 1.55; color: var(--tinta-2); padding-left: 1.5em; }
.prosa ol.fuentes li { margin-bottom: var(--e-2); overflow-wrap: anywhere; scroll-margin-top: calc(var(--cabecera-alto) + 1rem); }
.prosa ol.fuentes li:target { background: var(--lila-100); border-radius: var(--r-1); }
.fuentes { margin-block: var(--e-6); font-size: var(--t-sm); }
.fuentes h2 { font-size: var(--t-xl); }
.fuentes ol { color: var(--tinta-2); }
.fuentes li { margin-bottom: var(--e-2); overflow-wrap: anywhere; }
.faq { margin-block: var(--e-7); max-width: var(--ancho-lectura); }
.faq h2 { margin-bottom: var(--e-5); }
.aviso-legal { margin: var(--e-6) 0; padding-top: var(--e-4); border-top: 1px solid var(--borde); font-size: var(--t-sm); color: var(--tinta-2); }
@media (min-width: 64rem) { .indice-movil { display: none; } }

/* Cajas del texto (las guías las afinan en guias.css con .guia .caja…) */
.caja { position: relative; margin: var(--e-6) 0; padding: var(--e-5); border-radius: var(--r-3); background: #fff; border: 1px solid var(--borde); }
.caja > :last-child, .caja p:last-child { margin-bottom: 0; }
.caja ul, .caja ol { margin-bottom: var(--e-2); }
.caja__titulo { display: flex; align-items: center; gap: var(--e-2); margin: 0 0 var(--e-3); font: 800 var(--t-xs)/1.3 var(--f); letter-spacing: .08em; text-transform: uppercase; color: var(--etiqueta); }
.caja__titulo .icono { width: 1.25rem; height: 1.25rem; }
.caja--clave { background: var(--lila-50); border-color: var(--lila-100); }
.caja--clave .caja__titulo { color: var(--morado); }
.caja--clave ol, .caja--clave ul { list-style: none; padding: 0; margin: 0; counter-reset: clave; display: grid; gap: var(--e-3); }
.caja--clave li { position: relative; padding-left: 2.25rem; counter-increment: clave; }
.caja--clave li::before { content: counter(clave); position: absolute; left: 0; top: .05em; width: 1.5rem; height: 1.5rem; border-radius: 50%; background: var(--morado); color: #fff; font: 800 1rem/1.5rem var(--f); text-align: center; }
.caja--dato { display: grid; gap: var(--e-2); border-left: 5px solid var(--morado-vivo); border-radius: 6px var(--r-3) var(--r-3) 6px; }
.caja--dato .caja__cifra { margin: 0; font: 800 var(--t-cifra)/1 var(--f); letter-spacing: -.04em; color: var(--morado); }
.caja--dato .caja__texto { margin: 0; font-size: var(--t-base); }
.caja--dato .caja__fuente { margin: 0; font-size: var(--t-sm); color: var(--tinta-2); }
.caja--ejemplo { background: var(--lila-50); border-color: var(--lila-200); }
.caja--ejemplo .caja__titulo { color: var(--etiqueta); }
.caja--espana { border-left: 5px solid #c8102e; border-radius: 6px var(--r-3) var(--r-3) 6px; }
.caja--espana .caja__titulo { color: var(--tinta); }
.caja--espana .caja__titulo::before { content: ""; width: 1.25rem; height: .85rem; border-radius: 2px; background: linear-gradient(#aa151b 0 25%, #f1bf00 25% 75%, #aa151b 75%); flex: none; }
.caja--riesgo { background: #fff; border: 2px solid var(--morado); }      /* Joan 05-11: blanca con borde morado */
.caja--riesgo .caja__titulo { color: var(--morado); }
.caja--nota { background: var(--lila-50); border-color: var(--borde); }

/* Trampa para robots de los formularios (boletín, registro, planes, contacto): fuera de la vista */
.trampa { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ---------- 27. Zonas de toque de 44 px en pantallas táctiles y estrechas (repaso móvil final, 05-11-2026) ----------
   Medido por guion (planning/estilo-nuevo/final/movil.mjs): lo que quedaba por debajo de 44 × 44 px. */
.enlace-fuerte, .tarjeta-obj__guia { min-height: 44px; }
.cabeza__sellos { font-size: 1rem; }
@media (max-width: 63.99rem), (pointer: coarse) {
  .chip, a.pastilla { min-height: 44px; }
  .pie ul { gap: 0; }
  .pie ul a, .pie__final a, .pie__cookies { display: inline-flex; align-items: center; min-height: 44px; padding-block: 0; }
  /* Listas de enlaces (fuentes, «otras comparativas»…): cada enlace solo en su punto, de 44 px de alto */
  main li > a:only-child:not([class]), main th > a:only-child:not([class]), main td > a:only-child:not([class]), .ac-clausula__fuentes a { display: inline-flex; align-items: center; min-height: 44px; }
}

/* Joan (05-11-2026): ningún texto por debajo de 16 px (tampoco <small>) */
small { font-size: 1em; }

/* ── Menú en columnas por tema (Joan, 05-11: todas las calculadoras en 4 columnas). templates/partials/cabecera.php ── */
.cabecera__barra { position: relative; }
.menu__desplegable--columnas { position: static; }   /* el panel se coloca respecto a la barra de la cabecera, no al botón */
.menu__panel--columnas { left: 0; right: 0; top: calc(100% - .2rem); width: auto; max-width: 68rem; margin-inline: auto; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 .6rem; padding: .9rem; max-height: calc(100vh - var(--cabecera-alto) - 1.5rem); overflow-y: auto; overscroll-behavior: contain; }
.menu__col { display: flex; flex-direction: column; gap: .1rem; min-width: 0; }
.menu__col-titulo { margin: 0 0 .3rem; padding: .2rem .6rem .45rem; border-bottom: 1px solid var(--borde); font: 800 1rem/1.25 var(--f); color: var(--etiqueta); }
.menu__panel--columnas a { gap: .6rem; min-height: 44px; padding: .4rem .6rem; }
.menu__panel--columnas a > span { min-width: 0; overflow-wrap: anywhere; }
.menu__panel--columnas a span small { line-height: 1.3; }
.menu__panel--columnas .ico3d { flex: none; }
.menu__panel--columnas .menu__todas { grid-column: 1 / -1; margin-top: .5rem; }
.menu-movil__subtitulo { margin: .7rem 0 .1rem; padding: 0 .5rem; font: 800 1rem/1.3 var(--f); color: var(--etiqueta); }
.menu-movil__subtitulo:first-child { margin-top: 0; }
/* ---------- 28. Avisos flotantes (window.TIAviso, assets/js/ui.js) ----------
   La respuesta de un botón o de un cambio que pasa lejos de donde está la persona. En el móvil, abajo, a todo lo ancho
   y por encima del resumen fijo de la calculadora (html.con-calc-fijo); en el ordenador, arriba y centrado. */
.ti-avisos { position: fixed; z-index: 80; left: 50%; bottom: calc(1rem + env(safe-area-inset-bottom)); width: min(100% - 1.5rem, 34rem); transform: translate(-50%, 1rem); opacity: 0; pointer-events: none; transition: opacity var(--transicion), transform var(--transicion); }
.ti-avisos.is-visible { opacity: 1; transform: translate(-50%, 0); }
.ti-avisos:empty { display: none; }
.con-calc-fijo .ti-avisos { bottom: calc(76px + env(safe-area-inset-bottom)); }
.ti-aviso { display: flex; align-items: center; gap: .7rem; padding: .55rem .55rem .55rem .9rem; border-radius: var(--r-3); background: var(--tinta); color: #fff; box-shadow: var(--s-3); pointer-events: auto; font-size: 1rem; line-height: 1.4; }
.ti-aviso__ico { flex: none; display: inline-grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%; background: rgb(255 255 255 / .12); color: var(--turquesa); }
.ti-aviso--error .ti-aviso__ico { color: #ffb3c1; }
.ti-aviso--info .ti-aviso__ico { color: var(--lila-200); }
.ti-aviso__ico .icono { width: 1.15rem; height: 1.15rem; }
.ti-aviso__texto { flex: 1; margin: 0; overflow-wrap: anywhere; }
.ti-aviso__accion { flex: none; display: inline-flex; align-items: center; min-height: 44px; padding: 0 .85rem; border: 0; border-radius: var(--r-2); background: var(--turquesa); color: var(--tinta); font: 800 1rem/1.1 var(--f); text-decoration: none; cursor: pointer; }
.ti-aviso__accion:hover { background: #fff; text-decoration: none; }
.ti-aviso__cerrar { flex: none; display: inline-grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: var(--r-2); background: none; color: #fff; cursor: pointer; }
.ti-aviso__cerrar:hover { background: rgb(255 255 255 / .12); }
.ti-aviso__cerrar .icono { width: 1.2rem; height: 1.2rem; }
/* En el ordenador, arriba (bajo la cabecera): no tapa los botones de abajo ni «Sugerir una mejora» */
@media (min-width: 61.25rem) { .ti-avisos { top: calc(var(--cabecera-alto, 4rem) + 1.25rem); bottom: auto; transform: translate(-50%, -1rem); } }
/* En pantallas estrechas, el botón del aviso va debajo del texto (el texto no se estruja) */
@media (max-width: 39.99rem) {
  .ti-aviso { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "ico texto cerrar" ". accion accion"; row-gap: .1rem; }
  .ti-aviso__ico { grid-area: ico; } .ti-aviso__texto { grid-area: texto; } .ti-aviso__cerrar { grid-area: cerrar; align-self: start; }
  .ti-aviso__accion { grid-area: accion; justify-self: start; margin-bottom: .3rem; }
}
@media (prefers-reduced-motion: reduce) { .ti-avisos { transition: none; } }
@media print { .ti-avisos { display: none !important; } }