/* =========================
   1) VARIABLES GLOBALES
   ========================= */
:root { /* Raíz del documento para variables CSS reutilizables */
  --main-bg-color: linear-gradient(120deg, #2f004d 25%, #00224b 50%, #003657 75%); /* Gradiente principal (no siempre usado) */
  --main-bg-color2: #fffb00; /* Color acento amarillo */
  --main-bg-color3: #00fefb; /* Color acento cian */
  --main-bg-color4: #cb00fef9; /* Color acento violeta (con alpha) */
  --main-bg-color-opacity: rgba(26, 26, 26, 0.7); /* Fondo oscuro translúcido (overlay) */
  --main-text-color: #ffffff; /* Texto principal (blanco) */
  --main-text-color2: #2f004d; /* Texto alternativo (violeta oscuro) */

  --border-bottom: 3px solid #fffb00; /* Borde amarillo de 3px (lo usás también como border-left en listas) */
  --hover: rgba(26, 26, 26, 0.7); /* Color hover oscuro (no siempre usado) */
  --hover2: #fe8700; /* Color hover naranja */
  --border-left: 5px solid #fffb00; /* Borde izquierdo amarillo de 5px */
  --border-top: 3px solid #fffb00; /* Borde superior amarillo de 3px */
}

/* =========================
   2) ESTILOS BASE (BODY + FONDO)
   ========================= */
body { /* Estilos generales de la página */
  margin: 0; /* Elimina márgenes por defecto del navegador */
  padding: 0; /* Elimina padding por defecto del navegador */
  font-family: 'Courier New', Courier, monospace; /* Tipografía monospace para estética tech */
  color: var(--main-text-color); /* Color de texto principal */
  background: linear-gradient(120deg, #281b47 25%, #5c0071 50%, #009dff 75%); /* Fondo con gradiente animable */
  background-size: 400% 400%; /* Agranda el gradiente para que “se mueva” sin cortar */
  animation: backgroundMove 20s linear infinite; /* Aplica animación del fondo */
  overflow-x: hidden; /* Evita scroll horizontal por desbordes */
}

@keyframes backgroundMove { /* Animación del gradiente del body */
  0% { background-position: 0% 50%; } /* Posición inicial del gradiente */
  50% { background-position: 100% 50%; } /* Se desplaza hacia la derecha */
  100% { background-position: 0% 50%; } /* Vuelve al inicio */
}

/* =========================
   3) CANVAS DE FONDO + CAPA DE CONTENIDO
   ========================= */
canvas { /* Canvas del fondo (partículas, etc.) */
  position: fixed; /* Fijo para que no se desplace con el scroll */
  top: 0; /* Pegado arriba */
  left: 0; /* Pegado a la izquierda */
  width: 100%; /* Ocupa todo el ancho */
  height: 100%; /* Ocupa toda la altura */
  z-index: -1; /* Queda detrás del contenido */
}

.content { /* Contenedor del contenido por encima del canvas */
  position: relative; /* Crea contexto para z-index */
  z-index: 1; /* Asegura que esté encima del canvas */
}

/* =========================
   4) MENÚ HAMBURGUESA
   ========================= */
.menu-toggle { /* Botón hamburguesa */
  display: none; /* Oculto por defecto (desktop) */
  cursor: pointer; /* Cursor de mano para indicar clic */
}

.menu-toggle span { /* Cada “línea” de la hamburguesa */
  display: block; /* Cada línea ocupa su propio renglón */
  width: 30px; /* Ancho de la línea */
  height: 3px; /* Alto/grosor de la línea */
  margin: 5px; /* Separación entre líneas */
  background-color: var(--main-bg-color3); /* Color cian */
  transition: transform 0.4s ease; /* Transición suave para animaciones */
}

/* =========================
   5) HEADER
   ========================= */
header { /* Encabezado */
  position: relative;
  background-color: rgba(10, 10, 10, 0.7);
  text-align: center;
  padding: 50px 0;
  overflow: hidden;
}

/* Línea inferior animada */
header::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 3px; /* grosor de la línea */
  background: linear-gradient(
    90deg,
    var(--main-bg-color2),
    var(--hover2),
    var(--main-bg-color4),
    var(--main-bg-color3),
    var(--main-bg-color2) /* ← cierre */
  );
  background-size: 300% 100%;
  animation: gradienteHeader 120s linear infinite;
}

/* Animación */
@keyframes gradienteHeader {
  0%   { background-position: 0% 50%; }
  100% { background-position: 300% 50%; }
}

header .logo-encabezado { /* Logo dentro del header */
  min-width: 150px; /* Ancho mínimo del logo */
  max-width: 300px; /* Ancho máximo del logo */
}

header h1 { /* Título principal (si existe en la página) */
  font-size: clamp(1.5rem, 5vw, 3rem); /* Tamaño fluido según viewport */
  margin: 0; /* Elimina margen por defecto */
}

h2 { /* Títulos secundarios */
  color: var(--main-bg-color2); /* Color amarillo */
  border-bottom: var(--main-bg-color2); /* OJO: esto no aplica un borde real, es solo un color (no rompe, pero no hace lo esperado) */
  padding-bottom: 10px; /* Espacio debajo del título */
}

header p { /* Texto dentro del header (si existe) */
  font-size: 1.5em; /* Tamaño de fuente más grande */
  margin: 0; /* Sin margen */
  color: #ff00ff; /* Color magenta */
}

/* =========================
   6) NAV (MENÚ)
   ========================= */
nav { /* Contenedor del menú */
  display: flex; /* Flex para centrar */
  flex-direction: row; /* Dirección horizontal */
  justify-content: center; /* Centra el contenido */
  background-color: rgba(26, 26, 26, 0.7); /* Fondo oscuro translúcido */
}

nav ul { /* Lista de links */
  display: flex; /* Links en fila */
  flex-wrap: wrap; /* Permite saltar de línea si no entran */
  justify-content: space-around; /* (queda redundante porque abajo lo volvés a definir) */
  justify-content: center; /* Centra horizontalmente los items */
  max-width: 800px; /* Limita el ancho del menú */
}

nav ul li { /* Item de lista */
  flex: 0 1 auto; /* Tamaño flexible basado en contenido */
  text-align: center; /* Centra el texto */
  border-radius: 5px; /* Bordes redondeados */
}

nav ul li a { /* Link */
  display: block; /* El link ocupa todo el área del li */
  text-decoration: none; /* Quita subrayado */
  color: #ffffff; /* Texto blanco */
  font-size: 1.2em; /* Tamaño del link */
  padding: 10px; /* Área clickeable */
  border-radius: 5px; /* Bordes redondeados */
  transition: background-color 0.3s ease; /* Transición suave del fondo (aunque no estás cambiando fondo en hover) */
}

nav ul li a:hover { /* Hover de links */
  color: var(--hover2); /* Cambia el color a naranja */
}

.texto-resaltado { /* Clase para resaltar texto */
  color: var(--main-bg-color2); /* Amarillo */
}

/* =========================
   7) RESPONSIVE: NAV (MÓVIL)
   ========================= */
@media screen and (max-width: 768px) { /* Reglas para pantallas <= 768px */
  .menu-toggle { /* Botón hamburguesa en móvil */
    display: block; /* Se muestra */
    justify-self: end; /* Intenta alinearse al final (solo tiene efecto en grid, no en flex) */
    margin-right: 20px; /* Separación derecha */
  }

  nav ul { /* Menú oculto en móvil */
    display: none; /* Se oculta por defecto */
    justify-content: center; /* Mantiene centrado si se muestra */
    flex: 1 1 calc(100% - 20px); /* Regla flex (no se usa mucho con display none) */
  }

  nav.active ul { /* Cuando nav tiene clase active */
    display: block; /* Se muestra el ul */
    text-align: center; /* Centra el texto */
  }

  nav.active ul li { /* Items en columna cuando está activo */
    display: block; /* Cada item ocupa una línea */
  }
}

/* =========================
   8) CONTENEDOR GENERAL
   ========================= */
.container { /* Contenedor para secciones */
  display: flex; /* Flexbox */
  align-items: center; /* Centra verticalmente */
  justify-content: center; /* Centra horizontalmente */
  flex-direction: column; /* Apila elementos */
  justify-content: center; /* Repetido (no rompe) */
  max-width: 1200px; /* Ancho máximo */
  margin: 0 auto; /* Centra el contenedor */
  padding: 20px; /* Espaciado interno */
  font-size: 1.2em; /* Tamaño de fuente base dentro */
}

.container p { /* Párrafos dentro de .container */
  background-color: rgba(10, 10, 10, 0.7); /* Fondo oscuro translúcido */
  text-align: center; /* Texto centrado */
  padding: 20px 20px; /* Padding */
  border-left: 3px solid #fffb00; /* Borde izquierdo amarillo de 3px */
  border-radius: 10px; /* Bordes redondeados */
  margin: 10px; /* Margen externo */
  word-break: break-word; /* Rompe palabras largas */
  white-space: normal; /* Permite salto de línea normal */
}

.container ul li { /* Items de lista dentro de container */
  background-color: rgba(10, 10, 10, 0.7); /* Fondo oscuro */
  text-align: center; /* Texto centrado */
  padding: 20px 20px; /* Padding */
  border-left: 3px solid #fffb00; /* Borde izquierdo amarillo */
  border-radius: 10px; /* Bordes redondeados */
}

/* =========================
   9) LABORATORIOS (ÍCONOS)
   ========================= */
.laboratorios { /* Contenedor de íconos */
  display: flex; /* Flexbox */
  flex-wrap: wrap; /* Permite múltiples filas */
  justify-content: center; /* Centra horizontalmente */
  align-items: center; /* Centra verticalmente */
  gap: 20px; /* Espacio entre íconos */
  margin: 20px 0; /* Separación vertical */
}

.container .laboratorios img { /* Íconos dentro de laboratorios */
  width: 80px; /* Ancho fijo */
  height: 80px; /* Alto fijo */
  opacity: 90%; /* Leve transparencia */
  transition: transform 0.3s, opacity 0.3s; /* Transición hover */
}

.container .laboratorios img:hover { /* Hover íconos */
  transform: scale(1.2); /* Agranda el ícono */
  opacity: 100%; /* Opacidad completa */
}

/* =========================
   10) LISTAS GENERALES
   ========================= */
ul { /* Listas sin viñetas */
  list-style-type: none; /* Quita bullets */
  padding: 0; /* Quita padding */
}

ul li { /* Items de lista (general) */
  background-color: rgba(26, 26, 26, 0.7); /* Fondo */
  margin: 10px 0; /* Separación vertical */
  padding: 10px; /* Espaciado interno */
  border-left: var(--border-bottom); /* Usa variable de borde (aunque el nombre dice bottom) */
}

/* =========================
   11) PROYECTOS / CONTENIDOS (GRIDS)
   ========================= */
.proyecto { /* Layout de proyecto: texto + card */
  display: flex; /* Flexbox */
  flex-direction: row; /* En fila */
  align-items: center; /* Alinea verticalmente */
  justify-content: space-between; /* Separa extremos */
  gap: 20px; /* Espacio entre columnas */
  margin-bottom: 20px; /* Separación inferior */
}

.contenido { /* Grid flexible para cards */
  display: flex; /* Flexbox */
  flex-direction: row; /* En fila */
  flex-wrap: wrap; /* Permite bajar a otra línea */
  justify-content: center; /* Centra las cards */
  gap: 20px; /* Espacio entre cards */
  width: 100%; /* Ocupa ancho disponible */
  max-width: 100vw; /* Evita desbordes (ojo con márgenes/paddings) */
  box-sizing: border-box; /* Incluye padding/borde en el tamaño */
}

.contenido-card { /* Card estándar para contenido/proyecto */
  display: flex; /* Flexbox */
  flex: 1 1 calc(50% - 5px); /* Intenta formar 2 columnas */
  max-width: 500px; /* Límite máximo */
  min-width: 300px; /* Límite mínimo */
  margin: 10px; /* Margen externo */
  position: relative; /* Para posicionar elementos internos si hace falta */
}

.contenido-card-clases { /* Variante de card para clases */
  display: flex; /* Flexbox */
  flex: 1 1 calc(50% - 5px); /* Intenta formar 2 columnas */
  max-width: 500px; /* Límite máximo */
  min-width: 300px; /* Límite mínimo */
  margin: 10px; /* Margen externo */
  position: relative; /* Contexto para elementos posicionados */
}

/* =========================
   12) RESPONSIVE: CONTENIDO (MÓVIL)
   ========================= */
@media (max-width: 768px) { /* Reglas para <=768px */
  .contenido { /* Contenedor de cards */
    align-items: center; /* Centra items */
    justify-content: center; /* Centra items */
  }

  .contenido-card { /* Card ocupa toda la fila */
    flex: 1 1 100%; /* 1 columna */
    min-width: auto; /* Sin mínimo */
    max-width: 100vw; /* Evita desbordes */
  }
}

/* =========================
   13) DESCRIPCIONES + TARJETAS 3D (PROYECTOS)
   ========================= */
.descripcion-proyecto { /* Columna de descripción de proyectos */
  flex: 1; /* Ocupa la mitad aprox. */
}

.descripcion-contenido { /* Columna de descripción de contenido */
  flex: 1; /* Ocupa la mitad aprox. */
}

.proyecto-card { /* Card con perspectiva 3D */
  flex: 1; /* Ocupa la mitad aprox. */
  perspective: 1000px; /* Profundidad 3D */
  height: auto; /* Alto automático */
  max-width: 100%; /* No excede contenedor */
  align-items: center; /* Alineación interna (tiene efecto si es flex, aquí no siempre aplica) */
  margin-right: 20px; /* Margen derecho */
}

.proyecto-imagen { /* Contenedor imagen con inclinación */
  transform: rotateY(-15deg) rotateX(5deg); /* Inclinación inicial */
  transition: transform 0.5s ease; /* Transición hover */
  transform-style: preserve-3d; /* Mantiene 3D */
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3); /* Sombra */
  border-radius: 10px; /* Bordes */
  overflow: hidden; /* Recorta overflow */
  background-color: rgba(10, 10, 10, 0.7); /* Fondo */
  border-left: var(--border-left); /* Borde izquierdo */
}

.proyecto-video { /* Contenedor video con inclinación */
  transform: rotateY(-15deg) rotateX(5deg); /* Inclinación inicial */
  transition: transform 0.5s ease; /* Transición hover */
  transform-style: preserve-3d; /* Mantiene 3D */
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3); /* Sombra */
  border-radius: 10px; /* Bordes */
  overflow: hidden; /* Recorta overflow */
  background-color: rgba(10, 10, 10, 0.7); /* Fondo */
  border-left: var(--border-left); /* Borde izquierdo */
}

/* =========================
   14) CONTENEDORES DE IMAGEN (CARDS)
   ========================= */
.contenido-imagen { /* Card para imagen (clases) */
  width: 100%; /* Ocupa ancho de su contenedor */
  height: auto; /* Alto automático */
  transition: transform 0.5s ease; /* Transición hover */
  transform-style: preserve-3d; /* Mantiene 3D */
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3); /* Sombra */
  border-radius: 10px; /* Bordes */
  overflow: hidden; /* Recorta overflow */
  background-color: rgba(10, 10, 10, 0.7); /* Fondo de card */
  text-align: center; /* Centra contenido */
  padding: 10px 10px; /* Padding */
  border-left: var(--border-left); /* Borde izquierdo */
  margin-bottom: 20px; /* Separación inferior */
}

.contenido-imagen-proyecto { /* Card para imagen de proyecto */
  transition: transform 0.5s ease; /* Transición hover */
  transform-style: preserve-3d; /* Mantiene 3D */
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3); /* Sombra */
  border-radius: 10px; /* Bordes */
  overflow: hidden; /* Recorta overflow */
  background-color: rgba(10, 10, 10, 0.7); /* Fondo de card */
  text-align: center; /* Centra */
  padding: 10px 10px; /* Padding */
  border-left: var(--border-left); /* Borde izquierdo */
  margin-bottom: 20px; /* Separación inferior */
}

.explorar-laboratorios { /* Card para botón/imagen de “Explorar laboratorios” */
  transition: transform 0.5s ease; /* Transición hover */
  transform-style: preserve-3d; /* Mantiene 3D */
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3); /* Sombra */
  border-radius: 10px; /* Bordes */
  overflow: hidden; /* Recorta overflow */
  background-color: rgba(10, 10, 10, 0.7); /* Fondo de card */
  text-align: center; /* Centra contenido */
  padding: 10px 10px; /* Padding */
  border: var(--border-left); /* Borde completo (usa variable pensada para left) */
  margin-bottom: 20px; /* Separación inferior */
}

.contenido-imagen p { /* Párrafo dentro de la card de imagen */
  word-break: break-word; /* Rompe palabras largas */
  white-space: normal; /* Permite envoltura normal */
}

/* =========================
   15) MEDIOS (IMG / IFRAME)
   ========================= */
.proyecto-imagen img { /* Imagen dentro de proyecto-imagen */
  width: 100%; /* Ocupa todo el ancho */
  height: auto; /* Mantiene proporción */
  object-fit: cover; /* Recorta para llenar */
}

.proyecto-video iframe { /* Iframe dentro de proyecto-video */
  width: 560px; /* Ancho fijo */
  height: 315px; /* Alto fijo */
  object-fit: cover; /* Ajuste (no siempre aplica a iframe) */
}

.contenido-imagen img { /* Imagen dentro de contenido-imagen */
  width: 150px; /* Ancho fijo */
  height: 150px; /* Alto fijo */
  max-height: 300px; /* Límite alto */
  object-fit: cover; /* Recorta para llenar */
  border-radius: 10px; /* Bordes */
  padding: 10px; /* Padding interno */
}

.contenido-imagen-proyecto img { /* Imagen dentro de contenido-imagen-proyecto */
  height: 100%; /* Ocupa alto del contenedor */
  width: 100%; /* Ocupa ancho del contenedor */
  max-height: 300px; /* Límite alto */
  object-fit: cover; /* Recorta */
  border-radius: 10px; /* Bordes */
}

.explorar-laboratorios img { /* Imagen dentro de explorar-laboratorios */
  height: 100%; /* Alto completo */
  width: 100%; /* Ancho completo */
  max-height: 300px; /* Límite alto */
  object-fit: cover; /* Recorta */
  border-radius: 10px; /* Bordes */
}

/* =========================
   16) HOVERS / INTERACCIONES
   ========================= */
.proyecto-card:hover .proyecto-imagen { /* Hover: endereza imagen */
  transform: rotateY(0deg); /* Quita inclinación */
}

.proyecto-card:hover .proyecto-video { /* Hover: endereza video */
  transform: rotateY(0deg); /* Quita inclinación */
}

.contenido-card-clases:hover .contenido-imagen { /* Hover: agranda card de clases */
  transform: scale(1.1); /* Escala */
}

.contenido-card:hover .contenido-imagen-proyecto { /* Hover: agranda card de proyecto */
  transform: scale(1.1); /* Escala */
}

.contenido-card:hover .explorar-laboratorios { /* Hover: agranda explorar-laboratorios */
  transform: scale(1.1); /* Escala */
}

/* =========================
   17) RESPONSIVE: PROYECTOS Y CARDS (MÓVIL)
   ========================= */
@media (max-width: 768px) { /* Reglas para <=768px */
  .proyecto { /* Apila proyecto en móvil */
    flex-direction: column; /* Columna */
  }

  .contenido { /* Apila cards en móvil */
    flex-direction: column; /* Columna */
  }

  .descripcion-proyecto { /* Descripción ocupa 100% */
    flex: none; /* Sin flex */
    width: 100%; /* Ancho completo */
  }

  .proyecto-card { /* Card de proyecto ocupa casi todo */
    flex: none; /* Sin flex */
    width: 90%; /* 90% */
    margin-right: 0px; /* Sin margen derecho */
  }

  .contenido-card { /* Card de contenido ocupa casi todo */
    flex: none; /* Sin flex */
    width: 90%; /* 90% */
    margin-right: 0px; /* Sin margen derecho */
  }
}

/* =========================
   18) BLOQUES EXTRA
   ========================= */
.experiencia { /* Bloque experiencia */
  background-color: rgba(26, 26, 26, 0.7); /* Fondo */
  margin: 20px 0; /* Separación vertical */
  padding: 20px; /* Padding */
  border-left: var(--border-left); /* Borde izquierdo */
}

/* =========================
   19) FOOTER
   ========================= */
footer {
  position: relative;
  background-color: rgba(10, 10, 10, 0.7);
  text-align: center;
  padding: 20px 0;
  overflow: hidden;
}

/* Línea superior animada */
footer::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px; /* grosor de la línea */
  background: linear-gradient(
    90deg,
    var(--main-bg-color2),
    var(--hover2),
    var(--main-bg-color4),
    var(--main-bg-color3),
    var(--main-bg-color2) /* ← cierre */
  );
  background-size: 300% 100%;
  animation: gradienteFooter 120s linear infinite;
}

/* Animación */
@keyframes gradienteFooter {
  0%   { background-position: 0% 50%; }
  100% { background-position: 300% 50%; }
}

footer p { /* Texto del footer */
  margin: 0; /* Sin margen */
}

/* =========================
   20) LINKS Y UTILIDADES
   ========================= */
#contact p a { /* Links dentro del bloque contacto */
  color: var(--main-text-color); /* Blanco */
}

a { /* Links globales */
  color: inherit; /* Hereda color del contenedor */
  text-decoration: none; /* Sin subrayado */
}

.capacitaciones { /* Link con animación */
  font-size: 1rem; /* Tamaño normal */
  color: var(--main-text-color); /* Blanco */
  text-decoration: none; /* Sin subrayado */
  transition: all 0.3s ease; /* Transición suave */
}

.capacitaciones:hover { /* Hover de capacitaciones */
  font-size: 1.2rem; /* Aumenta tamaño */
  color: #ff00ff; /* Cambia a magenta */
  text-decoration: underline; /* Subraya */
}

/* =========================
   21) REDES SOCIALES (CONTAINERS)
   ========================= */
.social-container { /* Contenedor redes general */
  display: flex; /* Flex */
  flex-wrap: wrap; /* Wrap */
  align-items: center; /* Centrado vertical */
  justify-content: center; /* Centrado horizontal */
  gap: 20px; /* Espacio */
  margin-bottom: 15px; /* Separación */
  padding-bottom: 20px; /* Separación */
  margin-top: 10px; /* Separación */
  border-radius: 10px; /* Bordes */
}

.social-container-contactame { /* Variante contactame */
  display: flex; /* Flex */
  flex-wrap: wrap; /* Wrap */
  align-items: center; /* Centrado vertical */
  justify-content: center; /* Centrado horizontal */
  gap: 20px; /* Espacio */
  margin-bottom: 15px; /* Separación */
  padding-bottom: 20px; /* Separación */
  margin-top: 10px; /* Separación */
  border-radius: 10px; /* Bordes */
}

.social-container a { /* Links dentro de redes */
  margin: 0 10px; /* Separación lateral */
  display: inline-block; /* Área clickeable */
}

.social-container img { /* Íconos redes */
  width: 35px; /* Ancho */
  height: 35px; /* Alto */
  transition: transform 0.3s ease; /* Hover suave */
}

.social-container img:hover { /* Hover íconos */
  transform: scale(1.1); /* Agranda */
}

.social-container-footer { /* Contenedor redes footer */
  display: flex; /* Flex */
  align-items: center; /* Centra vertical */
  justify-content: center; /* Centra horizontal */
  gap: 20px; /* Espacio */
  margin-bottom: 15px; /* Separación */
  padding-bottom: 20px; /* Separación */
  margin-top: 10px; /* Separación */
}

.social-container-footer a { /* Links en footer */
  margin: 0 10px; /* Separación */
  display: inline-block; /* Área clickeable */
}

.social-container-footer img { /* Íconos en footer */
  width: 35px; /* Ancho */
  height: 35px; /* Alto */
  transition: transform 0.3s ease; /* Hover suave */
}

.social-container-footer img:hover { /* Hover íconos footer */
  transform: scale(1.1); /* Agranda */
}

/* =========================
   22) ANIMACIÓN (OPCIONAL)
   ========================= */
@keyframes palpitar { /* Animación “latido” (no activa actualmente) */
  0%, 100% { transform: scale(1); } /* Tamaño normal */
  50% { transform: scale(1.2); } /* Se agranda */
}

.social-container-contactame img { /* Íconos contactame */
  width: 35px; /* Ancho */
  height: 35px; /* Alto */
  transition: transform 0.3s ease; /* Hover suave */
}

.social-container-contactame img:hover { /* Hover contactame */
  transform: scale(1.1); /* Agranda */
}

/* =========================
   23) FORMULARIO (NOTA: TIENE DUPLICADOS)
   ========================= */
.formulario { /* Contenedor del formulario */
  display: flex; /* Flex */
  flex-direction: column; /* Columna */
  justify-content: center; /* Centrado */
  align-items: center; /* Centrado */
  max-width: 1200px; /* Máximo */
  margin: 0 auto; /* Centra */
  padding: 20px; /* Padding */
  font-size: 1.2em; /* Fuente */
}

form { /* Form principal */
  display: flex; /* Flex */
  flex-direction: column; /* Columna */
  justify-content: center; /* Centrado */
  align-items: center; /* Centrado */
  text-align: center; /* Texto centrado */
  width: 80%; /* Ancho relativo */
  max-width: 500px; /* Límite */
  background-color: rgba(10, 10, 10, 0.7); /* Fondo */
  border-left: 3px solid #00ff99; /* Borde verde */
  border-radius: 10px; /* Bordes */
  padding: 20px; /* Padding */
  box-shadow: 0 0 15px rgba(0, 255, 153, 0.5); /* Brillo verde */
  margin: 20px; /* Margen */
}

form h2 { /* Título dentro del form */
  color: white; /* Blanco */
  margin-bottom: 20px; /* Separación */
}

form label { /* Labels */
  text-align: center; /* Centra texto */
  display: block; /* Bloque */
  color: #fff; /* Blanco */
  margin-top: 5px; /* Separación */
  padding: 10px; /* Padding */
  font-weight: bold; /* Negrita */
}

form input { /* Inputs */
  width: 90%; /* Ancho */
  padding: 10px; /* Padding */
  font-size: 1em; /* Tamaño */
  border: 1px solid #ccc; /* Borde */
  border-radius: 5px; /* Bordes */
  margin-bottom: 10px; /* Separación */
  background-color: #fff; /* Fondo blanco */
}

form input:focus { /* Focus input */
  border-color: #00ff99; /* Borde verde */
  outline: none; /* Sin outline */
}

/* Botón del form (primera versión) */
form button { /* Botón */
  width: 100%; /* Ancho completo */
  padding: 12px; /* Padding */
  font-size: 1.2em; /* Tamaño */
  background-color: #00ff99; /* Fondo verde (OJO: más abajo lo redefinís) */
  color: #fff; /* Texto blanco */
  border: none; /* Sin borde */
  border-radius: 5px; /* Bordes */
  cursor: pointer; /* Mano */
  transition: background-color 0.3s ease; /* Transición */
}

form button:hover { /* Hover botón (primera versión) */
  background-color: #009966; /* Verde más oscuro */
}

form img { /* Imagen dentro del form */
  width: 150px; /* Ancho */
  margin-top: 20px; /* Separación */
}

/* Responsive del formulario */
@media screen and (max-width: 768px) { /* <=768px */
  .formulario { padding: 10px; } /* Menos padding */
  form { padding: 15px; } /* Menos padding */
  form h2 { font-size: 1.5em; } /* Título más chico */
  form input { font-size: 1em; padding: 8px; } /* Inputs */
  form button { font-size: 1em; padding: 10px; } /* Botón */
}

@media screen and (max-width: 480px) { /* <=480px */
  .formulario { display: flex; padding: 5px; } /* Menos padding */
  form { padding: 10px; } /* Menos padding */
  form h2 { font-size: 1.2em; } /* Título más chico */
  form input { font-size: 0.9em; } /* Input más chico */
  form button { font-size: 1em; padding: 8px; } /* Botón */
}

/* ⚠️ DUPLICADOS: esta sección redefine estilos del form */
form div { margin-bottom: 15px; } /* Margen entre bloques */
form label { display: block; color: #fff; margin-bottom: 5px; font-weight: bold; } /* Redefine label */
form input { width: 100%; padding: 10px; font-size: 1em; border: 1px solid #ccc; border-radius: 5px; margin-bottom: 10px; background-color: #fff; } /* Redefine input */
form input:focus { border-color: #00ff99; outline: none; } /* Redefine focus */

/* Botón del form (segunda versión - la que gana por cascada) */
form button { /* Botón (segunda versión) */
  width: 100%; /* Ancho */
  padding: 12px; /* Padding */
  font-size: 1.2em; /* Tamaño */
  background-color: rgba(10, 10, 10, 0.7); /* Fondo oscuro (esta es la que termina aplicando) */
  color: #00ff99; /* Texto verde */
  border: none; /* Sin borde */
  border-radius: 5px; /* Bordes */
  cursor: pointer; /* Mano */
  transition: background-color 0.3s ease; /* Transición */
  box-shadow: 0 0 15px rgba(0, 255, 153, 0.5); /* Sombra verde */
}

form button:hover { /* Hover final */
  color: #000000; /* Texto negro */
  background-color: #00ff99; /* Fondo verde */
}

form .error-message { /* Mensaje de error */
  display: flex; /* Flex */
  margin-top: 10px; /* Separación */
  color: #ffc400; /* Amarillo */
}

.datos-formulario div { /* Contenedor interno de datos */
  display: flex; /* Flex */
  flex-direction: column; /* Columna */
  justify-content: center; /* Centra */
  align-items: center; /* Centra */
}

.cerrar-sesion { /* Contenedor cerrar sesión */
  display: flex; /* Flex */
  justify-content: center; /* Centra */
  text-align: center; /* Texto centrado */
}

#boton-cerrar-sesion { /* Botón cerrar sesión */
  width: 200px; /* Ancho */
  padding: 12px; /* Padding */
  font-size: 1.2em; /* Tamaño */
  background-color: rgba(10, 10, 10, 0.7); /* Fondo */
  color: #00ff99; /* Texto verde */
  border: none; /* Sin borde */
  border-radius: 5px; /* Bordes */
  cursor: pointer; /* Mano */
  transition: background-color 0.3s ease; /* Transición */
  box-shadow: 0 0 15px rgba(0, 255, 153, 0.5); /* Brillo */
  margin-bottom: 50px; /* Separación inferior */
}

#boton-cerrar-sesion:hover { /* Hover cerrar sesión */
  color: #000000; /* Texto negro */
  background-color: #00ff99; /* Fondo verde */
}

/* =========================
   24) VIDEO / IFRAME (JUEGO / AVATAR)
   ========================= */
#game-container { /* Contenedor principal del video/juego */
  display: flex; /* Flex */
  flex-direction: column; /* Columna */
  align-items: center; /* Centra */
  text-align: center; /* Texto centrado */
  justify-content: center; /* Centra */
  height: 100%; /* Alto relativo al contenedor */
  padding: 0 30px; /* Padding horizontal */
  box-sizing: border-box; /* Incluye padding en el cálculo */
}

#video-container { /* Contenedor del iframe 16:9 */
  position: relative; /* Para posicionar el iframe absoluto */
  width: 100%; /* Ancho completo */
  max-width: 800px; /* Límite */
  aspect-ratio: 16/9; /* Mantiene proporción */
  margin: 15px auto 20px auto; /* Márgenes verticales y centrado */
}

#avatar-video { /* Iframe/Video absoluto dentro del contenedor */
  position: absolute; /* Absoluto dentro de #video-container */
  top: 0; /* Arriba */
  left: 0; /* Izquierda */
  width: 100%; /* Ancho completo */
  height: 100%; /* Alto completo */
  border: var(--border-bottom); /* Borde */
  border-radius: 10px; /* Bordes */
}

/* =========================
   25) FIX: CENTRADO EXPLORAR LABORATORIOS
   ========================= */
#experiencia-educativa .contenido-card { /* Ajuste solo para esta sección */
  flex: 0 1 auto; /* Deja de comportarse como 2 columnas */
  min-width: auto; /* Quita mínimo */
  max-width: 500px; /* Mantiene límite */
  margin: 10px auto; /* Centra */
}

#experiencia-educativa .explorar-laboratorios { /* Centra el contenido interno */
  display: flex; /* Flex */
  justify-content: center; /* Centra horizontalmente */
  align-items: center; /* Centra verticalmente */
}

#experiencia-educativa .explorar-laboratorios a { /* Link como bloque inline */
  display: inline-block; /* Ajusta al contenido */
}

#experiencia-educativa .explorar-laboratorios img { /* Imagen sin espacio inline */
  display: block; /* Evita “espacio fantasma” debajo */
}