/* =========================================================
   NUESTROS SERVICIOS - COLORES INSTITUCIONALES
   COLEGIO DE CONTADORES PÚBLICOS DE TUMBES
   ========================================================= */

.ccpt-servicios {
    position: relative;
    padding: 90px 0 100px;
    background: #ffffff;
    overflow: hidden;
}


/* =========================================================
   DECORACIÓN DE FONDO
   ========================================================= */

.ccpt-servicios::before {
    content: "";

    position: absolute;

    top: -180px;
    left: -180px;

    width: 400px;
    height: 400px;

    border-radius: 50%;

    background: rgba(155, 45, 32, 0.035);

    pointer-events: none;
}


.ccpt-servicios::after {
    content: "";

    position: absolute;

    right: -180px;
    bottom: -180px;

    width: 400px;
    height: 400px;

    border-radius: 50%;

    background: rgba(155, 45, 32, 0.035);

    pointer-events: none;
}


/* =========================================================
   ENCABEZADO
   ========================================================= */

.ccpt-servicios-header {
    position: relative;

    text-align: center;

    margin-bottom: 55px;

    z-index: 2;
}


.ccpt-servicios-label {
    display: inline-flex;

    align-items: center;

    gap: 12px;

    color: #9B2D20;

    font-size: 14px;

    font-weight: 700;

    letter-spacing: 1.2px;

    margin-bottom: 12px;
}


.ccpt-servicios-label::before,
.ccpt-servicios-label::after {

    content: "";

    width: 35px;
    height: 2px;

    background: #9B2D20;
}


.ccpt-servicios-header h2 {
    margin: 0;
    color: #000000; /* NEGRO */
    font-size: 48px;
    font-weight: 800;
    line-height: 1.15;
}

.ccpt-servicios-header h2 span {
    color: #000000; /* NEGRO */
}


/* SEPARADOR */

.ccpt-separador {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 12px;

    margin: 17px 0;
}


.ccpt-separador span {

    width: 45px;
    height: 2px;

    background: #C99A2E;
}


.ccpt-separador b {

    color: #C99A2E;

    font-size: 20px;

    line-height: 1;
}


.ccpt-servicios-header p {

    margin: 0;

    color: #777;

    font-size: 17px;

    line-height: 1.6;
}


/* =========================================================
   GRID
   ========================================================= */

.ccpt-servicios-grid {

    position: relative;

    display: grid;

    grid-template-columns:
        repeat(3, 1fr);

    gap: 28px;

    z-index: 2;
}


/* =========================================================
   TARJETAS
   ========================================================= */

.ccpt-servicio-card {

    position: relative;

    min-height: 335px;

    padding: 40px 32px 30px;

    background: #ffffff;

    border-radius: 15px;

    border: 1px solid #eee3e1;

    box-shadow:
        0 8px 30px rgba(80, 30, 20, 0.07);

    overflow: hidden;

    transition:
        transform .35s ease,
        box-shadow .35s ease,
        border-color .35s ease;
}


/* LÍNEA SUPERIOR */

.ccpt-servicio-card::before {

    content: "";

    position: absolute;

    top: 0;
    left: 0;

    width: 100%;
    height: 4px;

    background: #9B2D20;

    transform: scaleX(0);

    transform-origin: left;

    transition: transform .35s ease;
}


.ccpt-servicio-card:hover {

    transform: translateY(-8px);

    border-color: #E1B0AA;

    box-shadow:
        0 18px 40px rgba(155, 45, 32, 0.15);
}


.ccpt-servicio-card:hover::before {

    transform: scaleX(1);
}


/* =========================================================
   NÚMERO
   ========================================================= */

.ccpt-servicio-numero {

    position: absolute;

    top: 0;
    left: 0;

    width: 105px;
    height: 72px;

    display: flex;

    align-items: center;
    justify-content: center;

    background: #9B2D20;

    color: #ffffff;

    font-size: 27px;

    font-weight: 800;

    border-radius:
        0 0 55px 0;

    padding-right: 17px;

    z-index: 2;

    transition:
        background .3s ease;
}


.ccpt-servicio-card:hover
.ccpt-servicio-numero {

    background: #7D2118;
}


/* =========================================================
   ICONO
   ========================================================= */

.ccpt-servicio-icono {

    position: relative;

    width: 105px;
    height: 105px;

    margin: 20px auto 22px;

    border-radius: 50%;

    background:
        linear-gradient(
            145deg,
            #FFF8F6,
            #FBEAE7
        );

    border: 2px dashed #C65345;

    display: flex;

    align-items: center;
    justify-content: center;

    text-decoration: none !important;

    color: #9B2D20;

    transition:
        transform .35s ease,
        background .35s ease,
        box-shadow .35s ease,
        border-color .35s ease;
}


/* CÍRCULO INTERIOR */

.ccpt-servicio-icono::before {

    content: "";

    position: absolute;

    width: 78px;
    height: 78px;

    border-radius: 50%;

    background: #ffffff;

    box-shadow:
        0 4px 14px rgba(155, 45, 32, 0.10);

    z-index: 0;
}


/* ICONO */

.ccpt-servicio-icono i {

    position: relative;

    z-index: 1;

    font-size: 42px;

    color: #9B2D20;

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


/* HOVER */

.ccpt-servicio-card:hover
.ccpt-servicio-icono {

    border-color: #9B2D20;

    box-shadow:
        0 8px 22px rgba(155, 45, 32, 0.15);
}


.ccpt-servicio-card:hover
.ccpt-servicio-icono i {

    color: #7D2118;
}


/* =========================================================
   EFECTO CLICK DEL ICONO
   ========================================================= */

.ccpt-servicio-icono.icon-click {

    animation:
        iconoClick .65s ease;
}


.ccpt-servicio-icono.icon-click i {

    animation:
        iconoRebote .65s ease;

    color: #C99A2E;
}


@keyframes iconoClick {

    0% {

        transform: scale(1);

        box-shadow:
            0 0 0 0
            rgba(155, 45, 32, 0.35);
    }

    35% {

        transform: scale(1.18);

        box-shadow:
            0 0 0 14px
            rgba(155, 45, 32, 0.10);
    }

    65% {

        transform: scale(.94);
    }

    100% {

        transform: scale(1);

        box-shadow:
            0 4px 18px
            rgba(155, 45, 32, 0.12);
    }
}


@keyframes iconoRebote {

    0% {

        transform:
            rotate(0deg)
            scale(1);
    }

    25% {

        transform:
            rotate(-15deg)
            scale(1.25);
    }

    50% {

        transform:
            rotate(15deg)
            scale(1.15);
    }

    75% {

        transform:
            rotate(-8deg)
            scale(1.08);
    }

    100% {

        transform:
            rotate(0deg)
            scale(1);
    }
}


/* =========================================================
   TÍTULO DEL SERVICIO
   ========================================================= */

.ccpt-servicio-contenido {

    text-align: center;

    max-width: 340px;

    margin: 0 auto;
}


.ccpt-servicio-contenido h3 {

    margin: 0;

    color: #421712;

    font-size: 25px;

    font-weight: 750;

    line-height: 1.25;
}


/* LÍNEA */

.ccpt-mini-linea {

    width: 40px;

    height: 3px;

    background: #9B2D20;

    margin: 14px auto;

    border-radius: 5px;

    transition:
        width .3s ease,
        background .3s ease;
}


.ccpt-servicio-card:hover
.ccpt-mini-linea {

    width: 65px;

    background: #C99A2E;
}


/* =========================================================
   DESCRIPCIÓN
   ========================================================= */

.ccpt-servicio-contenido p {

    margin: 0;

    color: #777;

    font-size: 15px;

    line-height: 1.65;
}


/* =========================================================
   VER MÁS
   ========================================================= */

.ccpt-ver-mas {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 9px;

    margin-top: 22px;

    color: #9B2D20 !important;

    font-size: 15px;

    font-weight: 700;

    text-decoration: none !important;

    transition:
        color .3s ease,
        gap .3s ease;
}


.ccpt-ver-mas i {

    font-size: 13px;

    transition:
        transform .3s ease;
}


.ccpt-ver-mas:hover {

    color: #C99A2E !important;

    gap: 14px;
}


.ccpt-ver-mas:hover i {

    transform: translateX(4px);
}


/* =========================================================
   CLICK DE LA TARJETA
   ========================================================= */

.ccpt-servicio-card.card-click {

    animation:
        tarjetaClick .45s ease;
}


@keyframes tarjetaClick {

    0% {
        transform: scale(1);
    }

    40% {
        transform: scale(.98);
    }

    100% {
        transform: scale(1);
    }
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 991px) {

    .ccpt-servicios {

        padding: 70px 20px 80px;
    }

    .ccpt-servicios-grid {

        grid-template-columns:
            repeat(2, 1fr);
    }

    .ccpt-servicios-header h2 {

        font-size: 40px;
    }
}


@media (max-width: 600px) {

    .ccpt-servicios {

        padding: 55px 15px 65px;
    }

    .ccpt-servicios-header {

        margin-bottom: 35px;
    }

    .ccpt-servicios-label {

        font-size: 11px;

        letter-spacing: .7px;
    }

    .ccpt-servicios-label::before,
    .ccpt-servicios-label::after {

        width: 20px;
    }

    .ccpt-servicios-header h2 {

        font-size: 34px;
    }

    .ccpt-servicios-header p {

        font-size: 15px;
    }

    .ccpt-servicios-grid {

        grid-template-columns: 1fr;

        gap: 20px;
    }

    .ccpt-servicio-card {

        min-height: 330px;
    }
}
/* =========================================================
   MODAL CUENTAS BANCARIAS
   ========================================================= */

.ccpt-modal {

    position: fixed;

    inset: 0;

    display: flex;

    align-items: center;

    justify-content: center;

    padding: 20px;

    background: rgba(30, 15, 12, 0.72);

    backdrop-filter: blur(6px);

    opacity: 0;

    visibility: hidden;

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

    z-index: 999999;
}


/* MODAL ABIERTO */

.ccpt-modal.active {

    opacity: 1;

    visibility: visible;
}


/* CONTENEDOR */

.ccpt-modal-contenido {

    position: relative;

    width: 100%;

    max-width: 720px;

    max-height: 90vh;

    overflow-y: auto;

    background: #ffffff;

    border-radius: 20px;

    padding: 35px;

    box-shadow:
        0 25px 70px rgba(0,0,0,.30);

    transform:
        translateY(30px)
        scale(.95);

    transition:
        transform .35s ease;
}


.ccpt-modal.active
.ccpt-modal-contenido {

    transform:
        translateY(0)
        scale(1);
}


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

.ccpt-modal-cerrar {

    position: absolute;

    top: 18px;

    right: 18px;

    width: 40px;

    height: 40px;

    border: none;

    border-radius: 50%;

    background: #9B2D20;

    color: #ffffff;

    font-size: 17px;

    cursor: pointer;

    display: flex;

    align-items: center;

    justify-content: center;

    transition: .3s ease;
}


.ccpt-modal-cerrar:hover {

    background: #7D2118;

    transform:
        rotate(90deg)
        scale(1.08);
}


/* =========================================================
   CABECERA
   ========================================================= */

.ccpt-modal-header {

    display: flex;

    align-items: center;

    gap: 18px;

    padding-right: 45px;

    margin-bottom: 22px;
}


.ccpt-modal-icono {

    width: 65px;

    height: 65px;

    flex-shrink: 0;

    border-radius: 16px;

    display: flex;

    align-items: center;

    justify-content: center;

    background:
        linear-gradient(
            135deg,
            #9B2D20,
            #7D2118
        );

    color: #ffffff;

    font-size: 27px;
}


.ccpt-modal-header span {

    display: block;

    color: #9B2D20;

    font-size: 12px;

    font-weight: 800;

    letter-spacing: 1.5px;

    margin-bottom: 3px;
}


.ccpt-modal-header h2 {

    margin: 0;

    color: #24100D;

    font-size: 30px;

    font-weight: 800;
}


/* =========================================================
   MENSAJE
   ========================================================= */

.ccpt-modal-mensaje {

    display: flex;

    gap: 12px;

    align-items: flex-start;

    padding: 15px 18px;

    margin-bottom: 22px;

    border-radius: 12px;

    background: #FDF5F3;

    border-left: 4px solid #9B2D20;
}


.ccpt-modal-mensaje i {

    color: #9B2D20;

    font-size: 20px;

    margin-top: 2px;
}


.ccpt-modal-mensaje p {

    margin: 0;

    color: #666;

    font-size: 14px;

    line-height: 1.55;
}


/* =========================================================
   BANCOS
   ========================================================= */

.ccpt-bancos {

    display: grid;

    gap: 14px;
}


.ccpt-banco {

    display: flex;

    align-items: center;

    gap: 18px;

    padding: 18px;

    border: 1px solid #eee1df;

    border-radius: 15px;

    background: #ffffff;

    transition:
        transform .3s ease,
        box-shadow .3s ease,
        border-color .3s ease;
}


.ccpt-banco:hover {

    transform: translateX(5px);

    border-color: #C65345;

    box-shadow:
        0 8px 25px
        rgba(155,45,32,.10);
}


/* =========================================================
   LOGOS
   ========================================================= */

.ccpt-banco-logo {

    width: 70px;

    height: 70px;

    flex-shrink: 0;

    border-radius: 14px;

    display: flex;

    align-items: center;

    justify-content: center;

    color: #ffffff;

    font-weight: 800;

    font-size: 15px;
}


.ccpt-banco-logo.bbva {

    background: #072146;
}


.ccpt-banco-logo.bcp {

    background: #063B9E;
}


.ccpt-banco-logo.yape {

    background: #7220A5;

    font-size: 27px;
}


/* =========================================================
   INFORMACIÓN
   ========================================================= */

.ccpt-banco-info {

    flex: 1;
}


.ccpt-banco-info h3 {

    margin: 0 0 7px;

    color: #421712;

    font-size: 18px;

    font-weight: 750;
}


.ccpt-banco-info p {

    margin: 4px 0;

    color: #666;

    font-size: 14px;

    line-height: 1.5;
}


.ccpt-banco-info strong {

    color: #9B2D20;
}


/* =========================================================
   AVISO FINAL
   ========================================================= */

/* =========================================================
   AVISO - ENVÍO DE COMPROBANTE
   ========================================================= */

.ccpt-modal-aviso {

    display: flex;

    align-items: flex-start;

    gap: 15px;

    margin-top: 22px;

    padding: 20px 22px;

    border-radius: 12px;

    background: #FDF5F3;

    border-left: 5px solid #9B2D20;

    color: #333;

}


/* ICONO WHATSAPP */

.ccpt-modal-aviso > i {

    flex-shrink: 0;

    width: 42px;

    height: 42px;

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    background: #25D366;

    color: #ffffff;

    font-size: 23px;

}


/* TEXTO */

.ccpt-aviso-texto {

    font-size: 17px;

    line-height: 1.5;

}


/* PRIMERA LÍNEA */

.ccpt-aviso-texto > strong {

    display: block;

    color: #9B2D20;

    font-size: 20px;

    font-weight: 800;

    margin-bottom: 5px;
}


.ccpt-aviso-texto > strong span {

    color: #333;

    font-size: 17px;

}


/* CONTACTOS */

.ccpt-contactos-pago {

    color: #333;

    font-size: 18px;

    font-weight: 700;

}


.ccpt-contactos-pago b {

    color: #9B2D20;

    font-size: 19px;

}


/* DATOS FINALES */

.ccpt-datos-pago {

    margin-top: 3px;

    color: #333;

    font-size: 17px;

    font-weight: 600;

}


/* =========================================================
   CELULAR
   ========================================================= */

@media (max-width: 600px) {

    .ccpt-modal-aviso {

        padding: 16px;

        gap: 10px;

    }

    .ccpt-modal-aviso > i {

        width: 36px;

        height: 36px;

        font-size: 19px;

    }

    .ccpt-aviso-texto {

        font-size: 15px;

    }

    .ccpt-aviso-texto > strong {

        font-size: 17px;

    }

    .ccpt-aviso-texto > strong span {

        font-size: 15px;

    }

    .ccpt-contactos-pago {

        font-size: 16px;

    }

    .ccpt-contactos-pago b {

        font-size: 17px;

    }

    .ccpt-datos-pago {

        font-size: 15px;

    }

}

/* =========================================================
   QR DE PAGO
   ========================================================= */

.ccpt-qr-pago {

    margin-top: 18px;

    padding: 22px;

    border-radius: 16px;

    background: #fafafa;

    border: 1px solid #eee1df;

    text-align: center;

    transition: .3s ease;
}


.ccpt-qr-pago:hover {

    border-color: #9B2D20;

    box-shadow:
        0 8px 25px rgba(155, 45, 32, .10);
}


/* TÍTULO */

.ccpt-qr-titulo {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 12px;

    margin-bottom: 18px;
}


.ccpt-qr-titulo > i {

    width: 45px;

    height: 45px;

    border-radius: 12px;

    display: flex;

    align-items: center;

    justify-content: center;

    background: #9B2D20;

    color: #fff;

    font-size: 21px;
}


.ccpt-qr-titulo span {

    display: block;

    color: #9B2D20;

    font-size: 11px;

    font-weight: 800;

    letter-spacing: 1.3px;

    text-align: left;
}


.ccpt-qr-titulo h3 {

    margin: 2px 0 0;

    color: #24100D;

    font-size: 21px;

    font-weight: 800;

    text-align: left;
}


/* IMAGEN QR */

.ccpt-qr-imagen {
    width: 320px;
    height: 320px;

    margin: 0 auto;

    padding: 8px;

    background: #ffffff;

    border-radius: 16px;

    box-shadow:
        0 6px 25px rgba(0,0,0,.12);

    display: flex;

    align-items: center;
    justify-content: center;
}

.ccpt-qr-imagen img {
    display: block !important;

    width: 180px !important;
    height: 180px !important;

    max-width: 180px !important;
    max-height: 180px !important;

    min-width: 0 !important;
    min-height: 0 !important;

    object-fit: contain !important;

    margin: 0 auto !important;
}


/* TEXTO */

.ccpt-qr-texto {

    max-width: 470px;

    margin: 16px auto 0;

    color: #666;

    font-size: 13px;

    line-height: 1.5;
}


/* =========================================================
   CORRECCIÓN MODAL CUENTAS - CELULAR
   ========================================================= */

@media (max-width: 600px) {

    /* MODAL PRINCIPAL */
    .ccpt-modal {
        padding: 10px !important;
        align-items: center !important;
        box-sizing: border-box !important;
    }


    /* CONTENIDO DEL MODAL */
    .ccpt-modal-contenido {
        width: 100% !important;
        max-width: 100% !important;

        max-height: 94vh !important;

        padding: 22px 16px !important;

        margin: 0 !important;

        box-sizing: border-box !important;

        border-radius: 18px !important;

        overflow-x: hidden !important;
        overflow-y: auto !important;
    }


    /* CABECERA */
    .ccpt-modal-header {
        gap: 10px !important;

        padding-right: 40px !important;

        margin-bottom: 16px !important;
    }


    .ccpt-modal-icono {
        width: 48px !important;
        height: 48px !important;

        border-radius: 12px !important;

        font-size: 20px !important;
    }


    .ccpt-modal-header span {
        font-size: 10px !important;
    }


    .ccpt-modal-header h2 {
        font-size: 22px !important;
    }


    /* BOTÓN CERRAR */
    .ccpt-modal-cerrar {
        top: 12px !important;
        right: 12px !important;

        width: 36px !important;
        height: 36px !important;

        font-size: 15px !important;
    }


    /* MENSAJE */
    .ccpt-modal-mensaje {
        padding: 12px !important;

        margin-bottom: 16px !important;

        gap: 8px !important;
    }


    .ccpt-modal-mensaje p {
        font-size: 13px !important;
    }


    /* CUENTAS BANCARIAS */
    .ccpt-bancos {
        width: 100% !important;
    }


    .ccpt-banco {
        width: 100% !important;

        box-sizing: border-box !important;

        padding: 12px !important;

        gap: 12px !important;
    }


    .ccpt-banco-logo {
        width: 52px !important;
        height: 52px !important;

        border-radius: 10px !important;
    }


    .ccpt-banco-info {
        min-width: 0 !important;
    }


    .ccpt-banco-info h3 {
        font-size: 16px !important;
    }


    .ccpt-banco-info p {
        font-size: 12px !important;

        word-break: break-word !important;
    }


    /* =====================================================
       BLOQUE QR
       ===================================================== */

    .ccpt-qr-pago {
        width: 100% !important;

        height: auto !important;

        min-height: 0 !important;

        box-sizing: border-box !important;

        margin-top: 16px !important;

        padding: 16px 10px !important;

        border-radius: 14px !important;

        overflow: hidden !important;
    }


    /* TÍTULO QR */
    .ccpt-qr-titulo {
        width: 100% !important;

        gap: 9px !important;

        margin-bottom: 12px !important;
    }


    .ccpt-qr-titulo > i {
        width: 40px !important;
        height: 40px !important;

        flex-shrink: 0 !important;

        border-radius: 10px !important;

        font-size: 18px !important;
    }


    .ccpt-qr-titulo span {
        font-size: 9px !important;
    }


    .ccpt-qr-titulo h3 {
        font-size: 19px !important;

        line-height: 1.15 !important;
    }


    /* QR */
    .ccpt-qr-imagen {
        width: 190px !important;
        height: 190px !important;

        max-width: 80vw !important;
        max-height: 80vw !important;

        box-sizing: border-box !important;

        margin: 0 auto !important;

        padding: 6px !important;

        border-radius: 12px !important;
    }


    .ccpt-qr-imagen img {
        width: 100% !important;
        height: 100% !important;

        max-width: 100% !important;
        max-height: 100% !important;

        object-fit: contain !important;
    }


    .ccpt-qr-texto {
        max-width: 100% !important;

        margin: 10px auto 0 !important;

        padding: 0 5px !important;

        font-size: 12px !important;

        line-height: 1.4 !important;
    }


    /* =====================================================
       AVISO DE ENVÍO DE COMPROBANTE
       ===================================================== */

    .ccpt-modal-aviso {
        width: 100% !important;

        box-sizing: border-box !important;

        margin-top: 16px !important;

        padding: 14px !important;

        gap: 9px !important;

        overflow: hidden !important;
    }


    .ccpt-modal-aviso > i {
        width: 36px !important;
        height: 36px !important;

        flex-shrink: 0 !important;

        font-size: 18px !important;
    }


    .ccpt-aviso-texto {
        min-width: 0 !important;

        font-size: 14px !important;

        line-height: 1.5 !important;

        overflow-wrap: anywhere !important;
    }


    .ccpt-aviso-texto > strong {
        font-size: 17px !important;

        line-height: 1.25 !important;
    }


    .ccpt-aviso-texto > strong span {
        font-size: 14px !important;
    }


    .ccpt-contactos-pago {
        font-size: 15px !important;

        line-height: 1.4 !important;
    }


    .ccpt-contactos-pago b {
        font-size: 16px !important;
    }


    .ccpt-datos-pago {
        font-size: 14px !important;

        line-height: 1.5 !important;
    }

}
/* =========================================================
   MODAL MAPA - COLEGIO DE CONTADORES PÚBLICOS DE TUMBES
   ========================================================= */

.ccpt-modal-mapa {
    position: fixed;
    inset: 0;
    z-index: 99999;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 20px;

    background: rgba(0, 0, 0, .72);

    opacity: 0;
    visibility: hidden;

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

    backdrop-filter: blur(5px);
}


/* MODAL ACTIVO */

.ccpt-modal-mapa.activo {
    opacity: 1;
    visibility: visible;
}


/* CONTENIDO */

.ccpt-modal-mapa-contenido {
    width: min(900px, 100%);

    background: #ffffff;

    border-radius: 18px;

    overflow: hidden;

    box-shadow:
        0 25px 80px rgba(0,0,0,.35);

    transform: translateY(30px) scale(.96);

    transition: transform .35s ease;
}


.ccpt-modal-mapa.activo
.ccpt-modal-mapa-contenido {
    transform: translateY(0) scale(1);
}


/* =========================================================
   ENCABEZADO
   ========================================================= */

.ccpt-modal-mapa-header {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 20px;

    padding: 22px 25px;

    background: #b00000;

    color: #ffffff;
}


.ccpt-modal-mapa-header span {

    display: block;

    margin-bottom: 5px;

    font-size: 12px;

    font-weight: 800;

    letter-spacing: 2px;

    opacity: .85;
}


.ccpt-modal-mapa-header h3 {

    margin: 0;

    font-size: 21px;

    font-weight: 800;

    line-height: 1.3;
}


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

.ccpt-modal-mapa-cerrar {

    width: 42px;

    min-width: 42px;

    height: 42px;

    border: none;

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

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

    color: #ffffff;

    font-size: 18px;

    cursor: pointer;

    transition: all .3s ease;
}


.ccpt-modal-mapa-cerrar:hover {

    background: #ffffff;

    color: #b00000;

    transform: rotate(90deg);
}


/* =========================================================
   MAPA
   ========================================================= */

.ccpt-mapa-contenedor {

    width: 100%;

    height: 450px;

    background: #eeeeee;
}


.ccpt-mapa-contenedor iframe {

    display: block;

    width: 100%;

    height: 100%;

    border: 0;
}


/* =========================================================
   PIE
   ========================================================= */

.ccpt-modal-mapa-footer {

    display: flex;

    align-items: center;

    gap: 10px;

    padding: 15px 25px;

    color: #555555;

    font-size: 14px;

    font-weight: 600;

    border-top: 1px solid #eeeeee;
}


.ccpt-modal-mapa-footer i {

    color: #b00000;

    font-size: 18px;
}


/* =========================================================
   CELULAR
   ========================================================= */

@media (max-width: 767px) {

    .ccpt-modal-mapa {

        padding: 12px;
    }


    .ccpt-modal-mapa-header {

        padding: 18px;

    }


    .ccpt-modal-mapa-header h3 {

        font-size: 17px;

    }


    .ccpt-mapa-contenedor {

        height: 380px;

    }


    .ccpt-modal-mapa-footer {

        padding: 13px 18px;

        font-size: 13px;

    }

}