:root {
      /* Paleta Oficial Manual de Imagen FENASIES Vol. 1 */
      --amarillo-oro: #F0B010;
      --oro-intenso: #D99B00;
      --amarillo-sol: #FFD147;
      --crema-solar: #FFF8E1;
      --azul-educacion: #1050A0;
      --azul-profundo: #0A2E5C;
      --azul-cian: #00A8E6;
      --rojo-sindical: #E03040;

      /* Variables dinámicas según la alternativa de interfaz activa */
      --bg-primary: #FFF8E1;
      --bg-secondary: #FFFFFF;
      --bg-elevated: #FFFDF7;
      --text-primary: #0A2E5C;
      --text-secondary: #334E68;
      --text-muted: #627D98;
      --border-color: rgba(16, 80, 160, 0.14);
      --accent-primary: #1050A0;
      --accent-cta: #E03040;
      --accent-gold: #F0B010;
      --card-radius: 1rem;
      --card-shadow: 0 10px 30px -10px rgba(10, 46, 92, 0.08);
    }

    /* Alternativa 1: Editorial Institucional Cálida (Inspirada en Stripe / The Guardian / Crema Solar) */
    body[data-proposal="editorial"] {
      --bg-primary: #FFF8E1;
      --bg-secondary: #FFFFFF;
      --bg-elevated: #FDF6DF;
      --text-primary: #0A2E5C;
      --text-secondary: #243B53;
      --text-muted: #486581;
      --border-color: rgba(10, 46, 92, 0.12);
      --accent-primary: #1050A0;
      --accent-cta: #E03040;
      --accent-gold: #D99B00;
      --card-radius: 0.875rem;
      --card-shadow: 0 12px 32px -8px rgba(10, 46, 92, 0.09);
    }

    /* Alternativa 2: Vanguardia Sindical Dark (Inspirada en Linear / Vercel / Azul Profundo) */
    body[data-proposal="vanguardia"] {
      --bg-primary: #061B38;
      --bg-secondary: #0A2E5C;
      --bg-elevated: #103A73;
      --text-primary: #FFF8E1;
      --text-secondary: #D9E2EC;
      --text-muted: #9FB3C8;
      --border-color: rgba(0, 168, 230, 0.24);
      --accent-primary: #00A8E6;
      --accent-cta: #F0B010;
      --accent-gold: #FFD147;
      --card-radius: 0.75rem;
      --card-shadow: 0 16px 40px -12px rgba(0, 0, 0, 0.55);
    }

    /* Alternativa 3: Bento Modular Dinámico (Inspirada en Apple / Awwwards / Blanco & Azul Educación) */
    body[data-proposal="bento"] {
      --bg-primary: #F4F7FB;
      --bg-secondary: #FFFFFF;
      --bg-elevated: #EBF2FA;
      --text-primary: #0A2E5C;
      --text-secondary: #1E3A5F;
      --text-muted: #526D82;
      --border-color: rgba(16, 80, 160, 0.16);
      --accent-primary: #1050A0;
      --accent-cta: #E03040;
      --accent-gold: #F0B010;
      --card-radius: 1.5rem;
      --card-shadow: 0 18px 36px -14px rgba(16, 80, 160, 0.12);
    }

    body {
      font-family: 'Source Sans 3', sans-serif;
      background-color: var(--bg-primary);
      color: var(--text-primary);
      transition: background-color 0.35s cubic-bezier(0.16, 1, 0.3, 1), color 0.35s ease;
      overflow-x: hidden;
    }

    h1, h2, h3, h4, .font-heading {
      font-family: 'Montserrat', sans-serif;
      letter-spacing: -0.02em;
    }

    .font-serif-solemn {
      font-family: 'Source Serif 4', Georgia, serif;
    }

    /* Patrón sutil de ondas doradas inspirado en la portada del Manual de Imagen */
    .bg-manual-waves {
      background-image: radial-gradient(circle at 85% 15%, rgba(240, 176, 16, 0.14) 0%, transparent 45%),
                        radial-gradient(circle at 12% 80%, rgba(0, 168, 230, 0.10) 0%, transparent 50%),
                        repeating-radial-gradient(circle at 100% 0%, transparent 0, transparent 28px, rgba(217, 155, 0, 0.045) 29px, transparent 30px);
    }

    .theme-card {
      background-color: var(--bg-secondary);
      border: 1px solid var(--border-color);
      border-radius: var(--card-radius);
      box-shadow: var(--card-shadow);
      transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s ease, border-color 0.25s ease, background-color 0.3s ease;
    }

    .theme-card:hover {
      transform: translateY(-3px);
      border-color: var(--accent-primary);
    }

    .theme-elevated {
      background-color: var(--bg-elevated);
      border: 1px solid var(--border-color);
      border-radius: var(--card-radius);
    }

    .text-theme-secondary {
      color: var(--text-secondary);
    }

    .text-theme-muted {
      color: var(--text-muted);
    }

    /* Indicadores de foco visibles para accesibilidad WCAG 2.1 AA */
    button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
      outline: 3px solid var(--azul-cian);
      outline-offset: 2px;
    }

    /* Animación suave al cambiar de pestaña o propuesta */
    @keyframes fadeSlideUp {
      from { opacity: 0; transform: translateY(10px); }
      to { opacity: 1; transform: translateY(0); }
    }
    .animate-view {
      animation: fadeSlideUp 0.32s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    }

    /* Barra tricolor institucional superior (Manual pág. 4) */
    .fenasies-tricolor-bar {
      background: linear-gradient(90deg, #F0B010 0%, #FFD147 45%, #1050A0 45%, #0A2E5C 80%, #E03040 80%, #E03040 100%);
    }