/* ============================================================
   Melocotón Play – Menú principal con los colores del sitio
   Se carga después de custom.css para sobrescribir los azules del tema.
   ============================================================ */
:root {
    --mp-accent: #ff9800;        /* naranja melocotón */
    --mp-accent-2: #ffc107;      /* ámbar */
    --mp-accent-dark: #e65100;
    --mp-nav-text: #37474f;
    --mp-nav-soft: #fff8e1;
    --mp-gradient: linear-gradient(90deg, #ffc107 0%, #ff9800 50%, #f57c00 100%);
}

/* ---------- Barra superior ---------- */
.masthead .top-bar .top-bar-bg { background: #2b2b2b !important; }
.masthead .top-bar,
.masthead .top-bar .mini-contacts { color: rgba(255, 255, 255, .78) !important; }
.masthead .top-bar .mini-contacts:before { color: var(--mp-accent-2) !important; }
.masthead .top-bar .soc-ico a { background-color: var(--mp-accent) !important; }
.masthead .top-bar .soc-ico a:hover { background-color: var(--mp-accent-2) !important; }

/* ---------- Barra del menú (escritorio y cabecera fija) ---------- */
.masthead .header-bar,
#phantom .ph-wrap {
    background: #fff;
}
.masthead:not(.side-header),
#phantom {
    border-bottom: 3px solid transparent;
    border-image: var(--mp-gradient) 1;
}
.phantom-shadow-decoration #phantom { box-shadow: 0 4px 18px rgba(0, 0, 0, .08); }

/* Ítems de primer nivel */
.main-nav > li > a {
    border-radius: 999px;
    padding: 8px 14px !important;
    margin: 10px 2px !important;
    transition: background .2s, color .2s;
}
.main-nav > li > a .menu-text {
    font-weight: 600 !important;
    letter-spacing: .3px;
}
.main-nav > li:not(.wpml-ls-item) > a,
.main-nav > li:not(.wpml-ls-item) > a .menu-text {
    color: var(--mp-nav-text) !important;
}
.main-nav > li > a .menu-text i {
    color: var(--mp-accent);
    margin-right: 4px;
}
.main-nav > li > a .menu-text .fa-chevron-down {
    font-size: 10px;
    margin-left: 4px;
    color: #9e9e9e;
    transition: transform .2s;
}

/* Hover / abierto / activo */
.main-nav > li:not(.wpml-ls-item) > a:hover,
.main-nav > li.dt-hovered:not(.wpml-ls-item) > a,
.main-nav > li.act:not(.wpml-ls-item) > a {
    background: var(--mp-nav-soft);
}
.main-nav > li:not(.wpml-ls-item) > a:hover .menu-text,
.main-nav > li.dt-hovered:not(.wpml-ls-item) > a .menu-text,
.main-nav > li.act:not(.wpml-ls-item) > a .menu-text {
    color: var(--mp-accent-dark) !important;
}
.main-nav > li.dt-hovered > a .menu-text .fa-chevron-down,
.main-nav > li > a:hover .menu-text .fa-chevron-down {
    transform: rotate(180deg);
    color: var(--mp-accent);
}

/* Subrayado animado del tema → degradado naranja */
.l-to-r-line > li > a i.underline {
    background: var(--mp-gradient) !important;
    height: 3px !important;
    border-radius: 3px;
}

/* Último ítem (BUSCAR MÚSICA) como botón destacado */
.masthead .main-nav > li:last-child > a {
    background: var(--mp-gradient);
    box-shadow: 0 4px 12px rgba(255, 152, 0, .35);
}
.masthead .main-nav > li:last-child > a .menu-text,
.masthead .main-nav > li:last-child > a .menu-text i {
    color: #fff !important;
}
.masthead .main-nav > li:last-child > a:hover {
    background: linear-gradient(90deg, #ffb300 0%, #fb8c00 50%, #ef6c00 100%);
    transform: translateY(-1px);
}
.masthead .main-nav > li:last-child > a i.underline { display: none; }

/* ---------- Submenús ---------- */
.main-nav .sub-nav {
    background-color: #fff !important;
    border-radius: 12px;
    border-top: 3px solid var(--mp-accent);
    box-shadow: 0 12px 32px rgba(0, 0, 0, .14) !important;
    padding: 8px 0 !important;
}
.main-nav .sub-nav .sub-nav { border-top-color: var(--mp-accent-2); }
.main-nav .sub-nav > li > a {
    margin: 0 8px !important;
    padding: 9px 12px !important;
    border-radius: 8px;
    border-left: 3px solid transparent;
    transition: background .15s, border-color .15s, padding .15s;
}
.main-nav .sub-nav > li:not(.wpml-ls-item) > a,
.main-nav .sub-nav > li:not(.wpml-ls-item) > a .menu-text {
    color: var(--mp-nav-text) !important;
    font-size: 13px !important;
    font-weight: 500;
}
.main-nav .sub-nav > li > a > i {
    color: var(--mp-accent);
    margin-right: 6px;
}
.main-nav .sub-nav > li:not(.wpml-ls-item) > a:hover,
.main-nav .sub-nav > li.dt-hovered:not(.wpml-ls-item) > a {
    background: var(--mp-nav-soft) !important;
    border-left-color: var(--mp-accent);
    padding-left: 16px !important;
}
.main-nav .sub-nav > li:not(.wpml-ls-item) > a:hover .menu-text,
.main-nav .sub-nav > li.dt-hovered:not(.wpml-ls-item) > a .menu-text {
    color: var(--mp-accent-dark) !important;
}

/* ---------- Menú móvil ---------- */
.masthead .mobile-header-bar { background: #fff; }
.dt-mobile-menu-icon .lines,
.dt-mobile-menu-icon .lines:before,
.dt-mobile-menu-icon .lines:after {
    background-color: var(--mp-accent) !important;
}
.dt-mobile-header {
    background: #fff !important;
    border-left: 4px solid var(--mp-accent);
}
.mobile-main-nav > li > a .menu-text,
.mobile-main-nav .sub-nav > li > a .menu-text,
.mobile-main-nav > li > a,
.mobile-main-nav .sub-nav > li > a {
    color: var(--mp-nav-text) !important;
}
.mobile-main-nav > li > a .menu-text { font-weight: 600; }
.mobile-main-nav > li > a:hover .menu-text,
.mobile-main-nav > li.act > a .menu-text,
.mobile-main-nav .sub-nav > li > a:hover .menu-text {
    color: var(--mp-accent-dark) !important;
}
.mobile-main-nav > li + li { border-top: 1px solid #f1f1f1; }
.mobile-main-nav .sub-nav > li > a i { color: var(--mp-accent); margin-right: 6px; }
.dt-close-mobile-menu-icon span {
    background: var(--mp-accent) !important;
    color: #fff !important;
}