/*
Theme Name: ACANDA
Author: Precise Future SL
Author URI: https://precisefuture.com
Description: Tema propio de la web de ACANDA. Cada plantilla y cada componente trae su propio CSS y JS y se encola solo en la URL donde se usa. Los tipos de contenido, las taxonomías y los meta boxes viven en el plugin acanda-content.
Version: 0.1.0
Requires at least: 6.5
Requires PHP: 8.1
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: acanda
Domain Path: /languages
*/

/* Base global: tokens claro/oscuro, fuentes autoalojadas y estilos
 * mínimos. Dueño: módulo shell (#4; sistema de color v2: #48). */

/* =========================================================================
 * Cómo se usa este fichero
 * =========================================================================
 * - Es la ÚNICA hoja global. Lo que no es de todas las páginas va en el
 *   styles.css de su plantilla o de su componente.
 * - Dos capas de color (docs/PLANTILLAS.md §4):
 *   1. Escalas de 12 pasos (--pf-verde-1 … --pf-verde-12) con un papel fijo
 *      por paso, generadas en OKLCH por objetivo de contraste contra el fondo
 *      de cada tema. Un componente puede usar un paso directamente: el papel
 *      se cumple en claro y en oscuro.
 *   2. Tokens semánticos (--pf-color-…), los de siempre, que apuntan a un paso.
 * - Ningún componente escribe un color literal: solo var(--pf-…).
 * - Tema oscuro por preferencia del sistema. `data-pf-theme="dark|light"`
 *   en cualquier elemento fuerza un tema en ese subárbol (bandas oscuras,
 *   guía de estilo). Cada bloque de tema declara escalas Y semánticos (un
 *   semántico se resuelve donde se declara). Las dos vías del oscuro son
 *   gemelas: si cambias una, cambia la otra.
 */

/* -------------------------------------------------------------------------
 * 1. Fuentes autoalojadas (OFL 1.1, licencias en assets/fonts/)
 *    Subconjunto latino de Google Fonts: U+0000-00FF cubre ñ, á…ú, ü, ç,
 *    º ª « » · del castellano y del gallego. Variables en peso.
 * ---------------------------------------------------------------------- */

@font-face {
    font-family: "Comfortaa";
    font-style: normal;
    font-weight: 300 700;
    font-display: swap;
    src: url("assets/fonts/comfortaa-latin-wght.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: "JetBrains Mono";
    font-style: normal;
    font-weight: 100 800;
    font-display: swap;
    src: url("assets/fonts/jetbrains-mono-latin-wght.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Respaldo con las métricas de Comfortaa (calculadas sobre Arial): mientras
 * llega la fuente, el texto ocupa casi lo mismo y el cambio no mueve la
 * página. */
@font-face {
    font-family: "Comfortaa Fallback";
    src: local("Arial"), local("ArialMT"), local("Liberation Sans"), local("Helvetica");
    size-adjust: 119.2%;
    ascent-override: 73.9%;
    descent-override: 19.6%;
    line-gap-override: 0%;
}

/* -------------------------------------------------------------------------
 * 2. Tokens que no cambian con el tema
 * ---------------------------------------------------------------------- */

:root {
    color-scheme: light dark;

    /* Tipografía: Comfortaa para titulares y texto; JetBrains Mono para
     * etiquetas en mayúsculas. */
    --pf-font-sans: "Comfortaa", "Comfortaa Fallback", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    --pf-font-serif: Georgia, "Times New Roman", serif;
    --pf-font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;

    /* Escala tipográfica. Mínimos (#48): nada por debajo de 13px (xs, solo
     * etiquetas cortas); texto secundario ≥ 14px (sm); cuerpo 16px. */
    --pf-text-xs: 0.8125rem;
    --pf-text-sm: 0.875rem;
    --pf-text-base: 1rem;
    --pf-text-md: 1.125rem;
    --pf-text-lg: 1.25rem;
    --pf-text-xl: clamp(1.375rem, 1.25rem + 0.6vw, 1.625rem);
    --pf-text-2xl: clamp(1.625rem, 1.35rem + 1.2vw, 2.125rem);
    --pf-text-3xl: clamp(2rem, 1.5rem + 2.2vw, 2.75rem);
    --pf-text-4xl: clamp(2rem, 1.2rem + 3.6vw, 4rem);
    --pf-text-prose: clamp(1.0625rem, 1rem + 0.25vw, 1.125rem);

    /* Interlineado: párrafos ≥ 1,5 (normal y loose); tight y snug solo en
     * titulares y líneas sueltas. */
    --pf-leading-tight: 1.2;
    --pf-leading-snug: 1.3;
    --pf-leading-normal: 1.6;
    --pf-leading-loose: 1.7;

    /* Pesos (titulares del Plan: 700; texto: 400) */
    --pf-weight-regular: 400;
    --pf-weight-medium: 500;
    --pf-weight-bold: 600;
    --pf-weight-black: 700;

    /* Espaciado de letra de las etiquetas en mayúsculas. v1: 0,17 em, que a
     * 13px separaba tanto las letras que costaba leer la palabra. */
    --pf-tracking-caps: 0.06em;

    /* Espaciado (base 4px) */
    --pf-space-3xs: 0.25rem;
    --pf-space-2xs: 0.5rem;
    --pf-space-xs: 0.75rem;
    --pf-space-sm: 1rem;
    --pf-space-md: 1.5rem;
    --pf-space-lg: 2rem;
    --pf-space-xl: 3rem;
    --pf-space-2xl: 5rem;
    --pf-space-3xl: 7rem;

    /* Radios: tarjetas y nodos redondeados como en el ERP. */
    --pf-radius-sm: 4px;
    --pf-radius-md: 8px;
    --pf-radius-lg: 12px;
    --pf-radius-xl: 20px;
    --pf-radius-pill: 999px;
    --pf-radius-round: 50%;
    --pf-radius-card: var(--pf-radius-lg);
    --pf-radius-control: var(--pf-radius-md);

    /* Retícula y medida. --pf-container-narrow = $content_width (720). */
    --pf-container: 1120px;
    --pf-container-narrow: 720px;
    --pf-gutter: clamp(1rem, 0.5rem + 2.5vw, 1.5rem);
    --pf-measure: 66ch;
    --pf-measure-narrow: 45ch;
    --pf-space-section: clamp(3rem, 2rem + 4vw, 5rem);
    --pf-underline-offset: 0.15em;

    /* Puntos de ruptura (documentación; repítelos como literales en cada @media) */
    --pf-bp-md: 768px;
    --pf-bp-lg: 1025px;

    /* Capas */
    --pf-z-header: 100;
    --pf-z-overlay: 500;
    --pf-z-modal: 1000;

    --pf-transition: 180ms ease;
}

/* -------------------------------------------------------------------------
 * 3. Color — tema claro
 *    Fondo neutro frío aireado y superficies blancas, como el ERP. Valores
 *    generados (no se retocan a mano): objetivos de contraste, tonos y
 *    cromas en PLANTILLAS.md §4.2. 9 de cada escala = ancla, el mismo color
 *    en los dos temas; verde-9 es el verde ACANDA (el del isotipo en el ERP).
 * ---------------------------------------------------------------------- */

:root,
[data-pf-theme="light"] {
    /* Escalas: 1-2 fondos · 3-5 superficies y estados · 6-8 bordes (7 ≥ 3:1) ·
     * 9-10 rellenos (9 = ancla, igual en los dos temas) · 11 texto ≥ 4,5:1 · 12 texto. */
    --pf-neutro-1: #f7f8f9;
    --pf-neutro-2: #f0f3f4;
    --pf-neutro-3: #eaeff1;
    --pf-neutro-4: #e3e9eb;
    --pf-neutro-5: #dce3e5;
    --pf-neutro-6: #d0d8da;
    --pf-neutro-7: #7d888b;
    --pf-neutro-8: #707d80;
    --pf-neutro-9: #7e8b8e;
    --pf-neutro-10: #8b999c;
    --pf-neutro-11: #4f5e61;
    --pf-neutro-12: #0e2125;

    --pf-petroleo-1: #f4f9fa;
    --pf-petroleo-2: #eaf4f7;
    --pf-petroleo-3: #dff1f6;
    --pf-petroleo-4: #d3edf2;
    --pf-petroleo-5: #c8e7ef;
    --pf-petroleo-6: #b8dde5;
    --pf-petroleo-7: #628d97;
    --pf-petroleo-8: #52828d;
    --pf-petroleo-9: #5b919d;
    --pf-petroleo-10: #689fab;
    --pf-petroleo-11: #32626d;
    --pf-petroleo-12: #001a20;

    --pf-verde-1: #f1fbf6;
    --pf-verde-2: #e4f7ee;
    --pf-verde-3: #d4f6e5;
    --pf-verde-4: #c2f3dc;
    --pf-verde-5: #b2efd3;
    --pf-verde-6: #9be6c5;
    --pf-verde-7: #319772;
    --pf-verde-8: #008c64;
    --pf-verde-9: #009c71;
    --pf-verde-10: #00ac7d;
    --pf-verde-11: #00694b;
    --pf-verde-12: #002418;

    --pf-ocre-1: #fdf7ee;
    --pf-ocre-2: #fdf1de;
    --pf-ocre-3: #feeccd;
    --pf-ocre-4: #fee5bc;
    --pf-ocre-5: #fcdeac;
    --pf-ocre-6: #f4d297;
    --pf-ocre-7: #a68039;
    --pf-ocre-8: #9d731e;
    --pf-ocre-9: #c89425;
    --pf-ocre-10: #d7a236;
    --pf-ocre-11: #795500;
    --pf-ocre-12: #2b1c00;

    --pf-error-1: #fff6f4;
    --pf-error-2: #ffefed;
    --pf-error-3: #ffe9e7;
    --pf-error-4: #ffe1dd;
    --pf-error-5: #ffd9d4;
    --pf-error-6: #ffcac4;
    --pf-error-7: #d86258;
    --pf-error-8: #d34d45;
    --pf-error-9: #ed544c;
    --pf-error-10: #fd635a;
    --pf-error-11: #ad2926;
    --pf-error-12: #3f0c0a;

    --pf-aviso-1: #fff6ef;
    --pf-aviso-2: #fff0e5;
    --pf-aviso-3: #ffeada;
    --pf-aviso-4: #ffe3cd;
    --pf-aviso-5: #ffdbbe;
    --pf-aviso-6: #ffcda3;
    --pf-aviso-7: #bc7632;
    --pf-aviso-8: #b36812;
    --pf-aviso-9: #c97400;
    --pf-aviso-10: #d98119;
    --pf-aviso-11: #894d00;
    --pf-aviso-12: #321800;

    --pf-exito-1: #f3fbf4;
    --pf-exito-2: #e7f7ea;
    --pf-exito-3: #daf5df;
    --pf-exito-4: #cef1d4;
    --pf-exito-5: #c0ecc8;
    --pf-exito-6: #aee3b8;
    --pf-exito-7: #46965b;
    --pf-exito-8: #308b4b;
    --pf-exito-9: #2c9c51;
    --pf-exito-10: #3daa5e;
    --pf-exito-11: #116a32;
    --pf-exito-12: #06240f;

    --pf-info-1: #f4f9fd;
    --pf-info-2: #ebf4fd;
    --pf-info-3: #e1f0ff;
    --pf-info-4: #d7eaff;
    --pf-info-5: #cce4ff;
    --pf-info-6: #b8daff;
    --pf-info-7: #418ad1;
    --pf-info-8: #1f7dcf;
    --pf-info-9: #198ceb;
    --pf-info-10: #2f9afb;
    --pf-info-11: #005ea3;
    --pf-info-12: #00203d;

    /* Fondos */
    --pf-color-bg: var(--pf-neutro-1); /* fondo de página */
    --pf-color-bg-alt: var(--pf-neutro-2); /* bandas y paneles suaves */
    --pf-color-bg-inset: var(--pf-neutro-3); /* hundidos: código, celdas */
    --pf-color-bg-ink: var(--pf-petroleo-12); /* banda petróleo (oscura en los dos temas) */
    --pf-color-surface: #ffffff; /* tarjetas, nodos y campos (blancos en claro) */
    --pf-color-surface-raised: #ffffff; /* capas que flotan; van con sombra */

    /* Bordes */
    --pf-color-border: var(--pf-neutro-6); /* filetes y separadores (decorativo) */
    --pf-color-border-strong: var(--pf-neutro-7); /* borde de tarjeta al pasar (≥ 3:1) */
    --pf-color-border-control: var(--pf-neutro-7); /* borde de campos (≥ 3:1) */
    --pf-icon-guide: var(--pf-color-border-strong);
    --pf-rule: 1px solid var(--pf-color-border);

    /* Texto */
    --pf-color-text: var(--pf-neutro-12); /* texto */
    --pf-color-ink: var(--pf-neutro-12); /* alias de text (sistema PF) */
    --pf-color-heading: var(--pf-petroleo-12); /* titulares */
    --pf-color-text-soft: var(--pf-neutro-11); /* entradillas y descripciones (v2: = text-muted) */
    --pf-color-text-muted: var(--pf-neutro-11); /* etiquetas, metadatos, ayudas (≥ 4,5:1) */
    --pf-color-text-invert: var(--pf-neutro-1); /* texto sobre relleno contrario */
    --pf-color-on-ink: var(--pf-neutro-1); /* texto sobre bg-ink */

    /* Marca y acento */
    --pf-color-brand: var(--pf-verde-9); /* verde ACANDA: rellenos, iconos, texto ≥ 24px */
    --pf-color-brand-strong: var(--pf-verde-11); /* verde en texto normal */
    --pf-color-brand-soft: var(--pf-verde-3); /* fondo verde suave */
    --pf-color-accent: var(--pf-verde-9); /* relleno del CTA (el único de la página) */
    --pf-color-accent-hover: var(--pf-verde-10); /* CTA al pasar (más luminoso) */
    --pf-color-accent-text: var(--pf-verde-11); /* acento en texto */
    --pf-color-accent-soft: var(--pf-verde-3); /* fondo de acento suave */
    --pf-color-accent-edge: var(--pf-verde-8); /* borde de acento */
    --pf-color-on-accent: var(--pf-petroleo-12); /* rótulo sobre cualquier relleno 9-10 */
    --pf-color-link: var(--pf-verde-11); /* enlaces */
    --pf-color-link-hover: var(--pf-verde-12); /* enlace al pasar */
    --pf-color-focus: var(--pf-verde-8); /* anillo de foco (≥ 3:1) */
    --pf-color-ochre: var(--pf-ocre-9); /* ocre del Plan: decorativo */
    --pf-color-ochre-text: var(--pf-ocre-11); /* ocre en texto */

    /* Logo (isotipo, #50): rampa del degradado; la palabra va en heading */
    --pf-color-logo-luz: #00b080; /* L del PNG en tono 165; en oscuro, +0,085 de L */
    --pf-color-logo-sombra: #007453;
    --pf-color-logo-pliegue: #005e42;

    /* Estados */
    --pf-color-success: var(--pf-exito-11);
    --pf-color-success-soft: var(--pf-exito-3);
    --pf-color-success-border: var(--pf-exito-7);
    --pf-color-warning: var(--pf-aviso-11);
    --pf-color-warning-soft: var(--pf-aviso-3);
    --pf-color-warning-border: var(--pf-aviso-7);
    --pf-color-error: var(--pf-error-11);
    --pf-color-error-soft: var(--pf-error-3);
    --pf-color-error-border: var(--pf-error-7);
    --pf-color-info: var(--pf-info-11);
    --pf-color-info-soft: var(--pf-info-3);
    --pf-color-info-border: var(--pf-info-7);

    /* Elevación: sombras suaves del ERP, también en oscuro */
    --pf-shadow-sm: 0 1px 2px rgba(14, 33, 37, 0.06), 0 1px 1px rgba(14, 33, 37, 0.04);
    --pf-shadow-md: 0 4px 14px -4px rgba(14, 33, 37, 0.1), 0 2px 4px rgba(14, 33, 37, 0.04);
    --pf-shadow-lg: 0 14px 34px -10px rgba(14, 33, 37, 0.16), 0 4px 10px -2px rgba(14, 33, 37, 0.05);
    --pf-shadow-xl: 0 28px 64px -16px rgba(14, 33, 37, 0.22), 0 8px 18px -6px rgba(14, 33, 37, 0.06);
    /* Las mismas sombras para formas de SVG (filter), que no admiten box-shadow */
    --pf-drop-sm: drop-shadow(0 1px 1.5px rgba(14, 33, 37, 0.08));
    --pf-drop-md: drop-shadow(0 1px 2px rgba(14, 33, 37, 0.06)) drop-shadow(0 6px 10px rgba(14, 33, 37, 0.08));
}

/* -------------------------------------------------------------------------
 * 4. Color — tema oscuro (preferencia del sistema y forzado; gemelos)
 *    Fondo petróleo profundo; cada paso se calcula contra ese fondo, no se
 *    invierte el claro. Las superficies suben de luminosidad con la altura.
 * ---------------------------------------------------------------------- */

@media (prefers-color-scheme: dark) {
    :root:not([data-pf-theme="light"]) {
        --pf-neutro-1: #061f24;
        --pf-neutro-2: #0c262b;
        --pf-neutro-3: #112d31;
        --pf-neutro-4: #173337;
        --pf-neutro-5: #1e393d;
        --pf-neutro-6: #2b4246;
        --pf-neutro-7: #65797c;
        --pf-neutro-8: #728588;
        --pf-neutro-9: #7e8b8e;
        --pf-neutro-10: #89999d;
        --pf-neutro-11: #9dabad;
        --pf-neutro-12: #eff5f6;

        --pf-petroleo-1: #002026;
        --pf-petroleo-2: #00272e;
        --pf-petroleo-3: #002e36;
        --pf-petroleo-4: #00353e;
        --pf-petroleo-5: #013b44;
        --pf-petroleo-6: #0b454f;
        --pf-petroleo-7: #467d88;
        --pf-petroleo-8: #538a95;
        --pf-petroleo-9: #5b919d;
        --pf-petroleo-10: #5fa0af;
        --pf-petroleo-11: #83b0ba;
        --pf-petroleo-12: #e5f8fc;

        --pf-verde-1: #121e19;
        --pf-verde-2: #13271e;
        --pf-verde-3: #0e2f22;
        --pf-verde-4: #063625;
        --pf-verde-5: #003d29;
        --pf-verde-6: #004832;
        --pf-verde-7: #208562;
        --pf-verde-8: #11936b;
        --pf-verde-9: #009c71;
        --pf-verde-10: #00ac7d;
        --pf-verde-11: #3ebd8f;
        --pf-verde-12: #cdffe7;

        --pf-ocre-1: #201a10;
        --pf-ocre-2: #2a2212;
        --pf-ocre-3: #332710;
        --pf-ocre-4: #3c2d0e;
        --pf-ocre-5: #45310a;
        --pf-ocre-6: #523a09;
        --pf-ocre-7: #917031;
        --pf-ocre-8: #a17c34;
        --pf-ocre-9: #c89425;
        --pf-ocre-10: #d7a236;
        --pf-ocre-11: #cca252;
        --pf-ocre-12: #fff3dd;

        --pf-error-1: #261715;
        --pf-error-2: #331d1a;
        --pf-error-3: #40201c;
        --pf-error-4: #4d221e;
        --pf-error-5: #59241f;
        --pf-error-6: #6b2924;
        --pf-error-7: #ba574e;
        --pf-error-8: #d25d53;
        --pf-error-9: #ed544c;
        --pf-error-10: #fd635a;
        --pf-error-11: #f48b80;
        --pf-error-12: #fff1ee;

        --pf-aviso-1: #221911;
        --pf-aviso-2: #2d2013;
        --pf-aviso-3: #3a2411;
        --pf-aviso-4: #45280b;
        --pf-aviso-5: #4f2d07;
        --pf-aviso-6: #5d3507;
        --pf-aviso-7: #a56728;
        --pf-aviso-8: #b6722c;
        --pf-aviso-9: #c97400;
        --pf-aviso-10: #d98119;
        --pf-aviso-11: #e19956;
        --pf-aviso-12: #fff2e6;

        --pf-exito-1: #141e16;
        --pf-exito-2: #17261a;
        --pf-exito-3: #162e1b;
        --pf-exito-4: #15361d;
        --pf-exito-5: #133d1f;
        --pf-exito-6: #164824;
        --pf-exito-7: #3b844e;
        --pf-exito-8: #419156;
        --pf-exito-9: #2c9c51;
        --pf-exito-10: #3daa5e;
        --pf-exito-11: #62bb77;
        --pf-exito-12: #dcfce1;

        --pf-info-1: #141c24;
        --pf-info-2: #172430;
        --pf-info-3: #172b3e;
        --pf-info-4: #15314c;
        --pf-info-5: #153657;
        --pf-info-6: #144069;
        --pf-info-7: #3679b8;
        --pf-info-8: #3c85cb;
        --pf-info-9: #198ceb;
        --pf-info-10: #2f9afb;
        --pf-info-11: #64adf7;
        --pf-info-12: #ecf5ff;

        --pf-color-bg: var(--pf-neutro-1);
        --pf-color-bg-alt: var(--pf-neutro-2);
        --pf-color-bg-inset: var(--pf-neutro-3);
        --pf-color-bg-ink: var(--pf-neutro-1);
        --pf-color-surface: var(--pf-neutro-2);
        --pf-color-surface-raised: var(--pf-neutro-3);

        --pf-color-border: var(--pf-neutro-6);
        --pf-color-border-strong: var(--pf-neutro-7);
        --pf-color-border-control: var(--pf-neutro-7);
        --pf-icon-guide: var(--pf-color-border-strong);
        --pf-rule: 1px solid var(--pf-color-border);

        --pf-color-text: var(--pf-neutro-12);
        --pf-color-ink: var(--pf-neutro-12);
        --pf-color-heading: var(--pf-petroleo-12);
        --pf-color-text-soft: var(--pf-neutro-11);
        --pf-color-text-muted: var(--pf-neutro-11);
        --pf-color-text-invert: var(--pf-neutro-1);
        --pf-color-on-ink: var(--pf-neutro-12);

        --pf-color-brand: var(--pf-verde-9);
        --pf-color-brand-strong: var(--pf-verde-11);
        --pf-color-brand-soft: var(--pf-verde-3);
        --pf-color-accent: var(--pf-verde-9);
        --pf-color-accent-hover: var(--pf-verde-10);
        --pf-color-accent-text: var(--pf-verde-11);
        --pf-color-accent-soft: var(--pf-verde-3);
        --pf-color-accent-edge: var(--pf-verde-8);
        --pf-color-on-accent: var(--pf-neutro-1);
        --pf-color-link: var(--pf-verde-11);
        --pf-color-link-hover: var(--pf-verde-12);
        --pf-color-focus: var(--pf-verde-8);
        --pf-color-ochre: var(--pf-ocre-9);
        --pf-color-ochre-text: var(--pf-ocre-11);

        --pf-color-logo-luz: #35cc99;
        --pf-color-logo-sombra: #298f6b;
        --pf-color-logo-pliegue: #227759;

        --pf-color-success: var(--pf-exito-11);
        --pf-color-success-soft: var(--pf-exito-3);
        --pf-color-success-border: var(--pf-exito-7);
        --pf-color-warning: var(--pf-aviso-11);
        --pf-color-warning-soft: var(--pf-aviso-3);
        --pf-color-warning-border: var(--pf-aviso-7);
        --pf-color-error: var(--pf-error-11);
        --pf-color-error-soft: var(--pf-error-3);
        --pf-color-error-border: var(--pf-error-7);
        --pf-color-info: var(--pf-info-11);
        --pf-color-info-soft: var(--pf-info-3);
        --pf-color-info-border: var(--pf-info-7);

        --pf-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.36), 0 1px 1px rgba(0, 0, 0, 0.24);
        --pf-shadow-md: 0 4px 14px -4px rgba(0, 0, 0, 0.5), 0 2px 4px rgba(0, 0, 0, 0.3);
        --pf-shadow-lg: 0 14px 34px -10px rgba(0, 0, 0, 0.6), 0 4px 10px -2px rgba(0, 0, 0, 0.35);
        --pf-shadow-xl: 0 28px 64px -16px rgba(0, 0, 0, 0.7), 0 8px 18px -6px rgba(0, 0, 0, 0.4);
        --pf-drop-sm: drop-shadow(0 1px 1.5px rgba(0, 0, 0, 0.4));
        --pf-drop-md: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.35)) drop-shadow(0 6px 12px rgba(0, 0, 0, 0.45));
    }
}

[data-pf-theme="dark"] {
    --pf-neutro-1: #061f24;
    --pf-neutro-2: #0c262b;
    --pf-neutro-3: #112d31;
    --pf-neutro-4: #173337;
    --pf-neutro-5: #1e393d;
    --pf-neutro-6: #2b4246;
    --pf-neutro-7: #65797c;
    --pf-neutro-8: #728588;
    --pf-neutro-9: #7e8b8e;
    --pf-neutro-10: #89999d;
    --pf-neutro-11: #9dabad;
    --pf-neutro-12: #eff5f6;

    --pf-petroleo-1: #002026;
    --pf-petroleo-2: #00272e;
    --pf-petroleo-3: #002e36;
    --pf-petroleo-4: #00353e;
    --pf-petroleo-5: #013b44;
    --pf-petroleo-6: #0b454f;
    --pf-petroleo-7: #467d88;
    --pf-petroleo-8: #538a95;
    --pf-petroleo-9: #5b919d;
    --pf-petroleo-10: #5fa0af;
    --pf-petroleo-11: #83b0ba;
    --pf-petroleo-12: #e5f8fc;

    --pf-verde-1: #121e19;
    --pf-verde-2: #13271e;
    --pf-verde-3: #0e2f22;
    --pf-verde-4: #063625;
    --pf-verde-5: #003d29;
    --pf-verde-6: #004832;
    --pf-verde-7: #208562;
    --pf-verde-8: #11936b;
    --pf-verde-9: #009c71;
    --pf-verde-10: #00ac7d;
    --pf-verde-11: #3ebd8f;
    --pf-verde-12: #cdffe7;

    --pf-ocre-1: #201a10;
    --pf-ocre-2: #2a2212;
    --pf-ocre-3: #332710;
    --pf-ocre-4: #3c2d0e;
    --pf-ocre-5: #45310a;
    --pf-ocre-6: #523a09;
    --pf-ocre-7: #917031;
    --pf-ocre-8: #a17c34;
    --pf-ocre-9: #c89425;
    --pf-ocre-10: #d7a236;
    --pf-ocre-11: #cca252;
    --pf-ocre-12: #fff3dd;

    --pf-error-1: #261715;
    --pf-error-2: #331d1a;
    --pf-error-3: #40201c;
    --pf-error-4: #4d221e;
    --pf-error-5: #59241f;
    --pf-error-6: #6b2924;
    --pf-error-7: #ba574e;
    --pf-error-8: #d25d53;
    --pf-error-9: #ed544c;
    --pf-error-10: #fd635a;
    --pf-error-11: #f48b80;
    --pf-error-12: #fff1ee;

    --pf-aviso-1: #221911;
    --pf-aviso-2: #2d2013;
    --pf-aviso-3: #3a2411;
    --pf-aviso-4: #45280b;
    --pf-aviso-5: #4f2d07;
    --pf-aviso-6: #5d3507;
    --pf-aviso-7: #a56728;
    --pf-aviso-8: #b6722c;
    --pf-aviso-9: #c97400;
    --pf-aviso-10: #d98119;
    --pf-aviso-11: #e19956;
    --pf-aviso-12: #fff2e6;

    --pf-exito-1: #141e16;
    --pf-exito-2: #17261a;
    --pf-exito-3: #162e1b;
    --pf-exito-4: #15361d;
    --pf-exito-5: #133d1f;
    --pf-exito-6: #164824;
    --pf-exito-7: #3b844e;
    --pf-exito-8: #419156;
    --pf-exito-9: #2c9c51;
    --pf-exito-10: #3daa5e;
    --pf-exito-11: #62bb77;
    --pf-exito-12: #dcfce1;

    --pf-info-1: #141c24;
    --pf-info-2: #172430;
    --pf-info-3: #172b3e;
    --pf-info-4: #15314c;
    --pf-info-5: #153657;
    --pf-info-6: #144069;
    --pf-info-7: #3679b8;
    --pf-info-8: #3c85cb;
    --pf-info-9: #198ceb;
    --pf-info-10: #2f9afb;
    --pf-info-11: #64adf7;
    --pf-info-12: #ecf5ff;

    --pf-color-bg: var(--pf-neutro-1);
    --pf-color-bg-alt: var(--pf-neutro-2);
    --pf-color-bg-inset: var(--pf-neutro-3);
    --pf-color-bg-ink: var(--pf-neutro-1);
    --pf-color-surface: var(--pf-neutro-2);
    --pf-color-surface-raised: var(--pf-neutro-3);

    --pf-color-border: var(--pf-neutro-6);
    --pf-color-border-strong: var(--pf-neutro-7);
    --pf-color-border-control: var(--pf-neutro-7);
    --pf-icon-guide: var(--pf-color-border-strong);
    --pf-rule: 1px solid var(--pf-color-border);

    --pf-color-text: var(--pf-neutro-12);
    --pf-color-ink: var(--pf-neutro-12);
    --pf-color-heading: var(--pf-petroleo-12);
    --pf-color-text-soft: var(--pf-neutro-11);
    --pf-color-text-muted: var(--pf-neutro-11);
    --pf-color-text-invert: var(--pf-neutro-1);
    --pf-color-on-ink: var(--pf-neutro-12);

    --pf-color-brand: var(--pf-verde-9);
    --pf-color-brand-strong: var(--pf-verde-11);
    --pf-color-brand-soft: var(--pf-verde-3);
    --pf-color-accent: var(--pf-verde-9);
    --pf-color-accent-hover: var(--pf-verde-10);
    --pf-color-accent-text: var(--pf-verde-11);
    --pf-color-accent-soft: var(--pf-verde-3);
    --pf-color-accent-edge: var(--pf-verde-8);
    --pf-color-on-accent: var(--pf-neutro-1);
    --pf-color-link: var(--pf-verde-11);
    --pf-color-link-hover: var(--pf-verde-12);
    --pf-color-focus: var(--pf-verde-8);
    --pf-color-ochre: var(--pf-ocre-9);
    --pf-color-ochre-text: var(--pf-ocre-11);

    --pf-color-logo-luz: #35cc99;
    --pf-color-logo-sombra: #298f6b;
    --pf-color-logo-pliegue: #227759;

    --pf-color-success: var(--pf-exito-11);
    --pf-color-success-soft: var(--pf-exito-3);
    --pf-color-success-border: var(--pf-exito-7);
    --pf-color-warning: var(--pf-aviso-11);
    --pf-color-warning-soft: var(--pf-aviso-3);
    --pf-color-warning-border: var(--pf-aviso-7);
    --pf-color-error: var(--pf-error-11);
    --pf-color-error-soft: var(--pf-error-3);
    --pf-color-error-border: var(--pf-error-7);
    --pf-color-info: var(--pf-info-11);
    --pf-color-info-soft: var(--pf-info-3);
    --pf-color-info-border: var(--pf-info-7);

    --pf-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.36), 0 1px 1px rgba(0, 0, 0, 0.24);
    --pf-shadow-md: 0 4px 14px -4px rgba(0, 0, 0, 0.5), 0 2px 4px rgba(0, 0, 0, 0.3);
    --pf-shadow-lg: 0 14px 34px -10px rgba(0, 0, 0, 0.6), 0 4px 10px -2px rgba(0, 0, 0, 0.35);
    --pf-shadow-xl: 0 28px 64px -16px rgba(0, 0, 0, 0.7), 0 8px 18px -6px rgba(0, 0, 0, 0.4);
    --pf-drop-sm: drop-shadow(0 1px 1.5px rgba(0, 0, 0, 0.4));
    --pf-drop-md: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.35)) drop-shadow(0 6px 12px rgba(0, 0, 0, 0.45));
}

[data-pf-theme="dark"] {
    color-scheme: dark;
}

[data-pf-theme="light"] {
    color-scheme: light;
}

/* Un subárbol con tema forzado pinta su propio fondo y texto. */
[data-pf-theme] {
    background-color: var(--pf-color-bg);
    color: var(--pf-color-text);
}

/* -------------------------------------------------------------------------
 * 5. Base
 * ---------------------------------------------------------------------- */

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

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body {
    margin: 0;
    font-family: var(--pf-font-sans);
    font-size: var(--pf-text-base);
    font-weight: var(--pf-weight-regular);
    line-height: var(--pf-leading-normal);
    color: var(--pf-color-text);
    background-color: var(--pf-color-bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    /* Pesos reales del eje variable; la cursiva sí se sintetiza (Comfortaa no la tiene). */
    font-synthesis: style;
    /* Una URL larga (las referencias de un artículo) se parte en lugar de
     * ensanchar la página en el móvil. */
    overflow-wrap: break-word;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    margin: 0 0 var(--pf-space-sm);
    font-family: var(--pf-font-sans);
    line-height: var(--pf-leading-tight);
    color: var(--pf-color-heading);
    text-wrap: balance;
    overflow-wrap: break-word;
}

h1 {
    font-size: var(--pf-text-3xl);
    font-weight: var(--pf-weight-black);
    letter-spacing: -0.01em;
}

h2 {
    font-size: var(--pf-text-2xl);
    font-weight: var(--pf-weight-black);
}

h3 {
    font-size: var(--pf-text-xl);
    font-weight: var(--pf-weight-bold);
}

h4 {
    font-size: var(--pf-text-lg);
    font-weight: var(--pf-weight-bold);
    line-height: var(--pf-leading-snug);
}

h5,
h6 {
    font-size: var(--pf-text-md);
    font-weight: var(--pf-weight-bold);
    line-height: var(--pf-leading-snug);
}

p,
ul,
ol,
dl,
blockquote,
figure,
pre,
table {
    margin: 0 0 var(--pf-space-sm);
}

strong,
b {
    font-weight: var(--pf-weight-black);
}

a {
    color: var(--pf-color-link);
    text-decoration-line: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: var(--pf-underline-offset);
    transition: color var(--pf-transition);
}

a:hover {
    color: var(--pf-color-link-hover);
    text-decoration-thickness: 2px;
}

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
    outline: 2px solid var(--pf-color-focus);
    outline-offset: 2px;
    border-radius: var(--pf-radius-sm);
}

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

code,
kbd,
pre,
samp {
    font-family: var(--pf-font-mono);
    /* Un poco menor que el texto que lo rodea, nunca por debajo de 13px. */
    font-size: max(0.9em, var(--pf-text-xs));
}

hr {
    margin: var(--pf-space-lg) 0;
    border: 0;
    border-top: var(--pf-rule);
}

::selection {
    background-color: var(--pf-verde-4);
    color: var(--pf-color-heading);
}

/* -------------------------------------------------------------------------
 * 6. Utilidades globales
 * ---------------------------------------------------------------------- */

/* Contenedores: ancho de página y ancho de lectura. */
.pf-contenedor {
    width: 100%;
    max-width: calc(var(--pf-container) + 2 * var(--pf-gutter));
    margin-inline: auto;
    padding-inline: var(--pf-gutter);
}

.pf-contenedor--estrecho {
    max-width: calc(var(--pf-container-narrow) + 2 * var(--pf-gutter));
}

/* Etiqueta (antetítulo): JetBrains Mono en mayúsculas («01 · RESUMEN»).
 * 14px y espaciado moderado: se lee como palabra, no como letras sueltas. */
.pf-etiqueta {
    display: block;
    margin: 0 0 var(--pf-space-sm);
    font-family: var(--pf-font-mono);
    font-size: var(--pf-text-sm);
    font-weight: var(--pf-weight-bold);
    line-height: var(--pf-leading-snug);
    letter-spacing: var(--pf-tracking-caps);
    text-transform: uppercase;
    color: var(--pf-color-text-muted);
}

.pf-etiqueta--ocre {
    color: var(--pf-color-ochre-text);
}

.pf-etiqueta--acento {
    color: var(--pf-color-accent-text);
}

/* Palabra destacada de un titular («cuatro fases.»): verde ACANDA, vivo.
 * Solo en texto ≥ 24px (3:1); en texto normal, --pf-color-accent-text. */
.pf-destacado {
    color: var(--pf-color-brand);
}

/* Texto solo para lectores de pantalla (clase estándar de WordPress). */
.screen-reader-text {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
    word-wrap: normal !important;
}

.screen-reader-text:focus {
    z-index: var(--pf-z-modal);
    top: var(--pf-space-2xs);
    left: var(--pf-space-2xs);
    width: auto;
    height: auto;
    padding: var(--pf-space-xs) var(--pf-space-sm);
    clip: auto;
    clip-path: none;
    background-color: var(--pf-color-surface-raised);
    color: var(--pf-color-heading);
    font-weight: var(--pf-weight-bold);
    text-decoration: none;
    border-radius: var(--pf-radius-md);
    box-shadow: var(--pf-shadow-lg);
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}