/*
Theme Name: Dichos y más
Description: Tema a medida para dichosymas.com. Diccionario de dichos y frases hechas del español: pensado para leer, para consultar y para cargar rápido. Sin frameworks, sin jQuery, sin dependencias externas.
Version: 1.1.0
Author: dichosymas.com
Requires PHP: 8.1
Text Domain: dichosymas
*/

/* ==========================================================================
   Sistema visual
   --------------------------------------------------------------------------
   La referencia no es un blog: es un diccionario de autor. Papel cálido, tinta
   oscura, una serif con carácter para los titulares y mucho aire alrededor del
   texto. El color se reserva casi por completo para una sola cosa: informar del
   nivel de certeza del origen, que es el eje editorial del sitio.
   ========================================================================== */

:root {
	/* Papel y tinta */
	--papel:        #FBF8F3;
	--papel-2:      #F4EFE6;
	--papel-3:      #EAE3D6;
	--tinta:        #1C1917;
	--tinta-2:      #44403C;
	--tinta-3:      #78716C;
	--linea:        #DED5C6;

	/* Acento: teja. Evoca lo tradicional sin caer en el tópico del rojigualda. */
	--acento:       #B4472A;
	--acento-suave: #F6E9E4;
	--acento-osc:   #8C3620;

	/* Segundo acento para elementos de navegación */
	--verde:        #2C5F5A;
	--verde-suave:  #E4EDEB;

	/* Semántica de certeza. Es el único color que "significa" algo. */
	--c-documentado: #1A7F37;
	--c-probable:    #6D7F1A;
	--c-disputado:   #B8860B;
	--c-desmentido:  #C0392B;
	--c-desconocido: #78716C;

	--c-documentado-bg: #E8F5EC;
	--c-probable-bg:    #F1F4E4;
	--c-disputado-bg:   #FBF2DC;
	--c-desmentido-bg:  #FBE9E7;
	--c-desconocido-bg: #F0EEEB;

	/* Tipografía */
	--serif:  "Source Serif 4", Charter, Georgia, "Times New Roman", serif;
	--titulo: "Fraunces", "Source Serif 4", Georgia, serif;
	--sans:   system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--mono:   ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

	/* Métrica */
	--ancho-texto: 41rem;
	--ancho-total: 76rem;
	--radio:       10px;
	--radio-s:     6px;
	--sombra:      0 1px 2px rgba(28, 25, 23, .06), 0 6px 20px rgba(28, 25, 23, .05);
	--sombra-alta: 0 2px 6px rgba(28, 25, 23, .08), 0 18px 44px rgba(28, 25, 23, .10);
}

@media (prefers-color-scheme: dark) {
	:root:not([data-tema="claro"]) {
		--papel:        #14120F;
		--papel-2:      #1D1A16;
		--papel-3:      #272320;
		--tinta:        #F0EAE0;
		--tinta-2:      #C9C1B5;
		--tinta-3:      #948C80;
		--linea:        #332E28;

		--acento:       #E4795A;
		--acento-suave: #2E1B14;
		--acento-osc:   #F0937A;

		--verde:        #7FB5AE;
		--verde-suave:  #16231F;

		--c-documentado: #4ADE80;
		--c-probable:    #B5C94A;
		--c-disputado:   #E8B84B;
		--c-desmentido:  #F98A7A;
		--c-desconocido: #A8A29E;

		--c-documentado-bg: #12251A;
		--c-probable-bg:    #1E2312;
		--c-disputado-bg:   #2A2312;
		--c-desmentido-bg:  #2B1815;
		--c-desconocido-bg: #221F1C;

		--sombra:      0 1px 2px rgba(0, 0, 0, .4), 0 6px 20px rgba(0, 0, 0, .3);
		--sombra-alta: 0 2px 6px rgba(0, 0, 0, .5), 0 18px 44px rgba(0, 0, 0, .4);
	}
}

[data-tema="oscuro"] {
	--papel:        #14120F;
	--papel-2:      #1D1A16;
	--papel-3:      #272320;
	--tinta:        #F0EAE0;
	--tinta-2:      #C9C1B5;
	--tinta-3:      #948C80;
	--linea:        #332E28;
	--acento:       #E4795A;
	--acento-suave: #2E1B14;
	--acento-osc:   #F0937A;
	--verde:        #7FB5AE;
	--verde-suave:  #16231F;
	--c-documentado: #4ADE80;
	--c-probable:    #B5C94A;
	--c-disputado:   #E8B84B;
	--c-desmentido:  #F98A7A;
	--c-desconocido: #A8A29E;
	--c-documentado-bg: #12251A;
	--c-probable-bg:    #1E2312;
	--c-disputado-bg:   #2A2312;
	--c-desmentido-bg:  #2B1815;
	--c-desconocido-bg: #221F1C;
	--sombra:      0 1px 2px rgba(0, 0, 0, .4), 0 6px 20px rgba(0, 0, 0, .3);
	--sombra-alta: 0 2px 6px rgba(0, 0, 0, .5), 0 18px 44px rgba(0, 0, 0, .4);
}

/* ==========================================================================
   Base
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
	margin: 0;
	background: var(--papel);
	color: var(--tinta);
	font-family: var(--serif);
	font-size: 1.0625rem;
	line-height: 1.7;
	font-synthesis-weight: none;
	text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
	font-family: var(--titulo);
	line-height: 1.2;
	color: var(--tinta);
	margin: 0 0 .5em;
	font-weight: 600;
	letter-spacing: -.01em;
}
h1 { font-size: clamp(2rem, 1.4rem + 2.6vw, 3.1rem); letter-spacing: -.02em; }
h2 { font-size: clamp(1.4rem, 1.2rem + .8vw, 1.85rem); margin-top: 2.2em; }
h3 { font-size: 1.2rem; margin-top: 1.8em; }

p { margin: 0 0 1.15em; }

a { color: var(--acento); text-decoration-thickness: 1px; text-underline-offset: .18em; }
a:hover { color: var(--acento-osc); }

img { max-width: 100%; height: auto; }

hr { border: 0; border-top: 1px solid var(--linea); margin: 2.5rem 0; }

:focus-visible {
	outline: 2px solid var(--acento);
	outline-offset: 3px;
	border-radius: 2px;
}

.saltar {
	position: absolute; left: -9999px;
	background: var(--acento); color: #fff;
	padding: .7rem 1.1rem; border-radius: 0 0 var(--radio-s) 0; z-index: 100;
}
.saltar:focus { left: 0; top: 0; }

.oculto {
	position: absolute; width: 1px; height: 1px;
	padding: 0; margin: -1px; overflow: hidden;
	clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* ==========================================================================
   Estructura
   ========================================================================== */

.contenedor {
	width: 100%;
	max-width: var(--ancho-total);
	margin-inline: auto;
	padding-inline: clamp(1rem, 4vw, 2.5rem);
}

.estrecho { max-width: calc(var(--ancho-texto) + 8rem); }

/* ==========================================================================
   Cabecera
   ========================================================================== */

.cabecera {
	border-bottom: 1px solid var(--linea);
	background: color-mix(in srgb, var(--papel) 88%, transparent);
	backdrop-filter: saturate(1.4) blur(10px);
	position: sticky; top: 0; z-index: 50;
}

.cabecera-fila {
	display: flex; align-items: center; gap: 1.25rem;
	min-height: 4.25rem;
}

/* ---------- Marca ----------
   Las comillas angulares son el signo con el que el español marca la cita, y
   un dicho no es otra cosa que una cita de nadie. Enmarcar el nombre entre
   ellas dice de qué va el sitio antes de leer una palabra, y a la vez lo aleja
   de las comillas inglesas que usaría cualquier marca genérica. */
.marca {
	font-family: var(--titulo);
	font-weight: 700; font-size: 1.3rem;
	color: var(--tinta); text-decoration: none;
	letter-spacing: -.02em; white-space: nowrap;
	display: inline-flex; align-items: baseline; gap: .18rem;
	transition: color .15s;
}
.marca-c {
	color: var(--acento);
	font-size: 1.45em;
	font-weight: 400;
	line-height: 0;
	position: relative;
	top: .06em;
	transition: transform .18s ease;
}
.marca:hover .marca-c:first-of-type { transform: translateX(-2px); }
.marca:hover .marca-c:last-of-type  { transform: translateX(2px); }
.marca-y {
	color: var(--acento);
	font-style: italic;
	font-weight: 500;
	padding: 0 .06em;
}
.marca:hover { color: var(--tinta); }

/* En el pie la marca se ve sobre fondo distinto y algo mayor. */
.pie .marca { font-size: 1.2rem; }

.nav { display: flex; gap: 1.35rem; margin-left: auto; align-items: center; }
.nav a {
	font-family: var(--sans); font-size: .875rem; font-weight: 500;
	color: var(--tinta-2); text-decoration: none;
}
.nav a:hover { color: var(--acento); }

.btn-tema {
	background: none; border: 1px solid var(--linea); color: var(--tinta-2);
	width: 2.1rem; height: 2.1rem; border-radius: 50%;
	cursor: pointer; display: grid; place-items: center; font-size: .95rem;
	line-height: 1;
}
.btn-tema:hover { border-color: var(--acento); color: var(--acento); }

@media (max-width: 46rem) {
	.nav a.opcional { display: none; }
}

/* ==========================================================================
   Buscador
   ========================================================================== */

.buscador { position: relative; }

.buscador-caja {
	display: flex; align-items: center; gap: .6rem;
	background: var(--papel-2);
	border: 1.5px solid var(--linea);
	border-radius: 999px;
	padding: .55rem 1.1rem;
	transition: border-color .15s, box-shadow .15s;
}
.buscador-caja:focus-within {
	border-color: var(--acento);
	box-shadow: 0 0 0 4px var(--acento-suave);
}
.buscador input {
	flex: 1; border: 0; background: none; outline: 0;
	font-family: var(--sans); font-size: 1rem; color: var(--tinta);
	min-width: 0;
}
.buscador input::placeholder { color: var(--tinta-3); }
.buscador svg { flex: none; color: var(--tinta-3); }
.buscador button[type="submit"] {
	border: 0; background: var(--acento); color: #fff;
	font-family: var(--sans); font-weight: 600; font-size: .875rem;
	padding: .45rem 1.05rem; border-radius: 999px; cursor: pointer;
}
.buscador button[type="submit"]:hover { background: var(--acento-osc); }

.buscador-grande .buscador-caja { padding: .9rem 1.3rem; font-size: 1.1rem; }
.buscador-grande input { font-size: 1.1rem; }

.sugerencias {
	position: absolute; inset-inline: 0; top: calc(100% + .5rem);
	background: var(--papel);
	border: 1px solid var(--linea); border-radius: var(--radio);
	box-shadow: var(--sombra-alta);
	overflow: hidden; z-index: 60; display: none;
}
.sugerencias.visible { display: block; }
.sugerencias a {
	display: block; padding: .7rem 1.1rem; text-decoration: none;
	border-bottom: 1px solid var(--linea);
}
.sugerencias a:last-child { border-bottom: 0; }
.sugerencias a:hover, .sugerencias a.activa { background: var(--papel-2); }
.sugerencias strong {
	display: block; font-family: var(--titulo); font-size: 1rem;
	color: var(--tinta); font-weight: 600;
}
.sugerencias small {
	display: block; font-family: var(--sans); font-size: .8rem;
	color: var(--tinta-3); margin-top: .1rem;
}

/* ==========================================================================
   Sello de certeza: el elemento identitario del sitio
   ========================================================================== */

.certeza {
	display: inline-flex; align-items: center; gap: .45rem;
	font-family: var(--sans); font-size: .78rem; font-weight: 600;
	letter-spacing: .01em;
	padding: .32rem .75rem; border-radius: 999px;
	border: 1px solid currentColor;
}
.certeza::before {
	content: ""; width: .5rem; height: .5rem; border-radius: 50%;
	background: currentColor; flex: none;
}
.certeza-documentado { color: var(--c-documentado); background: var(--c-documentado-bg); }
.certeza-probable    { color: var(--c-probable);    background: var(--c-probable-bg); }
.certeza-disputado   { color: var(--c-disputado);   background: var(--c-disputado-bg); }
.certeza-desmentido  { color: var(--c-desmentido);  background: var(--c-desmentido-bg); }
.certeza-desconocido { color: var(--c-desconocido); background: var(--c-desconocido-bg); }

/* Aviso grande dentro de la ficha */
.aviso-certeza {
	display: flex; gap: .9rem; align-items: flex-start;
	padding: 1rem 1.15rem; border-radius: var(--radio);
	border-left: 4px solid currentColor;
	font-family: var(--sans); font-size: .92rem; line-height: 1.55;
	margin: 1.5rem 0;
}
.aviso-certeza strong { display: block; margin-bottom: .15rem; font-size: .95rem; }
.aviso-certeza p { margin: 0; color: var(--tinta-2); }
.aviso-documentado { color: var(--c-documentado); background: var(--c-documentado-bg); }
.aviso-probable    { color: var(--c-probable);    background: var(--c-probable-bg); }
.aviso-disputado   { color: var(--c-disputado);   background: var(--c-disputado-bg); }
.aviso-desmentido  { color: var(--c-desmentido);  background: var(--c-desmentido-bg); }
.aviso-desconocido { color: var(--c-desconocido); background: var(--c-desconocido-bg); }

/* ==========================================================================
   Etiquetas y metadatos
   ========================================================================== */

.chips { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }

.chip {
	display: inline-flex; align-items: center; gap: .3rem;
	font-family: var(--sans); font-size: .78rem; font-weight: 500;
	color: var(--tinta-2); background: var(--papel-2);
	border: 1px solid var(--linea); border-radius: 999px;
	padding: .28rem .7rem; text-decoration: none;
}
.chip:hover { border-color: var(--acento); color: var(--acento); background: var(--acento-suave); }
.chip-fuerte { background: var(--verde-suave); border-color: transparent; color: var(--verde); }

/* ==========================================================================
   Ficha del dicho
   ========================================================================== */

.migas {
	font-family: var(--sans); font-size: .8rem; color: var(--tinta-3);
	margin: 1.75rem 0 1.25rem; display: flex; flex-wrap: wrap; gap: .4rem;
}
.migas a { color: var(--tinta-3); text-decoration: none; }
.migas a:hover { color: var(--acento); text-decoration: underline; }
.migas span[aria-hidden] { opacity: .5; }

/* La columna principal lleva su propio ancho máximo.
   Antes lo llevaba solo el texto redactado (.cuerpo) y el resto de bloques
   —países, ejemplos, preguntas frecuentes, fuentes— se estiraban hasta el borde
   de la columna. Resultado: el texto quedaba más estrecho que todo lo demás y
   los bordes no coincidían. Limitando la columna entera, todos los bloques
   comparten el mismo ancho y la medida de lectura sigue siendo cómoda. */
.ficha { display: grid; gap: 3rem; align-items: start; padding-bottom: 4rem; }
@media (min-width: 62rem) {
	.ficha { grid-template-columns: minmax(0, 44rem) 17.5rem; gap: 3.5rem; justify-content: start; }
}
@media (min-width: 84rem) {
	.ficha { justify-content: center; gap: 4.5rem; }
}

.ficha-cabecera { margin-bottom: 1.5rem; }
.ficha-cabecera h1 { margin-bottom: .6rem; }
.ficha-cabecera h1 .comilla { color: var(--tinta-3); font-weight: 400; }

.entradilla {
	font-size: 1.2rem; line-height: 1.6; color: var(--tinta-2);
	border-left: 3px solid var(--acento);
	padding-left: 1.2rem; margin: 1.6rem 0 2rem;
}
.entradilla p:last-child { margin-bottom: 0; }

/* Sin max-width propio: lo fija la columna, para que el texto quede alineado
   con las tarjetas de país, los ejemplos y las preguntas frecuentes. */
.cuerpo { max-width: none; }
.cuerpo h2 {
	padding-top: .3em;
	border-top: 1px solid var(--linea);
}
.cuerpo h2:first-of-type { border-top: 0; padding-top: 0; margin-top: 1.5em; }
.cuerpo ul, .cuerpo ol { padding-left: 1.3em; margin: 0 0 1.15em; }
.cuerpo li { margin-bottom: .4em; }
.cuerpo blockquote {
	margin: 1.6rem 0; padding: .2rem 0 .2rem 1.3rem;
	border-left: 3px solid var(--linea);
	color: var(--tinta-2); font-style: italic;
}
.cuerpo blockquote cite {
	display: block; font-style: normal; font-family: var(--sans);
	font-size: .82rem; color: var(--tinta-3); margin-top: .5rem;
}

/* Caja lateral con la ficha técnica */
.ficha-tecnica {
	background: var(--papel-2);
	border: 1px solid var(--linea);
	border-radius: var(--radio);
	padding: 1.3rem 1.4rem;
	font-family: var(--sans); font-size: .875rem;
}
@media (min-width: 62rem) {
	.ficha-tecnica { position: sticky; top: 6rem; }
}
.ficha-tecnica h2 {
	font-family: var(--sans); font-size: .72rem; font-weight: 700;
	text-transform: uppercase; letter-spacing: .09em;
	color: var(--tinta-3); margin: 0 0 1rem; border: 0; padding: 0;
}
.ficha-tecnica dl { margin: 0; display: grid; gap: .85rem; }
.ficha-tecnica dt {
	font-size: .7rem; font-weight: 700; text-transform: uppercase;
	letter-spacing: .07em; color: var(--tinta-3); margin-bottom: .18rem;
}
.ficha-tecnica dd { margin: 0; color: var(--tinta); line-height: 1.5; }
.ficha-tecnica dd a { color: var(--tinta); text-decoration-color: var(--linea); }
.ficha-tecnica dd a:hover { color: var(--acento); }

/* Usos por país: el bloque diferencial */
.paises-grid { display: grid; gap: .9rem; margin: 1.5rem 0 2rem; }
@media (min-width: 34rem) { .paises-grid { grid-template-columns: 1fr 1fr; } }

.pais-tarjeta {
	background: var(--papel-2); border: 1px solid var(--linea);
	border-radius: var(--radio); padding: 1rem 1.15rem;
}
.pais-tarjeta h3 {
	font-family: var(--sans); font-size: .95rem; font-weight: 700;
	margin: 0 0 .4rem; display: flex; align-items: center; gap: .45rem;
	color: var(--tinta);
}
.pais-bandera { font-size: 1.15rem; line-height: 1; }
.pais-tarjeta p { margin: 0 0 .5rem; font-size: .95rem; color: var(--tinta-2); }
.pais-tarjeta p:last-child { margin-bottom: 0; }
.pais-ejemplo {
	font-style: italic; color: var(--tinta-3);
	border-left: 2px solid var(--linea); padding-left: .7rem;
	font-size: .9rem;
}

/* Hipótesis de origen */
.hipotesis {
	border: 1px solid var(--linea); border-radius: var(--radio);
	padding: 1.1rem 1.25rem; margin: 1.2rem 0;
	background: var(--papel-2);
}
.hipotesis-cabecera {
	display: flex; flex-wrap: wrap; gap: .6rem; align-items: center;
	margin-bottom: .7rem;
}
.hipotesis-cabecera h3 { margin: 0; font-size: 1.05rem; }
.hipotesis p:last-child { margin-bottom: 0; }

/* Ejemplos de uso */
.ejemplos { list-style: none; padding: 0; margin: 1.2rem 0 2rem; display: grid; gap: .7rem; }
.ejemplos li {
	background: var(--papel-2); border-left: 3px solid var(--verde);
	padding: .75rem 1.05rem; border-radius: 0 var(--radio-s) var(--radio-s) 0;
	font-style: italic; color: var(--tinta-2);
}

/* Fuentes */
.fuentes {
	background: var(--papel-2); border: 1px dashed var(--linea);
	border-radius: var(--radio); padding: 1.1rem 1.3rem;
	font-family: var(--sans); font-size: .85rem; margin: 2rem 0;
}
.fuentes h2 {
	font-size: .72rem; text-transform: uppercase; letter-spacing: .09em;
	color: var(--tinta-3); font-family: var(--sans); margin: 0 0 .7rem;
	border: 0; padding: 0;
}
.fuentes ol { margin: 0; padding-left: 1.2rem; color: var(--tinta-2); }
.fuentes li { margin-bottom: .35rem; }

/* Preguntas frecuentes */
.faq { margin: 1.5rem 0 2.5rem; }
.faq details {
	border-bottom: 1px solid var(--linea);
	padding: .1rem 0;
}
.faq details:first-child { border-top: 1px solid var(--linea); }
.faq summary {
	cursor: pointer; padding: .95rem 2rem .95rem 0; position: relative;
	font-family: var(--titulo); font-size: 1.05rem; font-weight: 600;
	list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
	content: "+"; position: absolute; right: .3rem; top: 50%;
	transform: translateY(-50%); color: var(--acento);
	font-size: 1.4rem; font-weight: 400; line-height: 1;
	font-family: var(--sans);
}
.faq details[open] summary::after { content: "−"; }
.faq details > div { padding: 0 0 1.1rem; color: var(--tinta-2); }
.faq details > div p:last-child { margin-bottom: 0; }

/* ==========================================================================
   Tarjetas de listado
   ========================================================================== */

.rejilla { display: grid; gap: 1.1rem; }
@media (min-width: 40rem) { .rejilla { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 64rem) { .rejilla { grid-template-columns: repeat(3, 1fr); } }

.tarjeta {
	display: flex; flex-direction: column; gap: .55rem;
	background: var(--papel-2);
	border: 1px solid var(--linea); border-radius: var(--radio);
	padding: 1.15rem 1.3rem;
	text-decoration: none; color: inherit;
	transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.tarjeta:hover {
	transform: translateY(-2px);
	box-shadow: var(--sombra);
	border-color: var(--acento);
	color: inherit;
}
.tarjeta h2, .tarjeta h3 {
	font-size: 1.15rem; margin: 0; border: 0; padding: 0;
	line-height: 1.28; color: var(--tinta);
}
.tarjeta p {
	margin: 0; font-size: .92rem; color: var(--tinta-2); line-height: 1.5;
}
.tarjeta .chips { margin-top: auto; padding-top: .35rem; }

/* ==========================================================================
   Portada
   ========================================================================== */

.hero {
	padding: clamp(3rem, 8vw, 5.5rem) 0 clamp(2.5rem, 5vw, 3.5rem);
	text-align: center;
	border-bottom: 1px solid var(--linea);
}
.hero h1 {
	max-width: 22ch; margin-inline: auto; margin-bottom: .5rem;
	text-wrap: balance;
}
.hero .lema {
	font-size: 1.15rem; color: var(--tinta-2); max-width: 52ch;
	margin: 0 auto 2rem; text-wrap: pretty;
}
.hero .buscador { max-width: 40rem; margin-inline: auto; }
.hero-cifras {
	display: flex; flex-wrap: wrap; justify-content: center; gap: 1.6rem;
	margin-top: 1.6rem; font-family: var(--sans); font-size: .85rem;
	color: var(--tinta-3);
}
.hero-cifras b { color: var(--tinta); font-weight: 700; }

.seccion { padding: clamp(2.5rem, 6vw, 4rem) 0; }
.seccion-cabecera {
	display: flex; align-items: baseline; justify-content: space-between;
	gap: 1rem; margin-bottom: 1.5rem; flex-wrap: wrap;
}
.seccion-cabecera h2 { margin: 0; border: 0; padding: 0; }
.seccion-cabecera a {
	font-family: var(--sans); font-size: .875rem; font-weight: 500;
	text-decoration: none; white-space: nowrap;
}
.seccion-cabecera a:hover { text-decoration: underline; }

.intro-seccion {
	color: var(--tinta-2); max-width: 60ch; margin: -.75rem 0 1.5rem;
}

/* Navegación por facetas */
.facetas { display: grid; gap: .8rem; }
@media (min-width: 34rem) { .facetas { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 56rem) { .facetas { grid-template-columns: repeat(4, 1fr); } }

.faceta {
	display: flex; flex-direction: column; gap: .2rem;
	padding: 1.1rem 1.2rem; border-radius: var(--radio);
	background: var(--papel-2); border: 1px solid var(--linea);
	text-decoration: none; color: inherit;
	transition: border-color .15s, background .15s;
}
.faceta:hover { border-color: var(--acento); background: var(--acento-suave); color: inherit; }
.faceta b { font-family: var(--titulo); font-size: 1.05rem; font-weight: 600; }
.faceta span { font-family: var(--sans); font-size: .8rem; color: var(--tinta-3); }

/* ==========================================================================
   Paginación
   ========================================================================== */

.paginacion {
	display: flex; flex-wrap: wrap; gap: .4rem; justify-content: center;
	margin: 3rem 0 1rem; font-family: var(--sans); font-size: .9rem;
}
.paginacion .page-numbers {
	display: grid; place-items: center; min-width: 2.4rem; height: 2.4rem;
	padding: 0 .6rem; border: 1px solid var(--linea);
	border-radius: var(--radio-s); text-decoration: none; color: var(--tinta-2);
}
.paginacion .page-numbers:hover { border-color: var(--acento); color: var(--acento); }
.paginacion .page-numbers.current {
	background: var(--acento); border-color: var(--acento); color: #fff; font-weight: 600;
}
.paginacion .dots { border: 0; }

/* ==========================================================================
   Pie
   ========================================================================== */

.pie {
	border-top: 1px solid var(--linea);
	background: var(--papel-2);
	padding: 3rem 0 2rem;
	font-family: var(--sans); font-size: .875rem;
	color: var(--tinta-2);
	margin-top: 4rem;
}
.pie-rejilla { display: grid; gap: 2rem; }
@media (min-width: 48rem) { .pie-rejilla { grid-template-columns: 1.6fr 1fr 1fr 1fr; } }
.pie h3 {
	font-family: var(--sans); font-size: .72rem; font-weight: 700;
	text-transform: uppercase; letter-spacing: .09em; color: var(--tinta-3);
	margin: 0 0 .8rem;
}
.pie ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .45rem; }
.pie a { color: var(--tinta-2); text-decoration: none; }
.pie a:hover { color: var(--acento); text-decoration: underline; }
.pie-legal {
	margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid var(--linea);
	display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between;
	color: var(--tinta-3); font-size: .8rem;
}

/* ==========================================================================
   Metodología (bloque de confianza, clave para E-E-A-T)
   ========================================================================== */

.metodologia {
	background: var(--verde-suave);
	border-radius: var(--radio); padding: 1.4rem 1.6rem;
	font-family: var(--sans); font-size: .9rem; line-height: 1.6;
	color: var(--tinta-2); margin: 2.5rem 0;
}
.metodologia h2 {
	font-family: var(--sans); font-size: .95rem; margin: 0 0 .5rem;
	color: var(--verde); border: 0; padding: 0;
}
.metodologia p:last-child { margin-bottom: 0; }

/* ==========================================================================
   Publicidad: espacios reservados y contenidos
   --------------------------------------------------------------------------
   Se declaran con altura mínima para que la carga del anuncio no desplace el
   texto (evita el desplazamiento de diseño que penaliza en Core Web Vitals).
   ========================================================================== */

.anuncio {
	margin: 2.5rem auto; text-align: center;
	min-height: 280px; display: grid; place-items: center;
	background: var(--papel-2); border: 1px dashed var(--linea);
	border-radius: var(--radio);
	font-family: var(--sans); font-size: .75rem; color: var(--tinta-3);
	overflow: hidden;
}
.anuncio-horizontal { min-height: 100px; }
.anuncio[data-vacio="1"]::after { content: "Espacio publicitario"; }

/* ==========================================================================
   Compartir
   --------------------------------------------------------------------------
   Botones propios, sin los widgets oficiales de cada red: esos cargan cientos
   de kilobytes de JavaScript ajeno y rastrean al lector aunque no pulse nada.
   Aquí son enlaces normales a la URL de compartir de cada servicio, así que no
   se ejecuta código de terceros ni se envía ningún dato hasta que alguien
   decide compartir.
   ========================================================================== */

.compartir {
	margin: 2.5rem 0;
	padding: 1.2rem 1.3rem;
	background: var(--papel-2);
	border: 1px solid var(--linea);
	border-radius: var(--radio);
}
.compartir h2 {
	font-family: var(--sans); font-size: .72rem; font-weight: 700;
	text-transform: uppercase; letter-spacing: .09em; color: var(--tinta-3);
	margin: 0 0 .9rem; border: 0; padding: 0;
}
.compartir-botones { display: flex; flex-wrap: wrap; gap: .5rem; }

.compartir-btn {
	display: inline-flex; align-items: center; gap: .45rem;
	font-family: var(--sans); font-size: .85rem; font-weight: 500;
	padding: .5rem .85rem; border-radius: 999px;
	border: 1px solid var(--linea); background: var(--papel);
	color: var(--tinta-2); text-decoration: none; cursor: pointer;
	transition: border-color .15s, color .15s, background .15s, transform .12s;
}
.compartir-btn:hover {
	border-color: currentColor;
	transform: translateY(-1px);
	color: var(--tinta);
}
.compartir-btn svg { flex: none; }

/* Cada servicio conserva su color de marca solo al pasar por encima: en reposo
   la barra queda tranquila y no compite con el contenido. */
.cb-whatsapp:hover { color: #1FA855; background: color-mix(in srgb, #1FA855 8%, var(--papel)); }
.cb-telegram:hover { color: #2AABEE; background: color-mix(in srgb, #2AABEE 8%, var(--papel)); }
.cb-x:hover        { color: var(--tinta); background: var(--papel-3); }
.cb-facebook:hover { color: #1877F2; background: color-mix(in srgb, #1877F2 8%, var(--papel)); }
.cb-email:hover    { color: var(--verde); background: var(--verde-suave); }
.cb-copiar:hover   { color: var(--acento); background: var(--acento-suave); }
.cb-copiar.copiado { color: var(--c-documentado); background: var(--c-documentado-bg); border-color: currentColor; }

/* En móvil se ofrece primero el diálogo del sistema, que es lo que la gente
   espera: abre sus propias apps, incluidas las que aquí no salen. */
.compartir-nativo { display: none; }
@media (max-width: 46rem) {
	.compartir-nativo { display: inline-flex; }
	.compartir-btn.cb-facebook, .compartir-btn.cb-x { display: none; }
}

/* ==========================================================================
   Tarjeta de país destacada al llegar desde un enlace
   ========================================================================== */

.pais-tarjeta { scroll-margin-top: 6rem; }

/* Resalte breve al saltar a un país concreto desde las etiquetas de arriba,
   para que quede claro qué parte de la ficha responde a ese clic. */
.pais-tarjeta:target {
	border-color: var(--acento);
	box-shadow: 0 0 0 3px var(--acento-suave);
}
@media (prefers-reduced-motion: no-preference) {
	.pais-tarjeta:target { animation: destacar 1.6s ease-out 1; }
}
@keyframes destacar {
	0%   { background: var(--acento-suave); }
	100% { background: var(--papel-2); }
}

.pais-tarjeta-pie {
	margin-top: .7rem; padding-top: .6rem;
	border-top: 1px dashed var(--linea);
}
.pais-tarjeta-pie a {
	font-family: var(--sans); font-size: .78rem;
	color: var(--tinta-3); text-decoration: none;
}
.pais-tarjeta-pie a:hover { color: var(--acento); text-decoration: underline; }

/* La etiqueta de país que lleva al uso dentro de la propia ficha se distingue
   de la que sale al listado del país. */
.chip-ancla { border-style: dashed; }
.chip-ancla::after { content: "↓"; font-size: .9em; opacity: .55; margin-left: .1rem; }

/* ==========================================================================
   Impresión
   ========================================================================== */

@media print {
	.cabecera, .pie, .anuncio, .buscador, .paginacion, .relacionados { display: none !important; }
	body { background: #fff; color: #000; font-size: 11pt; }
	.ficha { display: block; }
	a { text-decoration: none; color: #000; }
	.cuerpo a::after { content: " (" attr(href) ")"; font-size: 8pt; color: #555; }
}