body {
    margin: 0;
    padding: 0;
    background-color: white;
    min-height: 100vh;
    position: relative;
}

/* BARRA DE NAVEGACIÓN INICIO */
/* Navbar general */
.navbar {
    background: #080bca !important;
}

.logo-navbar {
    max-height: 60px;
    height: auto;
}

@media (max-width:768px) {
    .logo-navbar {
        height: 50px;
    }
}

.navbar-main .nav-link {
    color: rgb(255, 255, 255);
    position: relative;
    margin-left: 15px;
}

/* Para activar en la página actual */
.navbar .nav-link.active {
    color: rgb(0, 0, 0) !important;
    font-weight: bold;
}

/* Animación de línea para links normales */
.navbar-main .nav-link:not(.dropdown-toggle)::after {
    content: "";
    position: absolute;
    width: 0;
    height: 2px;
    left: 0;
    bottom: 0;
    background-color: #00D4FF;
    transition: width 0.3s;
}

.navbar-main .nav-link:not(.dropdown-toggle):hover::after {
    width: 100%;
}

/* Animación de línea para dropdown */
.navbar-main .dropdown-toggle::before {
    content: "";
    position: absolute;
    width: 0;
    height: 2px;
    left: 0;
    bottom: 0;
    background-color: #00D4FF;
    transition: width 0.3s;
    pointer-events: none; /* Evita bloquear el clic */
    z-index: 0;
}

.navbar-main .dropdown-toggle:hover::before {
    width: 100%;
}

.navbar-main .nav-link:hover {
    color: #00D4FF;
}

/* Flecha del dropdown */
.dropdown-toggle::after {
    display: inline-block;
    margin-left: 6px;
    vertical-align: middle;
    transition: transform 0.3s ease;
}

/* Girar flecha cuando el dropdown está abierto */
.dropdown-toggle.show::after {
    transform: rotate(180deg);
}

/* Estilo de los items del menú desplegable */
.dropdown-menu li {
    border-bottom: 1px solid rgba(0, 0, 0, 0.2);
}

.dropdown-menu li:last-child {
    border-bottom: none;
}
/* BARRA DE NAVEGACIÓN FIN */

/* FLECHA INICIO */
.back-to-top {
    position: fixed;
    right: 30px;
    bottom: 30px;

    background: none;
    width: auto;
    height: auto;

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

    text-decoration: none;

    opacity: 0;
    visibility: hidden;
    transition: 0.3s;
}

.back-to-top.mostrar {
    opacity: 1;
    visibility: visible;
}

.flecha {
    font-size: 60px !important;
    line-height: 1;
    color: #000000;
    text-shadow: 0 5px 10px rgba(0, 0, 0, 0.5);
}

.flecha:hover {
    transform: scale(1.2);
}

.seccion-inicio {
    padding: 60px 20px;
}

.back-regresar{
    bottom: 110px;
}


/* FLECHA FIN */

/* INDEX PÁGINA INICIO */
/*sección iconos*/
.seccion-inicio {
    padding-top: 20px;
    padding-bottom: 10px;
}

.carta {
    display: flex;
    justify-content: center;
    gap: 30px;
    flex-wrap: wrap;
}

.inicio-carta {
    background: #f2f2f2;
    padding: 15px 25px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    gap: 15px;
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
}

/*encabezado*/
.header-main {
    padding-top: 20px;
    padding-bottom: 40px;
}

/*contenedor de cartas*/
.carta {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 40px;
    flex-wrap: wrap;
}

/*cartas*/
.inicio-carta {
    background: #f3f3f3;
    padding: 25px 30px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    gap: 15px;
    max-width: 280px;

    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}


.inicio-carta p {
    margin: 0;
}

@media (max-width:768px) {
    .inicio-carta {
        flex-direction: column;
        text-align: center;
    }
}

/*contenedor gris*/
.container-servicios {
    background: #0602f321;
    padding: 60px 30px;
    border-radius: 20px;
    max-width: 1100px;
    /* controla el tamaño */
    margin: 0 auto;
    /* lo centra */
}

/*tarjetas*/
#servicios .card {
    border: none;
    border-radius: 12px;
    padding: 30px 20px;
    background: #f3f3f3;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
    transition: 0.3s;
}

#servicios .card:hover {
    transform: translateY(-6px);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15);
}

/*círculo azul del icono*/
.icono-servicio {
    width: 90px;
    height: 90px;
    background: #e7f1ff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 25px auto 10px auto;
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.1);
}

.icono-servicio .material-icons {
    font-size: 60px;
    color: #0d6efd;
}

.icono-servicio {
    transition: 0.3s;
}

.card:hover .icono-servicio {
    transform: scale(1.1);
}

/*contenedor gris*/
.container-soluciones {
    background: #0602f321;
    padding: 60px 30px;
    border-radius: 20px;
    max-width: 1100px;
    /* controla el tamaño */
    margin: 0 auto;
    /* lo centra */
}

/*tarjetas*/
#soluciones .card {
    border: none;
    border-radius: 12px;
    padding: 30px 20px;
    background: #f3f3f3;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
    transition: 0.3s;
}

#soluciones .card:hover {
    transform: translateY(-6px);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15);
}

/*círculo azul del icono*/
.icono-solucion {
    width: 90px;
    height: 90px;
    background: #e7f1ff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 25px auto 10px auto;
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.1);
}

.icono-solucion .material-icons {
    font-size: 40px;
    color: #0d6efd;
}

.icono-solucion {
    transition: 0.3s;
}

.card:hover .icono-solucion {
    transform: scale(1.1);
}

/* INDEX PÁGINA FIN */

/* FOOTER INICIO */
.footer-main {
    background: #080bca;
    color: #fff;
    padding: 50px 0 20px 0;
}

.footer-titulo {
    font-weight: bold;
    margin-bottom: 15px;
}

.footer-links {
    list-style: none;
    padding: 0;
}

.footer-links li {
    margin-bottom: 8px;
}

.footer-links li:hover {
    color: #00D4FF;
    cursor: pointer;
}

.footer-main .material-icons {
    font-size: 18px;
    vertical-align: middle;
    margin-right: 5px;
}

.footer-copy {
    font-size: 14px;
    color: #aaa;
}

/* FOOTER FIN */

/* CONTPAQI PÁGINA INICIO */
.banner-contpaqi{
    background: #0d6efd;
}

.contpaqi-section h2 {
    font-weight: 700;
}

.nav-pills .nav-link {
    border-radius: 30px;
    margin: 5px;
    padding: 10px 25px;
    font-weight: 500;
    color: #555;
    transition: 0.3s;
}

.nav-pills .nav-link.active {
    background: #0d6efd;
    color: #fff;
}

.contpaqi-card {
    border: none;
    border-radius: 16px;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.08);
    transition: 0.3s;
}

.contpaqi-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.15);
}

.contpaqi-inicio {
    background: #f5f7fb;
    padding: 60px 40px;
    border-radius: 20px;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.08);
}

.img-contpaqi {
    width: 160px;
    height: auto;
    margin: 0 auto 10px auto;
    display: block;
    object-fit: contain;
}

.contpaqi-card .card-body {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
}

.tab-pane {
    animation: fadeIn 0.6s;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

#carouselContpaqi {
    max-width: 900px;
    margin: auto;
}

.carousel-inner {
    border-radius: 10px;
    overflow: hidden;
}

.carousel-item {
    height: auto;
}

.carousel-item img {
    width: 100%;
    height: auto;
}

@media (max-width:768px) {
    .carousel-item {
        height: 220px;
    }
}

.carousel-control-prev-icon,
.carousel-control-next-icon {
    background-color: rgb(0, 0, 0);
    border-radius: 50%;
    padding: 20px;
}

.carousel-indicators button {
    background-color: #000000;
    width: 12px;
    height: 12px;
    border-radius: 50%;
}

/* CONTPAQI PÁGINA FIN */

/* NOSOTROS PÁGINA INICIO */
.img-acerca {
    max-width: 600px;
}

.equipo-card {
    background: #fff;
    padding: 25px;
    border-radius: 12px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
    transition: .3s;
    height: 260px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.equipo-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.12);
}

.equipo-header {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
}

.equipo-img {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    object-fit: cover;
    margin-right: 10px;
}

.equipo-info h5 {
    margin: 0;
    font-weight: 600;
}

.equipo-info span {
    font-size: 14px;
    color: #0508eed7;
}

.equipo-card p {
    font-size: 14px;
    color: #555;
    line-height: 1.2;
    min-height: 60px;
}

/*puntos del carrusel*/
.swiper-pagination {
    position: relative !important;
    margin-top: 50px;
    text-align: center;
}

.swiper-pagination-bullet {
    width: 20px !important;
    height: 20px !important;
    background: #000000 !important;
    opacity: 1 !important;
    margin: 0 6px !important;
    border-radius: 50%;
    transition: 0.3s;
}

.swiper-pagination-bullet-active {
    width: 60px !important;
    height: 20px;
    border-radius: 10px !important;
    opacity: 1;
    background: #0804fa !important;
    transition: all .3s ease;
}

.swiper-slide {
    height: auto;
    display: flex;
}

/* NOSOTROS PÁGINA FIN */

/* CAMARAS PÁGINA INICIO */
.banner-camaras {
    background: #0d6efd;
    padding: 60px 0;
}

.tarjeta-camaras {
    border: none;
    border-radius: 12px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
    transition: 0.3s;
}

.tarjeta-camaras:hover {
    transform: translateY(-10px);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.2);
}

.icono-camaras {
    font-size: 60px !important;
    color: #0d6efd;
}

.producto-card-camaras {
    background: white;
    padding: 30px;
    border-radius: 10px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    height:100%;
}

#carouselCamaras {
    max-width: 900px;
    margin: auto;
}

/* CAMARAS PÁGINA FIN */


/* COMPUTADORAS PÁGINA INICIO */
.banner-computadoras {
    background: #0d6efd;
    padding: 60px 0;
}

.tarjeta-computadoras {
    border: none;
    border-radius: 12px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
    transition: 0.3s;
}

.tarjeta-computadoras:hover {
    transform: translateY(-10px);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.2);
}

.icono-computadoras {
    font-size: 60px !important;
    color: #0d6efd;
}

.producto-card-computadoras {
    background: white;
    padding: 30px;
    border-radius: 10px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    height:100%;
}

#carouselComputadoras {
    max-width: 900px;
    margin: auto;
}
/* COMPUTADORAS PÁGINA FIN */

/* IMPRESORAS PÁGINA INICIO */
.banner-impresora {
    background: #0d6efd;
    padding: 60px 0;
}

.tarjeta-impresora {
    border: none;
    border-radius: 12px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
    transition: 0.3s;
}

.tarjeta-impresora:hover {
    transform: translateY(-10px);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.2);
}

.icono-impresora {
    font-size: 60px !important;
    color: #0d6efd;
}

.producto-card-impresora {
    background: white;
    padding: 30px;
    border-radius: 10px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    height:100%;
}

#carouselImpresora {
    max-width: 900px;
    margin: auto;
}
/* IMPRESORAS PÁGINA FIN */

/* REDES PÁGINA INICIO */
.banner-red {
    background: #0d6efd;
    padding: 60px 0;
}

.tarjeta-red {
    border: none;
    border-radius: 12px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
    transition: 0.3s;
}

.tarjeta-red:hover {
    transform: translateY(-10px);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.2);
}

.icono-red {
    font-size: 60px !important;
    color: #0d6efd;
}

.producto-card-red {
    background: white;
    padding: 30px;
    border-radius: 10px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    height:100%;
}

#carouselRed {
    max-width: 900px;
    margin: auto;
}
/* REDES PÁGINA FIN */

/* SERVIDORES PÁGINA INICIO */
.banner-servidor {
    background: #0d6efd;
    padding: 60px 0;
}

.tarjeta-servidor {
    border: none;
    border-radius: 12px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
    transition: 0.3s;
}

.tarjeta-servidor:hover {
    transform: translateY(-10px);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.2);
}

.icono-servidor {
    font-size: 60px !important;
    color: #0d6efd;
}

.producto-card-servidor {
    background: white;
    padding: 30px;
    border-radius: 10px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    height:100%;
}

#carouselServidor {
    max-width: 900px;
    margin: auto;
}
/* SERVIDORES PÁGINA FIN */

/* PAPELERIA PÁGINA INICIO */
.banner-papeleria {
    background: #0d6efd;
    padding: 60px 0;
    margin-bottom: 100px;
}

.tarjeta-papeleria {
    border: none;
    border-radius: 12px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
    transition: 0.3s;
}

.tarjeta-papeleria:hover {
    transform: translateY(-10px);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.2);
}

.icono-papeleria {
    font-size: 60px !important;
    color: #0d6efd;
}

.producto-card {
    background: white;
    padding: 30px;
    border-radius: 10px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}
/* PAPELERIA PÁGINA FIN */

/* MOBILIARIO PÁGINA INICIO */
.banner-mobiliario{
    background: #0d6efd;
    padding:60px 0;
    margin-bottom: 100px;
}

.tarjeta-mobiliario {
    border: none;
    border-radius: 12px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
    transition: 0.3s;
}

.tarjeta-mobiliario:hover {
    transform: translateY(-10px);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.2);
}

.icono-mobiliario {
    font-size: 60px !important;
    color: #0d6efd;
}

.producto-card {
    background: white;
    padding: 30px;
    border-radius: 10px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}
/* MOBILIARIO PÁGINA FIN */

/* LIMPIEZA PÁGINA INICIO */
.banner-limpieza {
    background: #0d6efd;
    padding: 60px 0;
    margin-bottom: 100px;
}

.tarjeta-limpieza {
    border: none;
    border-radius: 12px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.1);
    transition: 0.3s;
}

.tarjeta-limpieza:hover {
    transform: translateY(-10px);
    box-shadow: 0 12px 30px rgba(0,0,0,0.2);
}

.icono-limpieza {
    font-size: 60px !important;
    color: #0d6efd;
}

.producto-card {
    background: white;
    padding: 30px;
    border-radius: 10px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}
/* LIMPIEZA PÁGINA FIN */

/* CAFETERIA PÁGINA INICIO */
.banner-cafeteria{
    background: #0d6efd;
    padding: 60px 0;
    margin-bottom: 100px;
}

.tarjeta-cafeteria{
  border:none;
  border-radius:12px;
  box-shadow:0 5px 20px rgba(0,0,0,0.1);
  transition:0.3s;
}

.tarjeta-cafeteria:hover{
  transform:translateY(-10px);
  box-shadow:0 12px 30px rgba(0,0,0,0.2);
}

.icono-cafeteria{
  font-size:60px !important;
  color:#0d6efd;
}

.producto-card{
  background:white;
  padding:30px;
  border-radius:10px;
  box-shadow:0 4px 15px rgba(0,0,0,0.1);
}
/* CAFETERIA PÁGINA FIN */

/* CONTPAQI GENERAL */
.banner-contpaqisub{
    background: #e4efff;
    align-items: center;
}

.logo-contpaqi{
    max-width:300px;
}

.img-contpaqisub{
    max-width: 100%;
    height: auto;
    margin: 0 auto 10px auto;
    display: block;
}

.beneficios-contpaqi{
    background:#1565c0;
    margin-bottom: 100px;
}

.card-beneficio{
    background:#f5f5f5;
    border-radius:12px;
    padding:25px;
    color:#333;
    height:100%;
    transition:all .3s ease;
}

.card-beneficio:hover{
    transform:translateY(-5px);
    box-shadow:0 10px 25px rgba(0,0,0,0.15);
}

.icon-beneficio{
    font-size:50px !important;
    color:#03a9f4;
}

.card-licenciamiento{
    background:#fff;
    border-radius:20px;
    padding:25px;
    box-shadow:0 10px 25px rgba(0,0,0,0.1);
    transition:all 0.3s ease;
    max-width:1000px;
    margin:auto;
}

.card-licenciamiento img{
    max-width:900px;
    margin-top:10px;
}

.card-licenciamiento:hover{
    transform:translateY(-8px);
    box-shadow:0 15px 35px rgba(0,0,0,0.15);
}

/* PRESUPUESTO PÁGINA INICIO */
.banner-presupuesto {
    background: #0d6efd;
    padding: 60px 0;
    margin-bottom: 100px;
}

.icono-presupuesto {
    font-size: 100px !important;
    color: #0d6efd;
}

/* PRESUPUESTO PÁGINA FIN */

/* SUGERENCIAS PÁGINA INICIO */
.banner-sugerencias {
    background: #0d6efd;
    padding: 60px 0;
    margin-bottom: 100px;
}

.icono-sugerencias {
    font-size: 100px !important;
    color: #0d6efd;
}

/* SUGERENCIAS PÁGINA FIN */

/* CONTACTO PÁGINA INICIO */
.banner-contacto {
    background: #0d6efd;
    padding: 60px 0;
    margin-bottom: 100px;
}

.icono-contacto {
    font-size: 25px !important;
    color: #0d6efd;
}


.red-social{
  width:45px;
  height:45px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  color:white;
  text-decoration:none;
  transition:0.3s;
}

.red-social span{
  font-size:24px;
}

/* COLORES */
.facebook{ background:#1877f2; }
.instagram{ background:#e1306c; }
.whatsapp{ background:#25d366; }
.tiktok{ background:#000; }
.x{ background:#000; }

/* HOVER */
.red-social:hover{
  transform:scale(1.1);
  opacity:0.9;
}
/* CONTACTO PÁGINA FIN */

/* PRIVACIDAD PÁGINA INICIO */
.banner-privacidad {
    background: #0d6efd;
    padding: 40px 0;
    margin-bottom: 100px;
}
/* PRIVACIDAD PÁGINA FIN */