/* =========================================================
   COSTA DEL ROCK · HEADER GLOBAL WORDPRESS
   ========================================================= */

.cdr-header {

    --red: #e00000;
    --white: #ffffff;

    position: fixed !important;
    top: 0 !important;
    left: 0 !important;

    width: 100%;

    box-sizing: border-box;

    z-index: 99999 !important;

    background:
        radial-gradient(
            circle at 72% 0%,
            rgba(100,0,0,.12),
            transparent 34%
        ),
        rgba(5,5,5,.94);

    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);

    color: var(--white);

    border-bottom:
        1px solid rgba(224,0,0,.75);

    box-shadow:
        0 8px 28px rgba(0,0,0,.28);

    font-family:
        Arial,
        Helvetica,
        sans-serif;
}


/* =========================================================
   CONTENEDOR
   ========================================================= */

.cdr-header-inner {

    width:
        min(
            1320px,
            calc(100% - 70px)
        );

    min-height: 118px;

    margin: 0 auto;

    display: grid;

    grid-template-columns:
        170px
        minmax(0, 1fr)
        145px;

    align-items: center;

    gap: 15px;

    box-sizing: border-box;
}


/* =========================================================
   LOGO
   ========================================================= */

.cdr-header-logo {

    display: flex;

    align-items: center;

    justify-content: flex-start;

    width: 100%;

    height: 100%;

    min-width: 0;

    overflow: visible;
}


.cdr-header-logo img {

    display: block;

    width: 145px;

    height: auto;

    max-width: 100%;

    max-height: 150px;

    object-fit: contain;
}


.cdr-header-logo:hover img {

    transform: scale(1.035);

    opacity: .92;
}


/* =========================================================
   NAVEGACIÓN DESKTOP
   ========================================================= */

.cdr-header-nav {

    display: flex;

    align-items: center;

    justify-content: space-between;

    width: 100%;

    min-width: 0;

    gap: 10px;

    overflow: hidden;
}


.cdr-header-nav a {

    position: relative;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    padding: 10px 0;

    color: #eeeeee;

    font-size: 11px;

    font-weight: 800;

    letter-spacing: 1.8px;

    line-height: 1;

    text-decoration: none !important;

    text-transform: uppercase;

    white-space: nowrap;

    flex-shrink: 1;

    transition:
        color .22s ease,
        transform .22s ease;
}


/* =========================================================
   LÍNEA ROJA
   ========================================================= */

.cdr-header-nav a::after {

    content: "";

    position: absolute;

    left: 50%;

    bottom: 1px;

    width: 0;

    height: 2px;

    background: var(--red);

    transform:
        translateX(-50%);

    transition:
        width .22s ease;
}


.cdr-header-nav a:hover {

    color: #ffffff;

    transform:
        translateY(-1px);
}


.cdr-header-nav a:hover::after {

    width: 100%;
}


/* =========================================================
   REDES
   ========================================================= */

.cdr-header-socials {

    display: flex;

    align-items: center;

    justify-content: flex-end;

    gap: 8px;

    min-width: 0;
}


.cdr-header-social {

    display: flex;

    align-items: center;

    justify-content: center;

    width: 38px;

    height: 38px;

    box-sizing: border-box;

    border:
        1px solid #292929;

    border-radius: 9px;

    background: #080808;

    color: #ffffff;

    text-decoration: none !important;

    flex-shrink: 0;

    transition:
        transform .22s ease,
        border-color .22s ease,
        background .22s ease,
        color .22s ease;
}


.cdr-header-social:hover {

    transform:
        translateY(-2px);

    border-color:
        rgba(224,0,0,.75);

    background: #101010;

    color: var(--red);
}


.cdr-header-social svg {

    display: block;

    width: 17px;

    height: 17px;

    fill: currentColor;
}


/* =========================================================
   BOTÓN HAMBURGUESA
   ========================================================= */

.cdr-header-toggle {

    display: none;

    width: 44px;

    height: 44px;

    padding: 0;

    border:
        1px solid #303030;

    border-radius: 10px;

    background: #090909;

    cursor: pointer;

    appearance: none;

    -webkit-appearance: none;
}


.cdr-header-toggle-lines {

    position: relative;

    display: block;

    width: 19px;

    height: 14px;

    margin: 0 auto;
}


.cdr-header-toggle-lines span {

    position: absolute;

    left: 0;

    width: 19px;

    height: 2px;

    background: #ffffff;

    transition:
        transform .25s ease,
        top .25s ease,
        opacity .2s ease;
}


.cdr-header-toggle-lines span:nth-child(1) {
    top: 0;
}


.cdr-header-toggle-lines span:nth-child(2) {
    top: 6px;
}


.cdr-header-toggle-lines span:nth-child(3) {
    top: 12px;
}


/* =========================================================
   HAMBURGUESA ABIERTA
   ========================================================= */

.cdr-header.is-open
.cdr-header-toggle-lines span:nth-child(1) {

    top: 6px;

    transform:
        rotate(45deg);
}


.cdr-header.is-open
.cdr-header-toggle-lines span:nth-child(2) {

    opacity: 0;
}


.cdr-header.is-open
.cdr-header-toggle-lines span:nth-child(3) {

    top: 6px;

    transform:
        rotate(-45deg);
}


/* =========================================================
   MENÚ MÓVIL
   ========================================================= */

.cdr-header-mobile {

    display: none;

    position: absolute;

    top: 100%;

    left: 0;

    width: 100%;

    box-sizing: border-box;

    padding:
        24px 20px 28px;

    background:
        radial-gradient(
            circle at 80% 0%,
            rgba(120,0,0,.20),
            transparent 38%
        ),
        #070707;

    border-bottom:
        1px solid rgba(224,0,0,.65);

    box-shadow:
        0 20px 45px rgba(0,0,0,.55);
}


.cdr-header.is-open
.cdr-header-mobile {

    display: block;

    animation:
        cdrHeaderMobileIn
        .22s
        ease
        both;
}


@keyframes cdrHeaderMobileIn {

    from {

        opacity: 0;

        transform:
            translateY(-8px);
    }

    to {

        opacity: 1;

        transform:
            translateY(0);
    }
}


/* =========================================================
   NAVEGACIÓN MÓVIL
   ========================================================= */

.cdr-header-mobile-nav {

    display: flex;

    flex-direction: column;
}


.cdr-header-mobile-nav a {

    display: flex;

    align-items: center;

    min-height: 58px;

    box-sizing: border-box;

    padding: 0 5px;

    border-bottom:
        1px solid #202020;

    color: #ffffff;

    font-size: 18px;

    font-weight: 800;

    letter-spacing: 2px;

    text-decoration: none !important;

    text-transform: uppercase;

    transition:
        color .2s ease,
        padding-left .2s ease;
}


.cdr-header-mobile-nav a:first-child {

    border-top:
        1px solid #202020;
}


.cdr-header-mobile-nav a:hover {

    padding-left: 12px;

    color: var(--red);
}


.cdr-header-mobile-nav a::before {

    content: "→";

    margin-right: 10px;

    color: var(--red);

    font-size: 14px;

    opacity: .85;
}


/* =========================================================
   REDES MÓVIL
   ========================================================= */

.cdr-header-mobile-socials {

    display: flex;

    align-items: center;

    gap: 9px;

    padding-top: 22px;
}


.cdr-header-mobile-socials-label {

    margin-right: 7px;

    color: #555;

    font-size: 8px;

    font-weight: 800;

    letter-spacing: 3px;

    text-transform: uppercase;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1120px) {

    .cdr-header-inner {

        width:
            min(
                calc(100% - 45px),
                1100px
            );

        grid-template-columns:
            145px
            minmax(0, 1fr)
            145px;

        gap: 18px;
    }


    .cdr-header-logo img {

        width: 125px;
    }


    .cdr-header-nav {

        gap: 12px;
    }


    .cdr-header-nav a {

        font-size: 10px;

        letter-spacing: 1.7px;
    }

}


/* =========================================================
   MÓVIL · MISMA PROPORCIÓN QUE BLOCSAPP
   ========================================================= */

@media (max-width: 820px) {

    .cdr-header-inner {

        width:
            calc(100% - 28px);

        min-height: 82px;

        display: flex;

        align-items: center;

        justify-content: space-between;

        gap: 15px;
    }


    .cdr-header-logo {

        width: auto;

        height: auto;

        display: flex;

        align-items: center;

        justify-content: flex-start;

        flex-shrink: 0;
    }


    .cdr-header-logo img {

        display: block;

        width: 105px;

        height: auto;

        max-width: 100%;

        max-height: none;

        object-fit: contain;
    }


    .cdr-header-nav,
    .cdr-header-socials {

        display: none;
    }


    .cdr-header-toggle {

        display: flex;

        align-items: center;

        justify-content: center;

        flex-shrink: 0;
    }


    .cdr-header-mobile {

        padding-left: 14px;

        padding-right: 14px;
    }

}


/* =========================================================
   MÓVIL PEQUEÑO
   ========================================================= */

@media (max-width: 380px) {

    .cdr-header-inner {

        min-height: 76px;

        width:
            calc(100% - 22px);
    }


    .cdr-header-logo img {

        width: 94px;
    }


    .cdr-header-toggle {

        width: 40px;

        height: 40px;
    }


    .cdr-header-mobile-nav a {

        min-height: 54px;

        font-size: 16px;
    }

}


/* =========================================================
   ESPACIADOR DEL HEADER FIJO
   ========================================================= */

.cdr-header-spacer {

    height:
        var(--cdr-header-height, 118px);

    width: 100%;
}


/* =========================================================
   WORDPRESS ADMIN BAR
   ========================================================= */

body.admin-bar .cdr-header {

    top: 32px !important;
}


@media (max-width: 782px) {

    body.admin-bar .cdr-header {

        top: 46px !important;
    }

}