/* ==========================================================================
   Edumy Child · Escuela Baby Plutón · Variables
   1) Respaldos: la paleta de la landing «Astrología Natural» (2026-11). La hoja de la landing activa
      (https://inscripcion.babypluton.com/tema.css, se carga después) los reemplaza; si no responde, el sitio
      se ve con estos.
   2) Derivados (los mismos de landing/assets/css/landing.css) y roles del sitio (--bp-*), que son lo único que
      usan sitio.css, inicio.css y los colores de Elementor (inc/colores.php).
   ========================================================================== */

:root {
    --c-primary: #f3842c;
    --c-primary-rgb: 243, 132, 44;
    --c-primary-dark: #af5f20;
    --c-primary-light: #f49345;
    --c-accent: #464464;
    --c-accent-rgb: 70, 68, 100;
    --c-accent-ink: #ffffff;
    --c-text: #ffffff;
    --c-text-rgb: 255, 255, 255;
    --c-surface: #ffffff;
    --c-surface-ink: #3c3a56;
    --c-surface-strong: #464464;
    --t-deep: #555370;
    --t-deeper: #464464;
    --c-on-deep: #ffffff;
    --c-deep-accent: #f3842c;
    --c-deep-soft: #ffffff;
    --c-cta: #f3842c;
    --c-cta-ink: #1f1d33;
    --c-primary-soft: #464464;
    --c-card-text: #ffffff;
    --c-card-strong: #ffffff;
    --c-ticket-label: #f3842c;
    --f-title: "League Spartan", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --f-subtitle: "Playfair Display", Georgia, "Times New Roman", Times, serif;
    --f-body: "Jost", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --f-highlight: "Playfair Display", Georgia, "Times New Roman", Times, serif;
    --fw-title: 700;
    --fw-subtitle: 600;
    --fw-body: 400;
    --fw-highlight: 400;
    --title-spacing: 0.47em;
    --title-scale: 1;
    --hero-bg: linear-gradient(170deg, #ffd2ad, #f3842c);
    --hero-c1: #ffd2ad;
    --hero-c2: #f3842c;
}

:root {
    /* Derivados (landing.css) */
    --c-deep: var(--t-deep);
    --c-deeper: var(--t-deeper);
    --c-card: color-mix(in srgb, var(--c-primary) 88%, var(--c-text));
    --c-light: var(--c-surface);
    --c-ink: var(--c-surface-ink);
    --c-ink-soft: color-mix(in srgb, var(--c-ink) 74%, transparent);
    --c-ink-line: color-mix(in srgb, var(--c-ink) 20%, transparent);
    --c-ink-strong: var(--c-surface-strong);
    --c-accent-soft: color-mix(in srgb, var(--c-accent) 74%, #fff);
    --c-on-accent: var(--c-accent-ink);
    --c-text-strong: color-mix(in srgb, var(--c-text) 55%, #fff);
    --c-muted: color-mix(in srgb, var(--c-text) 76%, transparent);
    --c-line: color-mix(in srgb, var(--c-text) 16%, transparent);
    --c-line-strong: color-mix(in srgb, var(--c-text) 36%, transparent);
    --ff-title: var(--f-title);
    --ff-subtitle: var(--f-subtitle);
    --ff-body: var(--f-body);
    --ff-highlight: var(--f-highlight);

    /* Roles del sitio: los bloques claros de WordPress (páginas, cursos, tienda) son la «superficie» de la landing */
    --bp-titulo: var(--c-ink-strong);
    --bp-texto: var(--c-ink);
    --bp-texto-suave: var(--c-ink-soft);
    --bp-linea: var(--c-ink-line);
    --bp-destacado: var(--c-ink-strong);
    --bp-acento: var(--c-accent);
    --bp-acento-texto: var(--c-on-accent);
    --bp-primario: var(--c-primary);
    --bp-primario-texto: var(--c-primary-dark);
    --bp-fondo-claro: var(--c-light);
    --bp-fondo-tinte: color-mix(in srgb, var(--c-primary) 9%, #fff);
    --bp-fondo-oscuro: var(--c-deep);
    --bp-fondo-oscuro-2: var(--c-deeper);
    --bp-sobre-oscuro: var(--c-on-deep);

    /* Medidas */
    --bp-wrap: 1240px;
    --bp-gutter: clamp(16px, 4vw, 40px);
    --bp-radius: 20px;
    --bp-ease: cubic-bezier(.22, .7, .2, 1);
}

@supports not (color: color-mix(in srgb, red, blue)) {
    :root {
        --c-card: var(--c-primary);
        --c-ink-soft: var(--c-ink);
        --c-ink-line: rgba(0, 0, 0, .16);
        --c-accent-soft: var(--c-accent);
        --c-text-strong: #fff;
        --c-muted: var(--c-text);
        --c-line: rgba(255, 255, 255, .16);
        --c-line-strong: rgba(255, 255, 255, .36);
        --bp-fondo-tinte: #fbf7f3;
    }
}