/*
Theme Name: Compás Vital
Theme URI:
Description: Tema de bloques (FSE) para Compás Vital — portal editorial de bienestar funcional para adultos 50+. Sistema de diseño v2.1 (#18605A verde petróleo, Figtree 19px, capa de movimiento). Tema completo, autónomo.
Author: Compas Vital
Author URI:
Version: 3.35.0
Requires at least: 6.7
Requires PHP: 7.2
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: compas-vital
Tags: blog, full-site-editing
*/

/*
 * ─── SISTEMA DE DISEÑO v2 ─────────────────────────────────────────────────────
 * Fuente única de verdad: DESIGN-SYSTEM.md
 * Color de marca: #18605A (verde petróleo, teal-800). Acento de acción: #A8502B (clay-600).
 *
 * Contraste verificado sobre fondo #FAF8F4:
 *   ink #1E2A2D        13.8:1  AAA   → texto cuerpo
 *   teal-800 #18605A    6.9:1  AA    → títulos, CTAs, links (AAA en tamaño grande)
 *   blanco / teal-800   7.4:1  AAA   → texto sobre fondo de marca
 *   muted #5C6A6E       5.3:1  AA    → secundario
 *   clay-600 #A8502B    5.1:1  AA    → acción
 *
 * Regla de oro: ningún valor de color, tamaño o espacio fuera de las escalas.
 * El acento clay se reserva a la ACCIÓN. Eyebrows y enlaces de método en teal-600.
 */

/* ── Tokens ────────────────────────────────────────────────────────────────── */
:root {
	/* Petróleo — primario (marca). Base teal-800 #18605A. Tokens siguen llamándose --cv-teal-* */
	--cv-teal-50:#F1F9F8;  --cv-teal-100:#DCEFED; --cv-teal-200:#BADEDA;
	--cv-teal-300:#8CC5BF; --cv-teal-400:#4DB3A8; --cv-teal-500:#309188;
	--cv-teal-600:#22776E; --cv-teal-700:#1C6961; --cv-teal-800:#18605A;
	--cv-teal-900:#10423D;
	/* Clay — acento/acción */
	--cv-clay-50:#F9F1EB;  --cv-clay-100:#F4E2D7; --cv-clay-200:#EAC7B3;
	--cv-clay-300:#DEA282; --cv-clay-400:#D1794D; --cv-clay-500:#BC592F;
	--cv-clay-600:#A8502B; --cv-clay-700:#8C4121; --cv-clay-800:#713219;
	--cv-clay-900:#552311;
	/* Neutros cálidos — papel */
	--cv-sand-50:#FAF8F4;  --cv-sand-100:#F5EFE9; --cv-sand-200:#ECE2D8;
	--cv-sand-300:#D8CDC7; --cv-sand-400:#B3A69D; --cv-sand-500:#8A7D75;
	/* Tinta y profundidad */
	--cv-ink:#1E2A2D; --cv-muted:#5C6A6E;
	/* Superficie de profundidad — cálida (sustituye al antiguo teal frío #E6EFF0) */
	--cv-surface-teal:#F5EFE9;
	/* Panel de sección — blanco roto cálido (menos beige que sand-100, más claro que el fondo) */
	--cv-panel:#FDFCFA;
	/* Semánticos */
	--cv-success:#4F7355; --cv-success-soft:#E2EDE2;
	--cv-warning:#8F6020; --cv-warning-soft:#F6E9D4;
	/* Alias semánticos */
	--cv-primary:var(--cv-teal-800);  --cv-primary-hover:var(--cv-teal-600);
	--cv-accent:var(--cv-clay-600);   --cv-accent-hover:var(--cv-clay-700);
	--cv-accent-soft:var(--cv-clay-100);
	--cv-background:var(--cv-sand-50); --cv-surface:var(--cv-sand-100);
	--cv-line:var(--cv-sand-300);
	/* Tipografía */
	--cv-lh-tight:1.15; --cv-lh-snug:1.3; --cv-lh-body:1.65;
	--cv-tracking-tight:-0.015em; --cv-tracking-label:0.08em; --cv-measure:68ch;
	/* Forma */
	--cv-radius-sm:8px; --cv-radius-md:12px; --cv-radius-lg:20px; --cv-radius-pill:50px;
	/* Movimiento — curva premium (entrada suave), única en todo el tema */
	--cv-ease:cubic-bezier(0.16, 1, 0.3, 1);
	/* Sombras (tinta transparente, nunca gris opaco) */
	--cv-shadow-sm:0 1px 2px rgba(30,42,45,.06);
	--cv-shadow-md:0 4px 6px rgba(30,42,45,.07), 0 1px 3px rgba(30,42,45,.05);
	--cv-shadow-lg:0 10px 20px rgba(30,42,45,.08), 0 3px 6px rgba(30,42,45,.05);
	--cv-shadow-xl:0 20px 32px rgba(30,42,45,.10), 0 6px 10px rgba(30,42,45,.05);
	/* Gutter lateral responsive del contenedor. Móvil 24 → ≥600px 32 → ≥900px 48. Todo en escala. */
	--cv-gutter:24px;
}

/* El gutter crece en tablet y escritorio para que el contenido respire */
@media (min-width: 600px) { :root { --cv-gutter:32px; } }
@media (min-width: 900px) { :root { --cv-gutter:48px; } }

/* ── Correcciones editoriales sobre Twenty Twenty-Five ─────────────────────── */

body {
	background-color: var(--cv-background);
	color: var(--cv-ink);
}

/* Padding lateral del contenido editorial FSE (fichas, guías, páginas, archivos):
   estas plantillas no usan .cv-wrap, así que el contenido tocaba el borde en móvil/tablet.
   La Home usa .cv-wrap (sections.css) y queda fuera de esta regla. */
.single main,
.page:not(.home) main,
.archive main,
.search main,
.error404 main {
	padding-inline: var(--cv-gutter);
}

/* Limita el ancho de lectura en contenido de post */
.entry-content > p,
.entry-content > ul,
.entry-content > ol,
.entry-content > blockquote {
	max-width: var(--cv-measure);
}

/* Aumenta la separación entre grupos de contenido */
.wp-block-group + .wp-block-group {
	margin-top: 48px;
}

/* Metadatos de post: de-enfatizados (terciario) */
.entry-meta,
.wp-block-post-date,
.wp-block-post-terms {
	font-size: 0.875rem;        /* 14px — etiqueta */
	color: var(--cv-muted);     /* 5.3:1 ✓ */
	letter-spacing: var(--cv-tracking-label);
	text-transform: uppercase;
}

/* Extractos: secundario */
.wp-block-post-excerpt__excerpt {
	color: var(--cv-ink);
	line-height: var(--cv-lh-body);
}

/* Títulos de tarjetas en listados */
.wp-block-post-title a {
	color: var(--cv-primary);   /* teal-800 #18605A — 6.9:1 ✓ */
	text-decoration: none;
}

.wp-block-post-title a:hover {
	color: var(--cv-primary-hover);  /* teal-600 */
}

/* Separadores entre secciones */
.wp-block-separator {
	border-color: var(--cv-line);
	opacity: 1;
}

/* Citas — borde de marca */
.wp-block-quote {
	border-left: 3px solid var(--cv-primary);
	padding-left: 24px;
	margin-left: 0;
	color: var(--cv-ink);
}

/* Botón primario — clay de acción, oversized (≥52px) con micro-interacción premium */
.wp-block-button__link,
.wp-element-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 52px;
	background-color: var(--cv-accent);
	color: #FFFFFF;
	border-radius: var(--cv-radius-pill);
	padding: 14px 28px;
	font-size: 1rem;            /* 16px — legible en botón */
	font-weight: 700;
	letter-spacing: 0.02em;
	box-shadow: var(--cv-shadow-sm);
	transition: background-color 0.25s ease, transform 0.4s var(--cv-ease), box-shadow 0.4s var(--cv-ease);
}

.wp-block-button__link:hover,
.wp-element-button:hover {
	background-color: var(--cv-accent-hover);  /* clay-700 */
	transform: translateY(-2px);
	box-shadow: var(--cv-shadow-lg);
}

/* Botón secundario (outline) — teal de marca */
.wp-block-button.is-style-outline .wp-block-button__link {
	background-color: transparent;
	color: var(--cv-primary);
	border: 2px solid var(--cv-primary);
}

.wp-block-button.is-style-outline .wp-block-button__link:hover {
	background-color: var(--cv-primary);
	color: #FFFFFF;
}

/* Tarjetas con sombra de elevación */
.wp-block-post {
	background-color: #FFFFFF;
	box-shadow: var(--cv-shadow-md);
	border-radius: var(--cv-radius-md);
	overflow: hidden;
	transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.wp-block-post:hover {
	box-shadow: var(--cv-shadow-lg);
	transform: translateY(-3px);
}

/* Imágenes de post: relación de aspecto fija, sin distorsión */
.wp-block-post-featured-image img {
	aspect-ratio: 16 / 9;
	object-fit: cover;
	width: 100%;
	display: block;
}

/* Focus accesible — obligatorio para 55+ con teclado */
:focus-visible {
	outline: 2px solid var(--cv-primary);
	outline-offset: 3px;
}

/* Respeto a quien reduce movimiento */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation: none !important;
		transition: none !important;
	}
}