/* ============================================================
   CISEP Design Tokens — paleta extraída del logo institucional
   Bemorex × CISEP · 2026-05-15 (v2 — corrigió paleta granate)

   COLORES DEL LOGO:
   - Azul institucional (borde + "cisep")
   - Verde tierra (pasto, paisaje)
   - Marrón tierra (montaña, casco minero)
   - Celeste cielo
   - Crema cálido
   ============================================================ */

:root {
  /* Tipografía institucional CISEP */
  --donatix-font: "Nunito Sans", "Lato", system-ui, sans-serif;
  --donatix-font-two: "Nunito", "Lato", system-ui, sans-serif;
  --donatix-font-three: "Caveat", cursive;

  /* ===== PALETA CISEP — LOGO ===== */

  /* Azul institucional — el color del "cisep" del logo */
  --cisep-azul: #2E4FA0;
  --cisep-azul-rgb: 46, 79, 160;
  --cisep-azul-oscuro: #1F3B7F;
  --cisep-azul-oscuro-rgb: 31, 59, 127;
  --cisep-azul-claro: #5B7FCF;
  --cisep-azul-claro-rgb: 91, 127, 207;

  /* Verde tierra — el pasto del logo. v4: ajustado para WCAG AA estricto.
     #52B033 (4.21 con blanco texto) → #347A1B (5.28 con blanco texto).
     El claro mantiene la vibe brillante para accents. */
  --cisep-verde: #52B033;
  --cisep-verde-rgb: 82, 176, 51;
  --cisep-verde-oscuro: #347A1B;
  --cisep-verde-oscuro-rgb: 52, 122, 27;
  --cisep-verde-claro: #6DC54A;
  --cisep-verde-claro-rgb: 109, 197, 74;

  /* Marrón tierra — la montaña y casco minero del logo */
  --cisep-tierra: #8B6B47;
  --cisep-tierra-rgb: 139, 107, 71;
  --cisep-tierra-oscura: #6B5236;
  --cisep-tierra-oscura-rgb: 107, 82, 54;

  /* Celeste cielo — el fondo del logo */
  --cisep-cielo: #A8C8E0;
  --cisep-cielo-rgb: 168, 200, 224;

  /* Neutros */
  --cisep-crema: #F8F5EE;          /* background suave */
  --cisep-crema-rgb: 248, 245, 238;
  --cisep-blanco: #FFFFFF;
  --cisep-carbon: #1F2937;         /* headings principal */
  --cisep-carbon-rgb: 31, 41, 55;
  --cisep-gris: #64748B;
  --cisep-gris-rgb: 100, 116, 139;

  /* Sobreescritura de los tokens Donatix:
     - "base" (CTA, hovers fuertes) → AZUL CISEP
     - "primary" (headings, footer) → CARBÓN
     - "secondary" (acentos) → TIERRA
     - "gray-bg" (backgrounds) → CREMA
  */
  --donatix-base: var(--cisep-azul);
  --donatix-base-rgb: var(--cisep-azul-rgb);

  --donatix-primary: var(--cisep-carbon);
  --donatix-primary-rgb: var(--cisep-carbon-rgb);

  --donatix-secondary: var(--cisep-tierra);
  --donatix-secondary-rgb: var(--cisep-tierra-rgb);

  --donatix-gray: var(--cisep-gris);
  --donatix-gray-rgb: var(--cisep-gris-rgb);

  --donatix-gray-bg: var(--cisep-crema);
  --donatix-gray-bg-rgb: var(--cisep-crema-rgb);

  --donatix-black: var(--cisep-carbon);
  --donatix-black-rgb: var(--cisep-carbon-rgb);

  --donatix-bdr-radius: 14px;
}

/* ============================================================
   Ajustes finos de identidad
   ============================================================ */

html, body {
  scroll-behavior: smooth;
}

/* Botón principal — usar AZUL en lugar del naranja */
.thm-btn {
  background-color: var(--cisep-azul) !important;
  color: var(--cisep-blanco) !important;
}
.thm-btn:hover {
  background-color: var(--cisep-azul-oscuro) !important;
  color: var(--cisep-blanco) !important;
}

/* Headings — color carbón institucional */
h1, h2, h3, h4, h5, h6 {
  color: var(--cisep-carbon);
  letter-spacing: -0.01em;
}

/* Header — container fluido full width (no max-width) */
.main-header__one .container,
.stricky-header .container {
  max-width: 100% !important;
  width: 100%;
  padding-left: 28px;
  padding-right: 28px;
}

/* Menú principal — 7 items, espaciado cómodo (DESKTOP only ≥1200px).
   El JS clona `.main-menu__list` dentro de `.mobile-nav__container`,
   por lo que cualquier regla global de `.main-menu__list` rompe el
   off-canvas en móvil (items horizontales, padding raro, etc.). */
@media (min-width: 1200px) {
  .main-menu__list {
    gap: 0;
  }
  .main-menu__list > li {
    margin: 0;
    padding: 0 12px;
  }
  .main-menu__list > li > a {
    color: var(--cisep-carbon);
    font-weight: 600;
    font-size: 14.5px;
    letter-spacing: -.005em;
    white-space: nowrap;
    position: relative;
    padding: 28px 0;
    display: inline-block;
  }
  .stricky-header.stricky-fixed .main-menu__list > li > a {
    padding: 22px 0;
  }
  .stricky-header .main-menu__list > li {
    padding: 0 10px;
  }
}

/* Layout del header — desktop only (≥1200px). Bajo eso usa mobile-nav del template */
@media (min-width: 1200px) {
  .main-menu__wrapper-inner {
    gap: 0 !important;
    align-items: center !important;
  }
  .main-header__one-bottom-left {
    flex: 0 0 auto;
    margin-right: 60px;
    z-index: 2;
  }
  .main-header__one-bottom-middle {
    overflow: visible;
    display: flex !important;
    justify-content: flex-end;
    align-items: center;
    padding-right: 32px;
    flex: 1 1 auto;
    min-width: 0;
  }
  .main-header__one-bottom-right {
    flex: 0 0 auto;
  }
  .main-menu__main-menu-box {
    width: auto;
    justify-content: flex-end;
    max-width: 100%;
  }
  .main-menu__list {
    max-width: 100%;
    justify-content: flex-end;
    flex-wrap: nowrap;
  }

  /* Header compacto en todos los estados — 22px arriba/abajo */
  .main-menu .main-menu__list > li,
  .stricky-header .main-menu__list > li,
  .stricky-header.stricky-fixed .main-menu__list > li {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }

  /* El template aplica margin-left:45px a li+li. Lo reducimos a 24px */
  .main-menu .main-menu__list > li + li,
  .stricky-header .main-menu__list > li + li {
    margin-left: 24px !important;
  }
  .stricky-header .main-menu__list > li + li {
    margin-left: 20px !important;
  }

  /* Sin padding horizontal extra en el li (ya tenemos margin entre items) */
  .main-menu__list > li {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

/* Botón Apóyanos del header — destacado con verde (acción positiva).
   Uso verde-oscuro como base para asegurar contraste WCAG AA con texto blanco
   (4.4:1). El verde brillante #52B033 queda para hover/accents. */
.main-header__btn-box .thm-btn {
  background-color: var(--cisep-verde-oscuro) !important;
  color: var(--cisep-blanco) !important;
  padding: 14px 26px !important;
  font-weight: 700;
  letter-spacing: .01em;
}
.main-header__btn-box .thm-btn:hover,
.main-header__btn-box .thm-btn:hover * {
  background-color: var(--cisep-verde) !important;
  color: var(--cisep-blanco) !important;
}
.main-header__btn-box .thm-btn .icon-heart {
  margin-right: 6px;
  color: var(--cisep-blanco) !important;
}

/* ============================================================
   Hover en TODOS los .thm-btn — texto blanco siempre, sin importar
   el bg variant. Resuelve choques de paleta donde el hover dejaba
   texto invisible (color heredado === bg).
   ============================================================ */
.thm-btn,
.thm-btn:hover,
.thm-btn:focus,
.thm-btn:active,
.thm-btn:hover *,
.thm-btn:hover .icon-heart,
.thm-btn:hover [class^="icon-"],
.thm-btn:hover [class*=" icon-"] {
  color: var(--cisep-blanco) !important;
}

/* Botones outline / ghost en cards: bg transparente + texto azul,
   en hover invertimos (no choca con bg blanco) */
.cause-one__btn-box .thm-btn,
.blog-one__btn,
.event-one__btn {
  background-color: var(--cisep-azul) !important;
  color: var(--cisep-blanco) !important;
}
.cause-one__btn-box .thm-btn:hover,
.blog-one__btn:hover,
.event-one__btn:hover {
  background-color: var(--cisep-azul-oscuro) !important;
  color: var(--cisep-blanco) !important;
}

@media (min-width: 1200px) and (max-width: 1500px) {
  .main-menu__list > li {
    padding: 0 10px;
  }
  .main-menu__list > li > a {
    font-size: 14.5px;
  }
}
@media (min-width: 1200px) and (max-width: 1300px) {
  .main-menu__list > li {
    padding: 0 8px;
  }
  .main-menu__list > li > a {
    font-size: 14px;
  }
  .main-header__one-bottom-left .logo-box img {
    max-height: 60px !important;
    height: 60px;
  }
}

/* Fix layout del sticky-header — el template clona el header y los hijos
   se apilan verticalmente sin esta corrección. Solo en desktop. */
@media (min-width: 1200px) {
  .main-menu__wrapper-inner {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 24px;
  }
  .main-header__one-bottom-left,
  .main-header__one-bottom-right {
    flex: 0 0 auto;
    display: flex !important;
    align-items: center;
    gap: 12px;
  }
  .main-header__one-bottom-middle {
    flex: 1 1 auto;
    display: flex !important;
    justify-content: center;
    min-width: 0;
  }
  .main-menu__main-menu-box,
  .main-menu__list {
    display: flex !important;
    flex-direction: row !important;
    align-items: center;
    margin: 0;
    padding: 0;
    list-style: none;
  }
}

/* ============================================================
   STICKY HEADER EN MOBILE — al scrollear el header debe quedar fijo
   arriba con logo + botón hamburger + Apóyanos. El template lo
   ocultaba con display:none en <1200px.
   ============================================================ */
@media (max-width: 1199.98px) {
  .stricky-header.stricky-fixed {
    display: block !important;
    position: fixed !important;
    top: 0 !important;
    left: 0;
    right: 0;
    width: 100%;
    z-index: 999;
    background: var(--cisep-blanco);
    box-shadow: 0 4px 16px rgba(31, 59, 127, .12);
    padding: 8px 0;
    animation: stickySlideDown .25s ease-out;
  }
  .stricky-header.stricky-fixed .main-menu__wrapper-inner {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px;
    padding: 0 16px;
  }
  .stricky-header.stricky-fixed .main-header__one-bottom-left {
    flex: 0 0 auto;
    display: flex !important;
    align-items: center;
  }
  .stricky-header.stricky-fixed .main-header__one-bottom-left .logo-box img {
    max-height: 44px !important;
    height: 44px !important;
    width: auto !important;
  }
  .stricky-header.stricky-fixed .main-header__one-bottom-middle {
    display: flex !important;
    justify-content: flex-end;
    flex: 1 1 auto;
  }
  .stricky-header.stricky-fixed .main-menu__list {
    display: none !important;
  }
  .stricky-header.stricky-fixed .main-menu__main-menu-box .mobile-nav__toggler {
    display: inline-block !important;
    color: var(--cisep-azul);
    font-size: 26px;
    cursor: pointer;
    padding: 8px;
  }
  .stricky-header.stricky-fixed .main-header__one-bottom-right {
    flex: 0 0 auto;
    display: flex !important;
    align-items: center;
  }
  .stricky-header.stricky-fixed .main-header__btn-box .thm-btn {
    padding: 8px 16px !important;
    font-size: 13px !important;
  }
}
@keyframes stickySlideDown {
  from { transform: translateY(-100%); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

/* Mobile: ocultar menú desktop completamente, dejar paso al mobile-nav del template */
@media (max-width: 1199.98px) {
  .main-menu__main-menu-box .main-menu__list,
  .stricky-header .main-menu__main-menu-box .main-menu__list {
    display: none !important;
  }
  .main-menu__main-menu-box .mobile-nav__toggler {
    display: inline-block !important;
    color: var(--cisep-azul);
    font-size: 28px;
    cursor: pointer;
  }
  /* Logo más pequeño en móvil */
  .main-header__one-bottom-left .logo-box img,
  .stricky-header .logo-box img {
    max-height: 48px !important;
    height: 48px !important;
    width: auto !important;
  }
  .main-header__one-bottom-left {
    margin-right: 0 !important;
  }
  .main-header__one-bottom {
    padding: 16px 0 !important;
  }
  /* Botón Apóyanos compacto en móvil */
  .main-header__btn-box {
    margin-left: 8px;
  }
  .main-header__btn-box .thm-btn {
    padding: 10px 18px !important;
    font-size: 14px !important;
  }
  /* Top bar oculta en móvil (ya hay teléfono/email en menú/footer) */
  .main-header__one-top {
    display: none !important;
  }

  /* Off-canvas a ancho completo en móvil. El template lo deja en 300px,
     pero a 390px de viewport queda chico y deja un overlay angosto a la
     derecha. Mejor full-width para que respire el contenido. */
  .mobile-nav__content {
    width: 100vw !important;
    max-width: 100vw !important;
    padding-left: 24px !important;
    padding-right: 24px !important;
  }
  /* El overlay negro queda invisible (no hay espacio a la derecha del
     panel), así que el close-button es el único cierre. Lo agrandamos. */
  .mobile-nav__close {
    top: 16px !important;
    right: 18px !important;
    font-size: 22px !important;
    padding: 6px;
  }

  /* El template usa --donatix-base (azul CISEP #2E4FA0) para los chevrons,
     iconos de contacto y hovers dentro del off-canvas. Sobre el fondo
     carbón #1F2937 el azul queda "dark on dark" y choca. Cambiamos a
     cielo (claro) para accents y verde para el estado activo. */

  /* Chevron toggle del dropdown — cielo translúcido en reposo,
     verde cuando está expandido para señalar "abierto". */
  .mobile-nav__content .main-menu__list > li > a > button,
  .mobile-nav__content .main-menu__list > li > ul > li > a > button,
  .mobile-nav__content .main-menu__list > li > ul > li > ul > li > a > button {
    background-color: rgba(168, 200, 224, .15) !important;
    color: var(--cisep-cielo) !important;
    border: 1px solid rgba(168, 200, 224, .3) !important;
  }
  .mobile-nav__content .main-menu__list > li > a > button.expanded,
  .mobile-nav__content .main-menu__list > li > ul > li > a > button.expanded,
  .mobile-nav__content .main-menu__list > li > ul > li > ul > li > a > button.expanded {
    background-color: var(--cisep-verde) !important;
    color: var(--cisep-blanco) !important;
    border-color: var(--cisep-verde) !important;
  }

  /* Link expandido o hover — cielo en lugar de azul oscuro */
  .mobile-nav__content .main-menu__list > li > a.expanded,
  .mobile-nav__content .main-menu__list li a.expanded,
  .mobile-nav__content .main-menu__list > li > a:hover,
  .mobile-nav__content .main-menu__list > li > ul > li > a:hover {
    color: var(--cisep-cielo) !important;
  }

  /* Iconos circulares de contacto — cielo en lugar de azul, icono en carbón */
  .mobile-nav__contact li > i {
    background-color: var(--cisep-cielo) !important;
    color: var(--cisep-carbon) !important;
  }

  /* Hovers de redes sociales y enlaces de contacto */
  .mobile-nav__social a:hover,
  .mobile-nav__contact li a:hover {
    color: var(--cisep-cielo) !important;
  }
}

/* Search + Cart + CTA en una sola línea */
.main-header__one-bottom-right > div {
  display: inline-flex;
  align-items: center;
}

/* ============================================================
   MENU TOP — rediseño completo (Bemorex × CISEP) — DESKTOP only (≥1200px)
   - Hover/current sin parpadeo (sin gap entre item y dropdown)
   - Flecha indicadora ▼ visible en items con submenu
   - Animación fade simple (sin rotación 3D)
   - Card del submenu con sombra suave
   - Responsive desktop (≥1200px) — móvil usa mobile-nav del template
   IMPORTANTE: TODO el bloque va dentro de @media (min-width:1200px).
   El JS clona `.main-menu__list` dentro de `.mobile-nav__container`, así
   que cualquier regla global de `.main-menu__list` rompe el off-canvas
   (items horizontales, dropdown absolute, hover sin click, etc.).
   ============================================================ */
@media (min-width: 1200px) {
  /* Items principales — tipo y padding base */
  .main-menu__list {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 0;
    margin: 0;
  }
  .main-menu__list > li {
    position: relative;
    list-style: none;
    padding: 0 !important;
    margin: 0 !important;
  }
  .main-menu__list > li > a {
    color: var(--cisep-carbon);
    font-weight: 600;
    font-size: 16px !important;
    letter-spacing: -.005em;
    white-space: nowrap;
    position: relative;
    padding: 22px 14px !important;   /* misma altura que el sticky */
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    line-height: 1;
    transition: color .18s ease;
  }

  /* Flecha ▼ al LADO del texto del dropdown. Override del template que
     usaba "Font Awesome 5 Pro" → reemplazo por unicode con sans-serif. */
  .main-menu__list > li.dropdown > a {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    position: relative;
  }
  .main-menu__list > li.dropdown > a::after {
    content: "\25BE" !important;   /* ▾ chevron */
    font-family: -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
    font-size: 12px !important;
    font-weight: 700;
    line-height: 1 !important;
    display: inline-block !important;
    margin: 0 !important;
    padding: 0 !important;
    opacity: .75;
    color: currentColor !important;
    position: static !important;
    top: auto !important;
    right: auto !important;
    border: 0 !important;
    background: transparent !important;
    width: auto !important;
    height: auto !important;
    transform: rotate(0deg);
    transform-origin: center;
    transition: transform .2s ease, opacity .2s ease;
  }
  .main-menu__list > li.dropdown:hover > a::after,
  .main-menu__list > li.dropdown:focus-within > a::after {
    transform: rotate(180deg);
    opacity: 1;
  }

  /* Hover en item — color azul + underline animado JUSTO bajo el texto */
  .main-menu__list > li > a:hover {
    color: var(--cisep-azul);
  }
  .main-menu__list > li > a::before {
    content: "";
    position: absolute;
    left: 14px;
    right: 14px;
    bottom: 22px;   /* pegado al texto, no al borde inferior del padding */
    height: 3px;
    background: var(--cisep-azul);
    border-radius: 2px;
    transform: scaleX(0);
    transform-origin: center;
    transition: transform .22s ease;
  }
  .main-menu__list > li > a:hover::before {
    transform: scaleX(1);
  }

  /* Estado CURRENT — underline siempre visible + color azul */
  .main-menu__list > li.current > a,
  .main-menu__list > li.current-page > a {
    color: var(--cisep-azul);
  }
  .main-menu__list > li.current > a::before,
  .main-menu__list > li.current-page > a::before {
    transform: scaleX(1);
    background: var(--cisep-verde);
    height: 3px;
  }

  /* DROPDOWN — pegado al item, sin gap, sin translateY que mueva el panel */
  .main-menu__list > li.dropdown > ul,
  .main-menu__list > li > ul.shadow-box {
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    min-width: 260px;
    max-width: 320px;
    background: var(--cisep-blanco) !important;
    border-top: 3px solid var(--cisep-azul);
    border-radius: 0 0 12px 12px;
    box-shadow: 0 16px 40px rgba(31, 59, 127, .15), 0 2px 8px rgba(0,0,0,.04);
    padding: 8px 0 !important;
    list-style: none;
    margin: 0 !important;
    /* Sin transform — solo fade. Evita "salto" del panel. */
    opacity: 0;
    visibility: hidden;
    transform: none !important;
    transition: opacity .18s ease, visibility .18s ease !important;
    z-index: 1000;
    display: block !important;
    pointer-events: none;
  }
  .main-menu__list > li.dropdown:hover > ul,
  .main-menu__list > li.dropdown:focus-within > ul {
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    pointer-events: auto;
  }

  /* Items del submenu */
  .main-menu__list > li.dropdown > ul > li {
    list-style: none;
    padding: 0;
  }
  .main-menu__list > li.dropdown > ul > li > a {
    display: block;
    color: var(--cisep-carbon);
    padding: 10px 18px;
    font-size: 14.5px;
    font-weight: 500;
    text-decoration: none;
    white-space: normal;
    line-height: 1.4;
    border-left: 3px solid transparent;
    transition: background .15s ease, color .15s ease, border-color .15s ease, padding .15s ease;
  }
  .main-menu__list > li.dropdown > ul > li > a:hover,
  .main-menu__list > li.dropdown > ul > li > a:focus {
    background: var(--cisep-crema);
    color: var(--cisep-azul);
    border-left-color: var(--cisep-verde);
    padding-left: 22px;
  }

  /* Sticky header — misma altura que el inicial (no se hace más compacto) */
  .stricky-header.stricky-fixed .main-menu__list > li > a {
    padding: 22px 14px !important;
  }
  .stricky-header .main-menu__list > li > a::before {
    bottom: 16px;
  }
}
/* Logo: mismo tamaño en inicial y sticky (no shrink al scroll) */
.stricky-header.stricky-fixed .main-header__one-bottom-left .logo-box img {
  max-height: 56px !important;
  height: 56px;
}
.main-header__one-bottom-left .logo-box img {
  max-height: 56px !important;
  height: 56px;
}

/* Top bar del header — AZUL institucional */
.main-header__one-top {
  background-color: var(--cisep-azul-oscuro);
  color: var(--cisep-crema);
}
.main-header__one-top a {
  color: var(--cisep-crema);
}
.main-header__one-top a:hover {
  color: var(--cisep-cielo);
}

/* Funfact (Dashboard de Impacto) */
.funfact-one__count {
  color: var(--cisep-azul);
}

/* Odómeters — verde tierra para diferenciar del azul CTA */
.odometer-inside,
.odometer-digit {
  color: var(--cisep-verde);
}

/* Card "40+ Años de experiencia" del why-choose — pill destacado.
   El template tenía rotate(-90deg) en el inner → texto vertical ilegible.
   Lo enderezamos y le damos formato horizontal estilo badge azul.
   Posicionado en esquina inferior izquierda de la imagen principal. */
.why-choose-one__img-experince {
  background-color: var(--cisep-azul) !important;
  color: var(--cisep-blanco);
  border-radius: 14px;
  padding: 14px 18px !important;
  box-shadow: 0 8px 24px rgba(31, 59, 127, .28);
  width: auto !important;
  height: auto !important;
  min-width: 200px;
  max-width: 240px;
  min-height: auto !important;
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  position: absolute;
  left: 16px;
  bottom: 16px;
  z-index: 3;
}
.why-choose-one__img1 {
  position: relative;
}
.why-choose-one__img-experince-inner {
  transform: none !important;
  writing-mode: horizontal-tb !important;
  display: flex !important;
  align-items: center;
  gap: 14px;
  text-align: left;
}
.why-choose-one__img-experince h2,
.why-choose-one__img-experince h2 .odometer,
.why-choose-one__img-experince .count-text {
  color: var(--cisep-blanco) !important;
  font-size: 44px !important;
  font-weight: 800;
  line-height: 1;
  margin: 0 !important;
}
.why-choose-one__img-experince .odometer-inside,
.why-choose-one__img-experince .odometer-digit,
.why-choose-one__img-experince .odometer * {
  color: var(--cisep-blanco) !important;
}
.why-choose-one__img-experince p {
  color: var(--cisep-blanco) !important;
  font-size: 14px !important;
  font-weight: 600;
  letter-spacing: .02em;
  line-height: 1.2;
  margin: 0 !important;
  max-width: 110px;
}

/* Brand carousel (Aliados) — fix visibility */
.brand-one__single img {
  filter: grayscale(40%);
  transition: filter .3s ease;
  max-height: 80px;
  width: auto;
  object-fit: contain;
}
.brand-one__single:hover img {
  filter: grayscale(0%);
}
.brand-one__single {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100px;
}
.brand-one__single-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}
.brand-one__single-inner img + img {
  display: none; /* Owl-carousel duplica; ocultamos la 2ª copia */
}
/* Fallback si owl-carousel no inicializa: grid flex con todos visible */
.brand-one__carousel:not(.owl-loaded) {
  display: flex !important;
  flex-wrap: wrap;
  justify-content: space-around;
  align-items: center;
  gap: 32px;
}
.brand-one__carousel:not(.owl-loaded) .brand-one__single {
  flex: 0 1 calc(20% - 32px);
  min-width: 120px;
}

/* ============================================================
   Slider hero — el template renderiza la imagen 2 veces (bg + <img>).
   La <img> queda más pequeña encima del bg → se ve duplicada y desfasada.
   Solución: ocultar el <img> del .main-slider-one__single-img y dejar
   solo el .main-slider-one__bg (background-image) que cubre 100%.
   ============================================================ */
.main-slider-one__single-img,
.main-slider-one__single-img-bg {
  display: none !important;
}
.main-slider-one__bg {
  position: absolute !important;
  inset: 0 !important;
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
}
.main-slider-one__bg::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(31, 59, 127, .72), rgba(107, 82, 54, .55));
  z-index: 1;
}
.main-slider-one__single {
  position: relative;
  min-height: 720px;
  overflow: hidden;
}
.main-slider-one__content {
  position: relative;
  z-index: 2;
  text-shadow: 0 2px 12px rgba(0,0,0,.4);
}
/* TODO el texto del slider hero — blanco con sombra para legibilidad sobre fotos */
.main-slider-one__single h1,
.main-slider-one__single h2,
.main-slider-one__single h3,
.main-slider-one__title h1,
.main-slider-one__title h2,
.main-slider-one__title h3,
.main-slider-one__text p {
  color: #fff !important;
  text-shadow: 0 2px 14px rgba(0, 0, 0, .55);
  font-weight: 800;
  letter-spacing: -.015em;
}
.main-slider-one__title h1,
.main-slider-one__title h2 {
  font-size: clamp(38px, 5.2vw, 72px);
  line-height: 1.05;
  margin-bottom: 16px;
}
.main-slider-one__sub-title p {
  color: var(--cisep-cielo) !important;
  font-weight: 700;
  text-shadow: 0 2px 8px rgba(0, 0, 0, .45);
  font-size: 18px;
  letter-spacing: .02em;
}
/* Descripción dentro del slider — fondo crema semi y texto carbón legible */
.main-slider-one__text {
  background-color: rgba(255, 255, 255, .92);
  padding: 14px 18px;
  border-radius: 10px;
  display: inline-block;
  max-width: 540px;
  margin-bottom: 18px;
}
.main-slider-one__text p {
  color: var(--cisep-carbon) !important;
  text-shadow: none !important;
  font-weight: 500 !important;
  font-size: 15.5px;
  line-height: 1.55;
}
/* Odometers dentro del slider — blancos con sombra (overlay sobre foto) */
.main-slider-one .odometer,
.main-slider-one .odometer-inside,
.main-slider-one .odometer-digit,
.main-slider-one [class*="count"] {
  color: #fff !important;
  text-shadow: 0 2px 12px rgba(0, 0, 0, .5);
}

/* Footer — carbón profundo */
.site-footer--one {
  background-color: var(--cisep-carbon);
}

/* Sliding text marquee — verde tierra */
.sliding-text-one__single h2,
.sliding-text-one__single h3,
.sliding-text-one__title.style2 {
  color: var(--cisep-tierra);
}
.sliding-text-one__title {
  color: var(--cisep-azul);
}

/* ============================================================
   Fix barras de progreso (.count-text dentro de barras tierra).
   El template usaba bg tierra + texto tierra → invisible.
   Hacemos texto blanco bold sobre la barra. */
.progress-levels-box .count-text,
.count-bar .count-text,
.count-box .count-text {
  color: var(--cisep-blanco) !important;
  font-weight: 700;
  text-shadow: 0 1px 2px rgba(0,0,0,.2);
}
/* Barras de progreso — pista crema, fill azul institucional */
.count-bar {
  background-color: var(--cisep-crema) !important;
}
.count-bar .count-bar__inner,
.count-bar .bar-inner {
  background-color: var(--cisep-azul) !important;
}

/* ============================================================
   Choques de paleta — overrides defensivos para evitar texto
   con mismo color que su background. */
[class*="__btn"], .thm-btn, button {
  /* Si un botón no tiene color explícito, default a blanco para no
     heredar el color del padre (que podría ser igual al bg del btn). */
}
/* Items donde el template aplica color: tierra al texto y bg tierra al wrapper */
.about-progress-bar .progress-level-title,
.about-progress-bar .progress-text {
  color: var(--cisep-carbon) !important;
}

/* Cause/Project cards — bordes suaves */
.cause-one__single,
.blog-one__single {
  border-radius: var(--donatix-bdr-radius);
  overflow: hidden;
}

/* Iconos circulares (services-one__single-icon) — fondo azul */
.services-one__single-icon {
  background-color: var(--cisep-azul);
  color: var(--cisep-blanco);
}
.services-one__single:hover .services-one__single-icon {
  background-color: var(--cisep-verde);
}

/* ============================================================
   Fix universal: cards con hover-state que cambian bg a azul/oscuro
   debían cambiar TODO el texto a blanco. El template solo cambiaba
   h2>a (con anchor) → si el h2 era texto directo (sin <a>), quedaba
   carbón sobre azul = invisible.
   ============================================================ */
.services-one__single:hover,
.services-one__single:hover h1,
.services-one__single:hover h2,
.services-one__single:hover h3,
.services-one__single:hover h4,
.services-one__single:hover h5,
.services-one__single:hover h6,
.services-one__single:hover p,
.services-one__single:hover .text-box,
.services-one__single:hover .text-box * {
  color: var(--cisep-blanco) !important;
}
.services-one__single:hover .services-one__single-icon,
.services-one__single:hover .services-one__single-icon span,
.services-one__single:hover .services-one__single-icon i,
.services-one__single:hover .services-one__single-icon::before {
  color: var(--cisep-blanco) !important;
}

/* Mismo patrón en otras cards del template — forzamos texto blanco en hover
   cuando el bg cambia a azul/verde. */
.cause-one__single:hover h2,
.cause-one__single:hover h3,
.cause-one__single:hover p,
.feature-one__single:hover h2,
.feature-one__single:hover h3,
.feature-one__single:hover p,
.process-one__single:hover h2,
.process-one__single:hover h3,
.process-one__single:hover p,
.about-one__progress:hover h2,
.about-one__progress:hover p {
  color: inherit;  /* Mantienen su color normal — no se sobrescriben */
}

/* Cards "team" — el bg del content es BLANCO, así que el texto debe ser
   carbón (NO blanco). Revertimos cualquier rule global de hover-white. */
.team-one__single-content,
.team-one__single:hover .team-one__single-content {
  background: var(--cisep-blanco) !important;
}
.team-one__single .text-box h2,
.team-one__single .text-box h2 a,
.team-one__single:hover .text-box h2,
.team-one__single:hover .text-box h2 a {
  color: var(--cisep-carbon) !important;
}
.team-one__single .text-box p,
.team-one__single:hover .text-box p {
  color: var(--cisep-gris) !important;
}
.team-one__single .text-box h2 a:hover {
  color: var(--cisep-azul) !important;
}

/* ============================================================
   UNIFORMIDAD DE CARDS — todas las cards de la misma row deben
   tener la MISMA altura, sin importar el contenido. Bootstrap 5
   usa flex en .row pero el .col no estira al hijo. Fix:
   ============================================================ */
.row > [class*="col-"] {
  display: flex;
  flex-direction: column;
}
.row > [class*="col-"] > .services-one__single,
.row > [class*="col-"] > .cause-one__single,
.row > [class*="col-"] > .blog-one__single,
.row > [class*="col-"] > .team-one__single,
.row > [class*="col-"] > .event-one__single,
.row > [class*="col-"] > .feature-one__single,
.row > [class*="col-"] > .process-one__single,
.row > [class*="col-"] > [class*="__single"],
.row > [class*="col-"] > [class*="__card"] {
  flex: 1 1 auto;
  height: 100%;
  display: flex;
  flex-direction: column;
  width: 100%;
}
/* Garantizar que el contenido de la card crezca uniformemente */
.row > [class*="col-"] > [class*="__single"] > .content,
.row > [class*="col-"] > [class*="__single"] > [class*="__content"],
.row > [class*="col-"] > [class*="__single"] > .text-box {
  flex: 1 1 auto;
}

/* Iconos en about-two */
.about-two__content-text2-single .icon-box {
  background-color: var(--cisep-azul);
  color: var(--cisep-blanco);
}

/* Iconos cuadrados en cards contact (Visítanos/Llámanos/Escríbenos) — azul */
.contact-page-info__single .icon-box {
  background-color: var(--cisep-azul) !important;
  color: var(--cisep-blanco) !important;
}
.contact-page-info__single:hover .icon-box {
  background-color: var(--cisep-azul-oscuro) !important;
}

/* Iconos circulares del footer (Llámanos / Escríbenos / Visítanos)
   v3: fondo blanco semitransparente con icono verde — destacan sobre el
   bg azul/carbon del footer. */
.site-footer__top-contact-info-single .icon-box {
  background-color: var(--cisep-blanco) !important;
  color: var(--cisep-verde) !important;
  border: 2px solid var(--cisep-blanco);
  box-shadow: 0 4px 12px rgba(0, 0, 0, .15);
}
.site-footer__top-contact-info-single .icon-box span,
.site-footer__top-contact-info-single .icon-box i {
  color: var(--cisep-verde) !important;
}
.site-footer__top-contact-info-single:hover .icon-box {
  background-color: var(--cisep-verde) !important;
  border-color: var(--cisep-verde);
}
.site-footer__top-contact-info-single:hover .icon-box span,
.site-footer__top-contact-info-single:hover .icon-box i {
  color: var(--cisep-blanco) !important;
}

/* Iconos del footer-widget inferior (lista de contacto en columnas) */
.site-footer .icon-box {
  color: var(--cisep-blanco);
}

/* Scroll-to-top "Volver arriba" — colores CISEP */
.scroll-to-top,
.scroll-to-top:hover {
  color: var(--cisep-blanco) !important;
}
.scroll-to-top__wrapper {
  background-color: var(--cisep-azul) !important;
}
.scroll-to-top__inner {
  background-color: var(--cisep-verde) !important;
}
.scroll-to-top__text {
  color: var(--cisep-azul) !important;
  font-weight: 600;
  letter-spacing: .02em;
}
.scroll-to-top:hover .scroll-to-top__text {
  color: var(--cisep-verde-oscuro) !important;
}

/* ============================================================
   Page header (hero interno) — compacto, no toma toda la pantalla.
   v3: reducido de 320px → 220px porque el contenido es solo título +
   breadcrumb. Mantiene el impacto visual sin desperdiciar viewport.
   ============================================================ */
/* Page-header: el template tenía padding 170+172 = 340px Y las shapes
   en position:relative ocupando 527px en el flow → hero de 800px+.
   Fix: padding 60+60 + shapes a absolute (decorativas, no afectan altura). */
.page-header {
  padding-top: 60px !important;
  padding-bottom: 60px !important;
}
.page-header > .shape1,
.page-header > .shape2,
.page-header .shape1,
.page-header .shape2 {
  position: absolute !important;
  pointer-events: none;
  z-index: 1;
}
.page-header > .shape1 {
  left: -25px;
  top: 50%;
  transform: translateY(-50%);
  max-width: 220px;
}
.page-header > .shape2 {
  right: -25px;
  bottom: 0;
  max-width: 180px;
}
.page-header__inner {
  text-align: center !important;
  position: relative;
  z-index: 2;
}
.page-header__inner h1,
.page-header__inner h2,
.page-header__inner .page-header__title {
  text-align: center !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}
.page-header__inner .thm-breadcrumb {
  display: flex !important;
  justify-content: center !important;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  padding: 0 !important;
  margin: 0 !important;
  list-style: none;
}
.page-header__inner .thm-breadcrumb li {
  display: inline-flex;
  align-items: center;
  float: none !important;
}
.page-header__bg {
  position: absolute;
  inset: 0;
  background-position: center center;
  background-size: cover;
}
.page-header__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(31, 59, 127, .88), rgba(31, 59, 127, .72) 50%, rgba(107, 82, 54, .82));
  z-index: 1;
}
.page-header > .container,
.page-header > .shape1,
.page-header > .shape2 {
  position: relative;
  z-index: 2;
}

/* Título del page-header — BLANCO sobre overlay azul.
   Override agresivo del h1..h6 carbón global. v3: más compacto. */
.page-header h1,
.page-header h2,
.page-header .page-header__title,
.page-header__inner h2 {
  color: var(--cisep-blanco) !important;
  font-size: clamp(28px, 3.3vw, 44px);
  font-weight: 800;
  letter-spacing: -.015em;
  text-shadow: 0 2px 12px rgba(0, 0, 0, .35);
  margin-bottom: 10px;
  line-height: 1.1;
}

/* Breadcrumb del header — texto crema, link cielo en hover */
.thm-breadcrumb,
.thm-breadcrumb li,
.thm-breadcrumb a,
.thm-breadcrumb li + li::before {
  color: var(--cisep-crema) !important;
  font-weight: 500;
}
.thm-breadcrumb a:hover {
  color: var(--cisep-cielo) !important;
}

/* Logo del header — el logo CISEP ya es circular, no necesita fondo blanco */
.main-header__one-bottom-left .logo-box {
  display: inline-block;
  padding: 0;
}
.main-header__one-bottom-left .logo-box .cisep-logo-link {
  display: inline-block;
  line-height: 0;
}
.main-header__one-bottom-left .logo-box img,
.stricky-header.stricky-fixed .main-header__one-bottom-left .logo-box img {
  max-height: 56px !important;
  height: 56px;
  width: auto;
}

/* Lo mismo para el footer */
.footer-widget__logo img {
  max-height: 110px !important;
  height: 110px !important;
  width: auto !important;
  background: transparent !important;
  padding: 0 !important;
  border-radius: 0 !important;
}

/* Mobile-nav y sidebar - logo más prominente */
.mobile-nav__content .logo-box img,
.sidebar-info-contents .logo img {
  max-width: 160px;
  height: auto;
  background: transparent !important;
  padding: 0 !important;
}

/* CTA destacado (CTA One — banner) — bg azul oscuro, todo el contenido en blanco
   Antes: h4/tagline/párrafo heredaban carbón → casi invisibles sobre azul. */
.cta-one {
  background: var(--cisep-azul-oscuro);
}
.cta-one,
.cta-one *,
.cta-one h1, .cta-one h2, .cta-one h3, .cta-one h4, .cta-one h5, .cta-one h6,
.cta-one p,
.cta-one .sec-title__tagline h4,
.cta-one .sec-title__title,
.cta-one .cta-one__round-text,
.cta-one .cta-one__round-text-inner {
  color: var(--cisep-blanco) !important;
}
.cta-one .sec-title__tagline h4 {
  color: var(--cisep-verde-claro) !important;
  font-weight: 700;
  letter-spacing: .04em;
}
.cta-one .left-line,
.cta-one .right-line {
  background-color: var(--cisep-verde-claro) !important;
}
/* El botón de CTA-one debe ser visible: verde brillante sobre azul */
.cta-one .thm-btn {
  background-color: var(--cisep-verde) !important;
  color: var(--cisep-blanco) !important;
  box-shadow: 0 6px 20px rgba(82, 176, 51, .35);
}
.cta-one .thm-btn:hover {
  background-color: var(--cisep-verde-oscuro) !important;
}

/* Botones de "thm-btn" en footer y CTA dark — VERDE tierra (paleta del logo) */
section[style*="background:var(--cisep-primary)"] .thm-btn,
.cta-one .thm-btn,
.site-footer .thm-btn {
  background-color: var(--cisep-verde) !important;
  color: var(--cisep-blanco) !important;
}
section[style*="background:var(--cisep-primary)"] .thm-btn:hover,
.cta-one .thm-btn:hover,
.site-footer .thm-btn:hover {
  background-color: var(--cisep-verde-oscuro) !important;
  color: var(--cisep-blanco) !important;
}

/* Tabs activos */
.tab-btn-item.active-btn h3,
.tab-btn-item:hover h3 {
  color: var(--cisep-azul);
}

/* Accordion / FAQ */
.accrodion.active .accrodion-title h4 {
  color: var(--cisep-azul);
}

/* ============================================================
   Fix wow.js — accesibilidad si JS no anima o queda en estado intermedio.
   wow.js a veces marca .animated sin completar la animación (especialmente
   con data-wow-delay), dejando cards con visibility:hidden permanente.
   ============================================================ */
.wow {
  visibility: visible !important;
}
.wow:not(.animated) {
  animation-name: none !important;
}

/* Desactivar SplitText animation que dejaba títulos truncados al render inicial */
.title-animation,
.title-animation * {
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
}
.title-animation .split-line {
  overflow: visible !important;
}

.services-one__single {
  min-height: 200px;
}

/* ============================================================
   v4 — Fixes globales de tipografía y accesibilidad (audit subagente)
   ============================================================ */

/* Texto chico legible — mínimo 14.5px equivalente */
:root {
  --cisep-text-min: 0.9375rem;   /* 15px */
}

/* Eliminar opacities bajas en texto pequeño (queda ilegible). Usar gris formal */
p em,
.testimonial-one__single em,
.testimonial-one__single p em,
.cause-one__single em,
.event-one__single em,
.funfact-one em {
  font-size: 0.9rem !important;
  opacity: 1 !important;
  color: var(--cisep-gris);
  font-style: normal;
}

/* Notas "Pendiente cliente" — pill amarillo visible (en lugar de opacity .6) */
.contact-page__form p[style*="opacity"],
[style*="font-size:.85rem"][style*="opacity:.7"],
[style*="font-size:.85rem"][style*="opacity:.75"] {
  opacity: 1 !important;
  font-size: 0.92rem !important;
}

/* Botones — tap target 44px mínimo (WCAG 2.5.5) */
.thm-btn,
a.thm-btn,
button.thm-btn {
  min-height: 44px;
  padding: 12px 24px !important;
  font-size: 0.95rem !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 6px;
  line-height: 1.2;
}
.thm-btn[style*="padding:8px"],
.thm-btn[style*="padding: 8px"] {
  padding: 12px 22px !important;
}

/* Badges de categoría — más legibles */
[style*="font-size:.72rem"][style*="text-transform:uppercase"] {
  font-size: 0.78rem !important;
  padding-top: 5px !important;
  padding-bottom: 5px !important;
  padding-left: 12px !important;
  padding-right: 12px !important;
}

/* Metadata gris — subir a 0.9rem y mejor contraste */
[style*="font-size:.85rem"][style*="cisep-gris"],
.blog-one__single-content .meta-info p {
  font-size: 0.9rem !important;
  color: var(--cisep-carbon) !important;
  opacity: 0.78;
}

/* Cards services dentro de about/structure — texto p más generoso */
.services-one__single p {
  font-size: 0.95rem !important;
  opacity: 1 !important;
  line-height: 1.55;
}
.services-one__single h2 {
  font-size: 1.3rem !important;
}

/* Form de contacto — texto info más legible */
.contact-page__form p {
  font-size: 0.92rem !important;
  opacity: 1 !important;
  color: var(--cisep-gris);
}
.contact-page__form p a {
  color: var(--cisep-azul) !important;
  text-decoration: underline !important;
  font-weight: 600;
}

/* Links de teléfono/email en cards de contacto deben verse clickeables */
.contact-page-info__single a,
.site-footer__top-contact-info-single a {
  color: var(--cisep-azul);
  text-decoration: none;
  border-bottom: 1px dashed currentColor;
  padding-bottom: 1px;
}
.contact-page-info__single a:hover,
.site-footer__top-contact-info-single a:hover {
  color: var(--cisep-verde-oscuro);
  border-bottom-style: solid;
}

/* Mapa contacto — altura razonable */
.google-map-one__map,
.contact-page__map,
iframe[src*="openstreetmap"],
iframe[src*="google.com/maps"] {
  max-height: 380px;
  border-radius: 12px;
}

/* Slider hero — text-box con max-width consistente */
.main-slider-one__text {
  max-width: 540px !important;
}

/* Card destacado "Transformador" en donate — usar outline para no romper grid */
.cause-one__single[style*="border:3px"],
.cause-one__single[style*="border: 3px"],
.services-one__single[style*="border:3px"],
.services-one__single[style*="border: 3px"] {
  border: 0 !important;
  outline: 3px solid var(--cisep-azul);
  outline-offset: -3px;
}

/* CTA section — heading siempre con clamp responsive */
.cta-one h1,
.cta-one h2,
.cta-one h3 {
  font-size: clamp(24px, 3vw, 38px) !important;
  line-height: 1.2;
}

/* ============================================================
   Fix lazy-loading en cards team — el container sin altura definida
   colapsaba a 0, el navegador no detectaba viewport y nunca se
   disparaba el lazy. Fuerza aspect-ratio 300/380 (= proporción
   template) y object-fit cover en la <img>.
   ============================================================ */
.team-one .team-one__single-img,
.team-one--two .team-one__single-img {
  position: relative;
  overflow: hidden;
  aspect-ratio: 300 / 380;
  background-color: var(--cisep-cielo);
}
.team-one .team-one__single-img > img,
.team-one--two .team-one__single-img > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Mismo fix para cards de blog/cause/event que tengan lazy loading
   con altura colapsada */
.blog-one__single-img,
.cause-one__single-img,
.event-one__single-img {
  position: relative;
  overflow: hidden;
  background-color: var(--cisep-cielo);
}
.blog-one__single-img > img,
.cause-one__single-img > img,
.event-one__single-img > img {
  width: 100%;
  height: auto;
  display: block;
  min-height: 200px;
  object-fit: cover;
}

[id]:target {
  scroll-margin-top: 120px;
}

/* Focus visible — accesibilidad WCAG */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 3px solid var(--cisep-cielo);
  outline-offset: 2px;
}

/* ============================================================
   Aliases legacy (compatibilidad con código previo CISEP)
   ============================================================ */
:root {
  --cisep-base: var(--cisep-azul);
  --cisep-base-strong: var(--cisep-azul-oscuro);
  --cisep-base-rgb: var(--cisep-azul-rgb);
  --cisep-primary: var(--cisep-carbon);
  --cisep-primary-rgb: var(--cisep-carbon-rgb);
  --cisep-secondary: var(--cisep-tierra);
  --cisep-secondary-rgb: var(--cisep-tierra-rgb);
  --cisep-accent: var(--cisep-verde);
  --cisep-accent-rgb: var(--cisep-verde-rgb);
  --cisep-mineral: var(--cisep-gris);
  --cisep-earth: var(--cisep-tierra-oscura);
  --cisep-cream: var(--cisep-crema);
  --cisep-white: var(--cisep-blanco);
  --cisep-black: var(--cisep-carbon);
  --cisep-gray: var(--cisep-gris);
  --cisep-deep: var(--cisep-carbon);
}