@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@600;700&display=swap');

/* =========================================================
   GENERAL
   ========================================================= */
.titulo-hero {
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 700;
}

/* Botón volver arriba */
.back-to-top {
    background-color: #6C5549 !important;
    border-color: #6C5549 !important;
}

.back-to-top:hover {
    background-color: #55433a !important;
    border-color: #55433a !important;
}

.footer .footer-servicios .btn.btn-link:hover {
    letter-spacing: normal;
}

.footer .btn-contacto-footer {
    background-color: #000000;
    border-color: #000000;
    color: #ffffff;
}

.footer .btn-contacto-footer:hover,
.footer .btn-contacto-footer:focus,
.footer .btn-contacto-footer:active {
    background-color: #6C5549;
    /* marrón */
    border-color: #6C5549;
    color: #ffffff;
}

/* =========================================================
   NAVBAR (barra superior + menú)
   ========================================================= */

/* Fondo negro: barra superior y navbar */
.fixed-top .bg-white,
.navbar.bg-white {
    background-color: #242424 !important
}

/* Logo en blanco */
.navbar .navbar-brand img {
    filter: brightness(0) invert(1)
}

/* Textos de la barra superior en blanco */
.top-bar,
.top-bar small {
    color: #fff !important
}

/* Enlaces del menú en blanco */
.navbar .navbar-nav .nav-link,
.navbar-light .navbar-nav .nav-link {
    color: #fff !important
}

/* Seleccionado y hover */
.navbar .nav-link:hover,
.navbar .nav-link.active,
.navbar .nav-link.dropdown-toggle.show,
.navbar-light .navbar-nav .nav-link:hover,
.navbar-light .navbar-nav .nav-link.active {
    color: #c8c8c8 !important
}

/* Íconos (mapa, reloj, correo, teléfono y redes) en blanco */
.fixed-top .text-primary {
    color: #fff !important
}

/* Círculos de redes sociales */
.navbar .btn.btn-light {
    background-color: #4c4c4c !important;
    border-color: #4c4c4c !important;
}

/* Botón hamburguesa en móvil */
.navbar-light .navbar-toggler {
    border-color: #fff
}

.navbar-light .navbar-toggler-icon {
    filter: invert(1)
}

/* Menú desplegable "Novedades" */
.navbar .dropdown-menu {
    background-color: #242424;
    border: 0
}

.navbar .dropdown-item {
    color: #fff !important
}

.navbar .dropdown-item:hover,
.navbar .dropdown-item.active {
    background-color: #4c4c4c !important;
    color: #fff !important;
}

/* Menú desplegado en móvil */
@media (max-width:991.98px) {
    .navbar .navbar-collapse {
        background-color: #242424
    }
}

/* =========================================================
   CARRUSEL
   ========================================================= */

/* Filtro oscuro sobre las imágenes */
#header-carousel .carousel-item {
    position: relative
}

#header-carousel .carousel-item::after {
    content: "";
    position: absolute;
    inset: 0;
    background-color: rgba(36, 36, 36, .50);
    pointer-events: none;
    z-index: 1;
}

#header-carousel .carousel-caption {
    z-index: 2;
    background: transparent !important;
}

/* Botón "Ver más" */
#header-carousel .btn.btn-primary {
    background-color: #242424;
    border: 0;
    color: #fff;
}

#header-carousel .btn.btn-primary:hover,
#header-carousel .btn.btn-primary:focus {
    background-color: #000;
    border: 0;
    color: #fff;
}

/* Puntitos indicadores */
#header-carousel .carousel-indicators {
    z-index: 3;
    margin-bottom: 1.5rem;
}

#header-carousel .carousel-indicators [data-bs-target] {
    width: 8px;
    height: 8px;
    border: 0;
    border-radius: 50%;
    margin: 0 5px;
    background-color: #fff;
    opacity: .5;
}

#header-carousel .carousel-indicators .active {
    opacity: 1
}

/* Flechas ocultas (solo se usan por código) */
#header-carousel .carousel-control-prev,
#header-carousel .carousel-control-next {
    display: none !important
}

#header-carousel {
    cursor: pointer;
    user-select: none
}

/* =========================================================
   SECCIÓN "POR QUÉ ELEGIRNOS"
   ========================================================= */

/* Botón "Contáctanos" */
.porque-eigha .btn.btn-primary {
    background-color: #6C5549;
    border-color: #6C5549;
    color: #fff;
}

.porque-eigha .btn.btn-primary:hover,
.porque-eigha .btn.btn-primary:focus,
.porque-eigha .btn.btn-primary:active {
    background-color: #000;
    border-color: #000;
    color: #fff;
}

/* Círculos de los íconos */
.porque-eigha .bg-primary {
    background-color: #6C5549 !important
}

/* Fondo de las tarjetas */
.porque-eigha .tarjeta-eigha {
    background-color: #F9F9F9;
    border-color: #F9F9F9 !important;
}

/* =========================================================
   SERVICIOS (tarjetas giratorias + menú lateral)
   ========================================================= */

/* Tarjeta que gira */
.flip-card {
    perspective: 1200px;
    height: 420px;
    cursor: pointer
}

.flip-inner {
    position: relative !important;
    width: 100%;
    height: 100%;
    transition: transform .7s;
    transform-style: preserve-3d;
}

.flip-card:hover .flip-inner,
.flip-card.flipped .flip-inner {
    transform: rotateY(180deg)
}

.flip-front,
.flip-back {
    position: absolute !important;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: .5rem;
    overflow: hidden;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

.flip-front img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    /* antes: cover */
    background: #F9F9F9;
    /* color de las franjas si sobra espacio */
    display: block;
}

.flip-back {
    transform: rotateY(180deg);
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 2.5rem;
    background: #6C5549;
    color: #fff;
}

.flip-back h3 {
    color: #fff
}

/* Botón activo del menú */
.service .nav-pills .nav-link.active {
    background-color: #6C5549 !important;
    color: #fff !important;
}

.service .nav-pills .nav-link.active h5 {
    color: #fff !important
}

/* Caja del menú */
.service .menu-caja {
    border: 2px solid var(--light);
    border-radius: .75rem;
    padding: .35rem;
    display: flex;
    flex-direction: column;
    gap: .25rem;
    height: 420px;
    box-sizing: border-box;
}

.service .menu-caja .nav-link {
    border: 0 !important;
    margin: 0 !important;
    padding: .3rem .8rem !important;
    flex: 1;
    display: flex;
    align-items: center;
}

.service .menu-caja .nav-link h5 {
    font-size: .95rem;
    line-height: 1.25;
}

@media (max-width:991.98px) {
    .service .menu-caja {
        height: auto;
        gap: .25rem
    }

    .service .menu-caja .nav-link {
        flex: none;
        padding: .55rem .8rem !important
    }
}

/* =========================================================
   FOOTER
   ========================================================= */

/* Fondo del footer */
.footer.bg-dark {
    background-color: #242424 !important
}

/* Botón Registrar */
.footer .btn.btn-primary {
    background-color: #242424;
    border-color: #242424;
    color: #fff;
}

.footer .btn.btn-primary:hover,
.footer .btn.btn-primary:focus,
.footer .btn.btn-primary:active {
    background-color: #000;
    border-color: #000;
    color: #fff;
}

/* Hover de íconos sociales */
.footer .btn-outline-light:hover {
    background-color: #242424 !important;
    border-color: #fff !important;
    color: #fff !important;
}

/* Hover de enlaces del footer */
.footer .btn.btn-link:hover {
    color: #fff !important
}

/* Barra inferior (copyright) */
.copyright {
    background-color: #242424 !important
}

/* =========================================================
   SECCIÓN "NOSOTROS" (Historia / Misión / Visión + tarjetas)
   ========================================================= */

/* Fondo de los dos cuadros */
.nosotros-eigha .border.rounded.p-4 {
    background-color: #F9F9F9;
}

/* Pestañas Historia, Misión y Visión */
.nosotros-eigha .nav-tabs .nav-link {
    color: #6C5549;
}

.nosotros-eigha .nav-tabs .nav-link:hover,
.nosotros-eigha .nav-tabs .nav-link:focus {
    color: #55433a;
}

/* Pestaña activa: texto gris oscuro */
.nosotros-eigha .nav-tabs .nav-link.active,
.nosotros-eigha .nav-tabs .nav-link.active:hover,
.nosotros-eigha .nav-tabs .nav-link.active:focus {
    color: #545454;
    background-color: #F9F9F9;
    border-bottom-color: #F9F9F9;
}

/* Círculos de los íconos (Empresa Homologada, etc.) */
.nosotros-eigha .bg-primary {
    background-color: #6C5549 !important;
}

/* Ícono del teléfono (estaba volteado) */
.nosotros-eigha .fa-phone {
    transform: scaleX(-1);
}

/* =========================================================
   PROYECTOS (tarjetas: Monitoreo, Software, Instalación, Soporte)
   ========================================================= */

/* Círculos de los íconos */
.seccion-tarjetas .bg-primary {
    background-color: #6C5549 !important;
}

/* Botones "Cotizar" */
.seccion-tarjetas .btn.btn-primary {
    background-color: #6C5549;
    border-color: #6C5549;
    color: #fff;
}

.seccion-tarjetas .btn.btn-primary:hover,
.seccion-tarjetas .btn.btn-primary:focus,
.seccion-tarjetas .btn.btn-primary:active {
    background-color: #000;
    border-color: #000;
    color: #fff;
}

/* =========================================================
   NUESTROS PROYECTOS (checks de las listas)
   ========================================================= */
.seccion-proyectos .text-primary {
    color: #6C5549 !important;
}

/* =========================================================
   EQUIPO (fondo de los cuadros)
   ========================================================= */
.seccion-equipo .border.rounded.overflow-hidden {
    background-color: #F9F9F9 !important;
}

/* =========================================================
   NUESTROS CLIENTES (fondo de los recuadros)
   ========================================================= */
.seccion-clientes .border.rounded {
    background-color: #F9F9F9 !important;
}

.seccion-clientes .text-primary {
    color: #6C5549 !important;
}

/* =========================================================
   TRABAJOS (recuadro de texto + botón Enviar)
   ========================================================= */

/* Fondo del recuadro */
.seccion-trabajos .border.rounded {
    background-color: #F9F9F9 !important;
}

/* Botón "Enviar" */
.seccion-trabajos .btn.btn-primary {
    background-color: #6C5549;
    border-color: #6C5549;
    color: #fff;
}

.seccion-trabajos .btn.btn-primary:hover,
.seccion-trabajos .btn.btn-primary:focus,
.seccion-trabajos .btn.btn-primary:active {
    background-color: #000;
    border-color: #000;
    color: #fff;
}

/* =========================================================
   CONTACTO (recuadro + botón Enviar)
   ========================================================= */

/* Fondo del recuadro */
.seccion-contacto .border.rounded {
    background-color: #F9F9F9 !important;
}

/* Botón "Enviar" */
.seccion-contacto .btn.btn-primary {
    background-color: #6C5549;
    border-color: #6C5549;
    color: #fff;
}

.seccion-contacto .btn.btn-primary:hover,
.seccion-contacto .btn.btn-primary:focus,
.seccion-contacto .btn.btn-primary:active {
    background-color: #000;
    border-color: #000;
    color: #fff;
}

.seccion-trabajos p {
    text-align: justify;
}

.nosotros-eigha p {
    text-align: justify;
}

/* Teléfono con bandera */
.seccion-contacto .iti {
    width: 100%
}

.seccion-contacto #phone {
    height: calc(3.5rem + 2px)
}

.iti__dropdown-content {
    z-index: 1050
}

/* Teléfono con bandera */
.seccion-trabajos .iti {
    width: 100%
}

.seccion-trabajos #phone {
    height: calc(3.5rem + 2px)
}