/* Fonts
@font-face {
  font-family: 'NunitoRegular';
  src: url('https://cat-dev.directus.app/assets/6b39158a-b92c-45e7-9c88-88f48b518bb3.ttf') format('ttf');
}
@font-face {
  font-family: 'NunitoBold';
  src: url('https://cat-dev.directus.app/assets/93338199-dc3b-4cf2-bde4-cb2fcd9a0d5b.ttf') format('ttf');
}
/* /Fonts */

body {
  font-family:'Nunito-Regular','Arial', sans-serif;
  overflow-x: hidden;
}
h1, h2, h3, h4, h5, h6, strong {
  font-family: 'Nunito-Bold','Arial', sans-serif;
}
h1, h2, h3, h4, h5, h6, p {
  margin-block-start: 0em;
  margin-block-end: 0em;
}
    

/* Settings */
body {
    margin: 0;
}
body * {
    transition: background-color 0.3s ease;
    box-sizing: border-box;
}
ul {
  margin: 0;
  padding-inline-start: 0px;
}
.just_desk {display: block}
.just_mob {display: none}
/* /Settings */

/* Variables */
:root {
    --Blanco: #fff;
    --GrisClaro: #F4F7FA;
    --GrisMedioClaro: #ecf5fe;
    --GrisMedio: #B3CAE0;
    --GrisOscuro: #5B809B;
    --GrisMasOscuro: #334654;
    --Petroleo: #122E43;
    --PetroleoOscuro: #0B1D29;
    --Naranjo: #FD5B00;
    --CelesteClaro: #F6F9FC;
    --Celeste: #e7f1ff;
    --CelesteOscuro: #E3EDF7;
    --AzulClaro: #18a0fb;
    --Azul: #126eff;

    --altoNav: 50px;
    --maxWidth: 1280px;
}

/*
html {
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root {
    --Blanco: #122E43;
    --GrisClaro: #F4F7FA;
    --GrisOscuro: #5B809B;
    --Petroleo: #0B1D29;
    --PetroleoOscuro: #0B1D29;
}
}
*/
/* /Variables */

/* Solo para dekstop */
@media (min-width: 930px) {
  .no_scroll {
    overflow-y:scroll !important;
  }
}
/* Solo para desktop */

/* Switch darkmode */
.switch {
    position: absolute;
    width: 60px;
    height: 34px;
    right: 10px;
    top: 10px;
    scale: 70%;
}
.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}
.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  -webkit-transition: .4s;
  transition: .4s;
}
.slider:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: var(--Blanco);
  -webkit-transition: .4s;
  transition: .4s;
}
.dark_mode .slider:before {
  background-color: var(--GrisOscuro);
}
input:checked + .slider {
  background-color: var(--PetroleoOscuro);
}
input:focus + .slider {
  box-shadow: 0 0 1px var(--PetroleoOscuro);
}
input:checked + .slider:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}
.slider.round {
  border-radius: 34px;
}
.slider.round:before {
  border-radius: 50%;
}
@media (max-width: 930px) {
    .switch {
        right: 100px;
    }
}
/* /Switch darkmode */
.ctas {
  display: flex;
  gap: 20px;
}
.cta_primario,
.cta_secundario {
  font-family: 'Nunito-Bold','Arial', sans-serif;
  transition: all 400ms;
}

.cta_primario {
  pointer-events: all;
  width: fit-content;
  color: #fff;
  text-align: center;
  font-size: 1.125rem;
  border-radius: 48px;
  border: 1px solid #EC4A04;
  background: #FD5B00; 
  text-decoration: none;
  padding: 13px 40px;
  display: block;
  margin-top: 20px;
  position: relative;
  transition: all 400ms;
}
.cta_primario:hover {
  background:  #d04b00;
}
.cta_secundario {
  pointer-events: all;
  width: fit-content;
  color: #122E43;
  text-align: center;
  font-size: 18px;
  border-radius: 8px;
  border: 1px solid #B3CAE0;
  background: linear-gradient(180deg, #F6F9FC 0%, #E3EDF7 100%);
  box-shadow: 0px -2px 0px 0px #FFF inset;
  text-decoration: none;
  padding: 16px 45px 16px 26px;
  display: block;
  margin-top: 20px;
  position: relative;
}
.cta_secundario:hover {
  border: 1px solid #B3CAE0;
  background: linear-gradient(0deg, #B3CAE0 0%, #D0E1F1 100%);
  box-shadow: 0px -2px 0px 0px #E3EDF7 inset;
}

.tit_section {
    font-size: 2rem;
    text-align: center;
    font-family: 'Nunito-Bold','Arial', sans-serif;
    color: var(--Petroleo);
    max-width: 590px;
    margin: 30px auto;
}

.grad_top {
  height: 8px;
  background: linear-gradient(270deg, #FD8300 0.05%, #F10001 37%, #F10092 65.11%, #056BB1 99.97%);
}
.head_top {
  background-color: var(--PetroleoOscuro);
}
body {
   background-color: var(--Blanco);
   color: var(--Petroleo);
}
.dark_mode body {
   background-color: var(--PetroleoOscuro);
   color: var(--Blanco);
}
section {
  max-width: var(--maxWidth);
  margin: auto;
  padding: 20px 20px 60px 20px;
}
.main_nav {
    min-height: var(--altoNav);
    background-color: var(--Blanco);
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    display: flex;
    flex-direction: column-reverse;
    align-items: flex-end;
}
.dark_mode .main_nav {
    background-color: var(--Petroleo);
}
.main_nav ul {
    list-style: none;
    margin: 0px auto;
    padding: 0;
    display: flex; /* Para organizar los elementos horizontalmente */
    justify-content: space-evenly;
    flex-wrap: wrap; /* Permite que los elementos se envuelvan en pantallas pequeñas */
    width: 100%;
    max-width: var(--maxWidth);
}
.main_nav li {
    position: relative; /* Necesario para posicionar los sub-menús */
}
.main_nav a {
    display: block;
    padding: 15px 20px;
    color: var(--Petroleo);
    text-decoration: none;
    transition: background-color 0.3s ease;
}
.dark_mode .main_nav a {
    color: var(--Blanco);
}
.main_nav a:hover,
.main_nav a:focus {
    background-color: var(--GrisClaro);
    outline: none; /* Elimina el contorno predeterminado en algunos navegadores */
}
.dark_mode .main_nav a:hover,
.dark_mode .main_nav a:focus {
    background-color: var(--PetroleoOscuro);
}
/* Estilos para los sub-menús */
.main_nav ul ul {
    display: none; /* Oculta los sub-menús por defecto en desktop */
    position: absolute;
    top: 100%;
    left: 0;
    background-color:var(--Blanco);
    min-width: max-content;
    z-index: 10; /* Asegura que el sub-menú esté por encima de otros elementos */
    flex-direction: column; /* Organiza los sub-elementos verticalmente */
    box-shadow: 0 15px 15px rgba(0,0,0,0.1);
    border-radius: 0px 0px 6px 6px;
    overflow: hidden;
}
.main_nav li:hover > ul,
.main_nav li:focus-within > ul { /* Muestra el sub-menú al pasar el ratón o enfocar con teclado */
    display: flex;
}
.dark_mode .main_nav ul ul {
    background-color:var(--Petroleo);
}
.main_nav ul ul li {
    width: 100%; /* Asegura que los sub-elementos ocupen todo el ancho */
}
.main_nav ul ul a {
    padding: 10px 20px;
    color: var(--Petroleo);
}
.main_nav ul ul a:hover,
.main_nav ul ul a:focus {
    background-color: var(--GrisClaro);
}

/* Indicador visual para sub-menús */
.has-submenu > a::after {
    content: ' ';
    margin-left: 9px;
    transition: transform 0.3s ease;
    background-image: url('https://staticresourcesfiles.blob.core.windows.net/content/wpub/static/17737071750721456-9206772885715284-arrow-back-16-3.svg');
    width: 16px;
    height: 12px;
    background-size: cover;
    display: inline-block;
}

/* Estilos para el botón de menú móvil (si se implementa) */
.menu_toggle {
    display: none; /* Oculto por defecto en escritorio */
    color: white;
    border: none;
    padding: 10px 20px;
    font-size: 1.2em;
    cursor: pointer;
    width: 78px;
    background-color: var(--Blanco);
    position: absolute;
    top: 8px;
    right: 0;
}
.dark_mode .menu_toggle {
    background-color: var(--Petroleo);
}
header {
    position: fixed;
    z-index: 99;
    top: 0;
    right: 0;
    left: 0;
    min-height: 73px;
    background-color: var(--GrisClaro);
    transition: all 400ms;
}
.dark_mode header {
    background-color: var(--Petroleo);
}
.header_fix_bottom {
  bottom: 0%;
}
body {
    padding-top: 156px;
}
#primary-menu {
    transition: all 400ms;
}
#primary-menu > li > a {
  font-size: 0.9rem;
}
.no_scroll {
    overflow-y: hidden !important;
}
.si_scroll {
    overflow-y: scroll;
}

/* Icon 1 */

#nav-icon3 {
      width: 38px;
    height: 45px;
    position: relative;
    margin: 0px 0px 0px auto;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: .5s ease-in-out;
  -moz-transition: .5s ease-in-out;
  -o-transition: .5s ease-in-out;
  transition: .5s ease-in-out;
  cursor: pointer;

  scale: 80%;
}

#nav-icon3 span {
  display: block;
  position: absolute;
  height: 4px;
  width: 100%;
  background: var(--Petroleo);
  border-radius: 9px;
  opacity: 1;
  left: 0;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: .25s ease-in-out;
  -moz-transition: .25s ease-in-out;
  -o-transition: .25s ease-in-out;
  transition: .25s ease-in-out;
}
.dark_mode #nav-icon3 span {
  background: var(--Blanco);
}

#nav-icon3 span:nth-child(1) {
  top: 8px;
}

#nav-icon3 span:nth-child(2),#nav-icon3 span:nth-child(3) {
  top: 20px;
}

#nav-icon3 span:nth-child(4) {
  top: 32px;
}

#nav-icon3.open span:nth-child(1) {
  top: 18px;
  width: 0%;
  left: 50%;
}

#nav-icon3.open span:nth-child(2) {
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
}

#nav-icon3.open span:nth-child(3) {
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
}

#nav-icon3.open span:nth-child(4) {
  top: 18px;
  width: 0%;
  left: 50%;
}

.partners {
  max-width: var(--maxWidth);
  margin: auto;
}
.partners ul {
  display: flex;
  height: 40px;
  list-style: none;
  gap: 20px;
  align-items: center;
  padding: 0px 20px;
}
.partners ul li a {
  color: var(--GrisClaro);
  text-decoration: none;
  font-size: 0.8em;
}
.partners ul li a.partners_active {
  background-color: var(--GrisClaro);
  color: var(--Petroleo) !important;
  padding: 10px 20px 12px 20px;
  border-radius: 10px 10px 0px 0px;
}

.head_mid {
  max-width: var(--maxWidth);
  margin: auto;
  padding: 0px 20px;
  display: flex;
  justify-content: space-between;
}
.head_logo img {
  display: block;
  max-width: 150px;
  padding: 10px 0px;
}
.head_varios {
  display: flex;
  align-items: center;
  gap: 40px;
}
.head_varios_fonos {
  display: flex;
  gap: 10px;
  font-size: 0.9rem;
}
.head_varios_botones {
  display: flex;
  gap: 10px;
}

a.btn_micuenta {
  border: 1px solid #cbd4dc;
  color: var(--Petroleo);
  background-color: var(--Blanco);
}
a.btn_solicita {
  background: linear-gradient(90deg, #fd5b00 0%, #fd8300 100%);
  color: var(--Blanco);
  padding: 8px 15px;
}
a.btn_micuenta,
a.btn_solicita {
  text-decoration: none;
  font-size: 0.9rem;
  border-radius: 6px;
  padding: 8px 15px;
  font-family: 'Nunito-Bold','Arial',sans-serif;
}
.head_varios_fonos a {
  text-decoration: none;
  font-family: 'Nunito-Bold','Arial',sans-serif;
}
.head_varios_fonos span {
  color: var(--Petroleo);
}
.btn_fono {
  color: var(--Naranjo);
}
.btn_sucursales {
  display: flex;
  gap: 5px;
  align-items: center;
  color: var(--Petroleo);
}
.btn_sucursales img {
  width: 14px;
  height: 11px;
}
.head_varios_fonos span:not(:last-child) {
  border-right: solid 1px var(--GrisOscuro);
  padding-right: 10px;
}
.partners a {
  display: flex;
  gap: 8px;
}
.partners a > img {
  width: 18px;
}
.fondo_GrisClaro {
  background-color: var(--GrisClaro);
}

/* Mobile */
@media (max-width: 930px) {
    .just_desk {display: none}
    .just_mob {display: block}

      .cta_primario {
        font-size: 16px;
        padding: 10px 40px;
      }
      .cta_secundario {
        font-size: 16px;
        width: 100%;
        padding: 10px 40px 10px 16px;
      }
      .ctas {
        flex-direction: column;
        gap: 0px;
      }

    .main_nav li {
        width: 100%;
        height: auto;
    }

    .main_nav ul ul {
        position: static; /* Permite que el sub-menú fluya normalmente en móvil */
        width: 100%;
        background-color: var(--GrisClaro);
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0);
        display: block; /* Asegura que el contenedor esté presente para la transición */
        max-height: 0; /* Oculta el menú inicialmente */
        overflow: hidden; /* Oculta el contenido desbordado */
        transition: max-height 0.4s ease-out; /* Transición para el efecto acordeón */
        padding-top: 0; /* Ajusta el padding inicial */
        padding-bottom: 0; /* Ajusta el padding inicial */
    }
    .dark_mode .main_nav ul ul {
      background-color: var(--PetroleoOscuro);
    }

    .main_nav li.open > ul { /* Clase para cuando el submenú está abierto */
        max-height: 500px; /* Un valor lo suficientemente grande para mostrar todo el contenido */
    }

    .menu_toggle {
        display: block; /* Muestra el botón de menú en móvil */
    }
    body {
      padding-top: 75px;
    }
    .head_mid {
      position: absolute;
      top: 11px;
      right: 60px;
      left: 0px;
    }
    .main_nav ul ul a {
      padding: 10px 20px 10px 40px;
      font-size: 1.2rem;
    }
    .main_nav a:hover, .main_nav a:focus {
      background-color: var(--Blanco);
    }
    .dark_mode .main_nav a:hover, .dark_mode .main_nav a:focus {
      background-color: var(--PetroleoOscuro);
    }
    #primary-menu > li > a {
      font-size: 1.2rem;
      font-family: 'Nunito-SemiBold','Arial',sans-serif;
    }

    .main_nav li > ul {
      /*
      background-color: var(--Petroleo);
      */
       background-color: var(--GrisMedioClaro);
    }
    .main_nav ul ul a {
      /*
      color: var(--GrisMedio);
      */
       color: var(--Petroleo);
    }
  
    /* Indicador visual para sub-menús */
    .has-submenu > a::after {
        transform: rotate(0deg); /* Flecha hacia abajo por defecto o hacia el lado */
        margin-left: 8px; /* Ajusta el margen si es necesario */
    }
    .has-submenu.open > a::after {
        transform: rotate(180deg); /* Gira la flecha hacia arriba cuando está abierto */
    }

    /* 0 to auto transition */
    header {
        bottom:100%;
    }
    /* Resetea lo de desktop */
    .main_nav {
      min-height: initial;
      box-shadow: 0 2px 5px rgba(0,0,0,0);
      /*
      display: flex;
      flex-direction: column-reverse;
      align-items: flex-end;
      */
    }
    /* Resetea lo de desktop */

    .main_nav {
      display: grid;
      grid-template-rows: 0fr;
      transition: grid-template-rows 400ms;
      transition: opacity 400ms;
      transition-timing-function: ease-in-out;
      opacity: 0;
      background-color: var(--Blanco);
    }
    .main_nav > ul {
      overflow: hidden;
    }
    .main_nav.active {
      margin-top: 65px;
      grid-template-rows: 1fr;
      opacity: 1;
    }
    /* /0 to auto transition */

    .main_nav > ul ul li:first-child a {
        padding-top: 20px;
    }
    .main_nav > ul ul li:last-child a {
        padding-bottom: 20px;
    }
    .main_nav a:hover,
    .main_nav a:focus {
        background-color: transparent;
    }
    header {
      background-color: var(--Blanco);
    }
    .tit_section {
        font-size: 1.6rem;
    }

}
/* /Mobile */