/* ==========================================================================
   Estandarizacion de header / menu  (zamorano.edu)  -  2026-10-20
   Alcance: plantillas Elementor 22087 "Header Transparent" (home, pagina 70)
            y 17245 "Header Dark" (resto del sitio).
   NO cambia los breakpoints globales del kit. Todo va acotado a las dos
   secciones top-level de cada header (selectores por data-id de Elementor):
     D = variante escritorio : 22087 -> 61c629f | 17245 -> cfe3043
     M = variante hamburguesa: 22087 -> 851ea7e | 17245 -> b31494f
   (Elementor y Vamtam clonan la seccion sticky: el mismo data-id aparece 2 veces,
    los selectores aplican a ambas copias.)

   Sistema:
     <  1200px  : hamburguesa / dropdown (variante M), items 17px
     1200-1439  : fila horizontal compacta (variante D), items 14px, padding 12px
     >= 1440    : fila horizontal completa (variante D), items 15px, padding 18px
   ========================================================================== */

:root {
  --zam-green: #183526;
  --zam-accent: #FFC53A;
  --zam-header-h: 85px;
}

/* ---------- Foco visible (todos los anchos) ---------- */
:is(.elementor-element-61c629f, .elementor-element-cfe3043, .elementor-element-851ea7e, .elementor-element-b31494f)
  :is(.elementor-menu-toggle, a, [role="button"], .elementor-icon):focus-visible {
  outline: 2px solid var(--zam-accent) !important;
  outline-offset: 2px !important;
}

/* ---------- Respeta reduced-motion en el brillo del boton Donar ---------- */
@media (prefers-reduced-motion: reduce) {
  :is(.elementor-element-61c629f, .elementor-element-cfe3043, .elementor-element-851ea7e, .elementor-element-b31494f)
    .elementor-button::before { animation: none !important; }
}

/* ======================================================================
   < 1200px : variante M (hamburguesa) tambien entre 1025 y 1199
   ====================================================================== */
@media (max-width: 1199px) {
  :is(.elementor-element-61c629f, .elementor-element-cfe3043) { display: none !important; }

  :is(.elementor-element-851ea7e, .elementor-element-b31494f) {
    display: block !important;
    background-color: var(--zam-green) !important;
    min-height: 0 !important;
  }

  /* fila unica, centrada verticalmente */
  :is(.elementor-element-851ea7e, .elementor-element-b31494f) > .elementor-container {
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    min-height: 80px !important;   /* 22087 trae 400px en el rango desktop (el valor de tablet solo aplica <=1024) */
    height: auto !important;
    width: 100%;
    max-width: none;
  }
  :is(.elementor-element-851ea7e, .elementor-element-b31494f) .elementor-column:first-child {
    flex: 1 1 auto !important; width: auto !important; min-width: 0;
  }
  :is(.elementor-element-851ea7e, .elementor-element-b31494f) .elementor-column:nth-child(n+2) {
    flex: 0 0 64px !important; width: 64px !important; max-width: 64px;
  }
  :is(.elementor-element-851ea7e, .elementor-element-b31494f) .elementor-widget-wrap {
    align-items: center !important; align-content: center !important;
    padding: 0 !important;
  }
  :is(.elementor-element-851ea7e, .elementor-element-b31494f) .elementor-column:first-child .elementor-widget-wrap {
    padding-left: 24px !important;
  }

  /* logo: alto fijo, ancho proporcional (antes 90% de la columna) */
  :is(.elementor-element-851ea7e, .elementor-element-b31494f) .elementor-widget-theme-site-logo img {
    height: 48px !important; width: auto !important; max-width: 100%; object-fit: contain;
  }

  /* boton Donar (icono) y toggle: objetivo tactil >= 44x44 */
  :is(.elementor-element-851ea7e, .elementor-element-b31494f) .elementor-widget-button {
    width: 100%; margin: 0 !important;
  }
  :is(.elementor-element-851ea7e, .elementor-element-b31494f) .elementor-widget-button .elementor-button {
    min-width: 44px; min-height: 44px;
    display: flex !important; align-items: center; justify-content: center;
  }
  :is(.elementor-element-851ea7e, .elementor-element-b31494f) .elementor-widget-nav-menu,
  :is(.elementor-element-851ea7e, .elementor-element-b31494f) .elementor-widget-nav-menu .elementor-menu-toggle {
    width: 100%;
  }
  :is(.elementor-element-851ea7e, .elementor-element-b31494f) .elementor-menu-toggle {
    min-width: 44px; min-height: 44px;
    display: flex !important; align-items: center; justify-content: center;
    margin: 0 auto !important;
    color: #fff !important;
    background: transparent !important;
  }
  /* 17245 pintaba el contenedor del toggle de blanco con icono gris oscuro: fondo = el del header */
  :is(.elementor-element-851ea7e, .elementor-element-b31494f) .elementor-widget-nav-menu > .elementor-widget-container,
  :is(.elementor-element-851ea7e, .elementor-element-b31494f) .elementor-widget-wrap {
    background-color: transparent !important;
  }
  /* columna del boton Donar conserva su verde de marca */
  :is(.elementor-element-851ea7e, .elementor-element-b31494f) .elementor-column:nth-child(2) > .elementor-widget-wrap,
  :is(.elementor-element-851ea7e, .elementor-element-b31494f) .elementor-column:nth-child(2) > .elementor-widget-wrap .elementor-widget-container {
    background-color: #44C302 !important;
  }
  :is(.elementor-element-851ea7e, .elementor-element-b31494f) .elementor-menu-toggle svg,
  :is(.elementor-element-851ea7e, .elementor-element-b31494f) .elementor-menu-toggle i {
    fill: #fff !important; color: #fff !important;
  }

  /* boton Donar = toda la columna verde: el brillo (::before del <a>) y el area clicable
     cubren el bloque entero. Entre 1025 y 1199 Elementor aplicaba las reglas de desktop
     (icono 15px + margin 16px, descentrado); aqui el icono queda igual en todo <1200. */
  :is(.elementor-element-851ea7e, .elementor-element-b31494f) .elementor-column:nth-child(2) > .elementor-widget-wrap {
    align-items: stretch !important; align-content: stretch !important;
  }
  :is(.elementor-element-851ea7e, .elementor-element-b31494f) .elementor-column:nth-child(2) .elementor-widget-button,
  :is(.elementor-element-851ea7e, .elementor-element-b31494f) .elementor-column:nth-child(2) .elementor-widget-button > .elementor-widget-container,
  :is(.elementor-element-851ea7e, .elementor-element-b31494f) .elementor-column:nth-child(2) .elementor-button-wrapper {
    width: 100% !important; max-width: none !important; height: 100%;
    margin: 0 !important; padding: 0 !important;
  }
  :is(.elementor-element-851ea7e, .elementor-element-b31494f) .elementor-column:nth-child(2) .elementor-button {
    width: 100% !important; height: 100%; min-height: 80px;
    padding: 0 !important; border-radius: 0 !important;
    font-size: 26px !important;
  }
  :is(.elementor-element-851ea7e, .elementor-element-b31494f) .elementor-column:nth-child(2) .elementor-button-icon svg {
    width: 26px; height: 26px;
  }

  /* el panel arranca justo en el borde inferior del header (toggle centrado en 80px => 62px + 18px) */
  :is(.elementor-element-851ea7e, .elementor-element-b31494f) .elementor-nav-menu--dropdown.elementor-nav-menu__container {
    margin-top: 18px !important;
  }

  /* dropdown: tipografia unica 17/16px, fila minima 52px, fondo oscuro con texto claro */
  :is(.elementor-element-851ea7e, .elementor-element-b31494f) .elementor-nav-menu--dropdown a.elementor-item {
    font-size: 17px !important; line-height: 1.3; min-height: 52px;
    display: flex; align-items: center;
    padding: 12px 24px !important;
  }
  :is(.elementor-element-851ea7e, .elementor-element-b31494f) .elementor-nav-menu--dropdown .sub-menu a.elementor-sub-item {
    font-size: 16px !important; min-height: 52px;
  }
  :is(.elementor-element-851ea7e, .elementor-element-b31494f) .elementor-nav-menu--dropdown :is(a:focus-visible) {
    outline-offset: -3px !important;
  }
}

/* Entre 1025 y 1199 Elementor no activa su sticky (solo <=1024), y en 17245 tampoco en movil
   (sticky_on = solo tablet): lo hacemos con CSS en todo <1200 cuando Elementor no lo activo.
   El <header> reserva el alto para que el contenido no quede debajo. */
@media (max-width: 1199px) {
  header.elementor-location-header { min-height: 80px; }
  :is(.elementor-element-851ea7e, .elementor-element-b31494f):not(.elementor-sticky--active) {
    position: fixed !important; top: 0; left: 0; right: 0; width: 100%; z-index: 1100;
  }
  body.admin-bar :is(.elementor-element-851ea7e, .elementor-element-b31494f):not(.elementor-sticky--active) { top: 32px; }
}

/* ======================================================================
   >= 1200px : variante D en UNA fila flex (sin columnas 20/80 %)
   ====================================================================== */
@media (min-width: 1200px) {
  :is(.elementor-element-851ea7e, .elementor-element-b31494f) { display: none !important; }

  :is(.elementor-element-61c629f, .elementor-element-cfe3043) > .elementor-container {
    flex-wrap: nowrap !important;
    align-items: center !important;
    min-height: var(--zam-header-h);
  }
  :is(.elementor-element-61c629f, .elementor-element-cfe3043) .elementor-column:first-child {
    flex: 0 0 auto !important; width: auto !important;
  }
  :is(.elementor-element-61c629f, .elementor-element-cfe3043) .elementor-column:last-child {
    flex: 1 1 auto !important; width: auto !important; min-width: 0;
  }
  :is(.elementor-element-61c629f, .elementor-element-cfe3043) .elementor-widget-wrap {
    flex-wrap: nowrap !important;
    align-items: center !important;
    align-content: center !important;
    justify-content: flex-end !important;
    height: auto !important;
    padding: 0 !important;
  }
  :is(.elementor-element-61c629f, .elementor-element-cfe3043) .elementor-column:first-child .elementor-widget-wrap {
    justify-content: flex-start !important;
  }
  :is(.elementor-element-61c629f, .elementor-element-cfe3043) .elementor-widget {
    height: auto !important; min-height: 0 !important; margin-bottom: 0 !important;
    flex: 0 0 auto;
  }
  :is(.elementor-element-61c629f, .elementor-element-cfe3043) .elementor-widget-nav-menu { flex: 0 1 auto; width: auto !important; }
  :is(.elementor-element-61c629f, .elementor-element-cfe3043) .elementor-widget-nav-menu .elementor-nav-menu--main {
    background: transparent !important;
  }
  /* los 7 items nunca se parten en 2 lineas */
  :is(.elementor-element-61c629f, .elementor-element-cfe3043) .elementor-nav-menu--main .elementor-nav-menu > li > a.elementor-item {
    white-space: nowrap;
    display: flex; align-items: center;
  }

  /* hamburguesa (popup 998): objetivo 44x44 y centrada */
  :is(.elementor-element-61c629f, .elementor-element-cfe3043) .vamtam-popup-toggle .elementor-icon {
    min-width: 44px; min-height: 44px;
    display: inline-flex; align-items: center; justify-content: center;
    padding: 0 !important;
  }
  :is(.elementor-element-61c629f, .elementor-element-cfe3043) .vamtam-popup-toggle { margin: 0 0 0 4px !important; padding: 0 !important; }
  :is(.elementor-element-61c629f, .elementor-element-cfe3043) .vamtam-popup-toggle > .elementor-widget-container { padding: 0 !important; margin: 0 !important; }
  :is(.elementor-element-61c629f, .elementor-element-cfe3043) .elementor-widget-button > .elementor-widget-container { margin: 0 !important; padding: 0 !important; }
  :is(.elementor-element-61c629f, .elementor-element-cfe3043) .elementor-nav-menu--main .elementor-nav-menu > li > a.elementor-item { padding-top: 14px !important; padding-bottom: 14px !important; }
}

/* ---------- Fondo y contraste (>=1200) ----------
   17245 tenia paneles blancos (nav, hamburguesa) sobre franjas verdes parciales:
   ahora la fila entera es verde #183526 y el menu transparente con texto blanco.
   22087 (home) sigue transparente sobre el video, con un degradado oscuro (scrim) arriba
   para garantizar contraste; al hacer scroll Vamtam lo pinta #183526 (CSS adicional). */
@media (min-width: 1200px) {
  .elementor-element-cfe3043 { background-color: var(--zam-green) !important; }
  .elementor-element-61c629f:not(.vamtam-sticky-header--fixed-shown) {
    background-image: linear-gradient(to bottom, rgba(24,53,38,.78) 0%, rgba(24,53,38,0) 100%);
  }
  :is(.elementor-element-61c629f, .elementor-element-cfe3043) .elementor-widget-wrap,
  :is(.elementor-element-61c629f, .elementor-element-cfe3043) .elementor-widget-nav-menu > .elementor-widget-container,
  :is(.elementor-element-61c629f, .elementor-element-cfe3043) .vamtam-popup-toggle > .elementor-widget-container,
  :is(.elementor-element-61c629f, .elementor-element-cfe3043) .elementor-nav-menu--main {
    background-color: transparent !important;
  }
  :is(.elementor-element-61c629f, .elementor-element-cfe3043) .elementor-nav-menu--main .elementor-nav-menu > li > a.elementor-item,
  :is(.elementor-element-61c629f, .elementor-element-cfe3043) .vamtam-popup-toggle .elementor-icon {
    color: #fff !important;
  }
  :is(.elementor-element-61c629f, .elementor-element-cfe3043) .elementor-nav-menu--main .elementor-nav-menu > li:is(.current-menu-item, .current-menu-ancestor, .current-menu-parent, .current_page_item, .current_page_ancestor) > a.elementor-item,
  :is(.elementor-element-61c629f, .elementor-element-cfe3043) .elementor-nav-menu--main .elementor-nav-menu > li > a.elementor-item:is(:hover, :focus, .elementor-item-active, .highlighted, [aria-current="page"]) {
    background-color: var(--zam-accent) !important;
    color: var(--zam-green) !important;
  }
}

/* ---------- 1200-1439 : compacto ---------- */
@media (min-width: 1200px) and (max-width: 1439px) {
  :is(.elementor-element-61c629f, .elementor-element-cfe3043) > .elementor-container { padding: 0 24px; }
  :is(.elementor-element-61c629f, .elementor-element-cfe3043) .elementor-widget-theme-site-logo img {
    height: 39px !important; width: auto !important; max-width: none;
  }
  :is(.elementor-element-61c629f, .elementor-element-cfe3043) .elementor-nav-menu--main .elementor-nav-menu > li > a.elementor-item {
    font-size: 14px !important; padding-left: 12px !important; padding-right: 12px !important;
  }
  :is(.elementor-element-61c629f, .elementor-element-cfe3043) .elementor-widget-button { margin: 0 8px !important; }
  :is(.elementor-element-61c629f, .elementor-element-cfe3043) .elementor-widget-button .elementor-button { font-size: 14px; }
}

/* ---------- 1200-1279 : compacto ajustado ----------
   Con scrollbar clasica (clientWidth = viewport - 15) la fila de 1200 necesita ~1192px
   con padding 12px: no entra. Se estrecha (padding 10px, gutter 16px, logo 36px de alto)
   en vez de subir el corte a 1280. Margen medido a 1200: ~50px. */
@media (min-width: 1200px) and (max-width: 1279px) {
  :is(.elementor-element-61c629f, .elementor-element-cfe3043) > .elementor-container { padding: 0 16px; }
  :is(.elementor-element-61c629f, .elementor-element-cfe3043) .elementor-widget-theme-site-logo img { height: 36px !important; }
  :is(.elementor-element-61c629f, .elementor-element-cfe3043) .elementor-nav-menu--main .elementor-nav-menu > li > a.elementor-item {
    padding-left: 10px !important; padding-right: 10px !important;
  }
  :is(.elementor-element-61c629f, .elementor-element-cfe3043) .elementor-widget-button { margin: 0 6px !important; }
}

/* ---------- >= 1440 : completo ---------- */
@media (min-width: 1440px) {
  :is(.elementor-element-61c629f, .elementor-element-cfe3043) > .elementor-container { padding: 0 32px; }
  :is(.elementor-element-61c629f, .elementor-element-cfe3043) .elementor-widget-theme-site-logo img {
    height: 45px !important; width: auto !important; max-width: none;
  }
  :is(.elementor-element-61c629f, .elementor-element-cfe3043) .elementor-nav-menu--main .elementor-nav-menu > li > a.elementor-item {
    font-size: 15px !important; padding-left: 18px !important; padding-right: 18px !important;
  }
  :is(.elementor-element-61c629f, .elementor-element-cfe3043) .elementor-widget-button { margin: 0 16px !important; }
}