html, body{
    height: 100%;
    padding: 0;
    margin: 0;
    overflow-x: hidden;
    /* background-color: rgb(15 99 148); */
  }

  .titulo-principal{
    color: #fff;
    display: flex;
  }
  
  header{
    font-family: "Montserrat", sans-serif;
  }
/*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; 
         
}

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

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 */
    }

.titulo-principal{
  font-weight: 300;
  font-size: 1200%;
  display: flex;
  margin-left: 3%;
  margin-top: 7%;
}
p{
  display: flex;
  justify-content: center;
  font-size: 120%;
  font-weight: lighter;
  margin-bottom: 15%;
  max-width: 1150px;
  margin: 0 auto;
  padding: 0 20px;
  line-height: 2.5rem;
}

  /* footer {
    text-align: center;
    padding: 1px;
    background: transparent;
    color: #c0fa14;
    margin-top: 1%;
    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: 10%;
  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;
 
}

/* button:hover {
  border-color: #c0fa14;
  font-family: "Montserrat", sans-serif;
  position: relative;  
  background-color: #0000001d;
  color: #c0fa14;
       
  overflow: hidden;         
  transition: color 0.7s ease; 
} */
/* Cambia de color aboutme---------------------------------------------------------------------------- */
.texto-dinamico {
  font-family: "Montserrat", sans-serif;
  display: flex;
  margin-top: 7%;
  margin-left: 3%;
  font-size: 1000%;
  font-weight: 900;
  color: #ffffff; /* color inicial */
  animation: cambioColor 5s infinite ease-in-out; 

  /* dura 6s (2s por color + 3s transición), se repite infinito */
}
.texto-dinamico2 {
  font-family: "Inter", sans-serif;
  display: flex;
  justify-content: center;
   margin-left: 3%;
 margin-top: 7%;
 margin-bottom: 1%;
  font-size: 50px;
  font-weight: 700;
  color: #ffffff; /* color inicial */
  /* animation: cambioColor2 5s infinite ease-in-out;  */

  /* dura 6s (2s por color + 3s transición), se repite infinito */
}
.texto-dinamico3 {
  font-family: "Inter", sans-serif;
  display: flex;
 justify-content: center;
 margin-top: 0%;
 font-weight: 700;
  font-size: 370%;
  color: #ffffff; /* color inicial */
  /* animation: cambioColor2 5s infinite ease-in-out;  */

  /* dura 6s (2s por color + 3s transición), se repite infinito */
}
p{
  font-family: "Inter", sans-serif;
  display: flex;
  justify-content: center;
  font-size: 150%;
  font-weight:100;
  margin-bottom: 1%;
  color: #ffffff; /* color inicial */
  /* animation: cambioColor 13s infinite ease-in-out;  */

  /* dura 6s (2s por color + 3s transición), se repite infinito */
}
.resultado{
  font-weight: 500;
  font-size:50px;
  justify-content: flex-start;
  margin-top: 2%;

}
  
/* Cambia de color aboutme---------------------------------------------------------------------------- */


@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;; }   
} 
@keyframes cambioColor2 {
  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;; }   
} 

/*Carrusel------------------------------------------------------------------------------*/
.carrusel {
  width: 90%;
  max-width: 1200px;
  margin: auto;
  overflow: hidden;   /* se ve solo dentro */
  border-radius: 40px;
  background: #c0fa144d;
  padding: 20px;
  margin-bottom: 10%;
}

.carrusel-contenedor {
  
  display: flex;
  width: max-content;
  animation: scroll 45s linear infinite; /* velocidad configurable */
}

.carrusel-item {
  flex: 0 0 auto;        /* que no se achiquen */
  margin-right: 20px;    /* espacio entre imágenes */
}

.carrusel-item img {
 width: 180px;
  height: 120px;
  object-fit: contain;
  display: block;
}

/* movimiento continuo */
@keyframes scroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-238.5%); /* la mitad porque duplicamos */
  }
}
/*Carrusel------------------------------------------------------------------------------*/
.logos{
  display: flex;
  flex-direction: column; /* centra en la pantalla */
  align-items: center; 
  gap: 100px;               /* separación entre imágenes */
  margin: 40px 0;     
}

.london{
  margin-top: 7%;
  width: 400px;   /* ancho que quieras */
  height: auto;
   
  
}

.londoncr{
  width: 400px;   /* ancho que quieras */
  height: auto; 
}

.phd{
   width: 400px;   /* ancho que quieras */
  height: auto; 
}

.foot{
  color: #ffffff;
  margin-bottom: 0;
}

/* Slogan */
.slogan-about {
  font-family: "Montserrat", sans-serif;
  text-align: center;
  font-size: 50px;
  margin-top: 30px;
  margin-bottom: 45px;
  font-weight: 700;
  letter-spacing: 1px;
  color: #ffffff; /* puedes cambiarlo */
}

/* Contenedor de valores */
.valores-container {
  display: flex;
  justify-content: center;
  gap: 30px;
  margin-top: 50px;
  flex-wrap: wrap;
}

/* Tarjetas de valores */
.valor-box {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(192, 250, 20, 0.25);
  padding: 25px 30px;
  width: 260px;
  text-align: center;
  border-radius: 18px;
  backdrop-filter: blur(6px);
  transition: 0.3s ease;
}

.valor-box h3 {
    font-family: "Montserrat", sans-serif;
    font-weight: 700;
  font-size: 2.3rem;
  color: #ffffff;
  margin-top: 1px;
  margin-bottom: 0px;
}

.valor-box p {
  font-size: 0.95rem;
  line-height: 1.4rem;
}

/* Hover elegante */
.valor-box:hover {
  transform: translateY(-6px);
  /* box-shadow: 0 0 18px rgba(192, 250, 20, 0.2); */
  border-color: rgb(192, 250, 20);
}


/* ======================= */
/* HAMBURGUESA MÓVIL/TABLET */
/* ======================= */

@media (max-width: 1024px) {

  .phd {
    width: 300px;
    height: auto;
}
.london {
    width: 300px;
    height: auto;
}
.londoncr {
    width: 300px;
    height: auto;
}
  .texto-dinamico2 {
    font-family: "Inter", sans-serif;
    display: flex;
    justify-content: center;
    margin-left: 3%;
    margin-top: 7%;
    margin-bottom: 1%;
    font-size: 40px;
    font-weight: 700;
    color: #ffffff;
    /* animation: cambioColor2 5s infinite ease-in-out; */
}
.texto-dinamico{
  font-size:450%;
}
p{
          font-size: 114%;
}
.slogan-about{
  font-size: 300%;
}
  
  /* Ajuste logo móvil */
nav img {
    margin-left: 20px !important;
    margin-top: 20px !important;
    width: 120px;
  }
  .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 */
}
}

/* ======================= */
/* EXTRA: MODO 375PX       */
/* ======================= */
@media (max-width: 480px) {
  .Cambia-Texto{
    font-weight: 200;
    font-size: 20px;
  }
  .valor-box p {
  font-size: 111%;
  line-height: 1.4rem;
  }

  .carrusel {
    padding: 10px;
  }

  .carrusel-contenedor {
    animation: scroll 14s linear infinite;
  }

  .carrusel-item {
    margin-right: 15px;
  }

  .carrusel-item img {
    width: 110px;
    height: 70px;
  }
}

/* animación */
@keyframes scroll {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }

}



@media (max-width: 375px) {
  
  .texto-dinamico{
  font-size:350%;
}
p{
  font-size: 100px;
}

.slogan-about{
  font-size: 200%;
}
  .contenedor-boton a{
  text-decoration: none;
  color: inherit;  /* centra vertical si el contenedor tiene altura */
}
}