/* ----- ESTILOS GENERALES DE LA PÁGINA ----- */
body {
  margin: 0;
  font-family: 'Segoe UI', sans-serif;
  background: #e3eaf2; /* Fondo general suave */
  color: #1c2a39; /* Texto principal oscuro */
}

/* ----- ENCABEZADO (HEADER) ----- */
.headerr {

  display: flex; /* Usa Flexbox para alinear horizontalmente los elementos (logo, título, botones) */
  justify-content: space-between; /* Espacia los elementos: uno a la izquierda, otro al centro y otro a la derecha */
  align-items: center; /* Centra verticalmente los elementos dentro del header */

  padding: 10px 25px; /* Espaciado interno: 15px arriba/abajo, 30px izquierda/derecha */

  background-color: rgb(0, 0, 0); /* Fondo negro para el header */
  color: rgb(255, 255, 255); /* Texto en blanco */

  border-top: 4px solid #4CAF50; /* Línea verde arriba del header como decoración */

  position: fixed; /* Hace que el header se mantenga visible aunque se haga scroll */
  top: 0; /* Fija el header arriba */
  left: 0; /* Alinea el header al borde izquierdo */
  width: 100%; /* Hace que el header ocupe todo el ancho */

  z-index: 1000; /* Asegura que el header esté por encima de otros elementos */
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* Agrega una sombra sutil debajo del header */

}
/* Logo en el header */
.logo {
  width: 160px;
  height: auto;
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.3));
  transition: var(--transition);
  
  
}

.logo:hover {
  transform: scale(1.09) rotate(2deg);}
/* Título centrado en el header */
.title {
 background: #ffffff;/* linear-gradient(45deg, #ffd700, #ffed4e, #fff700, #ffd700); */
            background-size: 300% 300%;
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            
            font-size: 2.8rem;
            font-weight: 900;
            font-family: 'Georgia', 'Playfair Display', serif;
            text-align: center;
            position: relative;
            letter-spacing: 4.8px;
            text-shadow: 0 0 30px rgba(255, 215, 0, 0.5);
            filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.3));
      
}
/* RESPONSIVE: para móviles */
@media (max-width: 767.98px) {
  .headerr {
    padding: 20px 10px;
  }

  .headerr .title {
    font-size: 1.6rem;
  }

  .headerr .auth-buttons {
    flex-direction: column;
    gap: 3px;
  }

  .headerr .auth-buttons a {
    width: 100%;
    text-align:center;
  }
}
@media screen and (max-width: 600px) {
  .auth-buttons {
    flex-direction: column;
    align-items: center;      /* ← Alinea los botones centrados */
    gap: 7px;
    margin-top: 10px;
  }

  .auth-buttons a {
    margin: 0;
    width: 160px;             /* ← Asegura espacio para todo el texto */
  }
}

/* Botones de autenticación (login y registro) */
.auth-buttons a {

  text-decoration: none;
  padding: 10px 20px;
  background: #10602c;
  color: white;
  font-size: 14px;
  border-radius: 4px;
  transition: background 0.3s;
  text-align: center;
  white-space: nowrap;         /* ← Previene el salto de línea */
  min-width: 150px;
       /* display: flex;--> ESTA LINEA MODIFICA MI REGISTRO SDFGJHGGFHHGFGHGFFHJHGFTHHGFTGHHGFTHJGHGGHNGNGNHGNGNHGHNHGNHGHGHNGHNGNHGNGN     /* ← Establece un ancho mínimo uniforme */
}


/* Efecto hover para los botones de autenticación */
.auth-buttons a:hover {
  background: #143e23; /* Azul al pasar el mouse */
}

/* ----- SECCIÓN DEL VIDEO CON FONDO VERDE ----- */
.video-box {
  background: url('../img/log.png') no-repeat center center;
  background-size: cover; /* Que cubra todo el contenedor */
  padding: 20px;
  width: 100%;
  min-height: 800px; /* separacion de la parte de arriva */
  text-align: center;
  margin-top: 100px; /* Separación con el header */
}

/* Contenedor del video (ajusta el tamaño y centrado) */
.video-container {
  max-width: 800px;
  width: 100%;
  position: relative; /* Necesario para el icono de reproducción */
  margin: 40px auto;
}

/* Icono de reproducción centrado sobre la imagen previa del video */
.play-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 70px;
  height: 70px;
  background: rgba(0, 0, 0, 0.6); /* fondo oscuro semitransparente */
  border: 2px solid #ffffffcc;
  border-radius: 50%;
  color: white;
  font-size: 32px;
  font-weight: bold;
  text-align: center;
  line-height: 70px;
  cursor: pointer;
  transition: background 0.3s, transform 0.2s;
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}

.play-icon:hover {
  background: rgba(255, 255, 255, 0.15);
  transform: translate(-50%, -50%) scale(1.1);
}

/* ----- SECCIÓN SOBRE NOSOTROS ----- */
.about {
 
 
  max-width: 780px; /*fijacion de la letra*/
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.about h1 {
   text-align: center;
  font-size: 40px;
  margin-top: 40px;
  font-weight: bold;
   color: #4CAF50; /* Verde suave para destacar */
}
.about p{
  text-align: center;
  font-size: 25px;
  margin-top: 25px;
  font-weight: bold;
   color: #000000; /* Verde suave para destacar */ 
   font-weight: 400; /*tamaño de la letra se puede reducir o aumentar*/

}

/* ----- BLOQUES DE NIVELES ----- */
.level-blocks {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 40px;
  padding: 20px;
}

/* Cada bloque individual */
.level {
  width: 250px;
  background: white;
  border: 2px solid #ccc;
  padding: 20px;
  text-align: center;
  box-shadow: 0 0 10px rgba(0,0,0,0.1);
  transition: color 0.3s, transform 0.3s ease;
}

/* Efecto al pasar el mouse sobre cada nivel */
.level:hover {
  transform: scale(1.05);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
}

/* Imagen dentro de cada bloque */
.level-image {
  width: 100%;
  max-width: 400px;
  height:180px;
  object-fit: cover;
  margin-bottom: 10px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

/* Título del nivel */
.level-title,
.level-titlel,
.level-titlell {
  font-size: 20px;
  font-weight: bold;
  margin: 10px 0;
  transition: color 0.3s, transform 0.3s ease;
}

/* Colores diferentes para cada nivel */
.level-title { color: rgb(48, 48, 174); }
.level-titlel { color: #0a5825; }
.level-titlell { color: #dc2121; }

/* Efecto al pasar el mouse sobre título */
.level-title:hover,
.level-titlel:hover,
.level-titlell:hover {
  transform: scale(1.1);
}

/* ----- BOTONES DE LECCIÓN ----- */
.lesson-buttons {
  display: flex;
  justify-content: center;
  gap: 15px;
  margin-top: 10px;
  flex-wrap: wrap;
}

/* Botón individual */
.lesson-buttons .btn {
  width: 35px;
  height: 35px;
  background: #3b8d99;
  color: white;
  border: none;
  cursor: pointer;
  font-size: 14px;
}

/* Estilo común para botones */
.btn {
  position: relative;
  margin: 5px;
  padding: 10px 15px;
  font-size: 16px;
  cursor: pointer;
  border: none;
  background-color: #3b82f6;
  color: white;
  transition: transform 0.2s;
}

/* Efecto al pasar el mouse */
.btn:hover {
  transform: scale(1.1);
}

/* Tooltip al pasar el mouse */
.btn:hover::after {
  content: attr(data-tooltip);
  position: absolute;
  top: -35px;
  left: 50%;
  transform: translateX(-50%);
  background: #1f2937;
  color: white;
  padding: 6px 10px;
  font-size: 12px;
  white-space: nowrap;
  z-index: 100;
  border-radius: 6px;
  box-shadow: 0 0 6px rgba(0, 0, 0, 0.3);
}

/* ----- LLAMADO A LA ACCIÓN ----- */
.cta {
  text-align: center;
  font-size: 40px;
  margin-top: 40px;
  font-weight: bold;
  color: #f3ae2f;
}

/* ----- PIE DE PÁGINA ----- */



.footer-bottom {
  text-align: center;
  margin-top: 30px;
  border-top: 1px solid #444;
  padding-top: 10px;               /*linea de pie de pagina recta por debajo de pie de pagina*/
  font-size: 13px;
  color: #888;
}
.footer {
  background-color: #000000;
   color: #f1f1f1;      /*  cuadro de pie de pagina */
  padding: 40px 20px 10px 20px;
  margin-top: 50px;
}

.footer-container {
  display: flex;
  flex-wrap: wrap;
   justify-content: space-between;  /*ESTRUCTURA DEL QUE TIENE TODO MI PIE DE PAGINA MODIFICA TODO */
  gap: 30px;
  max-width: 1200px;
  margin: auto;
}




/* RESPONSIVE */
@media screen and (max-width: 768px) {
  .footer-container {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  
}
html{
  scroll-behavior:smooth;
}


/* Estilo del pie de página */
/* Estilos para el pie de página */
/* .footer {
  background-color: #222;
  color: #fff;
  padding: 30px 20px;
  font-size: 0.9em;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
} */

.footer-section {
  flex: 1;
  min-width: 200px;
  padding: 10px;
}

.footer-logo {
  width: 150px;   
  margin-bottom: 10px;
}

.footer-nav a {
  color: #fff;
  text-decoration: none;
  display: block;    
  margin: 5px 0;
  font-weight: bold;
  transition: color 0.3s;
}

.footer-nav a:hover {
  color: #3b8d99;
}

.social-icons {
  display: flex;
  gap: 10px;
}

.social-icon {
  color: #fff;
  font-size: 1.5em;
  transition: color 0.3s;
}

.social-icon:hover {
  color: #3b8d99;
}

.footer-bottom {
  text-align: center;
  margin-top: 20px;
  font-size: 0.8em;
  color: #bbb;
}

/* Estilo para las secciones de contacto y sobre nosotros */
.about-section, .contact-section {
  background-color: #000000;
  padding: 30px;
  margin: 20px 0;
}

.about-section h2, .contact-section h2 {
  color: #3b8d99;
}

.contact-form input, .contact-form textarea {
  width: 100%;
  padding: 10px;
  margin: 10px 0;
  border-radius: 8px;
  border: 1px solid #ccc;
}

.contact-form button {
  background-color: #3b8d99;
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 8px;
  cursor: pointer;
}

.contact-form button:hover {
  background-color: #2a7c6c;
}