@tailwind base;@tailwind components;@tailwind utilities;body{color:#FFF;height:100vh;margin:0}section{height:100%;display:flex;flex-direction:column;justify-content:center}@font-face{font-family:Nunito-Black;src:url(/publico/home/_next/static/media/Nunito-Black.099f3e00.ttf);font-weight:900}@font-face{font-family:Nunito-ExtraBold;src:url(/publico/home/_next/static/media/Nunito-ExtraBold.e1e8a566.ttf);font-weight:800}@font-face{font-family:Nunito-Bold;src:url(/publico/home/_next/static/media/Nunito-Bold.e8cde555.ttf);font-weight:700}@font-face{font-family:Nunito-SemiBold;src:url(/publico/home/_next/static/media/Nunito-SemiBold.a42bbd27.ttf);font-weight:600}@font-face{font-family:Nunito-Regular;src:url(/publico/home/_next/static/media/Nunito-Regular.bc562649.ttf);font-weight:400}@font-face{font-family:Nunito-Light;src:url(/publico/home/_next/static/media/Nunito-Light.21ab6ff0.ttf);font-weight:300}@font-face{font-family:NunitoSans-Black;src:url(/publico/home/_next/static/media/NunitoSans-Black.61da3120.ttf);font-weight:900}@font-face{font-family:NunitoSans-ExtraBold;src:url(/publico/home/_next/static/media/NunitoSans-ExtraBold.a84d5dfb.ttf);font-weight:800}@font-face{font-family:NunitoSans-Bold;src:url(/publico/home/_next/static/media/NunitoSans-Bold.df61068b.ttf);font-weight:700}@font-face{font-family:NunitoSans-SemiBold;src:url(/publico/home/_next/static/media/NunitoSans-SemiBold.63c295f5.ttf);font-weight:600}@font-face{font-family:NunitoSans-Regular;src:url(/publico/home/_next/static/media/NunitoSans-Regular.c8e9e0b9.ttf);font-weight:400}@font-face{font-family:NunitoSans-Light;src:url(/publico/home/_next/static/media/NunitoSans-Light.bef2d572.ttf);font-weight:300}.container{color:black;display:flex;flex-direction:column;min-height:100vh;.header{background-color:lightgray;display:flex;min-height:10vh}.content{display:flex;min-height:90vh}.footer{background-color:lightgray;min-height:10vh}}


body {
  font-family: 'Nunito-Regular', sans-serif;
  overflow-x: hidden;
}
h1, h2, h3, h4, h5, h6, strong {
  font-family: 'Nunito-Bold', 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;
}

.cta_primario:hover {
  background:  #d04b00;
}

/*
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';
}

.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_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';
    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://cat-dev.directus.app/assets/e54566c1-6c6d-4ba1-a03f-44bb326f26c2');
    width: 10px;
    height: 6px;
    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%;
}
#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';
}
.head_varios_fonos a {
  text-decoration: none;
  font-family: 'Nunito-Bold';
}
.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 */
    }
    .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';
    }

    .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 */

@media only screen and (min-width: 2000px) {
    .pago_hero {
        background-size: contain;
    }
}
.pago_hero {
    color: var(--Blanco);
    background-color: var(--Petroleo);
    background-image: url('https://staticresourcesfiles.blob.core.windows.net/content/wpub/static/4752799095878506-pago_hero_fondo.webp');
    background-size: cover;
    background-position: center;
}
.pago_hero_int {
    min-height: 468px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: 1200px;
    margin: auto;
    padding: 40px 20px;
}
.pago_hero_int > div:nth-child(1){
    max-width: 560px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.pago_hero_int h1,
.pago_hero_int h2 {
    font-family: 'Nunito-Light';
    font-weight: 400;
}
.pago_hero_int h1 {
    font-size: 3rem;
    line-height: 3.2rem;
}
.pago_hero_int h2 {
    font-size: 1.25rem;
    line-height: 1.8rem;
}
.pago_hero_int h1 span,
.pago_hero_int h2 span {
    font-family: 'Nunito-Bold';
}
.pago_hero_int img {
    max-width: 580px;
}
.pago_fondo_cont_cards {
    background: linear-gradient(0deg, #F6F9FC 9.85%, #E3EDF7 100%);
    padding: 48px 0px;
}
.pago_cont_cards_ext {
    overflow-x: auto;
}
.pago_cont_cards {
    display: flex;
    grid-auto-flow: column;
    max-width: 1200px;
    margin: auto;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    gap: 20px;
    padding-left: 20px;
    justify-content: center;
    background-image: url('https://staticresourcesfiles.blob.core.windows.net/content/wpub/static/37361573389003233-pago_cards_fondo.webp');
    background-size: cover;
    background-position: center;
    text-align: center;
}
.pago_cont_cards::-webkit-scrollbar {
  display: none;
}
.pago_cont_cards > div {
    width: 224px;
    height: 363px;
    background-color: var(--Blanco);
    scroll-snap-align: center;
    scroll-margin-inline-start: 20px;
    border: 2px solid #E3EDF7;
    padding: 24px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    flex-shrink: 0;
    align-items: center;
    border-radius: 24px;
}
.pago_cont_cards > div > div:first-child {
    display: flex;
    flex-direction: column;
    gap: 16px;
    align-items: center;
}
.pago_cont_cards > div:first-child {
    scroll-margin-inline-start: 20px;
}
.pago_cont_cards > div:last-child {
    margin-right: 20px;
}
.pago_tit h3,
.pago_tit h4 {
    text-align: center;
}
.pago_tit h3 {
    font-size: 3rem;
        margin-bottom: 20px;
}
.pago_tit h4 {
    font-size: 1.375rem;
}
.pago_tit h4 span {
    font-family: 'Nunito-Regular';
    font-weight: 400;
}
.pago_tit {
    padding: 0px 20px 48px 20px;
}
.pago_cont_cards img {
    max-width: 44px;
}
.pago_cont_cards p {
    font-size: 0.875rem;
}
.inside_panel p {
    font-size: 0.875rem;
}
.pago_cont_cards h5 {
    font-size: 1.125rem;
}
.pago_fondo_cont_faq {
    background-color: var(--CelesteClaro);
    padding: 48px 0px 88px 0px;
}

/* Acordion */
.pago_acordion {
    max-width: 800px;
    margin: auto;
    padding: 0px 20px;
    display: flex;
    gap: 18px;
    flex-direction: column;
}
.accordion {
    background-color: var(--CelesteOscuro);
    color: #444;
     /* Directus Cloud
    padding: 18px 64px 18px 18px;
     */
    padding: 18px 18px 18px 18px;
    width: 100%;
    border: none;
    text-align: left;
    outline: none;
    font-size: 1.25rem;
    font-family: 'Nunito-Bold';
    transition: 300ms;
    border-radius: 24px;
    align-items: center;
    justify-content: space-between;
    position: relative;
}
.accordion:after {
    content: url('https://staticresourcesfiles.blob.core.windows.net/content/wpub/static/31157235357793267-pago_flecha.svg');
    color: #777;
    font-weight: bold;
    float: right;
    margin-left: 5px;
    height: 20px;
    transition: all 300ms;
    position: absolute;
    top: 20px;
    right: 20px;
}
.active:after {
  rotate: 180deg;
}
.panel {
  background-color: var(--CelesteOscuro);
  max-height: 0;
  overflow: hidden;
  transition: max-height 300ms ease-out;
  font-family: 'Nunito-Regular';
  /* Directus Cloud
  width: calc(100% + 46px);
  */
  width: 100%;
}
.inside_panel {
    background-color: var(--Blanco);
    border-radius: 8px;
}
.inside_panel > div {
    padding: 18px;
    display: flex;
    margin: 18px 0px 0px 0px;
}
.inside_panel h6 {
    font-size: 1.125rem;
    margin-bottom: 16px;
}
.inside_panel > div > div:not(:last-child) {
    border-right: 1px solid var(--Petroleo);
    padding-right: 24px;
    margin-right: 24px;
}
.inside_panel > div > div {
    flex: 1;
}
.inside_panel li::marker {
    content: '✅  ';
}
.inside_panel li {
    margin: 0px 0px 10px 20px;
    font-size: 0.875rem;
}
.pago_dots {
    margin: 20px auto 0px auto;
    text-align: center;
}
.accboton {
    display: block;
    /* Directus Cloud
    width: calc(100% + 46px);
    padding: 0px 46px 0px 0px;
    */
    width: 100%;
    padding: 0px 0px 0px 0px;
    position: relative;
    z-index: 9;
    cursor: pointer;
}
/* /Acordion */
.pago_fondo_huincha_educacion {
    background-color: var(--CelesteClaro);
    padding: 0px 20px 60px 20px;
}
.pago_huincha_educacion {
    max-width: 760px;
    background-color: var(--Petroleo);
    color: var(--Blanco);
    margin: auto;
    border-radius: 16px;
    padding: 20px;
    background-image: url('https://staticresourcesfiles.blob.core.windows.net/content/wpub/static/8591550812834927-pago_ameba_educacion.webp');
    background-size: 23%;
    background-repeat: no-repeat;
    background-position: 86%;
}
.pago_huincha_educacion p {
    font-size: 1rem;
}
.pago_huincha_educacion h3 {
    font-size: 1.5rem;
    max-width: 400px;
}

/* Mobile */
@media only screen and (max-width: 930px) {
    .pago_hero_int {
        flex-direction: column-reverse;
        justify-content: flex-end;
        gap: 20px;
    }
    .pago_hero_int img {
        max-width: 200px;
    }
    .pago_hero_int h1 {
        font-size: 1.8rem;
        line-height: 2.3rem;
    }
    .pago_hero_int h2 {
        font-size: 1.1rem;
        line-height: 1.7rem;
    }
    .pago_hero_int > div:nth-child(1){
        gap: 20px;
        text-align: center;
        align-items: center;
    }
    .pago_hero {
        background-position: 75%;
    }
    .pago_cont_cards {
        justify-content:flex-start;
    }
    .pago_tit h3 {
        font-size: 1.75rem;
        line-height: 2rem;
        margin: 0px 0px 10px 0px;
    }
    .pago_tit h4 {
        font-size: 1.125rem;
    }
    .inside_panel > div {
        flex-direction: column;
        gap: 33px;
    }
    .inside_panel > div > div:not(:last-child) {
        border-right: none;
        padding-right: 0px;
        margin-right: 0px;
    }
    .pago_huincha_educacion {
        background-image: none;
        text-align: center;
        display: flex;
        flex-direction: column;
        align-items: center;
    }
}
/* /Mobile */





/*
Fix solo para antiguo directus
*/
.accordion .active {
  padding: 0px !important;
}
/*
/Fix solo para antiguo directus
*/