/* ===========================
   VARIABLES Y RESET
=========================== */
:root {--blanco: #ffffff;--negro: #000000;--negrooscuro: #1f1e1e;--lila: #8a2be2;--gris-claro: #fbfbfb;}

/* ===========================
   HEADER BASE
=========================== */
.ct-header {position: fixed;top: 0;width: 100%;z-index: 9999;background: var(--negro);backdrop-filter: blur(8px);height: 90px;transition: all 0.4s ease;border-bottom: 1px solid rgba(255,255,255,0.1);box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.06) 0px 1px 2px 0px;}
.ct-header.scrolled {height: 70px;background: var(--negro);}

/* INNER */
.ct-header-inner {width: 100%;max-width: 1500px;margin: 0 auto;padding: 0 30px;display: flex;justify-content: space-between;align-items: center;height: 100%;position: relative;}

/* ===========================
   LOGO ANIMADO
=========================== */
#ct-main-logo {max-width: 140px;transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);transform-origin: center;}
.ct-logo-wrap {position: absolute;left: 50%;top: 50%;transform: translate(-50%, -50%);z-index: 10;transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);}

/* Estado inicial - Logo centrado en pantalla */
body.ct-hero-logo-active .ct-logo-wrap {position: fixed;top: 50vh;left: 50vw;transform: translate(-50%, -50%);z-index: 10000;}
body.ct-hero-logo-active #ct-main-logo {transform: scale(6);opacity: 1;filter: drop-shadow(0 10px 30px rgba(0,0,0,0.5));}

/* Estado normal - Logo en header */
body:not(.ct-hero-logo-active) .ct-logo-wrap {position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);}
body:not(.ct-hero-logo-active) #ct-main-logo {transform: scale(1);opacity: 1;}

/* Overlay para cuando el logo está grande */
.ct-logo-overlay {position: fixed;top: 0;left: 0;width: 100%;height: 100%;background: transparent;z-index: 9999;opacity: 0;visibility: hidden;transition: all 0.6s ease;pointer-events: none;}
body.ct-hero-logo-active .ct-logo-overlay {opacity: 1;visibility: visible;}

/* ===========================
   HAMBURGUESA
=========================== */
.ct-hamburger {display: none;cursor: pointer;background: none;border: 0;width: 32px;height: 32px;position: relative;z-index: 100000;padding: 0;}
.ct-hamburger-box {width: 100%;height: 100%;display: block;position: relative;}
.ct-hamburger-inner {display: block;top: 50%;margin-top: -1px;}

.ct-hamburger-inner,
.ct-hamburger-inner::before,
.ct-hamburger-inner::after {width: 32px;height: 3px;background-color: var(--blanco);border-radius: 3px;position: absolute;transition: transform 0.3s ease, background-color 0.3s ease;}

.ct-hamburger-inner::before,
.ct-hamburger-inner::after {content: "";display: block;}

.ct-hamburger-inner::before {top: -8px;}
.ct-hamburger-inner::after {bottom: -8px;}

/* Estado activo (X) */
.ct-hamburger.active .ct-hamburger-inner {background-color: transparent;}
.ct-hamburger.active .ct-hamburger-inner::before {transform: translateY(8px) rotate(45deg);background-color: var(--negro);}
.ct-hamburger.active .ct-hamburger-inner::after {transform: translateY(-8px) rotate(-45deg);background-color: var(--negro);}

/* ===========================
   MENÚ MÓVIL
=========================== */
.ct-mobile-nav {position: fixed;top: 0;left: -100%;width: 85%;height: 100vh;background: var(--negrooscuro);z-index: 99998;transition: left 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);overflow-y: auto;padding: 80px 30px 30px;box-shadow: 5px 0 30px rgba(0,0,0,0.3);}
.ct-mobile-nav.open {left: 0;}

/* Overlay del menú móvil */
.ct-mobile-overlay {position: fixed;top: 0;left: 0;width: 100%;height: 100%;background: rgba(0,0,0,0.5);z-index: 99997;opacity: 0;visibility: hidden;transition: all 0.3s ease;}
.ct-mobile-overlay.active {opacity: 1;visibility: visible;}

/* Contenedor interno del menú móvil */
.ct-mobile-nav-inner {min-height: 100%;}

/* Separador entre los dos menús en móvil */
.ct-mobile-menu + .ct-mobile-menu {margin-top: 20px;padding-top: 20px;border-top: 2px solid rgba(0,0,0,0.1);}

/* ===========================
   ESTRUCTURA COMÚN DEL MENÚ
=========================== */

/* Menús principales */
.ct-nav-left,
.ct-nav-right {flex: 1;display: flex;align-items: center;}

.ct-nav-left {justify-content: flex-start;}

.ct-nav-right {justify-content: flex-end;position: relative;}

.ct-menu-left,
.ct-menu-right,
.ct-mobile-menu {display: flex;gap: 30px;list-style: none;margin: 0;padding: 0;}

.ct-menu-item {position: relative;}

.ct-menu-link {color: var(--blanco);font-weight: 500;text-transform: uppercase;padding: 10px 0;display: flex;align-items: center;text-decoration: none;transition: color 0.3s ease;font-size: 14px;letter-spacing: 0.5px;}

.ct-menu-link:hover,li.current-menu-item .ct-menu-link {color: var(--rosa);}
.current-menu-parent ul.ct-submenu li a{color: var(--blanco);}



.icon-only i{margin-top: 5px;}
.ct-arrow {margin-left: 6px;font-size: 10px;transition: transform 0.3s ease;}

/* Toggle para submenús móviles */
.ct-mobile-menu .menu-item-has-children {position: relative;}
.ct-mobile-menu .menu-item-has-children > a {padding-right: 50px;}
.submenu-toggle {position: absolute;right: 0;top: 50%;transform: translateY(-50%);font-size: 12px;cursor: pointer;color: var(--negro);padding: 8px 12px;transition: all 0.3s ease;background: rgba(0,0,0,0.05);border-radius: 4px;width: 36px;height: 36px;display: flex;align-items: center;justify-content: center;z-index: 3;border: none;opacity: 0;visibility: hidden;}

.submenu-toggle:hover {background: rgba(0,0,0,0.1);}

.submenu-toggle.active {transform: translateY(-50%) rotate(180deg);background: rgba(0,0,0,0.1);}

/* ===========================
   SUBMENÚS - ESTRUCTURA BASE
=========================== */
.ct-submenu {list-style: none;margin: 0;padding: 0;}
.ct-submenu .ct-menu-item {margin: 0;}
.ct-submenu .ct-menu-link {padding: 12px 20px;font-size: 13px;white-space: nowrap;color: var(--blanco) !important;display: block;}
.ct-submenu .ct-menu-link:hover {color: var(--blanco) !important;background: var(--rosa);}

/* ===========================
   ESCRITORIO (mín 1025px)
=========================== */
@media (min-width: 1025px) {
    /* Ocultar elementos móviles */
    .ct-mobile-nav,
    .ct-hamburger {display: none !important;}

    /* Mostrar menús desktop */
    .ct-nav-left,
    .ct-nav-right > ul {display: flex !important;}

    /* Submenús desktop */
    .ct-submenu {position: absolute;top: 100%;left: 0;background: #111;padding: 15px 0;border-radius: 8px;display: none;min-width: 200px;box-shadow: 0 10px 30px rgba(0,0,0,0.3);border: 1px solid rgba(255,255,255,0.1);animation: fadeInDown 0.3s ease;}
    .ct-menu-item:hover > .ct-submenu {display: block;}
    .ct-menu-item:hover > .ct-menu-link .ct-arrow {transform: rotate(180deg);}
}

/* ===========================
   MÓVIL (hasta 1024px)
=========================== */
@media (max-width: 1024px) {
    .ct-header {height: 70px !important;background: var(--negro) !important;}

    .ct-header-inner {padding: 0 20px;}

    /* Logo en móvil */
    .ct-logo-wrap {position: relative !important;left: auto !important;top: auto !important;transform: none !important;margin: 0 auto;}

    body.ct-hero-logo-active .ct-logo-wrap {position: relative !important;left: auto !important;top: auto !important;transform: none !important;}

    #ct-main-logo {max-width: 120px;transform: scale(1) !important;opacity: 1 !important;}

    /* Ocultar menús desktop */
    .ct-nav-left,
    .ct-nav-right > ul {display: none !important;}

    /* Mostrar hamburguesa */
    .ct-hamburger {display: block;}

    /* Overlay del logo - ocultar en móvil */
    .ct-logo-overlay {display: none;}

    /* Ajustes menú móvil */
    .ct-mobile-nav {width: 320px;max-width: 85%;}

    /* Estilos móviles para .ct-mobile-menu */
    .ct-mobile-menu {flex-direction: column;gap: 0;width: 100%;display: block !important ;}

    .ct-mobile-menu li {border-bottom: 1px solid rgb(225 219 219 / 26%);width: 100%;}

    /*.ct-mobile-menu li:last-child {border-bottom: none;}*/

    .ct-mobile-menu > li > a {font-size: 16px;padding: 15px 0;font-weight: 500;}

    .submenu-toggle {width: 32px;height: 32px;}

    /* SUBMENÚS MÓVILES - COMPORTAMIENTO ESPECÍFICO */
    .ct-mobile-menu .ct-submenu {position: relative !important;top: auto !important;left: auto !important;display: block;width: 100%;padding: 0;margin: 0;box-shadow: none;border-radius: 0;background: rgba(0,0,0,0.02);border-left: 4px solid var(--rosa);}

    .ct-mobile-menu .ct-submenu.open {display: block;}

    /* Estilos específicos para submenús en móvil */
    .ct-mobile-menu .ct-submenu .ct-menu-link {color: var(--blanco) !important;font-size: 14px;padding: 12px 15px 12px 25px;opacity: 0.8;border-left: 3px solid transparent;}

    .ct-mobile-menu .ct-submenu .ct-menu-link:hover {color: var(--blanco) !important;background: var(--rosa);opacity: 1;border-left-color: var(--rosa);}

    /* Sub-submenús en móvil */
    .ct-mobile-menu .ct-submenu .ct-submenu {background: rgba(0,0,0,0.01);border-left: 4px solid rgba(0,0,0,0.1);}

    .ct-mobile-menu .ct-submenu .ct-submenu .ct-menu-link {padding-left: 35px;font-size: 13px;}

    .ct-mobile-menu .ct-submenu .ct-submenu .ct-submenu .ct-menu-link {padding-left: 45px;}

    /* Ocultar submenús de desktop en el header móvil */
    .ct-header .ct-submenu {display: none !important;}

    ul#menu-menu-derecho-1 {margin-top: 0;padding-top: 0;}
}

/* ===========================
   MÓVIL PEQUEÑO (hasta 768px)
=========================== */
@media (max-width: 768px) {
    .ct-mobile-nav {width: 300px;padding: 70px 20px 20px;}

    .ct-header-inner {padding: 0 15px;}

    #ct-main-logo {max-width: 100px;}

    .ct-mobile-menu > li > a {font-size: 15px;padding: 12px 0;}

    .ct-mobile-menu .ct-submenu .ct-menu-link {font-size: 14px;padding: 10px 15px 10px 20px;}

    .ct-mobile-menu .ct-submenu .ct-submenu .ct-menu-link {padding-left: 30px;}

    .ct-mobile-menu .ct-submenu .ct-submenu .ct-submenu .ct-menu-link {padding-left: 40px;}
}

/* ===========================
   MÓVIL MUY PEQUEÑO (hasta 480px)
=========================== */
@media (max-width: 480px) {
    .ct-mobile-nav {width: 100%;padding: 70px 15px 15px;}

    .ct-mobile-menu > li > a {font-size: 14px;}

    .ct-mobile-menu .ct-submenu .ct-menu-link {font-size: 13px;}
}

/* ===========================
   ANIMACIONES
=========================== */
@keyframes fadeInDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}