@charset "UTF-8";
@import url("https://fonts.googleapis.com/css2?family=Figtree:ital,wght@0,300..900;1,300..900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");
/* --- RESET --- */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  font-family: "Reddit Sans", "Arial", sans-serif;
  transition: background-color 0.4s ease-in-out;
}

:root {
  --bg-main: #F5F5F5;
  --bg-secondary: #2C2F36;
  --accent: #00C2FF;
  --highlight: #2CB67D;
  --soft-blue: #94A1B2;
  --text-main: #000000;
  --text-secondary: #9b9b9b;
  --text-nav: #F5F5F5;
  --color-black: #000000;
  --color-dark-gray: #2c2c2c;
}

/* --- CONTENEDOR PRINCIPAL (LAYOUT) --- */
/* --- ASIGNACIÓN DE ÁREAS --- 
.main-content { grid-area: main; }
.sidebar { grid-area: sidebar; }
.main-footer { grid-area: footer; }
*/
/* Usamos CSS Grid, es ideal para este tipo de layout 
.portfolio-container {
    display: grid;
    grid-template-columns: 3fr 0.8fr;  //Columna principal 3 partes, sidebar 1 parte 
    grid-template-rows: 1fr;  //Fila principal auto-ajustable 
    grid-template-areas:
        "main sidebar";  //Saque el footer 
    min-height: 100vh;

}
*/
/* --- SECCIÓN PRINCIPAL (CONTENIDO IZQUIERDO) --- */
.portfolio-container {
  display: flex;
  background-color: var(--bg-main);
  min-height: 100vh;
  transition: background-color 0.5s ease-in-out;
}

.main-content {
  margin-right: 240px;
  padding: 0px;
  width: calc(100% - 240px);
}

.greeting {
  display: inline-block;
  font-size: 2.5rem;
  min-height: 3.3rem;
  /* ajustá según tamaño máximo esperado */
  position: relative;
  transition: opacity 0.3s ease, transform 0.3s ease;
  opacity: 1;
  transform: translateY(0);
}
.greeting.fade-out {
  opacity: 0;
  transform: translateY(20px);
}

.profile-section {
  display: flex;
  align-items: center;
  gap: 40px;
  max-width: 800px;
  text-align: justify;
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
@keyframes float {
  0% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-15px);
  }
  100% {
    transform: translateY(0px);
  }
}
.profile-picture {
  position: relative;
  width: 250px;
  height: 250px;
  border-radius: 50%;
  background-color: transparent;
  flex-shrink: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1;
  animation: float 6s ease-in-out infinite;
}
.profile-picture::before {
  content: "";
  position: absolute;
  inset: -8px;
  background: conic-gradient(from 0deg, transparent 40%, var(--accent) 50%, transparent 60%);
  border-radius: 50%;
  animation: spin 4s linear infinite;
  z-index: -2;
  filter: blur(4px);
}
.profile-picture::after {
  content: "";
  position: absolute;
  inset: -2px;
  background-color: var(--bg-main);
  border-radius: 50%;
  z-index: -1;
  transition: background-color 0.5s ease-in-out;
}
.profile-picture img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  position: relative;
  z-index: 1;
}

.profile-text {
  color: var(--text-secondary);
}

.profile-text h1 {
  font-size: 2.5rem;
  margin-bottom: 20px;
  color: var(--text-main);
}

.profile-text p {
  font-size: 1rem;
  line-height: 1.5;
}

@media (max-width: 768px) {
  .main-content {
    width: 100%;
    margin-right: 0;
    /* --- ¡AQUÍ ESTÁ LA CORRECCIÓN! --- */
    /* Quitamos el padding de abajo que era para la barra inferior */
    /* padding-bottom: 90px; */
    /* Y añadimos un padding arriba para dejar espacio a la barra superior */
    padding-top: 85px;
    /* (65px de la barra + 20px de espacio para que respire) */
  }
  .profile-section {
    flex-direction: column;
    text-align: justify;
    gap: 30px;
  }
  .profile-picture {
    width: 200px;
    height: 200px;
  }
  .greeting,
  .profile-text h1 {
    display: block;
    /* 1. Hacemos que ocupe todo el ancho */
    text-align: center;
    /* 2. Ahora sí centramos el texto en ese espacio */
    font-size: clamp(1.8rem, 4vw, 2.5rem);
  }
  .profile-text p {
    font-size: 1rem;
  }
}
/* --- BARRA LATERAL FIJA (DERECHA) --- */
.sidebar {
  /* --- INICIO DE LOS CAMBIOS --- */
  position: fixed;
  /* ¡LA CLAVE! Lo fija en la pantalla. */
  top: 0;
  right: 0;
  /* Lo pegamos a la derecha. */
  height: 100vh;
  /* Ocupa el 100% del ALTO de la VENTANA. */
  width: 240px;
  /* Le damos un ancho fijo. AJUSTALO si es necesario. */
  z-index: 1000;
  /* Para que esté siempre por encima del contenido. */
  background: linear-gradient(to bottom, var(--color-black), var(--color-dark-gray));
  color: var(--text-secondary);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  /* Mantiene nav y copyright separados */
  box-shadow: rgba(0, 0, 0, 0.9) 0px 0px 30px;
  padding: 10px;
  box-sizing: border-box;
  /* Importante para que el padding no sume al ancho */
}

/* Comienza el toggle LIGHT/NIGHT /*

/* --- El Contenedor del Botón (Compacto) --- */
.toggle-container {
  display: flex;
  justify-content: end;
}

.toggle-label {
  display: block;
  position: relative;
  width: 60px;
  height: 30px;
  background-color: #87CEEB;
  /* Azul cielo */
  border-radius: 50px;
  cursor: pointer;
  transition: all 0.4s ease;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
  overflow: hidden;
}

/* --- El Sol / La Luna (El Protagonista) --- */
.toggle-thumb {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 24px;
  height: 24px;
  background-color: #FFD700;
  /* Sol */
  border-radius: 50%;
  transition: all 0.4s cubic-bezier(0.68, -0.55, 0.27, 1.55);
  box-shadow: 0 0 4px rgba(255, 215, 0, 0.9);
  z-index: 10;
}

/* --- Las Nubecitas del Día --- */
.cloud {
  position: absolute;
  background-color: #fff;
  border-radius: 15px;
  transition: all 0.4s ease;
  opacity: 1;
  z-index: 5;
}

.cloud-1 {
  top: 13px;
  left: 13px;
  width: 20px;
  height: 10px;
}

.cloud-2 {
  top: 18px;
  left: 22px;
  width: 19px;
  height: 8px;
}

/* --- LAS ESTRELLAS EN EL CIELO NOCTURNO (POSICIÓN CORREGIDA) --- */
.star {
  position: absolute;
  background-color: #FFF;
  border-radius: 50%;
  transition: all 0.4s ease;
  z-index: 5;
  transform: scale(0);
  opacity: 0;
}

/* AHORA USAMOS 'left' PARA QUE APAREZCAN EN LA ZONA VACÍA */
.star-1 {
  top: 6px;
  left: 10px;
  width: 3px;
  height: 3px;
}

.star-2 {
  top: 18px;
  left: 15px;
  width: 2px;
  height: 2px;
}

.star-3 {
  top: 12px;
  left: 22px;
  width: 1px;
  height: 1px;
}

/* --- Escondemos el checkbox que nadie necesita ver --- */
.toggle-checkbox {
  display: none;
}

/* --- LA TRANSFORMACIÓN A MODO NOCHE --- */
/* 1. Fondo a azul noche */
.toggle-checkbox:checked + .toggle-label {
  background-color: #090A0F;
}

/* 2. Sol -> Luna (se mueve y le sale la sombra) */
.toggle-checkbox:checked + .toggle-label .toggle-thumb {
  background-color: #f1c40f;
  transform: translateX(30px);
  box-shadow: inset -4px 0 0 0px #f0e68c;
}

/* 3. Las nubes se van flotando */
.toggle-checkbox:checked + .toggle-label .cloud {
  transform: translateX(-25px);
  /* Hacemos que se vayan para el otro lado */
  opacity: 0;
}

/* 4. ¡Las estrellas del fondo aparecen! */
.toggle-checkbox:checked + .toggle-label .star {
  transform: scale(1);
  opacity: 1;
}

/* Les damos un delay para que titilen al aparecer */
.toggle-checkbox:checked + .toggle-label .star-1 {
  transition-delay: 0.1s;
}

.toggle-checkbox:checked + .toggle-label .star-2 {
  transition-delay: 0.2s;
}

.toggle-checkbox:checked + .toggle-label .star-3 {
  transition-delay: 0.3s;
}

/* TERMINA EL TOGGLE LIGHT/NIGHT */
.sidebar nav {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-right: 0;
}

.sidebar nav ul {
  list-style: none;
  padding: 0;
  display: flex;
  justify-content: flex-end;
  flex-direction: column;
  gap: 12px;
}

.sidebar nav ul li a {
  display: block;
  color: var(--text-nav);
  text-decoration: none;
  font-size: 1rem;
  padding: 8px 12px;
  border-radius: 0;
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  position: relative;
  overflow: hidden;
  border: 2px solid transparent;
  width: 100%;
  box-sizing: border-box;
  justify-content: start;
  text-align: justify;
  /* <-- ¡ESTA ES LA LÍNEA MÁGICA! */
}

/* Efecto diagonal que se desliza desde la izquierda */
.sidebar nav ul li a::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  /* Empieza fuera de la vista */
  width: 100%;
  height: 100%;
  background: linear-gradient(45deg, var(--accent), #0099cc);
  /* Gradiente diagonal */
  transition: left 0.5s ease;
  /* Velocidad del deslizamiento */
  transform: skewX(-15deg);
  /* Inclinación diagonal */
  z-index: -1;
  /* Por debajo del texto */
}

/* Activar el efecto diagonal en hover */
.sidebar nav ul li a:hover::before,
.sidebar nav ul li a.active::before {
  left: 0;
  /* Se desliza hasta cubrir todo el botón */
}

/* Estados hover y active */
.sidebar nav ul li a:hover,
.sidebar nav ul li a.active {
  color: #fff;
  /* Texto blanco sobre el fondo colorido */
  transform: translateX(3px);
  /* Movimiento sutil hacia la derecha */
}

.card-sidebar {
  width: fit-content;
  height: fit-content;
  background-color: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 25px 25px;
  gap: 20px;
}

/* for all social containers*/
.socialContainer {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background-color: rgb(44, 44, 44);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  transition-duration: 1s;
}

/* instagram*/
.containerOne:hover {
  background-color: #d62976;
  transition-duration: 0.3s;
}

/* GitHub*/
.containerTwo:hover {
  background-color: black;
  transition-duration: 0.3s;
}

/* linkdin*/
.containerThree:hover {
  background-color: #0072b1;
  transition-duration: 0.3s;
}

/* Whatsapp*/
.containerFour:hover {
  background-color: #128c7e;
  transition-duration: 0.3s;
}

.socialContainer:active {
  transform: scale(0.9);
  transition-duration: 0.3s;
}

.socialSvg {
  width: 17px;
}

.socialSvg path {
  fill: rgb(255, 255, 255);
}

.socialContainer:hover .socialSvg {
  animation: slide-in-top 0.3s both;
}

@keyframes slide-in-top {
  0% {
    transform: translateY(-50px);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}
/* --- ESTILOS RESPONSIVE PARA MÓVILES (SIN SELECTOR DE IDIOMA) --- */
@media (max-width: 768px) {
  /* 1. LA BARRA SUPERIOR */
  .sidebar {
    width: 100%;
    height: 65px;
    top: 0;
    bottom: auto;
    flex-direction: row;
    align-items: center;
    /* Ahora que solo está el nav, lo centramos perfectamente */
    justify-content: center;
    padding: 0 10px;
    /* Padding para que no toque los bordes */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
  }
  /* 2. OCULTAMOS EL SELECTOR DE IDIOMA Y LOS ÍCONOS SOCIALES */
  .sidebar .card-sidebar {
    display: none;
  }
  /* 3. REUBICAMOS EL BOTÓN DE MODO OSCURO (SIN CAMBIOS) */
  .toggle-container {
    display: block;
    position: fixed;
    top: 4rem;
    right: 0;
    z-index: 2000;
    transform: scale(0.75);
  }
  /* 4. AJUSTAMOS EL MENÚ DE NAVEGACIÓN PARA QUE QUEDE BIEN */
  .sidebar nav {
    flex-grow: 0;
    padding-right: 0;
  }
  .sidebar nav ul {
    flex-direction: row;
    align-items: center;
    /* Podemos darle un poco más de aire ahora */
    gap: 8px;
  }
  .sidebar nav ul li a {
    /* Un tamaño de fuente cómodo y legible */
    font-size: 0.85rem;
    padding: 6px 10px;
    transform: none;
    /* Mantenemos esto para evitar movimientos */
  }
  .lang-es .sidebar nav ul li a {
    /* Reducimos el tamaño de la fuente para todos los enlaces en español */
    font-size: 0.65rem;
    /* Opcional: Puedes ajustar el padding vertical si ves que la altura
       de los botones cambia y quieres que sea idéntica a la del inglés. */
    /* padding-top: 11px; */
    /* padding-bottom: 11px; */
  }
}
.full-page-section {
  min-height: 100vh;
  /* Para que cada una ocupe la pantalla */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 30px 60px;
  /* Un buen espaciado interno */
  box-sizing: border-box;
  scroll-snap-align: start;
  position: relative;
}
.full-page-section > * {
  position: relative;
  z-index: 1;
}

.full-page-section h2 {
  font-size: 2.5rem;
  margin-bottom: 20px;
  color: var(--text-main);
  text-align: center;
}

.full-page-section h3 {
  font-size: 2.5rem;
  margin-bottom: 20px;
  color: var(--text-nav);
}

#home {
  overflow: hidden;
  position: relative;
}
#home::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: radial-gradient(#888 1.2px, transparent 1.2px);
  background-size: 8px 8px;
  /* High density dots */
  opacity: 0.35;
  -webkit-mask-image: url("../images/world-map.svg");
  -webkit-mask-size: 80% auto;
  -webkit-mask-position: center center;
  -webkit-mask-repeat: no-repeat;
  mask-image: url("../images/world-map.svg");
  mask-size: 80% auto;
  mask-position: center center;
  mask-repeat: no-repeat;
  z-index: 0;
  pointer-events: none;
  transition: transform 0.6s cubic-bezier(0.25, 0.8, 0.25, 1), opacity 0.6s ease;
}
#home:hover::before {
  transform: scale(1.04) translateY(-10px);
  opacity: 0.5;
}

#about {
  min-height: 100vh;
  background-color: var(--color-dark-gray);
  color: white;
  transition: background-color 0.5s ease-in-out;
}

#projects {
  height: 100vh;
  min-height: 100vh;
  max-height: 100vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

#tools {
  min-height: 100vh;
  background-color: var(--color-dark-gray);
  color: white;
  transition: background-color 0.5s ease-in-out;
}

#contact {
  min-height: 100vh;
}

@media (max-width: 768px) {
  .full-page-section {
    /*
     * 1. CAMBIO CLAVE PARA MÓVIL: Le quitamos la altura de pantalla
     *    completa para que el scroll sea natural y fluido.
    */
    min-height: auto;
    /*
     * 2. BUENA PRÁCTICA: Anulamos el alineamiento de snap para que el CSS
     *    sea consistente con el comportamiento que queremos en móvil.
    */
    scroll-snap-align: none;
    /*
     * 3. Mantenemos el ajuste de padding para una mejor visualización.
    */
    padding: 60px 20px;
  }
  /* Podés agregar esto en cualquier lugar de tu CSS */
  .projects-content h2 {
    text-align: center;
  }
  /*
   * 4. Mantenemos los ajustes de tipografía para móvil.
  */
}
/* --- Estilos Base (Escritorio) --- */
.main-footer {
  background-color: var(--color-dark-gray);
  color: #a0a0a0;
  padding: 20px;
  text-align: justify;
}

.main-footer p {
  font-size: 0.9rem;
}

/* --- ¡LA CLAVE PARA ESCRITORIO! --- */
/* Por defecto, en pantallas grandes, los íconos en el footer están OCULTOS. */
.main-footer .card-sidebar {
  display: none;
}

/* --- Media Query para Móvil (768px o menos) --- */
@media (max-width: 768px) {
  /* --- ¡LA SOLUCIÓN DEFINITIVA! --- */
  /* 1. Convertimos el footer en un contenedor flex. */
  .main-footer {
    display: flex;
    flex-direction: column; /* Apilamos sus hijos (íconos y texto) verticalmente. */
    align-items: center; /* ¡ESTA ES LA REGLA MÁGICA! Centra TODOS los hijos horizontalmente. */
    gap: 15px; /* Espacio vertical entre los íconos y el texto. */
    padding: 5px;
  }
  /* 2. El párrafo ya no necesita margen, el 'gap' del padre lo controla. */
  .main-footer p {
    font-size: 0.85rem;
    margin: 0;
  }
  /* 3. El contenedor de los íconos ya está centrado por el padre,
        solo necesita alinear los propios íconos. */
  .main-footer .card-sidebar {
    display: flex;
    justify-content: center;
    gap: 20px;
  }
}
#arrow {
  position: fixed;
  pointer-events: none;
  transform-origin: center center;
  transition: transform 0.05s linear, opacity 0.3s ease;
  font-size: 24px;
  z-index: 9999;
  opacity: 1;
  width: 7px; /* Ajustá esto según el tamaño que quieras */
  height: auto;
}

@media (max-width: 768px) {
  /* ... (todos tus otros estilos de móvil van aquí arriba) ... */
  /* --- PARA OCULTAR EL PUNTERO DE CONTACTO EN MÓVIL --- */
  #arrow {
    display: none !important;
  }
}
#ripple-canvas {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 9999;
  pointer-events: none;
  overflow: hidden;
}

.ripple {
  position: absolute;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  width: 0;
  height: 0;
  animation: ripple-effect 0.6s ease-out forwards;
  will-change: width, height, opacity;
}

.ripple--dark {
  background-color: rgba(0, 0, 0, 0.4);
}

.ripple--light {
  background-color: rgba(255, 255, 255, 0.5);
}

@keyframes ripple-effect {
  from {
    opacity: 1;
  }
  to {
    width: 40px;
    height: 40px;
    opacity: 0;
  }
}
/* =========================================================================
   Projects Section Constraints
   ========================================================================= */
#projects {
  width: 100%;
  min-height: 100vh;
  position: relative;
  /* Remove overflow: hidden to prevent snapping/height bugs */
}

.carousel-container {
  position: relative;
  width: 100%;
  flex: 1;
  margin: 0 auto;
  padding: 0;
  overflow: hidden;
}

.projects-content {
  width: 100% !important;
  max-width: 1200px !important;
  padding: 10px 15px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  flex: 1;
  overflow: hidden;
}

.carousel-inner {
  display: flex !important;
  flex-wrap: nowrap !important;
  transition: transform 0.8s cubic-bezier(0.645, 0.045, 0.355, 1);
  width: 400% !important;
  height: 100%;
  align-items: stretch;
  /* Stretch so each item fills the full carousel height */
}

.carousel-item {
  flex: 0 0 25% !important;
  min-width: 25% !important;
  width: 25% !important;
  padding: 16px 20px 24px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  perspective: 1500px;
}

/* MacBook Mockup Container */
.macbook-wrapper {
  position: relative;
  width: 70%;
  max-width: 900px;
  min-width: 320px;
  margin: 0 auto;
  transform-style: preserve-3d;
  will-change: transform, filter;
  opacity: 0.4;
  transform: scale(0.85);
  /* Slightly smaller when inactive */
  transition: opacity 0.8s ease, transform 0.8s ease;
  z-index: 1;
}

.active-item .macbook-wrapper {
  opacity: 1;
  transform: scale(1);
  z-index: 2;
}

.macbook-frame {
  position: relative;
  /* Brushed aluminum gradient — brighter on edges, darker in center like a real lid */
  background: linear-gradient(175deg, #2e2e2e 0%, #1a1a1a 55%, #262626 100%);
  border-radius: 20px 20px 0 0;
  padding: 25px 15px 30px 15px;
  /* Top bezel, sides, bottom bezel */
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), inset 0 -1px 0 rgba(0, 0, 0, 0.7), inset 1px 0 0 rgba(255, 255, 255, 0.05), inset -1px 0 0 rgba(0, 0, 0, 0.25);
  /* Right inner edge */
  border: 1.5px solid #3c3c3c;
  border-bottom: none;
  overflow: hidden;
  /* Horizontal shine across the lid top — simulates aluminum reflection */
}
.macbook-frame::after {
  content: "";
  position: absolute;
  top: 0;
  left: 10%;
  right: 10%;
  height: 1px;
  background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.28) 40%, rgba(255, 255, 255, 0.28) 60%, transparent);
  pointer-events: none;
}
.macbook-frame {
  /* Camera dot — centered above screen */
}
.macbook-frame::before {
  content: "";
  position: absolute;
  top: 9px;
  left: 50%;
  transform: translateX(-50%);
  width: 8px;
  height: 8px;
  border-radius: 50%;
  /* Dark lens with subtle highlight */
  background: radial-gradient(circle at 35% 30%, #303030, #050505 70%);
  box-shadow: 0 0 0 1.5px #2a2a2a, inset 0 1px 1px rgba(255, 255, 255, 0.18), 0 0 5px rgba(0, 210, 110, 0.18);
  /* Faint green glow — active camera indicator */
}

.macbook-bottom {
  height: 28px;
  /* Realistic aluminum base — the hinge/body bar */
  background: linear-gradient(to bottom, #4a4a4a 0%, #6e6e6e 8%, #c8c8c8 20%, #e8e8e8 50%, #d0d0d0 80%, #b0b0b0 100%);
  border-radius: 0 0 18px 18px;
  position: relative;
  width: 106%;
  /* Wider than screen to simulate the real body extending past the lid */
  left: -3%;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), inset 0 -1px 2px rgba(0, 0, 0, 0.2);
  /* Bottom inner shadow */
  /* Hinge line — thin dark strip at the very top of the base */
}
.macbook-bottom::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(to right, #2a2a2a 0%, #404040 20%, #484848 50%, #404040 80%, #2a2a2a 100%);
  border-radius: 0;
}
.macbook-bottom {
  /* Vent / slot indent at the top center */
}
.macbook-bottom::after {
  content: "";
  position: absolute;
  top: 5px;
  left: 50%;
  transform: translateX(-50%);
  width: 90px;
  height: 5px;
  background: linear-gradient(to bottom, #999, #b8b8b8);
  border-radius: 0 0 4px 4px;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.35), 0 1px 0 rgba(255, 255, 255, 0.5);
}

/* Focused scale effect for active item */
.item-image {
  width: 100%;
  aspect-ratio: 16/9;
  background-size: cover;
  background-position: top;
  border-radius: 4px;
  position: relative;
  background-color: #000;
  overflow: hidden;
  box-shadow: inset 0 0 0 2px #080808, inset 0 0 20px rgba(0, 0, 0, 0.6), 0 0 18px rgba(0, 0, 0, 0.4);
  /* Screen ambient glow */
  /* Glass glare — diagonal highlight simulating screen reflection */
}
.item-image::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.07) 0%, rgba(255, 255, 255, 0.03) 30%, transparent 55%, rgba(0, 0, 0, 0.04) 100%);
  pointer-events: none;
  z-index: 5;
  border-radius: 4px;
}

/* Hover Overlay for Project Links - Inside the Macbook Screen */
.project-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.85);
  opacity: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 30px;
  transition: opacity 0.4s ease;
  z-index: 20;
  backdrop-filter: blur(4px);
}
.project-overlay .icon-btn {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  text-decoration: none;
  font-size: 28px;
  transform: translateY(20px);
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  cursor: pointer;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
}
.project-overlay .icon-btn:hover {
  background: #fff;
  color: var(--text-main);
  transform: translateY(0px) scale(1.15);
}
.project-overlay .icon-btn img,
.project-overlay .icon-btn svg {
  width: 30px;
  height: 30px;
  fill: currentColor;
}

/* Fix hover state for overlay to ensure visibility */
.macbook-wrapper:hover .project-overlay,
.macbook-frame:hover .project-overlay,
.project-overlay:hover {
  opacity: 1;
}
.macbook-wrapper:hover .project-overlay .icon-btn,
.macbook-frame:hover .project-overlay .icon-btn,
.project-overlay:hover .icon-btn {
  transform: translateY(0);
}
.macbook-wrapper:hover .project-overlay .icon-btn:nth-child(2),
.macbook-frame:hover .project-overlay .icon-btn:nth-child(2),
.project-overlay:hover .icon-btn:nth-child(2) {
  transition-delay: 0.1s;
}

/* Project title label below the macbook */
.item-info {
  margin-top: 8px;
  text-align: center;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.item-info h3 {
  margin: 0;
  color: var(--text-main);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.3px;
}
.item-info {
  /* Hide everything except the title */
}
.item-info p, .item-info .tech-tags {
  display: none;
}

.active-item .item-info {
  opacity: 1;
  transform: translateY(0);
}

.carousel-prev,
.carousel-next {
  background: rgba(0, 0, 0, 0.4);
  border: none;
  color: white;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  z-index: 10;
  backdrop-filter: blur(5px);
  position: absolute;
  top: 45%;
  transform: translateY(-50%);
}
.carousel-prev:hover:not(:disabled),
.carousel-next:hover:not(:disabled) {
  background: rgba(var(--accent-rgb, 0, 194, 255), 0.8);
  transform: translateY(-50%) scale(1.1);
}
.carousel-prev:disabled,
.carousel-next:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}
.carousel-prev span,
.carousel-next span {
  font-size: 40px;
}

.carousel-prev {
  left: 20px;
}

.carousel-next {
  right: 20px;
}

@media (max-width: 768px) {
  .macbook-wrapper {
    max-width: 95%;
    margin-bottom: 180px;
    /* Space for tags */
  }
  .macbook-frame {
    padding: 10px 6px 15px;
    /* smaller bezels on mobile */
    border-radius: 12px 12px 0 0;
  }
  .item-info {
    width: 95%;
    padding: 20px;
    bottom: 0px;
  }
  .carousel-prev,
  .carousel-next {
    top: 25%;
  }
}
/* =======================================================
//   DARK MODE - VERSIÓN "CIELO DENSO PARPADEANTE" (CÓDIGO COMPLETO Y FUNCIONAL)
// ======================================================= */
/* --- 1. EL FONDO Y LAS CAPAS DE ESTRELLAS --- */
#starry-background {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  background: radial-gradient(ellipse at bottom, #1B2735 0%, #090A0F 100%);
  overflow: hidden;
  opacity: 0;
  transition: opacity 1.5s ease-in-out;
}

#stars-layer-1, #stars-layer-2, #stars-layer-3 {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

/* --- 2. DEFINICIÓN DE LA ANIMACIÓN DE PARPADEO (USANDO OPACITY) --- */
@keyframes twinkle {
  0% {
    opacity: 0.2;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0.2;
  }
}
/* --- 3. APLICACIÓN DE ESTRELLAS Y ANIMACIÓN A CADA CAPA --- */
#stars-layer-1 {
  width: 1px;
  height: 1px;
  animation: twinkle 2s infinite ease-in-out;
  box-shadow: 627px 1109px #FFF, 1729px 1290px #FFF, 1630px 429px #FFF, 1289px 1748px #FFF, 1533px 1863px #FFF, 137px 1974px #FFF, 1789px 74px #FFF, 621px 1989px #FFF, 1683px 188px #FFF, 1146px 689px #FFF, 1177px 610px #FFF, 715px 1239px #FFF, 1856px 1476px #FFF, 1237px 1563px #FFF, 1345px 1735px #FFF, 1845px 105px #FFF, 198px 1013px #FFF, 48px 1113px #FFF, 182px 1478px #FFF, 1391px 1867px #FFF, 1817px 1905px #FFF, 1709px 1198px #FFF, 1309px 1932px #FFF, 1825px 982px #FFF, 1928px 1222px #FFF, 1762px 1466px #FFF, 323px 1134px #FFF, 1888px 1217px #FFF, 1690px 1188px #FFF, 659px 303px #FFF, 1869px 93px #FFF, 1604px 175px #FFF, 1104px 1033px #FFF, 545px 1827px #FFF, 420px 731px #FFF, 298px 973px #FFF, 1438px 1934px #FFF, 1553px 189px #FFF, 1888px 1716px #FFF, 88px 1231px #FFF, 1318px 432px #FFF, 966px 1535px #FFF, 1373px 111px #FFF, 246px 1315px #FFF, 1404px 57px #FFF, 1122px 173px #FFF, 1792px 1324px #FFF, 1500px 926px #FFF, 327px 1033px #FFF, 755px 95px #FFF, 515px 1943px #FFF, 1380px 1819px #FFF, 1431px 524px #FFF, 1358px 956px #FFF, 1177px 177px #FFF, 1823px 1974px #FFF, 1083px 229px #FFF, 1243px 1279px #FFF, 1508px 1184px #FFF, 584px 1050px #FFF, 608px 899px #FFF, 1729px 1419px #FFF, 1135px 44px #FFF, 1422px 126px #FFF, 1178px 1733px #FFF, 1702px 1722px #FFF, 107px 1555px #FFF, 1452px 1205px #FFF, 1569px 1976px #FFF, 1007px 1221px #FFF, 164px 348px #FFF, 1930px 1071px #FFF, 1269px 1658px #FFF, 1251px 1162px #FFF, 1488px 1478px #FFF, 1058px 1179px #FFF, 752px 1076px #FFF, 893px 1382px #FFF, 1583px 1563px #FFF, 1035px 131px #FFF, 1810px 1016px #FFF, 1492px 1934px #FFF, 305px 44px #FFF, 1118px 1494px #FFF, 1860px 158px #FFF, 145px 38px #FFF, 936px 413px #FFF, 843px 1946px #FFF, 990px 1836px #FFF, 1195px 1335px #FFF, 1152px 1765px #FFF, 1424px 791px #FFF, 1968px 106px #FFF, 940px 1757px #FFF, 1726px 1274px #FFF, 1013px 441px #FFF, 960px 96px #FFF, 396px 1913px #FFF, 1561px 1548px #FFF, 1333px 93px #FFF, 532px 1899px #FFF, 1899px 1582px #FFF, 1567px 1374px #FFF, 1413px 129px #FFF, 1158px 1568px #FFF, 188px 1550px #FFF, 1113px 899px #FFF, 620px 1933px #FFF, 1700px 339px #FFF, 840px 1845px #FFF, 514px 1782px #FFF, 156px 184px #FFF, 386px 1618px #FFF, 1289px 1222px #FFF, 542px 1072px #FFF, 1500px 1656px #FFF, 112px 1009px #FFF, 706px 373px #FFF, 1426px 878px #FFF, 1904px 1308px #FFF, 1555px 1678px #FFF, 1133px 1112px #FFF, 148px 1222px #FFF, 24px 1406px #FFF, 106px 1076px #FFF, 1502px 1412px #FFF, 1109px 1785px #FFF, 1373px 381px #FFF, 1938px 1939px #FFF, 1240px 1629px #FFF, 1726px 1761px #FFF, 930px 142px #FFF, 1182px 1380px #FFF, 597px 1406px #FFF, 245px 1493px #FFF, 1150px 920px #FFF, 942px 1603px #FFF, 1512px 1955px #FFF, 1024px 1106px #FFF, 1779px 23px #FFF, 1970px 1948px #FFF, 1259px 1827px #FFF, 810px 229px #FFF, 1361px 1475px #FFF, 1940px 1485px #FFF, 1526px 311px #FFF, 126px 1740px #FFF, 497px 1429px #FFF, 111px 1979px #FFF, 179px 1891px #FFF, 1001px 1358px #FFF, 1363px 1754px #FFF, 1296px 880px #FFF, 1793px 80px #FFF, 1399px 1318px #FFF, 1157px 1045px #FFF, 1257px 1569px #FFF, 835px 1259px #FFF, 1693px 1404px #FFF, 1279px 1296px #FFF, 1184px 1851px #FFF, 545px 337px #FFF, 1332px 1715px #FFF, 563px 664px #FFF, 439px 789px #FFF, 1284px 1459px #FFF, 1572px 1008px #FFF, 1757px 1464px #FFF, 765px 135px #FFF, 725px 1446px #FFF, 1210px 1198px #FFF, 1852px 194px #FFF, 811px 966px #FFF, 1421px 1032px #FFF, 181px 1679px #FFF, 477px 460px #FFF, 1130px 1307px #FFF, 121px 298px #FFF, 1999px 703px #FFF, 1103px 1928px #FFF, 1445px 1153px #FFF, 936px 914px #FFF, 720px 1600px #FFF, 1934px 1989px #FFF, 1489px 1195px #FFF, 109px 1494px #FFF, 1658px 1098px #FFF, 1017px 1409px #FFF, 1633px 1421px #FFF, 1625px 1836px #FFF, 161px 1435px #FFF, 1419px 123px #FFF, 1301px 188px #FFF, 1749px 1007px #FFF, 597px 1652px #FFF, 1854px 1640px #FFF, 679px 171px #FFF, 24px 179px #FFF, 1845px 185px #FFF, 940px 1444px #FFF, 1111px 406px #FFF, 1345px 957px #FFF, 1920px 790px #FFF, 1463px 1434px #FFF, 1181px 1245px #FFF, 1566px 1480px #FFF, 117px 1974px #FFF, 1655px 1599px #FFF, 144px 1638px #FFF, 1990px 138px #FFF, 1007px 147px #FFF, 1384px 1801px #FFF, 1597px 1787px #FFF, 1921px 718px #FFF, 1551px 1629px #FFF, 340px 1457px #FFF, 622px 1492px #FFF, 549px 1431px #FFF, 1601px 1475px #FFF, 770px 1133px #FFF, 1860px 248px #FFF, 638px 1856px #FFF, 1117px 1561px #FFF, 1272px 1121px #FFF, 1459px 1486px #FFF, 1386px 871px #FFF, 1713px 760px #FFF, 1690px 1391px #FFF, 107px 1680px #FFF, 715px 1765px #FFF, 1810px 843px #FFF, 1891px 1808px #FFF, 1378px 1339px #FFF, 785px 197px #FFF, 1181px 1614px #FFF, 311px 1228px #FFF, 908px 233px #FFF, 1546px 635px #FFF, 1530px 1938px #FFF, 1058px 1923px #FFF, 905px 1010px #FFF, 78px 1836px #FFF, 866px 571px #FFF, 1400px 38px #FFF, 1233px 1462px #FFF, 1667px 305px #FFF, 1285px 569px #FFF, 65px 590px #FFF, 1888px 1076px #FFF, 1109px 1353px #FFF, 982px 789px #FFF, 1373px 1845px #FFF, 1205px 1271px #FFF, 1548px 1515px #FFF, 1490px 1878px #FFF, 1756px 621px #FFF, 130px 1430px #FFF, 1735px 94px #FFF, 1627px 1057px #FFF, 1354px 1714px #FFF, 713px 1306px #FFF, 1421px 1152px #FFF, 908px 1957px #FFF, 552px 972px #FFF, 762px 1011px #FFF, 1084px 1710px #FFF, 1965px 78px #FFF, 1387px 803px #FFF, 1146px 1262px #FFF, 1616px 1060px #FFF, 1509px 1273px #FFF, 1733px 1107px #FFF, 1839px 751px #FFF, 103px 490px #FFF, 1709px 1407px #FFF, 1000px 739px #FFF, 48px 1752px #FFF, 442px 791px #FFF, 786px 878px #FFF, 1950px 1198px #FFF, 170px 167px #FFF, 240px 1419px #FFF, 1141px 717px #FFF, 1293px 839px #FFF, 796px 406px #FFF, 1283px 1001px #FFF, 1699px 233px #FFF, 1863px 186px #FFF, 1105px 230px #FFF, 1715px 449px #FFF, 1148px 1656px #FFF, 1251px 173px #FFF, 1978px 1150px #FFF, 179px 1025px #FFF, 1032px 1541px #FFF, 1243px 1255px #FFF, 1182px 197px #FFF, 179px 129px #FFF, 829px 1109px #FFF, 1269px 1162px #FFF, 1698px 235px #FFF, 1697px 1500px #FFF, 1746px 432px #FFF, 977px 446px #FFF, 1675px 1435px #FFF, 477px 290px #FFF, 1402px 502px #FFF, 1716px 1341px #FFF, 1261px 109px #FFF, 1989px 1109px #FFF, 1826px 827px #FFF, 936px 1045px #FFF, 1904px 1864px #FFF, 1292px 105px #FFF, 177px 304px #FFF, 1667px 1166px #FFF, 1674px 1144px #FFF, 1933px 561px #FFF, 831px 1831px #FFF, 73px 1326px #FFF, 1319px 1564px #FFF, 1894px 921px #FFF, 513px 30px #FFF, 1195px 1713px #FFF, 750px 129px #FFF, 1878px 731px #FFF, 725px 1717px #FFF, 1503px 93px #FFF, 1131px 661px #FFF, 1968px 1282px #FFF, 112px 1198px #FFF, 989px 369px #FFF, 1184px 1459px #FFF, 1632px 1065px #FFF, 1982px 1118px #FFF, 1674px 173px #FFF, 1974px 107px #FFF, 1782px 1335px #FFF, 1256px 1521px #FFF, 1761px 376px #FFF, 935px 1838px #FFF, 1845px 337px #FFF, 1523px 1248px #FFF, 1507px 1787px #FFF, 1152px 1986px #FFF, 1774px 899px #FFF, 1658px 1505px #FFF, 1898px 974px #FFF, 529px 1530px #FFF, 597px 393px #FFF, 1032px 1515px #FFF, 781px 1964px #FFF, 290px 426px #FFF, 804px 343px #FFF, 344px 1803px #FFF, 520px 209px #FFF, 1424px 1435px #FFF, 1656px 1050px #FFF, 335px 338px #FFF, 746px 748px #FFF, 1373px 1461px #FFF, 1429px 1239px #FFF, 1109px 1035px #FFF, 1636px 774px #FFF, 829px 1591px #FFF, 1215px 1730px #FFF, 1891px 1582px #FFF, 1259px 1311px #FFF, 105px 1599px #FFF, 1483px 1860px #FFF, 360px 1406px #FFF, 1469px 872px #FFF, 1057px 1146px #FFF, 1699px 1136px #FFF, 1199px 1419px #FFF, 1809px 1827px #FFF, 1597px 352px #FFF, 829px 926px #FFF, 24px 1361px #FFF, 129px 748px #FFF, 1572px 1569px #FFF, 48px 1819px #FFF, 1213px 456px #FFF, 1033px 1272px #FFF, 1518px 233px #FFF, 1400px 929px #FFF, 33px 1381px #FFF, 1928px 1362px #FFF, 1269px 584px #FFF, 745px 1731px #FFF, 1060px 222px #FFF, 129px 109px #FFF, 1252px 1535px #FFF, 1804px 504px #FFF, 1334px 1653px #FFF, 1782px 1604px #FFF, 1699px 407px #FFF, 1774px 1445px #FFF, 421px 528px #FFF, 131px 1668px #FFF, 1404px 1219px #FFF, 96px 135px #FFF, 1502px 1562px #FFF, 1489px 1475px #FFF, 1625px 973px #FFF, 1316px 1162px #FFF, 542px 767px #FFF, 1404px 1662px #FFF, 1968px 1307px #FFF, 1492px 1007px #FFF, 1729px 83px #FFF, 1436px 172px #FFF, 1459px 1970px #FFF, 788px 1496px #FFF, 948px 1873px #FFF, 1587px 994px #FFF, 1555px 1421px #FFF, 1913px 1916px #FFF, 1455px 1205px #FFF, 1144px 1533px #FFF, 1715px 1788px #FFF, 1178px 1018px #FFF, 375px 1166px #FFF, 1914px 1307px #FFF, 1354px 1999px #FFF, 1526px 1452px #FFF, 1922px 1956px #FFF, 1195px 1159px #FFF, 1369px 93px #FFF, 1083px 1143px #FFF, 574px 1500px #FFF, 1228px 1456px #FFF, 1391px 229px #FFF, 1992px 179px #FFF, 584px 1476px #FFF, 1804px 1429px #FFF, 1437px 461px #FFF, 1374px 224px #FFF, 908px 244px #FFF, 1089px 1419px #FFF, 786px 1740px #FFF, 1596px 37px #FFF, 319px 1941px #FFF, 1025px 941px #FFF, 1332px 1457px #FFF, 1791px 137px #FFF, 1386px 105px #FFF, 483px 1778px #FFF, 1390px 1052px #FFF, 335px 337px #FFF, 1455px 1667px #FFF, 1282px 1774px #FFF, 1196px 1214px #FFF, 161px 1377px #FFF, 1381px 167px #FFF, 621px 1555px #FFF, 1561px 1418px #FFF, 508px 1173px #FFF, 1541px 1735px #FFF, 532px 1898px #FFF, 1918px 439px #FFF, 1279px 1297px #FFF, 345px 1493px #FFF, 315px 1791px #FFF, 999px 1004px #FFF, 1396px 1046px #FFF, 1891px 1194px #FFF, 959px 145px #FFF, 508px 1481px #FFF, 597px 465px #FFF, 829px 1663px #FFF, 989px 1892px #FFF, 843px 1132px #FFF, 1600px 1876px #FFF, 1686px 1528px #FFF, 188px 1195px #FFF, 1052px 1385px #FFF, 185px 1678px #FFF, 1928px 1461px #FFF, 1109px 1163px #FFF, 1699px 1481px #FFF, 1085px 189px #FFF, 831px 54px #FFF, 497px 1125px #FFF, 1121px 1640px #FFF, 360px 1205px #FFF, 1747px 1251px #FFF, 1475px 815px #FFF, 1184px 1709px #FFF, 1895px 123px #FFF, 1930px 1832px #FFF, 1335px 1101px #FFF, 946px 1515px #FFF, 1653px 1978px #FFF, 1399px 1425px #FFF, 1913px 1083px #FFF, 715px 1309px #FFF, 1756px 1477px #FFF, 1883px 1530px #FFF, 755px 1139px #FFF, 1968px 233px #FFF, 532px 791px #FFF, 1639px 232px #FFF, 1705px 446px #FFF, 762px 1647px #FFF, 1269px 921px #FFF, 1422px 1041px #FFF, 1308px 1827px #FFF, 1664px 341px #FFF, 197px 1139px #FFF, 107px 1694px #FFF, 96px 1215px #FFF, 1782px 1883px #FFF, 937px 1561px #FFF, 567px 493px #FFF, 1934px 1976px #FFF, 719px 110px #FFF, 1779px 1324px #FFF, 1696px 209px #FFF, 1163px 118px #FFF, 1473px 1307px #FFF, 1312px 198px #FFF, 1488px 1726px #FFF, 1403px 1599px #FFF, 103px 314px #FFF, 439px 1876px #FFF, 549px 1335px #FFF, 1303px 803px #FFF, 1512px 339px #FFF, 1164px 1021px #FFF, 1890px 1060px #FFF, 1054px 1969px #FFF, 1077px 1450px #FFF, 1965px 1423px #FFF, 1104px 933px #FFF, 1914px 1152px #FFF, 342px 1599px #FFF, 153px 1693px #FFF, 1005px 1740px #FFF, 746px 290px #FFF, 1705px 1435px #FFF, 1484px 144px #FFF, 497px 1928px #FFF, 1729px 126px #FFF, 1515px 334px #FFF, 1545px 1836px #FFF, 1502px 321px #FFF, 1326px 1150px #FFF, 1582px 1801px #FFF, 1618px 470px #FFF, 1032px 1634px #FFF, 442px 1146px #FFF, 626px 1481px #FFF, 1999px 1070px #FFF, 693px 867px #FFF, 198px 1177px #FFF, 532px 1381px #FFF, 725px 1845px #FFF, 1937px 109px #FFF, 882px 555px #FFF, 815px 811px #FFF, 1956px 1419px #FFF, 333px 22px #FFF, 1444px 1889px #FFF, 1819px 1777px #FFF, 77px 819px #FFF, 1201px 1029px #FFF, 449px 1199px #FFF, 188px 18px #FFF, 800px 801px #FFF;
}

#stars-layer-2 {
  width: 2px;
  height: 2px;
  animation: twinkle 3.5s infinite ease-in-out;
  box-shadow: 1952px 1313px #FFF, 1083px 104px #FFF, 1603px 311px #FFF, 1762px 1069px #FFF, 1528px 115px #FFF, 1684px 348px #FFF, 1535px 1780px #FFF, 319px 1405px #FFF, 1873px 1282px #FFF, 1747px 1066px #FFF, 1826px 1700px #FFF, 750px 1723px #FFF, 1279px 1007px #FFF, 32px 1430px #FFF, 1658px 1586px #FFF, 420px 1476px #FFF, 880px 1289px #FFF, 1785px 1947px #FFF, 1618px 1283px #FFF, 114px 1904px #FFF, 1332px 1765px #FFF, 1650px 1952px #FFF, 1754px 1421px #FFF, 893px 1547px #FFF, 427px 1916px #FFF, 1436px 379px #FFF, 439px 748px #FFF, 911px 486px #FFF, 1459px 707px #FFF, 1492px 1827px #FFF, 1904px 572px #FFF, 1699px 768px #FFF, 1162px 1363px #FFF, 290px 1756px #FFF, 1198px 115px #FFF, 792px 1420px #FFF, 340px 1802px #FFF, 24px 1843px #FFF, 1913px 406px #FFF, 1630px 1853px #FFF, 1864px 285px #FFF, 542px 1928px #FFF, 626px 135px #FFF, 1803px 1032px #FFF, 1664px 393px #FFF, 1318px 774px #FFF, 1391px 189px #FFF, 1269px 1429px #FFF, 100px 338px #FFF, 529px 40px #FFF, 1430px 1929px #FFF, 1381px 1891px #FFF, 1289px 57px #FFF, 1381px 544px #FFF, 1344px 1261px #FFF, 1604px 1271px #FFF, 1819px 240px #FFF, 1500px 1358px #FFF, 335px 1481px #FFF, 1025px 376px #FFF, 1500px 1334px #FFF, 853px 432px #FFF, 420px 791px #FFF, 421px 1916px #FFF, 1319px 1546px #FFF, 1419px 185px #FFF, 755px 1434px #FFF, 1774px 1563px #FFF, 165px 765px #FFF, 1999px 1362px #FFF, 1762px 352px #FFF, 1345px 343px #FFF, 1845px 648px #FFF, 946px 40px #FFF, 1282px 48px #FFF, 230px 1084px #FFF, 167px 308px #FFF, 960px 1251px #FFF, 778px 899px #FFF, 1155px 1819px #FFF, 1046px 74px #FFF, 552px 1827px #FFF, 1729px 1656px #FFF, 1904px 1058px #FFF, 33px 1878px #FFF, 1085px 1198px #FFF, 111px 403px #FFF, 1675px 148px #FFF, 1148px 1159px #FFF, 989px 182px #FFF, 44px 1582px #FFF, 1968px 1357px #FFF, 1481px 1332px #FFF, 1198px 1163px #FFF, 1416px 1686px #FFF, 1509px 105px #FFF, 1261px 1438px #FFF, 1630px 584px #FFF, 175px 1667px #FFF, 1969px 768px #FFF, 1999px 181px #FFF, 345px 1466px #FFF, 1121px 1747px #FFF, 1500px 486px #FFF, 1551px 1698px #FFF, 493px 803px #FFF, 1899px 1098px #FFF, 853px 1413px #FFF, 1978px 1391px #FFF, 303px 441px #FFF, 1112px 1133px #FFF, 404px 342px #FFF, 1650px 1860px #FFF, 1895px 1818px #FFF, 1546px 1215px #FFF, 1162px 1009px #FFF, 1932px 1730px #FFF, 1025px 1662px #FFF, 1563px 1461px #FFF, 44px 321px #FFF, 1693px 610px #FFF, 1374px 188px #FFF, 1818px 1377px #FFF, 1948px 973px #FFF, 1530px 314px #FFF, 1486px 1024px #FFF, 126px 197px #FFF, 1729px 1530px #FFF, 1968px 129px #FFF, 1918px 461px #FFF, 508px 233px #FFF, 1726px 1045px #FFF, 1215px 1664px #FFF, 1572px 1121px #FFF, 1283px 1878px #FFF, 311px 446px #FFF, 1196px 1599px #FFF, 1269px 1603px #FFF, 1890px 1431px #FFF, 1406px 1083px #FFF, 1289px 1461px #FFF, 1533px 1989px #FFF, 1109px 1307px #FFF, 584px 1709px #FFF, 1052px 1787px #FFF, 1618px 1899px #FFF, 549px 1494px #FFF, 1144px 920px #FFF, 1647px 1025px #FFF, 1219px 725px #FFF, 1324px 229px #FFF, 1132px 1195px #FFF, 1000px 1970px #FFF, 198px 167px #FFF, 1103px 1386px #FFF, 1752px 1490px #FFF, 1756px 748px #FFF, 1146px 1836px #FFF, 445px 126px #FFF, 1636px 1551px #FFF, 1999px 173px #FFF, 1629px 746px #FFF, 107px 1217px #FFF, 1555px 956px #FFF, 1832px 791px #FFF, 1591px 1222px #FFF, 1746px 1011px #FFF, 497px 105px #FFF, 105px 1563px #FFF, 198px 1177px #FFF, 532px 1381px #FFF, 725px 1845px #FFF, 1937px 109px #FFF, 882px 555px #FFF, 1957px 1904px #FFF, 1928px 1547px #FFF, 1686px 1290px #FFF, 1450px 1279px #FFF, 1269px 175px #FFF, 1819px 1827px #FFF, 1832px 421px #FFF, 1378px 1184px #FFF, 1928px 571px #FFF, 1118px 1546px #FFF, 142px 789px #FFF, 1085px 1374px #FFF, 1461px 1178px #FFF, 442px 1083px #FFF, 1664px 1748px #FFF, 1146px 1551px #FFF, 597px 1139px #FFF, 1400px 100px #FFF, 122px 1222px #FFF, 1980px 1900px #FFF, 345px 678px #FFF, 888px 999px #FFF;
}

#stars-layer-3 {
  width: 3px;
  height: 3px;
  animation: twinkle 5s infinite ease-in-out;
  box-shadow: 1045px 145px #FFF, 24px 1121px #FFF, 1269px 1282px #FFF, 921px 1445px #FFF, 1419px 1978px #FFF, 1515px 1782px #FFF, 960px 1332px #FFF, 1716px 1599px #FFF, 321px 1210px #FFF, 1210px 1899px #FFF, 1076px 1827px #FFF, 1422px 1500px #FFF, 1715px 111px #FFF, 427px 1319px #FFF, 439px 188px #FFF, 1801px 811px #FFF, 1899px 1699px #FFF, 1188px 1385px #FFF, 1568px 111px #FFF, 552px 1832px #FFF, 1404px 572px #FFF, 597px 921px #FFF, 1109px 1076px #FFF, 1779px 1481px #FFF, 1345px 1361px #FFF, 144px 1450px #FFF, 1895px 1568px #FFF, 1475px 815px #FFF, 1184px 1709px #FFF, 1895px 123px #FFF, 1930px 1832px #FFF, 1335px 1101px #FFF, 946px 1515px #FFF, 1653px 1978px #FFF, 1399px 1425px #FFF, 1913px 1083px #FFF, 715px 1309px #FFF, 1756px 1477px #FFF, 1883px 1530px #FFF, 755px 1139px #FFF, 1968px 233px #FFF, 532px 791px #FFF, 1639px 232px #FFF, 1705px 446px #FFF, 762px 1647px #FFF, 1269px 921px #FFF, 1422px 1041px #FFF, 1308px 1827px #FFF, 1664px 341px #FFF, 197px 1139px #FFF, 107px 1694px #FFF, 96px 1215px #FFF, 1782px 1883px #FFF, 937px 1561px #FFF, 567px 493px #FFF, 1934px 1976px #FFF, 719px 110px #FFF, 1779px 1324px #FFF, 1696px 209px #FFF, 1163px 118px #FFF, 1473px 1307px #FFF, 1312px 198px #FFF, 1488px 1726px #FFF, 1403px 1599px #FFF, 103px 314px #FFF, 439px 1876px #FFF, 549px 1335px #FFF, 1303px 803px #FFF, 1512px 339px #FFF, 1164px 1021px #FFF, 1890px 1060px #FFF, 1054px 1969px #FFF, 1077px 1450px #FFF, 1965px 1423px #FFF, 1104px 933px #FFF, 1914px 1152px #FFF, 342px 1599px #FFF, 153px 1693px #FFF, 1005px 1740px #FFF, 746px 290px #FFF, 1705px 1435px #FFF, 1484px 144px #FFF, 497px 1928px #FFF, 1729px 126px #FFF, 1515px 334px #FFF, 1545px 1836px #FFF, 1502px 321px #FFF, 1326px 1150px #FFF, 1582px 1801px #FFF, 1618px 470px #FFF, 1032px 1634px #FFF, 442px 1146px #FFF, 626px 1481px #FFF, 1999px 1070px #FFF, 693px 867px #FFF, 198px 1177px #FFF, 532px 1381px #FFF, 725px 1845px #FFF, 1937px 109px #FFF, 882px 555px #FFF, 50px 50px #FFF, 1950px 1950px #FFF, 200px 1800px #FFF, 1800px 200px #FFF, 1000px 500px #FFF, 500px 1500px #FFF, 250px 750px #FFF, 1250px 1750px #FFF;
}

/* --- 4. LA LÓGICA DE ACTIVACIÓN --- */
/* Cuando el BODY tiene la clase... */
body.dark-mode-active {
  /* 1. Hacemos visible el fondo estrellado */
}
body.dark-mode-active #starry-background {
  opacity: 1;
}
body.dark-mode-active .portfolio-container {
  background-color: transparent;
  transition: background-color 0.5s ease;
}
body.dark-mode-active {
  /* 2. Hacemos transparente el fondo del contenido principal */
}
body.dark-mode-active .main-content {
  background: transparent !important;
}
body.dark-mode-active {
  /* 3. Hacemos transparentes las secciones que tenían su propio fondo */
}
body.dark-mode-active #about, body.dark-mode-active #tools {
  background-color: transparent !important;
}
body.dark-mode-active {
  /* 4. MEJORAS DE LEGIBILIDAD: Cambiamos el color de todos los textos importantes */
}
body.dark-mode-active .main-content,
body.dark-mode-active .main-content h1,
body.dark-mode-active .main-content h2,
body.dark-mode-active .main-content h3,
body.dark-mode-active .main-content p,
body.dark-mode-active .main-content label,
body.dark-mode-active .sidebar nav a {
  color: #EAEAEA;
  transition: color 0.5s ease;
}
body.dark-mode-active .main-content h1 strong {
  color: #FFFFFF;
}
body.dark-mode-active .socialSvg {
  fill: #FFFFFF;
  transition: fill 0.5s ease;
}
body.dark-mode-active #app .card {
  background-color: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(5px);
  transition: background-color 0.5s ease, border 0.5s ease;
}

/** Variables **/
:root {
  --color-background: #e7e7e7;
  --color-background-alt: #888888;
  --color-border-active: #00C2FF;
  --color-border-default: #d1d1d1;
  --color-highlight: #00C2FF;
  --color-primary: #00C2FF;
  --color-primary-active: Black;
  --color-text-default: #262626;
  --color-text-muted: #4f4f4f;
  --font-family-body: "Figtree", system-ui, sans-serif;
  --font-family-display: "Poppins", system-ui, sans-serif;
}

/** Base **/
*,
::before,
::after {
  box-sizing: border-box;
}

* {
  border: 0;
  margin: 0;
  padding: 0;
}

body {
  -webkit-font-smoothing: antialiased;
  font-family: var(--font-family-body);
  font-optical-sizing: auto;
  font-style: normal;
}

button,
input,
optgroup,
select,
textarea {
  font-family: inherit;
  font-feature-settings: inherit;
  font-variation-settings: inherit;
  font-size: 100%;
  font-weight: inherit;
  line-height: inherit;
  color: inherit;
  margin: 0;
  padding: 0;
}

[type=checkbox],
[type=radio],
[type=range] {
  appearance: none;
  flex-shrink: 0;
  padding: 0;
  user-select: none;
}

[type=checkbox]:focus,
[type=radio]:focus,
[type=range]:focus {
  outline: none;
}

/** Components **/
.fs-form {
  display: grid;
  row-gap: 1.5rem;
}

.fs-form:where(.fs-layout__2-column) {
  column-gap: 1.5rem;
  grid-template-columns: 1fr 1fr;
}

fieldset {
  display: grid;
  margin: 1.5rem 0;
  row-gap: 1.5rem;
}

.fs-form:where(.fs-layout__2-column) fieldset {
  column-gap: 1.5rem;
  grid-template-columns: 1fr 1fr;
  grid-column: 1/-1;
}

.fs-fieldset-title {
  color: var(--color-text-default);
  font-family: var(--font-family-display);
  font-size: 1.25rem;
  line-height: 1.75rem;
  margin-bottom: 1.5rem;
  grid-column: 1/-1;
}

.fs-field {
  display: flex;
  flex-direction: column;
  row-gap: 0.5rem;
}

.fs-label {
  color: var(--color-text-default);
  display: block;
  font-family: var(--font-family-display);
  font-size: 1rem;
  line-height: 1.25rem;
}

.fs-description {
  color: var(--color-text-muted);
  display: block;
  font-size: 1rem;
  line-height: 1.25rem;
}

.fs-button-group {
  display: flex;
  flex-direction: row-reverse;
  column-gap: 1.5rem;
}

.fs-form:where(.fs-layout__2-column) .fs-button-group {
  grid-column: 1/-1;
}

.fs-button {
  background-color: var(--color-primary);
  border-radius: 9999px;
  color: white;
  cursor: pointer;
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.5rem;
  padding: 0.75rem 2rem;
  transition-duration: 200ms;
  transition-property: background-color;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

.fs-button:hover {
  background-color: var(--color-primary-active);
}

.fs-button:focus-visible {
  background-color: var(--color-primary-active);
  outline: 4px solid var(--color-highlight);
}

.fs-input,
.fs-select {
  appearance: none;
  border-radius: 9999px;
  border-width: 0;
  box-shadow: var(--color-border-default) 0 0 0 1px inset;
  color: var(--color-text-default);
  font-size: 1rem;
  height: 3rem;
  line-height: 1.5rem;
  outline: none;
  padding-left: 1rem;
  padding-right: 1rem;
}

.fs-input:focus-visible,
.fs-select:focus-visible {
  box-shadow: var(--color-border-active) 0 0 0 1px inset;
}

.fs-input::placeholder {
  color: var(--color-text-muted);
}

.fs-checkbox-group,
.fs-radio-group {
  display: flex;
  flex-direction: column;
  row-gap: 1rem;
}

.fs-checkbox-field,
.fs-radio-field {
  column-gap: 0.5rem;
  display: flex;
}

:is(.fs-checkbox-field, .fs-radio-field) .fs-label + .fs-description {
  margin-top: 0.25rem;
}

.fs-checkbox-wrapper,
.fs-radio-wrapper {
  align-items: center;
  display: flex;
  height: 1.25rem;
}

.fs-checkbox,
.fs-radio {
  background-color: #fff;
  border: 1px solid var(--color-border-default);
  height: 1.25rem;
  width: 1.25rem;
}

.fs-checkbox {
  border-radius: 0.25rem;
}

.fs-radio {
  border-radius: 100%;
}

.fs-checkbox:checked,
.fs-radio:checked {
  background-color: var(--color-primary);
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  border-color: transparent;
}

.fs-checkbox:checked {
  background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e");
}

.fs-radio:checked {
  background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='8' cy='8' r='3'/%3e%3c/svg%3e");
}

.fs-checkbox:focus-visible,
.fs-radio:focus-visible {
  border-color: var(--color-border-active);
  outline: 4px solid var(--color-highlight);
  outline-offset: 0;
}

.fs-checkbox:checked:focus-visible,
.fs-radio:checked:focus-visible {
  border-color: transparent;
}

.fs-select {
  background-color: #fff;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
  background-position: right 0.75rem center;
  background-repeat: no-repeat;
  background-size: 1.625em 1.625em;
  padding-right: 2.875rem;
}

.fs-slider {
  background: transparent;
  cursor: pointer;
  height: 1.25rem;
  width: 100%;
}

.fs-slider::-moz-range-track {
  background-color: var(--color-background);
  border-radius: 0.5rem;
  height: 0.5rem;
}

.fs-slider::-webkit-slider-runnable-track {
  background-color: var(--color-background);
  border-radius: 0.5rem;
  height: 0.5rem;
}

.fs-slider::-moz-range-thumb {
  background-color: var(--color-primary);
  border: none; /* Removes extra border that FF applies */
  border-radius: 50%;
  height: 1.25rem;
  width: 1.25rem;
}

.fs-slider::-webkit-slider-thumb {
  appearance: none;
  background-color: var(--color-primary);
  border-radius: 50%;
  height: 1.25rem;
  margin-top: -0.375rem; /* Centers thumb on the track */
  width: 1.25rem;
}

.fs-slider:focus-visible::-moz-range-thumb {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.fs-slider:focus-visible::-webkit-slider-thumb {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.fs-switch {
  background-color: var(--color-background-alt);
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2.75' fill='white'/%3e%3c/svg%3e");
  background-position: left center;
  background-repeat: no-repeat;
  border-radius: 1.25rem;
  cursor: pointer;
  height: 1.25rem;
  transition-duration: 200ms;
  transition-property: background-color, background-position;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  width: 2.5rem;
}

.fs-switch:checked {
  background-color: var(--color-primary);
  background-position: right center;
}

.fs-switch:focus-visible {
  outline: 4px solid var(--color-highlight);
  outline-offset: 0;
}

.fs-textarea {
  appearance: none;
  border-radius: 0.75rem;
  border-width: 0;
  box-shadow: var(--color-border-default) 0 0 0 1px inset;
  color: var(--color-text-default);
  font-size: 1rem;
  line-height: 1.5rem;
  outline: none;
  padding: 0.5rem 0.75rem;
  resize: vertical;
}

.fs-textarea:focus-visible {
  box-shadow: var(--color-border-active) 0 0 0 1px inset;
}

.fs-textarea::placeholder {
  color: var(--color-text-muted);
}

/** Utilities **/
.col-span-full {
  grid-column: 1/-1;
}

.fs-textarea::placeholder {
  color: var(--color-text-muted);
}

.slider-label-container {
  display: flex;
  justify-content: space-between;
  width: 100%;
  margin-top: 0.25rem;
}

.slider-label-text {
  font-size: 0.75rem;
  color: var(--color-text-muted);
  text-align: justify;
  white-space: nowrap;
}

@media (max-width: 768px) {
  /*
   * 1. La clave: Forzamos el layout de 2 columnas a una sola columna.
   *    Esto apila los campos del formulario verticalmente.
  */
  .fs-form:where(.fs-layout__2-column),
  .fs-form:where(.fs-layout__2-column) fieldset {
    grid-template-columns: 1fr; /* De 2 columnas (1fr 1fr) a 1 columna */
    column-gap: 0; /* Ya no necesitamos el espacio entre columnas */
  }
  /*
   * 2. Apilamos los botones del formulario verticalmente para que
   *    sean más fáciles de presionar en pantallas táctiles y los
   *    hacemos de ancho completo para un look más moderno en móvil.
  */
  .fs-button-group {
    flex-direction: column; /* De fila a columna */
    align-items: stretch; /* Hacemos que los botones ocupen todo el ancho */
    row-gap: 0.75rem; /* Añadimos un espacio vertical */
  }
  /*
   * 3. (Opcional pero recomendado) Reducimos el espaciado general
   *    del formulario para que sea un poco más compacto en móviles.
  */
  .fs-form,
  fieldset {
    row-gap: 1rem; /* Reducimos el espacio entre campos */
  }
  /*
   * 4. (Opcional pero recomendado) Ajustamos levemente el tamaño de
   *    la fuente de los títulos para una mejor jerarquía en móvil.
  */
  .fs-fieldset-title {
    font-size: 1.125rem; /* Equivalente a 18px */
    line-height: 1.5rem;
  }
}
.tools-title {
  color: var(--text-main);
  margin-bottom: 20px;
  letter-spacing: 2px;
}

.tech-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
  max-width: 1000px;
  margin: 0 auto;
}

.tech-card {
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 15px;
  padding: 20px 10px;
  text-align: justify;
  transition: all 0.3s ease;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.tech-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
  transition: left 0.5s;
}

.tech-card:hover::before {
  left: 100%;
}

.tech-card:hover {
  transform: translateY(-10px);
  background: rgba(255, 255, 255, 0.08);
  border-color: #00bcd4;
  box-shadow: 0 20px 40px rgba(0, 188, 212, 0.2);
}

.tech-icon {
  width: 60px;
  height: 60px;
  margin: 0 auto 15px;
  display: block;
  position: relative;
  z-index: 1;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

/* Placeholder para las imágenes - reemplaza con tus URLs */
.html5 .tech-icon {
  background-image: url("../images/html5.png");
}

.css3 .tech-icon {
  background-image: url("../images/css3.png");
}

.sass .tech-icon {
  background-image: url("../images/sass.png");
}

.bootstrap .tech-icon {
  background-image: url("../images/bootstrap.png");
}

.tailwind .tech-icon {
  background-image: url("../images/tailwind.png");
}

.javascript .tech-icon {
  background-image: url("../images/js.png");
}

.react .tech-icon {
  background-image: url("../images/react.png");
}

.php .tech-icon {
  background-image: url("../images/php.png");
}

.tech-name {
  color: white;
  font-size: 1.6rem;
  font-weight: 300;
  margin-bottom: 8px;
  position: relative;
  z-index: 1;
}

.tech-description {
  color: #90a4ae;
  font-size: 0.9rem;
  line-height: 1.4;
  position: relative;
  z-index: 1;
}

/* Responsive */
@media (max-width: 768px) {
  .tools-title {
    font-size: 2.5rem;
  }
  .tech-grid {
    /* Anulamos el ancho máximo que causa el overflow en móvil */
    max-width: unset;
    /* Forzamos a que ocupe el 100% del espacio disponible */
    width: 100%;
    /* Adaptamos las columnas para que quepan mejor en pantallas angostas */
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    /* Reducimos un poco el espacio entre tarjetas */
    gap: 15px;
  }
  .tech-card {
    padding: 20px 15px;
  }
}
/* Estilos para la sección "About" */
#about {
  display: grid;
  padding: 50px;
  width: 100%;
  box-sizing: border-box;
  /* Definimos las columnas: una para el video (autoajustable) y otra para el texto (flexible) */
  grid-template-columns: auto 1fr;
  /* AQUÍ LA MAGIA: Definimos las áreas de nuestro layout */
  grid-template-areas: "titulo   titulo" "texto    video"; /* La segunda fila: "video" en la primera col, "texto" en la segunda */
  /* Espaciado: 30px entre filas (título y contenido) y 50px entre columnas (video y texto) */
  gap: 30px 50px;
  /* Centramos verticalmente el contenido de la segunda fila */
  align-items: center;
}

/* Asignamos cada elemento a su área de la grilla */
#about h3 {
  grid-area: titulo; /* Este h3 va en el área "titulo" */
  text-align: center; /* Lo centramos para que se vea como un encabezado */
  font-size: 2.5em; /* Un poco más grande para que destaque */
  margin: 0;
}

.video-container {
  grid-area: video; /* Este div va en el área "video" */
  display: flex;
  justify-content: center;
  align-items: center;
}

.text-container {
  grid-area: texto; /* Este div va en el área "texto" */
  text-align: justify;
  width: 100%;
  margin: 0;
  padding: 0;
}

/* Estilos para el video */
.video-container video {
  width: 250px; /* Ancho fijo para el video, tú lo ajustas a tu gusto */
  height: auto;
  border-radius: 10px;
}

/* ---- MEDIA QUERY PARA MÓVILES ---- */
@media (max-width: 768px) {
  /* --- CAMBIO DE ESTRATEGIA: De Grid a Flexbox --- */
  /*
   * En lugar de reconfigurar la grilla, la reemplazamos por Flexbox,
   * que es más simple y robusto para apilar elementos verticalmente.
  */
  #about {
    display: flex;
    flex-direction: column; /* Apilamos los elementos: título, texto, video */
    align-items: center; /* Centramos todo horizontalmente */
    gap: 30px; /* Espacio entre los elementos */
  }
  /*
   * Como #about ya no es 'grid', las propiedades de 'grid-area'
   * de sus hijos son ignoradas, así que no necesitamos tocarlas.
   * Simplemente definimos el orden visual que queremos.
  */
  #about h3 {
    order: 1; /* Título primero */
  }
  .video-container {
    order: 2; /* Video segundo */
    width: 100%; /* El contenedor del video ocupa todo el ancho */
  }
  .text-container {
    order: 3; /* Texto tercero */
    width: 23rem;
    margin: 0;
    padding: 0;
  }
  /* --- ESTILOS DEL VIDEO (PARA ASEGURAR QUE SE VEA) --- */
  .video-container video {
    display: block; /* Comportamiento predecible */
    width: 100%; /* El video ocupa el 100% de su contenedor */
    height: auto; /* La altura se calcula automáticamente */
    max-width: 350px; /* Tope para que no se vea gigante */
    margin: 0 auto; /* Lo centramos si la pantalla es más ancha que su max-width */
  }
}
.language-switch {
  display: flex;
  justify-content: center;
}

.switch-input {
  display: none;
}

.switch-label {
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
  transition: all 0.3s ease;
  user-select: none;
  display: inline-block;
  /* Color base para el separador '|', usando tu variable */
  color: var(--accent);
}

/* --- APARIENCIA POR DEFECTO (IDIOMA INACTIVO) --- */
.switch-label span {
  transition: all 0.3s ease;
  /* Color celeste por defecto, usando tu variable */
  color: var(--accent);
  text-shadow: none; /* Sin glow por defecto */
}

/* --- APARIENCIA DEL IDIOMA SELECCIONADO (CON GLOW) --- */
/* Página en ESPAÑOL: "ES" se ilumina */
.switch-input:not(:checked) + .switch-label .lang-es {
  /* Color blanco-grisáceo, usando tu variable */
  color: var(--text-nav);
  /* Glow suave que coincide con el color --text-nav (#F5F5F5) */
  text-shadow: 0 0 8px rgba(245, 245, 245, 0.8);
  cursor: default;
}

/* Página en INGLÉS: "EN" se ilumina */
.switch-input:checked + .switch-label .lang-en {
  color: var(--text-nav);
  text-shadow: 0 0 8px rgba(245, 245, 245, 0.8);
  cursor: default;
}

/* --- EFECTO HOVER (PREVISUALIZACIÓN CON GLOW) --- */
/* Hover sobre "EN" en la página en español */
.switch-input:not(:checked) + .switch-label .lang-en:hover {
  color: var(--text-nav);
  text-shadow: 0 0 8px rgba(245, 245, 245, 0.8);
}

/* Hover sobre "ES" en la página en inglés */
.switch-input:checked + .switch-label .lang-es:hover {
  color: var(--text-nav);
  text-shadow: 0 0 8px rgba(245, 245, 245, 0.8);
}

/* --- EFECTO CLICK --- */
.switch-label:active {
  transform: scale(0.95);
}

/* --- ESTILOS RESPONSIVE PARA MÓVILES --- */
@media (max-width: 768px) {
  .language-switch {
    display: flex;
    position: fixed;
    top: 4.3rem;
    left: 0;
    z-index: 2000;
    transform: scale(0.75);
  }
  .toggle-container {
    display: block;
    position: fixed;
    top: 4rem;
    right: 0;
    z-index: 2000;
    transform: scale(0.75);
  }
  /* --- SECCIÓN 2: ¡AQUÍ ESTÁ EL NUEVO CÓDIGO! --- */
  /* Cambiamos el color del idioma seleccionado a un gris sutil en móviles */
  .switch-label {
    font-size: 1.1rem;
  }
  /* Para "ES" en la página en español (móvil) */
  .switch-input:not(:checked) + .switch-label .lang-es {
    color: black; /* Un gris neutro y visible */
    text-shadow: none; /* ¡Quitamos el efecto de brillo! */
  }
  /* Para "EN" en la página en inglés (móvil) */
  .switch-input:checked + .switch-label .lang-en {
    color: black; /* Mismo color gris */
    text-shadow: none; /* ¡Quitamos el efecto de brillo! */
  }
  /* También ajustamos el hover para que sea consistente */
  .switch-input:not(:checked) + .switch-label .lang-en:hover,
  .switch-input:checked + .switch-label .lang-es:hover {
    color: #9E9E9E; /* Al pasar el mouse, previsualiza el gris */
    text-shadow: none;
  }
}

/*# sourceMappingURL=style.css.map */