.elementor-kit-8{--e-global-color-c493d70:#00315D;--e-global-color-b5db6ed:#FFDC00;--e-global-color-77d2db5:#E40B14;--e-global-color-efc78fa:#000000;--e-global-color-06a2bd5:#FFFFFF;--e-global-color-44be736:#E3E3E3;}.elementor-kit-8 e-page-transition{background-color:#FFBC7D;}.elementor-kit-8 button,.elementor-kit-8 input[type="button"],.elementor-kit-8 input[type="submit"],.elementor-kit-8 .elementor-button{border-style:none;border-radius:0px 0px 0px 0px;padding:0px 0px 0px 0px;}.elementor-kit-8 img{border-style:none;border-radius:0px 0px 0px 0px;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1440px;}.e-con{--container-max-width:1440px;--container-default-padding-top:0px;--container-default-padding-right:0px;--container-default-padding-bottom:0px;--container-default-padding-left:0px;}.elementor-widget:not(:last-child){--kit-widget-spacing:0;}.elementor-element{--widgets-spacing:0 0;--widgets-spacing-row:0;--widgets-spacing-column:0;}{}h1.entry-title{display:var(--page-title-display);}.site-header .site-branding{flex-direction:column;align-items:stretch;}.site-header{padding-inline-end:0px;padding-inline-start:0px;}.site-footer .site-branding{flex-direction:column;align-items:stretch;}@media(max-width:1200px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}/* Start custom CSS *//* ════════════════════════════════════════════════════════════════
   ████████████████████████████████████████████████████████████████
   FLUID DESIGN SYSTEM — BLUEPRINT (proyecto OGA 2026)
   ████████████████████████████████████████████████████████████████
   ════════════════════════════════════════════════════════════════
   Versión:   6.1 — Adaptación OGA 2026 actualizada.
   Cliente:   OGA — Asociación de exalumnos del Colegio Michael Ham.
   Destino:   WordPress + Elementor Pro
   Pegar en:  Site Settings → Custom CSS

   Personalización aplicada respecto al master:
   · SECCIÓN 01A → paleta OGA (navy, yellow, red, black, white, gray)
   · SECCIÓN 01B → roles asignados (action = amarillo)
   · SECCIÓN 04  → Mulish + Cormorant Garamond Italic 500
   · SECCIÓN 09  → fallback con las mismas familias

   ════════════════════════════════════════════════════════════════
   GUÍA RÁPIDA — CÓMO USAR ESTE ARCHIVO
   ════════════════════════════════════════════════════════════════

   Este archivo tiene DOS ZONAS marcadas con banderas:

   🟢 PERSONALIZABLE  → cambiás cada proyecto
   🔒 FIJA            → NO se toca, igual en todos los proyectos

   Para arrancar un proyecto nuevo solo tocás 2 secciones:

     1. SECCIÓN 01A → Cargá los hex de la paleta del cliente.
     2. SECCIÓN 04  → Cargá los nombres de las familias tipográficas.

   Después replicás los mismos colores y fuentes en:
     · Elementor → Site Settings → Global Colors
     · Elementor → Site Settings → Global Fonts

   Si necesitás CSS específico global de este proyecto, agregalo
   debajo del Blueprint en la zona PROJECT OVERRIDES — OGA.

   Si el ajuste aplica solo a una página o widget puntual, usá:
     · Elementor → Page Settings → Custom CSS  (CSS por página)
     · Widget → Advanced → Custom CSS          (CSS por widget)

   El Blueprint master se mantiene limpio. Los componentes globales
   propios de OGA viven separados en PROJECT OVERRIDES.

   ════════════════════════════════════════════════════════════════
   VIEWPORT BASE
   ════════════════════════════════════════════════════════════════
   Mobile:  360px   (mínimo de clamp)
   Desktop: 1920px  (máximo de clamp)
   Container max: 1440px

   ════════════════════════════════════════════════════════════════
   ESCALA TIPOGRÁFICA
   ════════════════════════════════════════════════════════════════
   Mobile:  ratio 1.250 (Major Third)
   Desktop: ratio 1.333 (Perfect Fourth)
   Base:    16px = 1rem

   ════════════════════════════════════════════════════════════════
   ÍNDICE
   ════════════════════════════════════════════════════════════════

   ── PARTE 1: SISTEMA DE DISEÑO FLUIDO ──────────────────────────
   SECCIÓN 01 → Variables globales
                 01A 🟢 Tokens primitivos de color (paleta)
                 01B 🟢 Tokens semánticos de color (roles)
                 01C 🔒 Tamaños tipográficos fluidos
                 01D 🔒 Interlineado
                 01E 🔒 Tracking
                 01F 🔒 Espaciado fluido
                 01G 🔒 Contenedor
   SECCIÓN 02 🔒 Neutralización de Elementor
   SECCIÓN 03 🔒 Capa 1: Tokens de tamaño tipográfico
   SECCIÓN 04 🟢 Capa 2: Modificadores de fuente
   SECCIÓN 05 🔒 Capa 3: Modificadores de estilo
   SECCIÓN 06 🔒 Utilidades de color (backgrounds y texto)
   SECCIÓN 07 🔒 Contenedor y layout (padding, margin, gap)
   SECCIÓN 08 🔒 Componentes de imagen (proporciones)
   SECCIÓN 09 🟢 Fallback semántico (red de seguridad)

   ── PARTE 2: COMPONENTES BASE (opcionales) ─────────────────────
   SECCIÓN 10 🔒 Hero section
   SECCIÓN 11 🔒 Header (sólido blanco, base flexible)
   SECCIÓN 12 🔒 Navegación desktop

   ── PARTE 3: REFERENCIA RÁPIDA ──────────────────────────────────
   SECCIÓN 13 → Cheat sheet de clases para Elementor

   ════════════════════════════════════════════════════════════════
   ARQUITECTURA DEL COLOR
   ════════════════════════════════════════════════════════════════

   El sistema separa el color en DOS CAPAS:

   CAPA 1 — TOKENS PRIMITIVOS  (SECCIÓN 01A)
     Nombres descriptivos del color (--color-primary, --color-accent…).
     Es lo ÚNICO que cambia entre proyectos.

   CAPA 2 — TOKENS SEMÁNTICOS  (SECCIÓN 01B)
     Nombres por rol (--color-text-primary, --color-action…).
     Apuntan a los primitivos. Definen cómo se USA la paleta.
     Solo se tocan si cambia el ROL de un color.

   El resto del CSS (header, hover, etc.) usa SOLO semánticos.
   Eso garantiza que cambiar de paleta NO rompa nada.

   ════════════════════════════════════════════════════════════════
   ARQUITECTURA DE TRES CAPAS PARA TIPOGRAFÍA
   ════════════════════════════════════════════════════════════════

   Todo el estilo visual vive en este archivo.
   Elementor solo define estructura semántica (H1, H2, párrafos).
   Las clases se aplican en "CSS Classes" de cada widget.

   Capa 1 → Token de tamaño     → text-xxl, text-m, text-body…
   Capa 2 → Modificador fuente  → font-display, font-body-semi…
   Capa 3 → Modificador estilo  → text-upper, text-accent…

   EJEMPLO:
   Headline hero          → text-xxxl font-display
   Label uppercase acento → text-xs font-body-semi text-upper text-accent
   Párrafo estándar       → text-body font-body

   NOTA SOBRE !important:
   ──────────────────────────────────────────────────────────────
   El sistema usa !important sistemáticamente en las capas 1/2/3.
   No es accidente: Elementor aplica estilos con alta especificidad
   y sin !important las clases no ganan. Si necesitás un override
   contextual, usá un .elementor-kit-8 más específico o !important también.

   ════════════════════════════════════════════════════════════════ */




/* ════════════════════════════════════════════════════════════════
   ████  PARTE 1: SISTEMA DE DISEÑO FLUIDO  ████
   ════════════════════════════════════════════════════════════════ */




/* ════════════════════════════════════════════════════════════════
   SECCIÓN 01 — VARIABLES GLOBALES (Custom Properties)
   ════════════════════════════════════════════════════════════════
   Fuente de verdad del sistema. Cambiás un valor acá y se
   propaga a todo el sitio. Nunca uses valores hex o px directos
   en el resto del CSS — siempre referenciá estas variables.
   ════════════════════════════════════════════════════════════════ */

/* ════════════════════════════════════════════════════════════════
   🔒 SECCIÓN 00 — RENDER BASE
   FIJA — no tocar entre proyectos
   ════════════════════════════════════════════════════════════════
   Suavizado de fuentes para Safari y Chrome en macOS/iOS.
   Evita el renderizado irregular de pesos bajos (300, 400)
   en webkit. Va antes de todo para garantizar herencia global.
   ════════════════════════════════════════════════════════════════ */

*, *::before, *::after {
  box-sizing: border-box;
}

body {
  -webkit-font-smoothing:  antialiased;
  -moz-osx-font-smoothing: grayscale;
}


:root {

  /* ┌──────────────────────────────────────────────────────────┐
     │  🟢 01A — TOKENS PRIMITIVOS DE COLOR                     │
     │  PERSONALIZABLE — cambiar por proyecto                   │
     └──────────────────────────────────────────────────────────┘
     Paleta de OGA — Old Grads Association (Colegio Michael Ham).
     Identidad institucional con azul + amarillo + rojo.
     ────────────────────────────────────────────────────────── */

  --color-navy:        #00315D;   /* Azul institucional, color principal de marca   */
  --color-yellow:      #FFDC00;   /* Amarillo, color de acción (CTAs principales)   */
  --color-red:         #E40B14;   /* Rojo, acento decorativo y elementos puntuales  */
  --color-black:       #000000;   /* Negro, texto secundario y elementos fuertes    */
  --color-white:       #FFFFFF;   /* Blanco, fondo principal y texto sobre oscuro   */
  --color-gray-light:  #E3E3E3;   /* Gris claro, fondos alternados y divisores      */


  /* ┌──────────────────────────────────────────────────────────┐
     │  🟢 01B — TOKENS SEMÁNTICOS DE COLOR                     │
     │  PERSONALIZABLE — solo si cambian los ROLES              │
     └──────────────────────────────────────────────────────────┘
     Asignan ROL a cada token primitivo. Es lo que el resto del
     CSS referencia. Si cambiás de paleta, casi nunca tocás esta
     sección — solo si el ROL de un color cambia.

     ROLES ESTÁNDAR:
     text-primary    → headings, texto principal
     text-secondary  → texto de soporte, captions
     text-light      → texto sobre fondos oscuros
     accent          → highlights decorativos, eyebrows, líneas
     action          → CTAs, links, llamadas a la acción
     bg-base         → fondo principal del sitio
     bg-alt          → fondo de secciones alternadas
     divider         → bordes, separadores, líneas
     ────────────────────────────────────────────────────────── */

  --color-text-primary:    var(--color-navy);
  --color-text-secondary:  var(--color-black);
  --color-text-light:      var(--color-white);
  --color-accent:          var(--color-red);
  --color-action:          var(--color-yellow);
  --color-bg-base:         var(--color-white);
  --color-bg-alternate:    var(--color-gray-light);
  --color-divider:         var(--color-gray-light);


  /* ┌──────────────────────────────────────────────────────────┐
     │  🔒 01C — TAMAÑOS TIPOGRÁFICOS FLUIDOS                   │
     │  FIJA — no tocar entre proyectos                         │
     └──────────────────────────────────────────────────────────┘
     Todos usan clamp(MÍNIMO, FLUIDO, MÁXIMO):
       MÍNIMO  = tamaño en mobile  (360px viewport)
       FLUIDO  = valor que crece con el viewport (vw)
       MÁXIMO  = tamaño en desktop (1920px viewport)

     Crecimiento suave entre mobile y desktop, sin breakpoints.
     ────────────────────────────────────────────────────────── */

  /* ESCALA DISPLAY — headlines grandes */

  --text-xxxl: clamp(3.8147rem, 3.4003rem + 1.8416vw, 5.6102rem);
  /* Hero / portada — el título más grande del sitio          */
  /* → mobile: ~61px  |  desktop: ~90px                       */

  --text-xxl:  clamp(3.0518rem, 2.7848rem + 1.1866vw, 4.2087rem);
  /* H1 principal — título de sección protagonista            */
  /* → mobile: ~49px  |  desktop: ~67px                       */

  --text-xl:   clamp(2.4414rem, 2.2762rem + 0.7343vw, 3.1573rem);
  /* H2 — título de sección secundaria                        */
  /* → mobile: ~39px  |  desktop: ~50px                       */

  --text-l:    clamp(1.9531rem, 1.8572rem + 0.4261vw, 2.3686rem);
  /* H3 — subtítulo editorial grande                          */
  /* → mobile: ~31px  |  desktop: ~38px                       */

  --text-m:    clamp(1.5625rem, 1.5130rem + 0.2199vw, 1.7769rem);
  /* H4 — subtítulo editorial mediano                         */
  /* → mobile: ~25px  |  desktop: ~28px                       */

  --text-s:    clamp(1.2500rem, 1.2308rem + 0.0851vw, 1.3330rem);
  /* H5 — label de categoría, sublabel                        */
  /* → mobile: ~20px  |  desktop: ~21px                       */

  --text-xs:   clamp(1.0000rem, 0.9712rem + 0.1282vw, 1.1250rem);
  /* H6 — eyebrow, tag, navbar                                */
  /* → mobile: ~16px  |  desktop: ~18px                       */

  /* ESCALA CUERPO — texto de lectura */

  --text-body-l: clamp(1.0625rem, 1.0192rem + 0.1923vw, 1.2500rem);
  /* Párrafo grande — intro, lead, pull quote                 */
  /* → mobile: ~17px  |  desktop: ~20px                       */

  --text-body:   clamp(1.0000rem, 1.0000rem + 0.0000vw, 1.0000rem);
  /* Párrafo base — texto corrido estándar                    */
  /* → fijo: 16px en todos los viewports                      */

  --text-body-s: clamp(0.8125rem, 0.7981rem + 0.0641vw, 0.8750rem);
  /* Párrafo pequeño — captions, notas, footer                */
  /* → mobile: ~13px  |  desktop: ~14px                       */


  /* ┌──────────────────────────────────────────────────────────┐
     │  🔒 01D — INTERLINEADO (Line Height)                     │
     │  FIJA — no tocar entre proyectos                         │
     └──────────────────────────────────────────────────────────┘
     Headings grandes → interlineado ajustado (comprimido).
     Cuerpo de texto  → interlineado amplio (legibilidad).
     ────────────────────────────────────────────────────────── */

  --lh-xxxl:   1.05;
  --lh-xxl:    1.10;
  --lh-xl:     1.15;
  --lh-l:      1.20;
  --lh-m:      1.25;
  --lh-s:      1.45;
  --lh-xs:     1.65;
  --lh-body-l: 1.58;
  --lh-body:   1.75;
  --lh-body-s: 1.80;


  /* ┌──────────────────────────────────────────────────────────┐
     │  🔒 01E — TRACKING (Letter Spacing)                      │
     │  FIJA — no tocar entre proyectos                         │
     └──────────────────────────────────────────────────────────┘
     Títulos grandes   → tracking negativo (letras más juntas).
     Cuerpo            → 0 (neutro).
     Labels uppercase  → ver .text-upper (tracking positivo).
     ────────────────────────────────────────────────────────── */

  --ls-xxxl:   -0.03em;
  --ls-xxl:    -0.025em;
  --ls-xl:     -0.02em;
  --ls-l:      -0.015em;
  --ls-m:      -0.01em;
  --ls-s:       0em;
  --ls-xs:      0em;
  --ls-body-l:  0em;
  --ls-body:    0em;
  --ls-body-s:  0.01em;


  /* ┌──────────────────────────────────────────────────────────┐
     │  🔒 01F — ESPACIADO FLUIDO                               │
     │  FIJA — no tocar entre proyectos                         │
     └──────────────────────────────────────────────────────────┘
     Escala que crece suavemente entre mobile y desktop.

     Uso recomendado:
       space-xs → gaps pequeños entre elementos relacionados
       space-s  → padding interno de componentes
       space-m  → separación entre bloques de contenido
       space-l  → separación entre secciones medianas
       space-xl → separación entre secciones grandes
     ────────────────────────────────────────────────────────── */

  --space-xs: clamp(0.5000rem,  0.3846rem + 0.5128vw,  1.0000rem);
  /* → mobile: ~8px   |  desktop: ~16px */

  --space-s:  clamp(1.0000rem,  0.7692rem + 1.0256vw,  2.0000rem);
  /* → mobile: ~16px  |  desktop: ~32px */

  --space-m:  clamp(2.0000rem,  1.5385rem + 2.0513vw,  4.0000rem);
  /* → mobile: ~32px  |  desktop: ~64px */

  --space-l:  clamp(1.5000rem,  0.5769rem + 4.1026vw,  7.5000rem);
  /* → mobile: ~24px  |  desktop: ~120px */

  --space-xl: clamp(6.0000rem,  4.5000rem + 6.6667vw, 12.5000rem);
  /* → mobile: ~96px  |  desktop: ~200px */


  /* ┌──────────────────────────────────────────────────────────┐
     │  🔒 01G — CONTENEDOR                                     │
     │  FIJA — no tocar entre proyectos                         │
     └──────────────────────────────────────────────────────────┘
     Ancho máximo del contenido y padding lateral fluido.
     ────────────────────────────────────────────────────────── */

  --container-max:     1440px;
  --container-padding: clamp(1.0000rem, 0.3846rem + 2.7350vw, 7.5000rem);
  /* → mobile: ~16px  |  desktop: ~120px */

}




/* ════════════════════════════════════════════════════════════════
   🔒 SECCIÓN 02 — NEUTRALIZACIÓN DE ELEMENTOR
   FIJA — no tocar entre proyectos
   ════════════════════════════════════════════════════════════════
   Elementor Pro asigna tamaños propios a los widgets Heading.
   Este bloque los neutraliza para que nuestras capas ganen.

   ⚠ NO MODIFICAR — infraestructura crítica del sistema.
      Sin esto, los tokens de Capa 1 no funcionan.
   ════════════════════════════════════════════════════════════════ */

.elementor-widget-heading .elementor-heading-title.elementor-size-default {
  font-size: unset;
}

/* Herencia completa para Heading widgets con clases del sistema.
   Permite que text-* + font-* + text-primary + text-upper aplicados
   al widget lleguen correctamente al .elementor-heading-title. */

.elementor-widget.text-xxxl .elementor-heading-title,
.elementor-widget.text-xxl  .elementor-heading-title,
.elementor-widget.text-xl   .elementor-heading-title,
.elementor-widget.text-l    .elementor-heading-title,
.elementor-widget.text-m    .elementor-heading-title,
.elementor-widget.text-s    .elementor-heading-title,
.elementor-widget.text-xs   .elementor-heading-title,
.elementor-widget.text-body-l .elementor-heading-title,
.elementor-widget.text-body   .elementor-heading-title,
.elementor-widget.text-body-s .elementor-heading-title {
  font-size:      inherit !important;
  line-height:    inherit !important;
  letter-spacing: inherit !important;
  font-family:    inherit !important;
  font-weight:    inherit !important;
  font-style:     inherit !important;
  text-align:     inherit !important;
  text-transform: inherit !important;
}

/* Si el Heading tiene link, el <a> también hereda color y estilo. */
.elementor-widget-heading .elementor-heading-title a {
  color:           inherit !important;
  font:            inherit !important;
  letter-spacing:  inherit !important;
  text-transform:  inherit !important;
  text-decoration: none !important;
}




/* ════════════════════════════════════════════════════════════════
   🔒 SECCIÓN 03 — CAPA 1: TOKENS DE TAMAÑO TIPOGRÁFICO
   FIJA — no tocar entre proyectos
   ════════════════════════════════════════════════════════════════
   Definen SOLO tamaño, interlineado y tracking.
   NO definen fuente ni peso — eso es Capa 2.

   USO EN ELEMENTOR: Advanced → CSS Classes → nombre de la clase
   ════════════════════════════════════════════════════════════════ */

/* ── ESCALA DISPLAY ── */

.text-xxxl,
.elementor-widget.text-xxxl {
  font-size:      var(--text-xxxl)  !important;
  line-height:    var(--lh-xxxl)    !important;
  letter-spacing: var(--ls-xxxl)    !important;
}

.text-xxl,
.elementor-widget.text-xxl {
  font-size:      var(--text-xxl)   !important;
  line-height:    var(--lh-xxl)     !important;
  letter-spacing: var(--ls-xxl)     !important;
}

.text-xl,
.elementor-widget.text-xl {
  font-size:      var(--text-xl)    !important;
  line-height:    var(--lh-xl)      !important;
  letter-spacing: var(--ls-xl)      !important;
}

.text-l,
.elementor-widget.text-l {
  font-size:      var(--text-l)     !important;
  line-height:    var(--lh-l)       !important;
  letter-spacing: var(--ls-l)       !important;
}

.text-m,
.elementor-widget.text-m {
  font-size:      var(--text-m)     !important;
  line-height:    var(--lh-m)       !important;
  letter-spacing: var(--ls-m)       !important;
}

.text-s,
.elementor-widget.text-s {
  font-size:      var(--text-s)     !important;
  line-height:    var(--lh-s)       !important;
  letter-spacing: var(--ls-s)       !important;
}

.text-xs,
.elementor-widget.text-xs {
  font-size:      var(--text-xs)    !important;
  line-height:    var(--lh-xs)      !important;
  letter-spacing: var(--ls-xs)      !important;
}

/* ── ESCALA CUERPO ── */

.text-body-l,
.elementor-widget.text-body-l {
  font-size:      var(--text-body-l)  !important;
  line-height:    var(--lh-body-l)    !important;
  letter-spacing: var(--ls-body-l)    !important;
}

.text-body,
.elementor-widget.text-body {
  font-size:      var(--text-body)    !important;
  line-height:    var(--lh-body)      !important;
  letter-spacing: var(--ls-body)      !important;
}

.text-body-s,
.elementor-widget.text-body-s {
  font-size:      var(--text-body-s)  !important;
  line-height:    var(--lh-body-s)    !important;
  letter-spacing: var(--ls-body-s)    !important;
}




/* ════════════════════════════════════════════════════════════════
   🟢 SECCIÓN 04 — CAPA 2: MODIFICADORES DE FUENTE
   PERSONALIZABLE — cambiar familias por proyecto
   ════════════════════════════════════════════════════════════════
   Sobreescriben SOLO familia tipográfica y peso.
   No tocan tamaño, interlineado ni tracking.

   ⚠ REEMPLAZAR los nombres de familias según branding.
      Las fuentes deben coincidir con las cargadas en
      Elementor → Custom Fonts (self-hosted en WOFF2).

   .font-display    → la voz editorial / emocional del proyecto
                       (la fuente de los momentos protagonistas:
                        slogans, citas destacadas, hero headlines)
   .font-body       → la voz funcional del proyecto
                       (UI, párrafos, navegación, y también headings
                        cuando el sistema construye jerarquía con
                        tamaño y peso en lugar de cambio de familia)

   En proyectos "monovoz" (una sola familia para todo) ambas
   apuntan a la misma familia con pesos distintos.
   En proyectos "duovoz" (familia display + familia body) cada
   una apunta a su familia.

   AUDITORÍA DE PESOS:
   ──────────────────────────────────────────────────────────────
   Antes de lanzar un proyecto, auditá con Chrome DevTools →
   Coverage qué pesos se usan above-the-fold y remové del
   Custom Fonts los que no.
   Regla práctica: 3 pesos por familia alcanzan para el 90%
   de los diseños. Cada peso extra cuesta ~25-40 KB.
   ════════════════════════════════════════════════════════════════ */

/* ── FAMILIA DISPLAY — voz editorial del proyecto ── */
/* En OGA se usa SOLO en frases protagonistas (slogan hero +
   cita banner navy). Los headings usan .font-body-* porque la
   jerarquía editorial se construye con tamaño y peso, no con
   cambio de familia. Único peso cargado: Cormorant 500 italic. */

.font-display {
  font-family: 'Cormorant Garamond', serif !important;
  font-weight: 500 !important;
  font-style:  italic !important;
}

.font-display-italic {
  font-family: 'Cormorant Garamond', serif !important;
  font-weight: 500 !important;
  font-style:  italic !important;
}

.font-display-bold {
  font-family: 'Cormorant Garamond', serif !important;
  font-weight: 500 !important;
  font-style:  italic !important;
}

/* ── FAMILIA BODY — UI, cuerpo, navegación, headings ── */
/* Todo OGA usa Mulish: párrafos, UI, navegación Y los headings
   (H1/H2/H3 con .font-body-light a tamaño grande). Pesos
   cargados en Custom Fonts: 300, 400, 500, 600. */

.font-body-light {
  font-family: 'Mulish', sans-serif !important;
  font-weight: 300 !important;
}

.font-body {
  font-family: 'Mulish', sans-serif !important;
  font-weight: 400 !important;
}

.font-body-mid {
  font-family: 'Mulish', sans-serif !important;
  font-weight: 500 !important;
}

.font-body-semi {
  font-family: 'Mulish', sans-serif !important;
  font-weight: 600 !important;
}



/* ════════════════════════════════════════════════════════════════
   🔒 SECCIÓN 05 — CAPA 3: MODIFICADORES DE ESTILO
   FIJA — no tocar entre proyectos
   ════════════════════════════════════════════════════════════════
   Modifican SOLO transformación, color o alineación de texto.
   No tocan tamaño, fuente ni peso.

   USO: combinar con Capa 1 + Capa 2.
   Ej: text-xs font-body-bold text-upper text-accent
   ════════════════════════════════════════════════════════════════ */

/* Transformación uppercase con tracking compensatorio */
.text-upper {
  text-transform: uppercase !important;
  letter-spacing: 0.12em !important;
}

/* Alineaciones de texto */
.text-left   { text-align: left   !important; }
.text-center { text-align: center !important; }
.text-right  { text-align: right  !important; }



/* ════════════════════════════════════════════════════════════════
   🔒 SECCIÓN 07 — CONTENEDOR Y LAYOUT
   FIJA — no tocar entre proyectos
   ════════════════════════════════════════════════════════════════
   Clases utilitarias para estructurar el layout de secciones.
   Se aplican sobre containers de Elementor, no sobre widgets.
   Todas las clases pad-* y mar-* referencian --space-* (01F).
   ════════════════════════════════════════════════════════════════ */

/* Contenedor centrado con ancho máximo */
.container {
  max-width:    var(--container-max);
  margin-left:  auto;
  margin-right: auto;
  width:        100%;
}

/* Padding lateral equivalente al padding del container */
.container-padding {
  padding-left:  var(--container-padding) !important;
  padding-right: var(--container-padding) !important;
}

/* ── PADDING LATERAL (ambos lados) ── */
.pad-inline-xs { padding-left: var(--space-xs) !important; padding-right: var(--space-xs) !important; }
.pad-inline-s  { padding-left: var(--space-s)  !important; padding-right: var(--space-s)  !important; }
.pad-inline-m  { padding-left: var(--space-m)  !important; padding-right: var(--space-m)  !important; }
.pad-inline-l  { padding-left: var(--space-l)  !important; padding-right: var(--space-l)  !important; }
.pad-inline-xl { padding-left: var(--space-xl) !important; padding-right: var(--space-xl) !important; }

/* ── PADDING SUPERIOR ── */
.pad-top-xs  { padding-top: var(--space-xs)  !important; }
.pad-top-s   { padding-top: var(--space-s)   !important; }
.pad-top-m   { padding-top: var(--space-m)   !important; }
.pad-top-l   { padding-top: var(--space-l)   !important; }
.pad-top-xl  { padding-top: var(--space-xl)  !important; }

/* ── PADDING INFERIOR ── */
.pad-bottom-xs  { padding-bottom: var(--space-xs)  !important; }
.pad-bottom-s   { padding-bottom: var(--space-s)   !important; }
.pad-bottom-m   { padding-bottom: var(--space-m)   !important; }
.pad-bottom-l   { padding-bottom: var(--space-l)   !important; }
.pad-bottom-xl  { padding-bottom: var(--space-xl)  !important; }

/* ── MARGIN SUPERIOR ── */
.mar-top-xs  { margin-top: var(--space-xs)  !important; }
.mar-top-s   { margin-top: var(--space-s)   !important; }
.mar-top-m   { margin-top: var(--space-m)   !important; }
.mar-top-l   { margin-top: var(--space-l)   !important; }
.mar-top-xl  { margin-top: var(--space-xl)  !important; }

/* ── MARGIN INFERIOR ── */
.mar-bottom-xs  { margin-bottom: var(--space-xs)  !important; }
.mar-bottom-s   { margin-bottom: var(--space-s)   !important; }
.mar-bottom-m   { margin-bottom: var(--space-m)   !important; }
.mar-bottom-l   { margin-bottom: var(--space-l)   !important; }
.mar-bottom-xl  { margin-bottom: var(--space-xl)  !important; }

/* ── GAP entre elementos hijos ── */
.gap-xs  { gap: var(--space-xs)  !important; }
.gap-s   { gap: var(--space-s)   !important; }
.gap-m   { gap: var(--space-m)   !important; }
.gap-l   { gap: var(--space-l)   !important; }
.gap-xl  { gap: var(--space-xl)  !important; }




/* ════════════════════════════════════════════════════════════════
   🔒 SECCIÓN 08 — COMPONENTES DE IMAGEN (Proporciones)
   FIJA — no tocar entre proyectos
   ════════════════════════════════════════════════════════════════
   Clases para forzar proporciones fijas o full-bleed en imágenes.
   Se aplican sobre el widget Image de Elementor.
   ════════════════════════════════════════════════════════════════ */

/* Imagen portrait 3:4 — retrato vertical */
.foto-proporcion img {
  width:           100%;
  aspect-ratio:    3 / 4;
  object-fit:      cover;
  object-position: center center;
  display:         block;
}

/* Imagen landscape 16:9 — panorámica horizontal */
.foto-landscape img {
  width:           100%;
  aspect-ratio:    16 / 9;
  object-fit:      cover;
  object-position: center center;
  display:         block;
}

/* Imagen cuadrada 1:1 */
.foto-cuadrada img {
  width:           100%;
  aspect-ratio:    1 / 1;
  object-fit:      cover;
  object-position: center center;
  display:         block;
}

/* Imagen full-bleed — llena 100% del container padre */
.img-full-bleed img {
  width:           100%;
  height:          100%;
  object-fit:      cover;
  object-position: center center;
  display:         block;
}




/* ════════════════════════════════════════════════════════════════
   🟢 SECCIÓN 09 — FALLBACK SEMÁNTICO (Red de seguridad)
   PERSONALIZABLE — actualizar familias si cambian en SECCIÓN 04
   ════════════════════════════════════════════════════════════════
   Si un widget Heading no tiene clases de Capa 1+2 asignadas,
   este bloque aplica un estilo razonable según el tag HTML.

   Las clases de Capa 1 y 2 siempre tienen mayor especificidad
   y sobrescriben estos estilos.

   ⚠ Si reemplazás las familias en SECCIÓN 04, actualizá también
      acá los font-family para mantener consistencia visual.
   ════════════════════════════════════════════════════════════════ */

.elementor-widget-heading h1 {
  font-size: var(--text-xxl); line-height: var(--lh-xxl);
  letter-spacing: var(--ls-xxl);
  font-family: 'Mulish', sans-serif; font-weight: 300;
}
.elementor-widget-heading h2 {
  font-size: var(--text-xl); line-height: var(--lh-xl);
  letter-spacing: var(--ls-xl);
  font-family: 'Mulish', sans-serif; font-weight: 300;
}
.elementor-widget-heading h3 {
  font-size: var(--text-l); line-height: var(--lh-l);
  letter-spacing: var(--ls-l);
  font-family: 'Mulish', sans-serif; font-weight: 300;
}
.elementor-widget-heading h4 {
  font-size: var(--text-m); line-height: var(--lh-m);
  letter-spacing: var(--ls-m);
  font-family: 'Mulish', sans-serif; font-weight: 500;
}
.elementor-widget-heading h5 {
  font-size: var(--text-s); line-height: var(--lh-s);
  letter-spacing: var(--ls-s);
  font-family: 'Mulish', sans-serif; font-weight: 600;
}
.elementor-widget-heading h6 {
  font-size: var(--text-xs); line-height: var(--lh-xs);
  letter-spacing: var(--ls-xs);
  font-family: 'Mulish', sans-serif; font-weight: 500;
}




/* ════════════════════════════════════════════════════════════════
   ████  PARTE 2: COMPONENTES BASE (opcionales)  ████
   ════════════════════════════════════════════════════════════════
   Componentes que se repiten en la mayoría de proyectos.
   Si un proyecto no usa alguno, podés borrarlo del CSS — menos
   peso en producción.
   ════════════════════════════════════════════════════════════════ */




/* ════════════════════════════════════════════════════════════════
   🔒 SECCIÓN 10 — HERO SECTION
   ════════════════════════════════════════════════════════════════
   Contenedor full-screen, contenido alineado al fondo.

   ESTRUCTURA EN ELEMENTOR:
   Section/Container → clase: hero-section
   ════════════════════════════════════════════════════════════════ */

.hero-section {
  width:           100%;
  min-height:      100vh;
  position:        relative;
  display:         flex;
  align-items:     flex-end;
  justify-content: center;
}




/* ════════════════════════════════════════════════════════════════
   🔒 SECCIÓN 11 — HEADER (sólido, base flexible)
   ════════════════════════════════════════════════════════════════
   Header fijo con fondo sólido por defecto. Es la base más
   versátil: funciona para sitios corporativos, ONGs, profesionales.

   Si un proyecto necesita header transparente sobre hero con
   glassmorphism al hacer scroll, ese efecto se agrega como
   override en Page Settings → Custom CSS o Widget Custom CSS,
   no se mete acá.

   ESTRUCTURA EN ELEMENTOR:
   Container principal  → header-wrap
       └── Container    → header-inner
               ├── Container A → Logo
               ├── Container B → Nav
               └── Container C → CTA
   ════════════════════════════════════════════════════════════════ */

/* ── Capa exterior — fija, fondo sólido base ── */
.header-wrap {
  position:         fixed;
  top:              0;
  left:             0;
  width:            100%;
  z-index:          1000;
  background-color: var(--color-bg-base);
  box-shadow:       0 1px 20px rgba(0, 0, 0, 0.06);
  transition:       background-color 0.3s ease, box-shadow 0.3s ease;
}

/* ── Capa interior — centra y limita el contenido en 4K/5K ── */
.header-inner {
  max-width:       2500px;
  margin-left:     auto;
  margin-right:    auto;
  padding-top:     1.2rem;
  padding-bottom:  1.2rem;
  padding-left:    var(--container-padding);
  padding-right:   var(--container-padding);
  display:         flex;
  align-items:     center;
  justify-content: space-between;
}




/* ════════════════════════════════════════════════════════════════
   🔒 SECCIÓN 12 — NAVEGACIÓN DESKTOP
   ════════════════════════════════════════════════════════════════
   OGA no usa la clase .menu-nav-item del Blueprint original porque
   ese patrón traía subrayado animado de otro proyecto.

   Para los items del menú OGA usar utilitarias existentes:
   text-body-s font-body-mid text-primary text-upper

   No hay CSS activo en esta sección para evitar efectos heredados.
   ════════════════════════════════════════════════════════════════ */



/* ════════════════════════════════════════════════════════════════
   ████  PROJECT OVERRIDES — OGA  ████
   ════════════════════════════════════════════════════════════════
   CSS específico global de este proyecto.
   No pertenece al Blueprint master.
   ════════════════════════════════════════════════════════════════ */


/* ════════════════════════════════════════════════════════════════
   OGA-01 — VARIANTES DE BOTONES
   ════════════════════════════════════════════════════════════════
   El diseño de OGA tiene 4 variantes de botones en uso + 1 reserva.
   En OGA todos los botones usan colores plenos sin border.

   Aplicación: widget Button → Advanced → CSS Classes.
   Texto siempre en uppercase, forzado por CSS.

   USO POR VARIANTE:
   .btn-yellow         → CTA principal: "Quiero Donar", "Actualizar Datos"
   .btn-blue           → CTA secundario sobre fondo claro
   .btn-red            → CTA destacado sobre fondo navy: "Quiero Sumarme"
   .btn-white          → CTA sutil sobre fondo navy: "Contacto"
   .btn-white-outline  → RESERVA. No se usa en OGA, queda como ejemplo
                          para futuros proyectos.

   Hover OGA:
   Los 4 botones sólidos conservan sus colores Figma y usan opacity
   0.85 en hover como microinteracción sutil.
   ════════════════════════════════════════════════════════════════ */

.btn-yellow.elementor-widget-button .elementor-button,
.btn-blue.elementor-widget-button .elementor-button,
.btn-red.elementor-widget-button .elementor-button,
.btn-white.elementor-widget-button .elementor-button,
.btn-white-outline.elementor-widget-button .elementor-button {
  box-sizing:     border-box;
  border:         none;
  border-radius:  0;
  padding:        0.875rem 2rem;
  transition:     opacity 0.25s ease, background-color 0.25s ease, color 0.25s ease;
  font-family:    'Mulish', sans-serif;
  font-weight:    600;
  font-size:      var(--text-body-s);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor:         pointer;
  line-height:    1.4;
}

.btn-yellow.elementor-widget-button .elementor-button-text,
.btn-blue.elementor-widget-button .elementor-button-text,
.btn-red.elementor-widget-button .elementor-button-text,
.btn-white.elementor-widget-button .elementor-button-text,
.btn-white-outline.elementor-widget-button .elementor-button-text {
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.btn-yellow.elementor-widget-button .elementor-button {
  background-color: var(--color-yellow);
  color:            var(--color-navy);
}

.btn-blue.elementor-widget-button .elementor-button {
  background-color: var(--color-navy);
  color:            var(--color-white);
}

.btn-red.elementor-widget-button .elementor-button {
  background-color: var(--color-red);
  color:            var(--color-white);
}

.btn-white.elementor-widget-button .elementor-button {
  background-color: var(--color-white);
  color:            var(--color-navy);
}

.btn-yellow.elementor-widget-button .elementor-button:hover,
.btn-blue.elementor-widget-button .elementor-button:hover,
.btn-red.elementor-widget-button .elementor-button:hover,
.btn-white.elementor-widget-button .elementor-button:hover {
  opacity: 0.85;
}

/* Reserva: outline sin border real. box-shadow inset no altera altura/ancho. */
.btn-white-outline.elementor-widget-button .elementor-button {
  background-color: transparent;
  color:            var(--color-white);
  box-shadow:       inset 0 0 0 2px var(--color-white);
}

.btn-white-outline.elementor-widget-button .elementor-button:hover {
  background-color: var(--color-white);
  color:            var(--color-navy);
  box-shadow:       inset 0 0 0 2px var(--color-white);
}

@media (prefers-reduced-motion: reduce) {
  .btn-yellow.elementor-widget-button .elementor-button,
  .btn-blue.elementor-widget-button .elementor-button,
  .btn-red.elementor-widget-button .elementor-button,
  .btn-white.elementor-widget-button .elementor-button,
  .btn-white-outline.elementor-widget-button .elementor-button {
    transition: none;
  }
}


/* Modificador de ancho — hace que el botón ocupe el 100% del contenedor padre.
   Útil para igualar el ancho de dos o más botones en columna.
   Aplicar junto con la variante de color: btn-yellow btn-full */
.btn-full.elementor-widget-button {
  width: 100% !important;
}

.btn-full.elementor-widget-button .elementor-button {
  width: 100% !important;
  text-align: center !important;
}



/* ════════════════════════════════════════════════════════════════
   OGA-02 — CTA FLOTANTE "QUIERO DONAR"
   ════════════════════════════════════════════════════════════════
   Botón circular fixed que aparece después del hero y desaparece
   antes del footer. HTML/SVG inyectado vía Code Snippets.
   Visibilidad controlada por IntersectionObserver.

   Requiere:
   - Link con clase .oga-floating-cta
   - Hero real con clase .hero-section
   - Footer real con clase .site-footer
   ════════════════════════════════════════════════════════════════ */

.oga-floating-cta {
  position:        fixed;
  top:             50%;
  right:           clamp(1rem, 2vw, 2rem);
  transform:       translateY(-50%);
  width:           clamp(70px, 5vw, 110px);
  height:          auto;
  aspect-ratio:    1 / 1;
  z-index:         900;
  display:         block;
  line-height:     0;
  opacity:         0;
  pointer-events:  none;
  transition:      opacity 0.4s ease, transform 0.3s ease;
  filter:          drop-shadow(0 4px 12px rgba(0, 49, 93, 0.18));
  text-decoration: none;
}

.oga-floating-cta svg {
  width:   100%;
  height:  auto;
  display: block;
}

.oga-floating-cta.is-visible {
  opacity:        1;
  pointer-events: auto;
}

.oga-floating-cta.is-visible:hover {
  transform: translateY(-50%) scale(1.05);
  filter:    drop-shadow(0 6px 16px rgba(0, 49, 93, 0.25));
}

@media (prefers-reduced-motion: reduce) {
  .oga-floating-cta {
    transition: opacity 0.2s ease;
  }

  .oga-floating-cta.is-visible:hover {
    transform: translateY(-50%);
  }
}


/* ════════════════════════════════════════════════════════════════
   OGA-03 — HEADER GLASSMORPHISM ON SCROLL
   ════════════════════════════════════════════════════════════════
   Estado base: header blanco sólido definido en SECCIÓN 11.
   Estado scrolleado: glassmorphism sutil.
   La clase .is-scrolled se agrega/quita por JS.
   ════════════════════════════════════════════════════════════════ */

.header-wrap.is-scrolled {
  background-color:        rgba(255, 255, 255, 0.72) !important;
  backdrop-filter:         blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  box-shadow:              0 4px 24px rgba(0, 49, 93, 0.08);
}


/* ════════════════════════════════════════════════════════════════
   OGA-04 — HEADER INNER OVERRIDE
   ════════════════════════════════════════════════════════════════
   Ajuste específico para la estructura real del header OGA.

   Estructura actual:
   header-inner contiene directamente logo + items del menú +
   social icons + hamburguesa.

   Objetivo:
   - Limitar header-inner al ancho máximo del sistema: 1440px.
   - Evitar el space-between flexible del Blueprint base.
   - Usar gap fijo estable.
   - Permitir que el logo con Grow desde Elementor empuje el resto
     hacia la derecha.
   ════════════════════════════════════════════════════════════════ */

.header-wrap .header-inner {
  width:           100% !important;
  box-sizing:      border-box !important;
  margin-left:     auto !important;
  margin-right:    auto !important;
  display:         flex !important;
  align-items:     center !important;
  justify-content: flex-start !important;
  gap:             28px !important;
}




/* ════════════════════════════════════════════════════════════════
   OGA-05 — HERO CAROUSEL
   ════════════════════════════════════════════════════════════════
   Carrusel hero custom para Home OGA.
   Replica el diseño Figma:
   - imagen full width / full height
   - sin texto encima
   - controles abajo a la izquierda
   - flechas SVG blancas
   - dots circulares blancos
   - transición fade entre slides
   ════════════════════════════════════════════════════════════════ */

/* Container Elementor del hero */
.oga-hero-carousel-section {
  width: 100% !important;
  min-height: calc(100vh - 70px) !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;

  display: flex !important;
  align-items: stretch !important;
  justify-content: center !important;
}

/* Widget HTML dentro del hero */
.oga-hero-carousel-section .elementor-widget-html,
.oga-hero-carousel-section .elementor-widget-container {
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Carrusel base */
.oga-hero-carousel {
  position: relative;
  width: 100%;
  height: calc(100vh - 70px);
  min-height: 560px;
  overflow: hidden;
  background-color: var(--color-navy);
}

/* Track */
.oga-hero-carousel__track {
  position: relative;
  width: 100%;
  height: 100%;
}

/* Slides apiladas para transición fade */
.oga-hero-carousel__slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;

  opacity: 0;
  visibility: hidden;
  transition: opacity 1.1s ease, visibility 1.1s ease;
}

/* Slide activa */
.oga-hero-carousel__slide.is-active {
  opacity: 1;
  visibility: visible;
  z-index: 1;
}

/* Imagen full bleed */
.oga-hero-carousel__slide img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center center;
  transform: scale(1.04);
  transition: transform 1.1s ease;
}

.oga-hero-carousel__slide.is-active img {
  transform: scale(1);
}

/* Controles: flecha izquierda + dots + flecha derecha */
.oga-hero-carousel__controls {
  position: absolute;
  left: clamp(3.5rem, 4vw, 4rem);
  bottom: clamp(3.75rem, 8vh, 5rem);
  z-index: 5;

  display: flex;
  align-items: center;
  gap: 1rem;

  color: var(--color-white);
}

/* Flechas SVG */
button.oga-hero-carousel__arrow {
  appearance: none !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;

  width: 34px !important;
  height: 34px !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  cursor: pointer !important;
  opacity: 1 !important;
  line-height: 0 !important;

  transition: opacity 0.25s ease, transform 0.25s ease;
}

button.oga-hero-carousel__arrow svg {
  width: 30px !important;
  height: 30px !important;
  display: block !important;
}

button.oga-hero-carousel__arrow:hover {
  opacity: 0.75 !important;
}

button.oga-hero-carousel__arrow--prev:hover {
  transform: translateX(-2px);
}

button.oga-hero-carousel__arrow--next:hover {
  transform: translateX(2px);
}

/* Dots wrapper */
.oga-hero-carousel__dots {
  display: flex !important;
  align-items: center !important;
  gap: 0.65rem !important;
}

/* Dot individual */
button.oga-hero-carousel__dot {
  appearance: none !important;
  border: 0 !important;
  outline: none !important;
  box-shadow: none !important;

  width: 12px !important;
  height: 12px !important;
  min-width: 12px !important;
  min-height: 12px !important;
  max-width: 12px !important;
  max-height: 12px !important;

  padding: 0 !important;
  margin: 0 !important;

  display: block !important;
  flex: 0 0 12px !important;

  border-radius: 50% !important;
  background-color: var(--color-white) !important;

  opacity: 0.28 !important;
  cursor: pointer !important;
  font-size: 0 !important;
  line-height: 0 !important;

  transition: opacity 0.25s ease, transform 0.25s ease;
}

/* Dot activo */
button.oga-hero-carousel__dot.is-active {
  opacity: 1 !important;
}

/* Hover dots */
button.oga-hero-carousel__dot:hover {
  opacity: 0.7 !important;
}

/* Focus accesible */
button.oga-hero-carousel__arrow:focus-visible,
button.oga-hero-carousel__dot:focus-visible {
  outline: 2px solid var(--color-white) !important;
  outline-offset: 4px !important;
}

/* Mobile */
@media (max-width: 767px) {
  .oga-hero-carousel-section {
    min-height: 100svh !important;
  }

  .oga-hero-carousel {
    height: 100svh;
    min-height: 0;
  }

  .oga-hero-carousel__controls {
    left: 1.5rem !important;
    bottom: 2rem !important;
    gap: 0.85rem !important;
  }

  button.oga-hero-carousel__arrow {
    width: 30px !important;
    height: 30px !important;
  }

  button.oga-hero-carousel__arrow svg {
    width: 26px !important;
    height: 26px !important;
  }

  .oga-hero-carousel__dots {
    gap: 0.5rem !important;
  }

  button.oga-hero-carousel__dot {
    width: 10px !important;
    height: 10px !important;
    min-width: 10px !important;
    min-height: 10px !important;
    max-width: 10px !important;
    max-height: 10px !important;
    flex-basis: 10px !important;
  }
}

/* Accesibilidad — usuarios con reducción de movimiento */
@media (prefers-reduced-motion: reduce) {
  .oga-hero-carousel__slide,
  button.oga-hero-carousel__arrow,
  button.oga-hero-carousel__dot {
    transition: none !important;
  }
}

/* Ajuste crop mobile — primera imagen del hero */
@media (max-width: 767px) {
  .oga-hero-carousel__slide[data-slide="0"] img {
    object-position: 30% center !important;
  }
}

@media (max-width: 767px) {
  .oga-hero-carousel__slide[data-slide="5"] img {
    object-position: 70% center !important;
  }
}

/* Scrim inferior — mejora legibilidad de controles */
.oga-hero-carousel::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 620px;
  background: linear-gradient(to top, rgba(0,0,0,0.55) 0%, transparent 100%);
  pointer-events: none;
  z-index: 2;
}



/* ════════════════════════════════════════════════════════════════
   OGA-06 — MOBILE HEADER EXPANDED MENU
   ════════════════════════════════════════════════════════════════
   Menú mobile custom.
   Breakpoint único: 1200px.
   Evita saltos de altura entre desktop, tablet y mobile.
   ════════════════════════════════════════════════════════════════ */


/* Estado base */
.oga-mobile-menu-panel {
  display: none;
}

body.oga-mobile-menu-lock {
  overflow: hidden !important;
}


/* DESKTOP REAL: 1201px hacia arriba */
@media (min-width: 1201px) {

  .oga-desktop-menu,
  .oga-desktop-social {
    display: flex !important;
  }

  .oga-mobile-menu-open,
  .oga-mobile-menu-close,
  .oga-mobile-menu-panel {
    display: none !important;
  }

  .header-wrap {
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
  }

  .header-wrap .header-inner {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
  }
}


/* TABLET / MOBILE / LAPTOP CHICO: 1200px hacia abajo */
@media (max-width: 1200px) {

  /* Ocultar desktop */
  .oga-desktop-menu,
  .oga-desktop-social {
    display: none !important;
  }

  /* Header cerrado */
  .header-wrap:not(.is-menu-open) {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: hidden !important;
  }

  /* Fila superior cerrada */
  .header-wrap:not(.is-menu-open) .header-inner {
    box-sizing: border-box !important;

    height: 80px !important;
    min-height: 80px !important;
    max-height: 80px !important;

    width: 100% !important;

    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: space-between !important;

    padding-top: 0 !important;
    padding-bottom: 0 !important;

    gap: 0 !important;
  }

  /* Logo en estado cerrado */
  .header-wrap:not(.is-menu-open) .header-inner > *:first-child {
    flex: 1 1 auto !important;
    min-width: 0 !important;
  }

  /* Hamburguesa visible en cerrado */
  .header-wrap:not(.is-menu-open) .oga-mobile-menu-open {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    flex: 0 0 auto !important;
    margin-left: auto !important;
  }

  /* Cerrar oculto en cerrado */
  .header-wrap:not(.is-menu-open) .oga-mobile-menu-close {
    display: none !important;
  }

  /* Panel oculto en cerrado */
  .header-wrap:not(.is-menu-open) .oga-mobile-menu-panel {
    display: none !important;
  }


  /* Header abierto */
  .header-wrap.is-menu-open {
    height: 100dvh !important;
    min-height: 100vh !important;
    max-height: 100dvh !important;

    display: flex !important;
    flex-direction: column !important;

    background-color: rgba(255, 255, 255, 0.78) !important;
    backdrop-filter: blur(16px) saturate(140%) !important;
    -webkit-backdrop-filter: blur(16px) saturate(140%) !important;
    box-shadow: 0 4px 24px rgba(0, 49, 93, 0.10) !important;

    overflow: hidden !important;
  }

  /* Fila superior abierta */
  .header-wrap.is-menu-open .header-inner {
    box-sizing: border-box !important;

    height: 80px !important;
    min-height: 80px !important;
    max-height: 80px !important;
    flex: 0 0 80px !important;

    width: 100% !important;

    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: space-between !important;

    padding-top: 0 !important;
    padding-bottom: 0 !important;

    gap: 0 !important;
  }

  /* En abierto: hamburguesa oculta */
  .header-wrap.is-menu-open .oga-mobile-menu-open {
    display: none !important;
  }

  /* En abierto: cerrar visible */
  .header-wrap.is-menu-open .oga-mobile-menu-close {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    flex: 0 0 auto !important;
    margin-left: auto !important;
  }

  /* Panel abierto */
  .header-wrap.is-menu-open .oga-mobile-menu-panel {
    display: flex !important;

    flex: 1 1 auto !important;
    width: 100% !important;
    max-width: 1440px !important;

    margin-left: auto !important;
    margin-right: auto !important;

    padding-left: var(--container-padding) !important;
    padding-right: var(--container-padding) !important;
    padding-top: clamp(2rem, 7vh, 5rem) !important;
    padding-bottom: clamp(2rem, 7vh, 5rem) !important;

    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    gap: clamp(1.25rem, 3vh, 2rem) !important;

    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: translateY(0) !important;
  }
}


/* Accesibilidad */
@media (prefers-reduced-motion: reduce) {
  .header-wrap,
  .oga-mobile-menu-panel {
    transition: none !important;
  }
}



/* ════════════════════════════════════════════════════════════════
   OGA-06 FIX — MOBILE MENU PANEL FINAL
   ════════════════════════════════════════════════════════════════
   Ajuste final del panel mobile:
   - menú centrado visualmente en zona media-superior
   - redes visibles, no pegadas al borde inferior
   - tipografía más fina y elegante
   - compatible con Safari iPhone
   ════════════════════════════════════════════════════════════════ */

@media (max-width: 1200px) {

  .header-wrap.is-menu-open .oga-mobile-menu-panel {
    justify-content: flex-start !important;
    align-items: center !important;
    text-align: center !important;

    padding-top: clamp(5rem, 14vh, 8rem) !important;
    padding-bottom: calc(3rem + env(safe-area-inset-bottom)) !important;

    gap: clamp(1.55rem, 3vh, 2.15rem) !important;
  }

  .oga-mobile-menu-panel .elementor-widget-heading {
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
  }

  .oga-mobile-menu-panel .elementor-heading-title {
    display: inline-block !important;
    width: auto !important;
    max-width: none !important;

    white-space: nowrap !important;
    text-align: center !important;

    font-family: 'Mulish', sans-serif !important;
    font-weight: 500 !important;
    font-size: clamp(1rem, 2.8vw, 1.25rem) !important;
    line-height: 1.15 !important;
    letter-spacing: 0.02em !important;
    text-transform: uppercase !important;
    color: var(--color-navy) !important;
  }

  .oga-mobile-menu-panel .elementor-heading-title a {
    white-space: nowrap !important;
    color: inherit !important;
    text-decoration: none !important;
  }

  .oga-mobile-menu-social {
    margin-top: clamp(3rem, 10vh, 5.5rem) !important;
    margin-bottom: 0 !important;
    width: auto !important;
    align-self: center !important;
  }

  .oga-mobile-menu-social .elementor-social-icons-wrapper {
    justify-content: center !important;
  }
}

@media (max-width: 767px) {

  .header-wrap.is-menu-open .oga-mobile-menu-panel {
    padding-top: clamp(4.25rem, 12vh, 6.5rem) !important;
    padding-bottom: calc(2.5rem + env(safe-area-inset-bottom)) !important;
    gap: 1.45rem !important;
  }

  .oga-mobile-menu-panel .elementor-heading-title {
    font-size: clamp(1rem, 4.5vw, 1.125rem) !important;
    font-weight: 500 !important;
    letter-spacing: 0.015em !important;
  }

  .oga-mobile-menu-social {
    margin-top: clamp(2.5rem, 8vh, 4rem) !important;
  }
}

/* Ajuste fino — subir menú mobile abierto en iPhone */
@media (max-width: 767px) {
  .header-wrap.is-menu-open .oga-mobile-menu-panel {
    padding-top: clamp(3.25rem, 8.5vh, 5rem) !important;
  }
}


/* Ajuste fuerte — subir menú mobile abierto sin perder redes */
@media (max-width: 767px) {

  .header-wrap.is-menu-open .oga-mobile-menu-panel {
    padding-top: 0rem !important;
    padding-bottom: calc(2.5rem + env(safe-area-inset-bottom)) !important;
    gap: 1.35rem !important;
  }

  .oga-mobile-menu-panel .elementor-widget-heading {
    margin: 0 !important;
  }

  .oga-mobile-menu-social {
    margin-top: clamp(3.25rem, 9vh, 4.75rem) !important;
  }
}


/* ════════════════════════════════════════════════════════════════
   ████  PARTE 3: REFERENCIA RÁPIDA  ████
   ════════════════════════════════════════════════════════════════ */




/* ════════════════════════════════════════════════════════════════
   SECCIÓN 13 — CHEAT SHEET PARA ELEMENTOR
   ════════════════════════════════════════════════════════════════
   Referencia rápida de clases a aplicar en CSS Classes de cada
   widget o container en Elementor Pro.

   ── TIPOGRAFÍA OGA ────────────────────────────────────────────
   ELEMENTO                        CLASES A APLICAR
   Slogan editorial / cita          text-l font-display text-primary text-center
   H1 principal                     text-xxl font-body-light text-primary
   H2 sección                       text-xl font-body-light text-primary
   H3 / subtítulo                   text-l font-body-light text-primary
   Subheadline                      text-m font-body-semi text-primary
   Item menú header                 text-body-s font-body-mid text-primary text-upper
   Eyebrow / label                  text-xs font-body-semi text-upper text-primary
   Link / CTA inline                text-body font-body-semi text-action
   Párrafo intro                    text-body-l font-body text-secondary
   Párrafo estándar                 text-body font-body text-secondary
   Párrafo liviano                  text-body font-body-light text-secondary
   Caption / nota / footer          text-body-s font-body text-secondary

   ── BOTONES OGA ───────────────────────────────────────────────
   Amarillo                         btn-yellow
   Azul                             btn-blue
   Rojo                             btn-red
   Blanco sólido                    btn-white
   Blanco outline reserva           btn-white-outline

   ── LAYOUT ────────────────────────────────────────────────────
   Sección full-width c/ fondo       bg-base / bg-alt / bg-primary
   Container centrado 1440px         container container-padding
   Padding vertical sección          pad-top-l pad-bottom-l
   Gap entre elementos               gap-s / gap-m / gap-l

   ── HEADER ────────────────────────────────────────────────────
   Container principal               header-wrap
   Container inner                   header-inner
   Menú OGA                          text-body-s font-body-mid text-primary text-upper
   CTA flotante                      oga-floating-cta
   Hero sentinel para CTA            hero-section
   Footer sentinel para CTA          site-footer

   ── COLORES SEMÁNTICOS ────────────────────────────────────────
   TEXTOS:    text-primary    text-secondary
              text-light      text-accent      text-action
   FONDOS:    bg-primary      bg-secondary
              bg-accent       bg-action
              bg-base         bg-alt

   ── IMÁGENES ──────────────────────────────────────────────────
   Retrato 3:4                       foto-proporcion
   Landscape 16:9                    foto-landscape
   Cuadrada 1:1                      foto-cuadrada
   Full-bleed                        img-full-bleed
   ════════════════════════════════════════════════════════════════ *//* End custom CSS */