/* Lifepro — marca regional, tono aspiracional "Improving Health".
   Quicksand (redondeada/geometrica, la que mejor lee en parrafos largos de
   las 3 alternativas gratuitas al Helvetica Rounded del logo), esquinas
   mucho mas redondeadas, botones en pildora, degradado teal-a-verde.
   El footer usa un fondo claro (no solido) porque solo tenemos el logo a
   color, no una version blanca -- así se mantiene legible. */
:root {
    /* Accesibilidad: el teal oficial (#08A79D, Pantone 3272C) da ~2.9:1 de
       contraste contra blanco -- muy por debajo del 4.5:1 de WCAG AA para
       texto normal (y del 4.5:1 para texto blanco sobre botones de este
       color). Usamos un tono mas oscuro del mismo teal como --color-primary
       funcional (~5.3:1) para texto, links y fondos de boton; el teal oficial
       queda disponible como --color-primary-vivid para usos decorativos
       puntuales donde no hay texto encima. */
    --color-primary: #067871;
    --color-primary-dark: #055f59;
    --color-primary-vivid: #08A79D;
    --color-secondary: #8CC63E;
    --color-secondary-dark: #6ea62e;
    --color-accent: #6C6E70;
    --color-on-primary: #ffffff;

    --color-heading: #3f4244;
    --color-text: #45484a;
    --color-text-muted: #6C6E70;
    --color-bg: #ffffff;
    --color-bg-alt: #f2faf8;
    --color-card-bg: #ffffff;
    --border-color: #dde9e6;

    --font-heading: 'Quicksand', sans-serif;
    --font-heading-weight: 700;
    --font-subheading: 'Quicksand', sans-serif;
    --font-subheading-weight: 600;
    --font-body: 'Quicksand', sans-serif;
    --font-body-weight: 500;

    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 20px;
    --radius-pill: 999px;

    --header-bg: #ffffff;
    --header-text: #067871;
    --header-border: #eaf6f4;
    --logo-height: 38px;
    --nav-gap: 2rem;

    /* Extremos originales (#08A79D, #8CC63E) dan 2.9:1 y 2.0:1 con texto
       blanco: muy por debajo de AA. Usamos las variantes oscuras (ya
       definidas arriba) mas un velo (--hero-overlay) para llegar a ~5-6.7:1. */
    --hero-bg: linear-gradient(135deg, #067871 0%, #6ea62e 100%);
    --hero-text: #ffffff;
    --hero-eyebrow: #eafce6;
    --hero-padding: 4.5rem 0;
    --hero-overlay: 0.38;

    --eyebrow-transform: none;
    --eyebrow-spacing: normal;

    --card-shadow: 0 2px 10px rgba(8, 167, 157, 0.1);
    --card-shadow-hover: 0 14px 30px rgba(8, 167, 157, 0.16);

    --footer-bg: #f2faf8;
    --footer-text: #45484a;
    --footer-margin-top: 4rem;
}

/* En fondo claro, los links del footer necesitan un color propio: el
   footer-text generico de base.css asume texto claro sobre fondo oscuro. */
.site-footer a { color: var(--color-primary); opacity: 1; }
.site-footer .footer-bottom { border-top-color: var(--border-color); }

/* Idem para el input de suscripcion: el estilo generico asume fondo oscuro. */
.footer-subscribe input[type=email] {
    background: #ffffff;
    border-color: var(--border-color);
    color: var(--color-text);
}