:root {

    --azul: #183e5f;
    --celeste: #00a6e9;
    --naranja: #f48120;

}

/* LOGO */

.navbar-brand img {

    width: 170px;
    height: auto;

}

/* MENÚ */

.navbar-nav {

    align-items: center;

}

.navbar-nav .nav-item {

    position: relative;
    padding: 0 18px;

}

/* Línea divisoria */

.navbar-nav .nav-item:not(:last-child)::after {

    content: "";

    position: absolute;

    top: 50%;
    right: 0;

    transform: translateY(-50%);

    width: 4px;
    height: 20px;

    background: var(--azul);

}

/* Texto */

.navbar-nav .nav-link {

    color: var(--azul);

    font-weight: 700;

    font-size: 16px;

    text-transform: uppercase;

    position: relative;

    transition: all .3s ease;

    padding-bottom: 8px;

}

/* Línea inferior */

.navbar-nav .nav-link::before {

    content: "";

    position: absolute;

    left: 0;
    bottom: 0;

    width: 0;

    height: 3px;

    background: var(--celeste);

    transition: width .3s ease;

}

/* Hover */

.navbar-nav .nav-link:hover {

    color: var(--celeste);

}

.navbar-nav .nav-link:hover::before {

    width: 100%;

}

/* Activo */

.navbar-nav .nav-link.active {

    color: var(--celeste);

}

.navbar-nav .nav-link.active::before {

    width: 100%;

}

body {

    font-family: ArialCustom;

}



.color-principal {

    color: var(--azul);

}


.card-intro {

    border: 0px solid #ccc;
    border-radius: 0px;
    overflow: hidden;

}

.servicios-home {

    background: #ccecfc;
    color: var(--azul);

}

.whatsapp-flotante {

    position: fixed;
    right: 30px;
    bottom: 30px;
    z-index: 9999;

    animation: zoom 1.5s infinite;
}

.whatsapp-flotante img {

    width: 90px;

}

@keyframes zoom {

    0% {

        transform: scale(1);

    }

    50% {

        transform: scale(1.15);

    }

    100% {

        transform: scale(1);

    }

}


/* Texto e iconos */

.top-header a,
.top-header i {

    font-size: 24px;
    font-weight: bold;
    color: #ffffff;
    text-decoration: none;

}

/* Espaciado entre enlaces */

.top-header .contact-item {

    margin-right: 5px;

}

/* Redes sociales */

.top-header .social-icons a {

    margin-left: 20px;
    transition: 0.3s;

}

.top-header .social-icons a:hover {

    color: #00a6e9;

}

.top-header {

    background: var(--azul);
    color: white;
    padding: 20px 0;

}

.top-header a {

    color: white;
    text-decoration: none;

}


.social-icons a {

    width: 45px;
    height: 45px;

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

    margin-left: 15px;

    background: #ffffff;
    border-radius: 50%;

    text-decoration: none;

    transition: all 0.3s ease;

}

.social-icons a i {

    color: #183e5f;
    font-size: 24px;
    font-weight: bold;

}

/* Efecto hover */

.social-icons a:hover {

    background: #00a6e9;
    transform: translateY(-3px);

}

.social-icons a:hover i {

    color: #ffffff;

}

.contact-link {

    display: inline-flex;
    align-items: center;
    gap: 10px;

    color: #ffffff;
    text-decoration: none;

    transition: all 0.3s ease;

}

.contact-link i {

    transition: all 0.3s ease;

}

.contact-link:hover {

    color: #00a6e9;

    transform: scale(1.1);

}

.contact-link:hover i {

    color: #00a6e9;

    transform: scale(1.2);

}


.carousel-control-prev,
.carousel-control-next {

    width: 8%;
    opacity: 1;

}

.carousel-control-prev-icon,
.carousel-control-next-icon {

    width: 50px;
    height: 50px;

    filter: brightness(0) invert(1);

}

.carousel-control-prev:hover,
.carousel-control-next:hover {

    opacity: 1;

}

.slider-img {

    width: 100%;
    max-height: 650px;

    height: auto;

    object-fit: cover;

}


.c-introduccion {
    color: #183e5f;
    text-align: justify;
    font-size: 19px;

} 

.title-seccion {
    color: #183e5f;
    text-align: center;
    font-weight: bold;

}

#carouselServicios .carousel-item img {
    transition: transform 0.4s ease;
     transition: opacity 0.4s ease;
}


#carouselServicios .carousel-item img:hover {
    transform: scale(1.08);
      opacity: 0.6;
}

.img-fluid {
    transition: transform 0.4s ease;
}

.img-fluid:hover {
    transform: scale(1.08);
}



/* Texto e iconos */

.top-footer a,
.top-footer i {

    font-size: 12px;
    font-weight: bold;
    color: #ffffff;
    text-decoration: none;

}

/* Espaciado entre enlaces */

.top-footer .contact-item {

    margin-right: 5px;

}

/* Redes sociales */

.top-footer .social-icons a {

    margin-left: 20px;
    transition: 0.3s;

}

.top-footer .social-icons a:hover {

    color: #00a6e9;

}

.top-footer {

    background: var(--azul);
    color: white;
    padding: 20px 0;

}

.top-footer a {

    color: white;
    text-decoration: none;

}


.card-servicio {
    position: relative;

    background-color: #183e5f;
    border: none;
    border-radius: 0;

    padding: 35px 30px 25px;

    overflow: hidden;

    transition:
        transform 0.4s ease,
        box-shadow 0.4s ease;
}


/* =========================================
   EFECTO DE BRILLO
   ========================================= */

.card-servicio::before {
    content: "";

    position: absolute;

    top: 0;
    left: -120%;

    width: 70%;
    height: 100%;

    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.18),
        transparent
    );

    transform: skewX(-20deg);

    transition: left 0.7s ease;

    pointer-events: none;
}

.card-servicio:hover::before {
    left: 140%;
}


/* =========================================
   EFECTO DEL CARD
   ========================================= */

.card-servicio:hover {
    transform: translateY(-5px);

    box-shadow:
        0 10px 30px rgba(0, 0, 0, 0.25),
        0 0 20px rgba(255, 255, 255, 0.08);
}


/* =========================================
   IMAGEN
   ========================================= */

.card-servicio-img {
    width: 140px;
    height: 140px;

    object-fit: cover;

    transition:
        transform 0.4s ease,
        filter 0.4s ease;
}

.card-servicio:hover .card-servicio-img {
    transform: scale(1.08);

    filter: brightness(1.15);
}


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

.card-servicio-numero {
    color: #f48120;

    font-size: 55px;
    font-weight: 700;

    line-height: 1;
}


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

.card-servicio-titulo {
    color: #ffffff;

    font-size: 23px;
    font-weight: 700;

    margin: 0 0 12px;

    line-height: 1.2;
    text-align: left;
}


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

.card-servicio-descripcion {
    color: #ffffff;

    font-size: 15px;

    line-height: 1.6;

    margin: 0;
}


/* =========================================
   LÍNEA NARANJA
   ========================================= */

.card-servicio-linea {
    width: 35%;
    height: 2px;

    background-color: #f48120;

    margin-left: auto;
    margin-top: 30px;

    transition:
        width 0.5s ease,
        box-shadow 0.5s ease;
}


/* Zoom de la línea */

.card-servicio:hover .card-servicio-linea {
    width: 65%;

    box-shadow:
        0 0 8px rgba(244, 129, 32, 0.9),
        0 0 15px rgba(244, 129, 32, 0.5);
}



.card-p-servicio {
    position: relative;

    background-color: #183e5f !important;

    border: none;
    border-radius: 0;

    padding: 35px 30px 25px;

    overflow: hidden;

    transition:
        transform 0.4s ease,
        box-shadow 0.4s ease;
}



/* ==========================================
   EFECTO DE BRILLO
   ========================================== */

.card-p-servicio::before {
    content: "";

    position: absolute;

    top: 0;
    left: -120%;

    width: 70%;
    height: 100%;

    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.18),
        transparent
    );

    transform: skewX(-20deg);

    transition: left 0.7s ease;

    pointer-events: none;
}


/* El brillo atraviesa el card */

.card-p-servicio:hover::before {
    left: 140%;
}


/* ==========================================
   EFECTO GENERAL DEL CARD
   ========================================== */

.card-p-servicio:hover {
    transform: translateY(-5px);

    box-shadow:
        0 10px 30px rgba(0, 0, 0, 0.25),
        0 0 25px rgba(255, 255, 255, 0.10);
}


/* ==========================================
   IMAGEN
   ========================================== */

.card-p-servicio .servicio-imagen {
    width: 120px;
    height: 120px;

    object-fit: cover;

    transition:
        transform 0.5s ease,
        filter 0.5s ease;
}


/* Zoom de la imagen */

.card-p-servicio:hover .servicio-imagen {
    transform: scale(1.08);

    filter: brightness(1.15);
}


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

.card-p-servicio .servicio-numero {
    color: #f48120;

    font-size: 40px;
    font-weight: 700;

    line-height: 1;
}


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

.card-p-servicio .servicio-titulo {
    color: #ffffff;

    font-size: 21px;
    font-weight: 700;

    line-height: 1.2;

    margin: 0 0 12px;
}


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

.card-p-servicio .servicio-descripcion {
    color: #ffffff;

    font-size: 15px;

    line-height: 1.4;

    margin: 0;
}


/* ==========================================
   LÍNEA INFERIOR
   ========================================== */

.card-p-servicio .servicio-linea {
    width: 35%;
    height: 2px;

    background-color: #f48120;

    margin-left: auto;
    margin-top: 30px;

    transition:
        width 0.5s ease,
        box-shadow 0.5s ease;
}


/* ==========================================
   ZOOM DE LA LÍNEA
   ========================================== */

.card-p-servicio:hover .servicio-linea {
    width: 65%;

    box-shadow:
        0 0 8px rgba(244, 129, 32, 0.9),
        0 0 15px rgba(244, 129, 32, 0.5);
}

.card-p-servicio-bg1 {
    background-color: #183e5f !important;
}

.card-p-servicio-bg2 {
    background-color: #ccecfc !important;
    color: black !important;
}




```css
/* ==========================================
   ACORDEÓN DOCE LEGAL
   ========================================== */

.accordion-docelegal {
    width: 100%;
}


/* ==========================================
   ELEMENTO DEL ACORDEÓN
   ========================================== */

.accordion-docelegal .accordion-item {
    border: none;
    background-color: #eeeeee;
    margin-bottom: 8px;
}


/* ==========================================
   PREGUNTA
   ========================================== */

.accordion-docelegal .accordion-button {
    background-color: #eeeeee;

    color: #183e5f;

    font-size: 17px;
    font-weight: 700;

    padding: 18px 22px;

    border: none;

    box-shadow: none;

    transition:
        background-color 0.3s ease,
        color 0.3s ease;
}


/* ==========================================
   PREGUNTA AL PASAR EL CURSOR
   ========================================== */

.accordion-docelegal .accordion-button:hover {
    background-color: #e5e5e5;
}


/* ==========================================
   PREGUNTA DESPLEGADA
   ========================================== */

.accordion-docelegal .accordion-button:not(.collapsed) {
    background-color: #eeeeee;

    color: #183e5f;

    box-shadow: none;
}


/* ==========================================
   ELIMINAR BORDE/FOCUS DE BOOTSTRAP
   ========================================== */

.accordion-docelegal .accordion-button:focus {
    box-shadow: none;
}


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

.accordion-docelegal .accordion-button::after {
    filter: none;

    transition: transform 0.3s ease;
}


/* ==========================================
   CUERPO / RESPUESTA
   ========================================== */

.accordion-docelegal .accordion-body {
    background-color: #eeeeee;

    color: #333333;

    font-size: 16px;

    line-height: 1.7;

    text-align: justify;

    padding: 5px 22px 22px;

    border: none;
}


/* ==========================================
   CONTENEDOR DEL CONTENIDO
   ========================================== */

.accordion-docelegal .accordion-collapse {
    border: none;

    background-color: #eeeeee;
}




/* ==========================================
   SECCIÓN CONTACTO
   ========================================== */

.seccion-contacto {
    background-color: #ffffff;
    padding: 80px 0;
}


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

.contacto-info {
    padding: 10px 20px;
}


.contacto-item {
    margin-bottom: 18px;
}


.contacto-linea {
    display: flex;
    align-items: flex-start;
    gap: 10px;

    color: #333333;

    font-size: 16px;
    line-height: 1.6;
}


.contacto-linea i {
    color: #f48120;

    font-size: 20px;

    min-width: 22px;

    margin-top: 2px;
}


.contacto-item p {
    margin: 2px 0 0 32px;

    color: #444444;

    font-size: 15px;

    line-height: 1.6;
}


.contacto-item a {
    color: #333333;

    text-decoration: none;

    transition: color 0.3s ease;
}


.contacto-item a:hover {
    color: #f48120;
}


/* ==========================================
   GOOGLE MAPS
   ========================================== */

.contacto-mapa {
    min-height: 550px;

    overflow: hidden;

    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.12);
}


.contacto-mapa iframe {
    display: block;

    width: 100%;
    height: 100%;

    min-height: 550px;
}


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

@media (max-width: 991px) {

    .seccion-contacto {
        padding: 60px 0;
    }

    .contacto-info {
        padding: 0;
    }

    .contacto-mapa {
        min-height: 450px;
    }

    .contacto-mapa iframe {
        min-height: 450px;
    }

}





/* ========================================== GOOGLE MAPS ========================================== */ .contacto-mapa { min-height: 550px; overflow: hidden; background-color: #ffffff; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25); transition: box-shadow 0.4s ease; } /* Sombra ligeramente más intensa al pasar el cursor */ .contacto-mapa:hover { box-shadow: 0 8px 20px rgba(0, 0, 0, 0.30); } .contacto-mapa iframe { display: block; width: 100%; height: 100%; min-height: 550px; border: 0; }


.contacto-titulo { color: #00a6e9; font-size: 30px; font-weight: 700; margin: 0 0 30px 0; line-height: 1.2; }




/* ==========================================
   FUENTES PERSONALIZADAS
   ========================================== */

/* Arial Normal */
@font-face {
    font-family: 'ArialCustom';
    src: url('http://www.docelegal.pe/fonts/Arial.woff2') format('woff2');

    font-weight: 400;
    font-style: normal;
    font-display: swap;
}


/* Arial Bold */
@font-face {
    font-family: 'ArialCustom';
    src: url('http://www.docelegal.pe/fonts/Arial Bold.woff2') format('woff2');

    font-weight: 700;
    font-style: normal;
    font-display: swap;
}


/* Montserrat SemiBold */
@font-face {
    font-family: 'MontserratCustom';
    src: url('http://www.docelegal.pe/fonts/Montserrat-SemiBold.woff2') format('woff2');

    font-weight: 600;
    font-style: normal;
    font-display: swap;
}


/* ==========================================
   CLASES DE FUENTES
   ========================================== */

/* Arial normal */
.font-arial {
    font-family: 'ArialCustom', Arial, sans-serif;
    font-weight: 400;
}


/* Arial Bold */
.font-arial-bold {
    font-family: 'ArialCustom', Arial, sans-serif;
    font-weight: 700;
}


/* Montserrat SemiBold */
.font-montserrat {
    font-family: 'MontserratCustom', Montserrat, sans-serif;
    font-weight: 600;
}

/* Ocultar líneas divisorias en celulares */ 
@media (max-width: 990px) { 
    .navbar-nav .nav-item:not(:last-child)::after {
      content: "";
      position: absolute;
      top: 50%;
      right: 0;
      transform: translateY(-50%);
      width: 4px;
      height: 20px;
      background: none !important;
    }
}