/* Fondo partido */
.tecnologia{ position:relative; background-color:var(--bs-primary); }
.tecnologia::after{ content:""; position:absolute; left:0; right:0; bottom:0; top:var(--cut,220px); background:#F5F5F5; z-index:0; }
.tecnologia > .container, .tecnologia .card{ position:relative; z-index:1; }

/* Tarjetas */
.tcard .card{ box-shadow:none; transition:box-shadow .25s ease, transform .25s ease; }
.tcard .tcard-media{ height:150px; }
.tcard .img-hover{ position:absolute; inset:0; opacity:0; transition:opacity .3s ease; }
.tcard .img-default{ opacity:1; transition:opacity .3s ease; }

/* Pie de las cards con alto fijo */
.tcard .card-body{ 
  height: 100px; 
  display: flex; 
  align-items: center; 
  justify-content: flex-start; 
}

/* Badge + flechas: DIAGONAL “/” correcta */
.tcard .tcard-badge{
  position:absolute; top:.5rem; right:.5rem;
  width:36px; height:36px; color:#fff;
  display:inline-flex; align-items:center; justify-content:center;
  transition:transform .25s ease, background-color .25s ease;
}
.tcard .arrow-up  { position:absolute; transform:rotate(-45deg);  opacity:1; transition:opacity .2s ease; } /* ↗ */
.tcard .arrow-down{ position:absolute; transform:rotate(135deg);  opacity:0; transition:opacity .2s ease; } /* ↙ */

/* Texto alterno en hover */
.tcard .title-alt{ display:none; }
.tcard:hover .title-main{ display:none; }
.tcard:hover .title-alt{ display:inline; }

/* Hover */
.tcard:hover .img-hover{ opacity:1; }
.tcard:hover .img-default{ opacity:0; }
.tcard:hover .tcard-badge{ transform:translate(-8px,10px); }
.tcard:hover .arrow-up{   opacity:0; }
.tcard:hover .arrow-down{ opacity:1; }
.tcard:hover .card{ box-shadow:var(--bs-box-shadow-lg); }


/* ====== Servicios ====== */

/* Estado base: bg secondary + texto blanco */
.servicios .service-item{
    background: var(--bs-secondary);
    color: #fff;
    border: 2px dashed transparent;
    transition: background-color .25s ease, color .25s ease, border-color .25s ease, border-style .25s ease;
    height: 120px !important;
    min-height: 120px;
  }
  
  /* Círculo del icono: evitar “huevo” */
  .servicios .service-arrow{
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    padding: 0;
    line-height: 1;
    position: relative;
    color: #fff;
    transition: background-color .25s ease, transform .25s ease;
  }
  .servicios .service-arrow .fa-arrow-left,
  .servicios .service-arrow .fa-arrow-right{
    position: absolute;
    transition: opacity .2s ease;
  }
  .servicios .service-arrow .fa-arrow-left{ opacity: 0; }
  .servicios .service-arrow .fa-arrow-right{ opacity: 1; }
  
  /* Descripción oculta hasta hover */
  .servicios .service-desc{
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    color: var(--bs-primary);
    transition: max-height .25s ease, opacity .25s ease;
    white-space: normal; /* permite saltos de línea */
    word-wrap: break-word; /* rompe palabras largas si es necesario */
  }
  
  /* Hover: bg blanco + borde punteado primary + flecha a la izquierda */
  .servicios .service-item:hover{
    background: #fff !important;
    color: var(--bs-body-color) !important;
    border-color: var(--bs-primary);
    border-style: dashed;
    height: 120px !important; /* mantiene altura fija en hover */
    min-height: 120px;
  }
  .servicios .service-item:hover .service-desc{
    max-height: 200px; /* altura máxima más generosa para textos largos */
    opacity: 1;
  }
  
  /* Ocultar el título (h6) en hover para que solo se vea la descripción */
  .servicios .service-item:hover h6{
    display: none;
  }
  .servicios .service-item:hover .service-arrow{
    background: var(--bs-primary);
  }
  .servicios .service-item:hover .service-arrow .fa-arrow-right{ opacity: 0; }
  .servicios .service-item:hover .service-arrow .fa-arrow-left{ opacity: 1; }
  
  /* Fondo sección flota */
.bg-flota { background-color: #F3F3F3; }

/* Utilidad mínima para borde punteado (Bootstrap no lo trae por defecto) */
.border-dashed { border-style: dashed !important; }

/* PNGs de zonas: 60px exactos */
.zona-icon{ width:60px !important; height:auto; display:block; }

/* Fallback de color si aún no cargan tiles */
#mapaCobertura{ background:#0b2440; }

/* “Cartel” del marker (tooltip chip con bg-secondary) */
.leaflet-tooltip.mk-chip{
  background: var(--bs-secondary);
  color:#fff;
  border:0;
  border-radius:.5rem;
  padding:.25rem .5rem;
  font-size:.8rem;
  font-weight:600;
}
.leaflet-tooltip.mk-chip:before{ display:none; }

/* ====== Eventos ====== */
.evento-card{ position:relative; }
.evento-bar{ position:absolute; top:0; left:0; right:0; height:.4rem; }

/* Opacidad en hover para imágenes de eventos */
.evento-card img{
  transition: opacity .3s ease;
}
.evento-card:hover img{
  opacity: 0.5;
}

/* Oscurecer toda la imagen con capa completa */
.evento-card .img-wrap{ position: relative; }
.evento-card .img-wrap::before{
  content: ""; position:absolute; inset:0; z-index:1;
  background: rgba(0,0,0,.4); transition: background .3s ease;
  pointer-events: none;
}
.evento-card:hover .img-wrap::before{ background: rgba(0,0,0,.5); }

/* Alturas objetivo (responsive). 1°: 289; resto: 454 en lg+ */
.img-wrap{ width:100%; }
.h-289{ height:220px; }   /* xs */
.h-454{ height:260px; }

@media (min-width:768px){
  .h-289{ height:260px; }
  .h-454{ height:360px; }
}
@media (min-width:992px){
  .h-289{ height:289px; }
  .h-454{ height:454px; }
}

/* Overlays con padding; el texto NO cambia de altura ni posición */
.evento-overlay{
  position:absolute; left:0; right:0; color:#fff; pointer-events:none; z-index:3;
  max-width: 100%;
}
.overlay-top{
  top:0;
  background:linear-gradient(to bottom, rgba(0,0,0,.7), rgba(0,0,0,0));
  padding-bottom: 60px;
}
.overlay-bottom{
  bottom:0;
  background:linear-gradient(to top, rgba(0,0,0,.7), rgba(0,0,0,0));
  padding-top: 60px;
}

/* Contenedor que reserva espacio dinámico para el texto */
.texto-holder{
  position:relative;
  line-height:1.4;
  max-width: 100%;
  word-wrap: break-word;
  overflow-wrap: break-word;
  display: block;
}

/* Swap ocupa espacio real para determinar altura del contenedor */
.texto-holder .swap{
  position:relative;
  margin:0; 
  transition:opacity .28s ease-in-out;
  max-width: 100%;
  word-wrap: break-word;
  overflow-wrap: break-word;
  white-space: normal;
  display: block;
}
/* Reposo: solo texto principal visible */
.texto-holder .swap-normal{ opacity:1; visibility:visible; position:relative; }
.texto-holder .swap-hover{ 
  opacity:0; 
  visibility:hidden; 
  position:absolute; 
  top:0; 
  left:0; 
  right:0;
}
/* Hover: intercambiar sin cambiar altura */
.evento-card:hover .swap-normal{ 
  opacity:0; 
  visibility:hidden;
  position:absolute;
  top:0;
  left:0;
  right:0;
}
.evento-card:hover .swap-hover{ 
  opacity:1; 
  visibility:visible;
  position:relative;
}

/* ===== Mobile fixes eventos ===== */
@media (max-width: 991.98px){
  .eventos{ overflow-x:hidden; }
  /* Swiper a 100% para evitar desplazamiento lateral */
  .evento-card .swiper{ width:100% !important; height:100% !important; overflow:hidden; }
  .evento-card .swiper-wrapper{ width:100% !important; height:100% !important; }
  .evento-card .swiper-slide{ width:100% !important; height:100% !important; }
  /* Altura fija y sin gaps por imagen inline */
  .evento-card .img-wrap{ height:400px !important; }
  .evento-card .img-wrap img{ display:block; height:100% !important; object-fit:cover; }
  /* Quitar márgenes que generan espacio extra */
  .evento-card .evento-overlay{ margin:0 !important; }
}

/* Círculos perfectos */
.icon-circle{
    inline-size:32px; aspect-ratio:1/1; border-radius:50%;
    background:var(--bs-secondary); color:#fff;
    display:inline-flex; align-items:center; justify-content:center;
    line-height:1; padding:0; flex:0 0 32px;
  }
  
  /* Botón ↑ dentro del contenido: cierra el panel */
  .up-badge{
    position:absolute; top:.5rem; right:0;
    inline-size:28px; aspect-ratio:1/1; border-radius:50%;
    background:var(--bs-secondary);
    display:inline-flex; align-items:center; justify-content:center;
    border:0; line-height:1; padding:0; cursor:pointer; z-index:1;
  }
  
  /* espacio para que el texto no se solape con la flecha */
  .accordion-body{ padding-right:3.25rem !important; }
  
  /* quitar caret y colores del botón cabecera */
  .accordion-button::after{ display:none; }
  .accordion-button{
    background:var(--bs-light) !important;
    color:var(--bs-secondary) !important;
    box-shadow:none !important;
  }

  /* Fondo dividido desktop */
.contacto-section{
    position: relative;
    background: #fff;
  }
  .contacto-section::before{
    content: "";
    position: absolute;
    left: 0; right: 0; top: 0;
    height: var(--band, 7.5vh);     /* banda primary ~7.5vh detrás del form */
    background: var(--bs-primary);
    z-index: 0;
  }
  .contacto-section .container{ position: relative; z-index: 1; }
  
  /* Círculo del botón (consistente) */
  .icon-circle{
    inline-size:32px; aspect-ratio:1/1; border-radius:50%;
    display:inline-flex; align-items:center; justify-content:center;
    line-height:1; padding:0;
  }
  
  /* MOBILE: todo bg-white (sin banda) */
  @media (max-width: 767.98px){
    .contacto-section::before{ display:none; }
  }

/* ===== NAVBAR STYLES ===== */
.navbar {
    box-shadow: 0 2px 10px rgba(0,0,0,0.15);
    transition: box-shadow 0.3s ease;
}

.navbar:hover {
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.navbar-brand {
    position: relative;
}

/* Desktop: Logo flotante */
@media (min-width: 992px) {
    .navbar-logo {
        width: 150px;
        height: auto;
        position: absolute;
        bottom: -60px;
        left: 50%;
        transform: translateX(-50%);
        z-index: 10;
    }
}

/* Mobile: Logo normal dentro del navbar */
@media (max-width: 991.98px) {
    .navbar-logo {
        width: 120px;
        height: auto;
        position: static;
        display: block;
        margin: 0 auto;
    }
}

.nav-link {
    transition: all 0.3s ease;
    position: relative;
}

.nav-link:hover {
    font-weight: bold !important;
}

.nav-link:hover::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: calc(100% - 2rem);
    height: 2px;
    background-color: rgba(111, 149, 192, 1);
    transition: all 0.3s ease;
}

/* ===== FIRULETE DECORATIVO ===== */
.firulete-decorativo {
    left: 0;
    top: 60%;
    transform: translateY(-50%);
    z-index: 0;
    width: 657px;
    height: auto;
    max-height: 100vh;
    overflow: hidden;
    opacity: 0.1;
}

/* Mobile: ocultar firulete */
@media (max-width: 991.98px) {
    .firulete-decorativo {
        display: none;
    }
}

/* ===== FAQS PADDING DESKTOP ===== */
@media (min-width: 992px) {
    #faqs {
        padding-top: 180px !important;
        padding-bottom: 180px !important;
    }
}

/* ===== CLIENTES STYLES ===== */
.clientes-section {
    padding: 4rem 0;
    background-color: #f8f9fa;
}

.clientes-title {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--bs-primary);
}

.clientes-grid .col-lg-1-5 {
    flex: 0 0 12.5%;
    max-width: 12.5%;
}

.cliente-item {
    height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cliente-logo {
    max-width: 100%;
    max-height: 80px;
    width: auto;
    height: auto;
    object-fit: contain;
}

/* Carousel Mobile */
.clientes-carousel {
    padding: 0;
}

.clientesSwiper {
    padding: 0;
}

.clientesSwiper .cliente-item {
    height: 100px;
    padding: 0;
}

.clientesSwiper .cliente-logo {
    max-height: 60px;
}

/* Responsive */
@media (max-width: 1200px) {
    .clientes-grid .col-lg-1-5 {
        flex: 0 0 16.666%;
        max-width: 16.666%;
    }
}

@media (max-width: 992px) {
    .clientes-grid .col-lg-1-5 {
        flex: 0 0 25%;
        max-width: 25%;
    }
}

@media (max-width: 768px) {
    .clientes-section {
        padding: 3rem 0;
    }
    
    .clientes-title {
        font-size: 2rem;
    }
}

@media (max-width: 576px) {
    .clientes-title {
        font-size: 1.5rem;
    }
    
    .cliente-item {
        height: 80px;
        padding: 1rem;
    }
    
    .cliente-logo {
        max-height: 50px;
    }
}

/* ===== FOOTER STYLES ===== */
.footer-section {
    background-color: var(--bs-primary);
    color: white;
    padding: 3rem 0 3rem;
}

.footer-column {
  
    padding: 2rem;
}

.footer-column:last-child {
    border-right: none;
}

.footer-content {
    height: 100%;
}

/* Contacto */
.contact-info {
    margin-bottom: 2rem;
}

.contact-item {
    display: flex;
    align-items: center;
    margin-bottom: 1rem;
    font-size: 1rem;
}


/* Separador */
.footer-separator {
    width: 100%;
    height: 1px;
    background-color: rgba(255, 255, 255, 0.3);
    margin: 1.5rem 0;
}

/* Redes Sociales */
.social-section {
    text-align: left;
}

.social-text {
    font-size: 1rem;
    margin-bottom: 1rem;
    color: white;
}

.social-icons {
    display: flex;
    gap: 1rem;
}

.social-link {
    width: 40px;
    height: 40px;
    background-color: var(--bs-secondary);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    text-decoration: none;
    transition: all 0.3s ease;
    margin-right: 0.75rem;
}

.social-link:hover {
    background-color: white;
    color: var(--bs-primary);
    transform: scale(1.1);
}

/* Navegación */
.navigation-links {
    display: flex;
    gap: 2rem;
}

.nav-column {
    flex: 1;
}

.footer-nav-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: white;
    text-decoration: none;
    padding: 0.5rem 0;
    margin-bottom: 0.5rem;
    transition: none;
    gap: 0.5rem;
}

.footer-nav-link:hover {
    color: white;
}

.footer-nav-arrow {
    width: 24px;
    height: 24px;
    background-color: var(--bs-secondary);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    transform: rotate(0deg);
    transition: transform 0.3s ease;
    flex-shrink: 0;
}

.footer-nav-link:hover .footer-nav-arrow {
    transform: rotate(-45deg);
}

/* Logo */
.footer-logo {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
}

.logo-footer {
    width: 128px !important;
    max-width: 128px !important;
    height: auto !important;
}

/* Copyright */
.copyright-bar {
    background-color: rgba(243, 243, 243, 0.19);
    padding: 1.5rem 2rem;
    max-width: 600px;
    margin: 0 auto 0 auto; /* sin margen inferior */
    border-radius: 1rem;
}

.copyright-text {
    margin: 0;
    color: white;
    font-size: 0.9rem;
}

.copyright-text a {
    color: white;
    text-decoration: underline;
}

.copyright-text a:hover {
    color: #007bff;
}

/* Responsive Footer */
@media (max-width: 992px) {
    .footer-column {
        padding: 1.5rem;
        border-left: none !important;
        border-start: none !important;
    }
    
    .footer-column:last-child {
        border-bottom: none;
    }
    
    .navigation-links {
        flex-direction: column;
        gap: 1rem;
        margin-left: 1rem; /* ms-3 */
        text-align: left;
    }
    
    .nav-column {
        flex: none;
    }
}

@media (max-width: 768px) {
    .footer-section {
        padding: 2rem 0 0;
    }
    
    .footer-column {
        padding: 1rem;
    }
    
    .social-icons {
        justify-content: center;
    }
    
    .navigation-links {
        text-align: left;
    }
    
    .footer-nav-link {
        justify-content: flex-start;
        gap: 1rem;
    }
    
    .logo-footer {
        width: 128px !important;
        max-width: 128px !important;
    }
}

@media (max-width: 576px) {
    .contact-item {
        font-size: 0.9rem;
    }
    
    .social-text {
        font-size: 0.9rem;
    }
    
    .footer-nav-link {
        font-size: 0.9rem;
    }
    
    .logo-footer {
        width: 128px !important;
        max-width: 128px !important;
    }
}

/* ===== FLOTA POPUP GALERIA ===== */
.galeriaSwiper .swiper-slide {
  width: auto !important;
  height: auto !important;
}

.galeriaSwiper .swiper-slide img {
  width: 150px !important;
  height: 150px !important;
  object-fit: cover !important;
  aspect-ratio: 1/1;
  border-radius: 0.5rem;
}

/* Responsive para mobile */
@media (max-width: 768px) {
  .galeriaSwiper .swiper-slide img {
    width: 120px !important;
    height: 120px !important;
  }
}
  
/* ===== Eventos: asegurar overlay completo en desktop ===== */
.evento-card .img-wrap{ position: relative; overflow: hidden; }
.evento-card .img-wrap::before{ border-radius: inherit; }
.evento-card .img-wrap img{ display:block; }
/* Forzar Swiper a ocupar 100% también en desktop para evitar gaps inferiores */
.evento-card .swiper{ width:100% !important; height:100% !important; overflow:hidden; }
.evento-card .swiper-wrapper{ width:100% !important; height:100% !important; }
.evento-card .swiper-slide{ width:100% !important; height:100% !important; }

/* Overlays sin margen para llegar al borde */
.evento-overlay{ margin:0 !important; }
/* ===== ELEGIRNOS HOVER EFFECTS (módulos de texto) ===== */
.elegirnos .p-4{
  transition: box-shadow .3s ease, transform .3s ease, background-color .3s ease;
  position: relative;
  overflow: hidden; /* respeta bordes redondeados */
}
.elegirnos .p-4:hover{
  box-shadow: 0 0.75rem 1.5rem rgba(0,0,0,.22), 0 0.25rem 0.5rem rgba(0,0,0,.12) !important;
  transform: translateY(-3px);
}
.elegirnos .p-4:hover::before{
  content: "";
  position: absolute;
  inset: 0;
  background-color: rgba(0,0,0,.3);
  border-radius: inherit;
  z-index: 1;
}
.elegirnos .p-4:hover > *{
  position: relative;
  z-index: 2;
}
/* ===== CF7: botón con círculo (HTML) y sin spinner ===== */
.contacto-section .wpcf7 .wpcf7-spinner{ display:none !important; }
.contacto-section .wpcf7 button[type="submit"].btn{
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}
.contacto-section .icon-circle,
.contacto-section .send-circle{
  width: 32px;
  height: 32px;
  min-width: 32px;
  min-height: 32px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}