/* =========================================
   VARIABLES Y COLORES
========================================= */
:root {
    --rojo-minsa: #C10000;
    --turquesa: #37DEC5;
    --celeste: #37C2DE;
    --salmon: #F57A73;
    --texto-oscuro: #2C3E50;
    --gris-claro: #f8fbfc;
}

body {
    background-color: var(--gris-claro);
    font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    color: var(--texto-oscuro);
    overflow-x: hidden;
}

/* =========================================
   BARRA DE CONTACTO SUPERIOR
========================================= */
.top-contacto {
    background-color: var(--celeste);
    color: white;
    padding: 8px 0;
    font-size: 0.9rem;
}

.top-contacto a {
    color: white;
    text-decoration: none;
    transition: color 0.3s;
}

.top-contacto a:hover { 
    color: var(--turquesa); 
}

/* =========================================
   ESTILOS DEL SLIDER GIGANTE (CARRUSEL)
========================================= */
.carousel-item {
    height: 80vh; /* Ocupa el 80% de la altura de la pantalla */
    min-height: 500px;
    background: no-repeat center center scroll;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

.overlay-carrusel {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background-color: rgba(0, 0, 0, 0.4); /* Capa oscura para que el texto resalte */
}

.carousel-caption {
    bottom: 30%;
    z-index: 10;
}

/* Animación del texto en el slider */
.texto-slider {
    animation: fadeInUp 1s ease-in-out;
}

@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(30px); }
    to { opacity: 1; transform: translateY(0); }
}

/* =========================================
   TARJETAS Y BOTONES (ESPECIALIDADES)
========================================= */
.card-especialidad {
    border: none;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    background: white;
}

.card-especialidad:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 25px rgba(55, 194, 222, 0.3); /* Sombra celeste usando tu color */
}

.card-especialidad img {
    height: 200px;
    object-fit: cover;
}

/* Botones Personalizados */
.btn-salmon {
    background-color: var(--salmon);
    color: white;
    border-radius: 25px;
    font-weight: 600;
    border: none;
    transition: all 0.3s ease;
}

.btn-salmon:hover { 
    background-color: #e56a63; 
    color: white; 
    transform: scale(1.05); 
}

.btn-turquesa {
    background-color: var(--turquesa);
    color: white;
    border-radius: 25px;
    font-weight: 600;
    border: none;
    transition: all 0.3s ease;
}

.btn-turquesa:hover { 
    background-color: #2bc5ae; 
    color: white; 
}

/* Efecto de elevación suave para cualquier tarjeta (.hover-lift) */
.hover-lift {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.hover-lift:hover {
    transform: translateY(-5px);
    box-shadow: 0 .5rem 1rem rgba(0,0,0,.15) !important;
}

/* Efecto de elevación con zoom interno para Artículos/Noticias */
.articulo-card {
    transition: all 0.3s ease;
}
.articulo-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 1rem 3rem rgba(0,0,0,.175) !important;
}
.articulo-card img, 
.articulo-card .bg-secondary {
    transition: transform 0.5s ease;
}
.articulo-card:hover .bg-secondary {
    transform: scale(1.05);
}

/* Botones de categorías (Planeamiento, Presupuesto, etc.) */
.btn-transparencia {
    transition: all 0.3s ease;
    background-color: #f8f9fa;
    border-color: #e9ecef;
}
.btn-transparencia:hover {
    transform: translateY(-5px);
    background-color: white;
    border-color: var(--celeste); 
    box-shadow: 0 0.5rem 1rem rgba(0,0,0,.15) !important;
}
.btn-transparencia i {
    transition: transform 0.3s ease;
}
.btn-transparencia:hover i {
    transform: scale(1.2);
}

/* Efecto hover para las listas de enlaces legales */
.list-group-item-action:hover {
    background-color: #e8f7fa;
    color: var(--turquesa) !important; 
    font-weight: bold;
}

/* Estilo para que el botón de cerrar sea más visible sobre la imagen */
.btn-close { opacity: 1; }
.btn-turquesa { background-color: var(--turquesa); border: none; }
.btn-turquesa:hover { filter: brightness(90%); 

}

.modal-custom-header {
height: 220px;
background-size: cover;
background-position: center;
position: relative;
}

.modal-overlay {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: linear-gradient(to bottom, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0.85) 100%);
}

.service-item-title {
    color: var(--texto-oscuro, #2c3e50);
    font-weight: 700;
    border-bottom: 2px solid var(--celeste, #e0e0e0);
    padding-bottom: 0.5rem;
    margin-bottom: 0.8rem;
}


.service-list li {
    margin-bottom: 0.4rem;
    position: relative;
    padding-left: 1.5rem;
}

.service-list li::before {
    content: "\f105"; /* Flecha de FontAwesome */
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    position: absolute;
    left: 0;
    color: var(--turquesa, #1abc9c);
}

.btn-ver-servicios {
    background-color: transparent;
    color: var(--celeste, #0d6efd);
    border: 2px solid var(--celeste, #0d6efd);
    transition: all 0.3s ease;
}

.btn-ver-servicios:hover {
    background-color: var(--celeste, #0d6efd);
    color: white;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}        
        /* Efecto hover suave para las tarjetas de la grilla de servicios */
.service-card {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
 
.service-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 .5rem 1rem rgba(0,0,0,.08)!important;
}

/* Ralentiza y suaviza el desvanecimiento del carrusel para un efecto más elegante */
#carouselInstitucion .carousel-item {
    transition: opacity 1.5s ease-in-out !important;
}

.aviso-titulo-hover {
    transition: all 0.3s ease;
    cursor: pointer;
}

.aviso-titulo-hover:hover {
    color: var(--turquesa) !important;
}

.aviso-img-hover {
    transition: transform 0.3s ease;
}

.aviso-img-hover:hover {
    transform: scale(1.02);
}

/* =========================================
   EFECTOS MENU NAVBAR RIS PACASMAYO
========================================= */

/* Enlaces principales del menú */
.navbar-nav .nav-link {
    position: relative;
    transition: all 0.3s ease;
    border-radius: 10px;
    padding: 10px 16px !important;
}

/* Hover del menú */
.navbar-nav .nav-link:hover {
    color: var(--celeste) !important;
    background: rgba(55, 194, 222, 0.12);
    transform: translateY(-2px);
}

/* Línea animada inferior */
.navbar-nav .nav-link::after {
    content: "";
    position: absolute;
    width: 0;
    height: 3px;
    left: 50%;
    bottom: -4px;
    background: linear-gradient(to right, var(--celeste), var(--turquesa));
    border-radius: 20px;
    transition: all 0.3s ease;
    transform: translateX(-50%);
}

.navbar-nav .nav-link:hover::after {
    width: 70%;
}

/* Menú ACTIVO (cuando se hace clic / página actual) */
.navbar-nav .nav-link.active,
.navbar-nav .show > .nav-link {
    color: var(--turquesa) !important;
    background: rgba(55, 222, 197, 0.12);
    font-weight: 700;
}

/* Dropdown menú */
.dropdown-menu {
    border-radius: 18px;
    overflow: hidden;
    animation: fadeDropdown 0.25s ease;
}

/* Hover opciones dropdown */
.dropdown-item {
    transition: all 0.25s ease;
    border-radius: 8px;
    margin: 3px 8px;
    width: auto;
}

.dropdown-item:hover {
    background: linear-gradient(
        to right,
        rgba(55, 194, 222, 0.15),
        rgba(55, 222, 197, 0.15)
    );
    color: var(--texto-oscuro);
    transform: translateX(4px);
    font-weight: 600;
}

/* Opción activa dropdown */
.dropdown-item:active {
    background-color: var(--celeste) !important;
    color: white !important;
}

/* Animación apertura */
@keyframes fadeDropdown {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}