html, body{
    height: 100%;
    padding: 0;
    margin: 0;
    overflow-x: hidden;
    
  }


  
/*Videoo----------------BACKGROUND--------------------------------*/  
 /* .video-background {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: -1; /* detrás de todo */
/* } */ 

/* .video-background video {
  width: 100%;
  height: 100%;
  object-fit: cover; /* llena la pantalla como background-size: cover */
/* } */ 

.contenido {
  position: relative;
  z-index: 1; /* se muestra encima del video */
  color: #fff; /* texto legible sobre el video */
   display: flex;
  flex-direction: column;
  min-height: 100vh;
}
/*Videoo-----------------BACKGROUND-------------------------------*/

  nav {
  display: flex;
  align-items: center;    
  position: relative; 
  font-family: 'Montserrat','sans-serif';
  font-weight: lighter;
}

  nav img {
  margin-top: 7%;
  margin-left: 20%;
  width: 170px;
  height: auto;

  
}
li{
    font-family: "Montserrat", sans-serif;
   display: flex;
  justify-content: center;
  font-size: 120%;
  font-weight: lighter;
  color: #c0fa14;
}
ul{
  color: #c0fa14;
  list-style-type:square;
}
ul 


nav ul {
  display: flex;
  gap: 130px;                 /* espacio entre items */
  list-style: none;          /* quita puntos */
  margin: 0;
  padding: 0;
  font-size: 120%;
  position: absolute;   /* saca el ul del flujo */
  left: 50%;            /* lo lleva al centro */
  transform: translateX(-50%);
}





nav ul li a {
  text-decoration: none;     
  color: #ffffff;              
  font-weight: 1;    
  align-items: center;  
  transition: color 0.7s ease, background-color 0.7s ease; 
}
/* cambia el color del menu y hace sombra */
nav ul li a:hover {
  position: relative;  
  color: #c0fa14;
  border-radius: 5px;         /* opcional: esquinas redondeadas */
  overflow: hidden;             /* oculta lo que sobresalga */
  transition: color 0.7s ease; 
}

  main {
      flex: 1; /* ocupa todo el espacio disponible */
    }


p{
  display: flex;
  justify-content: center;
  font-size: 120%;
  font-weight: lighter;
}
  
  /* footer {
    text-align: center;
    padding: 1px;
    background: transparent;
    color: #fff;
    font-size: small;
    font-family: "Montserrat", sans-serif;
    font-weight: 100;
  } */


  
.contenedor-boton a{
  text-decoration: none;
  color: inherit;  /* centra vertical si el contenedor tiene altura */
}


.contenedor-boton{
  text-decoration: none;
  font-family: "Montserrat", sans-serif;
  display: flex;
  justify-content: center; /* centra horizontal */
  align-items: center;     /* centra vertical si el contenedor tiene altura */
}

button {
  font-family: "Montserrat", sans-serif;
  margin-top: 3%;
  font-size: 120%;
  font-weight: 200;
  padding: 10px 20px;
  background-color: #c0fa14;
  transition: color 0.7s ease, background-color 0.7s ease;
  border-radius: none; 
  border-bottom: 0%;
  box-shadow: none;
  border-style: none;
  border-radius: 4%;
 
}

/* button:hover {
  border-color: #c0fa14;
  font-family: "Montserrat", sans-serif;
  position: relative;  
  background-color: #0000001d;
  color: #c0fa14;
  overflow: hidden;             
  transition: color 0.7s ease; 
} */


/* Cajas de servicios---------------------------------------------------------*/
.servicios {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 60px;
  padding: 50px 0;
}

.caja {
  width: 85%;
  background: #00000000;
  border-radius: 15px;
  text-align: center;  
  padding: 20px;
  opacity: 0; /* ocultas inicialmente */
  transform: translateX(0);
  transform: translateY(40px);
  
  transition: all 0.3s ease-out;
  box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}
.caja:nth-child(odd) {
  transform: translateX(-150px);
}

.caja:nth-child(even) {
  transform: translateX(150px);
}

/* Cuando se hacen visibles */
.caja.visible {
  opacity: 1;
  transform: translateX(0);
}

.caja:nth-child(1) { transition-delay: 0s; }
.caja:nth-child(2) { transition-delay: 0.1s; }
.caja:nth-child(3) { transition-delay: 0.3s; }
.caja:nth-child(4) { transition-delay: 0.5s; }

.caja img {
  width: 25%;                   /* la imagen ocupa todo el ancho de la caja */
  height: auto;               /* puedes cambiar este valor */
  object-fit: cover;          /* mantiene proporción recortando si es necesario */
  margin: auto;
  /* opacity: 0.77; */
   border: 3px solid #c0fa14; 
   border-radius: 3%;
}


.caja p {
  font-size: 25px;
  font-weight: 100;
  /* animation: cambioColor 13s infinite ease-in-out; */
  color: #ffffff;
  /* color:white; */
  text-align: center;
  font-family: "Inter", sans-serif;
  
}

/* Cajas de servicios---------------------------------------------------------*/

/*--------------------------- TITULO CAMBIA DE COLOR------------------------- */
br{
   font-family: "Montserrat", sans-serif;
  display: flex;
  justify-self:center;
}
.texto-dinamicoOffer {
  font-family: "Montserrat", sans-serif;
  display: flex;
  justify-self:center;
  margin-left: 3%;
  font-size: 900%;
  font-weight: 100;
  color: #ffffff00; /* color inicial */
  /* animation: cambioColor 20s infinite ease-in-out;  */
  -webkit-text-stroke: 0.9px #c0fa14;

  /* dura 6s (2s por color + 3s transición), se repite infinito */
}
H2{
  font-family: "Montserrat", sans-serif;
  font-size: 50px;
  font-weight: 100;
  color: #c0fa14;
}
.texto-dinamico {
  font-family: "Montserrat", sans-serif;
  display: flex;
  margin-top: 10%;
  margin-left: 5%;
  margin-bottom: 7%;
  font-size: 700%;
  font-weight: 500;
  color: #ffffff; 
  /* animation: cambioColor 4s infinite ease-in-out;  */
  /* -webkit-text-stroke: 1.9px #c0fa14; */

  /* dura 6s (2s por color + 3s transición), se repite infinito */
}
@keyframes cambioColor {
  0%   { color: #ffffff; }
  10%   { color: #ecfcbd; }
  20%   { color: #dcf494; } 
  30%   { color: #d6f37d; } 
  40%   { color: #ccfb40; }     
  50%   { color: #c0fa14; }   
  60%  { color: #ccfb40; }   
  70%  { color: #d6f37d; }   
  80% { color: #dcf494; } 
  90%   { color: #ecfcbd;; }
  100%   { color: #ffffff;; }   
} 
/*--------------------------- TITULO CAMBIA DE COLOR------------------------- */
@keyframes cambioFondo {
  0%   { background-color: #0000009f; }
  10%  { background-color: #00000054; }
  20%  { background-color: #0000009f; } 
  30%  { background-color: #00000054; } 
  40%  { background-color: #0000009f; }     
  50%  { background-color: #00000054; }   
  60%  { background-color: #0000009f; }   
  70%  { background-color: #00000054; }   
  80%  { background-color: #0000009f; } 
  90%  { background-color: #00000054; }
  100% { background-color: #0000009f; }   
}


/* =========================
   RESPONSIVE: TABLET / MOBILE
   ========================= */

/* breakpoint tablet and below */
@media (max-width: 1300px) {
  /* Hide centered desktop menu behavior */
  

  .texto-dinamico{
    font-size: 20px;
  }
 
  /* logo ajustado */
  nav.nav .brand img {
    margin-left: 20px;
    margin-top: 14px;
    width: 140px;
  }

  /* links mobile style */


  /* título más chico y centrado */
  .texto-dinamico {
    font-size: 400%;
    text-align: center;
    margin: 40px 20px 0;
    justify-content: center;

  }

  /* video cuadro más ancho en móvil */
  .cuadro-video { width: 90%; margin-top: 30px; }

  /* cajas más compactas */
  .caja {
    width: 92%;
    padding: 18px;
  }
  .caja img { width: 40%; }
  .caja p { font-size: 16px; line-height: 1.4; text-align: center;  }
}

/* mobile narrow (375px minimum target) */
@media (max-width: 480px) {
  /* hamburguesa tamaño */
  H2 {
    font-family: "Montserrat", sans-serif;
    font-size: 35px;
    font-weight: 300;
    color: #c0fa14;
  }
  p{
    font-weight: 300;
  }
  .liExamples{
    color: #c0fa14;
    padding-inline-start: unset;
  }
  nav.nav .brand img { width: 120px; margin-left: 12px; }
  .texto-dinamico { font-size: 270%; margin-top: 28px;justify-content: center; }
  .caja img { width: 55%; }
  .caja p { font-size: 17px; padding: 0 3px; text-align: center; font-weight: 200; }
  

}

.mini-oferta{
    font-family: "Montserrat", sans-serif;
    justify-content: center;
    font-size: 20px;
    color: #c0fa14;
    text-align: center; 
}