/* ============================================================================
   BIOAUREA — Brand Tokens (single source of truth)
   Paleta editorial tierra/sepia, sin rojo Hollywood.
   Toda pieza visual y email reusa estas variables.
   Inspirado en el lenguaje del Auditor de Impacto Ambiental (V2 redesign).
   ========================================================================== */

:root {
    /* --- COLOR · Paleta editorial tierra/sepia --- */
    --bio-bg:           #F4EFE7;   /* fondo papel claro */
    --bio-bg-soft:      #EAE3D6;   /* fondo bloque */
    --bio-bg-deep:      #1E1A14;   /* fondo modo oscuro / footer */
    --bio-paper:        #FBF8F2;   /* tarjetas */

    --bio-ink:          #2B2118;   /* texto principal sobre claro */
    --bio-ink-mid:      #5C4A38;   /* texto medio */
    --bio-ink-soft:     #8C7960;   /* texto secundario */
    --bio-ink-ghost:    #B5A88F;   /* texto fantasma / metadata */

    /* Acentos editoriales */
    --bio-sepia:        #8C6B3F;   /* acento principal — botones, links */
    --bio-sepia-deep:   #6B4F2A;   /* hover */
    --bio-terracota:    #D49070;   /* pérdida / alerta suave */
    --bio-ocre:         #E4B585;   /* destacar / sponsor slot */
    --bio-musgo:        #7DAB6A;   /* ganancia / recuperación */
    --bio-bosque:       #1FA855;   /* verde BioAurea — solo CTAs primarios */
    --bio-bosque-light: #2DC066;
    --bio-warning:      #B85C3D;   /* alertas críticas (sepia oscuro, NO rojo) */

    /* Submarca: 1 color de acento por hijo del sello */
    --bio-watch:        #8C6B3F;   /* sepia — Vereda Watch */
    --bio-mapa:         #B85C3D;   /* tierra — El Mapa */
    --bio-profundo:     #6B4F2A;   /* ocre profundo — Long-form */
    --bio-boletin:      #5C4A38;   /* tinta — Boletín semanal */
    --bio-brief:        #A89878;   /* gris cálido — Brief institucional */

    /* Líneas y bordes */
    --bio-line:         rgba(43, 33, 24, 0.12);
    --bio-line-strong:  rgba(43, 33, 24, 0.24);

    /* --- TYPE · Source Serif (titulares) + Inter (datos) --- */
    --bio-font-serif:   'Source Serif 4', 'Source Serif Pro', Georgia, serif;
    --bio-font-sans:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --bio-font-mono:    'JetBrains Mono', 'IBM Plex Mono', Menlo, monospace;

    /* Escala tipográfica (pieza editorial, no UI) */
    --bio-size-hero:    44px;   /* titular hero (boletín, El Mapa) */
    --bio-size-display: 32px;   /* sección principal */
    --bio-size-h1:      24px;   /* titular pieza */
    --bio-size-h2:      18px;   /* subtítulo */
    --bio-size-body:    15px;   /* cuerpo */
    --bio-size-meta:    12px;   /* metadata, fechas, fuentes */
    --bio-size-tiny:    10px;   /* attribution */

    --bio-leading-tight: 1.15;
    --bio-leading-normal:1.6;
    --bio-leading-loose: 1.8;

    /* --- SPACING · escala 4pt --- */
    --bio-space-1: 4px;
    --bio-space-2: 8px;
    --bio-space-3: 12px;
    --bio-space-4: 16px;
    --bio-space-5: 24px;
    --bio-space-6: 32px;
    --bio-space-7: 48px;
    --bio-space-8: 64px;
    --bio-space-9: 96px;

    /* --- LAYOUT --- */
    --bio-radius:       4px;     /* editorial — esquinas mínimas, no rounded SaaS */
    --bio-radius-soft:  8px;
    --bio-radius-lg:    12px;
    --bio-shadow-1:     0 1px 2px rgba(43, 33, 24, 0.06);
    --bio-shadow-2:     0 4px 12px rgba(43, 33, 24, 0.10);
    --bio-shadow-3:     0 12px 32px rgba(43, 33, 24, 0.14);

    /* --- ASPECT RATIOS (renderizado de visuales) --- */
    --aspect-1x1: 1080px / 1080px;   /* IG square */
    --aspect-9x16: 1080px / 1920px;  /* Reels / TikTok / Stories */
    --aspect-16x9: 1920px / 1080px;  /* X / YouTube */
    --aspect-4x5:  1080px / 1350px;  /* IG portrait, LinkedIn */
}

/* --- DARK / DEEP variant para hero pieces y video bg --- */
[data-bio-mode="deep"] {
    --bio-bg:        var(--bio-bg-deep);
    --bio-bg-soft:   #2A241B;
    --bio-paper:     #2A241B;
    --bio-ink:       #F4EFE7;
    --bio-ink-mid:   rgba(244, 239, 231, 0.78);
    --bio-ink-soft:  rgba(244, 239, 231, 0.55);
    --bio-ink-ghost: rgba(244, 239, 231, 0.30);
    --bio-line:        rgba(244, 239, 231, 0.10);
    --bio-line-strong: rgba(244, 239, 231, 0.20);
}

/* --- CLASES UTILITARIAS PARA TEMPLATES --- */
.bio-hero        { font-family: var(--bio-font-serif); font-size: var(--bio-size-hero); line-height: var(--bio-leading-tight); color: var(--bio-ink); font-weight: 600; letter-spacing: -0.02em; }
.bio-display     { font-family: var(--bio-font-serif); font-size: var(--bio-size-display); line-height: var(--bio-leading-tight); color: var(--bio-ink); font-weight: 600; }
.bio-h1          { font-family: var(--bio-font-serif); font-size: var(--bio-size-h1); line-height: 1.25; color: var(--bio-ink); font-weight: 600; }
.bio-h2          { font-family: var(--bio-font-sans);  font-size: var(--bio-size-h2); line-height: 1.4; color: var(--bio-ink); font-weight: 600; letter-spacing: -0.01em; }
.bio-body        { font-family: var(--bio-font-sans);  font-size: var(--bio-size-body); line-height: var(--bio-leading-normal); color: var(--bio-ink-mid); }
.bio-meta        { font-family: var(--bio-font-sans);  font-size: var(--bio-size-meta); line-height: 1.4; color: var(--bio-ink-soft); text-transform: uppercase; letter-spacing: 0.08em; }
.bio-figure      { font-family: var(--bio-font-mono);  font-feature-settings: "tnum"; color: var(--bio-ink); }
.bio-figure-loss { color: var(--bio-terracota); }
.bio-figure-gain { color: var(--bio-musgo); }

.bio-divider     { height: 1px; background: var(--bio-line); border: 0; margin: var(--bio-space-5) 0; }
.bio-divider-strong { height: 2px; background: var(--bio-ink); border: 0; margin: var(--bio-space-5) 0; }

.bio-tag         { display: inline-block; padding: 2px 8px; font-family: var(--bio-font-sans); font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; background: var(--bio-bg-soft); color: var(--bio-ink-mid); border-radius: var(--bio-radius); }
.bio-tag-watch   { background: var(--bio-watch);    color: var(--bio-paper); }
.bio-tag-mapa    { background: var(--bio-mapa);     color: var(--bio-paper); }
.bio-tag-profundo{ background: var(--bio-profundo); color: var(--bio-paper); }
.bio-tag-boletin { background: var(--bio-boletin);  color: var(--bio-paper); }
.bio-tag-alerta  { background: var(--bio-warning);  color: var(--bio-paper); }

.bio-cta {
    display: inline-block; padding: 10px 20px;
    font-family: var(--bio-font-sans); font-size: 14px; font-weight: 500;
    background: var(--bio-sepia); color: var(--bio-paper);
    border: none; border-radius: var(--bio-radius);
    text-decoration: none; cursor: pointer;
    transition: background 0.15s ease;
}
.bio-cta:hover { background: var(--bio-sepia-deep); }
.bio-cta-ghost { background: transparent; color: var(--bio-sepia); border: 1px solid var(--bio-sepia); }
.bio-cta-ghost:hover { background: var(--bio-sepia); color: var(--bio-paper); }