/*
Theme Name: La Cruda Realidad
Theme URI: http://cruda-realidad.test
Author: La Cruda Realidad
Author URI: http://cruda-realidad.test
Description: Tema clásico, editorial y neutral para un sitio de datos y verificación cívica sobre Nuevo León. Variante "Dossier oscuro": fondo negro, tipografía de periódico de datos (Fraunces + Inter), acento rojo sobrio.
Version: 2.0.0
Requires at least: 6.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: cruda-realidad
*/

/* ============================================================
   Fuentes propias (self-hosted) — Telegraf (títulos) + Hyperwave (marcador)
   ============================================================ */
@font-face{
	font-family:"Telegraf";
	src:url("assets/fonts/Telegraf-UltraLight.woff2.html") format("woff2");
	font-weight:200; font-style:normal; font-display:swap;
}
@font-face{
	font-family:"Telegraf";
	src:url("assets/fonts/Telegraf-Regular.woff2.html") format("woff2");
	font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
	font-family:"Telegraf";
	src:url("assets/fonts/Telegraf-UltraBold.woff2.html") format("woff2");
	font-weight:800; font-style:normal; font-display:swap;
}
@font-face{
	font-family:"Hyperwave One";
	src:url("assets/fonts/Hyperwave-One.woff2.html") format("woff2");
	font-weight:400; font-style:normal; font-display:swap;
}

/* ============================================================
   Tokens — Dossier oscuro
   ============================================================ */
:root{
	--bg:#0b0b0b;            /* fondo global */
	--panel:#141414;         /* paneles / tarjetas */
	--panel-2:#1b1b1b;       /* panel secundario (columna "realidad") */
	--panel-3:#1f1f1f;       /* número gigante de fondo */
	--line:#2a2a2a;          /* líneas / bordes */
	--line-2:#232323;
	--ink:#ececec;           /* texto */
	--ink-2:#c9c9c9;
	--muted:#8f8f8f;         /* atenuado */
	--white:#ffffff;

	--accent:#E11414;        /* rojo acento */
	--accent-strong:#ff2d2d; /* rojo hover / labels */
	--accent-ink:#ff2d2d;
	--accent-soft:#2a1414;

	/* compat con estilos previos */
	--surface:#141414;
	--surface-2:#141414;
	--surface-3:#1b1b1b;
	--gold:#c8912f;
	--gold-soft:#e6c079;
	--night:#0b0b0b;
	--night-2:#111111;

	--maxw:1280px;
	--radius:16px;
	--radius-sm:12px;
	--shadow:0 1px 2px rgba(0,0,0,.5);
	--shadow-lg:0 18px 40px -18px rgba(0,0,0,.7);
	--sans:"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--display:"Telegraf", "Arial Narrow", "Helvetica Neue", Impact, sans-serif;
	--marker:"Hyperwave One", "Telegraf", cursive;
	--serif:"Fraunces", Georgia, "Times New Roman", serif;
}

*{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; background:var(--bg); }
body{
	margin:0;
	font-family:var(--sans);
	color:var(--ink);
	background:var(--bg);
	line-height:1.65;
	font-size:17px;
	-webkit-font-smoothing:antialiased;
	text-rendering:optimizeLegibility;
}
a{ color:var(--accent-strong); }
img{ max-width:100%; height:auto; }
.wrap{ max-width:var(--maxw); margin:0 auto; padding:0 24px; }

h1,h2,h3,.display{ font-family:var(--display); font-weight:700; letter-spacing:-.01em; color:var(--ink); }

/* ============================================================
   Header — oscuro sticky con blur, logo grande
   ============================================================ */
.site-header{
	border-bottom:1px solid var(--line);
	background:rgba(11,11,11,.85);
	backdrop-filter:saturate(140%) blur(10px);
	position:sticky; top:0; z-index:50;
}
.site-header__inner{
	display:flex; align-items:center; justify-content:space-between;
	gap:20px; padding:20px 0;
}
.brand{ display:flex; align-items:center; gap:15px; text-decoration:none; color:var(--ink); }
.brand__logo{ height:60px; width:auto; flex:0 0 auto; display:block; }
.brand__logo svg{ width:100%; height:100%; display:block; }
.brand__text{ display:flex; flex-direction:column; line-height:1.1; }
.brand__name{ font-family:var(--display); font-weight:800; font-size:1.18rem; letter-spacing:-.02em; color:var(--white); }
.brand__sub{ font-size:.74rem; color:var(--muted); letter-spacing:.03em; text-transform:uppercase; }
.main-nav ul,.main-nav .menu{ list-style:none; display:flex; gap:26px; margin:0; padding:0; }
.main-nav a{ text-decoration:none; color:var(--muted); font-size:.93rem; font-weight:600; position:relative; transition:color .18s ease; }
.main-nav a:hover{ color:var(--white); }
.main-nav a::after{ content:""; position:absolute; left:0; right:0; bottom:-6px; height:2px; background:var(--accent); transform:scaleX(0); transform-origin:left; transition:transform .2s ease; }
.main-nav a:hover::after{ transform:scaleX(1); }
.nav-toggle{ display:none; flex-direction:column; gap:5px; align-items:center; justify-content:center; width:46px; height:46px; background:var(--panel); border:1px solid var(--line); border-radius:10px; cursor:pointer; padding:0; }
.nav-toggle span{ width:20px; height:2px; background:var(--ink); border-radius:2px; transition:transform .2s ease, opacity .2s ease; }
.nav-toggle.is-open span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.nav-toggle.is-open span:nth-child(2){ opacity:0; }
.nav-toggle.is-open span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

/* ============================================================
   Hero — centrado en negro, kicker rojo, barra roja
   ============================================================ */
.hero{
	position:relative;
	background:radial-gradient(1100px 460px at 50% -20%, #1a0a0a 0%, rgba(26,10,10,0) 62%), var(--bg);
	color:var(--ink);
	overflow:hidden;
	border-bottom:1px solid var(--line);
}
.hero::before{
	content:""; position:absolute; inset:0;
	background-image:radial-gradient(rgba(255,255,255,.045) 1px, transparent 1px);
	background-size:22px 22px;
	-webkit-mask-image:linear-gradient(180deg, #000 0%, transparent 80%);
	mask-image:linear-gradient(180deg, #000 0%, transparent 80%);
	pointer-events:none;
}
.hero__inner{ position:relative; display:grid; grid-template-columns:1.15fr .85fr; gap:40px; align-items:center; padding:88px 24px 80px; }
.hero__eyebrow{ font-family:var(--marker); display:inline-flex; align-items:center; gap:14px; text-transform:uppercase; letter-spacing:.04em; font-size:clamp(1.5rem, 4.2vw, 2.1rem); line-height:1.02; font-weight:400; color:var(--accent-strong); }
.hero__eyebrow::before{ content:""; width:22px; height:2px; background:var(--accent-strong); display:inline-block; }
.hero h1{ font-size:clamp(2rem, 4vw, 2.5rem); line-height:1.08; margin:.6rem 0 .6rem; color:var(--white); font-weight:800; }
.hero h1 em{ font-style:normal; color:var(--accent-strong); }
.hero h1::after{ content:""; display:block; width:120px; height:4px; background:var(--accent); border-radius:3px; margin:20px 0 0; }
.hero__sub{ font-family:var(--serif); font-style:italic; font-size:1.3rem; color:var(--muted); margin:1rem 0 1rem; font-weight:500; }
.hero__intro{ font-size:1.06rem; color:var(--muted); max-width:52ch; }
.hero__art{ position:relative; }
.hero__art svg{ width:100%; height:auto; filter:drop-shadow(0 20px 40px rgba(0,0,0,.6)); }

/* ============================================================
   Secciones + banda de métricas
   ============================================================ */
.section{ padding:64px 0; }
.section--tight{ padding:44px 0; }
.section--tint{ background:var(--panel); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.section__head{ margin-bottom:32px; max-width:70ch; }
.section__eyebrow{ font-family:var(--marker); display:inline-block; text-transform:uppercase; letter-spacing:.04em; font-size:clamp(1.45rem, 3.6vw, 1.9rem); line-height:1.02; font-weight:400; color:var(--accent-strong); }
.section__title{ font-size:clamp(1.6rem,2.6vw,2.15rem); margin:.4rem 0 .4rem; color:var(--white); }
.section__desc{ color:var(--muted); font-size:1.04rem; margin:0; }

.crc-metricas{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; margin:0; }
.crc-metrica{
	--c:var(--accent);
	position:relative;
	border:1px solid var(--line);
	border-radius:12px;
	background:var(--panel);
	padding:24px 22px 22px;
	overflow:hidden;
	box-shadow:var(--shadow);
	transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.crc-metrica::before{ content:""; position:absolute; left:0; top:0; height:4px; width:100%; background:var(--accent); }
.crc-metrica:hover{ transform:translateY(-3px); border-color:var(--accent); box-shadow:0 18px 38px -20px rgba(225,20,20,.45); }
.crc-metrica__icon{ width:42px; height:42px; border-radius:12px; margin-bottom:12px; background:var(--accent-soft); color:var(--accent-strong); display:inline-flex; align-items:center; justify-content:center; }
.crc-metrica__icon svg{ width:22px; height:22px; }
.crc-metrica__cifra{ font-family:var(--display); font-size:2rem; font-weight:800; letter-spacing:-.03em; color:var(--white); line-height:1; }
.crc-metrica__delta{ color:var(--accent-strong); font-weight:800; }
.crc-metrica__sub{ margin-top:.5rem; font-size:.85rem; color:var(--muted); line-height:1.4; }

/* ============================================================
   Cards de Temas — oscuras, número gigante de fondo
   ============================================================ */
.cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.card{
	--c:var(--accent);
	position:relative;
	display:flex; flex-direction:column;
	border:1px solid var(--line); border-radius:var(--radius);
	background:var(--panel); padding:28px 24px 24px; text-decoration:none; color:inherit;
	overflow:hidden;
	box-shadow:var(--shadow);
	transition:border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.card::after{ content:attr(data-num); position:absolute; right:10px; bottom:-30px; font-family:var(--display); font-weight:900; font-size:8rem; line-height:1; color:var(--panel-3); pointer-events:none; z-index:0; }
.card:hover{ border-color:var(--accent); transform:translateY(-5px); box-shadow:0 22px 46px -20px rgba(225,20,20,.5); }
.card > *{ position:relative; z-index:1; }
.card__top{ display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; }
.card__icon{
	width:50px; height:50px; border-radius:14px;
	background:linear-gradient(135deg, var(--accent), #7a0d0d);
	color:#fff; display:inline-flex; align-items:center; justify-content:center;
	box-shadow:0 8px 18px -6px rgba(225,20,20,.55);
}
.card__icon svg{ width:26px; height:26px; }
.card__num{ display:none; }
.card__title{ font-family:var(--display); font-size:1.26rem; font-weight:700; margin:0 0 .5rem; line-height:1.2; color:var(--white); }
.card__excerpt{ font-size:.94rem; color:var(--muted); margin:0; flex:1 0 auto; }
.card__more{ margin-top:16px; font-size:.86rem; font-weight:800; color:var(--accent-strong); display:inline-flex; align-items:center; gap:6px; }
.card:hover .card__more{ gap:10px; }

/* ============================================================
   Article / single
   ============================================================ */
.article-hero{
	--c:var(--accent);
	position:relative; overflow:hidden;
	background:
		radial-gradient(700px 260px at 90% -40%, #1a0a0a 0%, transparent 70%),
		var(--bg);
	border-bottom:1px solid var(--line);
	padding:60px 0 44px;
}
.article-hero::after{
	content:""; position:absolute; right:-40px; top:-30px; width:260px; height:260px; border-radius:50%;
	border:2px dashed rgba(225,20,20,.35); opacity:.6;
}
.article-hero__meta{ position:relative; display:flex; align-items:center; gap:14px; margin-bottom:16px; }
.article-hero__icon{
	width:58px; height:58px; border-radius:16px;
	background:linear-gradient(135deg, var(--accent), #7a0d0d);
	color:#fff; display:inline-flex; align-items:center; justify-content:center;
	box-shadow:0 12px 24px -8px rgba(225,20,20,.55);
}
.article-hero__icon svg{ width:30px; height:30px; }
.article-hero__eyebrow{ font-family:var(--marker); display:inline-block; text-transform:uppercase; letter-spacing:.04em; font-size:clamp(1.45rem, 3.6vw, 1.9rem); line-height:1.02; font-weight:400; color:var(--accent-strong); }
.article-hero__num{ font-family:var(--display); font-size:.9rem; color:var(--muted); font-weight:700; }
.article-hero__title{ position:relative; font-size:clamp(2rem,3.4vw,2.9rem); line-height:1.06; margin:.2rem 0 0; max-width:20ch; color:var(--white); }

.article{ padding:44px 0 20px; }
.entry-content{ --c:var(--accent); max-width:1040px; margin:0 auto; font-size:1.06rem; color:var(--ink); counter-reset:ctx; }
.entry-content > p, .entry-content > h2, .entry-content > h3, .entry-content > h4, .entry-content > ul:not(.hechos), .entry-content > ol, .entry-content > blockquote{ max-width:760px; margin-left:0; margin-right:0; }
.entry-content > figure, .entry-content .crc-figura, .entry-content .crc-grafica, .entry-content > .extra{ margin-left:0; margin-right:0; }
.entry-content .crc-comparativa{ margin-left:0; margin-right:0; }
.entry-content h2{ font-family:var(--display); font-size:1.55rem; margin:2.4rem 0 .7rem; color:var(--white); }
.entry-content h2::before{ content:""; display:block; width:48px; height:4px; background:var(--accent); margin-bottom:.7rem; border-radius:3px; }
.entry-content h3{ font-size:1.15rem; margin:1.4rem 0 .5rem; color:var(--white); }
.entry-content p{ margin:0 0 1.1rem; }
.entry-content blockquote{ border-left:3px solid var(--accent); margin:1.4rem 0; padding:.4rem 0 .4rem 20px; color:var(--ink-2); font-style:italic; }
.entry-content a{ color:var(--accent-strong); }

/* Los hechos — riel lateral oscuro */
.hechos{ list-style:none; margin:1.4rem 0 2rem; padding:0; counter-reset:hecho; display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:16px; }
.hechos li{
	position:relative;
	border:1px solid var(--line); border-radius:16px;
	background:linear-gradient(90deg, var(--panel-2) 0, var(--panel-2) 63px, var(--line) 63px, var(--line) 64px, var(--panel) 64px);
	padding:20px 22px 16px 84px;
	line-height:1.55; color:var(--ink-2); font-size:1.02rem;
	box-shadow:0 2px 4px rgba(0,0,0,.4), 0 20px 36px -26px rgba(0,0,0,.8);
	transition:border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.hechos li:hover{ border-color:var(--accent); box-shadow:0 2px 4px rgba(0,0,0,.4), 0 26px 44px -26px rgba(225,20,20,.5); transform:translateY(-2px); }
.hechos li::before{
	counter-increment:hecho; content:counter(hecho,decimal-leading-zero);
	position:absolute; left:0; top:20px; width:64px; text-align:center;
	font-family:var(--display); font-weight:900; font-size:1.7rem; color:var(--accent-strong); font-variant-numeric:tabular-nums;
}
.hechos li .fuente{ display:block; margin-top:13px; font-size:.82rem; }
.hechos li .fuente a{ display:inline-flex; align-items:center; gap:6px; color:var(--accent-strong); font-weight:800; text-decoration:none; }
.hechos li .fuente a:hover{ color:var(--white); }
@media (max-width:600px){
	.hechos{ grid-template-columns:1fr; }
	.hechos li{ padding:58px 20px 16px 20px; background:var(--panel); }
	.hechos li::before{ top:16px; left:20px; width:38px; height:38px; line-height:38px; text-align:center; border:1px solid var(--line); border-radius:10px; background:var(--panel-2); font-size:1.15rem; }
}

/* Contexto y datos adicionales — índice + tinte oscuro */
.entry-content > h3:has(+ .extra){
	counter-increment:ctx; max-width:none;
	font-family:var(--display); font-weight:600; font-size:1.3rem; color:var(--white); line-height:1.2;
	background:var(--panel);
	border:1px solid var(--line); border-bottom:0;
	border-radius:16px 16px 0 0; margin:1.9rem 0 0; padding:20px 24px 0;
}
.entry-content > h3:has(+ .extra)::before{
	content:"Contexto · " counter(ctx,decimal-leading-zero);
	display:block; font-family:var(--sans); font-size:.66rem; font-weight:800;
	letter-spacing:.12em; text-transform:uppercase;
	color:var(--accent-strong); margin-bottom:9px;
}
.extra{
	max-width:none;
	background:var(--panel);
	border:1px solid var(--line); border-top:0;
	border-radius:0 0 16px 16px; margin:0 0 1.4rem; padding:6px 24px 20px;
	font-size:1rem; color:var(--ink-2); line-height:1.7;
}
.backlink{ display:inline-flex; align-items:center; gap:8px; margin:30px 0; font-size:.92rem; font-weight:800; color:var(--accent-strong); text-decoration:none; }

/* Archive list */
.archive-list{ display:grid; grid-template-columns:repeat(2,1fr); gap:22px; margin-top:8px; }

/* ============================================================
   Footer — oscuro, borde superior, logo más grande
   ============================================================ */
.site-footer{ border-top:1px solid var(--line); background:var(--bg); color:var(--muted); margin-top:56px; position:relative; overflow:hidden; }
.site-footer::before{ content:""; position:absolute; inset:0; background-image:radial-gradient(rgba(255,255,255,.04) 1px, transparent 1px); background-size:22px 22px; -webkit-mask-image:linear-gradient(0deg,#000,transparent 70%); mask-image:linear-gradient(0deg,#000,transparent 70%); }
.site-footer .wrap{ position:relative; padding-top:52px; padding-bottom:52px; }
.site-footer__brand{ display:inline-flex; align-items:center; gap:14px; margin-bottom:12px; }
.site-footer__brand svg{ width:52px; height:52px; }
.site-footer__brand .brand__logo{ height:52px; }
/* El logotipo ya incluye el nombre: ocultamos el texto duplicado junto a él */
.site-footer__brand > span{ display:none; }
.brand .brand__text{ display:none; }
.site-footer__brand span{ font-family:var(--display); font-weight:800; color:var(--white); font-size:1.12rem; }
.site-footer__note{ font-weight:600; color:var(--ink-2); font-size:1.05rem; }
.site-footer__links{ list-style:none; display:flex; gap:22px; padding:0; margin:16px 0 0; flex-wrap:wrap; }
.site-footer__links a{ color:var(--muted); text-decoration:none; font-size:.92rem; font-weight:500; transition:color .18s ease; }
.site-footer__links a:hover{ color:var(--accent-strong); }
.site-footer__meta{ margin-top:20px; font-size:.8rem; color:#5b5b5b; max-width:70ch; }

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width:960px){
	.hero__inner{ grid-template-columns:1fr; gap:24px; padding:64px 24px 56px; }
	.hero__art{ max-width:440px; }
	.cards{ grid-template-columns:repeat(2,1fr); }
	.crc-metricas{ grid-template-columns:repeat(2,1fr); }
	.archive-list{ grid-template-columns:1fr; }
}
/* Menú móvil (hamburguesa) */
@media (max-width:960px){
	.nav-toggle{ display:flex; }
	.main-nav{
		display:none; position:absolute; top:100%; left:0; right:0;
		background:rgba(11,11,11,.97); border-top:1px solid var(--line); border-bottom:1px solid var(--line);
		box-shadow:0 16px 30px -12px rgba(0,0,0,.6);
	}
	.main-nav.is-open{ display:block; }
	.main-nav ul,.main-nav .menu{ flex-direction:column; gap:0; padding:6px 24px 14px; }
	.main-nav li{ width:100%; }
	.main-nav a{ display:block; padding:13px 2px; border-bottom:1px solid var(--line-2); font-size:1rem; }
	.main-nav a::after{ display:none; }
}
@media (max-width:600px){
	.cards{ grid-template-columns:1fr; }
	body{ font-size:16px; }
	.crc-metricas{ grid-template-columns:repeat(2,1fr); }
}

/* ============================================================
   HOME — FASE 1 (rediseño Dossier oscuro)
   ============================================================ */
/* Placeholder de imagen reutilizable (se sustituye por foto real) */
.cr-photoph{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
	font-family:var(--marker); text-transform:uppercase; letter-spacing:.06em; font-size:1rem; color:#6f6f6f;
	background:repeating-linear-gradient(45deg,#191919,#191919 12px,#151515 12px,#151515 24px); }
.cr-photoph--corner{ inset:auto 0 0 0; height:auto; justify-content:flex-end; padding:8px 10px; background:none; font-size:.72rem; color:#7a7a7a; }

/* --- Collage de portadas en la columna derecha del hero (donde iba la gráfica) --- */
/* Más presencia: llena la columna con más alto y recorta con object-fit:cover (sin deformar). */
/* --- Collage del hero: recortes de prensa reales --- */
.hero__art--collage{ position:relative; }
.collage{ position:relative; height:clamp(300px, 40vw, 460px); border-radius:10px; overflow:hidden; background:#0d0d0d; }
.collage__pieza{ position:absolute; overflow:hidden; box-shadow:0 18px 38px -14px rgba(0,0,0,.9); border-radius:2px; }
.collage__pieza img{ width:100%; height:100%; object-fit:cover; display:block; filter:grayscale(.55) contrast(1.12); }
.collage__cinta{ position:absolute; left:0; right:0; bottom:0; background:rgba(225,20,20,.92); color:#fff;
	font-family:var(--display); font-weight:800; text-transform:uppercase; letter-spacing:.04em;
	font-size:clamp(.52rem,1.05vw,.68rem); line-height:1.2; padding:6px 8px; }
.collage__pieza--papel{ background:#efe9dc; }
.collage__medio{ display:block; font-family:var(--display); font-weight:800; text-transform:uppercase;
	letter-spacing:.12em; font-size:clamp(.46rem,.9vw,.58rem); color:#8d1010; padding:10px 12px 0; }
.collage__texto{ display:block; font-family:Georgia,"Times New Roman",serif; font-weight:700; color:#14110d;
	font-size:clamp(.68rem,1.3vw,.86rem); line-height:1.2; padding:6px 12px 12px; }
.collage__vineta{ position:absolute; inset:0; pointer-events:none;
	background:radial-gradient(120% 90% at 50% 45%, transparent 45%, rgba(0,0,0,.8) 100%); }

.collage__pieza--1{ width:46%; height:52%; top:3%;  left:1%;  transform:rotate(-4deg); z-index:2; }
.collage__pieza--2{ width:38%; height:34%; top:0;   left:52%; transform:rotate(5deg);  z-index:1; }
.collage__pieza--3{ width:42%; height:46%; top:44%; left:8%;  transform:rotate(3deg);  z-index:4; }
.collage__pieza--4{ width:44%; height:50%; top:36%; left:53%; transform:rotate(-6deg); z-index:3; }
.collage__pieza--5{ width:30%; height:26%; top:12%; left:34%; transform:rotate(-2deg); z-index:5; opacity:.92; }

@media (max-width:960px){
	.collage{ height:clamp(250px, 52vw, 360px); }
	/* En pantallas angostas el recorte chico del centro estorba más de lo que aporta. */
	.collage__pieza--5{ display:none; }
}

/* --- Título grande de sección (sin eyebrow) --- */
.section__title--lead{ font-size:clamp(1.8rem,3.4vw,2.5rem); color:var(--white); margin:0 0 26px; max-width:24ch; }
.section__head--wide{ max-width:none; }
.section__head--wide .section__title--lead{ max-width:32ch; }

/* --- Cifras (4 tarjetas con foto + enlace) --- */
.cifras-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.cifra-card{ position:relative; display:flex; flex-direction:column; overflow:hidden;
	background:var(--panel); border:1px solid var(--line); border-radius:14px;
	text-decoration:none; color:inherit; box-shadow:0 1px 2px rgba(0,0,0,.5);
	transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.cifra-card:hover{ transform:translateY(-5px); border-color:var(--accent); box-shadow:0 22px 46px -20px rgba(225,20,20,.5); }
.cifra-card__media{ position:relative; aspect-ratio:16/10; background:#1b1b1b center/cover no-repeat; border-bottom:1px solid var(--line); }
.cifra-card__body{ display:flex; flex-direction:column; padding:18px 20px 20px; }
.cifra-card__num{ font-family:var(--display); font-weight:800; font-size:2.1rem; line-height:1; color:var(--white); }
.cifra-card__delta{ font-family:var(--sans); color:var(--accent-strong); font-weight:800; font-size:1rem; margin-left:9px; }
.cifra-card__label{ color:var(--muted); font-size:.9rem; margin-top:.5rem; line-height:1.4; }
.cifra-card__more{ margin-top:14px; font-size:.82rem; font-weight:800; color:var(--accent-strong); }
.cifra-card:hover .cifra-card__more{ letter-spacing:.02em; }

/* --- Mapa en la home: márgenes cómodos --- */
.home-mapa{ max-width:1040px; margin:0 auto; }
.home-mapa__nota{ max-width:1040px; margin:20px auto 0; padding:18px 20px; background:var(--panel); border:1px solid var(--line);
	border-left:4px solid var(--accent); border-radius:12px; font-size:.9rem; color:var(--ink-2); line-height:1.7; }
.home-mapa__nota strong{ display:block; font-family:var(--display); font-size:1.02rem; margin-bottom:6px; color:var(--white); }

/* --- Diez frentes: cuadrícula con imagen por tema --- */
.frentes-grid{ display:grid; grid-template-columns:repeat(5,1fr); gap:16px; }
.frente-card{ position:relative; display:flex; flex-direction:column; overflow:hidden;
	background:var(--panel); border:1px solid var(--line); border-radius:14px; text-decoration:none; color:inherit;
	box-shadow:0 1px 2px rgba(0,0,0,.5); transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.frente-card:hover{ transform:translateY(-4px); border-color:var(--accent); box-shadow:0 20px 40px -20px rgba(225,20,20,.5); }
.frente-card__media{ position:relative; aspect-ratio:4/3; background:#1b1b1b center/cover no-repeat; border-bottom:1px solid var(--line); }
.frente-card__num{ position:absolute; left:12px; top:6px; z-index:1; font-family:var(--display); font-weight:900; font-size:2.6rem; line-height:1; color:var(--panel-3); }
.frente-card__title{ padding:14px 16px; font-family:var(--display); font-weight:700; font-size:1.05rem; line-height:1.2; color:var(--white); }
.frente-card:hover .frente-card__title{ color:var(--accent-strong); }

/* --- CTA "Ver todos los temas" --- */
.frentes-cta{ display:flex; align-items:center; justify-content:center; gap:18px; margin-top:34px;
	padding:26px 28px; border:2px solid var(--accent); border-radius:16px; text-decoration:none;
	background:var(--accent); color:#fff;
	font-family:var(--display); font-weight:800; text-transform:uppercase; letter-spacing:.07em; font-size:clamp(1.2rem,2.4vw,1.65rem);
	box-shadow:0 18px 40px -18px rgba(225,20,20,.75);
	transition:background .18s ease, transform .18s ease, box-shadow .18s ease; }
.frentes-cta:hover{ background:#c11010; transform:translateY(-3px); box-shadow:0 24px 52px -18px rgba(225,20,20,.9); }
.frentes-cta__arrow{ color:#fff; font-weight:800; transition:transform .18s ease; }
.frentes-cta:hover .frentes-cta__arrow{ transform:translateX(6px); }

@media (max-width:960px){
	.cifras-grid{ grid-template-columns:repeat(2,1fr); }
	.frentes-grid{ grid-template-columns:repeat(3,1fr); }
}
@media (max-width:600px){
	.cifras-grid{ grid-template-columns:1fr; }
	.frentes-grid{ grid-template-columns:repeat(2,1fr); }
	.frente-card__num{ font-size:2rem; }
}