/*
 * Tokens de «Lo Encontré Por Ti».
 *
 * Un solo verde manda: --brand y --action son el mismo tono, el del logo.
 * No hay un segundo color de llamada a la acción, ni acentos por categoría:
 * las categorías se distinguen por su icono. El terracota sobrevive solo como
 * acento menor, en la columna «lo mejorable» de pros y contras.
 * No añadir colores fuera de esta lista.
 *
 * Fuentes autoalojadas: ni una petición a Google Fonts.
 */

/* --- Lora (titulares) --------------------------------------------------- */
@font-face {
    font-family: 'Lora';
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url('../fonts/Lora-latin.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: 'Lora';
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url('../fonts/Lora-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
        U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
        U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: 'Lora';
    font-style: italic;
    font-weight: 400 700;
    font-display: swap;
    src: url('../fonts/Lora-Italic-latin.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: 'Lora';
    font-style: italic;
    font-weight: 400 700;
    font-display: swap;
    src: url('../fonts/Lora-Italic-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
        U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
        U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* --- Montserrat (cuerpo e interfaz) ------------------------------------- */
@font-face {
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url('../fonts/Montserrat-latin.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: 'Montserrat';
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url('../fonts/Montserrat-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
        U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
        U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
    /* --- Salvia: identidad y acción --- */
    --sage-50: #f0f3ec;
    --sage-100: #dee6d3;
    --sage-200: #c4d1b3;
    --sage-300: #a9b996;
    --sage-400: #90a27b;
    --sage-500: #7c8b6c;
    /* El verde del logo. Ancla de la escala: es a la vez la marca y el color
       de acción, así que es el tono que más veces se pinta en el sitio. */
    --sage-600: #5e654c;
    --sage-700: #4e5b43;
    --sage-800: #3a4432;

    /* --- Neutros cálidos: aquí vive la calidez de la marca --- */
    --paper: #fbf8f2;
    --oat: #f4eee2;
    --sand: #ebe3d4;
    --linen: #e0d7c6;
    --stone: #cfc5b1;
    /* Tono del marcador que sustituye a una foto que falta. Da 3,11 sobre
       arena: se lee como marca de agua deliberada, no como un fallo de carga.
       Con el --stone de arriba se quedaba en 1,34 y no se veía nada. */
    --stone-ink: #8c7e66;

    /* --- Texto --- */
    --ink: #2e2d29;
    --graphite: #46443e;
    /* Oscurecido desde el #736F65 del sistema original: aquel daba 4,34 sobre
       avena, 4,47 sobre salvia claro y 3,93 sobre arena, por debajo del 4,5
       que exige AA. Este pasa en las cinco superficies del tema. */
    --slate: #666158;
    --mist: #a39d90;

    /* --- Carbón: las guías se presentan sobre foto oscura --- */
    --char-900: #22201d;
    --char-800: #2c2a26;
    --char-700: #3a3733;

    /* --- Semánticos --- */
    --pro-fg: #52603f;
    --pro-bg: #eaf0e2;
    --pro-line: #c4d1b3;
    /* Terracota recuperado: en la versión anterior estaba desaturado a gris
       para no competir con un CTA que también era terracota. Sin ese
       conflicto, «lo mejorable» vuelve a su color. Da 5,59:1 sobre --con-bg. */
    --con-fg: #8a4b30;
    --con-bg: #f8e7dd;
    --con-line: #f5dbcb;
    --star: #e0a63f;

    /* Avisos informativos. 5,23:1. */
    --info-fg: #4b6470;
    --info-bg: #e4ecee;

    /* --- Alias. Los componentes usan estos, nunca los crudos. --- */
    /*
     * Marca y acción son el mismo verde: el design system es explícito en que
     * no hay un segundo color de llamada a la acción. El tono sale del SVG del
     * logo (#5E654C) en vez del salvia medio del sistema, que se quedaba en
     * 3,64:1 sobre blanco y no llegaba al 4,5 que exige AA. Este da 6,10:1
     * sobre blanco y 5,76:1 con la crema encima.
     */
    --brand: var(--sage-600);
    --action: var(--sage-600);
    --action-hover: var(--sage-700);
    --action-soft: var(--sage-50);

    --bg-page: var(--paper);
    --bg-band: var(--oat);
    --surface-card: #ffffff;
    --surface-raised: var(--oat);
    --surface-sunken: var(--sand);
    --surface-dark: var(--char-800);
    --border-hairline: var(--linen);
    --border-strong: var(--stone);
    --text-heading: var(--ink);
    --text-body: var(--graphite);
    --text-muted: var(--slate);
    --text-on-action: #f6faee;
    --text-on-brand: var(--text-on-action);

    /* Texto sobre carbón: 12,8:1 y ~7:1. */
    --text-on-dark: #f3f0e9;
    --text-on-dark-mut: rgba(243, 240, 233, 0.74);

    /* Velo de las tarjetas de guía: deja respirar la foto arriba y garantiza
       el contraste del texto abajo, sea cual sea la foto. */
    --overlay-dark: linear-gradient(
        180deg,
        rgba(24, 22, 20, 0) 8%,
        rgba(24, 22, 20, 0.72) 62%,
        rgba(24, 22, 20, 0.92) 100%
    );

    /* Sello sobre la foto del hero. Opaco, fiel al SVG de marca. */
    --seal-bg: var(--sage-600);
    --seal-line: rgba(246, 250, 238, 0.65);

    /* Motivo de disco: glifo de trazo fino dentro de un círculo suave. */
    --disc-bg: var(--oat);
    --disc-line: var(--sage-200);
    --disc-fg: var(--sage-600);

    /* --- Tipografía --- */
    --font-serif: 'Lora', Georgia, 'Times New Roman', serif;
    --font-sans: 'Montserrat', -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif;
    --font-heading: var(--font-serif);
    --font-body: var(--font-sans);
    --font-ui: var(--font-sans);

    --fs-display: 3.25rem;
    --fs-h1: 2.5rem;
    --fs-h2: 1.9375rem;
    --fs-h3: 1.5rem;
    --fs-h4: 1.25rem;
    --fs-lead: 1.1875rem;
    --fs-body: 1.0625rem;
    --fs-sm: 0.9375rem;
    --fs-xs: 0.8125rem;

    --lh-tight: 1.15;
    --lh-heading: 1.25;
    --lh-body: 1.65;
    --lh-snug: 1.4;
    --ls-tight: -0.01em;
    --ls-wide: 0.02em;
    --ls-caps: 0.08em;

    /* --- Espaciado, base de 4px --- */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 24px;
    --space-6: 32px;
    --space-7: 48px;
    --space-8: 64px;
    --space-9: 96px;
    --space-10: 128px;

    --container-max: 1200px;
    --container-text: 720px;
    --gutter: var(--space-5);

    /* --- Radios y sombras --- */
    --radius-xs: 6px;
    --radius-sm: 10px;
    --radius-md: 14px;
    --radius-lg: 18px;
    --radius-xl: 24px;
    --radius-pill: 999px;
    /* Todo botón es una píldora. */
    --radius-btn: var(--radius-pill);

    --shadow-xs: 0 1px 2px rgba(58, 48, 34, 0.06);
    --shadow-sm: 0 2px 8px rgba(58, 48, 34, 0.07);
    --shadow-md: 0 8px 24px rgba(58, 48, 34, 0.09);
    --shadow-lg: 0 18px 44px rgba(58, 48, 34, 0.12);

    /*
     * El sistema original usaba rgba(144,162,123,.45), demasiado claro para
     * verse sobre superficies claras. Se oscurece al tono de --sage-700 para
     * que el anillo de foco sea realmente visible, que es todo el punto.
     */
    --shadow-focus: 0 0 0 3px rgba(78, 91, 67, 0.55);

    /* --- Movimiento: sereno, sin rebotes --- */
    --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
    --dur-fast: 140ms;
    --dur-base: 220ms;
}

@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;
    }
}