/* ==========================================================================
CGE-ES — Consejo de Guineanos del Exterior en España
Hoja de estilos principal
Paleta y tipografía tomadas del manual de identidad de la entidad.
========================================================================== */
/* --------------------------------------------------------------------------
1. Tokens de diseño
-------------------------------------------------------------------------- */
:root {
/* Colores de marca.
─────────────────────────────────────────────────────────────────
Son los seis de la carta gráfica del logo (octubre de 2026), tal
cual. No inventar tonos nuevos: si hace falta un intermedio, se
saca de estos.
Azul CGE-ES #003566 Rojo #CE1126
Dorado #C9A13B Amarillo #FCD116
Verde #009460 Gris #9EA3A8
El azul es el institucional y el que manda: es el del aro del
emblema. El dorado son los filetes, y SOLO vale sobre fondo
oscuro: sobre blanco da 2,6:1 de contraste y no se puede leer.
El verde ya no es el color de interacción de la web —ahora lo es
el azul—; se queda para la bandera y para lo que significa
«conseguido». */
--rojo: #CE1126;
--rojo-osc: #A20D1E;
--amarillo: #FCD116;
--amarillo-osc:#D9B00A;
--verde: #009460;
--verde-osc: #00734A;
--oro: #C9A13B;
--oro-osc: #A5822C;
--oro-claro: #D9B65F;
--gris-mapa: #9EA3A8;
/* El azul de la carta y su escala. Siguen llamándose «navy» porque es
lo que son, un azul marino, y así no hay que tocar las 74 reglas
que ya los usaban. */
--navy: #003566;
--navy-900: #002747;
--navy-800: #003056;
--navy-700: #0A4B84;
--navy-600: #1C5E96;
/* Neutros, girados un poco hacia el azul para que no desentonen */
--gris: #E4E8ED;
--gris-50: #F6F8FA;
--gris-100: #EDF1F5;
--gris-200: #DEE4EC;
--gris-300: #C3CEDA;
/* Texto */
--texto: #1B2A3A;
--texto-suave: #55657A;
--texto-inv: #FFFFFF;
--blanco: #FFFFFF;
/* Formas */
--radio: 16px;
--radio-sm: 10px;
--radio-xs: 6px;
--radio-full: 999px;
/* Sombras */
--sombra-sm: 0 1px 2px rgba(0,40,76,.06), 0 2px 6px rgba(0,40,76,.05);
--sombra: 0 1px 2px rgba(0,40,76,.05), 0 10px 28px rgba(0,40,76,.09);
--sombra-lg: 0 2px 4px rgba(0,40,76,.05), 0 24px 56px rgba(0,40,76,.14);
/* Layout */
--contenedor: 1200px;
--contenedor-estrecho: 820px;
--gutter: 24px;
--alto-header: 64px;
/* Tipografía */
--fuente: "Montserrat", "Segoe UI", "Trebuchet MS", system-ui, -apple-system, Arial, sans-serif;
/* Transiciones */
--t-rapida: 160ms cubic-bezier(.4,0,.2,1);
--t: 260ms cubic-bezier(.4,0,.2,1);
}
/* --------------------------------------------------------------------------
2. Reset y base
-------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
/* `hidden` debe ganar siempre, incluso sobre display:grid o flex */
[hidden] { display: none !important; }
html {
scroll-behavior: smooth;
scroll-padding-top: calc(var(--alto-header) + 20px);
-webkit-text-size-adjust: 100%;
/* Evita el scroll horizontal que provocaría el menú lateral cerrado.
`clip` no crea contexto de scroll, así que no rompe position:sticky. */
overflow-x: clip;
}
body {
margin: 0;
font-family: var(--fuente);
font-size: 15.5px;
line-height: 1.58;
color: var(--texto);
background: var(--blanco);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
/* Ojo: no poner aquí overflow-x. Combinado con el `overflow-x: clip` del
convierte al body en contenedor de scroll y la cabecera sticky
deja de quedarse fija. El recorte horizontal ya lo hace el . */
}
body.nav-abierto { overflow: hidden; }
img, svg, video { max-width: 100%; height: auto; display: block; }
h1, h2, h3, h4, h5 {
margin: 0 0 .45em;
font-weight: 800;
line-height: 1.16;
letter-spacing: -.015em;
color: var(--navy);
text-wrap: balance;
}
h1 { font-size: clamp(1.8rem, 1.2rem + 2vw, 2.7rem); }
h2 { font-size: clamp(1.35rem, 1.05rem + 1.15vw, 1.9rem); }
h3 { font-size: clamp(1.02rem, .96rem + .35vw, 1.18rem); }
h4 { font-size: .98rem; }
p { margin: 0 0 .8em; }
p:last-child, ul:last-child, ol:last-child { margin-bottom: 0; }
a {
color: var(--navy);
text-decoration-color: color-mix(in srgb, var(--navy) 35%, transparent);
text-underline-offset: 3px;
transition: color var(--t-rapida);
}
a:hover { color: var(--navy-700); }
ul, ol { padding-left: 1.15em; margin: 0 0 1.1em; }
li { margin-bottom: .4em; }
strong, b { font-weight: 700; color: var(--navy); }
hr { border: 0; border-top: 1px solid var(--gris-200); margin: 2.5rem 0; }
/* El anillo de foco va en azul, que sobre blanco da 12:1. Antes iba en
amarillo y sobre blanco se quedaba en 1,47:1: estaba ahí, pero no se
veía, que para un indicador de foco es lo mismo que no estar.
Sobre fondo oscuro el azul desaparecería, así que ahí sí va el
amarillo, que sobre el azul da 8,4:1. */
:focus-visible {
outline: 3px solid var(--navy);
outline-offset: 3px;
border-radius: 3px;
}
.hero :focus-visible,
.hero-pagina :focus-visible,
.pie :focus-visible,
.consular__panel :focus-visible,
.visor :focus-visible {
outline-color: var(--amarillo);
}
::selection { background: var(--amarillo); color: var(--navy); }
/* Enlace de salto para accesibilidad */
.saltar {
position: absolute; left: 12px; top: -80px;
z-index: 2000;
background: var(--navy); color: #fff;
padding: 12px 20px; border-radius: 0 0 var(--radio-sm) var(--radio-sm);
font-weight: 700; text-decoration: none;
transition: top var(--t);
}
.saltar:focus { top: 0; color: #fff; }
/* --------------------------------------------------------------------------
3. Utilidades de layout
-------------------------------------------------------------------------- */
.contenedor {
width: 100%;
max-width: var(--contenedor);
margin-inline: auto;
padding-inline: var(--gutter);
}
.contenedor--estrecho { max-width: var(--contenedor-estrecho); }
.seccion { padding-block: clamp(38px, 2.4vw + 24px, 60px); }
.seccion--compacta { padding-block: clamp(28px, 1.6vw + 18px, 42px); }
.seccion--gris { background: var(--gris-50); }
.seccion--navy { background: var(--navy); color: rgba(255,255,255,.82); }
.seccion--navy h2, .seccion--navy h3 { color: #fff; }
/* …salvo dentro de una tarjeta blanca, donde quedaría invisible. */
.seccion--navy .tarjeta h3, .seccion--navy .panel-nota strong { color: var(--navy); }
.cabecera-seccion { max-width: 760px; margin-bottom: 28px; }
.cabecera-seccion--centro { margin-inline: auto; text-align: center; }
.eyebrow {
display: inline-flex; align-items: center; gap: 10px;
font-size: .78rem; font-weight: 800;
letter-spacing: .13em; text-transform: uppercase;
color: var(--navy);
margin-bottom: 9px;
}
.eyebrow::before {
content: ""; width: 26px; height: 3px; border-radius: 2px;
background: linear-gradient(90deg, var(--rojo) 0 33%, var(--amarillo) 33% 66%, var(--verde) 66% 100%);
}
.cabecera-seccion--centro .eyebrow::before { display: none; }
.seccion--navy .eyebrow { color: var(--amarillo); }
.entradilla {
font-size: clamp(.98rem, .94rem + .2vw, 1.08rem);
color: var(--texto-suave);
line-height: 1.6;
}
.seccion--navy .entradilla { color: rgba(255,255,255,.78); }
.rejilla { display: grid; gap: 18px; }
.rejilla--2 { grid-template-columns: repeat(2, 1fr); }
.rejilla--3 { grid-template-columns: repeat(3, 1fr); }
.rejilla--4 { grid-template-columns: repeat(4, 1fr); }
/* Impide que un contenido ancho (una tabla, un botón largo, una imagen)
ensanche su columna y desborde la pantalla en móvil. */
.rejilla > *, .duo > *, .pasos > *, .cifras > *, .hero__rejilla > * { min-width: 0; }
.tricolor {
height: 4px; width: 100%;
background: linear-gradient(90deg, var(--rojo) 0 33.33%, var(--amarillo) 33.33% 66.66%, var(--verde) 66.66% 100%);
}
.texto-centro { text-align: center; }
/* --------------------------------------------------------------------------
4. Botones
-------------------------------------------------------------------------- */
.btn {
display: inline-flex; align-items: center; justify-content: center; gap: 10px;
padding: 14px 26px;
font-family: inherit; font-size: .95rem; font-weight: 700;
line-height: 1.2;
border: 2px solid transparent;
border-radius: var(--radio-full);
cursor: pointer;
text-decoration: none;
transition: background var(--t-rapida), color var(--t-rapida), border-color var(--t-rapida), transform var(--t-rapida), box-shadow var(--t-rapida);
white-space: nowrap;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn svg { width: 18px; height: 18px; flex-shrink: 0; }
.btn--primario { background: var(--navy-700); color: #fff; box-shadow: 0 6px 18px rgba(0,53,102,.28); }
.btn--primario:hover { background: var(--navy); color: #fff; box-shadow: 0 10px 26px rgba(0,53,102,.34); }
.btn--navy { background: var(--navy); color: #fff; box-shadow: 0 6px 18px rgba(0,40,76,.24); }
.btn--navy:hover { background: var(--navy-900); color: #fff; }
.btn--contorno { border-color: var(--gris-300); color: var(--navy); background: transparent; }
.btn--contorno:hover { border-color: var(--navy); color: var(--navy); background: var(--gris-50); }
.btn--claro { background: rgba(255,255,255,.1); color: #fff; border-color: rgba(255,255,255,.4); }
.btn--claro:hover { background: #fff; color: var(--navy); border-color: #fff; }
/* El dorado de la carta con el texto en azul da 5,1:1, que pasa de
sobra; con el texto en blanco daría 2,4:1 y no se leería. */
.btn--oro { background: var(--oro); color: var(--navy); box-shadow: 0 6px 18px rgba(201,161,59,.34); }
/* Al pasar el ratón el dorado se ACLARA, no se oscurece: con el dorado
oscuro de la paleta el texto azul se quedaba en 3,4:1 y no llegaba.
Aclarando sube a 6,3:1. El dorado oscuro vale para filetes y bordes,
no para fondos con texto encima. */
.btn--oro:hover { background: var(--oro-claro); color: var(--navy); }
.btn--bloque { width: 100%; white-space: normal; text-align: center; }
.btn--sm { padding: 10px 18px; font-size: .86rem; }
.enlace-flecha {
display: inline-flex; align-items: center; gap: 8px;
font-weight: 700; font-size: .92rem;
text-decoration: none;
color: var(--navy);
}
.enlace-flecha svg { width: 16px; height: 16px; transition: transform var(--t-rapida); }
.enlace-flecha:hover svg { transform: translateX(4px); }
/* --------------------------------------------------------------------------
5. Etiquetas / distintivos
-------------------------------------------------------------------------- */
.distintivo {
display: inline-flex; align-items: center; gap: 9px;
padding: 7px 15px 7px 11px;
border-radius: var(--radio-full);
font-size: .78rem; font-weight: 700;
letter-spacing: .01em;
background: var(--gris-100); color: var(--navy);
}
.distintivo svg { width: 15px; height: 15px; }
.distintivo--acreditado { background: rgba(0,148,96,.12); color: var(--verde-osc); }
.distintivo--claro { background: rgba(255,255,255,.13); color: #fff; border: 1px solid rgba(255,255,255,.22); }
.distintivo--oro { background: rgba(252,209,22,.18); color: #7a5f00; }
.etiqueta {
display: inline-block;
padding: 4px 11px;
border-radius: var(--radio-xs);
font-size: .7rem; font-weight: 800;
letter-spacing: .07em; text-transform: uppercase;
background: var(--gris-100); color: var(--texto-suave);
}
.etiqueta--verde { background: rgba(0,148,96,.12); color: var(--verde-osc); }
.etiqueta--rojo { background: rgba(206,17,38,.1); color: var(--rojo-osc); }
.etiqueta--oro { background: rgba(252,209,22,.22); color: #7a5f00; }
.etiqueta--navy { background: rgba(0,40,76,.09); color: var(--navy); }
/* --------------------------------------------------------------------------
6. Cabecera / navegación
-------------------------------------------------------------------------- */
/* Ya no hay banda oscura sobre la cabecera. El correo y el domicilio estaban
ahí y se han quitado: el correo está en Contacto y en el pie, y el domicilio
solo debe aparecer en la ficha informativa, etiquetado como domicilio
social, porque no es una oficina de atención al público. */
/* Selector de idioma. Vive en la barra blanca, así que va en tonos oscuros. */
.selector-idioma {
display: flex; align-items: center; gap: 2px;
border: 1px solid var(--gris-200); border-radius: var(--radio-xs);
padding: 2px;
}
.selector-idioma__btn {
background: none; border: 0;
color: var(--texto-suave);
font-family: inherit; font-size: .76rem; font-weight: 800;
letter-spacing: .06em;
padding: 5px 9px; border-radius: 5px;
cursor: pointer;
transition: color var(--t-rapida), background var(--t-rapida);
}
.selector-idioma__btn:hover { color: var(--navy); background: var(--gris-100); }
/* El botón del idioma activo lleva los colores de su bandera: ver más abajo. */
/* El contenedor que rellena layout.js no debe formar caja propia: si la forma,
la cabecera sticky queda atrapada dentro de sus 115 px y se despega al bajar. */
#site-header { display: contents; }
.cabecera {
position: sticky; top: 0; z-index: 1000;
background: #fff;
border-bottom: 1px solid var(--gris-200);
transition: box-shadow var(--t);
/* NO poner aquí backdrop-filter, filter, transform, contain ni will-change.
Cualquiera de ellos convierte la cabecera en bloque contenedor de sus
hijos `position: fixed`, y el menú lateral de móvil es uno de ellos: se
anclaba a la cabecera, acababa fuera de la pantalla y con 70 px de alto.
Se abría, pero no se veía nada. Ese fue el bug del menú de móvil. */
}
.cabecera.esta-fija { box-shadow: 0 4px 24px rgba(0,40,76,.09); }
.cabecera__inner {
display: flex; align-items: center; justify-content: space-between;
gap: 20px; min-height: var(--alto-header);
}
.marca { display: flex; align-items: center; gap: 13px; text-decoration: none; flex-shrink: 0; }
/* El emblema es cuadrado, así que medida cuadrada. 52 px es lo que cabe
en los 64 de la cabecera dejando aire arriba y abajo. */
.marca__escudo { width: 52px; height: 52px; flex-shrink: 0; }
.marca__texto { display: flex; flex-direction: column; line-height: 1.15; }
.marca__sigla {
font-size: 1.28rem; font-weight: 800; color: var(--navy);
letter-spacing: -.01em;
}
.marca__nombre {
font-size: .63rem; font-weight: 700; text-transform: uppercase;
letter-spacing: .075em; color: var(--texto-suave);
max-width: 25ch;
}
.cabecera__acciones { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.nav { display: flex; align-items: center; gap: 4px; }
.nav__enlace {
position: relative;
display: block;
padding: 8px 11px;
font-size: .85rem; font-weight: 700;
color: var(--navy);
text-decoration: none;
border-radius: var(--radio-sm);
transition: color var(--t-rapida), background var(--t-rapida);
}
.nav__enlace:hover { background: var(--gris-100); color: var(--navy); }
.nav__enlace[aria-current="page"] { color: var(--navy); }
.nav__enlace[aria-current="page"]::after {
content: ""; position: absolute; left: 11px; right: 11px; bottom: 2px;
height: 3px; border-radius: 2px; background: var(--navy-700);
}
.nav__enlace--icono { display: flex; align-items: center; gap: 7px; }
.nav__icono { width: 15px; height: 15px; flex-shrink: 0; opacity: .72; }
.nav__enlace[aria-current="page"] .nav__icono { opacity: 1; }
/* Contacto va resaltado como botón en escritorio. En el cajón de móvil se
anula (ver responsive) y vuelve a ser una fila normal del menú.
OJO: este bloque tiene que ir DESPUÉS de las reglas de `.nav__enlace`.
Las dos reglas de [aria-current="page"] tienen la misma especificidad, así
que gana la última del archivo. Cuando estaba antes, en la propia página de
Contacto el texto se volvía verde sobre el fondo verde del botón y
desaparecía. */
.nav__enlace--destacado {
background: var(--navy); color: #fff;
border-radius: var(--radio-xs);
padding-left: 16px; padding-right: 16px;
margin-left: 6px;
}
.nav__enlace--destacado:hover,
.nav__enlace--destacado:focus-visible { background: var(--navy-700); color: #fff; }
.nav__enlace--destacado[aria-current="page"] { color: #fff; }
.nav__enlace--destacado[aria-current="page"]::after { display: none; }
.nav__enlace--destacado .nav__icono { opacity: .95; }
.nav__item { position: relative; }
.nav__item--desplegable > .nav__enlace { display: flex; align-items: center; gap: 6px; }
.nav__caret { width: 12px; height: 12px; transition: transform var(--t-rapida); }
.nav__item--desplegable:hover .nav__caret,
.nav__item--desplegable:focus-within .nav__caret { transform: rotate(180deg); }
.submenu {
position: absolute; top: calc(100% + 6px); left: 0;
min-width: 292px;
background: #fff;
border: 1px solid var(--gris-200);
border-radius: var(--radio);
box-shadow: var(--sombra-lg);
padding: 8px;
list-style: none; margin: 0;
opacity: 0; visibility: hidden; transform: translateY(-8px);
transition: opacity var(--t), transform var(--t), visibility var(--t);
}
.nav__item--desplegable:hover .submenu,
.nav__item--desplegable:focus-within .submenu {
opacity: 1; visibility: visible; transform: translateY(0);
}
.submenu li { margin: 0; }
.submenu a {
display: block; padding: 10px 13px;
font-size: .87rem; font-weight: 600; color: var(--texto);
text-decoration: none; border-radius: var(--radio-sm);
transition: background var(--t-rapida), color var(--t-rapida);
}
.submenu a:hover { background: var(--gris-50); color: var(--navy); }
.submenu small { display: block; font-weight: 500; font-size: .75rem; color: var(--texto-suave); }
.cabecera__acciones { display: flex; align-items: center; gap: 12px; }
.hamburguesa {
display: none;
width: 46px; height: 46px;
border: 1px solid var(--gris-200); border-radius: var(--radio-sm);
background: #fff; cursor: pointer;
align-items: center; justify-content: center;
flex-direction: column; gap: 5px;
padding: 0;
}
.hamburguesa span {
display: block; width: 20px; height: 2px; border-radius: 2px;
background: var(--navy);
transition: transform var(--t), opacity var(--t-rapida);
}
.hamburguesa[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburguesa[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.hamburguesa[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
/* --------------------------------------------------------------------------
7. Hero
-------------------------------------------------------------------------- */
.hero {
position: relative;
background: linear-gradient(155deg, var(--navy-900) 0%, var(--navy) 48%, #0A4B84 100%);
color: rgba(255,255,255,.86);
overflow: hidden;
padding-block: clamp(38px, 2.6vw + 24px, 64px);
/* Ocupa la pantalla entera menos la cabecera, para que el vídeo no quede
cortado con la siguiente sección asomando por abajo.
`min-height` y no `height`: si el contenido crece —un titular más largo,
una pantalla muy baja— el hero se estira en lugar de recortarlo.
`100svh` es la altura *pequeña* del viewport: en móvil descuenta la barra
del navegador, así que no hay el salto que da `100vh` cuando esa barra
aparece y desaparece al hacer scroll. El `100vh` de la línea anterior es
el respaldo para los navegadores que no entienden svh. */
min-height: calc(100vh - var(--alto-header));
min-height: calc(100svh - var(--alto-header));
display: flex;
align-items: center;
}
/* Al hacer flex el hero, el contenedor pasa a ser un elemento flexible y
perdería su ancho: se le devuelve. */
.hero > .hero__inner { width: 100%; }
.hero::before {
content: "";
position: absolute; inset: 0;
background:
/* Velo de izquierda a derecha, por delante de los demás. El texto vive
a la izquierda y sobre un fotograma claro del vídeo el blanco se
perdía; a la derecha se deja ver el paisaje. */
linear-gradient(100deg,
rgba(0,24,46,.84) 0%,
rgba(0,24,46,.62) 38%,
rgba(0,24,46,.28) 68%,
rgba(0,24,46,.10) 100%),
radial-gradient(1100px 620px at 84% -18%, rgba(0,53,102,.34), transparent 64%),
radial-gradient(820px 520px at -6% 112%, rgba(206,17,38,.24), transparent 62%),
radial-gradient(560px 360px at 96% 96%, rgba(252,209,22,.12), transparent 66%);
pointer-events: none;
}
/* Un único destello diagonal, sin tramas ni cuadrículas repetidas */
.hero::after {
content: "";
position: absolute; inset: -20% -10%;
background: linear-gradient(108deg,
transparent 0 34%,
rgba(255,255,255,.05) 44%,
rgba(255,255,255,.02) 56%,
transparent 68% 100%);
pointer-events: none;
}
/* Vídeo de fondo del hero.
Va detrás de los dos degradados de .hero::before y ::after, que son los
que mantienen legible el texto blanco: sin ellos, un fotograma claro del
vídeo se lo come. Por eso el vídeo lleva z-index 0 y los pseudoelementos
quedan por encima.
`object-fit: cover` para que llene el hueco a cualquier proporción sin
deformarse, y `pointer-events: none` para que no capture clics. */
.hero__video {
position: absolute; inset: 0; z-index: 0;
width: 100%; height: 100%;
object-fit: cover;
pointer-events: none;
opacity: .58;
/* La bandera está en el cuarto superior derecho del fotograma. En una
pantalla ancha `cover` recorta por arriba y por abajo, así que el punto
de anclaje se sube: con el encuadre centrado la bandera se salía por
arriba.
El 22 % no es un número redondo por casualidad. Es el que aguanta
también las ventanas anchas y bajas —1400x500, 2000x560—, donde el
recorte vertical se come media altura del fotograma y con el 28 % que
había antes la bandera perdía la punta. Comprobado en veintiocho
tamaños, de un iPhone SE a un 3440x1440; en los normales la bandera se
mueve cuatro píxeles respecto al 28 %, o sea nada.
El encuadre horizontal para pantallas no anchas va más abajo, en su
propia regla. */
object-position: 50% 22%;
}
/* La bandera, entera, en pantallas que no son anchas.
--------------------------------------------------------------------------
El vídeo es 16:9 y el hueco del hero casi nunca lo es. Con `cover` el
recorte se lleva lo que sobra, y con el encuadre centrado la bandera
—que ondea en la franja x 968-1187 del fotograma, medida fotograma a
fotograma porque la cámara se mueve unos 40 px a lo largo del bucle— se
salía por la derecha.
Echando la cuenta: centrado, la bandera solo cabe entera si el hueco es
más ancho que 1,52 veces su altura. Por eso el corte va por PROPORCIÓN y
no por ancho: un móvil de pie (0,46), una tableta de pie (0,85) y un
iPad tumbado (1,33) tienen el mismo problema aunque midan muy distinto,
y con un corte por píxeles la tableta se quedaba con la bandera cortada.
Al 97 % el encuadre se pega a ese lado y la bandera entra entera, con
aire a los dos lados, en todos esos casos. La vertical no hace falta
tocarla: cuando el recorte es horizontal, el fotograma se ve de arriba
abajo y el segundo valor da igual. */
@media (max-aspect-ratio: 3/2) {
.hero__video { object-position: 97% 50%; }
}
.hero::before, .hero::after { z-index: 1; }
.hero__inner { position: relative; z-index: 2; }
/* Si el sistema pide menos animación, se esconde el vídeo y se queda el
poster de fondo: un vídeo en bucle detrás del titular es justo lo que
molesta a quien activa ese ajuste. */
@media (prefers-reduced-motion: reduce) {
.hero__video { display: none; }
.hero { background-image: url("../video/hero-fondo-poster.webp"); background-size: cover; background-position: center; }
}
.pie__ambito { margin: 6px 0 0; font-size: .82rem; color: rgba(255,255,255,.55); }
.hero__borde {
position: absolute; left: 0; right: 0; bottom: 0; height: 4px;
background: linear-gradient(90deg, var(--rojo) 0 33.33%, var(--amarillo) 33.33% 66.66%, var(--verde) 66.66% 100%);
z-index: 2;
}
.hero__rejilla {
display: grid;
grid-template-columns: 1.15fr .85fr;
gap: 56px; align-items: center;
}
/* Hero a una sola columna: el texto manda y no hay escudo gigante al lado */
.hero__rejilla--simple { grid-template-columns: 1fr; max-width: 60ch; }
.hero h1 { color: #fff; margin-bottom: .35em; }
.hero h1 em {
font-style: normal;
background: linear-gradient(100deg, var(--amarillo), var(--verde) 92%);
-webkit-background-clip: text; background-clip: text;
-webkit-text-fill-color: transparent; color: transparent;
}
.hero__texto {
font-size: clamp(.98rem, .94rem + .22vw, 1.08rem);
color: rgba(255,255,255,.8);
max-width: 62ch;
margin-bottom: 22px;
}
.hero__acciones { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 22px; }
.hero__pies {
display: flex; flex-wrap: wrap; gap: 9px 22px;
padding-top: 15px;
border-top: 1px solid rgba(255,255,255,.13);
}
.hero__pie {
display: flex; align-items: center; gap: 10px;
font-size: .84rem; color: rgba(255,255,255,.72);
}
.hero__pie svg { width: 17px; height: 17px; color: var(--amarillo); flex-shrink: 0; }
.hero__escudo {
display: flex; align-items: center; justify-content: center;
position: relative;
}
.hero__escudo svg, .hero__escudo img { width: min(100%, 380px); height: auto; }
.hero__escudo::before {
content: "";
position: absolute; width: 76%; aspect-ratio: 1; border-radius: 50%;
background: radial-gradient(circle, rgba(252,209,22,.24), transparent 66%);
filter: blur(24px);
}
/* Hero de páginas interiores */
.hero-pagina {
position: relative;
background: linear-gradient(150deg, var(--navy-900), var(--navy) 60%, #253649);
color: rgba(255,255,255,.82);
padding-block: clamp(48px, 3.4vw + 32px, 84px);
overflow: hidden;
}
.hero-pagina::before {
content: "";
position: absolute; inset: 0;
background: radial-gradient(760px 380px at 82% -20%, rgba(0,148,96,.26), transparent 62%);
pointer-events: none;
}
/* Cabecera con imagen de fondo. Las imágenes tienen el motivo a la derecha
y se oscurecen hacia la izquierda, que es donde va el texto; encima se
pone además un velo para que el blanco se lea siempre, también sobre las
zonas claras. */
.hero-pagina--foto { background-size: cover; background-position: center 42%; }
.hero-pagina--foto::before {
background:
linear-gradient(100deg,
rgba(0,24,46,.90) 0%,
rgba(0,24,46,.72) 40%,
rgba(0,24,46,.42) 70%,
rgba(0,24,46,.22) 100%),
radial-gradient(760px 380px at 82% -20%, rgba(0,148,96,.18), transparent 62%);
}
.hero-pagina__inner { position: relative; z-index: 1; max-width: 860px; }
.hero-pagina h1 { color: #fff; margin-bottom: .35em; }
.hero-pagina p { color: rgba(255,255,255,.78); font-size: 1.08rem; max-width: 62ch; }
.migas {
display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
list-style: none; padding: 0; margin: 0 0 20px;
font-size: .8rem; color: rgba(255,255,255,.55);
}
.migas a { color: rgba(255,255,255,.75); text-decoration: none; }
.migas a:hover { color: var(--amarillo); }
.migas li::after { content: "/"; margin-left: 8px; opacity: .45; }
.migas li:last-child::after { display: none; }
/* --------------------------------------------------------------------------
8. Franja de confianza / acreditación
-------------------------------------------------------------------------- */
.franja-confianza {
background: var(--gris-50);
border-bottom: 1px solid var(--gris-200);
padding-block: 26px;
}
.franja-confianza__inner {
display: flex; align-items: center; justify-content: center;
gap: 18px 40px; flex-wrap: wrap; text-align: center;
}
.franja-confianza__texto {
font-size: .88rem; color: var(--texto-suave); max-width: 62ch;
}
.franja-confianza__texto strong { color: var(--navy); }
/* --------------------------------------------------------------------------
9. Tarjetas
-------------------------------------------------------------------------- */
.tarjeta {
display: flex; flex-direction: column;
background: #fff;
border: 1px solid var(--gris-200);
border-radius: var(--radio);
padding: 22px 20px;
transition: transform var(--t), box-shadow var(--t), border-color var(--t);
}
.tarjeta:hover { transform: translateY(-4px); box-shadow: var(--sombra); border-color: var(--gris-300); }
.tarjeta h3 { margin-bottom: .5em; }
.tarjeta p { color: var(--texto-suave); font-size: .92rem; }
.tarjeta__icono {
width: 42px; height: 42px;
display: grid; place-items: center;
border-radius: 11px;
margin-bottom: 13px;
background: var(--gris-100); color: var(--navy);
}
.tarjeta__icono svg { width: 26px; height: 26px; }
.tarjeta__icono--verde { background: rgba(0,148,96,.11); color: var(--verde-osc); }
.tarjeta__icono--rojo { background: rgba(206,17,38,.09); color: var(--rojo); }
.tarjeta__icono--oro { background: rgba(252,209,22,.2); color: #8a6d00; }
.tarjeta__icono--navy { background: rgba(0,40,76,.08); color: var(--navy); }
.tarjeta__pie { margin-top: auto; padding-top: 20px; }
.tarjeta--enlace { text-decoration: none; color: inherit; }
.tarjeta--destacada {
border-color: transparent;
background: linear-gradient(150deg, var(--navy), var(--navy-700));
color: rgba(255,255,255,.8);
}
.tarjeta--destacada h3 { color: #fff; }
.tarjeta--destacada p { color: rgba(255,255,255,.76); }
.tarjeta--destacada .tarjeta__icono { background: rgba(255,255,255,.12); color: var(--amarillo); }
.lista-check { list-style: none; padding: 0; margin: 18px 0 0; }
.lista-check li {
position: relative; padding-left: 28px; margin-bottom: 9px;
font-size: .92rem; color: var(--texto-suave);
}
.lista-check li::before {
content: "";
position: absolute; left: 0; top: .48em;
width: 17px; height: 17px; border-radius: 50%;
background: rgba(0,148,96,.13) url("data:image/svg+xml;utf8,") center/11px no-repeat;
}
/* Variante «no» — cruz roja en lugar de check verde */
.lista-check--no li::before {
background: rgba(206,17,38,.1) url("data:image/svg+xml;utf8,") center/10px no-repeat;
}
.tarjeta--destacada .lista-check li { color: rgba(255,255,255,.78); }
.tarjeta--destacada .lista-check li::before { background-color: rgba(252,209,22,.2); }
/* --------------------------------------------------------------------------
10. Cifras / datos institucionales
-------------------------------------------------------------------------- */
.cifras {
display: grid; grid-template-columns: repeat(4, 1fr);
gap: 1px;
background: rgba(255,255,255,.14);
border: 1px solid rgba(255,255,255,.14);
border-radius: var(--radio);
overflow: hidden;
}
.cifra { background: var(--navy); padding: 30px 24px; text-align: center; }
.cifra__valor {
font-size: clamp(1.5rem, 1.15rem + 1.2vw, 2.15rem);
font-weight: 800; color: var(--amarillo); line-height: 1.1;
margin-bottom: 8px;
}
.cifra__etiqueta {
font-size: .8rem; font-weight: 600;
color: rgba(255,255,255,.72);
letter-spacing: .02em;
}
/* --------------------------------------------------------------------------
11. Proceso / pasos
-------------------------------------------------------------------------- */
.pasos { counter-reset: paso; display: grid; gap: 24px; grid-template-columns: repeat(4, 1fr); }
.pasos--5 { grid-template-columns: repeat(5, 1fr); }
.paso {
position: relative;
padding: 28px 24px;
background: #fff;
border: 1px solid var(--gris-200);
border-radius: var(--radio);
}
.paso::before {
counter-increment: paso;
content: counter(paso, decimal-leading-zero);
display: block;
font-size: 1.7rem; font-weight: 800;
color: var(--gris-300);
line-height: 1; margin-bottom: 14px;
}
.paso h3 { font-size: 1.05rem; margin-bottom: .45em; }
.paso p { font-size: .9rem; color: var(--texto-suave); margin: 0; }
/* --------------------------------------------------------------------------
12. Bloques de contenido con imagen/panel
-------------------------------------------------------------------------- */
.duo {
display: grid; grid-template-columns: 1fr 1fr;
gap: clamp(32px, 4vw, 64px); align-items: center;
}
.duo--invertido .duo__media { order: -1; }
.panel-marca {
position: relative;
background: linear-gradient(150deg, var(--navy-900), var(--navy) 70%);
border-radius: 22px;
padding: 44px;
display: grid; place-items: center;
overflow: hidden;
}
.panel-marca::before {
content: "";
position: absolute; inset: 0;
background:
radial-gradient(400px 300px at 20% 10%, rgba(0,148,96,.3), transparent 60%),
radial-gradient(360px 280px at 88% 92%, rgba(206,17,38,.24), transparent 60%);
}
.panel-marca svg, .panel-marca img { position: relative; width: min(100%, 320px); height: auto; }
.panel-nota {
background: #fff;
border: 1px solid var(--gris-200);
border-left: 4px solid var(--amarillo);
border-radius: var(--radio-sm);
padding: 22px 26px;
font-size: .93rem;
color: var(--texto-suave);
}
.panel-nota strong { display: block; margin-bottom: 6px; }
.cita {
margin: 0;
padding: 32px 34px;
background: var(--gris-50);
border-radius: var(--radio);
border-left: 4px solid var(--navy-700);
}
.cita p {
font-size: 1.12rem; font-style: italic; color: var(--navy);
line-height: 1.65;
}
.cita footer { font-size: .85rem; font-weight: 700; color: var(--texto-suave); font-style: normal; }
/* --------------------------------------------------------------------------
13. Acordeón / preguntas frecuentes
-------------------------------------------------------------------------- */
.acordeon { border-top: 1px solid var(--gris-200); }
.acordeon__item { border-bottom: 1px solid var(--gris-200); }
.acordeon__boton {
width: 100%;
display: flex; align-items: flex-start; justify-content: space-between; gap: 20px;
padding: 15px 4px;
background: none; border: 0;
font-family: inherit; font-size: .97rem; font-weight: 700;
color: var(--navy); text-align: left;
cursor: pointer;
}
.acordeon__boton:hover { color: var(--navy); }
.acordeon__icono {
flex-shrink: 0; width: 26px; height: 26px;
border-radius: 50%; background: var(--gris-100);
display: grid; place-items: center;
transition: transform var(--t), background var(--t-rapida);
margin-top: 2px;
}
.acordeon__icono svg { width: 13px; height: 13px; color: var(--navy); }
.acordeon__boton[aria-expanded="true"] .acordeon__icono { transform: rotate(45deg); background: var(--navy-700); }
.acordeon__boton[aria-expanded="true"] .acordeon__icono svg { color: #fff; }
.acordeon__panel {
display: grid; grid-template-rows: 0fr;
transition: grid-template-rows var(--t);
}
.acordeon__panel[data-abierto="true"] { grid-template-rows: 1fr; }
.acordeon__panel > div { overflow: hidden; }
.acordeon__panel p { padding: 0 46px 22px 4px; color: var(--texto-suave); font-size: .95rem; margin: 0; }
/* --------------------------------------------------------------------------
14. Tablas de documentación
-------------------------------------------------------------------------- */
.tabla-envoltorio { overflow-x: auto; border: 1px solid var(--gris-200); border-radius: var(--radio); }
table.tabla { width: 100%; border-collapse: collapse; font-size: .92rem; min-width: 560px; }
.tabla th, .tabla td { padding: 9px 16px; text-align: left; border-bottom: 1px solid var(--gris-200); }
.tabla thead th {
background: var(--gris-50);
font-size: .74rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase;
color: var(--texto-suave);
}
.tabla tbody tr:last-child td { border-bottom: 0; }
.tabla td strong { color: var(--navy); }
/* --------------------------------------------------------------------------
15. Actualidad
-------------------------------------------------------------------------- */
.noticia {
display: flex; flex-direction: column;
background: #fff;
border: 1px solid var(--gris-200);
border-radius: var(--radio);
overflow: hidden;
text-decoration: none; color: inherit;
transition: transform var(--t), box-shadow var(--t);
}
.noticia:hover { transform: translateY(-4px); box-shadow: var(--sombra); }
/* Sin foto, esto es solo el emblema sobre un fondo: no merece un 16/9, que
son más de 200 px de decoración en cada tarjeta. Se queda en una banda.
Cuando la noticia SÍ trae foto (.noticia__media--foto) vuelve al 16/9,
porque entonces hay algo que enseñar. */
.noticia__media {
height: 72px;
background: linear-gradient(140deg, var(--navy), var(--navy-700));
position: relative;
display: grid; place-items: center;
}
.noticia__media img { width: 50px; height: 50px; }
.noticia__media--foto { height: auto; aspect-ratio: 16/9; }
.noticia__media--foto img { width: 100%; height: 100%; }
.noticia__media::after {
content: "";
position: absolute; left: 0; right: 0; bottom: 0; height: 4px;
background: linear-gradient(90deg, var(--rojo) 0 33.33%, var(--amarillo) 33.33% 66.66%, var(--verde) 66.66% 100%);
}
.noticia__media svg, .noticia__media img { width: 62px; height: 62px; opacity: .38; }
.noticia__cuerpo { padding: 18px 18px 20px; display: flex; flex-direction: column; flex: 1; }
.noticia__meta { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; flex-wrap: wrap; }
.noticia__fecha { font-size: .78rem; color: var(--texto-suave); font-weight: 600; }
.noticia h3 { font-size: 1rem; margin-bottom: .4em; }
.noticia p { font-size: .9rem; color: var(--texto-suave); }
.noticia__cuerpo .enlace-flecha { margin-top: auto; padding-top: 18px; }
.filtros { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 22px; }
.filtro {
padding: 9px 18px;
border: 1px solid var(--gris-200); border-radius: var(--radio-full);
background: #fff;
font-family: inherit; font-size: .84rem; font-weight: 700; color: var(--texto-suave);
cursor: pointer;
transition: all var(--t-rapida);
}
.filtro:hover { border-color: var(--navy); color: var(--navy); }
.filtro[aria-pressed="true"] { background: var(--navy); border-color: var(--navy); color: #fff; }
/* --------------------------------------------------------------------------
16. Formularios
-------------------------------------------------------------------------- */
.formulario { display: grid; gap: 20px; }
.campo { display: grid; gap: 7px; }
.campo--doble { grid-template-columns: 1fr 1fr; gap: 20px; display: grid; }
.campo label { font-size: .84rem; font-weight: 700; color: var(--navy); }
.campo .req { color: var(--rojo); }
.campo input, .campo select, .campo textarea {
width: 100%;
padding: 13px 16px;
font-family: inherit; font-size: .95rem; color: var(--texto);
background: #fff;
border: 1.5px solid var(--gris-200);
border-radius: var(--radio-sm);
transition: border-color var(--t-rapida), box-shadow var(--t-rapida);
}
.campo textarea { min-height: 148px; resize: vertical; }
.campo select { appearance: none; cursor: pointer;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat; background-position: right 14px center; background-size: 17px;
padding-right: 42px;
}
.campo input:focus, .campo select:focus, .campo textarea:focus {
outline: none;
border-color: var(--navy-700);
box-shadow: 0 0 0 4px rgba(0,148,96,.13);
}
.campo input[aria-invalid="true"], .campo textarea[aria-invalid="true"], .campo select[aria-invalid="true"] {
border-color: var(--rojo);
box-shadow: 0 0 0 4px rgba(206,17,38,.1);
}
.campo__error { font-size: .78rem; color: var(--rojo-osc); font-weight: 600; min-height: 0; }
.campo__error:empty { display: none; }
.consentimiento {
display: grid; grid-template-columns: auto 1fr; gap: 12px;
align-items: start;
font-size: .84rem; color: var(--texto-suave); line-height: 1.6;
}
.consentimiento input { width: 19px; height: 19px; margin-top: 3px; accent-color: var(--navy-700); cursor: pointer; }
.aviso-formulario {
padding: 16px 20px;
border-radius: var(--radio-sm);
font-size: .9rem; font-weight: 600;
display: none;
}
.aviso-formulario[data-estado="ok"] { display: block; background: rgba(0,148,96,.11); color: var(--verde-osc); }
.aviso-formulario[data-estado="error"] { display: block; background: rgba(206,17,38,.09); color: var(--rojo-osc); }
.bloque-contacto {
background: var(--gris-50);
border: 1px solid var(--gris-200);
border-radius: var(--radio);
padding: 30px 28px;
}
.dato-contacto { display: flex; gap: 15px; padding: 16px 0; border-bottom: 1px solid var(--gris-200); }
/* Sin esto, un correo largo no cabe en móvil y se sale de la tarjeta */
.dato-contacto > div:last-child { min-width: 0; }
.dato-contacto:last-child { border-bottom: 0; padding-bottom: 0; }
.dato-contacto:first-child { padding-top: 0; }
.dato-contacto__icono {
flex-shrink: 0; width: 40px; height: 40px; border-radius: 11px;
background: #fff; border: 1px solid var(--gris-200);
display: grid; place-items: center; color: var(--navy);
}
.dato-contacto__icono svg { width: 18px; height: 18px; }
.dato-contacto__titulo { font-size: .74rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--texto-suave); margin-bottom: 3px; }
.dato-contacto__valor { font-size: .95rem; font-weight: 600; color: var(--navy); overflow-wrap: anywhere; }
.dato-contacto__valor a { color: var(--navy); text-decoration: none; }
.dato-contacto__valor a:hover { color: var(--navy); }
/* El envoltorio de un mapa incrustado en iframe. Hoy no lo usa ninguna
página —la de contacto acabó sin mapa—, pero se deja porque es lo que
hace falta el día que se ponga: borde, esquinas y `line-height: 0`, que
es lo que le quita al iframe el hueco de debajo.
El `line-height: 0` se hereda, así que OJO con reutilizar esta clase
para algo con texto: el mapa de comunidades autónomas se llamó así al
principio y le salieron todas las líneas montadas unas sobre otras. Ese
vive en `.mapa-ccaa`. */
.mapa {
border: 1px solid var(--gris-200);
border-radius: var(--radio);
overflow: hidden;
line-height: 0;
}
.mapa iframe { width: 100%; height: 380px; border: 0; }
/* --------------------------------------------------------------------------
17. CTA final
-------------------------------------------------------------------------- */
.cta-final {
position: relative;
background: linear-gradient(140deg, var(--navy), var(--navy-700) 55%, #1C5E96);
border-radius: 24px;
padding: clamp(38px, 4vw, 62px);
overflow: hidden;
text-align: center;
}
.cta-final::before {
content: "";
position: absolute; inset: 0;
background: radial-gradient(600px 320px at 12% 0%, rgba(255,255,255,.2), transparent 62%);
}
.cta-final__inner { position: relative; max-width: 700px; margin-inline: auto; }
.cta-final h2 { color: #fff; }
.cta-final p { color: rgba(255,255,255,.9); font-size: 1.05rem; margin-bottom: 28px; }
.cta-final .btn--claro:hover { color: var(--navy); }
/* --------------------------------------------------------------------------
17 bis. Componentes institucionales
-------------------------------------------------------------------------- */
/* Ficha de datos registrales (pares dato/valor) */
.ficha {
margin: 0;
border: 1px solid var(--gris-200);
border-radius: var(--radio);
overflow: hidden;
background: #fff;
}
.ficha__fila {
display: grid;
grid-template-columns: minmax(150px, 34%) 1fr;
border-bottom: 1px solid var(--gris-200);
}
.ficha__fila:last-child { border-bottom: 0; }
/* Ficha a dos columnas, para listas largas como la Junta Directiva.
Las filas van en un grid de dos columnas. La de la derecha lleva borde
izquierdo para separar los dos bloques, y `:last-child` no sirve para
quitar el último borde inferior porque ahora hay DOS últimas filas: se
usa :nth-last-child(-n+2), que coge las dos de abajo. Con un número
impar de filas la última ocupa el ancho de su columna y ya está. */
.ficha--dos { display: grid; grid-template-columns: 1fr 1fr; counter-reset: cargo; }
/* Los cargos van numerados, y el número lo pone este contador. No está
escrito en el HTML a propósito: así reordenar o añadir un cargo no obliga
a renumerar a mano, que es como se acaba con dos «7.» y ningún «8.». */
.ficha--dos dt::before {
counter-increment: cargo;
content: counter(cargo);
flex-shrink: 0;
min-width: 17px;
margin-right: 8px;
color: var(--navy);
font-size: .72rem; font-weight: 800;
font-variant-numeric: tabular-nums;
}
.ficha--dos .ficha__fila--suspendida dt::before { color: var(--texto-suave); }
/* La Asesoría no lleva número: no es un cargo electo de la jerarquía, así que
numerarla la contaba como uno más. `counter-increment: none` además impide
que consuma número, de modo que la cuenta acaba en 15 y no salta ninguno. */
.ficha--dos .ficha__fila--sinnumero dt::before { content: none; counter-increment: none; }
.ficha--dos .ficha__fila { grid-template-columns: minmax(130px, 42%) 1fr; }
.ficha--dos .ficha__fila:nth-child(even) { border-left: 1px solid var(--gris-200); }
.ficha--dos .ficha__fila:nth-last-child(-n+2) { border-bottom: 0; }
.ficha--dos dd { font-size: .9rem; }
.ficha--dos dt { font-size: .7rem; }
/* El cargo cuyo titular está suspendido, apagado. */
.ficha__fila--suspendida dd { color: var(--texto-suave); font-weight: 500; }
.ficha__fila--suspendida dd s { color: var(--texto-suave); }
/* La provincia, como dato secundario al lado del nombre. */
.ficha__prov { font-weight: 500; font-size: .84rem; color: var(--texto-suave); }
.ficha__prov::before { content: "·"; margin-right: 6px; }
/* El correo del Consejo es una sola palabra de 33 caracteres. En una
pantalla estrecha no cabía en su celda, se salía de la ficha y la ficha
—que recorta— lo cortaba: la dirección quedaba ilegible justo donde se
va a buscar. Con esto parte por donde haga falta, y solo cuando hace
falta. Vale igual para cualquier IBAN o número largo que se añada. */
.ficha dd { overflow-wrap: anywhere; }
.ficha dt {
padding: 8px 14px;
background: var(--gris-50);
font-size: .74rem; font-weight: 800;
letter-spacing: .07em; text-transform: uppercase;
color: var(--texto-suave);
border-right: 1px solid var(--gris-200);
display: flex; align-items: center;
}
.ficha dd {
margin: 0; padding: 8px 16px;
font-size: .95rem; font-weight: 600; color: var(--navy);
display: flex; align-items: center; flex-wrap: wrap; gap: 6px;
}
.ficha dd .mono {
font-family: ui-monospace, "SFMono-Regular", "Cascadia Mono", Consolas, monospace;
font-size: .95em; letter-spacing: .02em;
}
/* Principio de gratuidad y avisos de una línea */
.franja-aviso {
display: flex; align-items: flex-start; gap: 16px;
padding: 20px 24px;
border-radius: var(--radio);
border: 1px solid var(--gris-200);
background: #fff;
}
.franja-aviso__icono {
flex-shrink: 0; width: 38px; height: 38px; border-radius: 10px;
display: grid; place-items: center;
}
.franja-aviso__icono svg { width: 20px; height: 20px; }
.franja-aviso p { margin: 0; font-size: .94rem; color: var(--texto-suave); }
/* Solo el primer hace de título; los del texto siguen en línea */
.franja-aviso p > strong:first-child { display: block; margin-bottom: 3px; }
.franja-aviso strong { color: var(--navy); }
.franja-aviso--gratis { border-color: rgba(0,148,96,.35); background: rgba(0,148,96,.05); }
.franja-aviso--gratis .franja-aviso__icono { background: rgba(0,148,96,.14); color: var(--verde-osc); }
.franja-aviso--ojo { border-color: rgba(206,17,38,.3); background: rgba(206,17,38,.04); }
.franja-aviso--ojo .franja-aviso__icono { background: rgba(206,17,38,.11); color: var(--rojo); }
.franja-aviso--info { border-left: 4px solid var(--amarillo); }
.franja-aviso--info .franja-aviso__icono { background: rgba(252,209,22,.22); color: #8a6d00; }
/* Bloque consular destacado */
.consular {
display: grid;
grid-template-columns: 1.05fr .95fr;
gap: 0;
border-radius: 22px;
overflow: hidden;
border: 1px solid var(--gris-200);
background: #fff;
}
.consular__texto { padding: clamp(30px, 3vw, 46px); }
.consular__panel {
padding: clamp(30px, 3vw, 46px);
background: linear-gradient(155deg, var(--navy-900), var(--navy) 72%);
color: rgba(255,255,255,.78);
}
.consular__panel h3 { color: #fff; font-size: 1.1rem; }
.consular__panel a { color: var(--amarillo); }
.consular__dato { padding: 13px 0; border-bottom: 1px solid rgba(255,255,255,.12); font-size: .92rem; }
.consular__dato:last-of-type { border-bottom: 0; }
.consular__dato span {
display: block; font-size: .7rem; font-weight: 800;
letter-spacing: .09em; text-transform: uppercase;
color: rgba(255,255,255,.45); margin-bottom: 4px;
}
/* Directorio de asociaciones */
.directorio { display: grid; gap: 14px; }
.directorio__item {
display: grid;
grid-template-columns: auto 1fr auto;
align-items: center; gap: 18px;
padding: 18px 22px;
background: #fff;
border: 1px solid var(--gris-200);
border-radius: var(--radio-sm);
transition: border-color var(--t-rapida), box-shadow var(--t-rapida);
}
.directorio__item:hover { border-color: var(--gris-300); box-shadow: var(--sombra-sm); }
.directorio__sigla {
width: 52px; min-width: 52px; height: 46px; border-radius: 11px;
display: grid; place-items: center;
background: var(--navy); color: #fff;
font-weight: 800; letter-spacing: .01em;
font-size: .74rem; padding-inline: 4px;
text-align: center; overflow: hidden;
}
.directorio__email {
display: inline-flex; align-items: center; gap: 8px;
font-size: .84rem; font-weight: 600;
text-decoration: none; white-space: nowrap;
}
.directorio__email svg { width: 15px; height: 15px; flex-shrink: 0; }
.directorio__nombre { font-weight: 700; color: var(--navy); font-size: .98rem; }
.directorio__meta { font-size: .84rem; color: var(--texto-suave); }
.directorio__ambitos { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.directorio__ambitos .etiqueta { font-size: .64rem; padding: 3px 9px; }
.directorio__vacio {
padding: 40px 26px; text-align: center;
border: 1.5px dashed var(--gris-300);
border-radius: var(--radio);
color: var(--texto-suave); font-size: .93rem;
background: var(--gris-50);
}
/* Recorrido / hitos (origen y mandato) */
.hitos { list-style: none; padding: 0; margin: 0; position: relative; }
.hitos::before {
content: ""; position: absolute; left: 9px; top: 8px; bottom: 8px;
width: 2px; background: var(--gris-200);
}
.hitos li { position: relative; padding: 0 0 28px 40px; margin: 0; }
.hitos li:last-child { padding-bottom: 0; }
.hitos li::before {
content: ""; position: absolute; left: 3px; top: 7px;
width: 14px; height: 14px; border-radius: 50%;
background: #fff; border: 3px solid var(--navy-700);
}
.hitos time {
display: block; font-size: .74rem; font-weight: 800;
letter-spacing: .08em; text-transform: uppercase;
color: var(--navy); margin-bottom: 5px;
}
.hitos strong { display: block; color: var(--navy); margin-bottom: 3px; }
.hitos p { margin: 0; font-size: .93rem; color: var(--texto-suave); }
/* Lista numerada en prosa (sustituye a las tarjetas de pasos) */
/* `> li` a propósito, no `li` a secas: con el selector de descendencia los
de una .lista-check anidada también recibían circulito numerado y
seguían la cuenta del padre, así que los requisitos del paso 2 salían
numerados del 3 al 7 y el paso siguiente era el 8. */
.lista-num { counter-reset: n; list-style: none; padding: 0; margin: 0; }
.lista-num .lista-check { margin-top: 10px; }
.lista-num > li {
position: relative; padding-left: 40px; margin-bottom: 14px;
font-size: .93rem; color: var(--texto-suave);
}
.lista-num > li::before {
counter-increment: n; content: counter(n);
position: absolute; left: 0; top: -1px;
width: 26px; height: 26px; border-radius: 50%;
display: grid; place-items: center;
background: var(--navy); color: #fff;
font-size: .82rem; font-weight: 800;
}
.lista-num strong { display: block; color: var(--navy); margin-bottom: 2px; }
/* Dos columnas de texto, sin tarjetas */
.columnas-texto { columns: 2; column-gap: 44px; }
.columnas-texto p { break-inside: avoid; }
/* Enlace externo con icono */
.enlace-externo { display: inline-flex; align-items: center; gap: 7px; font-weight: 600; }
.enlace-externo svg { width: 14px; height: 14px; flex-shrink: 0; }
/* --------------------------------------------------------------------------
18. Pie de página
-------------------------------------------------------------------------- */
.pie { background: var(--navy-900); color: rgba(255,255,255,.66); font-size: .9rem; }
.pie__principal { padding-block: 60px 44px; }
.pie__rejilla {
display: grid;
grid-template-columns: 1.5fr 1fr 1fr 1.2fr;
gap: 44px 36px;
}
/* Los títulos de columna del pie, en dorado: sobre el azul oscuro dan
5,5:1, y es el único sitio de la web donde el dorado se puede leer.
Es además como lo usa el emblema: filete dorado sobre el azul. */
.pie h4 {
font-size: .78rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
color: var(--oro); margin-bottom: 20px;
}
.pie ul { list-style: none; padding: 0; margin: 0; }
.pie li { margin-bottom: 11px; }
.pie a { color: rgba(255,255,255,.66); text-decoration: none; }
.pie a:hover { color: var(--amarillo); }
.pie__marca { display: flex; align-items: center; gap: 14px; margin-bottom: 20px; text-decoration: none; }
.pie__marca svg, .pie__marca img { width: 62px; height: 62px; flex-shrink: 0; }
.pie__marca-texto { display: flex; flex-direction: column; line-height: 1.2; }
.pie__marca-sigla { font-size: 1.3rem; font-weight: 800; color: #fff; }
.pie__marca-nombre { font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: rgba(255,255,255,.55); max-width: 26ch; }
.pie__descripcion { max-width: 42ch; line-height: 1.75; margin-bottom: 14px; }
.pie__registro {
font-size: .78rem; color: rgba(255,255,255,.45);
letter-spacing: .02em; margin-bottom: 22px;
}
.redes { display: flex; gap: 10px; }
.redes a {
width: 40px; height: 40px; border-radius: 50%;
display: grid; place-items: center;
background: rgba(255,255,255,.07);
border: 1px solid rgba(255,255,255,.12);
transition: background var(--t-rapida), transform var(--t-rapida);
}
.redes a:hover { background: var(--navy-700); transform: translateY(-2px); }
.redes svg { width: 17px; height: 17px; color: #fff; }
.pie__legal {
border-top: 1px solid rgba(255,255,255,.1);
padding-block: 22px;
display: flex; align-items: center; justify-content: space-between;
gap: 16px 28px; flex-wrap: wrap;
font-size: .8rem; color: rgba(255,255,255,.5);
}
.pie__legal-enlaces { display: flex; gap: 22px; flex-wrap: wrap; }
/* --------------------------------------------------------------------------
19. Prosa (páginas legales)
-------------------------------------------------------------------------- */
.prosa { max-width: 760px; }
.prosa h2 { font-size: 1.4rem; margin-top: 2.4em; }
.prosa h2:first-child { margin-top: 0; }
.prosa h3 { font-size: 1.08rem; margin-top: 1.8em; }
.prosa p, .prosa li { color: var(--texto-suave); font-size: .97rem; }
.prosa .actualizado { font-size: .84rem; color: var(--texto-suave); font-style: italic; }
/* --------------------------------------------------------------------------
20. Pendiente de completar (marcadores editables)
-------------------------------------------------------------------------- */
.pendiente {
background: rgba(252,209,22,.22);
border-bottom: 1.5px dashed var(--amarillo-osc);
padding: 0 3px;
border-radius: 2px;
font-style: normal;
}
/* --------------------------------------------------------------------------
21. Animaciones de aparición
-------------------------------------------------------------------------- */
.revelar { opacity: 0; transform: translateY(22px); transition: opacity .6s ease, transform .6s cubic-bezier(.22,1,.36,1); }
.revelar.visible { opacity: 1; transform: none; }
.revelar[data-retardo="1"] { transition-delay: .08s; }
.revelar[data-retardo="2"] { transition-delay: .16s; }
.revelar[data-retardo="3"] { transition-delay: .24s; }
.revelar[data-retardo="4"] { transition-delay: .32s; }
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
*, *::before, *::after {
animation-duration: .01ms !important;
transition-duration: .01ms !important;
}
.revelar { opacity: 1; transform: none; }
}
/* --------------------------------------------------------------------------
22. Responsive
-------------------------------------------------------------------------- */
/* Entre 820 y 1000 px el menú completo sigue cabiendo, pero solo si se
quitan los iconos: con ellos se salía de la cabecera a partir de ~960.
Antes de ceder y mandarlo al cajón se sacrifica el icono, que es
decoración, y se conserva el texto, que es lo que se usa. */
@media (max-width: 1000px) {
.nav__icono { display: none; }
.nav__enlace--icono { gap: 0; }
.nav { gap: 1px; }
.nav__enlace { padding-inline: 9px; }
.nav__enlace--destacado { padding-left: 13px; padding-right: 13px; margin-left: 4px; }
}
@media (max-width: 1080px) {
.rejilla--4 { grid-template-columns: repeat(2, 1fr); }
.pasos, .pasos--5 { grid-template-columns: repeat(2, 1fr); }
.pie__rejilla { grid-template-columns: 1fr 1fr; }
.marca__nombre { display: none; }
.marca { gap: 11px; }
}
@media (max-width: 980px) {
.consular { grid-template-columns: 1fr; }
.columnas-texto { columns: 1; }
.hero__rejilla { grid-template-columns: 1fr; gap: 44px; }
.hero__escudo { order: -1; }
.hero__escudo svg { width: min(72%, 300px); }
.duo { grid-template-columns: 1fr; }
.duo--invertido .duo__media { order: 0; }
.cifras { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 820px) {
.hamburguesa { display: flex; }
.nav {
position: fixed;
top: 0; right: 0; bottom: 0;
width: min(88vw, 380px);
background: #fff;
flex-direction: column;
align-items: stretch;
gap: 2px;
padding: 90px 22px 40px;
overflow-y: auto;
box-shadow: -10px 0 40px rgba(0,40,76,.18);
transform: translateX(100%);
visibility: hidden;
transition: transform var(--t), visibility var(--t);
z-index: 1200;
}
.nav.abierto { transform: translateX(0); visibility: visible; }
.nav__enlace { padding: 14px 12px; font-size: 1rem; border-bottom: 1px solid var(--gris-100); border-radius: 0; }
.nav__enlace[aria-current="page"]::after { display: none; }
.nav__item--desplegable .nav__caret { margin-left: auto; }
.submenu {
position: static; opacity: 1; visibility: visible; transform: none;
box-shadow: none; border: 0; border-radius: 0;
min-width: 0; padding: 4px 0 10px 12px;
display: none;
}
.nav__item--desplegable.abierto .submenu { display: block; }
.nav__item--desplegable.abierto .nav__caret { transform: rotate(180deg); }
/* Dentro del cajón, Contacto es una fila más: el botón verde a lo ancho
del panel parecía un anuncio. */
.nav__enlace--destacado {
background: none; color: var(--texto);
padding-left: 12px; padding-right: 12px; margin-left: 0;
border-radius: 0;
}
.nav__enlace--destacado:hover { background: var(--gris-100); color: var(--navy); }
.nav__enlace--destacado[aria-current="page"] { color: var(--navy); }
.velo {
position: fixed; inset: 0;
background: rgba(20,28,38,.5);
backdrop-filter: blur(2px);
/* Por DEBAJO de la cabecera (1000), no por encima.
La cabecera es sticky con z-index, o sea que crea su propio contexto
de apilado. El z-index 1200 del menú se queda encerrado ahí dentro y
vale solo frente a sus hermanos: hacia fuera, el menú pinta al nivel
de la cabecera. Con el velo en 1100 quedaba por encima del menú, lo
veías gris y, peor, cada toque en un enlace lo recibía el velo: el
menú se abría pero solo servía para cerrarse. */
z-index: 900;
opacity: 0; visibility: hidden;
transition: opacity var(--t), visibility var(--t);
}
.velo.visible { opacity: 1; visibility: visible; }
}
@media (max-width: 720px) {
body { font-size: 16px; }
.rejilla--2, .rejilla--3, .rejilla--4 { grid-template-columns: 1fr; }
.pasos, .pasos--5 { grid-template-columns: 1fr; }
.cifras { grid-template-columns: 1fr; }
.pie__rejilla { grid-template-columns: 1fr; gap: 34px; }
.campo--doble { grid-template-columns: 1fr; }
.hero__acciones .btn { width: 100%; }
.btn { white-space: normal; text-align: center; }
.pie__legal { flex-direction: column; align-items: flex-start; }
.cta-final { border-radius: 18px; }
.panel-marca { padding: 30px; }
.mapa iframe { height: 300px; }
.ficha__fila { grid-template-columns: 1fr; }
/* A dos columnas no cabe: se deshace la rejilla y vuelven a apilarse. */
.ficha--dos { grid-template-columns: 1fr; }
.ficha--dos .ficha__fila { grid-template-columns: 1fr; }
.ficha--dos .ficha__fila:nth-child(even) { border-left: 0; }
.ficha--dos .ficha__fila:nth-last-child(-n+2) { border-bottom: 1px solid var(--gris-200); }
.ficha--dos .ficha__fila:last-child { border-bottom: 0; }
.ficha dt { border-right: 0; border-bottom: 1px solid var(--gris-200); padding-block: 10px; }
.directorio__item { grid-template-columns: auto 1fr; }
.directorio__item > :last-child { grid-column: 1 / -1; }
}
/* --------------------------------------------------------------------------
22 bis. Logros, noticia completa, buscador del repertorio
-------------------------------------------------------------------------- */
/* Logros e hitos: insignias en rejilla horizontal.
Antes era una lista a lo ancho, una fila por elemento: seis elementos
ocupaban casi mil píxeles. En rejilla de tres caben en dos filas.
Dos variantes según `clase` en contenido.js: verde con tick para lo
conseguido, oro con estrella para los actos y los hitos. */
.logros { display: grid; gap: 14px; }
.insignias {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 12px;
align-items: start;
}
.insignia {
display: grid; grid-template-columns: auto 1fr; gap: 12px;
align-items: start;
padding: 16px 18px;
background: #fff;
border: 1px solid var(--gris-200);
border-radius: var(--radio-sm);
}
.insignia__marca {
display: grid; place-items: center;
width: 28px; height: 28px; border-radius: 50%;
flex-shrink: 0;
}
.insignia__marca svg { width: 15px; height: 15px; }
.insignia--logro .insignia__marca { background: rgba(0,148,96,.12); color: var(--verde-osc); }
.insignia--acto .insignia__marca { background: rgba(252,209,22,.24); color: #8a6a00; }
.insignia__meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 5px; }
.insignia__meta time { font-size: .76rem; color: var(--texto-suave); }
.insignia h3 { font-size: .95rem; margin: 0 0 3px; line-height: 1.3; }
/* Tope de dos líneas. Si alguien escribe un resumen largo en
contenido.js, la insignia no se estira: se corta. */
.insignia p {
margin: 0; font-size: .86rem; color: var(--texto-suave); line-height: 1.5;
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
overflow: hidden;
}
.insignia--destacada p { -webkit-line-clamp: unset; overflow: visible; }
/* El logro principal: a todo lo ancho y con algo más de peso. */
.insignia--destacada {
padding: 22px 24px;
border-color: rgba(0,148,96,.35);
background: linear-gradient(120deg, rgba(0,148,96,.07), rgba(0,148,96,.02) 60%, #fff);
}
.insignia--destacada .insignia__marca { width: 36px; height: 36px; }
.insignia--destacada .insignia__marca svg { width: 19px; height: 19px; }
.insignia--destacada h3 { font-size: 1.15rem; margin-bottom: 5px; }
.insignia--destacada p { font-size: .94rem; }
/* Documentos que amparan un hito. Plegados por defecto. */
.hitos__fuentes { margin-top: 10px; font-size: .84rem; }
.hitos__fuentes summary {
cursor: pointer; color: var(--navy); font-weight: 700;
list-style: none;
}
.hitos__fuentes summary::-webkit-details-marker { display: none; }
.hitos__fuentes summary::before { content: '+ '; font-weight: 800; }
.hitos__fuentes[open] summary::before { content: '– '; }
.hitos__fuentes ul { margin: 10px 0 0; padding-left: 18px; color: var(--texto-suave); }
.hitos__fuentes li { margin-bottom: 5px; line-height: 1.45; }
/* Cargo suspendido en la tabla de la Junta */
.fila--suspendida td { color: var(--texto-suave); }
.fila--suspendida s { color: var(--texto-suave); }
/* Noticia completa */
.noticia-detalle__meta { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 18px; }
.noticia-detalle__meta time { font-size: .85rem; color: var(--texto-suave); }
.noticia-detalle__autor { font-size: .85rem; color: var(--texto-suave); }
.noticia-detalle h1 { margin-bottom: .4em; }
.noticia-detalle p { margin-bottom: 1.1em; }
.noticia-detalle__portada { margin: 30px 0; }
.noticia-detalle__portada img,
.noticia-detalle__galeria img {
display: block; width: 100%; height: auto;
border-radius: var(--radio); border: 1px solid var(--gris-200);
}
.noticia-detalle__galeria {
display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 14px; margin: 30px 0;
}
.noticia-detalle__galeria figure { margin: 0; }
.noticia-detalle__volver { margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--gris-200); }
/* Foto de portada en la tarjeta de noticia */
.noticia__media--foto { padding: 0; overflow: hidden; }
.noticia__media--foto img { width: 100%; height: 100%; object-fit: cover; }
/* Buscador del repertorio */
.buscador { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 26px; }
.buscador__campo { position: relative; flex: 1 1 300px; min-width: 0; }
.buscador__campo svg {
position: absolute; left: 15px; top: 50%; transform: translateY(-50%);
width: 18px; height: 18px; color: var(--texto-suave); pointer-events: none;
}
.buscador__campo input {
width: 100%;
padding: 13px 44px 13px 44px;
font-family: inherit; font-size: .95rem;
border: 1px solid var(--gris-200); border-radius: var(--radio-xs);
background: #fff; color: var(--texto);
}
.buscador__campo input:focus {
outline: none; border-color: var(--navy-700);
box-shadow: 0 0 0 3px rgba(0,148,96,.14);
}
.buscador__limpiar {
position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
width: 28px; height: 28px; display: grid; place-items: center;
border: 0; border-radius: 50%; background: var(--gris-100);
color: var(--texto-suave); cursor: pointer; font-size: 1rem; line-height: 1;
}
.buscador__limpiar:hover { background: var(--gris-200); color: var(--navy); }
.buscador__total { font-size: .85rem; color: var(--texto-suave); font-weight: 700; }
.directorio__vacio { text-align: center; color: var(--texto-suave); padding: 44px 0; }
/* Entidad sin datos cotejados: se enseña, pero apagada y sin acción, para
no dar por bueno un dato que todavía no hemos comprobado. */
.directorio__item--sincotejar { opacity: .62; }
.directorio__item--sincotejar .directorio__sigla { background: var(--gris-200); color: var(--texto-suave); }
@media (max-width: 720px) {
.insignia--destacada { padding: 18px; }
}
/* --------------------------------------------------------------------------
22 ter. Documentos de origen y visor
-------------------------------------------------------------------------- */
.docs { list-style: none; padding: 0; margin: 10px 0 0; display: grid; gap: 4px; }
/* En «El Consejo» los diez documentos van en rejilla, no en lista: así se
ven todos de un vistazo sin desplegar nada ni hacer scroll. En la página
de un evento se quedan en lista, que son uno o tres. */
.docs--rejilla {
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 8px;
margin-top: 0;
}
.docs--rejilla .docs__item {
align-items: start;
padding: 12px 13px;
border: 1px solid var(--gris-200); border-radius: var(--radio-sm);
background: #fff;
height: 100%;
}
.docs--rejilla .docs__item:hover { border-color: var(--gris-300); background: var(--gris-50); }
.docs--rejilla .docs__icono { margin-top: 1px; }
/* Foto a lo ancho, con pie. El botón existe para poder ampliarla en el
visor; se le quitan los estilos de botón para que no parezca uno. */
/* Más estrecha que la columna y centrada: a todo lo ancho pesaba demasiado
dentro de la sección y empujaba los documentos fuera de la pantalla. El
archivo sigue siendo de 1600 px a propósito, porque es el que se abre en
el visor y ahí sí se quiere ver de cerca: son veinte caras. */
.foto-ancha { margin: 30px auto 0; max-width: 620px; }
.foto-ancha > button {
display: block; width: 100%; padding: 0; border: 0; background: none;
border-radius: var(--radio); overflow: hidden;
cursor: zoom-in;
box-shadow: var(--sombra-sm);
transition: box-shadow var(--t);
}
.foto-ancha > button:hover { box-shadow: var(--sombra); }
.foto-ancha > button:focus-visible { outline: 2px solid var(--navy-700); outline-offset: 3px; }
.foto-ancha img { width: 100%; height: auto; display: block; }
.foto-ancha figcaption {
margin-top: 9px;
font-size: .82rem; color: var(--texto-suave);
text-align: center;
}
/* El desplegable de los documentos. El hace de titular, así que
lleva el tamaño de un h2 y no la flecha por defecto del navegador, que se
quita con `list-style: none` más la regla de ::-webkit-details-marker. */
.docs-plegable > summary {
display: flex; align-items: center; gap: 10px;
cursor: pointer;
list-style: none;
font-size: 1.25rem; font-weight: 800; color: var(--navy);
letter-spacing: -.015em;
}
.docs-plegable > summary::-webkit-details-marker { display: none; }
.docs-plegable > summary:focus-visible { outline: 2px solid var(--navy-700); outline-offset: 3px; border-radius: 4px; }
.docs-plegable__cuenta { font-size: .95rem; font-weight: 700; color: var(--texto-suave); }
.docs-plegable__flecha {
width: 18px; height: 18px; color: var(--texto-suave);
transition: transform var(--t-rapida);
}
.docs-plegable[open] > summary .docs-plegable__flecha { transform: rotate(180deg); }
.docs-plegable__intro { margin: 10px 0 16px; font-size: .9rem; color: var(--texto-suave); }
.docs__item {
width: 100%;
display: grid; grid-template-columns: auto 1fr; gap: 11px; align-items: center;
padding: 9px 10px;
background: none; border: 0; border-radius: var(--radio-xs);
font-family: inherit; text-align: left;
cursor: pointer;
transition: background var(--t-rapida);
}
.docs__item:hover { background: var(--gris-100); }
.docs__item:focus-visible { outline: 2px solid var(--navy-700); outline-offset: 1px; }
.docs__icono {
display: grid; place-items: center;
width: 26px; height: 26px; border-radius: 6px;
background: rgba(206,17,38,.09); color: var(--rojo-osc);
}
.docs__icono svg { width: 14px; height: 14px; }
.docs__texto { min-width: 0; }
.docs__titulo {
display: block;
font-size: .87rem; font-weight: 700; color: var(--navy);
line-height: 1.35;
}
.docs__meta { display: block; font-size: .76rem; color: var(--texto-suave); margin-top: 1px; }
/* El visor. Es un