/* Estilos generales para el contenedor de la portada */
#logo{
    height: 100%;
    width: 50%;
    margin-left: 5%;
    margin-top: -1%;
    
}

:root{
    --accent: #4169e1; /* azul rey */
    --accent-dark: #3356c3;
    --accent-contrast: #ffffff;
}

/* Sobrescribir utilidades Bootstrap que usan 'success' para usar el azul rey */
.text-success{ color: var(--accent) !important; }
.bg-success{ background-color: var(--accent) !important; }


    /* ======= Estilos para 'Nuestro Equipo de trabajo' ======= */
    .team-section{ position:relative; margin-top: 0; background-color: #6b7280; background-position: center; background-size: cover; background-attachment: fixed; color: #fff; }
    .team-section .team-overlay{ position:absolute; inset:0; background: rgba(0,0,0,0.62); z-index:1; }
    .team-section .container{ position:relative; z-index:2; height: 45em;}

    .team-section h2{ font-size:2.4rem; font-weight:800; margin-bottom:0.25rem; }
    .team-section .team-accent{ color:var(--accent); }
    .team-indicator{ display:inline-block }
    .team-indicator span{ display:inline-block; width:36px; height:8px; background:#e6f6f0; margin:0 6px; border-radius:8px; opacity:0.9 }
    .team-indicator span.active{ background:var(--accent) }
    .team-section p.text-white-50{ color: rgba(255,255,255,0.85); max-width:720px; margin:0 auto; }

    .team-card{ padding-bottom:72px; border-radius: 12px; box-shadow: 0 12px 30px rgba(27,40,56,0.06); overflow: visible; transition: transform .18s ease, box-shadow .18s ease; }
    .team-card:hover{ transform: translateY(-6px); box-shadow: 0 24px 60px rgba(27,40,56,0.12); }
    .team-card .card-body{ padding-top:1rem; }

    .team-avatar-wrapper{ position: absolute; bottom: -48px; left: 50%; transform: translateX(-50%); width: 96px; height: 96px; border-radius: 50%; overflow: hidden; box-shadow: 0 8px 24px rgba(8,59,80,0.14); border: 6px solid #fff; background: #fff; z-index: 5; }
    .team-avatar{ width: 100%; height: 100%; object-fit: cover; display: block; }

    .avatar-quote{ position:absolute; bottom:-12px; left:50%; transform:translateX(-50%); width:36px; height:36px; background:var(--accent); color:var(--accent-contrast); border-radius:50%; display:flex; align-items:center; justify-content:center; box-shadow: 0 6px 18px rgba(8,59,80,0.12); font-size:14px; }

    .team-card .card-title{ font-weight:700; color:#11303b }
    .team-card p.lead{ color:#3b5568; }
    .team-card .text-success{ color:var(--accent) !important }

    @media (max-width: 767px){
        .team-avatar-wrapper{ width: 80px; height: 80px; bottom: -40px; }
        .team-card{ padding-bottom:64px; }
        .team-section h2{ font-size:1.6rem }
    }

    /* Asegurar contraste si la sección queda sobre parallax */
    .team-section .card{ background-clip: padding-box; }

    /* Fin estilos equipo */
#div_botones{
    text-align: center;
}

#btn-login{
    margin-left: 8%
}

#mynavbar{
    margin-left: 35%

}

#toggler-responsive{
    margin-left: 73%;
    margin-top: -15%;

}



#div_presentacion{
    position: absolute;
    margin-top: 19%;
    margin-left: 5%;
    color: white;
}



#txt_subtitulo{
    color: white;
    font-size: 30px;
    margin-top: -10px;
}


#img-portada{
    width: 100%;
    height: 15%;
    margin-left: center;
}





/* Controles personalizados y elegantes para #cootragalSlider */
#cootragalSlider .carousel-control-prev,
#cootragalSlider .carousel-control-next{
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: rgba(0,0,0,0.45);
    box-shadow: 0 8px 24px rgba(0,0,0,0.35);
    border: 1px solid rgba(255,255,255,0.06);
    z-index: 50; /* sobre todo el contenido */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform .18s ease, background .18s ease, opacity .12s ease;
    pointer-events: auto;
}

#cootragalSlider .carousel-control-prev{ left: 12px; }
#cootragalSlider .carousel-control-next{ right: 12px; }

/* Ocultamos el icono por defecto y ponemos un SVG limpio como pseudo-elemento */
#cootragalSlider .carousel-control-prev-icon,
#cootragalSlider .carousel-control-next-icon{ display: none !important; }

#cootragalSlider .carousel-control-prev::after,
#cootragalSlider .carousel-control-next::after{
    content: "";
    width: 22px;
    height: 22px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    display: block;
}

/* Left chevron (SVG data URI) */
#cootragalSlider .carousel-control-prev::after{
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='15 18 9 12 15 6'/></svg>");
}

/* Right chevron */
#cootragalSlider .carousel-control-next::after{
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='9 18 15 12 9 6'/></svg>");
}

/* Hover/focus effect */
#cootragalSlider .carousel-control-prev:hover,
#cootragalSlider .carousel-control-next:hover,
#cootragalSlider .carousel-control-prev:focus,
#cootragalSlider .carousel-control-next:focus{
    background: rgba(0,0,0,0.65);
    transform: translateY(-50%) scale(1.06);
    opacity: 1;
}

/* Evitar que el hero tape el control izquierdo en pantallas grandes */
@media (min-width: 992px){
    .hero-content{ margin-left: 3.5rem; }
}


#contenedor-texto-3{
    
    margin-top: -30%;
    margin-left: -95%;
    background-color: red;
    margin-top: 10%;
                        
}

#logo-potada-text{
    width: 15%;
    margin-left: 23%;
    margin-top: -3%;

}


#img-portada{
    margin-top: -10%;
    height: 3%;
    
}


#btn-control-seleecion{
    width: 240px;
    height: 280px;
   
    margin-left: 20%;
    border-color: grey;
    border-radius: 30px;
}

#logo-1{
    width: 80%;
    height: 65%;
    
}

#logo-2{
    width: 90%;
    height: 65%;
}

#logo-3{
    width: 65%;
    height: 55%;
 

}

#logo-4{
    width: 65%;
    height: 55%;
}

#tabla-1{
    margin-left: 17%;
    margin-top: 40px;
    width: 65%;
    
}

#container-img-logo{
    margin-top: 20%;
    background-color: red;
}


#container-inicio{
    
    background-image: linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 0)),
    url("/img/banner/2.png");
    background-size: cover;
    width: 100%;
    height: 50vh; /* Ajusta la altura según lo necesario */
    display: flex;
    justify-content: center;
    align-items: center;
    
}




#img-logo-1 { /*/ LOGO DE COOTRAGAL, PAGINA PRINCIPAL */
    width: 11%;
    height:40%;
    margin-top: 7%;
    margin-right: 60%;
     
}

#txt_titulo{
    font-size: 4vw;
    color: white;
    font-family: arial;
    font-weight: 900;
    -webkit-text-stroke-width: 1px;
    -webkit-text-stroke-color: black;
   
}

#contenedor-texto-1{
    
    margin-top: -22%;
    margin-left: -2%;
    width: auto;
    -webkit-text-stroke-width: 1px;
    -webkit-text-stroke-color: black;
    font-family: Arial;
    
} 

#contenedor-texto-2 { 
    font-size:3.53; 
    margin-top: -2%;
    margin-left: -1%;
    -webkit-text-stroke-width: 1px;
    -webkit-text-stroke-color: black;
    
}



/* INICIO DE DIVISOR DIFUMINADO  */

body
    {
    margin:0;
    padding:0;
    
    }


    .editorial {
        width: 100vw; /* Ocupar exactamente el ancho de la pantalla */
        height: 10%; /* Mantener proporciones */
        margin-top: 24%;
        display: block;
        position: absolute; /* Permite ajustar la posición */
        left: 0; /* Evita desplazamientos incorrectos */
        top: 0;
        overflow: hidden;
    }
    
    
 /* FIN DE DIVISOR DIFUMINADO  */

 #container-operaciones{
    padding: 1.5%;
    height: auto;
    margin-top: 8% !important;
   
        
}

#btn-operaciones{
    width: 100px;
    height: auto;
    border-color: rgb(0, 76, 255);
    border-radius: 30px;
}

#img-logo-operaciones{
    width: 12rem;
    height: 12rem;
}


/**inicio configuracion de servicios*/

#container-servicios{

    /*background-color: rgba(56, 56, 56, 0);*/

    margin-top: 1%;
    margin-left: auto;
    padding: 1.5%; 

}

#container-servicios-1{
    background-color: green;
    width: 100% !important;
    height: 510px;
    background-image: linear-gradient(#ffffff, rgba(255, 255, 255, 0.84),  rgba(255, 255, 255, 0.84)),
    url("/img/banner/1.jpg");

    background-repeat: no-repeat; /*Caracteristica que permite de la foto no se cargue en mosaico*/
    background-position: center; /*Caracteristica que centra la imagen*/
    background-size: cover; /*Caracteristica que cubre todo el contenedor*/
    
}

@media screen and (max-width: 768px) {

    #container-servicios-1{
        height: 760px !important;
        background-color: blue;
    }

        #imagen-carrusel-2{
        width: 40% !important;
        height: 40%;
        margin-top: -6.9%;
    }

    
    
}

#row-btn-servicios{
    width: 500px;
    height: auto;
    margin-left: -5%;
    margin-top: 10% !important;

  
}

#btn-servicios{
    width: 120px !important;
    height: 200px;
    border-color: rgb(96, 96, 96);
    border-radius: 20px;
    margin-bottom: 15px;

}


#img-logo-servicios{
    width: 4rem;
    height: 4rem;
}


#txt-servicios{
    margin-top: 6%;
    font-size: 56px;
   


}

#container-descrip-servicios{
    margin-top: 5%;
    margin-left: 160px;
    width: 42%; 
    font-size: 19px;
                              
}

#tabla-servicios-1{
    margin-left: 55%;
    margin-top: -13%;
    width: 40%;
    font-size: 150px;
                    
}

#logo-5{
    width: 109px;
    height: 106px;
    
}

#demo{
    margin-top: -6.9%;
}




@media screen and (max-width: 768px) {

    
}
/* Ajustes para que el carrusel ocupe la altura visible (viewport height)
   - Se aplica a .carousel, .carousel-inner y .carousel-item para que el
     contenedor ocupe 100vh y el overlay/imágenes se ajusten correctamente.
   - En pantallas pequeñas se reduce la altura para mejor experiencia móvil. */

.carousel,
.carousel-inner,
.carousel-item {
    height: 100vh;
    margin-top: 2%;
}

.carousel-item img {
    width: 100%;
    height: 100vh; /* asegurar que la imagen llene la altura del item */
    object-fit: cover;
    display: block;
    z-index: 0; /* La imagen es la capa más baja */
    max-height: 100vh;
}

.carousel-item .overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6); /* Color y opacidad deseada para el oscurecimiento */
    z-index: 1; /* El overlay está encima de la imagen (z-index: 0) */
}

.hero-content {
    z-index: 3; /* El contenido (texto y botones) está encima del overlay (z-index: 1) */
    width: 70%;
    max-width: 1000px;
    /* Permitimos interacción con botones/enlaces dentro del hero */
    pointer-events: auto;
    text-align: left;
    padding: 0 1rem;
}

/* Estilos para la sección de características / tarjetas debajo del slider */
.features-section{
    margin-top: -160px; /* subir más para mezclar con el slider */
    position: relative;
    z-index: 6; /* asegurar que quede encima del slider */
    pointer-events: auto;
    color: red;
}
.feature-card{
    border-radius: 18px;
    border-color: #010b12;
    background: #ffffff;
    color: #11303b; /* color por defecto del texto dentro de la tarjeta */
    padding: 1.25rem;
    box-shadow: 0 8px 24px rgba(0, 136, 255, 0.08);
    transition: transform .18s ease, box-shadow .18s ease;
    
    
}
.feature-card .card-body{ 
    display:flex; flex-direction:column; 
}

.feature-card .icon i{
    font-size: 40px;
    color: #1f4b6b;
}

.feature-card:hover .icon i{
    font-size: 40px;
    color: #ffffff;
    
}

.feature-card .card-title{
    margin-top: 0.5rem;
    color: #11303b;
}

/* Reglas específicas para garantizar el color del texto dentro de .feature-card */
.feature-card,
.feature-card .card-body,
.feature-card .card-title,
.feature-card p,
.feature-card .card-text,
.feature-card small{
    color: #000000 !important;
}

.feature-card:hover,
.feature-card:hover .card-body,
.feature-card:hover .card-title,
.feature-card:hover p,
.feature-card:hover .card-text,
.feature-card:hover small{
    color: #ffffff !important;
}

.feac

.feature-card:hover .card-title{
    margin-top: 0.5rem;
    color: rgb(255, 255, 255);
}

.feature-card:hover{
    transform: translateY(-6px);

}
/* Botón dentro de las tarjetas */
.btn-action{
    background: #ffffff; /* azul rey por defecto */
    color: #000000;
    border: none;
    padding: 0.6rem 1.2rem;
    font-size: 0.95rem;
    font-weight:600;
    border-radius: 20px;
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    box-shadow: 0 8px 20px rgba(65,105,225,0.12);
    transition: background-color .18s ease, transform .12s ease, box-shadow .12s ease;
}
.feature-card .card-body .btn-action{ margin: auto auto 1.25rem; color: inherit; display: inline-flex; }

.btn-action:hover{
    background: #2f56c8; /* azul más oscuro en hover */
    transform: translateY(-2px);
    box-shadow: 0 18px 40px rgba(47,86,200,0.14);
}

h5{
    color: #ffffff;
}
.btn-action .btn-icon{
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #2f56c8;
    color: #ffffff; /* icono en azul rey por defecto */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 6px 18px rgba(8,59,80,0.08);
    transition: transform .12s ease, background-color .12s ease;
}

.btn-action .btn-icon i{ font-size:18px; line-height:1; display:inline-block; margin:0; padding:0; vertical-align:middle; }

/* Asegurar que el botón quede centrado dentro de la tarjeta */
.feature-card .card-body{ display:flex; flex-direction:column; align-items:center; }
.feature-card .card-body .btn-action{ align-self:center; }
.btn-action:hover .btn-icon{
    transform: translateX(4px);
    background: #ffffff !important; /* el círculo pasa de blanco a azul al hover */
    color: #000000 !important; /* icono blanco sobre círculo azul */
}
/* Sincronizar focus/active con el hover (azul rey) */
.btn-action:focus,
.btn-action:focus-visible,
.btn-action:active,
.btn-action.active{
    background: #4169e1 !important;
    color: #ffffff !important;
    box-shadow: 0 18px 40px rgba(65,105,225,0.14) !important;
    transform: translateY(-2px);
    outline: none;
}
.btn-action:focus .btn-icon,
.btn-action:active .btn-icon,
.btn-action.active .btn-icon,
.btn-action:focus-visible .btn-icon{
    background: #ffffff;
    color: #e14141;
    transform: translateX(6px) scale(1.02);
}
@media (max-width: 767px){
    .features-section{
        margin-top: -80px; /* móvil: también subir más */
    }
    .feature-card .icon i{ font-size: 32px; }
}

/* Estilos para la nueva sección 'Nuestros Servicios' */
.services-section{
    /* Fondo: imagen + ligero overlay para asegurar legibilidad */
    background-image: linear-gradient(rgb(255, 255, 255), rgba(81, 81, 81, 0.28)), url("../storage/img/portadas/1.6.jpg");
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    background-attachment: scroll;
        padding-top: 3.0rem;
        padding-bottom: 2.5rem;
        margin-bottom: 0; /* evitar espacio extra bajo la sección */
    height: 35.5em;
}
.services-section .services-indicator{ display:inline-block }
.services-section .services-indicator span{ display:inline-block; width:36px; height:8px; background:#ffffff; margin:0 6px; border-radius:8px }
.services-section .services-indicator span.active{ background:var(--accent) }
.service-card{ border-radius:12px; box-shadow:0 12px 30px rgba(27,40,56,0.06); overflow:hidden }
.service-card .card-body{ padding:2.25rem }
.service-card .service-badge{ width:56px; height:56px; display:flex; align-items:center; justify-content:center; border-radius:8px }
.service-card .card-title{ margin-top:0.2rem }
.service-card .card-text{ color:#6b7280 }
.btn-cta{ background:var(--accent); color:var(--accent-contrast); border-radius:999px; padding:0.6rem 1.1rem; font-weight:600; display:inline-flex; align-items:center; gap:0.6rem; box-shadow:0 10px 30px rgba(65,105,225,0.12); border:none }
.btn-cta .cta-icon{ width:38px; height:38px; border-radius:50%; background:#fff; color:var(--accent); display:inline-flex; align-items:center; justify-content:center; box-shadow:0 6px 18px rgba(8,59,80,0.06); transition:all .18s }
.btn-cta:hover{ background:var(--accent-dark) }
.btn-cta:hover .cta-icon{ background:var(--accent); color:var(--accent-contrast); transform:translateX(6px) }


/* Asegurar que los botones/enlaces dentro del hero sean clicables */
.hero-content a,
.hero-content button{ pointer-events: auto; cursor: pointer; }


body {
    font-family: Brandon grostesque, serif;
    font-weight: 300; /* Light weight */
}


@media (max-width: 768px) {

    #contenedor-servicios-1{
        margin-top: 0%;
        margin-left: 0%;
        width: 100%;
        height: 900px !important;
        background-color: blue;
    }

    /* Centrar hero en pantallas pequeñas */
    .hero-content{
        width: 90%;
        text-align: center;
        left: 50% !important;
        transform: translate(-50%, -50%) !important;
        margin-left: 0;
        padding: 0 0.5rem;
    }

    #img-carrusel-2{
        width: 75% !important;
        height: 75%;
        margin-top: 15%;
        margin-left: 13%;
    }

    #carrusel-comentario-conductor-1{
        width: 80%;
        height: 33%;
        margin-top: -42% !important;
        margin-left: 10%;
    }

        #carrusel-comentario-gerente{
        width: 80%;
        height: 28%;
        margin-top: -51% !important;
        margin-left: 10%;
        background-color: salmon;
    }

    #row-btn-servicios{
        width: 120%;
        height: auto;
        margin-left: -24%;
        margin-top: 10% !important;
        background-color: rgb(0, 76, 255);
    }
}






    /* Media query específico: reducir la altura del carrusel en móviles
       para que no ocupe tanto espacio en pantallas pequeñas */
    @media (max-width: 768px) {
        .carousel,
        .carousel-inner,
        .carousel-item {
            height: 60vh;
        }

        .carousel-item img {
            height: 60vh;
            max-height: 60vh;
        }
    }


/* Tipografía del hero: usar Poppins para título, tagline y texto */
.hero-content h1{
    font-family: 'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    font-weight: 800;
    letter-spacing: -0.02em;
}
.hero-content .tagline{
    font-family: 'Poppins', sans-serif;
}
.hero-content p.lead{
    font-family: 'Poppins', sans-serif;
    font-weight: 400;
}

/* ===== Sección Contacto / Footer ===== */
.contact-section{ background: linear-gradient(180deg, rgba(17,22,26,0.85), rgba(8,12,16,0.9)); position: relative; }
.contact-section h5{ color: #ffffff; }
.contact-section p.small{ color: rgba(255,255,255,0.85); }
.contact-section .map-box{ border-radius:8px; overflow:hidden; box-shadow: 0 12px 36px rgba(0,0,0,0.45); }
.contact-section .btn-outline-light{ border-color: rgba(255, 0, 0, 0.12); color: rgba(255,255,255,0.95); }

.site-footer{ background: linear-gradient(180deg, rgb(115, 115, 115), rgb(115, 115, 115)); border-top: 1px solid rgba(255,255,255,0.04); }
.site-footer .social-icons a{ color: rgba(255,255,255,0.75); font-size: 1.05rem; }

@media (max-width: 767px){
    .contact-section .row{ text-align: center; }
    .contact-section .col-md-3{ margin-bottom:1rem; }
}