/* ============================================================================
   home-offline-rubro.css — Capa de FORMA por rubro para la home pública
   ----------------------------------------------------------------------------
   Lleva a la home sin sesión el sistema --skin-* que ya usa la home del alumno
   (home-alumno-rubro.css): tipografía display propia, escala de radios, filete
   de acento y escala tipográfica por rubro. Antes de este archivo la home
   pública usaba una sola display (Playfair) y radios iguales en los 8 rubros.

   ALCANCE — SOLO FORMA (decisión 2026-08-06)
   Este archivo NO declara ningún token --theme-*. La paleta de la home pública
   sigue siendo la de home-rubro.css, que ya define primary/secondary/background/
   footer/-rgb/--bs-primary por rubro. Redefinir --theme-* acá (que carga después
   y usa el MISMO selector body.home-skin-<rubro>) pisaría la paleta de toda la
   home pública — navbar, footer y modales incluidos — no solo estas secciones.

   Por eso, y para que no haya dos fuentes de verdad del mismo color:
     · el filete de acento se deriva de var(--theme-primary), que ya vale
       exactamente el hex que pide el diseño en los 8 rubros (arte es la
       excepción: va transparente);
     · --skin-pop es un ALIAS del token "pop" que cada rubro ya define en
       home-rubro.css (--skin-amber, --skin-cyan, …), no un hex nuevo.

   Cargar DESPUÉS de home-rubro.css.
   ============================================================================ */

/* ── Arte ─────────────────────────────────────────────────────────────────── */
body.home-skin-arte {
    --skin-font-display: 'Playfair Display', Georgia, serif;
    --skin-font-meta: 'Inter', system-ui, sans-serif;
    --skin-title-transform: none;
    --skin-title-tracking: -0.01em;
    --skin-title-weight: 700;
    --skin-em-style: italic;
    --skin-label-transform: none;
    --skin-label-tracking: 0;

    --skin-radius-card: 20px;
    --skin-radius-chip: 999px;
    --skin-radius-btn: 999px;
    --skin-radius-thumb: 14px;
    --skin-radius-avatar: 50%;
    --skin-radius-avatar-ring: 50%;

    --skin-eyebrow-padding: 5px 14px;
    /* Arte es el único rubro sin filete: su identidad es el pastel, no el borde. */
    --skin-accent-edge: 1px solid transparent;
    --skin-accent-top: 1px solid transparent;

    --skin-h2: 33px;   --skin-h2-m: 25px;
    --skin-h3: 22px;   --skin-h3-m: 18.5px;
    --skin-h4: 25px;   --skin-h4-m: 20px;

    --skin-pop: var(--theme-primary, #9ed0c5);
}

/* ── Música ───────────────────────────────────────────────────────────────── */
body.home-skin-musica {
    --skin-font-display: 'Outfit', 'Inter', sans-serif;
    --skin-font-meta: 'Inter', system-ui, sans-serif;
    --skin-title-transform: none;
    --skin-title-tracking: -0.015em;
    --skin-title-weight: 700;
    --skin-em-style: normal;
    --skin-label-transform: none;
    --skin-label-tracking: 0;

    --skin-radius-card: 16px;
    --skin-radius-chip: 999px;
    --skin-radius-btn: 999px;
    --skin-radius-thumb: 12px;
    --skin-radius-avatar: 50%;
    --skin-radius-avatar-ring: 50%;

    --skin-eyebrow-padding: 5px 14px;
    --skin-accent-edge: 2px solid var(--theme-primary, #0d7990);
    --skin-accent-top: 2px solid var(--theme-primary, #0d7990);

    --skin-h2: 32px;   --skin-h2-m: 25px;
    --skin-h3: 21.5px; --skin-h3-m: 18.5px;
    --skin-h4: 24px;   --skin-h4-m: 19.5px;

    --skin-pop: var(--skin-cyan, #42e7ff);
}

/* ── Técnica / Oficios ────────────────────────────────────────────────────── */
body.home-skin-tecnica {
    --skin-font-display: 'Oswald', 'Arial Narrow', sans-serif;
    --skin-font-meta: 'Space Mono', ui-monospace, monospace;
    --skin-title-transform: uppercase;
    --skin-title-tracking: 0.045em;
    --skin-title-weight: 600;
    --skin-em-style: normal;
    --skin-label-transform: uppercase;
    --skin-label-tracking: 0.06em;

    /* Radios casi rectos: el oficio se lee como ficha técnica, no como card blanda. */
    --skin-radius-card: 6px;
    --skin-radius-chip: 3px;
    --skin-radius-btn: 4px;
    --skin-radius-thumb: 4px;
    --skin-radius-avatar: 6px;
    --skin-radius-avatar-ring: 10px;

    --skin-eyebrow-padding: 5px 12px;
    --skin-accent-edge: 3px solid var(--theme-primary, #d98f12);
    --skin-accent-top: 3px solid var(--theme-primary, #d98f12);

    --skin-h2: 32px;   --skin-h2-m: 24px;
    --skin-h3: 21px;   --skin-h3-m: 18px;
    --skin-h4: 23px;   --skin-h4-m: 19px;

    --skin-pop: var(--skin-amber, #ffbc45);
}

/* ── Tech ─────────────────────────────────────────────────────────────────── */
body.home-skin-tech {
    --skin-font-display: 'Space Grotesk', 'Inter', sans-serif;
    --skin-font-meta: 'Space Mono', ui-monospace, monospace;
    --skin-title-transform: none;
    --skin-title-tracking: -0.02em;
    --skin-title-weight: 700;
    --skin-em-style: normal;
    --skin-label-transform: none;
    --skin-label-tracking: 0.01em;

    --skin-radius-card: 12px;
    --skin-radius-chip: 6px;
    --skin-radius-btn: 8px;
    --skin-radius-thumb: 8px;
    --skin-radius-avatar: 14px;
    --skin-radius-avatar-ring: 18px;

    --skin-eyebrow-padding: 5px 12px;
    --skin-accent-edge: 2px solid var(--theme-primary, #0a7d46);
    --skin-accent-top: 2px solid var(--theme-primary, #0a7d46);

    --skin-h2: 32px;   --skin-h2-m: 25px;
    --skin-h3: 21px;   --skin-h3-m: 18px;
    --skin-h4: 24px;   --skin-h4-m: 19.5px;

    --skin-pop: var(--skin-neon, #00ff88);
}

/* ── Negocios ─────────────────────────────────────────────────────────────── */
body.home-skin-biz {
    --skin-font-display: 'Manrope', 'Inter', sans-serif;
    --skin-font-meta: 'Inter', system-ui, sans-serif;
    --skin-title-transform: none;
    --skin-title-tracking: -0.015em;
    --skin-title-weight: 800;
    --skin-em-style: normal;
    --skin-label-transform: none;
    --skin-label-tracking: 0.01em;

    --skin-radius-card: 10px;
    --skin-radius-chip: 5px;
    --skin-radius-btn: 6px;
    --skin-radius-thumb: 8px;
    --skin-radius-avatar: 10px;
    --skin-radius-avatar-ring: 14px;

    --skin-eyebrow-padding: 5px 13px;
    --skin-accent-edge: 2px solid var(--theme-primary, #b8923a);
    --skin-accent-top: 2px solid var(--theme-primary, #b8923a);

    --skin-h2: 31px;   --skin-h2-m: 24px;
    --skin-h3: 20.5px; --skin-h3-m: 17.5px;
    --skin-h4: 23px;   --skin-h4-m: 19px;

    --skin-pop: var(--skin-gold, #e0bf63);
}

/* ── Fitness ──────────────────────────────────────────────────────────────── */
body.home-skin-fit {
    --skin-font-display: 'Archivo', 'Inter', sans-serif;
    --skin-font-meta: 'Inter', system-ui, sans-serif;
    --skin-title-transform: uppercase;
    --skin-title-tracking: 0.01em;
    --skin-title-weight: 800;
    --skin-em-style: normal;
    --skin-label-transform: uppercase;
    --skin-label-tracking: 0.05em;

    --skin-radius-card: 14px;
    --skin-radius-chip: 8px;
    --skin-radius-btn: 10px;
    --skin-radius-thumb: 10px;
    --skin-radius-avatar: 18px;
    --skin-radius-avatar-ring: 22px;

    --skin-eyebrow-padding: 5px 13px;
    --skin-accent-edge: 3px solid var(--theme-primary, #0c8a5e);
    --skin-accent-top: 3px solid var(--theme-primary, #0c8a5e);

    --skin-h2: 33px;   --skin-h2-m: 25px;
    --skin-h3: 21px;   --skin-h3-m: 18px;
    --skin-h4: 24px;   --skin-h4-m: 19.5px;

    --skin-pop: var(--skin-lime, #68f6ba);
}

/* ── Educación ────────────────────────────────────────────────────────────── */
body.home-skin-edu {
    --skin-font-display: 'Lora', Georgia, serif;
    --skin-font-meta: 'Inter', system-ui, sans-serif;
    --skin-title-transform: none;
    --skin-title-tracking: -0.005em;
    --skin-title-weight: 600;
    --skin-em-style: italic;
    --skin-label-transform: none;
    --skin-label-tracking: 0;

    --skin-radius-card: 12px;
    --skin-radius-chip: 999px;
    --skin-radius-btn: 999px;
    --skin-radius-thumb: 10px;
    --skin-radius-avatar: 50%;
    --skin-radius-avatar-ring: 50%;

    --skin-eyebrow-padding: 5px 14px;
    --skin-accent-edge: 2px solid var(--theme-primary, #36507a);
    --skin-accent-top: 2px solid var(--theme-primary, #36507a);

    --skin-h2: 31px;   --skin-h2-m: 24px;
    --skin-h3: 20.5px; --skin-h3-m: 17.5px;
    --skin-h4: 23px;   --skin-h4-m: 19px;

    --skin-pop: var(--skin-edu, #7d9bc9);
}

/* ── Otros ────────────────────────────────────────────────────────────────── */
body.home-skin-otros {
    --skin-font-display: 'Inter Tight', 'Inter', sans-serif;
    --skin-font-meta: 'Inter', system-ui, sans-serif;
    --skin-title-transform: none;
    --skin-title-tracking: -0.018em;
    --skin-title-weight: 700;
    --skin-em-style: normal;
    --skin-label-transform: none;
    --skin-label-tracking: 0;

    --skin-radius-card: 10px;
    --skin-radius-chip: 6px;
    --skin-radius-btn: 8px;
    --skin-radius-thumb: 8px;
    --skin-radius-avatar: 12px;
    --skin-radius-avatar-ring: 16px;

    --skin-eyebrow-padding: 5px 13px;
    --skin-accent-edge: 2px solid var(--theme-primary, #3a44a0);
    --skin-accent-top: 2px solid var(--theme-primary, #3a44a0);

    --skin-h2: 31px;   --skin-h2-m: 24px;
    --skin-h3: 20.5px; --skin-h3-m: 17.5px;
    --skin-h4: 23px;   --skin-h4-m: 19px;

    --skin-pop: var(--skin-peri, #a9b6ff);
}

/* ── Escala tipográfica en mobile ─────────────────────────────────────────── */
/* Mismo breakpoint que usa home-alumno-rubro.css para su variante -m. */
@media (max-width: 767.98px) {
    body[class*="home-skin-"] {
        --skin-h2: var(--skin-h2-m);
        --skin-h3: var(--skin-h3-m);
        --skin-h4: var(--skin-h4-m);
    }
}