/*
Theme Name: PF Future
Theme URI: https://precisefuture.com
Author: Precise Future SL
Author URI: https://precisefuture.com
Description: Tema propio de precisefuture.com. Sustituye a Elementor Pro. Cada plantilla y cada componente es autosuficiente: trae su propio CSS y su propio JS, y se encolan solo en la URL donde se usan. El modelo de datos vive en el plugin pfuture-content, nunca aquí.
Version: 0.1.0
Requires at least: 6.8
Tested up to: 6.8
Requires PHP: 8.1
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: pfuture
Tags: custom-menu, featured-images, translation-ready, block-styles
*/

/* =========================================================================
 * ESTE FICHERO ES SOLO LA BASE
 * =========================================================================
 * Variables CSS, escala tipografica, sistema de espaciado y estilos globales
 * minimos. Nada de componentes: cada componente define lo suyo en su propio
 * styles.css y lo encola por su cuenta.
 *
 * Si estas a punto de anadir aqui una clase que empieza por .pf-card,
 * .pf-hero, .pf-header... es que va en otro fichero.
 *
 * -------------------------------------------------------------------------
 * FASE 2 — DIRECCION «EXPEDIENTE» (issue #111, 12 sep 2026)
 * -------------------------------------------------------------------------
 * La especificacion es docs/DISENO-EXPEDIENTE.md, elegida por el dueno entre
 * tres direcciones. La idea: pagina blanca, tinta navy y UNA sola tinta de
 * accion. Jerarquia por tamano y espacio, bordes de un pixel en lugar de
 * sombras, el teal solo donde se pincha y el naranja solo en el boton que pide
 * contacto.
 *
 * En esta tanda cambian los VALORES. Ningun nombre de token cambia: las 40
 * hojas de front que consumen la seccion 1 siguen compilando y pintando; lo que
 * cambia es lo que ven. Los tokens NUEVOS estan marcados «nuevo en #111» y
 * hoy no los consume nadie: son el contrato para que cada modulo retoque su
 * componente en la tanda 11, segun la seccion «Lo que NO se arregla solo» del
 * documento.
 * ====================================================================== */

/* -------------------------------------------------------------------------
 * 0. Fuente autoalojada — Source Sans 3
 * -------------------------------------------------------------------------
 * Primera vez que el tema sirve su propia fuente. Hasta la fase 1 la familia
 * declarada era Poppins, que ponia Elementor desde uploads/ y que en local
 * —sin Elementor— nunca llego a cargarse: el sitio se pintaba con system-ui.
 *
 * Cuatro caras, cuatro ficheros woff2 en assets/fonts/ (procedencia, licencia
 * OFL y comando de generacion en assets/fonts/README.md): 400, 500 y 600
 * rectos, y la cursiva 400 desde el #119 (decision 10 del dueno). No hay 700:
 * ver `font-synthesis` en la seccion 3.
 *
 * `font-display: swap` pinta con la pila de respaldo mientras baja el fichero
 * y cambia al llegar. El 400 recto se precarga desde functions.php
 * (pf_pfuture_theme_preload_font); la URL de ahi y la de aqui tienen que ser
 * la MISMA, sin cadena de consulta, o el navegador no casa la precarga con la
 * peticion de la hoja y el fichero baja dos veces. Por eso no llevan `?ver=`.
 *
 * La cursiva NO se precarga: el navegador solo baja una cara cuando una
 * regla la pide, asi que sus 33 KB viajan solo en las paginas con `<em>` o
 * `font-style: italic` (13 `<em>` en 6 contenidos al escribir esto), y no en
 * todas las URLs. Es Italic 400 y nada mas: el casado de fuentes resuelve el
 * estilo antes que el peso, asi que un italic a 500 o 600 se pinta con esta
 * cara sin sintetizar nada. Ningun modulo simula cursiva (skew y similares).
 * ---------------------------------------------------------------------- */

@font-face {
    font-family: "Source Sans 3";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("assets/fonts/SourceSans3-Regular.woff2") format("woff2");
}

@font-face {
    font-family: "Source Sans 3";
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url("assets/fonts/SourceSans3-Medium.woff2") format("woff2");
}

@font-face {
    font-family: "Source Sans 3";
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url("assets/fonts/SourceSans3-SemiBold.woff2") format("woff2");
}

@font-face {
    font-family: "Source Sans 3";
    font-style: italic;
    font-weight: 400;
    font-display: swap;
    src: url("assets/fonts/SourceSans3-Italic.woff2") format("woff2");
}

/* -------------------------------------------------------------------------
 * 1. Tokens — paleta clara
 * ---------------------------------------------------------------------- */

:root {
    color-scheme: light dark;

    /* --- Marca -----------------------------------------------------------
     * `--pf-color-brand` CAMBIA DE SIGNIFICADO, y es deliberado (#111)
     * -----------------------------------------------------------------------
     * Hasta la fase 1 «brand» era el teal #1a6c7a del kit de Elementor, y de
     * el colgaban los enlaces (`--pf-color-link: var(--pf-color-brand)`), el
     * h1, la tarjeta destacada, la paginacion activa, el boton secundario, el
     * lead del hero, los badges y la categoria de entrada: 17 hojas lo
     * consumen. Bajo la direccion «Expediente» la marca es el NAVY, y el teal
     * queda reservado a lo que se pincha: la prosa y los enlaces «de mas
     * informacion» de tarjeta. Asi el ojo distingue informacion de accion.
     *
     * Consecuencia, medida antes de cambiarlo y aceptada: todo consumidor de
     * `brand` se ve navy a partir de ahora, sin tocar su hoja. Los enlaces NO,
     * porque `--pf-color-link` deja de derivar de `brand` y pasa a tener su
     * propio teal, aqui debajo. Lo que ademas debe cambiar de token —el lead
     * del hero a text-soft, el eyebrow a text-muted, el h1 a heading— esta
     * inventariado por modulo en docs/DISENO-EXPEDIENTE.md para la tanda 11.
     *
     * Contraste sobre las superficies claras (bg / surface / bg-alt /
     * bg-inset): brand 13.88 / 13.88 / 12.71 / 11.91; brand-strong 17.17.
     *
     * La pagina de configuracion del tema (admin/configuration-page/) puede
     * sobrescribir estos tokens inyectando un bloque :root en el head; solo
     * emite los slots cuyo valor guardado DIFIERE de su copia de esta paleta. */
    --pf-color-brand: #0c2d52;         /* navy. 13.88:1 sobre --pf-color-bg */
    --pf-color-brand-strong: #001c38;  /* 17.17:1 — hover del boton secundario, ítem activo */
    --pf-color-brand-soft: #edf1f6;    /* tinte de fondo, no es color de texto. 1.13:1 sobre bg: sin borde no se lee como panel */

    --pf-color-ink: #001c38;           /* 17.17:1 — tinta navy. Para FONDO navy usa --pf-color-bg-ink */
    /* Color unico de h1-h6 y de los titulos de tarjeta (nuevo en #111). Hoy el
     * h1 usaba brand (teal) y h2-h6 ink; con un token propio las hojas
     * convergen sin depender de que brand e ink coincidan. En oscuro es una
     * tinta un punto mas clara que text, para que el titular siga mandando.
     * 17.17:1 sobre bg y surface, 15.72:1 sobre bg-alt. */
    --pf-color-heading: #001c38;

    /* --- Acento ----------------------------------------------------------
     * UN solo papel: relleno del boton primario de conversion —CTA del hero,
     * cta-box final, submit del formulario de contacto—. Desaparece del hover
     * del menu, del subrayado del item actual, de los contactos del pie, del
     * filete de indicadores y de los botones del buscador y del newsletter,
     * que pasan a navy o a texto (tanda 11, por modulo).
     *
     * El naranja cambia de #fa8f0c a #d67300 y con eso cambia el problema que
     * el #101 dejo abierto: como RELLENO de control sobre superficie clara,
     * WCAG 1.4.11 pide 3:1, y ahora lo cumple solo:
     *
     *              claro          oscuro
     *   bg         3.33           5.47
     *   bg-alt     3.05           4.70
     *   surface    3.33           5.05
     *   bg-ink     5.16           5.63
     *   bg-inset   2.85  <- NO    4.19
     *
     * Sobre bg-inset sigue sin llegar: el unico control que se apoyaba ahi, el
     * submit del buscador desplegable, pasa a navy por la propia direccion
     * (11.91:1), asi que no hace falta anillo. Y el rotulo navy encima
     * (--pf-color-on-accent) da 5.16:1 en los dos modos, 4.70:1 sobre el
     * hover. Sigue sin ser color de TEXTO sobre fondo claro: para eso esta
     * --pf-color-accent-text. */
    --pf-color-accent: #d67300;
    /* Hover y active del boton primario (nuevo en #111). 4.70:1 con on-accent
     * y 3.65:1 sobre bg, asi que el texto no cambia de color al pasar. */
    --pf-color-accent-hover: #cc6d00;
    --pf-color-accent-text: #8a4d0a;   /* 6.67:1 sobre bg; 5.89:1 sobre accent-soft */
    --pf-color-accent-soft: #fbefe0;
    /* Anillo del #101 para un relleno de acento sobre superficie clara. Con el
     * naranja nuevo ya no hace falta —el relleno solo llega a 3:1— y NO se
     * aplica sobre navy, donde valdria lo mismo que el fondo. Se conserva por
     * nombre para no dejar sin valor a quien lo adopte. */
    --pf-color-accent-edge: #001c38;
    /* El naranja es un color CLARO en los dos temas, asi que lo que se pinta
     * encima es navy en los dos. No sigue al tema: si lo hiciera, en oscuro
     * quedaria texto claro sobre naranja claro (3.33:1 en claro, 5.47:1 en
     * oscuro; el navy da 5.16:1 en los dos). */
    --pf-color-on-accent: #001c38;

    /* --- Superficies y texto ---------------------------------------------
     * Pagina BLANCA, y la tarjeta tambien: en claro bg y surface valen lo
     * mismo a proposito, porque la forma de la tarjeta la dibuja su borde de
     * 1px y no un cambio de relleno. Las adyacencias que el sitio tiene de
     * verdad (medidas en el #77) quedan asi en claro:
     *
     *   bg      -> surface   1.000   tarjeta sobre pagina    borde
     *   surface -> bg-alt    1.092   pildora sobre tarjeta   solo relleno (*)
     *   bg      -> bg-alt    1.092   banda alterna           solo relleno (*)
     *   bg      -> bg-inset  1.166   franja de cabecera      borde
     *
     * (*) La direccion cierra las bandas con border-top y border-bottom y da
     * borde a las pildoras (tanda 11), asi que dejan de depender del relleno.
     *
     * bg-inset vale #eaeef2 y no el #e8ecf0 de la tabla del documento: es una
     * de las tres correcciones obligatorias. Con #e8ecf0 text-muted daba
     * 4.46:1, por debajo de AA; con #eaeef2 da 4.54:1. */
    --pf-color-bg: #ffffff;
    --pf-color-bg-alt: #f3f5f8;
    --pf-color-bg-inset: #eaeef2;
    --pf-color-surface: #ffffff;
    /* Superficie NAVY fija para cabecera invertida, pie, hero invert y cta-box
     * invert (nuevo en #111). Separa el papel de «fondo navy» del de «tinta
     * navy» (--pf-color-ink), que en oscuro se convierte en tinta clara y
     * obliga hoy a que header y footer se cuelguen de bg-alt segun el modo.
     * El acento da 5.16:1 encima en claro y 5.63:1 en oscuro.
     * OJO: lo que se escribe encima es --pf-color-on-ink, NO text-invert:
     * en oscuro text-invert es oscuro y sobre bg-ink da 1.03:1. */
    --pf-color-bg-ink: #001c38;

    /* Un solo separador de superficie: 1px solido de --pf-color-border.
     * Tarjetas, paneles, filas y bandas llevan borde, nunca sombra. Es
     * decorativo y no esta sujeto a 1.4.11 (1.39:1 sobre bg). */
    --pf-color-border: #d5dbe2;
    --pf-color-border-strong: #8290a0;  /* 3.26:1 sobre bg — hover de tarjeta y limite de control */
    /* Borde de campos de formulario, checkboxes, selects y controles del
     * carrusel (nuevo en #111): lo que delimita un control necesita 3:1 con
     * su fondo por WCAG 1.4.11. 4.11:1 sobre bg y surface, 3.76:1 sobre
     * bg-alt. --pf-color-border sigue siendo el separador de tarjetas. */
    --pf-color-border-control: #6f7f90;

    /* --- Tinta de guia de los dibujos (nuevo en #148) ---------------------
     * El SEGUNDO tono de iconos e ilustraciones, y el unico. Sustituye al
     * relleno tintado al 12 % que la critica del 15 sep descarto: un solo
     * mecanismo de profundidad, y es el trazo. Lo consume `.pf-svg-guia`
     * dentro de `common/pictograma/styles.css`.
     *
     * Apunta al token en vez de copiar su valor, asi que hereda el modo
     * oscuro solo: por eso NO aparece en el bloque de la seccion 2 y las dos
     * copias oscuras siguen siendo gemelas de 30 y 30.
     *
     * REMAPEO, y es lo que hay que leer antes de usarlo: sobre `bg-alt`
     * border-strong da 2.98:1 y deja de leerse. El modulo que pinte una banda
     * de `bg-alt` con dibujos dentro redeclara el token EN SU BANDA:
     *
     *     .pf-home__caso { --pf-icon-guide: var(--pf-color-text-muted); }
     *
     * text-muted da ahi 4.85:1 en claro y 6.18:1 en oscuro. Es decision del
     * consumidor porque el componente no sabe sobre que superficie cae, y
     * meter aqui el selector de otro modulo seria invadir su hoja.
     *
     * Todo lo dibujado es decorativo (`aria-hidden`), asi que no esta sujeto
     * a 1.4.11: el remapeo es legibilidad, no cumplimiento. */
    --pf-icon-guide: var(--pf-color-border-strong);

    --pf-color-text: #1b2430;          /* 15.65:1 — tinta navy-gris, no negro */
    --pf-color-text-soft: #3d4c5c;     /*  8.80:1 — texto secundario: por color, no por peso */
    --pf-color-text-muted: #5f6d7c;    /*  5.30:1 sobre bg, 4.85 sobre bg-alt, 4.54 sobre bg-inset */
    --pf-color-text-invert: #ffffff;   /* sobre brand (13.88:1) e ink (17.17:1) */
    /* Texto sobre --pf-color-bg-ink en los DOS modos (anadido en #111, no esta
     * en el documento: la tabla mandaba text-invert sobre bg-ink y en oscuro
     * eso da 1.03:1, medido). Blanco en claro, la tinta clara en oscuro:
     * 17.17:1 y 15.64:1. Mismo patron que on-accent. */
    --pf-color-on-ink: #ffffff;

    /* El teal deja de ser «la marca» y pasa a ser «lo que se pincha»: solo
     * enlaces de prosa y enlaces «de mas informacion» de tarjeta. En
     * navegacion, pie y tarjetas los enlaces son navy o invert sin subrayado.
     * Ya no deriva de brand: 6.44:1 sobre bg, 5.89:1 sobre bg-alt. */
    --pf-color-link: #146874;
    --pf-color-link-hover: #0e4c55;    /* 9.62:1 */

    /* --- Estado ----------------------------------------------------------
     * Solo en formularios y avisos, nunca como decoracion. */
    --pf-color-success: #1e7a4c;       /* 5.33:1 */
    --pf-color-warning: #8a4d0a;       /* = accent-text, 6.67:1 */
    --pf-color-error: #b3261e;         /* 6.54:1 sobre bg, 5.70:1 sobre error-soft */
    --pf-color-error-soft: #fcecea;
    /* Anillo de foco UNICO e independiente de la marca, el mismo en los dos
     * modos: correccion obligatoria del #111. Antes seguia a brand-strong y
     * cada componente sobre navy tenia que remapearlo. #2b8a99 da >= 3:1
     * sobre todo lo que hay debajo, medido en los dos modos:
     *   bg 4.04 / 4.51   surface 4.04 / 4.16   bg-alt 3.70 / 3.87
     *   bg-inset 3.46 / 3.45   ink 4.25 / 3.37   bg-ink 4.25 / 4.64
     * Se dibuja con outline-offset 2px, o sea SOBRE la superficie de
     * alrededor y no sobre el relleno del control; contra el relleno naranja
     * daria 1.21 y por eso el anillo va fuera. card-servicio y form-contacto
     * retiran su outline propio en la tanda 11 y heredan este. */
    --pf-color-focus: #2b8a99;

    /* --- Escala tipografica ----------------------------------------------
     * Source Sans 3 (seccion 0). Titulares a 600 con letter-spacing -0.01em
     * en 2xl y 3xl y 0 en el resto; cuerpo a 400, 16px, interlineado 1.6; el
     * texto secundario se atenua con color, no con peso.
     *
     * Razon 1.2 sobre 16px, con fluidez por clamp() en los tres titulares.
     * xs sube de 12 a 13px: ensancha un poco badges y terminos en pildora
     * (medido en card-servicio a 360px al implementarlo, ver bitacora). */
    --pf-font-sans: "Source Sans 3", "Source Sans Pro", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --pf-font-serif: Georgia, "Times New Roman", serif;
    --pf-font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

    --pf-text-xs: 0.8125rem;  /* 13px */
    --pf-text-sm: 0.875rem;   /* 14px */
    --pf-text-base: 1rem;     /* 16px */
    --pf-text-md: 1.125rem;   /* 18px */
    --pf-text-lg: 1.25rem;    /* 20px */
    --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);
    /* Prosa larga: articulos, guias y tutoriales (nuevo en #111, injerto de
     * otra direccion). Un punto por encima del cuerpo, con leading-loose. */
    --pf-text-prose: clamp(1.0625rem, 1rem + 0.25vw, 1.125rem);

    --pf-leading-tight: 1.15;
    --pf-leading-snug: 1.3;
    --pf-leading-normal: 1.6;
    --pf-leading-loose: 1.7;

    /* Tres pesos rectos con fichero: 400, 500 y 600 (mas la cursiva 400, que
     * no es peso: seccion 0). El 500 deja de sintetizarse (se pedia 20 veces
     * sin existir en Poppins). «black» pasa de 900 a 700 y NO carga fichero:
     * con font-synthesis: none (seccion 3) el navegador lo pinta con el 600
     * sin engordar el trazo, asi que el nombre se mantiene y el peso visible
     * es el mismo que bold. Si algun dia hace falta un 700 real, se sube el
     * fichero; no se cambia el token. */
    --pf-weight-regular: 400;
    --pf-weight-medium: 500;
    --pf-weight-bold: 600;
    --pf-weight-black: 700;

    --pf-measure: 66ch;
    --pf-measure-narrow: 45ch;         /* subtitulo del hero (nuevo en #111) */
    /* Versalitas: eyebrow, categoria de entrada y titulos de columna del pie,
     * siempre a 13px, peso 500 y color text-muted. Concentra los 21
     * letter-spacing literales de 15 hojas (nuevo en #111). */
    --pf-tracking-caps: 0.06em;
    /* text-underline-offset comun de los enlaces de prosa, para que el
     * subrayado permanente en teal se dibuje igual en cuerpo, listas y
     * tarjetas (nuevo en #111). */
    --pf-underline-offset: 0.15em;

    /* --- Sistema de espaciado --------------------------------------------
     * Base 4px. Toda separacion del tema sale de aqui: si un componente
     * necesita 13px, el numero equivocado es 13. 2xl y 3xl crecen (72 -> 80,
     * 96 -> 112): las secciones se separan con espacio antes que con bandas. */
    --pf-space-3xs: 0.25rem;  /* 4px  */
    --pf-space-2xs: 0.5rem;   /* 8px  */
    --pf-space-xs: 0.75rem;   /* 12px */
    --pf-space-sm: 1rem;      /* 16px */
    --pf-space-md: 1.5rem;    /* 24px */
    --pf-space-lg: 2rem;      /* 32px */
    --pf-space-xl: 3rem;      /* 48px */
    --pf-space-2xl: 5rem;     /* 80px */
    --pf-space-3xl: 7rem;     /* 112px */
    /* Padding vertical fluido de seccion, 48px en movil y 80px en escritorio
     * (nuevo en #111). Lo consume .pf-section (seccion 5) desde el #119, y las
     * secciones de la home lo adoptan en su hoja en la misma tanda: un solo
     * valor para las dos, en vez de xl en una y 2xl en la otra. A 768 vale
     * 62,72px; satura en 80 desde 1200. */
    --pf-space-section: clamp(3rem, 2rem + 4vw, 5rem);

    /* --- Rejilla y formas ------------------------------------------------
     * Los dos puntos de ruptura son los del kit de Elementor (`viewport_md`
     * 768 y `viewport_lg` 1025), para que las paginas rompan donde rompen
     * hoy. Como una media query no puede leer una variable CSS, estos dos
     * tokens son documentacion y sirven para calc()/clamp(); el numero
     * literal se repite en cada @media. */
    --pf-bp-md: 768px;
    --pf-bp-lg: 1025px;

    /* Contenedor mas estrecho (1200 -> 1120, 780 -> 720): medida de lectura
     * de un documento, no de un folleto. El canalon se queda en 24px; el
     * documento permite subirlo a lg desde >= 1024px, pero eso mueve el borde
     * de contenido que los modulos alinearon en el #90, asi que no se toca
     * desde aqui. */
    --pf-container: 1120px;
    --pf-container-narrow: 720px;
    --pf-gutter: var(--pf-space-md);

    /* UN radio para todo lo rectangular (tarjetas, botones, campos, paneles),
     * 3px para chips de foco e iconos pequenos, pildora solo en etiquetas de
     * termino y badges. lg baja a 6 y coincide con md A PROPOSITO: asi
     * card-post y cta-box igualan al resto sin tocar sus hojas. Los dos alias
     * de abajo existen para que en la tanda 11 tarjetas y controles migren a
     * un solo sitio y dejen de depender de esa coincidencia. */
    --pf-radius-sm: 3px;
    --pf-radius-md: 6px;
    --pf-radius-lg: 6px;
    --pf-radius-pill: 999px;
    --pf-radius-card: var(--pf-radius-md);      /* nuevo en #111 */
    --pf-radius-control: var(--pf-radius-md);   /* nuevo en #111 */

    /* El separador unico, para las 40 declaraciones de borde de 1px que hoy
     * repiten el literal (nuevo en #111). */
    --pf-rule: 1px solid var(--pf-color-border);

    /* Sombras tintadas con el navy de marca, no con negro puro. sm y md son
     * casi invisibles A PROPOSITO: la sombra queda reservada a las capas que
     * flotan sobre el contenido —submenu, selector de idioma, cajon movil,
     * barra sticky del CTA— y solo con lg. Asi las 16 declaraciones que hoy
     * las usan dejan de pesar sin tocar sus hojas. */
    --pf-shadow-sm: 0 1px 0 rgba(0, 28, 56, .06);
    --pf-shadow-md: 0 1px 2px rgba(0, 28, 56, .06);
    --pf-shadow-lg: 0 6px 16px rgba(0, 28, 56, .10);

    --pf-transition: 180ms ease;

    --pf-z-header: 100;
    --pf-z-overlay: 500;
    --pf-z-modal: 1000;
}

/* -------------------------------------------------------------------------
 * 1 bis. Capa de compatibilidad de nombres — RETIRADA (issue #60)
 * -------------------------------------------------------------------------
 * Aqui vivieron 53 alias que traducian el vocabulario que cada modulo se
 * invento durante el bootstrap —`--pf-espacio-m`, `--pf-texto-l`,
 * `--pf-space-4`, `--pf-font-size-lg`...— a los tokens canonicos de la
 * seccion 1. Como se escribieron con respaldo, `var(--pf-espacio-m, 24px)`,
 * el navegador no fallaba nunca: se quedaba con el literal, y 25 hojas
 * pintaban colores inventados en vez de la paleta de marca. Los alias
 * corrigieron eso sin entrar en el fichero de ningun otro modulo.
 *
 * Era una capa de transicion y ya no la consume nadie. Medido con token
 * exacto y sin comentarios sobre las 56 hojas del tema, sus .js y sus .php:
 * 0 de los 53. Cada modulo migro los suyos entre las tandas 02 y 08.
 *
 * NO se vuelven a anadir. El contrato es la seccion 1 y solo esa. Si
 * necesitas un nombre que no este alli, no es un token de tema: es una
 * variable de TU componente y se define en tu propio styles.css, como ya
 * hacen `--pf-cta-bg`, `--pf-header-panel-link` o `--pf-toc-offset`.
 *
 * Tres variables se escriben en tiempo de ejecucion, asi que su `var()` lleva
 * respaldo con razon. Ninguna estuvo nunca en este bloque y ninguna se toca
 * al retirarlo; confundirlas con alias de paleta rompe la cabecera fija:
 *
 *   --pf-header-height       common/header/script.js               JavaScript
 *   --pf-sticky-cta-height   common/cta-box/script.js              JavaScript
 *   --pf-portafolio-columns  common/card-portafolio/component.php  atributo style
 * ---------------------------------------------------------------------- */

/* -------------------------------------------------------------------------
 * 2. Tokens — paleta oscura
 * -------------------------------------------------------------------------
 * Solo se redefinen los tokens que cambian de valor. Dos vias: la preferencia
 * del sistema y el atributo data-pf-theme="dark" que escribe el conmutador de
 * la pagina de configuracion. Los que valen lo mismo en los dos modos —accent,
 * accent-hover, on-accent, focus y todo lo que no es color— NO se repiten
 * aqui: si los cambias arriba, cambian en los dos.
 *
 * Los valores viven en un solo sitio, este bloque, y las dos vias lo aplican.
 * Se repite la lista porque `@media` y el selector de atributo no se pueden
 * combinar en una sola regla sin perder una de las dos. Si cambias un token
 * aqui, cambialo en las dos copias: son gemelas a proposito, 30 y 30.
 *
 * El fondo oscuro es el navy de marca aclarado, no un gris neutro, para que
 * el modo oscuro siga siendo reconociblemente el mismo sitio. La marca en
 * oscuro es un navy CLARO (#a8c0dc, 9.74:1), no el teal de antes.
 *
 * -------------------------------------------------------------------------
 * LA ESCALERA DE SUPERFICIES (issue #77) SIGUE TENIENDO CUATRO PELDANOS
 * -------------------------------------------------------------------------
 * Hasta la tanda 06, bg-alt y surface valian LOS DOS #1c242d y 116 elementos
 * desaparecian. Con la paleta nueva, de suelo a techo:
 *
 *   bg #0f161e < surface #161e28 < bg-alt #1b2430 < bg-inset #232d3a
 *
 * y las adyacencias que el sitio tiene de verdad:
 *
 *   bg      -> surface    1.084   tarjeta sobre pagina       borde
 *   surface -> bg-alt     1.073   pildora sobre tarjeta      solo relleno (*)
 *   bg      -> bg-alt     1.163   banda alterna              solo relleno (*)
 *   bg      -> bg-inset   1.307   franja de cabecera         borde
 *
 * (*) Mas fino que el 1.14 que dejo el #77 a la pildora; la direccion le da
 * borde 1px y fondo surface en la tanda 11 y deja de depender del relleno.
 * El techo ya no lo fija el contraste de los enlaces de la cabecera: brand
 * da 7.45:1 sobre bg-inset, sobra margen.
 *
 * Si vuelves a tocar estos cuatro valores, comprueba que siguen siendo cuatro
 * colores DISTINTOS y que ningun par adyacente de la tabla se queda por debajo
 * de ~1.07:1. Que compile no demuestra nada: el fallo que esto corrige
 * compilaba perfectamente. */

@media (prefers-color-scheme: dark) {
    :root:not([data-pf-theme="light"]) {
        --pf-color-brand: #a8c0dc;         /*  9.74:1 sobre el fondo oscuro */
        --pf-color-brand-strong: #c6d6ea;  /* 12.31:1 */
        --pf-color-brand-soft: #1a2634;

        --pf-color-ink: #e6ebf1;           /* el navy no sirve de tinta sobre fondo oscuro */
        --pf-color-heading: #f2f5f8;       /* 16.63:1, un punto mas clara que text */

        /* En oscuro el naranja SI cumple como texto (accent-text 9.84:1). El
         * relleno de acento (#d67300, el mismo que en claro) da de 4.70:1 a
         * 5.63:1 sobre las superficies oscuras y no necesita anillo: por eso
         * accent-edge vale el propio acento, anillo invisible a proposito. */
        --pf-color-accent-text: #f2b26b;
        --pf-color-accent-soft: #3a2a14;
        --pf-color-accent-edge: #d67300;

        /* Escalera de superficies, de suelo a techo: ver la nota de arriba. */
        --pf-color-bg: #0f161e;
        --pf-color-surface: #161e28;
        --pf-color-bg-alt: #1b2430;
        --pf-color-bg-inset: #232d3a;
        --pf-color-bg-ink: #0a1220;        /* navy mas oscuro que el fondo: sigue siendo «el bloque navy» */
        --pf-color-border: #303a47;
        --pf-color-border-strong: #626d7b; /* 3.46:1 sobre bg */
        --pf-color-border-control: #7a8695; /* 4.92:1 sobre bg, 4.54:1 sobre surface */

        --pf-color-text: #e6ebf1;          /* 15.18:1 */
        --pf-color-text-soft: #c2cbd5;     /* 11.09:1 */
        --pf-color-text-muted: #98a4b2;    /*  7.18:1 sobre bg, 5.50:1 sobre bg-inset */
        --pf-color-text-invert: #0f161e;
        --pf-color-on-ink: #e6ebf1;        /* 15.64:1 sobre bg-ink */

        --pf-color-link: #7cbcc6;          /*  8.55:1 */
        --pf-color-link-hover: #a2d0d8;    /* 10.88:1 */

        --pf-color-success: #56c48d;
        --pf-color-warning: #f2b26b;
        --pf-color-error: #ef8a86;
        --pf-color-error-soft: #3a1d1c;

        --pf-shadow-sm: 0 1px 0 rgba(0, 0, 0, .4);
        --pf-shadow-md: 0 1px 2px rgba(0, 0, 0, .45);
        --pf-shadow-lg: 0 6px 16px rgba(0, 0, 0, .55);
    }
}

:root[data-pf-theme="dark"] {
    /* Gemela del bloque de arriba: mismos 30 valores, ver los motivos alli. */
    --pf-color-brand: #a8c0dc;
    --pf-color-brand-strong: #c6d6ea;
    --pf-color-brand-soft: #1a2634;

    --pf-color-ink: #e6ebf1;
    --pf-color-heading: #f2f5f8;

    --pf-color-accent-text: #f2b26b;
    --pf-color-accent-soft: #3a2a14;
    --pf-color-accent-edge: #d67300;

    --pf-color-bg: #0f161e;
    --pf-color-surface: #161e28;
    --pf-color-bg-alt: #1b2430;
    --pf-color-bg-inset: #232d3a;
    --pf-color-bg-ink: #0a1220;
    --pf-color-border: #303a47;
    --pf-color-border-strong: #626d7b;
    --pf-color-border-control: #7a8695;

    --pf-color-text: #e6ebf1;
    --pf-color-text-soft: #c2cbd5;
    --pf-color-text-muted: #98a4b2;
    --pf-color-text-invert: #0f161e;
    --pf-color-on-ink: #e6ebf1;

    --pf-color-link: #7cbcc6;
    --pf-color-link-hover: #a2d0d8;

    --pf-color-success: #56c48d;
    --pf-color-warning: #f2b26b;
    --pf-color-error: #ef8a86;
    --pf-color-error-soft: #3a1d1c;

    --pf-shadow-sm: 0 1px 0 rgba(0, 0, 0, .4);
    --pf-shadow-md: 0 1px 2px rgba(0, 0, 0, .45);
    --pf-shadow-lg: 0 6px 16px rgba(0, 0, 0, .55);
}

/* --- El modo FORZADO tambien lo es para el navegador (nuevo en #148) -------
 * `:root` declara `color-scheme: light dark`, que deja elegir al sistema. Es
 * lo correcto mientras nadie fuerza, y estaba incompleto desde que existe el
 * atributo: con `data-pf-theme="dark"` sobre un sistema en claro, la pagina
 * se pintaba oscura pero la barra de desplazamiento, el `<select>`, la casilla
 * y el campo de fecha los seguia pintando el navegador en claro. Y al reves.
 *
 * Son dos declaraciones y no tokens, asi que no rompen la gemelidad de los dos
 * bloques de arriba. No tocan ninguna variable: lo unico que cambia es lo que
 * pinta el navegador por su cuenta. */
:root[data-pf-theme="dark"]  { color-scheme: dark; }
:root[data-pf-theme="light"] { color-scheme: light; }

/* -------------------------------------------------------------------------
 * 3. Reinicio minimo
 * ---------------------------------------------------------------------- */

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

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
    /* Compensa la cabecera fija al saltar a un ancla desde el TOC. */
    scroll-padding-top: var(--pf-space-2xl);
    /* Source Sans 3 se sirve en 400, 500 y 600 rectos y en 400 cursiva, y
     * nada mas. Sin esto, un `font-weight: 700` o un `--pf-weight-black`
     * harian que el navegador engordase el 600 a brochazos. Con `none` el 700
     * se pinta con el 600 tal cual.
     * La cursiva NO necesita sintesis desde el #119: hay cara italica real
     * (seccion 0), y el casado de fuentes resuelve el estilo antes que el
     * peso, asi que `<em>` y cualquier `font-style: italic` —a 400, 500 o
     * 600— casan con ese fichero. `none` se queda a proposito y no se pasa a
     * `style`: con la cara servida no cambia nada medible, y si un dia se
     * retirase el fichero, `style` volveria a inclinar glifos rectos en
     * silencio. Hereda: vale para todo. */
    font-synthesis: none;
}

body {
    margin: 0;
    background-color: var(--pf-color-bg);
    color: var(--pf-color-text);
    font-family: var(--pf-font-sans);
    font-size: var(--pf-text-base);
    line-height: var(--pf-leading-normal);
    -webkit-font-smoothing: antialiased;
}

img,
picture,
video,
canvas,
svg {
    display: block;
    max-width: 100%;
    height: auto;
}

input,
button,
textarea,
select {
    font: inherit;
    color: inherit;
}

button {
    cursor: pointer;
}

/* -------------------------------------------------------------------------
 * 4. Tipografia global
 * ---------------------------------------------------------------------- */

/* Titulares en UN solo color, --pf-color-heading, del h1 al h6 sin excepcion.
 * Hasta la fase 1 el h1 iba en brand (teal) y h2-h6 en ink (navy), el reparto
 * del kit de Elementor; la direccion «Expediente» saca el teal de todo
 * titular. Peso 600, letter-spacing -0.01em solo en 2xl y 3xl. */
h1, h2, h3, h4, h5, h6 {
    margin: 0 0 var(--pf-space-sm);
    color: var(--pf-color-heading);
    font-weight: var(--pf-weight-bold);
    line-height: var(--pf-leading-tight);
    text-wrap: balance;
}

h1 { font-size: var(--pf-text-3xl); letter-spacing: -0.01em; }
h2 { font-size: var(--pf-text-2xl); letter-spacing: -0.01em; }
h3 { font-size: var(--pf-text-xl); }
h4 { font-size: var(--pf-text-lg); }
h5 { font-size: var(--pf-text-md); }
h6 { font-size: var(--pf-text-base); }

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

/* Enlace de prosa: teal con subrayado permanente de 1px y el offset comun; al
 * pasar por encima, link-hover y el subrayado a 2px (regla de uso de enlaces
 * de DISENO-EXPEDIENTE.md, hecha en #119). El grosor no entra en la
 * transicion a proposito: solo cambia el color.
 * Los componentes que no quieren subrayado (navegacion, pie, tarjetas) lo
 * quitan en su hoja, como hasta ahora; y los que declaran
 * `text-decoration: underline` en su hover reinician el grosor a `auto` y no
 * reciben el 2px, que es lo correcto: el subrayado grueso es de la prosa. */
a {
    color: var(--pf-color-link);
    text-decoration-thickness: 1px;
    text-underline-offset: var(--pf-underline-offset);
    transition: color var(--pf-transition);
}

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

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

small { font-size: var(--pf-text-sm); }

code, kbd, samp, pre {
    font-family: var(--pf-font-mono);
    font-size: 0.9em;
}

pre {
    padding: var(--pf-space-sm);
    overflow-x: auto;
    border-radius: var(--pf-radius-md);
    background: var(--pf-color-bg-inset);
}

blockquote {
    padding-left: var(--pf-space-md);
    border-left: 3px solid var(--pf-color-brand);
    color: var(--pf-color-text-soft);
}

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

table {
    width: 100%;
    border-collapse: collapse;
}

th, td {
    padding: var(--pf-space-2xs) var(--pf-space-xs);
    border-bottom: var(--pf-rule);
    text-align: left;
}

/* -------------------------------------------------------------------------
 * 5. Utilidades de estructura
 * -------------------------------------------------------------------------
 * Las CINCO unicas clases globales del tema. Cualquier otra clase pertenece a
 * un componente y vive en su fichero. `.pf-frame` entra aqui en el #148 y no
 * en una hoja de componente por el motivo que la critica del 15 sep escribe en
 * su punto 12: la consumen tres modulos (portada, tarjeta de caso y hero de
 * caso) y son doce lineas. Un componente para eso seria una peticion mas por
 * pagina para doce lineas que ya viajan en la hoja base.
 * ---------------------------------------------------------------------- */

.pf-container {
    width: 100%;
    max-width: var(--pf-container);
    margin-inline: auto;
    padding-inline: var(--pf-gutter);
}

.pf-container--narrow {
    max-width: var(--pf-container-narrow);
}

/* Padding vertical fluido (48 -> 80px), el mismo token que las secciones de
 * la home desde la tanda 11 (#119). `scroll-padding-top` de html sigue en
 * 2xl: compensa la cabecera fija, no es espaciado de seccion. */
.pf-section {
    padding-block: var(--pf-space-section);
}

.pf-prose {
    max-width: var(--pf-measure);
}

/* --- Marco de navegador (S6 del #148) --------------------------------------
 * Envuelve una captura para que se lea como una ventana y no como una foto.
 * Las cinco capturas de caso pegan hoy su cabecera de color contra el borde de
 * la tarjeta; con barra son ventanas.
 *
 * Es CSS puro A PROPOSITO, y esa es la ventaja frente al `marco-navegador.svg`
 * que tambien esta dibujado: la `<img>` de dentro NO se toca, asi que conserva
 * su `srcset`, su `sizes` y su `loading="lazy"`. Un marco por SVG obligaria a
 * meter la imagen dentro del dibujo y a perder las tres cosas.
 *
 * Sin sombra: la direccion «Expediente» delimita con borde de 1px.
 *
 * Como se usa: `<div class="pf-frame"><img …></div>`. La proporcion la pone el
 * consumidor EN LA IMAGEN —`aspect-ratio` en la `<img>`, no en el contenedor,
 * que si no la barra entra en el recorte—; aqui ya estan el `object-fit` y el
 * `object-position: top`, que es lo que hace que una captura de pagina entera
 * ensene su cabecera y no su medio. */
.pf-frame {
    position: relative;
    overflow: hidden;
    padding-block-start: 1.75rem;
    background: var(--pf-color-surface);
    border: var(--pf-rule);
    border-radius: var(--pf-radius-card);
}

/* La barra: relleno, filete inferior y los tres puntos. Los puntos son tres
 * degradados radiales sobre un mismo mosaico de 10px, colocados por
 * background-position; asi la barra entera es un solo pseudoelemento. */
.pf-frame::before {
    content: "";
    position: absolute;
    inset-block-start: 0;
    inset-inline: 0;
    block-size: 1.75rem;
    background-color: var(--pf-color-bg-alt);
    background-image:
        radial-gradient(circle at center, var(--pf-color-border-strong) 2.5px, transparent 2.5px),
        radial-gradient(circle at center, var(--pf-color-border-strong) 2.5px, transparent 2.5px),
        radial-gradient(circle at center, var(--pf-color-border-strong) 2.5px, transparent 2.5px);
    background-repeat: no-repeat;
    background-size: 10px 10px;
    background-position: 9px 50%, 23px 50%, 37px 50%;
    border-block-end: var(--pf-rule);
}

/* El campo de direccion. Lleva borde ademas del tinte porque `brand-soft`
 * sobre `bg-alt` da 1.02:1 y sin filete no se ve que hay un campo: es la misma
 * regla de la direccion —bordes, no rellenos— aplicada a una pieza que ademas
 * lleva relleno. */
.pf-frame::after {
    content: "";
    position: absolute;
    inset-block-start: .4375rem;
    inset-inline-start: 3.25rem;
    inset-inline-end: .75rem;
    block-size: .875rem;
    background: var(--pf-color-brand-soft);
    border: var(--pf-rule);
    border-radius: var(--pf-radius-sm);
}

.pf-frame img {
    display: block;
    inline-size: 100%;
    block-size: auto;
    object-fit: cover;
    object-position: top;
}

/* -------------------------------------------------------------------------
 * 5 bis. Estilos de bloque — MOVIDOS a inc/core/block-styles.css (issue #162)
 * -------------------------------------------------------------------------
 * «Indice de expediente» (`is-style-pf-expediente`) y «Anexo»
 * (`is-style-pf-anexo`) vivieron aqui del #148 al #162. Se fueron a un fichero
 * propio porque el editor de bloques NO carga esta hoja —el tema nunca llamo a
 * `add_editor_style()`— y los dos estilos salian sin estilo al elegirlos. Ese
 * fichero es UNA fuente para dos destinos: en el front se inlina detras de esta
 * hoja (cero peticiones extra, mismos tokens) y en el editor entra solo, con
 * respaldos. Ver la cabecera de inc/core/block-styles.php.
 * ---------------------------------------------------------------------- */

/* -------------------------------------------------------------------------
 * 6. Accesibilidad
 * ---------------------------------------------------------------------- */

/* Outline 2px del anillo unico con offset 2px, sin box-shadow, en todo
 * elemento interactivo. Ninguna hoja define su propio color de foco. */
: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);
}

.screen-reader-text {
    position: absolute !important;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* El chip que aparece al enfocar algo oculto a la vista. Lo primero que ve
 * quien navega con teclado es el enlace «Saltar al contenido» (#71), asi que
 * este bloque no es decorativo.
 *
 * El selector lleva `:root` delante A PROPOSITO, y no sobra (issue #95).
 * WordPress declara su propia version de esta misma regla, con la MISMA
 * especificidad (0,2,0) y DESPUES en el documento, asi que ganaba entera:
 *
 *     .screen-reader-text:focus{background-color:#ddd;color:#444;top:5px;
 *       left:5px;padding:15px 23px 14px;z-index:100000;...}
 *
 * Medido en el HTML servido por el WordPress de este proyecto (7.1, leido de
 * `wp-includes/version.php`, no de CLAUDE.md, que aun dice 6.8): esa regla viaja
 * en `wp-block-library-inline-css` (offset 6843), no en
 * `classic-theme-styles-inline-css`, que solo trae `.wp-block-button__link` y
 * `.wp-block-file__button`. Importa saberlo porque
 * `wp_dequeue_style('classic-theme-styles')` no habria arreglado nada.
 * `style.css` se encola antes (offset 3871), de ahi que perdiera por orden.
 * `:where(html)` NO sirve: `:where()` aporta 0, deja la regla en (0,2,0) y el
 * empate lo sigue ganando quien va detras. `:root` la sube a (0,3,0).
 *
 * `color` se declara aunque antes no estuviera, y es la mitad del arreglo: sin
 * el, subir la especificidad deja el `#444` de WordPress sobre la superficie
 * del tema, que en oscuro da **1.74:1**, peor que el 7.17:1 de hoy. Con el:
 * 17.93:1 en claro y 14.72:1 en oscuro.
 * `display` se declara por lo mismo, para que el bloque no dependa en silencio
 * de que la hoja de bloques de WordPress siga en la cola.
 *
 * Es una capa que flota sobre el contenido, asi que lleva sombra lg y borde:
 * con la paleta «Expediente» la sombra md ya no delimita nada.
 */
:root .screen-reader-text:focus {
    position: fixed !important;
    top: var(--pf-space-2xs);
    left: var(--pf-space-2xs);
    z-index: var(--pf-z-modal);
    display: block;
    width: auto;
    height: auto;
    padding: var(--pf-space-2xs) var(--pf-space-sm);
    clip: auto;
    clip-path: none;
    color: var(--pf-color-text);
    background: var(--pf-color-surface);
    border: var(--pf-rule);
    border-radius: var(--pf-radius-sm);
    box-shadow: var(--pf-shadow-lg);
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
}

/* -------------------------------------------------------------------------
 * 7. Alineaciones de WordPress
 * ---------------------------------------------------------------------- */

.alignleft {
    float: left;
    margin: 0 var(--pf-space-md) var(--pf-space-sm) 0;
}

.alignright {
    float: right;
    margin: 0 0 var(--pf-space-sm) var(--pf-space-md);
}

.aligncenter {
    display: block;
    margin-inline: auto;
}

.alignwide,
.alignfull {
    max-width: none;
}

.wp-caption-text,
figcaption {
    color: var(--pf-color-text-muted);
    font-size: var(--pf-text-sm);
}