.bg-color{
    background-color: rgb(2, 2, 77);
}
.bg-color-foot{
    background-color: rgb(2, 2, 77);
}
.bg-color-foot-2{
    background-color: rgb(0, 0, 0);
}
#bg-color-vm{
    background-color: rgb(230, 230, 250);
    border-radius: 10px;
}
 /* --- 1. NAV principal --- */
  nav {
    background-color: rgb(2, 2, 77);
    padding: 30px 20px;
    display: flex; /*active flexbox*/
    justify-content: space-between;/*Coloca los elementos (botón y menú) a los extremos del nav. */
    align-items: right;
    position: relative; /* posiciona los elementos del menu segun el nav */
  }

  /* --- 2. BOTÓN TOGGLER --- */
  .toggler {
    background: none;
    border: 1px solid white;
    color: white;
    padding: 8px 12px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 18px;
    z-index: 2; /* Asegura que esté encima del menú al desplegarlo */
  }

  /* --- 3. MENÚ OCULTO POR DEFECTO --- */
  .menu {
    list-style: none;/*quita el tipo de lista*/
    padding: 0;
    margin: 0;
    position: absolute; /*Hace que el menú se posicione respecto al nav*/
    top: 110px;/*Coloca el menú justo debajo del nav*/
    left: 0;
    width: 100%;
    background-color:rgb(0, 0, 116);
    flex-direction: column;/*Organiza los elementos uno debajo del otro (vertical).*/
    align-items: left;
    gap: 10px;/* Espacio entre cada opción (li).*/
    z-index: 999;
    
    /* ANIMACIÓN: inicia oculto */
    max-height: 0; /* Lo “aplasta” para que esté cerrado inicialmente.*/
    overflow: hidden; /*Oculta el contenido que sobrepasa el alto*/
    opacity: 0; /*Lo vuelve invisible mientras está cerrado.*/
    transition: all 0.4s ease; /* Duración y suavidad */
  }

  /* --- 4. MENÚ ACTIVO (VISIBLE) --- */
  .menu.active {
    max-height: 450px; /* Altura máxima del contenido visible */
    opacity: 1;
  }

  /* --- 5. ESTILO DE LOS ELEMENTOS DEL MENÚ --- */
  .menu li {
    color: white;
    padding: 10px 0;
    width: 100%;
    text-align: center;

  }

  /* --- 6. VERSIÓN ESCRITORIO --- */
  @media (min-width: 768px) {
    .toggler {
      display: none;
    }
    .menu {
      position: static;
      display: flex;
      flex-direction: row;
      max-height: none; /* Desactiva animación */
      opacity: 1;
      background: none;
      gap: 20px;
      width: auto;
    }
    .menu li {
      border: none;
    }
  }
 a.texto{
        color: rgb(255, 255, 255);
  text-decoration: none;
  transition: color 0.3s ease; /* animación suave */
    }
   .texto:hover {
  color: skyblue;            /* color al pasar el cursor */
}
/* Carrusel general */
#carouselExampleFade {
  width: 100%;
  height: 60vh;
  overflow: hidden;        /* evita desbordes */
}

/* Imágenes del carrusel */
#carouselExampleFade img {
  width: 100%;
  height: 60vh;
  object-fit: cover;
  object-position: center; /* evita que se mueva hacia arriba o lados */
  display: block;
}

/* Ajuste SOLO para teléfonos */
@media (max-width: 768px) {

  /* El carrusel deja de tener altura fija */
  #carouselExampleFade,
  #carouselExampleFade .carousel-inner,
  #carouselExampleFade .carousel-item {
    height: auto !important;
  }

  /* La imagen se adapta al ancho de la pantalla */
  #carouselExampleFade img {
    width: 100%;
    height: auto !important;   /* se ajusta sola, sin recortes */
    display: block;
    object-fit: contain;       /* ajusta la imagen sin recortarla */
    object-position: center;
  }
}
td.border-right{
    border-right: 2px solid white;
}
td.border-left{
   border-left: 2px solid white;
}
td.border-bot{
    border-bottom: 2px solid white;
}
td.border-top{
   border-top: 2px solid white;
}
.card-body{
    background-color: rgb(2, 2, 77); 
    border-radius: 0 0 5px 5px; /* arriba izq, arriba der, abajo der, abajo izq */
}
/* Tarjetas más redondas */
.card {
  border-radius: 20px !important;
  overflow: hidden; /* evita que la imagen sobresalga */
}

/* Imagen superior redondeada igual que la tarjeta */
.card img {
  border-top-left-radius: 20px !important;
  border-top-right-radius: 20px !important;
}
.card-text{
    color: white;
    text-align: justify;
    font-size: 16px;
}
h5.card-title{
    color: rgb(255, 255, 255);
}
 .banner{
    height: auto;
    max-width: 100%;      /* ancho máximo en PC */
    width: 100%;           /* se adapta al ancho de la pantalla */
 }
 .logo{
    height:7vh;
    width: 6vh;
 }
 .carousel-container {
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  display: flex;
  justify-content: center;
  gap: 20px;
  padding: 20px;
}

.carousel-track {
  display: flex;
  gap: 20px;
}

.card {
  flex: 0 0 auto;
  width: 18rem;
  scroll-snap-align: center;
  transition: transform 0.3s ease;
}

.card:hover {
  transform: scale(1.05);
}

/* Botones del carousel */
#carouselExample .carousel-control-prev,
#carouselExample .carousel-control-next {
  width: 70px;                
  height: 70px;                
  border-radius: 50%;        /* forma circular */
  background-color: rgb(255, 255, 255);    /* color azul */
  display: flex;
  top: 45%;                     /* centrado vertical */
  opacity: 0.8;                 /* transparencia */
  transition: opacity 0.3s, transform 0.3s;
}


/* Cambiar color del ícono dentro del círculo */
#carouselExample .carousel-control-prev-icon,
#carouselExample .carousel-control-next-icon {
  filter: invert(100%);        /* icono blanco */
  width: 20px;
  height: 20px;
}


/*  Estilo general por defecto (PC) */
.fondo {
  background-image: url('Contacto/fondo.png');
  background-size: 100%;
  background-position: center;
  background-repeat: no-repeat;
  
  
}

/*  Estilo para celulares */
@media (max-width: 768px) {
  .fondo {
    background-image: url('Contacto/fondo2.png');
    background-position:center center;

  }

}
/* Opcional: tamaño de tarjetas en móvil */
#proyectos-carousel .card {
  width: 80%;
  margin: 0 auto;
}
/* Quitar cualquier fondo y mantener solo la flecha */
.carousel-control-prev-icon,
.carousel-control-next-icon {
    background-color: transparent !important; /* quitar fondo */
    background-image: none !important;        /* quitar el SVG por defecto */
}

/* Crear flechas simples con borde */
.carousel-control-prev-icon::after,
.carousel-control-next-icon::after {
    content: '';
    display: inline-block;
    border: solid black;       /* color de la flecha */
    border-width: 0 4px 4px 0; /* forma de flecha */
    padding: 10px;
}

.carousel-control-prev-icon::after {
    transform: rotate(135deg);
}

.carousel-control-next-icon::after {
    transform: rotate(-45deg);
}
.contacto {
 width: 25%;
  
  
}

/*  Estilo para celulares */
@media (max-width: 768px) {
  .contacto {
    width: 45%;
  }

}

.contacto-2 {
 width: 100%;
  border-radius: 10px;
  
}

/*  Estilo para celulares */
@media (max-width: 768px) {
  .contacto-2 {
    width: 65%;
    
  }

}

/* Estilo base (PC y tablet): centrado */
.left {
  text-align: center;
}

/* En celular (pantallas menores a 768px): alineado a la izquierda */
@media (max-width: 768px) {
  .left {
    text-align: left;
    padding-left: 20px; /* opcional, da un pequeño margen desde el borde */
  }
}

.hover-cell {
  position: relative;
  transition: all 0.3s ease;
  padding: 4vh;
  cursor: pointer;
}

.contenido-hover {
  display: none;
  background-color:rgb(0, 0, 116) ;
  border-radius: 10px;
  padding: 2vh;
}

.hover-cell:hover .contenido {
  display: none;
}

.hover-cell:hover .contenido-hover {
  display: block;
}

.border-right {
  border-right: 2px solid white;
}
.border-left {
  border-left: 2px solid white;
}
.pad-bord{
padding: 7px;
}

.flote {
  animation: flotar 3s ease-in-out infinite;
}

@keyframes flotar {
  0%   { transform: translateY(0); }
  50%  { transform: translateY(-10px); }
  100% { transform: translateY(0); }
}
.animated-title {
  opacity: 0;
  transform: translateY(40px);
  transition: all 0.8s ease;
}

/* Estado visible al hacer scroll */
.show {
  opacity: 1;
  transform: translateY(0);
}
.counter-box {
    font-family: 'Poppins', sans-serif;
    font-size: 2rem;
    font-weight: 600;
    min-width: 160px;
  }

  .counter {
    display: block;
    font-size: 3rem;
    color: #ff4d00;
    margin-bottom: 10px;
    transition: all 0.3s ease;
  }

  .counter-box p {
    margin: 0;
    font-size: 1rem;
    color: #ccc;
  }

.bg-div-conts {
  background-image: url("fondo_contadores.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* Imagen de fondo diferente para pantallas pequeñas */
@media (max-width: 768px) {
  .bg-div-conts {
    background-image: url("fondo_contadores_movil.png");
    width: 100%;
    background-size: cover;
    background-position: center;
  }
}

/* Contadores: texto siempre blanco */
.animated-counters,
.animated-counters-phone {
  color: white !important;
}

/* Asegura que los números no cambien de color al actualizar */
#counter1, #counter2, #counter3,
#counter1m, #counter2m, #counter3m {
  color: white !important;
}

/* Asegura que los textos debajo también sigan blancos */
.animated-counters h4,
.animated-counters p,
.animated-counters-phone h4,
.animated-counters-phone p {
  color: white !important;
}

.accordion-button{
  background-color:rgb(2, 2, 77) !important;
}

.accordion-body{
background-color:rgb(0, 0, 116) !important;
}

/* --- Acordeón más delgado SOLO en teléfonos --- */
@media (max-width: 768px) {
  #accordionExample {
    max-width: 85%;   /* ancho más delgado */
    margin: 0 auto;   /* centra el acordeón */
  }

  .accordion-button h2 {
    font-size: 18px;
  }

  .lista-servicios a {
    font-size: 14px;   /* texto más compacto */
  }
}

.lista-servicios {
  list-style: none;         /* Quita los puntos normales */
  padding: 0;
  margin: 0;
}

.lista-servicios li {
  display: flex;            /* Alinea imagen + texto */
  align-items: center;      /* Centra verticalmente */
  background: url('type_li.png') no-repeat left center;
  background-size: 3vh ; /* Tamaño del icono */
  padding-left: 30px;       /* Espacio para el icono */
  margin-bottom: 12px;      /* Espaciado entre elementos */
  font-size: 19px;
}

.video-container {
  width: 100%;
  height: 75vh;        /* Pantalla completa */
  overflow: hidden;
  position: relative;
}

.video-container video {
  width: 90%;
  height:75vh;
  object-fit: cover;     /*  Elimina bordes negros */
  object-position: center;
  border-radius: 10px;
}

.videos-row {
  display: flex;
  justify-content: center;
  gap: 20px;
  flex-wrap: nowrap;        /* Mantiene todo en una fila en PC */
}

.videos-row video {
  height: 65vh;
  border-radius: 10px;
  object-fit: cover;
}


/* 🔹 Pantallas grandes */
@media (min-width: 1400px) {
  .videos-row video {
    height: 55vh;
  }
}

@media (min-width: 1800px) {
  .videos-row video {
    height: 45vh;
  }
}


/* 🔹 En teléfono: poner uno debajo del otro */
@media (max-width: 768px) {
  .videos-row {
    flex-direction: column;   /* SE APILAN verticalmente */
    align-items: center;      /* Centra cada video */
  }

  .videos-row video {
    width: 90%;               /* Ocupan casi toda la pantalla */
    height: auto;             /* Mantienen proporción */
  }
}