/* Theme Name: Divi Child Renato Sapaico Theme URI: https://renatosapaico.agenciamvpc.com Description: Tema hijo personalizado para la web de Renato Sapaico, utilizando Divi como tema base. Author: Renato Sapaico Author URI: https://renatosapaico.agenciamvpc.com Template: Divi Version: 1.0.0 */ /* ========================================================================== Tus estilos CSS personalizados empiezan aquí debajo ========================================================================== */ /*------------------------------------- 00. Header Menu CSS Start Here -------------------------------------*/ /* ================================================== HEADER MENU Menú móvil: limita altura, añade scroll y bordes ================================================== */ .bvi_header_menu .et_pb_menu__wrap .mobile_nav .et_mobile_menu, .et-db #et-boc .et-l .bvi_header_menu .et_pb_menu__wrap .mobile_nav .et_mobile_menu { /* El menú móvil no puede ocupar más del 80% de la altura visible de la pantalla */ max-height: 80vh; /* Si hay demasiados elementos de menú se habilita scroll vertical */ overflow: scroll; /* Bordes redondeados para una apariencia más moderna */ border-radius: 15px; } /* ================================================== HEADER MENU Animación suave del icono hamburguesa ================================================== */ .bvi_header_menu .et_pb_menu__wrap .mobile_nav .mobile_menu_bar, .et-db #et-boc .et-l .bvi_header_menu .et_pb_menu__wrap .mobile_nav .mobile_menu_bar { /* Hace que cualquier cambio visual ocurra suavemente durante 0.4 segundos */ transition: all 0.4s; } /* ================================================== HEADER MENU Rotación del icono hamburguesa al abrir menú móvil ================================================== */ .bvi_header_menu .et_pb_menu__wrap .mobile_nav.opened .mobile_menu_bar, .et-db #et-boc .et-l .bvi_header_menu .et_pb_menu__wrap .mobile_nav.opened .mobile_menu_bar { /* Gira el icono 180 grados cuando el menú está abierto */ transform: rotate(180deg); } /* ================================================== HEADER MENU Cambio de color del icono hamburguesa al abrir menú móvil ================================================== */ .bvi_header_menu .et_pb_menu__wrap .mobile_nav.opened .mobile_menu_bar:before, .et-db #et-boc .et-l .bvi_header_menu .et_pb_menu__wrap .mobile_nav.opened .mobile_menu_bar:before { /* Cambia el color del icono hamburguesa al color corporativo amarillo */ color: #ffbe3e; } /* ================================================== HEADER MENU Tamaño de fuente para enlaces del menú móvil ================================================== */ .bvi_header_menu .et_pb_menu__wrap .mobile_nav .et_mobile_menu li a, .et-db #et-boc .et-l .bvi_header_menu .et_pb_menu__wrap .mobile_nav .et_mobile_menu li a { /* Tamaño de texto de cada enlace dentro del menú móvil */ font-size: 15px; } /* ================================================== HEADER MENU Resaltado de página activa y menú actual ================================================== */ .bvi_header_menu.et_pb_menu .et_pb_menu__wrap .et-menu-nav ul li.current-menu-ancestor>a, .bvi_header_menu.et_pb_menu .et_pb_menu__wrap .et-menu-nav ul li.current-menu-item>a, .bvi_header_menu.et_pb_menu .et_pb_menu__wrap .et-menu li.current-menu-ancestor.menu-item-has-children>a:first-child::after, .bvi_header_menu.et_pb_menu .et_pb_menu__wrap .et-menu li.current-menu-item.menu-item-has-children>a:first-child::after, .et-db #et-boc .et-l .bvi_header_menu.et_pb_menu .et_pb_menu__wrap .et-menu-nav ul li.current-menu-ancestor>a, .et-db #et-boc .et-l .bvi_header_menu.et_pb_menu .et_pb_menu__wrap .et-menu-nav ul li.current-menu-item>a, .et-db #et-boc .et-l .bvi_header_menu.et_pb_menu .et_pb_menu__wrap .et-menu li.current-menu-ancestor.menu-item-has-children>a:first-child::after, .et-db #et-boc .et-l .bvi_header_menu.et_pb_menu .et_pb_menu__wrap .et-menu li.current-menu-item.menu-item-has-children>a:first-child::after { /* Color corporativo para indicar la página actualmente activa */ color: #ffbe3e !important; } /* ================================================== HEADER MENU Estilo visual y animación de los submenús desplegables ================================================== */ .bvi_header_menu.et_pb_menu .et_pb_menu__wrap ul.et-menu li ul, .et-db #et-boc .et-l .bvi_header_menu.et_pb_menu .et_pb_menu__wrap ul.et-menu li ul { /* Sombra suave debajo del submenú para generar sensación de profundidad y efecto flotante */ box-shadow: 0px 5px 18px 0px rgba(82,59,46,0.1); /* Posiciona inicialmente el submenú 15px más abajo */ transform: translate(0, 15px); /* Activa una transición suave para los cambios de posición y otros efectos visuales */ transition: all 300ms ease; } /* ================================================== HEADER MENU Animación de aparición del submenú al hacer hover ================================================== */ .bvi_header_menu.et_pb_menu .et_pb_menu__wrap ul.et-menu li:hover > ul, .et-db #et-boc .et-l .bvi_header_menu.et_pb_menu .et_pb_menu__wrap ul.et-menu li:hover > ul { /* Devuelve el submenú a su posición original cuando el usuario pasa el cursor */ transform: translate(0, 0); } /* ================================================== HEADER MENU Corrección de posición para Mega Menús ================================================== */ .bvi_header_menu.et_pb_menu .et_pb_menu__wrap ul.et-menu li.mega-menu ul.sub-menu li ul, .et-db #et-boc .et-l .bvi_header_menu.et_pb_menu .et_pb_menu__wrap ul.et-menu li.mega-menu ul.sub-menu li ul { /* Evita desplazamientos no deseados dentro de subniveles de Mega Menús */ transform: translate(0, 0) !important; } /* ================================================== HEADER MENU Espaciado vertical de los enlaces principales ================================================== */ .bvi_header_menu .et_pb_menu__wrap .et_pb_menu__menu .et-menu li a, .et-db #et-boc .et-l .bvi_header_menu .et_pb_menu__wrap .et_pb_menu__menu .et-menu li a { /* Espaciado superior del enlace */ padding-top: 35px; /* Espaciado inferior del enlace */ padding-bottom: 35px; } /* ================================================== HEADER MENU Corrección de alineación para iconos de submenú ================================================== */ .bvi_header_menu .et_pb_menu__wrap .et_pb_menu__menu .et-menu li a:after, .et-db #et-boc .et-l .bvi_header_menu .et_pb_menu__wrap .et_pb_menu__menu .et-menu li a:after { /* Elimina posicionamiento vertical heredado */ top: auto !important; /* Elimina transformaciones heredadas */ transform: none; } /* ================================================== HEADER MENU Contenedor de submenús (Actualmente sin reglas activas) ================================================== */ .bvi_header_menu .et_pb_menu__wrap .et_pb_menu__menu .et-menu li ul, .et-db #et-boc .et-l .bvi_header_menu .et_pb_menu__wrap .et_pb_menu__menu .et-menu li ul { } /* ================================================== HEADER MENU Estilo de enlaces dentro de los submenús ================================================== */ .bvi_header_menu .et_pb_menu__wrap .et_pb_menu__menu .et-menu li ul li a, .et-db #et-boc .et-l .bvi_header_menu .et_pb_menu__wrap .et_pb_menu__menu .et-menu li ul li a { /* Espaciado vertical interno */ padding: 5px 0px; /* Tamaño de texto */ font-size: 14px; /* Visibilidad completa */ opacity: 1; /* Fondo transparente */ background-color: transparent; } /* ================================================== HEADER MENU Optimización del menú para resoluciones medias (1100px - 1240px) ================================================== */ @media only screen and (min-width: 1100px) and (max-width: 1240px) { .bvi_header_menu .et_pb_menu__wrap .et_pb_menu__menu .et-menu > li, .et-db #et-boc .et-l .bvi_header_menu .et_pb_menu__wrap .et_pb_menu__menu .et-menu > li { /* Reduce el espacio lateral entre elementos del menú para evitar saltos de línea */ padding-left: 5px; padding-right: 5px; } .bvi_header_menu .et_pb_menu__wrap .et_pb_menu__menu .et-menu > li > a, .et-db #et-boc .et-l .bvi_header_menu .et_pb_menu__wrap .et_pb_menu__menu .et-menu > li > a { /* Reduce ligeramente el tamaño del texto del menú en pantallas medianas */ font-size: 15px; } } /*------------------------------------- 00. Header Menu CSS End Here -------------------------------------*/