/**
 * AyudasYaUSA — hoja de estilos principal.
 *
 * Mobile-first. Sin fuentes web externas ni dependencias de terceros.
 * Los tokens de color están en style.css.
 */

/* =========================================================================
   1. Utilidades de visibilidad por dispositivo
   =========================================================================
   Aviso de mantenimiento: una clase de utilidad como `.solo-movil` tiene la
   misma especificidad que la clase del componente al que se le aplica
   (`.boton-menu`), así que la que gane depende del orden en el archivo. Ese
   empate es justo el bug que desbordó la cabecera móvil en el proyecto de
   España. Por eso, además de estas reglas genéricas, cada uso concreto lleva
   su propia regla con selector compuesto en la sección 16, al final del
   archivo. Si añades un elemento con `.solo-movil` o `.solo-escritorio`,
   añade también su regla allí.
   ========================================================================= */
.solo-escritorio { display: none; }
.solo-movil { display: inline-flex; }

@media (min-width: 900px) {
	.solo-escritorio { display: block; }
	.solo-movil { display: none; }
}

/* =========================================================================
   2. Cabecera
   ========================================================================= */
.site-header {
	background: var(--color-blanco);
	border-bottom: 1px solid var(--color-gris-borde);
}

@media (min-width: 900px) {
	.site-header {
		position: sticky;
		top: 0;
		z-index: 100;
		box-shadow: var(--sombra);
	}
}

.site-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	min-height: 68px;
	padding-top: .5rem;
	padding-bottom: .5rem;
}

.site-header__logo,
.site-header__logo:hover {
	text-decoration: none;
	color: inherit;
	flex: 0 1 auto;
	min-width: 0;
}

.logo {
	display: inline-flex;
	align-items: center;
	gap: .55rem;
	min-width: 0;
}

.logo__icono { flex: 0 0 auto; }

.logo__marca {
	font-size: 1.2rem;
	font-weight: 800;
	letter-spacing: -.02em;
	color: var(--color-texto);
	line-height: 1.1;
	white-space: nowrap;
}

/* Mismo reparto de color que el wordmark de AyudasYa (España): "Ayudas" en
   gris oscuro y "Ya" en verde. "USA" se añade en azul institucional para que
   se lea la jerarquía sin separar la palabra: la marca es AyudasYaUSA. */
.logo__ya  { color: var(--color-verde); }
.logo__usa { color: var(--color-azul); }

@media (min-width: 600px) {
	.logo__marca { font-size: 1.35rem; }
}

.site-header__right {
	display: flex;
	align-items: center;
	gap: .5rem;
	flex: 0 0 auto;
}

/* IMPORTANTE — no tocar sin leer esto.
   En el proyecto de España, `.solo-escritorio { display:none }` perdía el empate
   de especificidad contra `.redes-sociales { display:flex }` (una clase cada una,
   gana la que va después en la cascada), así que los iconos se mostraban también
   en móvil, desbordaban la cabecera y arrastraban el ancho de toda la página.
   Aquí la regla lleva un selector más específico desde el primer día. */
.site-header__right .redes-sociales.solo-escritorio { display: none; }

@media (min-width: 900px) {
	.site-header__right .redes-sociales.solo-escritorio { display: flex; }
}

.boton-menu,
.boton-buscar {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	background: none;
	border: 1px solid var(--color-gris-borde);
	border-radius: var(--radio);
	cursor: pointer;
	color: var(--color-azul);
	font-size: 1rem;
}

.boton-menu__icono {
	display: flex;
	flex-direction: column;
	gap: 4px;
	width: 20px;
}

.boton-menu__icono span {
	display: block;
	height: 2px;
	background: var(--color-azul);
	border-radius: 2px;
}

/* --- Menú principal (escritorio) --- */
.menu-principal__lista {
	display: flex;
	align-items: center;
	gap: 1.2rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.menu-principal__lista > li { margin: 0; position: relative; }

.menu-principal__lista a {
	display: inline-block;
	padding: .5rem 0;
	font-weight: 600;
	font-size: .95rem;
	text-decoration: none;
	color: var(--color-texto);
}

.menu-principal__lista a:hover { color: var(--color-verde-oscuro); }

.submenu {
	position: absolute;
	top: 100%;
	left: 0;
	z-index: 120;
	display: none;
	min-width: 260px;
	padding: .75rem;
	background: var(--color-blanco);
	border: 1px solid var(--color-gris-borde);
	border-radius: var(--radio);
	box-shadow: var(--sombra);
}

.submenu--ancho { min-width: 620px; }

/* El desplegable se abre con el ratón y también con el teclado (:focus-within). */
.tiene-submenu:hover .submenu,
.tiene-submenu:focus-within .submenu { display: block; }

.submenu__lista {
	list-style: none;
	margin: 0;
	padding: 0;
	max-height: 60vh;
	overflow-y: auto;
}

.submenu__lista--columnas { columns: 3; column-gap: 1rem; }

.submenu__lista li { margin: 0; break-inside: avoid; }

.submenu__lista a {
	display: block;
	padding: .35rem .4rem;
	font-size: .9rem;
	font-weight: 500;
	border-radius: 4px;
}

.submenu__lista a:hover { background: var(--color-gris-fondo); }

/* --- Menú móvil --- */
.menu-movil {
	background: var(--color-gris-fondo);
	border-bottom: 1px solid var(--color-gris-borde);
	padding: 1rem 0;
}

.menu-movil ul { list-style: none; margin: 0 0 1rem; padding: 0; }

.menu-movil a {
	display: block;
	padding: .6rem 0;
	font-weight: 600;
	text-decoration: none;
	border-bottom: 1px solid var(--color-gris-borde);
}

.menu-movil__titulo {
	margin: 1rem 0 .25rem;
	font-weight: 700;
	color: var(--color-azul);
	text-transform: uppercase;
	font-size: .78rem;
	letter-spacing: .06em;
}

.menu-movil__tipos a { font-weight: 500; }

/* --- Buscador de la cabecera --- */
.buscador-cabecera {
	background: var(--color-gris-fondo);
	border-bottom: 1px solid var(--color-gris-borde);
	padding: 1rem 0;
}

/* =========================================================================
   3. Redes sociales
   ========================================================================= */
.redes-sociales {
	display: flex;
	align-items: center;
	gap: .75rem;
}

.redes-sociales a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	color: var(--color-azul);
	background: var(--color-gris-fondo);
	text-decoration: none;
}

.redes-sociales a:hover {
	background: var(--color-azul);
	color: var(--color-blanco);
}

.redes-sociales--pie a {
	background: rgba(255, 255, 255, .12);
	color: var(--color-blanco);
}

.redes-sociales--pie a:hover { background: var(--color-verde); }

/* =========================================================================
   4. Migas de pan
   ========================================================================= */
.migas {
	background: var(--color-gris-fondo);
	font-size: .85rem;
	padding: .6rem 0;
	border-bottom: 1px solid var(--color-gris-borde);
}

.migas a { text-decoration: none; }
.migas a:hover { text-decoration: underline; }
.migas [aria-current="page"] { color: var(--color-texto-suave); }

/* =========================================================================
   5. Botones
   ========================================================================= */
.boton {
	display: inline-block;
	padding: .8rem 1.4rem;
	border: 2px solid transparent;
	border-radius: var(--radio);
	font-weight: 700;
	font-size: 1rem;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition: background-color .15s ease, color .15s ease;
}

.boton-cta {
	background: var(--color-verde);
	border-color: var(--color-verde);
	color: var(--color-blanco);
}

.boton-cta:hover,
.boton-cta:focus {
	background: var(--color-verde-oscuro);
	border-color: var(--color-verde-oscuro);
	color: var(--color-blanco);
}

.boton-secundario {
	background: transparent;
	border-color: var(--color-azul);
	color: var(--color-azul);
}

.boton-secundario:hover,
.boton-secundario:focus {
	background: var(--color-azul);
	color: var(--color-blanco);
}

/* Sobre el degradado azul del hero, el botón secundario en azul sería
   invisible (bug real reportado en España): dentro del hero va en blanco. */
.hero .boton-secundario {
	border-color: var(--color-blanco);
	color: var(--color-blanco);
}

.hero .boton-secundario:hover,
.hero .boton-secundario:focus {
	background: var(--color-blanco);
	color: var(--color-azul);
}

/* =========================================================================
   6. Hero
   ========================================================================= */
.hero {
	background: linear-gradient(135deg, var(--color-azul) 0%, var(--color-azul-oscuro) 100%);
	color: var(--color-blanco);
	padding: 2.5rem 0;
}

.hero__inner {
	display: grid;
	gap: 1.5rem;
	align-items: center;
}

@media (min-width: 900px) {
	.hero { padding: 3.5rem 0; }
	.hero__inner { grid-template-columns: 1.1fr .9fr; gap: 2.5rem; }
}

.hero h1 { color: var(--color-blanco); margin-bottom: .75rem; }

.hero__entradilla {
	font-size: 1.08rem;
	color: rgba(255, 255, 255, .92);
	max-width: 56ch;
}

.hero__botones {
	display: flex;
	flex-wrap: wrap;
	gap: .75rem;
	margin-top: 1.25rem;
}

.hero__imagen svg { width: 100%; height: auto; display: block; }

/* =========================================================================
   7. Buscador
   ========================================================================= */
.buscador {
	display: grid;
	gap: .75rem;
	margin: 0;
}

@media (min-width: 780px) {
	.buscador { grid-template-columns: 2fr 1fr 1fr auto; align-items: end; }
}

.buscador__campo { margin: 0; display: flex; flex-direction: column; gap: .25rem; }

.buscador__campo label {
	font-size: .8rem;
	font-weight: 700;
	color: var(--color-texto-suave);
	text-transform: uppercase;
	letter-spacing: .04em;
}

.buscador input[type="search"],
.buscador select,
.selector-estados select,
.formulario-campo input,
.formulario-campo textarea {
	width: 100%;
	padding: .7rem .8rem;
	font: inherit;
	font-size: .95rem;
	color: var(--color-texto);
	background: var(--color-blanco);
	border: 1px solid var(--color-gris-borde);
	border-radius: var(--radio);
}

.buscador__campo--boton .boton { width: 100%; }

.buscador-portada {
	background: var(--color-gris-fondo);
	border: 1px solid var(--color-gris-borde);
	border-radius: var(--radio);
	padding: 1.25rem;
	margin-top: -1.5rem;
	margin-bottom: 2rem;
	position: relative;
	z-index: 2;
}

@media (min-width: 900px) {
	.buscador-portada { margin-top: -2rem; }
}

/* =========================================================================
   8. Aviso destacado de la portada
   ========================================================================= */
.aviso-portada {
	background: var(--color-aviso-fondo);
	border-top: 3px solid var(--color-aviso-borde);
	border-bottom: 1px solid var(--color-gris-borde);
	padding: 1rem 0;
	font-size: .95rem;
}

.aviso-portada p { margin: 0; }

/* =========================================================================
   9. Secciones y rejillas
   ========================================================================= */
.seccion { padding: 2.5rem 0; }
.seccion--tipos { background: var(--color-gris-fondo); }
.seccion--relacionadas { background: var(--color-gris-fondo); }

.rejilla-entradas {
	display: grid;
	gap: 1.25rem;
	grid-template-columns: 1fr;
}

@media (min-width: 620px) {
	.rejilla-entradas { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 980px) {
	.rejilla-entradas { grid-template-columns: repeat(3, 1fr); }
}

.tarjeta-entrada {
	display: flex;
	flex-direction: column;
	background: var(--color-blanco);
	border: 1px solid var(--color-gris-borde);
	border-radius: var(--radio);
	overflow: hidden;
	box-shadow: var(--sombra);
}

.tarjeta-entrada__imagen { display: block; line-height: 0; }

.tarjeta-entrada__imagen img {
	width: 100%;
	height: auto;
	display: block;
	background: var(--color-gris-fondo);
}

.tarjeta-entrada__cuerpo { padding: 1rem 1.1rem 1.25rem; display: flex; flex-direction: column; flex: 1; }

.tarjeta-entrada__titulo { font-size: 1.1rem; margin: .35rem 0 .5rem; }
.tarjeta-entrada__titulo a { text-decoration: none; }
.tarjeta-entrada__titulo a:hover { text-decoration: underline; }

.tarjeta-entrada__extracto { font-size: .95rem; color: var(--color-texto-suave); flex: 1; }

.tarjeta-entrada__mas { margin: 0; font-weight: 700; font-size: .92rem; }

.entrada-meta { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0 0 .35rem; }

.etiqueta {
	display: inline-block;
	padding: .2rem .55rem;
	border-radius: 999px;
	font-size: .74rem;
	font-weight: 700;
	text-decoration: none;
	text-transform: uppercase;
	letter-spacing: .03em;
}

.etiqueta--estado { background: #E3EDF5; color: var(--color-azul); }
.etiqueta--tipo { background: #E1F2E8; color: var(--color-verde-oscuro); }
.etiqueta:hover { filter: brightness(.96); }

.rejilla-tipos {
	display: grid;
	gap: 1rem;
	grid-template-columns: 1fr;
}

@media (min-width: 620px) {
	.rejilla-tipos { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 980px) {
	.rejilla-tipos { grid-template-columns: repeat(3, 1fr); }
}

.tarjeta-tipo {
	display: block;
	padding: 1.1rem;
	background: var(--color-blanco);
	border: 1px solid var(--color-gris-borde);
	border-left: 4px solid var(--color-verde);
	border-radius: var(--radio);
	text-decoration: none;
	color: var(--color-texto);
}

.tarjeta-tipo:hover { border-left-color: var(--color-azul); color: var(--color-texto); }

.tarjeta-tipo__nombre { display: block; font-weight: 700; color: var(--color-azul); margin-bottom: .25rem; }
.tarjeta-tipo__descripcion { display: block; font-size: .9rem; color: var(--color-texto-suave); }

/* =========================================================================
   10. Mapa interactivo
   ========================================================================= */
.bloque-mapa { padding: 2.5rem 0; background: var(--color-blanco); }

.bloque-mapa__intro { max-width: 68ch; color: var(--color-texto-suave); }

/* El SVG se muestra a partir de tablet (768px), como pide el brief. Por debajo
   de ese ancho no se puede pinchar un estado con el dedo, así que se sustituye
   por el selector accesible, que funciona sin JavaScript. El cambio es solo por
   CSS: no hay detección de viewport por JS, para no introducir CLS. */
.solo-escritorio-mapa { display: none; }

@media (min-width: 768px) {
	.solo-escritorio-mapa { display: block; }
	.mapa-estados__alternativa { max-width: 520px; }
}

.mapa-estados__svg {
	width: 100%;
	height: auto;
	display: block;
	margin: 0 auto;
	max-width: 1000px;
}

.mapa-estados__estado {
	fill: #DCE7F0;
	stroke: var(--color-blanco);
	stroke-width: 1;
	transition: fill .12s ease;
}

.mapa-estados__enlace:hover .mapa-estados__estado { fill: var(--color-verde); }

/* El outline nativo en enlaces dentro de SVG lo pintan mal varios navegadores
   (recuadro negro del bounding box, bug real reportado en España): se desactiva
   y el indicador de foco se construye sobre la propia silueta. */
.mapa-estados__enlace { outline: none; }

.mapa-estados__enlace:focus-visible .mapa-estados__estado {
	fill: var(--color-verde);
	stroke: var(--color-azul-oscuro);
	stroke-width: 2.5;
}

.mapa-estados__recuadro {
	fill: none;
	stroke: #B9C7D4;
	stroke-width: 1;
	stroke-dasharray: 4 3;
}

.mapa-estados__rotulo {
	fill: var(--color-texto-suave);
	font-size: 11px;
	font-family: var(--fuente);
}

.mapa-estados__guia { stroke: #B9C7D4; stroke-width: .8; }

.mapa-estados__abreviatura {
	fill: var(--color-azul);
	font-size: 11px;
	font-weight: 600;
	font-family: var(--fuente);
}

.mapa-estados__enlace--etiqueta:hover .mapa-estados__abreviatura,
.mapa-estados__enlace--etiqueta:focus-visible .mapa-estados__abreviatura {
	fill: var(--color-verde-oscuro);
	text-decoration: underline;
}

.mapa-estados__pista {
	text-align: center;
	min-height: 1.5em;
	font-weight: 700;
	color: var(--color-azul);
	margin: .25rem 0 0;
}

.selector-estados {
	display: grid;
	gap: .5rem;
	margin: 0 0 1rem;
}

.selector-estados label {
	font-size: .8rem;
	font-weight: 700;
	color: var(--color-texto-suave);
	text-transform: uppercase;
	letter-spacing: .04em;
}

.mapa-estados__nota { font-size: .92rem; color: var(--color-texto-suave); }

/* =========================================================================
   11. Contenido de artículo
   ========================================================================= */
.contenedor--lectura { max-width: calc(var(--ancho-lectura) + 2rem); }

.contenido-articulo { padding: 2rem 0 3rem; }

.contenido-articulo__cabecera { margin-bottom: 1.25rem; }

/* La imagen destacada se muestra a su alto natural, sin caja de proporción fija.
   En España, primero un recorte forzado cortaba las cabezas de las ilustraciones
   y después una caja 16:9 con `contain` dejaba franjas grises arriba y abajo.
   Sin caja fija no hay ni recorte ni hueco que rellenar. */
.contenido-articulo__imagen-destacada { margin: 0 0 1.5rem; }

.contenido-articulo__imagen-destacada img {
	width: 100%;
	height: auto;
	display: block;
	border-radius: var(--radio);
}

.contenido-articulo__cuerpo h2 { margin-top: 2.25rem; }
.contenido-articulo__cuerpo h3 { margin-top: 1.75rem; }

.contenido-articulo__cuerpo img {
	border-radius: var(--radio);
	margin: 1.25rem 0;
}

.contenido-articulo__cuerpo a { font-weight: 600; }

/* --- Tabla de resumen rápido --- */
/* El scroll horizontal es defensivo: si una tabla no cabe, se desplaza dentro de
   su propia caja en vez de arrastrar el ancho de toda la página en móvil
   (bug real reportado en España con una tabla de 4 columnas). */
.resumen-rapido {
	max-width: 100%;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	margin: 1.5rem 0;
	border: 1px solid var(--color-gris-borde);
	border-radius: var(--radio);
	background: var(--color-gris-fondo);
}

.resumen-rapido table {
	width: 100%;
	border-collapse: collapse;
	font-size: .95rem;
	margin: 0;
}

.resumen-rapido th,
.resumen-rapido td {
	padding: .7rem .9rem;
	text-align: left;
	border-bottom: 1px solid var(--color-gris-borde);
	vertical-align: top;
}

.resumen-rapido th {
	width: 38%;
	color: var(--color-azul);
	font-weight: 700;
	white-space: normal;
}

.resumen-rapido tr:last-child th,
.resumen-rapido tr:last-child td { border-bottom: 0; }

/* --- Recuadro de aviso (va SIEMPRE al principio del artículo) --- */
.aviso-fuente-oficial {
	background: var(--color-aviso-fondo);
	border: 1px solid var(--color-aviso-borde);
	border-left-width: 5px;
	border-radius: var(--radio);
	padding: 1rem 1.1rem;
	margin: 1.5rem 0;
	font-size: .95rem;
}

.aviso-fuente-oficial p:last-child { margin-bottom: 0; }

.fecha-revision {
	margin-top: 2rem;
	padding-top: 1rem;
	border-top: 1px solid var(--color-gris-borde);
	font-size: .88rem;
	color: var(--color-texto-suave);
	font-style: italic;
}

/* --- Bloques destacados y FAQ --- */
/* Los márgenes verticales van uno a uno y NUNCA con el atajo `margin`: en la
   portada este bloque se usa como `class="contenedor bloque-destacado"`, y un
   `margin: 1.5rem 0` machacaba el `margin: 0 auto` de `.contenedor` (misma
   especificidad, este archivo se encola después de style.css). El resultado
   era que "Lo que cambia en los próximos meses" y "Preguntas frecuentes"
   quedaban pegados al borde izquierdo en vez de centrados. Mismo tipo de fallo
   que el de la sección 16, pero con `margin` en vez de `display`. */
.bloque-destacado {
	background: var(--color-gris-fondo);
	border: 1px solid var(--color-gris-borde);
	border-radius: var(--radio);
	padding: 1.25rem 1.35rem;
	margin-top: 1.5rem;
	margin-bottom: 1.5rem;
}

.bloque-destacado h2 { margin-top: 0; }

.lista-novedades { margin-bottom: 0; }

.faq-item {
	background: var(--color-blanco);
	border: 1px solid var(--color-gris-borde);
	border-radius: var(--radio);
	margin-bottom: .6rem;
	padding: .2rem .9rem;
}

.faq-item summary {
	cursor: pointer;
	font-weight: 700;
	color: var(--color-azul);
	padding: .7rem 0;
	list-style-position: outside;
}

.faq-item[open] summary { border-bottom: 1px solid var(--color-gris-borde); margin-bottom: .7rem; }

/* --- CTA hacia la fuente oficial --- */
.cta-oficial {
	display: block;
	background: var(--color-azul);
	color: var(--color-blanco);
	border-radius: var(--radio);
	padding: 1.25rem;
	margin: 1.75rem 0;
	text-align: center;
}

.cta-oficial p { color: rgba(255, 255, 255, .92); margin-bottom: .9rem; }
.cta-oficial .boton-cta { background: var(--color-verde); border-color: var(--color-verde); }

/* =========================================================================
   12. Archivos, búsqueda y paginación
   ========================================================================= */
.cabecera-archivo { margin-bottom: 1.75rem; }
.cabecera-archivo__descripcion { color: var(--color-texto-suave); max-width: 68ch; }

.pagination { margin-top: 2rem; }

.pagination .nav-links {
	display: flex;
	flex-wrap: wrap;
	gap: .4rem;
	justify-content: center;
}

.pagination .page-numbers {
	display: inline-block;
	padding: .5rem .85rem;
	border: 1px solid var(--color-gris-borde);
	border-radius: var(--radio);
	text-decoration: none;
	font-weight: 600;
}

.pagination .page-numbers.current {
	background: var(--color-azul);
	border-color: var(--color-azul);
	color: var(--color-blanco);
}

/* =========================================================================
   13. Formularios
   ========================================================================= */
.formulario-contacto { margin: 1.5rem 0; }

.formulario-campo { display: flex; flex-direction: column; gap: .3rem; margin-bottom: 1rem; }

.formulario-campo label { font-weight: 700; font-size: .92rem; }

.formulario-nota {
	font-size: .88rem;
	color: var(--color-texto-suave);
	background: var(--color-gris-fondo);
	border-radius: var(--radio);
	padding: .7rem .9rem;
}

/* Honeypot: fuera de la vista pero sin `display:none`, que algunos bots detectan. */
.campo-trampa {
	position: absolute;
	left: -9999px;
	height: 0;
	overflow: hidden;
}

.aviso-formulario {
	padding: .85rem 1rem;
	border-radius: var(--radio);
	margin-bottom: 1rem;
	font-weight: 600;
}

.aviso-formulario--ok { background: #E1F2E8; border: 1px solid var(--color-verde); color: var(--color-verde-oscuro); }
.aviso-formulario--error { background: #FDECEA; border: 1px solid #C0392B; color: #922B21; }

.mapa-contacto { margin: 1rem 0; border-radius: var(--radio); overflow: hidden; }
.mapa-contacto iframe { display: block; width: 100%; }
.nota-mapa { font-size: .85rem; color: var(--color-texto-suave); }

/* =========================================================================
   14. Mapa del sitio
   ========================================================================= */
.mapa-sitio__lista { list-style: none; padding: 0; }

.mapa-sitio__lista li { margin-bottom: .35rem; }

.mapa-sitio__lista--columnas { columns: 2; column-gap: 1.5rem; }

@media (min-width: 780px) {
	.mapa-sitio__lista--columnas { columns: 3; }
}

.mapa-sitio__cuenta { color: var(--color-texto-suave); font-size: .85rem; }

/* =========================================================================
   15. Pie de página
   ========================================================================= */
.site-footer {
	background: var(--color-azul-oscuro);
	color: rgba(255, 255, 255, .88);
	margin-top: 3rem;
}

.site-footer a { color: var(--color-blanco); }
.site-footer a:hover { color: var(--color-verde-claro); }

.site-footer__inner {
	display: grid;
	gap: 2rem;
	padding-top: 2.5rem;
	padding-bottom: 2.5rem;
}

@media (min-width: 720px) {
	.site-footer__inner { grid-template-columns: 1.4fr 1fr 1fr 1.2fr; }
}

/* Versión sobre fondo azul oscuro: mismo criterio que el `logo-white.svg` de
   España — escudo blanco, check azul y "Ya" en el verde claro, que es el que
   se lee sobre oscuro. */
.site-footer .logo__marca { color: var(--color-blanco); }
.site-footer .logo__ya { color: var(--color-verde-claro); }
.site-footer .logo__usa { color: rgba(255, 255, 255, .72); }
.site-footer .logo__escudo { fill: var(--color-blanco); }
.site-footer .logo__check { stroke: var(--color-azul); }

.site-footer__aviso { font-size: .88rem; margin: .9rem 0; }

.site-footer__titulo {
	font-size: .82rem;
	text-transform: uppercase;
	letter-spacing: .07em;
	color: var(--color-blanco);
	margin: 0 0 .75rem;
}

.site-footer__lista { list-style: none; padding: 0; margin: 0; font-size: .93rem; }
.site-footer__lista li { margin-bottom: .45rem; }
.site-footer__lista--datos { color: rgba(255, 255, 255, .8); }

.site-footer__editar { font-size: .82rem; margin-top: .75rem; }

.site-footer__copy {
	border-top: 1px solid rgba(255, 255, 255, .14);
	padding: 1rem 0;
	font-size: .85rem;
}

.site-footer__copy p { margin: 0; }

/* --- Tarjeta del sitio hermano de España --- */
/* Va sobre fondo claro a propósito, rompiendo con el azul oscuro del pie: así
   se lee de un vistazo como "otro sitio" y no como una sección más de
   AyudasYaUSA. El logo va en los colores originales de España por el mismo
   motivo — dos logos blancos casi idénticos en el mismo pie serían justo la
   confusión que hay que evitar. Márgenes uno a uno, nunca con el atajo
   `margin` (ver la sección 17). */
.sitio-hermano {
	display: flex;
	flex-direction: column;
	gap: .85rem;
	background: var(--color-gris-fondo);
	border: 1px solid var(--color-gris-borde);
	border-radius: var(--radio);
	padding: 1.1rem 1.25rem;
	margin-bottom: 2.5rem;
	text-decoration: none;
	transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}

/* Gana al `.site-footer a { color: #fff }` de más arriba: dentro de la tarjeta
   el texto es oscuro. */
.site-footer .sitio-hermano,
.site-footer .sitio-hermano:hover {
	color: var(--color-texto);
}

.sitio-hermano:hover,
.sitio-hermano:focus-visible {
	border-color: var(--color-azul-claro);
	box-shadow: var(--sombra);
	transform: translateY(-1px);
}

.sitio-hermano__marca {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	flex: 0 0 auto;
}

.sitio-hermano__icono { flex: 0 0 auto; }

.sitio-hermano__wordmark {
	font-size: 1.15rem;
	font-weight: 800;
	letter-spacing: -.02em;
	line-height: 1.1;
	white-space: nowrap;
	color: var(--color-texto);
}

.sitio-hermano__ya { color: var(--color-verde); }

.sitio-hermano__texto {
	display: flex;
	flex-direction: column;
	gap: .15rem;
	flex: 1 1 auto;
	min-width: 0;
}

.sitio-hermano__titulo {
	font-weight: 700;
	font-size: .95rem;
	line-height: 1.35;
	color: var(--color-texto);
}

.sitio-hermano__descripcion {
	font-size: .87rem;
	line-height: 1.5;
	color: var(--color-texto-suave);
}

.sitio-hermano__cta {
	display: inline-flex;
	align-items: center;
	gap: .35rem;
	flex: 0 0 auto;
	align-self: flex-start;
	font-weight: 700;
	font-size: .88rem;
	color: var(--color-azul);
	white-space: nowrap;
}

.sitio-hermano:hover .sitio-hermano__cta,
.sitio-hermano:focus-visible .sitio-hermano__cta { text-decoration: underline; }

.sitio-hermano__flecha { font-size: .95em; }

@media (min-width: 720px) {
	.sitio-hermano {
		flex-direction: row;
		align-items: center;
		gap: 1.25rem;
		padding: 1rem 1.35rem;
	}

	/* La marca se separa del texto con una línea vertical para que quede claro
	   dónde acaba el logo de España y dónde empieza la explicación. */
	.sitio-hermano__marca {
		padding-right: 1.25rem;
		border-right: 1px solid var(--color-gris-borde);
	}

	.sitio-hermano__cta { align-self: center; }
}

/* =========================================================================
   16. Capa de visibilidad (va la última a propósito)
   =========================================================================
   Reglas con selector compuesto para cada elemento que aparece o desaparece
   según el ancho. Van al final y con dos clases para que ganen siempre a la
   regla de componente correspondiente, pase lo que pase con el orden del
   archivo. Detectado renderizando el tema de verdad: sin esto, el botón
   hamburguesa seguía visible en escritorio porque `.boton-menu` se declara
   después de `.solo-movil` con la misma especificidad.
   ========================================================================= */
.site-header__inner .boton-menu.solo-movil { display: inline-flex; }
.site-header__inner .menu-principal.solo-escritorio { display: none; }

@media (min-width: 900px) {
	.site-header__inner .boton-menu.solo-movil { display: none; }
	.site-header__inner .menu-principal.solo-escritorio { display: block; }
}

/* =========================================================================
   17. Capa de centrado (también va la última a propósito)
   =========================================================================
   `.contenedor` se combina con clases de componente (`bloque-destacado`,
   `hero__inner`, `site-header__inner`…). Si alguna de esas clases declara el
   atajo `margin`, se lleva por delante el `margin: 0 auto` de `.contenedor`
   que vive en style.css, porque este archivo se encola después y la
   especificidad es la misma. Esta línea reinstaura el centrado horizontal
   pase lo que pase con el orden, sin tocar los márgenes verticales de cada
   componente (por ejemplo el `margin-top` negativo de `.buscador-portada`).
   ========================================================================= */
.contenedor { margin-inline: auto; }