/* 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, ol { 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 !important; 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); } .down_content { display: none; padding: 15px 20px; } /* 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; } .down_content { display: flex; } } /* /Mobile */