/*
Theme Name:        Cognosfera Child
Theme URI:         https://cognosferadigital.com
Description:       Child theme oficial para el Website Institucional de Cognosfera Digital sobre Divi 5.
Author:            Cognosfera Digital
Author URI:        https://cognosferadigital.com
Template:          Divi
Version:           1.1.0
Text Domain:       cognosfera-child
*/

/* ==========================================================================
   DIRECTRICES DE ESTILO Y GOBERNANZA CSS
   ==========================================================================
   1. Este child theme complementa exclusivamente las capacidades nativas de Divi 5.
   2. Divi 5 NATIVO PRIMERO: usar Design Variables y Presets para diseño visual.
   3. Estas Custom Properties actúan como puente semántico y fallback interoperable.
   4. Prohibido el uso de !important salvo excepciones críticas documentadas en DECISIONS.md.
   5. Todo estilo debe ser responsive por diseño y modular.
   6. Paleta canónica: Brand Guidelines 2.0 (Regal Navy, Blue Bell, Light Cyan,
      Parchment, Light Coral, Vivid Orchid, Taupe Grey). Cero Slate/Ochre.
   ========================================================================== */

/* ==========================================================================
   1. DESIGN TOKENS (CSS CUSTOM PROPERTIES)
   ========================================================================== */
:root {
    /* 1.1. Primitivas de Marca (Brand Guidelines 2.0) */
    --cd-color-regal-navy:   #203F76; /* Primario institucional */
    --cd-color-blue-bell:    #2E96C6; /* Secundario digital / Interactivo */
    --cd-color-light-cyan:   #CAE2E4; /* Superficie digital clara / Acento */
    --cd-color-parchment:    #F5F2EB; /* Superficie editorial cálida */
    --cd-color-light-coral:  #E58689; /* Acento humano / Énfasis */
    --cd-color-vivid-orchid: #C41CC9; /* Innovación / Pensamiento divergente */
    --cd-color-taupe-grey:   #634E55; /* Neutralidad institucional cálida */

    /* 1.2. Paleta Semántica Global */
    --cd-color-primary:           var(--cd-color-regal-navy);
    --cd-color-secondary:         var(--cd-color-blue-bell);
    --cd-color-accent:            var(--cd-color-light-coral);
    --cd-color-accent-creative:   var(--cd-color-vivid-orchid);
    --cd-color-surface-light:     var(--cd-color-parchment);
    --cd-color-surface-subtle:    var(--cd-color-light-cyan);
    --cd-color-surface-dark:      var(--cd-color-regal-navy);
    --cd-color-surface-muted:     var(--cd-color-taupe-grey);

    /* 1.3. Semántica Contextual: On Light (Canvas claro / Parchment) */
    --cd-on-light-bg:             var(--cd-color-parchment);
    --cd-on-light-surface:        var(--cd-color-light-cyan);
    --cd-on-light-text-primary:   var(--cd-color-regal-navy); /* 9.23:1 AAA */
    --cd-on-light-text-secondary: var(--cd-color-taupe-grey); /* 6.83:1 AA */
    --cd-on-light-border:         var(--cd-color-taupe-grey);
    --cd-on-light-border-strong:  var(--cd-color-regal-navy); /* 9.23:1 */
    --cd-on-light-btn-bg:         var(--cd-color-regal-navy);
    --cd-on-light-btn-text:       var(--cd-color-parchment);  /* 9.23:1 AAA */
    --cd-on-light-focus:          var(--cd-color-regal-navy); /* 9.23:1 AAA */

    /* 1.4. Semántica Contextual: On Dark (Canvas oscuro / Regal Navy) */
    --cd-on-dark-bg:              var(--cd-color-regal-navy);
    --cd-on-dark-surface:         var(--cd-color-taupe-grey);
    --cd-on-dark-text-primary:    var(--cd-color-parchment);  /* 9.23:1 AAA */
    --cd-on-dark-text-secondary:  var(--cd-color-light-cyan); /* 7.63:1 AAA */
    --cd-on-dark-border:          var(--cd-color-taupe-grey);
    --cd-on-dark-border-strong:   var(--cd-color-blue-bell);  /* 3.09:1 */
    --cd-on-dark-btn-bg:          var(--cd-color-light-cyan);
    --cd-on-dark-btn-text:        var(--cd-color-regal-navy); /* 7.63:1 AAA */
    --cd-on-dark-focus:           var(--cd-color-light-cyan); /* 7.63:1 AAA */

    /* 1.5. Tipografía Canónica */
    --cd-font-primary:    'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --cd-font-editorial:  'Lora', Georgia, 'Times New Roman', serif;
    --cd-font-functional: 'Fira Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

    /* 1.6. Espaciado Modular */
    --cd-spacing-2xs: 4px;   /* 0.25rem */
    --cd-spacing-xs:  8px;   /* 0.50rem */
    --cd-spacing-sm:  12px;  /* 0.75rem */
    --cd-spacing-md:  16px;  /* 1.00rem */
    --cd-spacing-lg:  24px;  /* 1.50rem */
    --cd-spacing-xl:  32px;  /* 2.00rem */
    --cd-spacing-2xl: 48px;  /* 3.00rem */
    --cd-spacing-3xl: 64px;  /* 4.00rem */
    --cd-spacing-4xl: 96px;  /* 6.00rem */
    --cd-spacing-5xl: 128px; /* 8.00rem */

    /* 1.7. Radios de Borde */
    --cd-radius-none: 0px;
    --cd-radius-sm:   4px;
    --cd-radius-md:   8px;
    --cd-radius-lg:   16px;
    --cd-radius-pill: 9999px;

    /* 1.8. Anchos Máximos Canónicos */
    --cd-content-max-width: 1104px;
    --cd-content-max-width-narrow: 800px;
    --cd-content-max-width-wide: 1240px;
}

/* ==========================================================================
   2. ACCESIBILIDAD Y FOCO UNIVERSAL (WCAG 2.1 / 2.2)
   ========================================================================== */
/* Anillo de foco accesible para navegación por teclado */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
.et_pb_button:focus-visible {
    outline: 2px solid var(--cd-color-blue-bell);
    outline-offset: 2px;
}

/* Foco en contexto oscuro */
.cd-context-dark a:focus-visible,
.cd-context-dark button:focus-visible,
.cd-context-dark .et_pb_button:focus-visible {
    outline: 2px solid var(--cd-on-dark-focus);
    outline-offset: 2px;
}

/* Respeto a usuarios con preferencia de movimiento reducido */
@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;
    }
}

/* ==========================================================================
   3. CLASES UTILITARIAS COMPLEMENTARIAS
   ========================================================================== */
/* Contenedor institucional estándar */
.cd-container {
    width: 100%;
    max-width: var(--cd-content-max-width);
    margin-left: auto;
    margin-right: auto;
}

/* Contenedor de lectura editorial estrecho */
.cd-container-narrow {
    width: 100%;
    max-width: var(--cd-content-max-width-narrow);
    margin-left: auto;
    margin-right: auto;
}

/* Cita editorial (Quote) con tipografía Lora Italic */
.cd-quote-text {
    font-family: var(--cd-font-editorial);
    font-style: italic;
    font-weight: 400;
    line-height: 1.6;
}

/* Eyebrow institucional en Montserrat SemiBold */
.cd-eyebrow {
    font-family: var(--cd-font-primary);
    font-weight: 600;
    font-size: 13px;
    line-height: 16px;
    letter-spacing: 1px;
    text-transform: uppercase;
}

/* Metadatos en Fira Sans */
.cd-metadata {
    font-family: var(--cd-font-functional);
    font-weight: 500;
    font-size: 12px;
    line-height: 16px;
    letter-spacing: 0.25px;
}