:root {
    /* Colores corporativos (alineados con la paleta ya usada en el tema) */
    --color-primary: #DEF561; /* Verde lima Matteria */
    --color-dark: #2C2C44; 
    --color-navy: #0e3d5f;
    --color-teal: #7BDAB4;
    --color-cream: #F9F8F1;
    --color-bg-gradient: linear-gradient(135deg, #0b2c46 0%, #14503f 55%, #22a378 150%);
    /* Gradient teal específic de la cinta de clients (section#customers), mostrejat
       directament dels píxels de mocks/matteria_hero_section.png a l'alçada del ribbon.
       Deliberadament més cian que el Jungle Green del brandbook (--color-teal) perquè
       coincideix amb el disseny del mock, confirmat pel disseny. */
    --color-ribbon-gradient: linear-gradient(90deg, #26697f 0%, #20afc1 38%, #256b5b 100%);

    /* Degradat del donut de procés (section#process-donut): de verd llima a
       verd maragda. Colors exactes llegits del gradient SVG real de
       .claude/context/Matteria Home Standalone.html (stop 0 rgb(222,245,97),
       stop 1 rgb(39,165,129) = #27A581) - substitueix l'anterior #14503f
       (verd fosc improvisat, sense relació amb el mock real). Només 2 stops
       (start/end) perquè el mock no en porta un de mig; --color-donut-gradient-mid
       es manté per compatibilitat però ja no s'usa a process-donut-component.php. */
    --color-donut-gradient-start: var(--color-primary);
    --color-donut-gradient-mid: var(--color-teal);
    --color-donut-gradient-end: #27a581;

    /* Pill "BLOG" / "CAS D'ÈXIT" a #actualitat: el mock fa servir literalment
       el mateix verd maragda del donut (rgb(39,165,129) / #27A581), però a
       3.1:1 de contrast sobre blanc no compleix AA per text (calen 4.5:1) -
       per això aquí NO és el mateix valor exacte que --color-donut-gradient-end
       (allà és un fill SVG decoratiu, no text). Es fa servir un to més fosc
       dins la mateixa família de verd/tosca (mateix to ~157°, luminositat
       reduïda) que sí compleix AA (5.1:1), en comptes de l'anterior #14503f
       que ja no s'assemblava gens al verd del mock. */
    --color-pill-green: #1d7c61;

    /* Tipografía y espaciados */
    --font-main: 'Montserrat', sans-serif;
    --font-heading: 'Raleway', sans-serif;
    --spacing-md: 20px;

    /* Escala H1. El brandbook original deia Raleway 44pt/600 SemiBold, però
       l'H1 real del hero a .claude/context/Matteria Home Standalone.html és
       Raleway 700 Bold (fontWeight:700 explícit al node del heading) - es
       corregeix el pes aquí, que ho hereten totes les mides responsive
       d'hero.css. La mida (--font-size-h1) es manté: el canvas del mock és
       a zoom, i la resta de mides ja ajustades a ull contra el mateix mock
       (H2, targetes d'actualitat...) validen que l'escala actual és correcta,
       només el pes estava mal. */
    --font-weight-h1: 700;
    --font-size-h1: 59px;
    --line-height-h1: 91%;

    /* Configuración del puntero */
    --pointer-size: 600px;

    /* Alçada de la cinta de clients (section#customers) que ha de quedar visible dins
       del viewport per sota del hero, sense fer scroll, a ≥992px. Es comparteix
       deliberadament entre hero.css (resta l'alçada del hero) i customers.css (el mock
       encaixa visualment les dues seccions com si fossin una sola composició) — és una
       excepció conscient a la norma de "no bleeding entre components", no un descuit. */
    --customers-ribbon-peek: 82px;

    /* Espaiat vertical estàndard de les seccions "planes" de la portada
       (Casos d'èxit, Actualitat) - mateix valor ja usat de forma idèntica,
       però duplicat, a success-stories.css i actualitat.css. #process-donut/
       #services-scroll són scroll-hijacked (el seu "padding" centra el
       contingut fixat dins del 100vh pinned, no és un gap entre seccions) i
       #customers/#hero-header depenen del seu propi càlcul de peek
       (--customers-ribbon-peek, més amunt), així que cap dels dos fa servir
       aquest estàndard. */
    --section-spacing-y: 64px;
    --section-spacing-y-lg: 100px;
    --section-header-gap: 40px;
    --section-header-gap-lg: 56px;
}