/* =====================================================================
 * ARAANT · catálogo con el sistema «Mercury» de la web pública
 * (public/sitio/, ver DESIGN.md). Última capa, después de gaceta.css:
 * redefine sus variables (que repintan en cascada todas las hojas
 * antiguas) y corrige los componentes que Gaceta pintaba con la tinta
 * como fondo. Gana especificidad con «html body:not(#_)».
 * ===================================================================== */

@font-face { font-family: "Inter"; src: url("/sitio/fuentes/inter.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Archivo"; src: url("/sitio/fuentes/archivo.woff2") format("woff2"); font-weight: 100 900; font-stretch: 62% 125%; font-display: swap; }

:root {
  color-scheme: dark;
  --onyx: #171721; --grafito: #1e1e2a; --obsidiana: #272735; --ivory: #ededf3; --ash: #c3c3cc; --cobalto: #5266eb; --cobalto-claro: #6476ef;

  --marfil: #171721; --marfil-2: #1b1b26; --papel: #1e1e2a;
  --tinta: #ededf3; --tinta-80: #c3c3cc; --tinta-55: rgba(237, 237, 243, 0.56);
  --trazo: rgba(237, 237, 243, 0.16); --trazo-suave: rgba(237, 237, 243, 0.09);
  --bosque: #ededf3; --bosque-fuerte: #ffffff; --bosque-tenue: #272735;
  --salvia: #c3c3cc; --salvia-tenue: #272735;
  --terracota: #5266eb; --terracota-fuerte: #6476ef; --terracota-tenue: rgba(82, 102, 235, 0.16);
  --ocre: #e2e3ed; --ocre-tenue: #272735;
  --almagre: #ededf3; --almagre-tenue: #2b2533;
  --noche: #101018;
  --sombra-flot: none; --sombra-minima: none; --sombra-xl: none; --sombra-s: none;
  --r-boton: 32px; --r-campo: 32px; --r-tarjeta: 12px; --r-grande: 12px; --r-pildora: 40px;
  --display-tipo: "Archivo", "Inter", system-ui, sans-serif;
  --texto-tipo: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --dato-tipo: "Inter", system-ui, sans-serif;
  --lp-sans: "Inter", system-ui, sans-serif;
}

/* --- Base y tipografía --------------------------------------------------- */
html, html body:not(#_) { background: var(--onyx) !important; color: var(--ivory) !important; }
html body:not(#_) { font-family: var(--texto-tipo) !important; font-feature-settings: "tnum" 0; }
html body:not(#_) h1, html body:not(#_) h2, html body:not(#_) h3, html body:not(#_) h4,
html body:not(#_) .detail__title, html body:not(#_) .lp-hero__titular, html body:not(#_) .acceso__frase, html body:not(#_) .cta-ayuda h2 {
  font-family: "Archivo", "Inter", system-ui, sans-serif !important; font-weight: 480 !important;
  font-stretch: 116%; letter-spacing: 0.01em !important; color: var(--ivory) !important;
}
html body:not(#_) h1 em, html body:not(#_) h2 em, html body:not(#_) h3 em, html body:not(#_) .lp-hero__titular em,
html body:not(#_) .acceso__frase em, html body:not(#_) .lp-cierre__grande em {
  font-family: inherit !important; font-style: normal !important; font-weight: inherit !important; color: var(--ash) !important;
}
html body:not(#_) p, html body:not(#_) li, html body:not(#_) dd, html body:not(#_) td { color: inherit; }
html body:not(#_) .lead, html body:not(#_) .section__header > p, html body:not(#_) .detail__lead { color: var(--ash) !important; }
html body:not(#_) a { color: inherit; }
html body:not(#_) main a:not(.btn):not([class*="card"]):not([class*="chip"]) { text-decoration-color: rgba(237, 237, 243, 0.4); }
html body:not(#_) ::selection { background: var(--ivory); color: var(--onyx); }
html body:not(#_) :focus-visible { outline: 2px solid var(--ivory) !important; outline-offset: 3px; }
html body:not(#_) code, html body:not(#_) kbd, html body:not(#_) [class*="cifra"], html body:not(#_) [class*="importe"] { font-variant-numeric: tabular-nums; }

/* --- Secciones: lo que en Gaceta era «oscuro» pasa a grafito ------------- */
html body:not(#_) .section--subtle, html body:not(#_) .section--alt { background: var(--grafito) !important; }
html body:not(#_) .section--oscura, html body:not(#_) .section--tinta, html body:not(#_) .cta-panel,
html body:not(#_) .ticker, html body:not(#_) .confianza, html body:not(#_) .eleg-cta, html body:not(#_) .section--cta {
  background: var(--grafito) !important; color: var(--ivory) !important; border: 1px solid var(--trazo);
}
html body:not(#_) .section--oscura *, html body:not(#_) .cta-panel *, html body:not(#_) .ticker * { border-color: var(--trazo); }

/* --- Botones: píldora; cobalto solo para la acción principal ------------- */
html body:not(#_) .btn, html body:not(#_) .savebtn, html body:not(#_) button.btn {
  border-radius: 32px !important; box-shadow: none !important; font-weight: 420 !important; letter-spacing: 0 !important;
  background: transparent !important; color: var(--ivory) !important; border: 1px solid var(--ivory) !important;
  transition: background-color 0.2s, color 0.2s, transform 0.15s;
}
html body:not(#_) .btn:hover, html body:not(#_) .savebtn:hover { background: var(--ivory) !important; color: var(--onyx) !important; }
html body:not(#_) .btn:active { transform: scale(0.98); }
html body:not(#_) .btn--primary, html body:not(#_) .btn--filled, html body:not(#_) .acceso__boton,
html body:not(#_) a.btn[href="/registro.php"], html body:not(#_) .eleg-cta .btn, html body:not(#_) button[type="submit"].btn {
  background: var(--cobalto) !important; color: #fff !important; border-color: var(--cobalto) !important;
}
html body:not(#_) .btn--primary:hover, html body:not(#_) .btn--filled:hover, html body:not(#_) .acceso__boton:hover,
html body:not(#_) a.btn[href="/registro.php"]:hover, html body:not(#_) button[type="submit"].btn:hover {
  background: var(--cobalto-claro) !important; color: #fff !important; border-color: var(--cobalto-claro) !important;
}
html body:not(#_) .btn--ghost { background: transparent !important; color: var(--ivory) !important; border-color: var(--ivory) !important; }

/* --- Tarjetas y superficies: valor, no sombra ---------------------------- */
html body:not(#_) [class*="card"], html body:not(#_) .factbox, html body:not(#_) .plan, html body:not(#_) .estudio,
html body:not(#_) .empty-state, html body:not(#_) .notice-banner, html body:not(#_) .minitabla, html body:not(#_) .auth-card,
html body:not(#_) .flow, html body:not(#_) .memoria__aviso, html body:not(#_) .memoria__datos {
  background-color: var(--grafito); border-color: var(--trazo) !important; box-shadow: none !important; color: var(--ivory);
}
html body:not(#_) .section--subtle [class*="card"], html body:not(#_) .section--subtle .factbox { background-color: var(--obsidiana); }
html body:not(#_) [class*="chip"], html body:not(#_) [class*="badge"], html body:not(#_) [class*="etiqueta"] { border-radius: 40px; }

/* --- Formularios: campos en píldora ------------------------------------- */
html body:not(#_) input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), html body:not(#_) select {
  background: transparent !important; color: var(--ivory) !important; border: 1px solid var(--trazo) !important;
  border-radius: 32px !important; box-shadow: none !important;
}
html body:not(#_) textarea { background: transparent !important; color: var(--ivory) !important; border: 1px solid var(--trazo) !important; border-radius: 12px !important; }
html body:not(#_) input::placeholder, html body:not(#_) textarea::placeholder { color: var(--ash) !important; opacity: 1; }
html body:not(#_) input:focus, html body:not(#_) select:focus, html body:not(#_) textarea:focus { border-color: var(--ivory) !important; outline: none; }
html body:not(#_) select option { background: var(--grafito); color: var(--ivory); }
html body:not(#_) input[type="checkbox"], html body:not(#_) input[type="radio"] { accent-color: var(--cobalto); }

/* --- Cabecera del catálogo: la barra de la web pública ------------------- */
html body:not(#_) .cabecera {
  background: rgba(23, 23, 33, 0.82) !important; -webkit-backdrop-filter: blur(20px) saturate(140%); backdrop-filter: blur(20px) saturate(140%);
  border-bottom: 1px solid var(--trazo) !important; box-shadow: none !important; color: var(--ivory) !important;
}
html body:not(#_) .cabecera a, html body:not(#_) .cabecera button { color: var(--ivory) !important; }
html body:not(#_) .nav__panel { background: var(--grafito) !important; border: 1px solid var(--trazo) !important; border-radius: 12px !important; box-shadow: none !important; }
html body:not(#_) .nav__panel a:hover { background: var(--obsidiana) !important; }
html body:not(#_) .nav__buscar, html body:not(#_) .nav__buscar input { background: rgba(237, 237, 243, 0.06) !important; border-radius: 40px !important; }
html body:not(#_) .nav__entrar.btn, html body:not(#_) .nav__actions .btn--filled { background: var(--cobalto) !important; color: #fff !important; border-color: var(--cobalto) !important; }

/* --- Pie: oscuro, como el de la web pública ------------------------------ */
html body:not(#_) .footer { background: var(--onyx) !important; color: var(--ash) !important; border-top: 1px solid var(--trazo) !important; }
html body:not(#_) .footer a { color: var(--ivory) !important; }
html body:not(#_) .footer__col-title { color: var(--ash) !important; font-family: var(--texto-tipo) !important; letter-spacing: 0.12em !important; text-transform: uppercase; font-size: 12px !important; font-weight: 480 !important; }
html body:not(#_) .footer__bottom { border-top: 1px solid var(--trazo) !important; color: var(--ash) !important; }

/* --- Tablas, filetes y migas ------------------------------------------- */
html body:not(#_) table, html body:not(#_) th, html body:not(#_) td { border-color: var(--trazo) !important; }
html body:not(#_) th { color: var(--ash) !important; background: transparent !important; }
html body:not(#_) hr { border-color: var(--trazo) !important; }
html body:not(#_) .crumbs, html body:not(#_) .crumbs a { color: var(--ash) !important; }
html body:not(#_) progress { accent-color: var(--ivory); }

/* --- Movimiento: entradas suaves al hacer scroll (mercury-mov.js) ------- */
.mov-listo [data-mov] { opacity: 0; transform: translateY(18px); transition: opacity 0.7s cubic-bezier(0.2, 0.7, 0.2, 1), transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1); }
.mov-listo [data-mov].is-visto { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .mov-listo [data-mov] { opacity: 1 !important; transform: none !important; transition: none !important; } }

/* --- Piezas con blanco o tinta fijos en las hojas por página ------------- */
html body:not(#_) .hp__ventana, html body:not(#_) .hp__chapa, html body:not(#_) .pf-ventana, html body:not(#_) .pf-cap,
html body:not(#_) .cat-item, html body:not(#_) .cat-filtros form, html body:not(#_) .cat-vacio, html body:not(#_) .eleg-hero .eleg,
html body:not(#_) .eleg-embudo__p, html body:not(#_) .eleg-como__pasos li, html body:not(#_) .fin-filtros, html body:not(#_) .fin-tabla__marco,
html body:not(#_) .acceso .prefill, html body:not(#_) .match-card, html body:not(#_) .eleg-item, html body:not(#_) .res,
html body:not(#_) .prov-lista li, html body:not(#_) .cccard, html body:not(#_) .seccard, html body:not(#_) .orgcard, html body:not(#_) .tipocard,
html body:not(#_) .artcard, html body:not(#_) .sector-bento__item, html body:not(#_) .sectorinfo__col, html body:not(#_) .filters,
html body:not(#_) .catalog__filters, html body:not(#_) .solicitar-barra, html body:not(#_) .eleg-resumen > div, html body:not(#_) .stats > *,
html body:not(#_) .statgrid > *, html body:not(#_) .confianza__cifras li {
  background: var(--grafito) !important; color: var(--ivory) !important; border-color: var(--trazo) !important; box-shadow: none !important;
}
html body:not(#_) .section--subtle .cat-item, html body:not(#_) .section--subtle .match-card, html body:not(#_) .section--subtle .artcard { background: var(--obsidiana) !important; }
html body:not(#_) main b, html body:not(#_) main strong { color: inherit; }
html body:not(#_) .cat-item__tit a, html body:not(#_) .match-card__title a, html body:not(#_) .artcard a { color: var(--ivory) !important; }
html body:not(#_) .cat-item__ir { color: var(--ivory) !important; border-color: var(--trazo) !important; background: transparent !important; }
html body:not(#_) .cat-chip, html body:not(#_) .eleg-filtros a { background: transparent !important; color: var(--ash) !important; border: 1px solid var(--trazo) !important; border-radius: 40px !important; }
html body:not(#_) .cat-chip.is-activo, html body:not(#_) .eleg-filtros a.is-active { background: var(--ivory) !important; color: var(--onyx) !important; border-color: var(--ivory) !important; }
html body:not(#_) .pager__n, html body:not(#_) .pager__salto { background: transparent !important; color: var(--ivory) !important; border: 1px solid var(--trazo) !important; border-radius: 40px !important; }
html body:not(#_) .pager__n--actual { background: var(--ivory) !important; color: var(--onyx) !important; border-color: var(--ivory) !important; }
html body:not(#_) .fin-selbar .btn--filled { background: var(--cobalto) !important; color: #fff !important; }
html body:not(#_) .pf-nav a:hover { color: var(--ivory) !important; }

/* Nombres de comunidad: la tipografía ancha no cabe en columnas estrechas. */
html body:not(#_) .prov-lista__tit, html body:not(#_) .provincias-indice a, html body:not(#_) .provincias-indice h2, html body:not(#_) .provincias-indice h3 {
  font-stretch: 100% !important; font-size: clamp(17px, 1.5vw, 22px) !important; line-height: 1.2 !important;
  word-break: normal !important; overflow-wrap: normal !important; hyphens: none !important;
}

/* Móvil: las tarjetas con títulos largos no deben ensanchar la página. */
html body:not(#_) .match-card, html body:not(#_) .cat-item { min-width: 0; max-width: 100%; }
html body:not(#_) .match-card *, html body:not(#_) .cat-item * { overflow-wrap: anywhere; min-width: 0; }
html body:not(#_) .chiprow { flex-wrap: wrap; }

/* --- Tercera pasada: paneles de financiación y etiquetas con tinte -------- */
html body:not(#_) .fin-mapa, html body:not(#_) .fin-panel, html body:not(#_) .fin-ficha, html body:not(#_) .fin-tabla__marco,
html body:not(#_) .req, html body:not(#_) .cmp-form__proy, html body:not(#_) .cmp-form__convs, html body:not(#_) .cmp-form__guardados a,
html body:not(#_) [class^="fin-"][class*="mapa"], html body:not(#_) [class^="fin-"][class*="grafico"] {
  background: var(--grafito) !important; color: var(--ivory) !important; border-color: var(--trazo) !important; box-shadow: none !important;
}
/* Etiquetas de ámbito y estado: monocromo, como en la web pública. */
html body:not(#_) .cat-amb, html body:not(#_) .cat-item__est, html body:not(#_) .eleg-como__pasos b {
  background: transparent !important; color: var(--ash) !important; border: 1px solid var(--trazo) !important; border-radius: 40px !important;
}
html body:not(#_) .check--cumple .check__ico { background: var(--ivory) !important; color: var(--onyx) !important; }
html body:not(#_) .fin-aviso, html body:not(#_) .fin-filtros { background: var(--grafito) !important; color: var(--ivory) !important; box-shadow: none !important; border: 1px solid var(--trazo) !important; }

/* --- Logo nuevo en el catálogo (el mismo de la web pública) ---------------- */
html body:not(#_) .logo-nuevo { display: inline-flex; align-items: center; gap: calc(var(--alto) * 0.42); color: var(--ivory); line-height: 1; }
html body:not(#_) .logo-nuevo__iso { width: calc(var(--alto) * 1.08); height: calc(var(--alto) * 1.08); flex: none; }
html body:not(#_) .logo-nuevo__iso path, html body:not(#_) .logo-nuevo__iso rect { stroke-dasharray: 1; stroke-dashoffset: 0; }
html body:not(#_) .logo-nuevo__txt { display: inline-flex; font-family: "Archivo", "Inter", sans-serif; font-stretch: 120%; font-weight: 500; font-size: calc(var(--alto) * 0.78); letter-spacing: 0.02em; color: var(--ivory); }
html body:not(#_) .logo-nuevo__txt > span { display: inline-block; }
@media (prefers-reduced-motion: no-preference) {
  html body:not(#_) .logo-nuevo__marco { animation: m-trazar 0.9s cubic-bezier(0.16, 1, 0.3, 1) both; }
  html body:not(#_) .logo-nuevo__a { animation: m-trazar 1s 0.15s cubic-bezier(0.16, 1, 0.3, 1) both; }
  html body:not(#_) .logo-nuevo__barra { animation: m-trazar 0.5s 0.85s cubic-bezier(0.16, 1, 0.3, 1) both; }
  html body:not(#_) .logo-nuevo__txt > span { animation: m-letra 0.6s calc(0.9s + var(--i) * 0.05s) cubic-bezier(0.16, 1, 0.3, 1) both; }
  html body:not(#_) a:hover > .logo-nuevo .logo-nuevo__a, html body:not(#_) .logo-nuevo:hover .logo-nuevo__a { animation: m-trazar 0.8s cubic-bezier(0.16, 1, 0.3, 1) both; }
}
@keyframes m-trazar { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes m-letra { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* --- Restos de color de Gaceta: urgencia, costes y ámbitos en monocromo ------- */
html body:not(#_) .chip--urgente { background: var(--ivory) !important; border-color: var(--ivory) !important; color: var(--onyx) !important; }
html body:not(#_) .eleg-item__plazo.apura { color: var(--ivory) !important; font-weight: 480; }
html body:not(#_) .fin-coste, html body:not(#_) [class*="fin-coste--"] { background: transparent !important; color: var(--ash) !important; border: 1px solid var(--trazo) !important; border-radius: 40px !important; }
html body:not(#_) [class*="cat-amb--"] { background: transparent !important; color: var(--ash) !important; border: 1px solid var(--trazo) !important; }
html body:not(#_) [class*="chip--"]:not(.chip--urgente) { background: transparent !important; color: var(--ash) !important; border-color: var(--trazo) !important; }
html body:not(#_) .cat-item__plazo b, html body:not(#_) .eleg-item__plazo b { font-family: "Archivo", "Inter", sans-serif !important; font-stretch: 112%; font-weight: 480 !important; letter-spacing: 0 !important; color: inherit !important; }
html body:not(#_) .cat-item__plazo.is-urgente { background: var(--ivory) !important; color: var(--onyx) !important; }
html body:not(#_) .cat-item__plazo.is-urgente span { color: var(--onyx) !important; }

/* --- Financiación y comprobador: últimas piezas con colores de Gaceta ------- */
html body:not(#_) .fin-carriles, html body:not(#_) .fin-ficha__dl div, html body:not(#_) .fin-ficha__cita, html body:not(#_) .req__cita,
html body:not(#_) .req__traza div, html body:not(#_) .req__fila, html body:not(#_) .eleg-como__leyenda, html body:not(#_) .fin-vacio {
  background: var(--grafito) !important; color: var(--ivory) !important; border-color: var(--trazo) !important; box-shadow: none !important;
}
html body:not(#_) .req__fila--no, html body:not(#_) .req__cita--sin { background: var(--obsidiana) !important; border-left-color: var(--ivory) !important; }
html body:not(#_) [class*="fin-tag"], html body:not(#_) .fin-plazo, html body:not(#_) .fin-score {
  background: transparent !important; color: var(--ash) !important; border: 1px solid var(--trazo) !important; border-radius: 40px !important;
}
html body:not(#_) .fin-tabla th { font-family: "Inter", sans-serif !important; color: var(--ash) !important; }
html body:not(#_) .fin-tabla tbody tr:hover, html body:not(#_) .fin-tabla tbody tr.is-elegida, html body:not(#_) .fin-resumen__lista a:hover { background: var(--obsidiana) !important; border-color: var(--trazo) !important; }
html body:not(#_) .fin-leyenda__p--neutro { background: var(--ash) !important; }
/* Cualquier texto en Open Runde que quede en hojas por página pasa a Inter. */
html body:not(#_) [class*="fin-"], html body:not(#_) [class*="cat-"], html body:not(#_) [class*="eleg-"], html body:not(#_) [class*="req"] { font-family: "Inter", system-ui, sans-serif; }

/* --- Gráfico por carriles (SVG) y estados de compatibilidad, en monocromo ---- */
html body:not(#_) .fin-carriles__banda--0, html body:not(#_) [class*="fin-carriles__banda"] { fill: #22222f !important; }
html body:not(#_) .fin-carriles__grid { stroke: rgba(237, 237, 243, 0.12) !important; }
html body:not(#_) .fin-carriles__eje, html body:not(#_) .fin-carriles__vacio { fill: var(--ash) !important; font-family: "Inter", sans-serif !important; }
html body:not(#_) .fin-carriles__nombre { fill: var(--ivory) !important; font-family: "Inter", sans-serif !important; font-weight: 480 !important; }
html body:not(#_) .fin-punto { fill: rgba(237, 237, 243, 0.55) !important; stroke: var(--onyx) !important; }
html body:not(#_) .fin-punto--si { fill: var(--ivory) !important; }
html body:not(#_) .fin-punto--neutro, html body:not(#_) .fin-punto--revisar { fill: rgba(237, 237, 243, 0.4) !important; }
html body:not(#_) .fin-punto--bases { stroke: var(--ivory) !important; }
html body:not(#_) .fin-punto__a:hover .fin-punto, html body:not(#_) .fin-punto__a:focus .fin-punto { fill: var(--cobalto) !important; }
html body:not(#_) .fin-leyenda__p--si { background: var(--ivory) !important; }
html body:not(#_) .fin-compat, html body:not(#_) .fin-esf, html body:not(#_) .fin-verificar, html body:not(#_) [class*="fin-compat--"] {
  background: transparent !important; color: var(--ash) !important; border: 1px solid var(--trazo) !important; border-radius: 40px !important;
}
html body:not(#_) .fin-compat--compatible { background: var(--ivory) !important; color: var(--onyx) !important; border-color: var(--ivory) !important; }
html body:not(#_) .fin-compat--revision { border-style: dashed !important; color: var(--ivory) !important; }
html body:not(#_) .check__ico { background: transparent !important; color: var(--ivory) !important; border: 1px solid var(--ash) !important; }
html body:not(#_) .check--cumple .check__ico { background: var(--ivory) !important; color: var(--onyx) !important; border-color: var(--ivory) !important; }
html body:not(#_) .check--verificar .check__ico { border-style: dashed !important; }
html body:not(#_) .check--no .check__ico { color: var(--ash) !important; }