:root {
  /* Paleta principal */
  --primary: #00549A;             /* Azul oscuro */
  --primary-light: #3380C2;       /* Azul más claro */
  --primary-dark: #003F73;        /* Azul profundo */

  --secondary: #118ACB;           /* Azul claro vibrante */
  --secondary-light: #5EB6E3;     /* Azul celeste */
  --secondary-dark: #0B6BA0;      /* Azul cielo más oscuro */

  --secondary-accent: #8DC63F;    /* Verde lima */
  --accent-light: #BCE379;        /* Verde claro */
  --accent-dark: #6FA32C;         /* Verde oliva oscuro */

  /* Neutros */
  --text-primary: #212121;        /* Gris oscuro - texto principal */
  --text-secondary: #757575;      /* Gris medio - texto secundario */
  --text-light: #FFFFFF;          /* Texto blanco sobre fondos oscuros */

  --bg-light: #F5F5F5;            /* Fondo claro general */
  --bg-dark: #121212;             /* Fondo oscuro general */
  --bg-card: #FFFFFF;             /* Fondo de tarjetas o secciones */

  --border: #E0E0E0;              /* Bordes suaves */
  --divider: #BDBDBD;             /* Separadores */

  /* Estados */
  --success: #4CAF50;
  --warning: #FFC107;
  --error: #F44336;
  --info: #2196F3;
}
/* HEADER */
#sp-header {
    /* background: var(--bg-light) !important; */
    background: linear-gradient(
    135deg,
    rgba(245, 245, 245, 0.9),  /* bg-light con transparencia */
    rgba(245, 245, 245, 1),  /* bg-light con transparencia */
    rgba(0, 84, 154, 0.8),  /* bg-light con transparencia */
 rgba(0, 63, 115, 1) ,      /* bg-dark con transparencia */
    rgba(0, 63, 115, 1)       /* bg-dark con transparencia */
    ) !important;
    box-shadow: 0 0 0 0 rgba(0, 0, 0, 0) !important;
}

/* BOTON CTA */
.sppb-btn-primary {
    color: var(--text-light)!important;
    background-color:var(--primary) !important;
    border-color:var(--primary-light) !important;
}
.sppb-sp-slider-button span.sp-slider-btn-text {
    color: var(--text-light)!important;
    background: var(--primary) !important;
    border-color:var(--primary-light) !important;

}
/* MENU */
.sp-megamenu-parent>li.active>a, .sp-megamenu-parent>li.active:hover>a {
    color: var(--secondary-accent) !important;
}
.sp-megamenu-parent>li>a {
   
    text-transform: uppercase !important;
}
.sp-megamenu-parent>li:hover>a {
    color: var(--secondary-accent) !important;
}
.logo-image {
    height: 56px !important;
}

.default-slider-text p {
    background-color: rgba(0, 0, 0, 0.4) !important; 
    padding: 10px !important;
    border-radius: 10px !important;
    color: white !important;
    }
/*  @media (max-width: 768px) {
    .sp-background {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
    }
} */
.sp-page-title:before {
    background: linear-gradient(270deg, rgba(0, 63, 115, 0.1) 0%, #0B6BA0 100%)!important;
}


#sppb-addon-1689158647181 .sppb-addon-header .sppb-addon-title {
    -webkit-text-fill-color: inherit !important;
}

/* MISION VISION Y VALORES */
.card {
    font-family: Merriweather Sans !important;
    font-weight: 600 !important;
    font-size: 16px !important;
    font-weight: 200 !important;
    line-height: 20px !important;
    background: white !important;
    border-radius: 16px !important;
    box-shadow: 0 10px 20px rgba(0, 63, 115, 0.1) !important;
    padding: 2rem !important;
    transition: transform 0.2s ease-in-out !important;
    max-width: 600px !important;
    margin: 2rem auto !important;
  }
  
  .card:hover {
    transform: translateY(-5px) !important;
  }
  
  .card h2 {
    color: var(--primary-dark) !important;
    font-size: 1.8rem !important;
    font-weight: 600 !important;
    margin-bottom: 1rem !important;
  }
  
  .card p {
    font-size: 1.0rem !important;
    line-height: 1.6 !important;
    color: #333 !important;
  }
  
  .contact-row {
    background:var(--primary-dark);
    color: white;
    text-align: center;
    padding: 1.5rem 1rem;
    font-size: 1.3rem;
    font-weight: bold;
    letter-spacing: 0.5px;
    box-shadow: 0 -3px 10px rgba(0, 0, 0, 0.1);
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.contact-row svg {
    width: 24px;
    height: 24px;
    fill: white;
}

.contact-row span {
    background: var(--accent-light);
    color: var(--primary-dark);
    padding: 0.4rem 1rem;
    border-radius: 8px;
    font-weight: bold;
}