/* =============================================================================
estilos.css — GastosDeCompra
-----------------------------------------------------------------------------
Las tipografías NO se cargan aquí con @import: eso encadena las peticiones
(HTML → CSS → @import → fuente) y retrasa el primer render, penalizando el
LCP. Se cargan con + en el
de cada página, que el navegador puede iniciar en paralelo.
============================================================================= */
:root {
--fondo: #f4f2ec;
--fondo-2: #efece3;
--superficie: #ffffff;
--superficie-2: #f5f3ed;
--tinta: #14201c;
--tinta-2: #46544e;
--tinta-3: #77837c;
--linea: #e2ddd1;
--linea-fuerte: #cabb9f;
--acento: #0d5a45;
--acento-2: #128a63;
--acento-texto: #0d5a45;
--acento-suave: #e2efe9;
--oro: #b98514;
--oro-suave: #f6ecd4;
--aviso: #8a5310;
--aviso-fondo: #fbf0dc;
--negativo: #a02f2f;
--negativo-suave: #f7e4e0;
--serif: "Spectral", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
--sans: "Public Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
--mono: ui-monospace, "SF Mono", "Cascadia Mono", "Roboto Mono", Menlo, Consolas, monospace;
--ancho: 72rem;
--ancho-texto: 42rem;
--radio: 14px;
--radio-s: 9px;
--sombra: 0 1px 2px rgba(20, 32, 28, .05), 0 12px 32px -22px rgba(20, 32, 28, .4);
--sombra-fuerte: 0 2px 4px rgba(20, 32, 28, .06), 0 24px 48px -28px rgba(20, 32, 28, .45);
}
@media (prefers-color-scheme: dark) {
:root {
--fondo: #0e1512;
--fondo-2: #0b110f;
--superficie: #16201c;
--superficie-2: #1c2723;
--tinta: #eef1ec;
--tinta-2: #aab5ad;
--tinta-3: #7d8a82;
--linea: #26322c;
--linea-fuerte: #3a4a41;
--acento: #34b491;
--acento-2: #34b491;
--acento-texto: #57c8a6;
--acento-suave: #163029;
--oro: #d8a53f;
--oro-suave: #2c2413;
--aviso: #e2ac63;
--aviso-fondo: #2a2013;
--negativo: #e58f8f;
--negativo-suave: #33201e;
--sombra: 0 1px 2px rgba(0,0,0,.4), 0 16px 40px -28px rgba(0,0,0,.8);
--sombra-fuerte: 0 2px 6px rgba(0,0,0,.5), 0 28px 56px -30px rgba(0,0,0,.9);
}
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; } }
body {
margin: 0;
background: var(--fondo);
color: var(--tinta);
font-family: var(--sans);
font-size: 17px;
line-height: 1.62;
text-wrap: pretty;
-webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 { font-family: var(--serif); font-weight: 600; line-height: 1.14; letter-spacing: -.015em; margin: 0 0 .5em; text-wrap: balance; }
h1 { font-size: clamp(2.1rem, 1.4rem + 3vw, 3.4rem); }
h2 { font-size: clamp(1.5rem, 1.15rem + 1.5vw, 2.1rem); margin-top: 1.6em; }
h3 { font-size: 1.22rem; margin-top: 1.7em; }
h4 { font-size: 1rem; font-family: var(--sans); font-weight: 700; margin-top: 1.4em; letter-spacing: 0; }
p, li { max-width: 46rem; }
a { color: var(--acento-texto); text-underline-offset: .2em; text-decoration-thickness: 1px; text-decoration-color: color-mix(in oklab, var(--acento-texto) 40%, transparent); }
a:hover { color: var(--tinta); text-decoration-color: currentColor; }
:focus-visible { outline: 2.5px solid var(--acento); outline-offset: 3px; border-radius: 4px; }
.contenedor { width: min(100% - 2.5rem, var(--ancho)); margin-inline: auto; }
.prosa { max-width: var(--ancho-texto); }
.prosa ul, .prosa ol { padding-left: 1.15rem; }
.prosa li { margin-bottom: .45em; }
.prosa li::marker { color: var(--acento-texto); }
.solo-lectores { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* --- Cabecera ------------------------------------------------------------- */
.saltar { position: absolute; left: -999px; top: 0; background: var(--acento); color: #fff; padding: .6rem 1rem; z-index: 100; border-radius: 0 0 var(--radio-s) 0; }
.saltar:focus { left: 0; top: 0; }
.cabecera { border-bottom: 1px solid var(--linea); background: color-mix(in oklab, var(--superficie) 82%, transparent); backdrop-filter: saturate(1.4) blur(12px); position: sticky; top: 0; z-index: 40; }
.cabecera::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: linear-gradient(90deg, var(--acento), var(--acento-2), var(--oro)); opacity: .9; }
.cabecera__fila { display: flex; align-items: center; gap: 1.5rem; min-height: 66px; }
.marca { display: flex; align-items: center; gap: .6rem; font-family: var(--serif); font-size: 1.16rem; font-weight: 600; color: var(--tinta); text-decoration: none; letter-spacing: -.02em; flex-shrink: 0; }
.marca .marca__ic { width: 40px; height: 40px; border-radius: 10px; background: linear-gradient(155deg, #0f4a3a, #0a2f25); color: var(--oro); display: grid; place-items: center; box-shadow: var(--sombra), inset 0 0 0 1px rgba(216,165,63,.35); }
.marca .marca__ic svg { width: 22px; height: 22px; }
.marca span em { font-style: normal; color: var(--acento-texto); }
.nav { display: flex; gap: .3rem; margin-left: auto; flex-wrap: wrap; }
.nav a { font-size: .93rem; color: var(--tinta-2); text-decoration: none; padding: .5rem .8rem; border-radius: 999px; transition: background .15s, color .15s; }
.nav a:hover { color: var(--tinta); background: var(--superficie-2); }
.nav a[aria-current="page"] { color: var(--acento-texto); background: var(--acento-suave); font-weight: 600; }
.nav__boton { display: none; background: var(--superficie); border: 1px solid var(--linea-fuerte); color: var(--tinta); border-radius: var(--radio-s); padding: .5rem .8rem; font: inherit; font-size: .9rem; margin-left: auto; cursor: pointer; }
@media (max-width: 760px) {
.nav__boton { display: block; }
.nav { display: none; width: 100%; flex-direction: column; gap: .15rem; margin: 0 0 .7rem; }
.nav.abierto { display: flex; }
.cabecera__fila { flex-wrap: wrap; }
.nav a { padding: .75rem .9rem; min-height: 44px; display: flex; align-items: center; border-radius: var(--radio-s); }
}
/* --- Estructura ----------------------------------------------------------- */
main { display: block; padding-bottom: 4.5rem; }
.bloque { padding-top: 2.6rem; }
.migas { font-size: .85rem; color: var(--tinta-3); padding-top: 1.2rem; }
.migas a { color: var(--tinta-2); text-decoration: none; }
.migas a:hover { color: var(--acento-texto); }
.migas ol { list-style: none; display: flex; flex-wrap: wrap; gap: .4rem; padding: 0; margin: 0; }
.migas li::after { content: "›"; margin-left: .4rem; color: var(--linea-fuerte); }
.migas li:last-child::after { content: ""; }
.entradilla { font-size: 1.2rem; line-height: 1.55; color: var(--tinta-2); max-width: var(--ancho-texto); }
.meta-fecha { display: inline-flex; align-items: center; gap: .5rem; font-size: .8rem; color: var(--tinta-2); font-family: var(--sans); background: var(--superficie); border: 1px solid var(--linea); padding: .35rem .75rem; border-radius: 999px; margin: 1.1rem 0 0; }
.meta-fecha::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--acento-2); box-shadow: 0 0 0 3px var(--acento-suave); }
.meta-fecha a { color: var(--acento-texto); }
/* --- Héroe ---------------------------------------------------------------- */
.hero { position: relative; margin-top: 1.4rem; padding: clamp(2rem, 1rem + 5vw, 4rem); border-radius: calc(var(--radio) + 8px); overflow: hidden;
background:
radial-gradient(120% 140% at 88% -10%, color-mix(in oklab, var(--acento-2) 26%, transparent), transparent 55%),
radial-gradient(90% 120% at 0% 110%, color-mix(in oklab, var(--oro) 16%, transparent), transparent 50%),
linear-gradient(160deg, var(--superficie), var(--superficie-2));
border: 1px solid var(--linea); box-shadow: var(--sombra-fuerte); }
.hero::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5;
background-image: radial-gradient(circle at 1px 1px, color-mix(in oklab, var(--tinta) 8%, transparent) 1px, transparent 0); background-size: 26px 26px;
-webkit-mask-image: linear-gradient(160deg, #000, transparent 60%); mask-image: linear-gradient(160deg, #000, transparent 60%); }
.hero > * { position: relative; z-index: 1; }
.hero h1 { max-width: 20ch; }
.hero .entradilla { max-width: 48ch; }
.hero .acciones { margin-top: 1.8rem; }
.pildora { display: inline-flex; align-items: center; gap: .5rem; font-size: .82rem; font-weight: 600; letter-spacing: .01em; color: var(--acento-texto); background: color-mix(in oklab, var(--acento-suave) 70%, var(--superficie)); border: 1px solid color-mix(in oklab, var(--acento) 22%, transparent); padding: .35rem .8rem .35rem .55rem; border-radius: 999px; }
.pildora svg { width: 15px; height: 15px; }
.hero__cifras { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1px; margin-top: 2.2rem; background: var(--linea); border: 1px solid var(--linea); border-radius: var(--radio); overflow: hidden; }
.hero__cifra { background: color-mix(in oklab, var(--superficie) 88%, transparent); padding: 1.1rem 1.2rem; }
.hero__cifra b { display: block; font-family: var(--mono); font-size: 1.9rem; font-weight: 600; letter-spacing: -.04em; color: var(--acento-texto); font-variant-numeric: tabular-nums; line-height: 1; }
.hero__cifra span { display: block; font-size: .82rem; color: var(--tinta-2); margin-top: .4rem; }
/* --- Cabecera de sección -------------------------------------------------- */
.seccion-tit { display: flex; align-items: baseline; gap: .9rem; flex-wrap: wrap; }
.seccion-tit h2 { margin: 0; }
.seccion-tit .n { font-family: var(--mono); font-size: .85rem; color: var(--tinta-3); border: 1px solid var(--linea-fuerte); border-radius: 999px; padding: .1rem .6rem; }
/* --- Tarjetas y rejillas -------------------------------------------------- */
.rejilla { display: grid; gap: 1.1rem; grid-template-columns: repeat(auto-fill, minmax(265px, 1fr)); margin-top: 1.5rem; }
.rejilla--2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.tarjeta { position: relative; background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--radio); padding: 1.4rem; display: flex; flex-direction: column; gap: .5rem; box-shadow: var(--sombra); transition: transform .16s, box-shadow .16s, border-color .16s; }
a.tarjeta { text-decoration: none; color: inherit; }
a.tarjeta:hover { transform: translateY(-3px); box-shadow: var(--sombra-fuerte); border-color: color-mix(in oklab, var(--acento) 45%, var(--linea)); }
a.tarjeta::after { content: "→"; position: absolute; top: 1.3rem; right: 1.3rem; color: var(--acento-texto); opacity: 0; transform: translateX(-4px); transition: opacity .16s, transform .16s; font-size: 1.05rem; }
a.tarjeta:hover::after { opacity: 1; transform: translateX(0); }
.tarjeta h3, .tarjeta h2 { margin: 0; font-size: 1.1rem; padding-right: 1.4rem; }
.tarjeta p { margin: 0; font-size: .93rem; color: var(--tinta-2); max-width: none; line-height: 1.5; }
.tarjeta__ic { width: 34px; height: 34px; display: grid; place-items: start; margin-bottom: .35rem; color: var(--acento-texto); }
.tarjeta__ic svg { width: 26px; height: 26px; stroke-width: 1.5; }
.tarjeta--oro .tarjeta__ic { color: var(--oro); }
.tarjeta__dato { font-family: var(--mono); font-size: 1.6rem; font-weight: 600; color: var(--acento-texto); letter-spacing: -.03em; }
/* --- Formulario ----------------------------------------------------------- */
.formulario { background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--radio); padding: 1.6rem; box-shadow: var(--sombra); }
.campos { display: grid; gap: 1.15rem; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.campo { display: flex; flex-direction: column; gap: .38rem; min-width: 0; }
.campo label, .grupo legend { font-size: .88rem; font-weight: 650; color: var(--tinta); }
.campo .ayuda { font-size: .8rem; color: var(--tinta-3); line-height: 1.4; }
.campo input[type="number"], .campo input[type="text"], .campo select {
font: inherit; font-size: 1rem; font-variant-numeric: tabular-nums;
padding: .65rem .75rem; min-height: 46px; width: 100%;
border: 1.5px solid var(--linea-fuerte); border-radius: var(--radio-s);
background: var(--fondo); color: var(--tinta); transition: border-color .15s, box-shadow .15s;
}
.campo input:focus, .campo select:focus { border-color: var(--acento); box-shadow: 0 0 0 3px var(--acento-suave); outline: none; }
.campo input[aria-invalid="true"] { border-color: var(--negativo); }
.campo .error { font-size: .8rem; color: var(--negativo); min-height: 1em; }
.grupo { border: 0; padding: 0; margin: 0; }
.grupo legend { padding: 0; margin-bottom: .5rem; }
.opciones { display: flex; flex-wrap: wrap; gap: .55rem; }
.opcion { display: inline-flex; align-items: center; gap: .5rem; border: 1.5px solid var(--linea-fuerte); border-radius: 999px; padding: .5rem .9rem; min-height: 44px; cursor: pointer; font-size: .92rem; background: var(--fondo); transition: border-color .15s, background .15s, color .15s; }
.opcion:hover { border-color: var(--acento); }
.opcion:has(input:checked) { border-color: var(--acento); background: var(--acento-suave); color: var(--acento-texto); font-weight: 650; }
.opcion input { accent-color: var(--acento); width: 1.05rem; height: 1.05rem; }
.interruptores { display: grid; gap: .55rem; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); margin-top: 1.15rem; }
.interruptores .opcion { border-radius: var(--radio-s); justify-content: flex-start; }
/* --- Resultado ------------------------------------------------------------ */
.resultado { margin-top: 1.8rem; }
.total { position: relative; overflow: hidden; border-radius: var(--radio); padding: 1.6rem 1.7rem; display: flex; flex-wrap: wrap; gap: 1.4rem 3rem; align-items: baseline;
color: #f3fbf7; background: linear-gradient(150deg, var(--acento), var(--acento-2)); box-shadow: var(--sombra-fuerte); }
.total::after { content: ""; position: absolute; inset: 0; opacity: .5; background-image: radial-gradient(circle at 1px 1px, rgba(255,255,255,.14) 1px, transparent 0); background-size: 22px 22px; -webkit-mask-image: linear-gradient(120deg, #000, transparent 70%); mask-image: linear-gradient(120deg, #000, transparent 70%); }
.total > div { position: relative; z-index: 1; }
.total__etiqueta { font-size: .8rem; text-transform: uppercase; letter-spacing: .08em; color: rgba(255,255,255,.72); display: block; margin-bottom: .35rem; }
.total__cifra { font-family: var(--mono); font-size: clamp(2.2rem, 1.2rem + 4vw, 3.5rem); font-weight: 600; letter-spacing: -.05em; font-variant-numeric: tabular-nums; line-height: 1; color: #fff; }
.total__secundario { font-family: var(--mono); font-size: 1.7rem; font-variant-numeric: tabular-nums; letter-spacing: -.03em; color: #fff; }
table.desglose { width: 100%; border-collapse: collapse; margin-top: 1.4rem; font-size: .95rem; background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--radio); overflow: hidden; box-shadow: var(--sombra); }
table.desglose caption { text-align: left; font-weight: 650; padding: 1rem 1.1rem .2rem; color: var(--tinta-2); font-size: .92rem; }
table.desglose th, table.desglose td { text-align: left; padding: .8rem 1.1rem; border-bottom: 1px solid var(--linea); vertical-align: top; }
table.desglose thead th { font-size: .74rem; text-transform: uppercase; letter-spacing: .07em; color: var(--tinta-3); font-weight: 700; background: var(--superficie-2); }
table.desglose td.num, table.desglose th.num { text-align: right; font-family: var(--mono); font-variant-numeric: tabular-nums; white-space: nowrap; letter-spacing: -.02em; }
table.desglose tbody tr { transition: background .12s; }
table.desglose tbody tr:hover { background: var(--acento-suave); }
table.desglose .concepto { font-weight: 650; }
table.desglose .nota { display: block; font-size: .82rem; color: var(--tinta-3); font-weight: 400; max-width: 34rem; margin-top: .15rem; line-height: 1.4; }
table.desglose tfoot td { border-top: 2px solid var(--linea-fuerte); border-bottom: none; font-weight: 700; padding-top: 1rem; font-size: 1.05rem; }
table.desglose tfoot tr:last-child td { color: var(--acento-texto); font-size: 1.15rem; }
.etiqueta-est { display: inline-block; font-size: .68rem; text-transform: uppercase; letter-spacing: .05em; background: var(--oro-suave); color: var(--oro); border-radius: 999px; padding: .1rem .5rem; margin-left: .4rem; vertical-align: .12em; font-weight: 600; }
/* Barra apilada del reparto de costes */
.barra { display: flex; width: 100%; height: 40px; border-radius: 10px; overflow: hidden; margin-top: 1.6rem; box-shadow: var(--sombra); background: var(--superficie-2); }
.barra span { display: block; height: 100%; transition: width .35s ease; position: relative; }
.barra span:not(:last-child) { border-right: 2px solid var(--superficie); }
.leyenda { display: flex; flex-wrap: wrap; gap: .45rem 1.2rem; margin-top: .8rem; font-size: .85rem; color: var(--tinta-2); }
.leyenda span { display: inline-flex; align-items: center; gap: .45rem; }
.leyenda i { width: 11px; height: 11px; border-radius: 3px; display: inline-block; }
/* --- Avisos --------------------------------------------------------------- */
.aviso { position: relative; border: 1px solid var(--linea); border-radius: var(--radio); padding: 1rem 1.1rem 1rem 2.9rem; font-size: .9rem; color: var(--tinta-2); background: var(--superficie); margin-top: 1.5rem; box-shadow: var(--sombra); }
.aviso::before { content: ""; position: absolute; left: 1rem; top: 1.05rem; width: 18px; height: 18px; background: currentColor; color: var(--tinta-3);
-webkit-mask: no-repeat center / contain; mask: no-repeat center / contain;
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 2a10 10 0 100 20 10 10 0 000-20zm1 15h-2v-6h2zm0-8h-2V7h2z'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 2a10 10 0 100 20 10 10 0 000-20zm1 15h-2v-6h2zm0-8h-2V7h2z'/%3E%3C/svg%3E"); }
.aviso strong { color: var(--tinta); }
.aviso--atencion { background: var(--aviso-fondo); border-color: color-mix(in oklab, var(--aviso) 40%, transparent); color: var(--aviso); }
.aviso--atencion::before { color: var(--aviso);
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 2L1 21h22zm0 5l7.5 13h-15zm-1 5v3h2v-3zm0 4v2h2v-2z'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 2L1 21h22zm0 5l7.5 13h-15zm-1 5v3h2v-3zm0 4v2h2v-2z'/%3E%3C/svg%3E"); }
.aviso--atencion strong { color: var(--aviso); }
.aviso p { margin: 0 0 .5em; max-width: none; }
.aviso p:last-child { margin-bottom: 0; }
.fuente { font-size: .84rem; color: var(--tinta-3); margin-top: 1.1rem; }
.fuente a { color: var(--tinta-2); }
/* --- Botones -------------------------------------------------------------- */
.acciones { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 1.6rem; }
.boton { display: inline-flex; align-items: center; gap: .5rem; min-height: 46px; padding: .6rem 1.15rem; border-radius: 999px; border: 1.5px solid var(--linea-fuerte); background: var(--superficie); color: var(--tinta); font: inherit; font-size: .93rem; font-weight: 600; cursor: pointer; text-decoration: none; transition: transform .14s, box-shadow .14s, border-color .14s; }
.boton:hover { border-color: var(--acento); color: var(--acento-texto); transform: translateY(-1px); }
.boton svg { width: 17px; height: 17px; }
.boton--principal { background: linear-gradient(150deg, var(--acento), var(--acento-2)); border-color: transparent; color: #fff; box-shadow: var(--sombra); }
.boton--principal:hover { color: #fff; box-shadow: var(--sombra-fuerte); }
/* --- Enlaces relacionados ------------------------------------------------- */
.relacionados { border-top: 2px solid var(--linea); margin-top: 3.2rem; padding-top: 1.6rem; }
.relacionados h2 { margin-top: 0; font-size: 1.2rem; }
.lista-enlaces { list-style: none; padding: 0; margin: 0; display: grid; gap: .6rem; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.lista-enlaces li { }
.lista-enlaces a { display: flex; align-items: center; gap: .6rem; padding: .85rem 1rem; text-decoration: none; font-size: .95rem; color: var(--tinta); background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--radio-s); transition: border-color .15s, transform .15s; }
.lista-enlaces a::before { content: "→"; color: var(--acento-texto); flex-shrink: 0; }
.lista-enlaces a:hover { border-color: var(--acento); transform: translateX(2px); }
/* Índice de comunidades — cuadrícula visual */
.mapa-ccaa { list-style: none; padding: 0; margin: 1.6rem 0 0; display: grid; gap: .7rem; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
.mapa-ccaa a { display: flex; flex-direction: column; gap: .5rem; padding: 1rem 1.1rem; text-decoration: none; color: var(--tinta); background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--radio); box-shadow: var(--sombra); transition: transform .15s, box-shadow .15s, border-color .15s; }
.mapa-ccaa a:hover { transform: translateY(-2px); box-shadow: var(--sombra-fuerte); border-color: color-mix(in oklab, var(--acento) 40%, var(--linea)); }
.mapa-ccaa .cc-nom { font-weight: 650; font-size: 1rem; line-height: 1.2; }
.mapa-ccaa .cc-fila { display: flex; align-items: baseline; justify-content: space-between; gap: .6rem; }
.mapa-ccaa .tipo { font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: 1.35rem; font-weight: 600; letter-spacing: -.03em; color: var(--acento-texto); }
.mapa-ccaa .cc-cap { font-size: .74rem; text-transform: uppercase; letter-spacing: .06em; color: var(--tinta-3); }
.mapa-ccaa .cc-barra { height: 6px; border-radius: 999px; background: var(--superficie-2); overflow: hidden; }
.mapa-ccaa .cc-barra i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--acento-2), var(--oro)); }
.mapa-ccaa .cc-flag { font-size: .72rem; color: var(--oro); font-weight: 600; }
/* --- FAQ ------------------------------------------------------------------ */
.faqs { margin-top: 1rem; border: 1px solid var(--linea); border-radius: var(--radio); overflow: hidden; background: var(--superficie); box-shadow: var(--sombra); }
details.faq { border-bottom: 1px solid var(--linea); }
details.faq:last-child { border-bottom: none; }
details.faq summary { cursor: pointer; padding: 1.05rem 1.2rem; font-weight: 650; list-style: none; display: flex; justify-content: space-between; gap: 1rem; min-height: 44px; align-items: center; transition: background .12s; }
details.faq summary:hover { background: var(--superficie-2); }
details.faq summary::-webkit-details-marker { display: none; }
details.faq summary::after { content: "+"; color: var(--acento-texto); font-family: var(--mono); font-size: 1.4rem; line-height: 1; transition: transform .2s; }
details.faq[open] summary::after { transform: rotate(45deg); }
details.faq .respuesta { padding: 0 1.2rem 1.1rem; color: var(--tinta-2); }
details.faq .respuesta p:first-child { margin-top: 0; }
details.faq .respuesta p { max-width: 46rem; }
/* --- Pie ------------------------------------------------------------------ */
.pie { border-top: 1px solid var(--linea); background: var(--fondo-2); padding: 3rem 0 3.5rem; font-size: .9rem; color: var(--tinta-2); margin-top: 2rem; }
.pie__cols { display: grid; gap: 2rem; grid-template-columns: 1.3fr repeat(3, 1fr); }
@media (max-width: 760px) { .pie__cols { grid-template-columns: 1fr 1fr; } }
@media (max-width: 460px) { .pie__cols { grid-template-columns: 1fr; } }
.pie__marca { display: flex; align-items: center; gap: .55rem; font-family: var(--serif); font-size: 1.1rem; color: var(--tinta); font-weight: 600; }
.pie__marca .marca__ic { width: 34px; height: 34px; border-radius: 9px; background: linear-gradient(155deg, #0f4a3a, #0a2f25); color: var(--oro); display: grid; place-items: center; box-shadow: inset 0 0 0 1px rgba(216,165,63,.35); }
.pie__marca .marca__ic svg { width: 18px; height: 18px; }
.pie h2 { font-family: var(--sans); font-size: .78rem; text-transform: uppercase; letter-spacing: .08em; color: var(--tinta-3); margin: 0 0 .8rem; }
.pie ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .5rem; }
.pie a { color: var(--tinta-2); text-decoration: none; }
.pie a:hover { color: var(--acento-texto); }
.pie__legal { margin-top: 2.6rem; padding-top: 1.5rem; border-top: 1px solid var(--linea); font-size: .84rem; color: var(--tinta-3); }
.pie__legal p { max-width: 60rem; }
.pie__preferencias { background: none; border: 0; padding: 0; font: inherit; color: var(--acento-texto); text-decoration: underline; cursor: pointer; }
.pie__preferencias:hover { text-decoration: none; }
.pie__intro p { max-width: 30rem; margin: .6rem 0 0; color: var(--tinta-2); font-size: .88rem; }
/* --- Huecos publicitarios: contenedores vacíos, sin caja visible ---------- */
.hueco-anuncio { margin: 2.8rem 0; min-height: 0; }
/* --- Impresión ------------------------------------------------------------ */
@media print {
:root { --fondo: #fff; --superficie: #fff; --superficie-2: #f4f4f4; --tinta: #000; --tinta-2: #333; --tinta-3: #555; --linea: #bbb; --linea-fuerte: #888; --acento-texto: #0d5a45; }
.cabecera, .pie, .acciones, .hueco-anuncio, .relacionados, .migas, .nav, .hero::after, .total::after { display: none !important; }
body { font-size: 11pt; background: #fff; }
.total { color: #000 !important; background: #f0f0f0 !important; box-shadow: none; }
.total__etiqueta { color: #333 !important; } .total__cifra, .total__secundario { color: #000 !important; }
.formulario { border: none; padding: 0; box-shadow: none; }
.campo select, .campo input { border: none; padding: 0; background: none; font-weight: 600; }
.opcion:not(:has(input:checked)) { display: none; }
table.desglose { page-break-inside: avoid; box-shadow: none; }
a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 8pt; color: #555; }
}