/* =========================================================
   MENÚ MÓVIL CCPT
   INDEPENDIENTE DEL MENÚ DE ESCRITORIO
   ========================================================= */


/* =========================================================
   OCULTO POR DEFECTO
   ========================================================= */

#ccpt-mobile-menu {
    display: none;
}


/* =========================================================
   SOLO CELULAR / TABLET
   ========================================================= */

@media (max-width: 991px) {

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

    #ccpt-mobile-container {
        display: block;
        width: 100%;
        position: relative;
        z-index: 999999;
    }


    #ccpt-mobile-menu {
        display: block;
        position: relative;
        width: 100%;
        z-index: 999999;
    }


    /* =====================================================
       BARRA SUPERIOR
       ===================================================== */

    .ccpt-mobile-header {

        display: flex;

        align-items: center;

        justify-content: space-between;

        width: 100%;

        min-height: 72px;

        padding: 8px 15px;

        background: #ffffff;

        border-bottom: 1px solid #eeeeee;

        box-shadow:
            0 3px 15px rgba(0, 0, 0, 0.08);

        box-sizing: border-box;

    }


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

    .ccpt-mobile-logo {

        display: flex;

        align-items: center;

        text-decoration: none;

    }


    .ccpt-mobile-logo img {

        display: block;

        width: auto;

        max-width: 190px;

        max-height: 58px;

        object-fit: contain;

    }


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

    .ccpt-mobile-open {

        width: 46px;

        height: 46px;

        display: flex;

        align-items: center;

        justify-content: center;

        border: none;

        border-radius: 10px;

        background: #a90000;

        color: #ffffff;

        font-size: 21px;

        cursor: pointer;

        box-shadow:
            0 5px 15px rgba(169, 0, 0, 0.20);

    }


    .ccpt-mobile-open:hover {

        background: #850000;

    }


    /* =====================================================
       OVERLAY
       ===================================================== */

    .ccpt-mobile-overlay {

        position: fixed;

        inset: 0;

        width: 100%;

        height: 100%;

        background:
            rgba(0, 0, 0, 0.48);

        opacity: 0;

        visibility: hidden;

        pointer-events: none;

        transition:
            opacity .3s ease,
            visibility .3s ease;

        z-index: 999998;

    }


    .ccpt-mobile-overlay.ccpt-mobile-active {

        opacity: 1;

        visibility: visible;

        pointer-events: auto;

    }


    /* =====================================================
       PANEL
       ===================================================== */

    .ccpt-mobile-panel {

        position: fixed;

        top: 10px;

        right: 10px;

        bottom: 10px;

        width: min(390px, calc(100% - 20px));

        max-height: calc(100vh - 20px);

        overflow-y: auto;

        background: #ffffff;

        border-radius: 18px;

        box-shadow:
            0 15px 50px rgba(0, 0, 0, 0.25);

        transform:
            translateX(110%);

        opacity: 0;

        visibility: hidden;

        transition:
            transform .35s ease,
            opacity .25s ease,
            visibility .35s ease;

        z-index: 999999;

        scrollbar-width: thin;

    }


    /* =====================================================
       PANEL ABIERTO
       ===================================================== */

    .ccpt-mobile-panel.ccpt-mobile-active {

        transform:
            translateX(0);

        opacity: 1;

        visibility: visible;

    }


    /* =====================================================
       CABECERA DEL PANEL
       ===================================================== */

    .ccpt-mobile-panel-header {

        position: sticky;

        top: 0;

        z-index: 5;

        display: flex;

        align-items: center;

        justify-content: space-between;

        min-height: 74px;

        padding: 9px 12px;

        background:
            linear-gradient(
                135deg,
                #b30000,
                #8d0000
            );

        border-radius:
            18px 18px 0 0;

    }


    /* =====================================================
       LOGO DEL PANEL
       ===================================================== */

    .ccpt-mobile-panel-logo {

        display: flex;

        align-items: center;

        max-width: 250px;

    }


    .ccpt-mobile-panel-logo img {

        display: block;

        width: auto;

        max-width: 225px;

        max-height: 58px;

        object-fit: contain;

    }


    /* =====================================================
       BOTÓN CERRAR
       ===================================================== */

    .ccpt-mobile-close {

        flex: 0 0 42px;

        width: 42px;

        height: 42px;

        display: flex;

        align-items: center;

        justify-content: center;

        border: 1px solid rgba(255,255,255,.55);

        border-radius: 50%;

        background:
            rgba(255,255,255,.08);

        color: #ffffff;

        font-size: 20px;

        cursor: pointer;

    }


    .ccpt-mobile-close:hover {

        background:
            rgba(255,255,255,.18);

    }


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

    .ccpt-mobile-nav {

        padding: 10px 12px 0;

    }


    .ccpt-mobile-nav ul {

        margin: 0;

        padding: 0;

        list-style: none;

    }


    .ccpt-mobile-item {

        margin: 0;

        padding: 0;

        border-bottom:
            1px solid #eeeeee;

    }


    /* =====================================================
       BOTONES PRINCIPALES
       ===================================================== */

    .ccpt-mobile-link {

        width: 100%;

        min-height: 52px;

        padding: 10px 12px;

        display: flex;

        align-items: center;

        justify-content: space-between;

        gap: 10px;

        box-sizing: border-box;

        border: none;

        background: #ffffff;

        color: #222222;

        font-family: inherit;

        font-size: 13px;

        font-weight: 700;

        text-align: left;

        text-decoration: none;

        cursor: pointer;

        border-radius: 9px;

        transition:
            background .2s ease,
            color .2s ease;

    }


    .ccpt-mobile-link:hover {

        background: #fff3f3;

        color: #a90000;

    }


    /* =====================================================
       PRIMER ELEMENTO ACTIVO
       ===================================================== */

    .ccpt-mobile-item:first-child
    .ccpt-mobile-link {

        background: #fff0f0;

        color: #a90000;

    }


    /* =====================================================
       PARTE IZQUIERDA
       ===================================================== */

    .ccpt-mobile-left {

        display: flex;

        align-items: center;

        gap: 13px;

        min-width: 0;

    }


    /* =====================================================
       ICONOS
       ===================================================== */

    .ccpt-mobile-icon {

        flex: 0 0 26px;

        width: 26px;

        height: 26px;

        display: flex;

        align-items: center;

        justify-content: center;

        color: #333333;

        font-size: 15px;

    }


    .ccpt-mobile-item:first-child
    .ccpt-mobile-icon {

        color: #a90000;

    }


    .ccpt-mobile-text {

        display: block;

        text-transform: uppercase;

        letter-spacing: .2px;

    }


    /* =====================================================
       FLECHA
       ===================================================== */

    .ccpt-mobile-arrow {

        flex: 0 0 20px;

        width: 20px;

        height: 20px;

        display: flex;

        align-items: center;

        justify-content: center;

        color: #555555;

        font-size: 10px;

        transition:
            transform .25s ease,
            color .25s ease;

    }


    .ccpt-mobile-item.ccpt-mobile-open
    .ccpt-mobile-arrow {

        color: #a90000;

        transform:
            rotate(90deg);

    }


    /* =====================================================
       SUBMENÚ
       ===================================================== */

    /*
       IMPORTANTE:
       NO usar !important en max-height.
       El JavaScript calcula la altura real.
    */

    .ccpt-mobile-submenu {

        display: block;

        width: 100%;

        max-height: 0;

        overflow: hidden;

        box-sizing: border-box;

        padding: 0 10px;

        background: #fafafa;

        opacity: 0;

        transition:
            max-height .3s ease,
            opacity .25s ease,
            padding .3s ease;

    }


    /* =====================================================
       SUBMENÚ ABIERTO
       ===================================================== */

    .ccpt-mobile-item.ccpt-mobile-open
    .ccpt-mobile-submenu {

        max-height: 600px;

        padding:
            5px 10px 8px;

        opacity: 1;

    }


    /* =====================================================
       ENLACES SUBMENÚ
       ===================================================== */

    .ccpt-mobile-submenu > a {

        display: flex;

        align-items: center;

        min-height: 40px;

        padding: 8px 10px;

        box-sizing: border-box;

        color: #555555;

        font-size: 12px;

        font-weight: 600;

        text-decoration: none;

        border-bottom:
            1px solid #eeeeee;

        transition:
            all .2s ease;

    }


    .ccpt-mobile-submenu > a:last-child {

        border-bottom: none;

    }


    .ccpt-mobile-submenu > a:hover {

        padding-left: 15px;

        color: #a90000;

        background: #ffffff;

    }


    /* =====================================================
       REGLAMENTO
       ===================================================== */

    .ccpt-mobile-nested {

        border-top:
            1px solid #eeeeee;

    }


    .ccpt-mobile-nested-btn {

        width: 100%;

        min-height: 42px;

        padding: 9px 10px;

        display: flex;

        align-items: center;

        justify-content: space-between;

        box-sizing: border-box;

        border: none;

        background: transparent;

        color: #555555;

        font-size: 12px;

        font-weight: 600;

        cursor: pointer;

    }


    .ccpt-mobile-nested-btn i {

        font-size: 9px;

        transition:
            transform .25s ease;

    }


    .ccpt-mobile-nested-open
    .ccpt-mobile-nested-btn {

        color: #a90000;

    }


    .ccpt-mobile-nested-open
    .ccpt-mobile-nested-btn i {

        transform:
            rotate(90deg);

    }


    .ccpt-mobile-nested-menu {

        max-height: 0;

        overflow: hidden;

        padding-left: 10px;

        transition:
            max-height .3s ease;

    }


    .ccpt-mobile-nested-open
    .ccpt-mobile-nested-menu {

        max-height: 400px;

    }


    .ccpt-mobile-nested-menu a {

        display: block;

        padding: 8px 10px;

        color: #666666;

        font-size: 11px;

        text-decoration: none;

        border-bottom:
            1px solid #eeeeee;

    }


    .ccpt-mobile-nested-menu a:hover {

        color: #a90000;

    }


    /* =====================================================
       CONTACTO
       ===================================================== */

    .ccpt-mobile-contact {

        margin: 14px 14px 18px;

        padding: 16px;

        background: #ffffff;

        border-top:
            1px solid #eeeeee;

    }


    /* =====================================================
       TÍTULO CONTACTO
       ===================================================== */

    .ccpt-mobile-contact-title {

        margin-bottom: 14px;

        padding: 13px;

        display: flex;

        flex-direction: column;

        align-items: center;

        justify-content: center;

        gap: 3px;

        color: #ffffff;

        background:
            linear-gradient(
                135deg,
                #b30000,
                #8d0000
            );

        border-radius: 10px;

        text-align: center;

    }


    .ccpt-mobile-contact-title span {

        font-size: 11px;

        opacity: .9;

    }


    .ccpt-mobile-contact-title strong {

        font-size: 14px;

        letter-spacing: .4px;

    }


    /* =====================================================
       DATOS CONTACTO
       ===================================================== */

    .ccpt-mobile-contact > a {

        min-height: 34px;

        display: flex;

        align-items: center;

        gap: 11px;

        color: #444444;

        font-size: 11px;

        font-weight: 600;

        text-decoration: none;

    }


    .ccpt-mobile-contact > a i {

        flex: 0 0 22px;

        width: 22px;

        color: #a90000;

        text-align: center;

        font-size: 13px;

    }


    .ccpt-mobile-contact > a:hover {

        color: #a90000;

    }


    /* =====================================================
       HORARIO
       ===================================================== */

    .ccpt-mobile-schedule {

        margin-top: 6px;

        padding-top: 10px;

        display: flex;

        align-items: flex-start;

        gap: 11px;

        border-top:
            1px solid #eeeeee;

    }


    .ccpt-mobile-schedule > i {

        flex: 0 0 22px;

        width: 22px;

        color: #a90000;

        text-align: center;

        font-size: 13px;

    }


    .ccpt-mobile-schedule div {

        display: flex;

        flex-direction: column;

        gap: 3px;

    }


    .ccpt-mobile-schedule strong {

        margin-bottom: 3px;

        color: #333333;

        font-size: 11px;

    }


    .ccpt-mobile-schedule span {

        color: #666666;

        font-size: 10px;

        line-height: 1.35;

    }


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

    .ccpt-mobile-social {

        margin-top: 15px;

        padding-top: 13px;

        display: flex;

        align-items: center;

        justify-content: center;

        gap: 12px;

        border-top:
            1px solid #eeeeee;

    }


    .ccpt-mobile-social a {

        width: 38px;

        height: 38px;

        display: flex;

        align-items: center;

        justify-content: center;

        border-radius: 50%;

        background: #f1f1f1;

        color: #a90000;

        font-size: 16px;

        text-decoration: none;

        transition:
            transform .2s ease,
            background .2s ease,
            color .2s ease;

    }


    .ccpt-mobile-social a:hover {

        transform:
            translateY(-2px);

        background: #a90000;

        color: #ffffff;

    }


    /* =====================================================
       BLOQUEAR SCROLL CUANDO ESTÁ ABIERTO
       ===================================================== */

    body.ccpt-mobile-menu-open {

        overflow: hidden;

    }

}


/* =========================================================
   OCULTAR MENÚ MÓVIL EN PC
   ========================================================= */

@media (min-width: 992px) {

    #ccpt-mobile-menu,
    #ccpt-mobile-container {

        display: none !important;

    }

}


/* =========================================================
   CELULARES PEQUEÑOS
   ========================================================= */

@media (max-width: 480px) {

    .ccpt-mobile-panel {

        top: 7px;

        right: 7px;

        bottom: 7px;

        width: calc(100% - 14px);

        border-radius: 16px;

    }


    .ccpt-mobile-panel-header {

        min-height: 68px;

        border-radius:
            16px 16px 0 0;

    }


    .ccpt-mobile-panel-logo img {

        max-width: 195px;

        max-height: 52px;

    }


    .ccpt-mobile-close {

        width: 38px;

        height: 38px;

        flex-basis: 38px;

        font-size: 18px;

    }


    .ccpt-mobile-link {

        min-height: 49px;

    }


    .ccpt-mobile-submenu > a {

        font-size: 11px;

    }

}
/* =========================================================
   SUBMENÚ CCPT - APERTURA SIMPLE
   ========================================================= */

@media (max-width: 991px) {

    .ccpt-mobile-submenu {
        display: none !important;
        max-height: none !important;
        overflow: visible !important;
        opacity: 1 !important;
        visibility: visible !important;
    }


    .ccpt-mobile-submenu.ccpt-mobile-submenu-active {
        display: block !important;
        width: 100% !important;
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
        opacity: 1 !important;
        visibility: visible !important;
        padding: 5px 10px 8px !important;
        box-sizing: border-box !important;
    }


    .ccpt-mobile-item {
        width: 100% !important;
        position: relative !important;
    }


    .ccpt-mobile-nested-menu {
        display: none !important;
        max-height: none !important;
        overflow: visible !important;
    }


    .ccpt-mobile-nested-open
    .ccpt-mobile-nested-menu {
        display: block !important;
        width: 100% !important;
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
    }

}
/* =========================================================
   CORRECCIÓN: MENÚ MÓVIL SIEMPRE POR ENCIMA DEL CONTENIDO
   ========================================================= */

@media (max-width: 991px) {

    #ccpt-mobile-menu {
        position: fixed !important;
        inset: 0 !important;
        width: 100% !important;
        height: 100dvh !important;
        z-index: 2147483647 !important;
        pointer-events: none;
    }

    #ccpt-mobile-menu .ccpt-mobile-header {
        position: relative !important;
        z-index: 2147483647 !important;
        pointer-events: auto;
    }

    #ccpt-mobile-menu .ccpt-mobile-overlay {
        position: fixed !important;
        inset: 0 !important;
        z-index: 2147483645 !important;
        pointer-events: none;
    }

    #ccpt-mobile-menu .ccpt-mobile-overlay.ccpt-mobile-active {
        pointer-events: auto !important;
    }

    #ccpt-mobile-menu .ccpt-mobile-panel {
        position: fixed !important;
        top: 10px !important;
        right: 10px !important;
        bottom: 10px !important;
        z-index: 2147483646 !important;
        pointer-events: auto !important;
    }

    #ccpt-mobile-menu .ccpt-mobile-panel-header {
        position: sticky !important;
        top: 0 !important;
        z-index: 2147483647 !important;
    }
}