/* ================================================================
   ARQUITECTURA DE MARCA & SISTEMA DE VARIABLES (:root) - STEM KV2026
   ================================================================ */
:root {
  /* --- TONOS DE ACENTO LUMÍNICO / NEÓN CIBER-GAMER --- */
  --stem-cyan-neon:      #08e0e5; /* Cyan ultra brillante: interacciones, hovers y focos primarios */
  --stem-cyan-medium:    #07c7cb; /* Cyan medio: bordes vectoriales y estados activos */
  --stem-cyan-dark:      #06b8bc; /* Cyan oscuro: gradientes y textos sobre fondos claros */
  
  /* --- TONOS DE CONTRASTE DISRUPTIVO (GAMER IDENTITY) --- */
  --stem-magenta-light:  #ffc1eb; /* Rosa brillante: etiquetas de alta visibilidad o taglines */
  --stem-magenta-neon:   #df1295; /* Magenta saturado: CTAs principales y acentos de poder */
  
  /* --- LIENZOS DE PROFUNDIDAD ATMOSFÉRICA --- */
  --stem-bg-abisal:      #081635; /* Azul oscuro profundo del KV: fondo maestro de inmersión */
  --stem-white:          #ffffff; /* Blanco puro: legibilidad extrema y contraste inverso */
  --stem-bg-card-dark:   rgba(8, 22, 53, 0.85); /* Fondo semitransparente para tramas de circuitos */

  /* --- CONFIGURACIÓN TIPOGRÁFICA CORE --- */
  --font-heading:        "Science Gothic", sans-serif; /* Jerarquías e-sports/tecnológicas */
  --font-body:           "Founders Grotesk", sans-serif; /* Lectura fluida y limpia */

  /* --- ESTILOS GRÁFICOS (E-SPORTS HUD) --- */
  --border-thin:         1px solid var(--stem-cyan-medium);
  --border-thick:        3px solid var(--stem-cyan-neon);
  
  /* Efectos Glow Neón para componentes interactivos */
  --glow-cyan:           0 0 12px rgba(8, 224, 229, 0.5);
  --glow-magenta:        0 0 12px rgba(223, 18, 149, 0.6);
  
  /* Gradiente Tecnológico KV 2026 */
  --bg-gradient-kv:      radial-gradient(circle at 50% 50%, #0a2254 0%, var(--stem-bg-abisal) 100%);

  /* --- ESTRUCTURA Y DINÁMICAS --- */
  /* Nota: Se anulan bordes curvos genéricos en tarjetas HUD para aplicar esquinas biseladas */
  --radius-sm:           2px;
  --radius-md:           4px;
  --radius-lg:           0px; /* Estilo poligonal/militarizado */
  
  /* Transición Gamer de Alta Respuesta */
  --transition-pop:      all .3s cubic-bezier(.25, .8, .25, 1);
  /* Coloca estos dos nuevos lienzos al final de tu bloque :root original */
  --stem-bg-claro-hud:    #eef4fc; /* Gris acero platino: reemplazo del blanco clínico */
  --stem-bg-cyber-glow:   radial-gradient(circle at 50% 50%, rgba(8, 224, 229, 0.08) 0%, var(--stem-bg-abisal) 100%); /* Fondo oscuro enriquecido cyan */
  
}

/* ================================================================
   RESET OPTIMIZADO
   ================================================================ */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  font-size: 16px;
  background-color: var(--stem-bg-abisal); /* Evita destellos blancos en la carga inicial */
}

body {
  font-family: var(--font-body);
  font-weight: 400; /* Vincula a tu FoundersGrotesk-Regular.woff2 */
  color: var(--stem-white);
  background: var(--stem-bg-abisal);
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  text-decoration: none;
  color: inherit;
  transition: var(--transition-pop);
}

ul {
  list-style: none;
}

p {
  padding-bottom: 1em;
}
p:last-child {
  padding-bottom: 0;
}

/* Encabezados con la tipografía geométrica expandida del KV */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-stretch: expanded; /* Prepara el renderizado para variantes Expanded de Science Gothic */
  line-height: 1.15;
  letter-spacing: -0.02em;
}

/* ================================================================
   UTILIDADES & ANIMACIONES DE REVELADO INMERSIÓN
   ================================================================ */
.container {
  width: min(90%, 1140px);
  margin: 0 auto;
}

/* Animaciones optimizadas por aceleración de hardware (GPU) */
.reveal {
  opacity: 0;
  transform: translate3d(0, 30px, 0);
  transition: opacity .7s cubic-bezier(0.215, 0.610, 0.355, 1), transform .7s cubic-bezier(0.215, 0.610, 0.355, 1);
  will-change: transform, opacity;
}
.reveal.visible {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

.reveal-left {
  opacity: 0;
  transform: translate3d(-30px, 0, 0);
  transition: opacity .7s cubic-bezier(0.215, 0.610, 0.355, 1), transform .7s cubic-bezier(0.215, 0.610, 0.355, 1);
  will-change: transform, opacity;
}
.reveal-left.visible {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

.reveal-right {
  opacity: 0;
  transform: translate3d(30px, 0, 0);
  transition: opacity .7s cubic-bezier(0.215, 0.610, 0.355, 1), transform .7s cubic-bezier(0.215, 0.610, 0.355, 1);
  will-change: transform, opacity;
}
.reveal-right.visible {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}



/* ================================================================
   HEADER STICKY - ESTILO ADAPTADO AL KEY VISUAL GAMER
   ================================================================ */
.site-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 2000;
    padding: 12px 0;
    /* Efecto Cristal Translúcido Abisal (Cyberpunk HUD) */
    background: rgba(8, 22, 53, 0.82); 
    /* Línea inferior de energía neón Cyan */
    border-bottom: 2px solid var(--stem-cyan-neon); 
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    transition: background 0.3s ease, padding 0.3s ease, border-color 0.3s ease;
    /* Sutil resplandor hacia abajo */
    box-shadow: 0 4px 20px rgba(8, 224, 229, 0.08);
}

.header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: min(92%, 1200px); 
    margin: 0 auto;
}

.header-logo {
    flex: 0 0 auto;
    display: flex;
    justify-content: flex-start;
}

.header-logo img {
    height: 44px; /* Optimizado para balance visual con el look tecnológico */
    width: auto;
    object-fit: contain;
    filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.2));
}

/* NAVEGACIÓN DESKTOP */
.header-right-nav {
    flex: 1;
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

.header-nav {
    margin: 0;
    padding: 0;
}

.nav-list {
    display: flex;
    list-style: none;
    gap: 8px; /* Reducido ligeramente para balancear la limpieza horizontal */
    align-items: center;
    margin: 0;
    padding: 0;
}

/* Estilo de Botones HUD Interactivos (Se eliminaron las rotaciones pop-art) */
.nav-link {
    font-family: var(--font-heading); /* Uso de Science Gothic */
    font-size: 0.70rem;
    font-stretch: semi-condensed;
    text-decoration: none;
    padding: 5px 10px;
    border: 1px solid rgba(8, 224, 229, 0.3); /* Bordes sutiles neón */
    border-radius: var(--radius-sm);
    text-transform: uppercase;
    font-weight: 700;
    display: block;
    letter-spacing: 0.5px;
    transition: var(--transition-pop);
    position: relative;
    overflow: hidden;
	white-space: nowrap;
}

/* Mapeo cromático de fondo adaptado a la estética Gamer (Tonos oscuros e iluminados) */
.nav-link.bg-cyan { 
    background-color: var(--stem-cyan-medium); 
    color: var(--stem-bg-abisal) !important; 
    border-color: var(--stem-bg-abisal); 
}
.nav-link.bg-abisal { 
    background-color: var(--stem-bg-abisal); 
    color: var(--stem-cyan-neon) !important; 
    border-color: var(--stem-cyan-medium); 
}
.nav-link.bg-purpura { background-color: rgba(223, 18, 149, 0.15); color: var(--stem-magenta-light) !important; border-color: var(--stem-magenta-neon); }
.nav-link.bg-blue    { background-color: rgba(10, 34, 84, 0.6); color: #70bfff !important; border-color: #0f8dfc; }
.nav-link.bg-yellow  { background-color: rgba(250, 201, 61, 0.15); color: #fac93d !important; border-color: #fac93d; }
.nav-link.bg-turquesa{ background-color: rgba(8, 224, 229, 0.12); color: var(--stem-cyan-neon) !important; border-color: var(--stem-cyan-medium); }
.nav-link.bg-lime    { background-color: rgba(197, 235, 36, 0.15); color: #c5eb24 !important; border-color: #c5eb24; }

/* Efecto Hover Gamer Premium (Brillo Neón e incremento controlado) */
.nav-link:hover {
    transform: translateY(-2px);
    filter: brightness(1.2);
    box-shadow: 0 0 10px rgba(8, 224, 229, 0.4);
    border-color: var(--stem-cyan-neon);
}

/* Anulados los selectores nth-child impares/pares que causaban las rotaciones del pop-art */
.nav-list li:nth-child(odd) .nav-link,
.nav-list li:nth-child(even) .nav-link { 
    transform: rotate(0deg); 
}

/* Control del primer elemento (Inicio) mediante tu JS actual */
.nav-list li:first-child {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    display: list-item !important;
}

.nav-list li:first-child.show-inicio {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

/* BOTÓN HAMBURGUESA GAMER */
.menu-toggle {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    background: var(--stem-bg-abisal);
    border: 1px solid var(--stem-cyan-neon);
    cursor: pointer;
    z-index: 2001;
    width: 42px;
    height: 42px;
    border-radius: var(--radius-sm);
    padding: 0;
    align-items: center;
    box-shadow: var(--glow-cyan);
    transition: var(--transition-pop);
}

.menu-toggle:hover {
    box-shadow: 0 0 15px var(--stem-cyan-neon);
    background: rgba(8, 224, 229, 0.1);
}

.menu-toggle .bar {
    width: 20px;
    height: 2px;
    background: var(--stem-cyan-neon);
    border-radius: 1px;
    transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* RESPONSIVE LOGIC */
@media (max-width: 1024px) {
    .header-nav {
        position: fixed;
        top: 0;
        right: -100%; 
        width: 100%;
        height: 100vh;
        background: rgba(8, 22, 53, 0.98); 
        backdrop-filter: blur(15px);
        -webkit-backdrop-filter: blur(15px);
        
        /* Cambiamos el flex del contenedor principal para que use el scroll arriba de forma natural */
        display: block; 
        overflow-y: auto;
        padding: 100px 0 60px 0; /* Espacio para que la 'X' y el logo respiren */
        box-sizing: border-box;
        transition: right 0.4s cubic-bezier(0.77, 0, 0.175, 1);
        border-left: 2px solid var(--stem-cyan-neon);
    }
    
    .header-nav.active {
        right: 0;
    }
    
    .nav-list {
        flex-direction: column;
        gap: 16px;
        width: 85%;
        margin: 0 auto; /* Centrado horizontal clásico */
        display: flex;
        align-items: center;
    }
    
    .nav-link {
        font-size: 1.1rem; 
        padding: 14px 20px;
        text-align: center;
        width: 100%;
        box-sizing: border-box;
        white-space: normal; 
        line-height: 1.3;
        border-radius: var(--radius-sm);

        /* 🌟 RESTABLECER VISIBILIDAD DE TEXTOS EN MÓVIL 🌟 */     
        color: var(--stem-cyan-neon) !important; 
        border: 1px solid rgba(8, 224, 229, 0.4) !important;
    }
    
    .nav-link:hover, .nav-link:active {
        transform: none; 
        background-color: rgba(8, 224, 229, 0.2) !important;
        border-color: var(--stem-cyan-neon) !important;
        box-shadow: var(--glow-cyan);
    }
    
    .menu-toggle {
        display: flex;
    }    
    
    
    /* Transformación animada del menú hamburguesa */
    .menu-toggle.active .bar:nth-child(1) { transform: translateY(7px) rotate(45deg); background: var(--stem-cyan-neon); }
    .menu-toggle.active .bar:nth-child(2) { opacity: 0; }
    .menu-toggle.active .bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); background: var(--stem-cyan-neon); }
    
    .header-right-nav {
        flex: 0; 
    }
}

@media (max-width: 480px) {
    .header-logo img {
        height: 36px;
    }
}


/* ================================================================
   HERO — CONTROL ADAPTATIVO & MAQUETACIÓN E-SPORTS
   ================================================================ */
.hero {
  width: 100%;
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  overflow: hidden;
  padding-top: 80px;
  
  background-image: 
    linear-gradient(to top, var(--stem-bg-abisal) 0%, rgba(8, 22, 53, 0.8) 35%, rgba(8, 22, 53, 0) 70%),
    url('../img/bg-hero-d.webp');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* Lógicas de visibilidad y control */
.desktop-only { display: block; }
.mobile-only { display: none; }

/* Base de Trama de Fondo Sutil */
.hero-grid {
  position: absolute;
  inset: 0;
  z-index: 2;
  background-image: radial-gradient(circle, rgba(8, 224, 229, 0.04) 1px, transparent 1px);
  background-size: 40px 40px;
  pointer-events: none;
}

.hero-inner {
  position: relative;
  z-index: 5;
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 50px;
  align-items: center;
  width: min(92%, 1200px);
  margin: 0 auto;
  padding: 60px 0 80px;
}

/* ================================================================
   COMPONENTES INTERNOS — PANEL IZQUIERDO (DISEÑO STEM)
   ================================================================ */
.hero-left-panel {
  display: flex;
  flex-direction: column;
  position: relative;
  width: 100%;
  max-width: 540px; /* Alínea el ancho maestro con el formulario derecho */
  margin: 0 auto;
  min-height: 580px; /* Altura de seguridad para contener el arte */
  padding-top: 200px;
}

/* El logo principal flotando al centro y arriba */
.hero-main-logo {
  position: absolute;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  max-width: 260px; /* Tamaño ideal fijado por ti */
  width: 100%;
  height: auto; 
  filter: drop-shadow(0 0 15px rgba(8, 224, 229, 0.25));
  z-index: 1; /* Capa trasera */
  animation: floatGamer 4s ease-in-out infinite;
}

/* La ilustración de los estudiantes pasa a ser la capa base del panel */
.hero-character-art {
  width: 100%;
  max-width: 100%;
  height: auto;
  display: block;
  position: relative;
  z-index: 2; /* Capa intermedia: Superior al logo (1) pero inferior al texto (3) */
  margin: 0 auto;
  pointer-events: none; /* Evita interferencia de clics con el copy inferior */
}

@keyframes floatGamer {
  0%, 100% { transform: translate(-50%, 0); }
  50% { transform: translate(-50%, -8px); }
}

/* Tarjeta de Contenido Superpuesta con Estilo HUD Cyberpunk */
.hero-copy-wrapper {
  position: absolute;
  bottom: 80px; /* Calibrado para dar espacio al arte y al CTA inferior */
  left: 50%;
  transform: translateX(-50%);
  width: 90%; 
  max-width: 480px;
  z-index: 3;
  padding: 35px 24px;
  box-sizing: border-box;
  text-align: left;
  
  /* Limpieza de propiedades nativas que rompen el bisel */
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;

  /* El brillo exterior se aplica aquí para que abrace la silueta de los pseudo-elementos */
  filter: drop-shadow(0 0 12px rgba(8, 224, 229, 0.45)) !important;
}
.hero-main-title {
  font-family: var(--font-heading);
  font-style: italic;
  font-stretch: expanded;
  font-weight: 700;
  font-size: 1.65rem; /* Ajustado para simular la tipografía compacta del KV */
  color: var(--stem-white);
  line-height: 1.2;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  margin-bottom: 12px;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8);
}

.hero-description {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 1.5rem;
  color: rgba(255, 255, 255, 0.9);
  line-height: 1.45;
  margin-bottom: 0;
  padding-bottom: 0;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
}

/* Grupo de llamado a la acción centrado debajo de la máscara */
.hero-cta-group {
  position: relative;
  z-index: 4;
  width: 100%;
  text-align: center;
  margin-top: 25px;
}

/* Botón de anclaje de scroll estilo HUD */
.btn-hud-scroll {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--stem-cyan-neon);
  background: rgba(8, 224, 229, 0.08);
  color: var(--stem-cyan-neon);
  padding: 12px 28px;
  border-radius: var(--radius-sm);
  text-transform: uppercase;
  font-family: var(--font-heading);
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 1px;
  box-shadow: var(--glow-cyan);
  transition: var(--transition-pop);
}

.btn-hud-scroll:hover {
  background: var(--stem-cyan-neon);
  color: var(--stem-bg-abisal);
  box-shadow: 0 0 20px var(--stem-cyan-neon);
  transform: translateY(-2px);
}

@media (max-width: 991px) {
  .desktop-only { display: none; }
  .mobile-only { display: block; }

  /* 1. Reset para impacto inmersivo móvil sin saltos visuales */
  .hero { 
    padding-top: 0 !important; 
    background-image: none !important; /* Se anula el fondo de escritorio */
    display: flex;
    flex-direction: column;
  } 
  
  .hero-inner.container {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex;
    flex-direction: column;
    grid-template-columns: 1fr !important; /* Rompe el grid horizontal */
    gap: 0 !important;
  }

  /* 2. Bloque Izquierdo con Regla de Negocio Estricta para Fondo Mobile */
  .hero-text {
    position: relative;
    width: 100%;
    padding: 90px 20px 80px !important; 
    isolation: isolate; 
    z-index: 5;
    display: flex;
    flex-direction: column;
    align-items: center;
    
	background-image: 
      linear-gradient(to top, var(--stem-bg-abisal) 0%, rgba(8, 22, 53, 0.8) 30%, rgba(8, 22, 53, 0) 65%),
      url('../img/bg-hero-m.webp');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
  }

  .hero-left-panel {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    min-height: auto !important; /* Libera la altura fija en móviles */
    padding-top: 15px;
  }
  
  .hero-cta-group {
    position: relative !important;
    z-index: 4;
    width: 100%;
    text-align: center;
    margin-top: 20px; /* Separación limpia desde el párrafo descriptor */
    padding-left: 0;
    padding-right: 0;
  }
  .hero-main-logo {
    position: relative !important;
    top: 0 !important;
    left: 0 !important;
    transform: none !important;
    margin-top: 10px !important; 
    margin-bottom: 0;
    max-width: 160px !important;
    animation: none !important;
  }
  .hero-main-title {
    font-size: 1.5rem !important;
    margin-bottom: 12px;
  }
  .hero-description {
    font-size: 0.95rem !important; /* Tamaño móvil fluido para lectura */
    margin-bottom: 0;
  }
	.hero-character-art {
    position: relative !important;
    z-index: 2;
    max-width: 280px; /* Reducido un toque para que no empuje demasiado el scroll */
    margin: 0 auto -20px auto; /* Control visual del solapamiento */
    pointer-events: none;
  }
  /* Fusionamos el copy y el CTA en un flujo natural único */
  .hero-copy-wrapper {
    position: absolute !important; /* Cambiamos a absolute para que no deje espacio fantasma abajo */
    top: 270px !important; /* Calibra este valor en px para situarlo exactamente al nivel del hombro */
    bottom: auto !important; /* Reseteamos el bottom anterior */
    left: 50% !important;
    transform: translateX(-50%) !important; /* La centramos horizontalmente */
    width: calc(100% - 40px) !important; /* Margen lateral controlado */
    max-width: 440px !important;
    z-index: 3;
    padding: 24px 16px !important;
    background: transparent !important;
    border: none !important;
    filter: drop-shadow(0 0 8px rgba(8, 224, 229, 0.35)) !important;
  }
  .hero-copy-wrapper::after {
    background-color: rgba(8, 22, 53, 0.85) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
  }

  /* 4. Bloque Derecho: Fondo abisal sólido para legibilidad extrema */
  .reveal-right {
    position: relative;
    z-index: 10;
    background: var(--stem-bg-abisal) !important; 
    width: 100%;
    padding: 40px 20px;
    margin: 0;
    border-top: 2px solid var(--stem-cyan-neon); /* Cierre de línea neón */
  }
  
  #formmob {
    scroll-margin-top: 74px; 
  }  
}

@media (max-width: 480px) {
  .hero-main-title {
    font-size: 1rem !important;
  }
  .btn-hud-scroll {
	font-size: 0.7rem !important;
  }
}
@media (max-width: 372px) {
  .hero-main-title {
    font-size: 0.8rem !important;
  }
  .hero-description {
        font-size: 0.8rem !important;
  }
  .btn-hud-scroll {
	font-size: 0.5rem !important;
  }	
}

/* ==========================================================================
   FORMULARIO PRINCIPAL — ESTILO HUD CYBER-GAMER (CRISTAL TRANSLÚCIDO)
   ========================================================================== */
.form-glass-pop {
  background: var(--stem-bg-card-dark); /* Integración cromática abisal */
  border: var(--border-thin); /* Borde vectorial de precisión */
  border-radius: var(--radius-md);
  padding: 40px;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 10px 40px rgba(8, 224, 229, 0.06), inset 0 0 20px rgba(8, 224, 229, 0.05);
  position: relative;
  max-width: 100%;
  box-sizing: border-box;
}

/* Efecto decorativo de esquina militarizada/HUD (Opcional por CSS puro) */
.form-glass-pop::before {
  content: '';
  position: absolute;
  top: -1px;
  left: -1px;
  width: 12px;
  height: 12px;
  border-top: 3px solid var(--stem-cyan-neon);
  border-left: 3px solid var(--stem-cyan-neon);
}

.form-title {
  font-family: var(--font-heading);
  font-stretch: expanded;
  font-weight: 700;
  font-size: 1.6rem;
  color: var(--stem-white);
  margin-bottom: 25px;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.form-title span {
  background: var(--stem-magenta-neon); /* Contraste disruptivo gamer */
  color: var(--stem-white);
  padding: 2px 10px;
  display: inline-block;
  font-size: 0.85rem;
  font-stretch: normal;
  vertical-align: middle;
  margin-left: 6px;
  border-radius: var(--radius-sm);
  box-shadow: var(--glow-magenta);
}

/* Rejilla de Inputs (Grid de 2 Columnas) */
.form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  width: 100%;
  box-sizing: border-box;
}

.form-group {
  position: relative;
  width: 100%;
}

.form-group.full { 
  grid-column: 1 / -1; 
}

.form-group label {
  font-family: var(--font-body);
  display: block;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  margin-bottom: 6px;
  color: rgba(255, 255, 255, 0.8); 
  letter-spacing: 0.5px;
}

/* Campos de Texto y Selectores HUD */
.form-input, .form-select {
  width: 100%; 
  display: block;
  box-sizing: border-box; 
  border: 1px solid rgba(8, 224, 229, 0.25);
  border-radius: var(--radius-sm);
  padding: 12px 16px;
  font-size: 0.95rem;
  font-family: var(--font-body);
  background-color: rgba(8, 22, 53, 0.5); /* Fondo oscuro translúcido */
  color: var(--stem-white);
  transition: var(--transition-pop);
}

/* Estado Focus con Retroalimentación Lumínica */
.form-input:focus, .form-select:focus {
  background: rgba(8, 34, 84, 0.8);
  outline: none;
  border-color: var(--stem-cyan-neon);
  box-shadow: var(--glow-cyan), inset 0 0 8px rgba(8, 224, 229, 0.2);
}

/* Placeholder adaptado a la estética oscura */
.form-input::placeholder {
  color: rgba(255, 255, 255, 0.35);
}

/* Selector de Tipo de documento: flecha propia y coherencia con el tema oscuro */
.form-select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  cursor: pointer;
  padding-right: 40px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2308e0e5' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 16px;
}

/* Las opciones nativas se muestran legibles (texto oscuro sobre claro) */
.form-select option {
  color: #081635;
  background-color: #ffffff;
}

/* ==========================================================================
   ESTRUCTURA DEL SCROLL INTERNO Y TARJETAS DE PARTICIPANTES
   ========================================================================== */

/* Contenedor con Scroll Interno */
.form-scroll-container {
  max-height: 500px;
  overflow-y: auto;
  margin: 25px 0;
  background: rgba(4, 12, 31, 0.4);
  border: 1px solid rgba(8, 224, 229, 0.15);
  border-radius: var(--radius-md);
  padding: 20px;
  box-sizing: border-box;
}

/* Estilización Avanzada del Scroll (WPO & HUD Gaming) */
.form-scroll-container::-webkit-scrollbar {
  width: 6px;
}
.form-scroll-container::-webkit-scrollbar-track {
  background: rgba(8, 22, 53, 0.5);
}
.form-scroll-container::-webkit-scrollbar-thumb {
  background: var(--stem-cyan-medium);
  border-radius: var(--radius-sm);
}
.form-scroll-container::-webkit-scrollbar-thumb:hover {
  background: var(--stem-cyan-neon);
}

/* Bloques/Secciones Dinámicas de los Participantes */
.participant-section {
  background: rgba(8, 22, 53, 0.7);
  border: 1px solid rgba(8, 224, 229, 0.2);
  border-radius: var(--radius-sm);
  padding: 20px;
  margin-bottom: 20px;
  box-sizing: border-box;
  transition: var(--transition-pop);
}

.participant-section:last-of-type {
  margin-bottom: 0;
}

/* Resaltado táctico si la sección está activa */
.participant-section.active {
  border-color: rgba(8, 224, 229, 0.4);
  box-shadow: 0 0 15px rgba(8, 224, 229, 0.05);
}

/* Subtítulos de sección (Participante 1, 2, Tutor...) */
.section-subtitle {
  font-family: var(--font-heading);
  font-stretch: expanded;
  font-size: 1rem;
  font-weight: 700;
  color: var(--stem-cyan-neon);
  margin-top: 0;
  margin-bottom: 18px;
  text-transform: uppercase;
  border-bottom: 1px solid rgba(8, 224, 229, 0.2);
  padding-bottom: 6px;
  display: block;
  letter-spacing: 0.5px;
}

/* ==========================================================================
   BOTONES DE CONTROL DE MIEMBROS & INTERACCIONES HUD
   ========================================================================== */

/* Contenedor del Botón Añadir Miembro */
.add-participant-wrap {
  width: 100%;
  text-align: center;
  margin: 15px 0 25px 0;
  box-sizing: border-box;
}

/* Botón Añadir Participante */
.btn-add-member {
  background: rgba(197, 235, 36, 0.12); /* Base Lima sutil translúcida */
  color: #c5eb24;
  font-family: var(--font-body);
  font-weight: 700;
  text-transform: uppercase;
  border: 1px solid #c5eb24;
  border-radius: var(--radius-sm);
  padding: 10px 24px;
  font-size: 0.85rem;
  letter-spacing: 0.5px;
  cursor: pointer;
  box-shadow: 0 0 10px rgba(197, 235, 36, 0.2);
  transition: var(--transition-pop);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.btn-add-member:hover {
  background: #c5eb24;
  color: var(--stem-bg-abisal);
  box-shadow: 0 0 15px #c5eb24;
  transform: translateY(-2px);
}

.btn-add-member:active {
  transform: translateY(1px);
}

/* ==========================================================================
   ZONA DE CARGA DE VIDEO (DROPZONE ADAPTADA AL KEY VISUAL GAMER)
   ========================================================================== */
.video-dropzone {
  border: 1px dashed rgba(8, 224, 229, 0.4);
  background-color: rgba(4, 12, 31, 0.5);
  border-radius: var(--radius-sm);
  padding: 35px 20px;
  text-align: center;
  cursor: pointer;
  transition: var(--transition-pop);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}

/* Estado Hover o Dragover activo (Arrastrando archivo sobre la zona) */
.video-dropzone:hover, 
.video-dropzone.dragover {
  border-style: solid;
  border-color: var(--stem-cyan-neon);
  background-color: rgba(8, 224, 229, 0.08);
  box-shadow: var(--glow-cyan), inset 0 0 12px rgba(8, 224, 229, 0.1);
  transform: translateY(-1px);
}

.dropzone-icon {
  font-size: 32px;
  color: var(--stem-cyan-neon);
  margin-bottom: 12px;
  transition: transform 0.3s ease;
  filter: drop-shadow(var(--glow-cyan));
}

.video-dropzone:hover .dropzone-icon {
  transform: translateY(-3px);
}

.dropzone-text {
  font-family: var(--font-body);
  font-size: 0.9rem;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.85);
  margin: 0;
}

.dropzone-link {
  color: var(--stem-cyan-neon);
  text-decoration: underline;
  font-weight: 700;
}

.dropzone-info {
  font-family: var(--font-body);
  font-size: 0.75rem;
  opacity: 0.6;
  margin-top: 6px;
  display: block;
  color: var(--stem-white);
}

/* Barra de progreso de carga HUD */
.video-progress-wrapper {
  margin-top: 15px;
  background: rgba(8, 22, 53, 0.9);
  padding: 15px;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(8, 224, 229, 0.2);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
  box-sizing: border-box;
}

.progress-info {
  display: flex;
  justify-content: space-between;
  font-family: var(--font-body);
  font-size: 0.85rem;
  margin-bottom: 8px;
  font-weight: 700;
  color: var(--stem-white);
}

.progress-bar-container {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 4px;
  overflow: hidden;
  height: 8px;
  width: 100%;
}

.progress-bar-fill {
  background: var(--stem-cyan-neon);
  width: 0%;
  height: 100%;
  box-shadow: var(--glow-cyan);
  transition: width 0.1s linear;
}

/* Estado de éxito en la carga */
.progress-bar-fill.success {
  background: #10b981; /* Verde esmeralda óptimo de éxito */
  box-shadow: 0 0 10px rgba(16, 185, 129, 0.5);
}

/* ==========================================================================
   CHECKBOX, MENSAJES DE ERROR Y BOTÓN SUBMIT PRINCIPAL
   ========================================================================== */

.form-check-wrap {
  grid-column: 1 / -1;
  background: rgba(4, 12, 31, 0.3);
  padding: 16px;
  border: 1px solid rgba(8, 224, 229, 0.15);
  border-radius: var(--radius-sm);
  margin-bottom: 25px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  box-sizing: border-box;
}
.form-check-control {
  display: flex;
  align-items: center; /* Centrado vertical impecable */
  gap: 10px;
  width: 100%;
}

.check-label {
  font-family: var(--font-body);
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.8);
  line-height: 1.4;
  cursor: pointer;
}

.check-label a {
  color: var(--stem-white);
  text-decoration: underline;
  font-weight: 700;
}

.form-check-wrap input[type="checkbox"] {
  margin: 0;
  transform: scale(1.15);
  cursor: pointer;
  flex-shrink: 0;
}

/* Mensajes de error del sistema de validaciones */
.form-error {
  font-family: var(--font-body);
  font-size: 0.75rem;
  color: #f87171; /* Tono rojo neón legible sobre fondo oscuro */
  margin-top: 5px;
  font-weight: 600;
  display: none;
}

/* Wrapper del Botón de Envío */
.btn-submit-wrap {
  grid-column: 1 / -1;
  width: 100%;
  box-sizing: border-box;
}

/* Botón de Registro de Delegación Estilo CTA Energético */
.btn-submit {
  border-radius: var(--radius-sm);
  background: var(--stem-magenta-neon);
  color: var(--stem-white);
  font-family: var(--font-heading);
  font-stretch: expanded;
  text-transform: uppercase;
  border: 1px solid rgba(255, 255, 255, 0.2);
  padding: 16px 32px;
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: 0.5px;
  width: 100%;
  cursor: pointer;
  box-sizing: border-box;
  box-shadow: var(--glow-magenta);
  transition: var(--transition-pop);
  display: flex;
  align-items: center;
  justify-content: center;
}

.btn-submit:hover {
  background: #f41baa; /* Brillo controlado */
  box-shadow: 0 0 20px var(--stem-magenta-neon);
  transform: translateY(-2px);
}

.btn-submit:active {
  transform: translateY(1px);
}

/* Protección visual anti-duplicados por WPO */
.btn-submit:disabled {
  background: rgba(255, 255, 255, 0.12) !important;
  color: rgba(255, 255, 255, 0.35) !important;
  border-color: rgba(255, 255, 255, 0.05) !important;
  box-shadow: none !important;
  transform: none !important;
  cursor: not-allowed;
}

/* ==========================================================================
   ELEMENTOS DE TIPO RADIO CONTROL (ESTABLES)
   ========================================================================== */
.form-label-header {
  display: block; 
  margin-bottom: 12px !important; 
  font-weight: 700;
  font-family: var(--font-body);
  text-transform: uppercase;
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.8);
}

.form-radio-group {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.form-radio-label {
  display: flex !important;
  align-items: flex-start;
  justify-content: flex-start;
  cursor: pointer;
  font-family: var(--font-body);
  font-size: 0.9rem;
  color: var(--stem-white);
  line-height: 1.4;
  margin-bottom: 10px;
}

.form-radio-label span {
  display: inline-block;
  width: 100%;
}

.form-radio-label input[type="radio"] {
  margin-top: 3px;
  margin-right: 12px;
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  cursor: pointer;
}

/* ==========================================================================
   DISEÑO RESPONSIVO EXCLUSIVO PARA EL COMPORTAMIENTO DEL FORMULARIO (MOBILE)
   ========================================================================== */
@media (max-width: 768px) {
  .form-glass-pop {
    padding: 24px 16px;
  }

  /* Fuerza el formulario a una sola columna adaptándose al ancho del dispositivo */
  .form-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .form-radio-label {
    align-items: flex-start;
    text-align: left;
    padding: 4px 0;
  }

  .form-scroll-container {
    padding: 12px;
    max-height: 420px;
    margin: 20px 0;
  }
  
  .btn-submit {
    font-size: 0.95rem;
    padding: 14px 24px;
  }
}

/* ================================================================
   3. COUNTDOWN — DISRUPCIÓN CROMÁTICA Y MARCADOR DEPORTIVO (NEÓN)
   ================================================================ */

.countdown-section {
  background-color: var(--stem-cyan-neon); /* Cinta neón vibrante de alto impacto */
  color: var(--stem-bg-abisal);
  padding: 60px 24px;
  position: relative;
  overflow: hidden;
  border-bottom: 3px solid rgba(0, 0, 0, 0.15); /* Sombra de peso en el chasis */
  z-index: 10;
}

/* Ocultamiento semántico absoluto para accesibilidad universal */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
  white-space: nowrap;
}

.countdown-inner {
  position: relative;
  z-index: 2;
  max-width: 1100px;
  margin: 0 auto;
  text-align: center;
}

/* Título adaptado a la sobriedad tecnológica y tipografía de ingeniería */
.countdown-title {
  font-family: var(--font-heading);
  font-stretch: expanded;
  font-weight: 700;
  font-size: clamp(1.2rem, 2.5vw, 1.8rem);
  color: var(--stem-bg-abisal);
  text-transform: uppercase;
  margin-bottom: 35px;
  letter-spacing: -0.01em;
  line-height: 1.2;
}

/* Contenedor Flex: Centrado en Escritorio */
.countdown {
  display: flex;
  justify-content: center;
  gap: 30px;
}

/* Bloques flotantes oscuros independientes que rompen el fondo neón */
.countdown-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: var(--stem-bg-abisal); /* Inversión cromática: bloques de hardware oscuros */
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-sm);
  padding: 24px 10px;
  width: 150px;
  min-height: 140px;
  box-sizing: border-box;
  transition: var(--transition-pop);
}

.countdown-item:hover {
  background: #040d21; /* Oscurecimiento profundo en hover */
  border-color: var(--stem-magenta-neon);
  transform: translateY(-4px);
}

.countdown-num-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

/* Renderizado robusto de Marcador Deportivo */
.countdown-number {
  font-family: var(--font-heading);
  font-stretch: expanded;
  font-weight: 900; /* Expanded Black */
  font-size: clamp(2.8rem, 5vw, 4.2rem);
  color: var(--stem-cyan-neon); /* El número brilla en cyan */
  line-height: 1;
  margin: 0;
  letter-spacing: -1px;
  transition: color 0.3s ease;
}

/* Etiquetas unificadas de marcador */
.countdown-label {
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--stem-white);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-top: 8px;
  display: block;
  transition: color 0.3s ease;
}

/* ==========================================================================
   ANIMACIONES DE URGENCIA (FOMO OPTIMIZADO)
   ========================================================================== */

/* Latido controlado para el segundero */
.countdown-item:last-child .countdown-number {
  animation: timerPulseGamer 1s infinite cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes timerPulseGamer {
  0% { 
    transform: scale(1); 
  }
  50% { 
    transform: scale(1.05); 
    color: var(--stem-magenta-neon); /* Alerta cromática momentánea a magenta */
  }
  100% { 
    transform: scale(1); 
  }
}

/* ==========================================================================
   DISEÑO RESPONSIVO — CONTROL ESTRICTO DE UNA SOLA FILA MÓVIL
   ========================================================================== */

@media (max-width: 768px) {
  .countdown-section {
    padding: 40px 16px; /* Ajuste compacto */
  }

  .countdown-title {
    margin-bottom: 25px;
    padding: 0 8px;
    line-height: 1.3;
  }

  /* REGLA CRÍTICA: Forzar visualización horizontal sin saltos de línea */
  .countdown {
    display: flex;
    flex-wrap: nowrap !important;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
    max-width: 480px;
    margin: 0 auto;
  }

  /* Micro-módulos tácticos adaptados a la cinta neón */
  .countdown-item {
    flex: 1 1 0%;
    width: auto;
    min-width: 0;
    min-height: 85px;
    padding: 12px 4px 8px 4px;
    background: var(--stem-bg-abisal);
    border-radius: 4px;
    gap: 2px;
  }

  .countdown-num-wrap {
    margin-bottom: 0;
    flex-grow: 1;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .countdown-number {
    font-size: clamp(1.8rem, 7vw, 2.4rem);
    letter-spacing: -1px;
  }

  .countdown-label {
    font-size: 0.68rem;
    font-weight: 700;
    margin-top: auto;
    padding-top: 2px;
    letter-spacing: 0.5px;
    color: rgba(255, 255, 255, 0.5);
  }
  
  /* Desactivación del hover en móviles */
  .countdown-item:hover {
    transform: none !important;
    background: var(--stem-bg-abisal) !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
  }
  .countdown-item:hover .countdown-number {
    color: var(--stem-cyan-neon) !important;
  }
  .countdown-item:hover .countdown-label {
    color: rgba(255, 255, 255, 0.5) !important;
  }
}

/* Optimización para pantallas extremadamente pequeñas (<360px) */
@media (max-width: 359px) {
  .countdown {
    gap: 4px;
  }
  .countdown-number {
    font-size: 1.6rem;
  }
  .countdown-label {
    font-size: 0.6rem;
  }
}

/* ================================================================
   SECCIÓN 4: DATOS / MÉTRICAS — ATMÓSFERA PLACA MADRE
   ================================================================ */

.datos-section {
  position: relative;
  /* La imagen va aquí, directamente, combinada con el degradado */
  background-image: 
    radial-gradient(circle at 50% 50%, rgba(8, 22, 53, 0.7) 0%, rgba(8, 22, 53, 0.95) 100%),
    url('../img/circuitos.webp');
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  
  /* Color de respaldo por si falla la carga de la imagen */
  background-color: var(--stem-bg-abisal);
  
  padding: 90px 24px;
  overflow: hidden;
  border-bottom: 1px solid rgba(8, 224, 229, 0.1);
  z-index: 1; /* Contexto de apilamiento único */
}

.datos-inner {
  position: relative;
  /* Este contenedor ahora está en el z-index 2, por encima de todo lo anterior */
  z-index: 2;
  max-width: 1200px;
  margin: 0 auto;
}

/* --- Bloque de Introducción / Copys --- */
.datos-section .datos-intro {
  max-width: 950px;
  margin: 0 auto 65px auto;
  text-align: center;
}

.datos-section .datos-title {
  font-family: var(--font-body);
  font-size: clamp(1.2rem, 2.2vw, 1.55rem);
  color: var(--stem-white);
  line-height: 1.6;
  font-weight: 400;
  letter-spacing: 0.3px;
  /* Sombra sutil para separar el texto del fondo técnico */
  text-shadow: 0 2px 4px rgba(0,0,0,0.5);
}

/* Resaltados Técnicos de Alto Contraste (Inyección Neón de Categorías) */
.datos-section .datos-title strong {
  font-family: var(--font-heading);
  font-stretch: expanded;
  font-weight: 700;
  color: var(--stem-cyan-neon);
  background-color: rgba(8, 224, 229, 0.1);
  padding: 2px 8px;
  border-radius: var(--radius-sm);
  display: inline-block;
  border: 1px solid rgba(8, 224, 229, 0.25);
  text-shadow: var(--glow-cyan);
}

/* Ritmo Visual: El segundo término fuerte rota al Magenta Neón de la marca */
.datos-section .datos-title strong:nth-of-type(2) {
  color: var(--stem-magenta-neon);
  background-color: rgba(244, 27, 170, 0.1);
  border-color: rgba(244, 27, 170, 0.25);
  text-shadow: var(--glow-magenta);
}

/* El tercer término fuerte rota al color Lima Tecnológico */
.datos-section .datos-title strong:nth-of-type(3) {
  color: #c5eb24;
  background-color: rgba(197, 235, 36, 0.1);
  border-color: rgba(197, 235, 36, 0.25);
  text-shadow: 0 0 8px rgba(197, 235, 36, 0.4);
}
/* ================================================================
   --- REJILLA DE BLOQUES (4 COLUMNAS EN DESKTOP) ---
   ================================================================ */
.datos-section .datos-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
  align-items: stretch;
}

/* --- BLOQUE DE DATO INDIVIDUAL (TARJETA TIPO CRISTAL MADRE) --- */
.datos-section .dato-block {
  background: rgba(13, 22, 47, 0.9); /* Consistencia con el fondo de las tarjetas de retos */
  padding: 35px 24px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  position: relative;
  box-sizing: border-box;  

  /* Inyección de Borde Imagen para Desktop (Caja 1) */
  border: 14px solid transparent;
  border-image: url('../img/caja_1.svg') 28 fill stretch;
  
  /* Suavizado óptico anti-aliasing vectorial */
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
  
  /* Desactivamos cortes por clip-path anteriores para que border-image tome el control total */
  clip-path: none !important;
  -webkit-clip-path: none !important;
  box-shadow: none; 
  
  will-change: transform;
  transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1), filter 0.3s ease;
}

/* Ajuste de opacidad y brillo controlado en Hover */
.datos-section .dato-block:hover {
  transform: translateY(-8px) scale(1.01);
  z-index: 5;
}

/* Efecto de Sobrealimentación (Glow Avanzado) GPU-Accelerated al pasar el cursor */
.datos-section .dato-block:nth-child(1):hover { filter: drop-shadow(0 0 10px rgba(8, 224, 229, 0.4)); }
.datos-section .dato-block:nth-child(2):hover { filter: drop-shadow(0 0 10px rgba(223, 18, 149, 0.4)); }
.datos-section .dato-block:nth-child(3):hover { filter: drop-shadow(0 0 10px rgba(197, 235, 36, 0.4)); }
.datos-section .dato-block:nth-child(4):hover { filter: drop-shadow(0 0 10px rgba(7, 199, 203, 0.4)); }

/* --- CONTENEDOR DEL ÍCONO (ESTILO SLOT DIGITAL DE PRECISIÓN) --- */
.datos-section .dato-icon-wrap {
  width: 64px;
  height: 64px;
  border-radius: var(--radius-sm);
  background: rgba(8, 22, 53, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 24px;
  position: relative;
  transition: var(--transition-pop);
}


/* Animación del ícono al pasar el cursor (Consistencia de energía) */
.datos-section .dato-block:hover .dato-icon-wrap {
  transform: scale(1.08);
  background: var(--stem-bg-abisal);
}
.datos-section .dato-block:nth-child(1):hover .dato-icon-wrap { box-shadow: var(--glow-cyan); }
.datos-section .dato-block:nth-child(2):hover .dato-icon-wrap { box-shadow: var(--glow-magenta); }
.datos-section .dato-block:nth-child(3):hover .dato-icon-wrap { box-shadow: 0 0 12px #c5eb24; }
.datos-section .dato-block:nth-child(4):hover .dato-icon-wrap { box-shadow: 0 0 12px var(--stem-cyan-medium); }

.datos-section .dato-icon-wrap i {
  font-size: 48px;
  color: var(--stem-white);
  transition: transform 0.3s ease;
}

.datos-section .dato-block:hover .dato-icon-wrap i {
  transform: rotate(5deg);
}

/* --- CONTENIDO DE TEXTO TÉCNICO --- */
.datos-section .dato-content {
  width: 100%;
}

.datos-section .dato-label {
  font-family: var(--font-heading);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--stem-white);
  margin-bottom: 8px;
  line-height: 1.3;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.datos-section .dato-desc {
  font-family: var(--font-body);
  font-size: 1.05rem;
  color: var(--stem-white)
  line-height: 1.65;
  margin: 0;
}

/* ================================================================
   RESPONSIVE DESIGN (MEDIA QUERIES)
   ================================================================ */

/* Tablets y entornos intermedios (Grid equilibrado de 2x2) */
@media (max-width: 992px) {
  .datos-section .datos-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
  }
  .datos-section .datos-intro {
    margin-bottom: 45px;
  }
}

/* Móviles (Colapso estricto a 1 Columna y Optimizaciones de Lectura de Pulgar) */
@media (max-width: 640px) {
  .datos-section {
    padding: 60px 16px;
  }

  .datos-section .datos-intro {
    text-align: left; /* Alineación limpia natural de lectura móvil */
    margin-bottom: 35px;
  }

  .datos-section .datos-title {
    line-height: 1.5;
  }

  .datos-section .datos-title strong {
    display: inline; /* Fluidez nativa, evita saltos forzados en pantallas pequeñas */
    padding: 1px 4px;
  }

  /* REGLA DEL INFORME: Estructura vertical limpia al 100% */
  .datos-section .datos-grid {
    grid-template-columns: 1fr !important;
    gap: 16px;
  }

  /* Rediseño de tarjeta horizontal para optimizar el scroll con el pulgar */
  .datos-section .dato-block {
    flex-direction: row; 
    text-align: left;
    padding: 24px 20px;
    align-items: center;
    gap: 20px;
    
    /* Desactivamos los clip-path móviles viejos */
    clip-path: none !important;
    -webkit-clip-path: none !important;

    /* Inyección de Borde Imagen para Mobile (Caja 2) */
    border: 12px solid transparent;
    border-image: url('../img/caja_2.svg') 24 fill stretch;
  }
  /* Actualización del calco del borde en móvil */
  .datos-section .dato-block::before {
    clip-path: polygon(
      14px 0%, 100% 0%, 
      100% calc(100% - 14px), calc(100% - 14px) 100%, 
      0% 100%, 0% 14px
    );
  }
  .datos-section .dato-block:hover {
    transform: translateY(-2px) !important; /* Desaceleración táctil móvil */
  }

  .datos-section .dato-icon-wrap {
    margin-bottom: 0; /* Reseteo del espaciado vertical de escritorio */
    flex-shrink: 0;
    width: 52px;
    height: 52px;
  }

  .datos-section .dato-icon-wrap i {
    font-size: 20px;
  }

  .datos-section .dato-label {
    font-size: 0.95rem;
    margin-bottom: 4px;
  } 
}


/* ==========================================================================
   SECCIÓN 5: ¿POR QUÉ PARTICIPAR? — INTERFAZ HUD DE SELECCIÓN (LABORATORIO)
   ========================================================================== */

.porque-participar-section {
  padding: 90px 24px;
  background-color: var(--stem-cyan-medium); /* Conserva el fondo sólido de tu estrategia */  
  border-bottom: 2px solid rgba(8, 22, 53, 0.05);
  position: relative;
  overflow: hidden; /* Vital para que las formas decorativas no generen scroll horizontal */
  z-index: 5;  
}
/* --- DETALLES VECTORIALES SUBTERRÁNEOS (FORMAS SVG COSTADOS) --- */
.porque-participar-section .porque-shape {
  position: absolute;
  pointer-events: none; /* No interfiere con la selección ni clics del usuario */
  opacity: 0.6; /* Opacidad sutil para que actúe como marca de agua blanca */
  mix-blend-mode: overlay;
  background-repeat: no-repeat;
  background-size: contain;
  z-index: 1; /* Por debajo de las tarjetas y el texto */
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
}
.porque-participar-section .shape-top-left {
  top: 40px;
  left: -20px;
  width: 110px;
  height: 220px;
  background-image: url('../img/caja_1.svg');
  transform: rotate(-8deg); /* Inclinación dinámica hacia la izquierda */
}

.porque-participar-section .shape-top-center {
  top: 20px;
  left: 35%;
  width: 140px;
  height: 70px;
  background-image: url('../img/caja_3.svg');
  transform: rotate(5deg); /* Leve rotación horaria */
}

.porque-participar-section .shape-top-right {
  top: 60px;
  right: 20px;
  width: 180px;
  height: 90px;
  background-image: url('../img/caja_2.svg');
  transform: rotate(6deg);
}

.porque-participar-section .shape-bottom-left {
  bottom: 80px;
  left: 20px;
  width: 160px;
  height: 80px;
  background-image: url('../img/caja_2.svg');
  transform: rotate(-6deg);
}

.porque-participar-section .shape-bottom-center {
  bottom: 25px;
  left: 45%;
  width: 110px;
  height: 220px;
  background-image: url('../img/caja_1.svg');
  transform: rotate(12deg); /* Quiebre diagonal pronunciado estilo HUD */
}

.porque-participar-section .shape-bottom-right {
  bottom: 40px;
  right: -30px;
  width: 200px;
  height: 100px;
  background-image: url('../img/caja_3.svg');
  transform: rotate(-5deg);
}

/* Título de la sección adaptado a la tipografía STEM - Configuración Science Gothic Expanded Bold */
.porque-participar-section .porque-title {
  text-align: center;
  font-family: var(--font-heading);
  font-stretch: expanded;
  font-weight: 700;
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  text-transform: uppercase;
  color: var(--stem-bg-abisal);
  margin-bottom: 60px;
  letter-spacing: -0.5px;
  text-shadow: none;
  position: relative;
  z-index: 3;
}

/* Rejilla Distribuidora Horizontal en Escritorio */
.porque-participar-section .porque-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  max-width: 1200px;
  margin: 0 auto;
  align-items: stretch;
  position: relative;
  z-index: 3; /* Asegura que el grid esté por encima de los SVG decorativos */
}

/* --- TARJETA CON ESQUINA BISELADA ELÁSTICA (MOCKUP CAJA_1) --- */
.porque-participar-section .porque-item {
  background-color: var(--stem-bg-abisal); /* El fondo oscuro vuelve a ser 100% sólido */
  color: var(--stem-white);
  display: flex;
  flex-direction: column;
  height: 100%;
  box-sizing: border-box;
  
  /* PADDING REAL: Reemplaza el grosor que antes simulaba el 'border: 16px' */
  padding: 24px; 
  position: relative; 

  /* 1. CORTE POLIGONAL DE ESQUINAS: Corta las 4 esquinas a 16px exactamente en diagonal */
  clip-path: polygon(
    16px 0%, calc(100% - 16px) 0%, 
    100% 16px, 100% calc(100% - 16px), 
    calc(100% - 16px) 100%, 16px 100%, 
    0% calc(100% - 16px), 0% 16px
  );
  
  /* Limpiamos el border-image anterior que causaba el conflicto */
  border: none !important;
  border-image: none !important;
  
  will-change: transform;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), filter 0.3s ease;
}

/* 2. EL BORDE PERIMETRAL FINO: Lo creamos con un pseudo-elemento para que copie el corte exacto */
.porque-participar-section .porque-item::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  
  /* Grosor del borde perimetral (puedes cambiar a 1px o 2px según tu KV) */
  padding: 2px; 
  
  /* Se deja transparente en base general porque los gradientes se inyectan abajo por atributo */
  background: transparent; 
  
  /* Crea el efecto de borde recortando solo el área interna del contenedor */
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  
  /* Aplica el mismo calco de esquinas biseladas al borde */
  clip-path: polygon(
    16px 0%, calc(100% - 16px) 0%, 
    100% 16px, 100% calc(100% - 16px), 
    calc(100% - 16px) 100%, 16px 100%, 
    0% calc(100% - 16px), 0% 16px
  );
  
  pointer-events: none;
  z-index: 2;
  transition: background 0.3s ease;
}

/* --- ASIGNACIÓN DE GRADIENTES MULTICOLOR POR DEFECTO DESDE LA CARGA --- */
.porque-participar-section .porque-item[data-color="turquesa"]::before {
  background: linear-gradient(135deg, var(--stem-cyan-neon) 0%, rgba(223, 18, 149, 0.6) 100%);
}

.porque-participar-section .porque-item[data-color="purple"]::before {
  background: linear-gradient(135deg, var(--stem-magenta-neon) 0%, rgba(8, 224, 229, 0.6) 100%);
}

.porque-participar-section .porque-item[data-color="lime"]::before {
  background: linear-gradient(135deg, #c5eb24 0%, var(--stem-cyan-neon) 100%);
}

/* --- ADAPTACIÓN DE LOS HOVERS PARA EL BORDE CSS PURO --- */
.porque-participar-section .porque-item:hover {
  transform: translateY(-6px);
}

/* Mantener tus filtros de resplandor activos (se encienden sobre el borde ya pintado) */
.porque-participar-section .porque-item[data-color="turquesa"]:hover { filter: drop-shadow(0 8px 16px rgba(8, 224, 229, 0.35)); }
.porque-participar-section .porque-item[data-color="purple"]:hover { filter: drop-shadow(0 8px 16px rgba(223, 18, 149, 0.35)); }
.porque-participar-section .porque-item[data-color="lime"]:hover { filter: drop-shadow(0 8px 16px rgba(197, 235, 36, 0.35)); }


/* ==========================================================================
   ELEMENTOS INTERNOS (HEADER Y CONTENIDO EN DESKTOP)
   ========================================================================== */

/* Cabecera de la Tarjeta */
.porque-participar-section .porque-header {
  background: none;
  border: none;
  padding: 20px 15px 12px 15px;
  text-align: left;
  width: 100%;
  box-sizing: border-box;
  cursor: default; /* Comportamiento estático nativo en Desktop */
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

/* Títulos de los Beneficios en Alta Densidad */
.porque-participar-section .porque-header-title {
  font-family: var(--font-heading);
  font-stretch: normal;
  font-weight: 700;
  font-size: 1.25rem;
  line-height: 1.3;
  color: var(--stem-white);
  transition: color 0.3s ease;
}

/* Indicador de Apertura (Oculto nativamente en pantallas grandes) */
.porque-participar-section .porque-icon-toggle {
  display: none;
  font-size: 1.1rem;
  color: var(--stem-cyan-neon);
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  margin-top: 4px;
}

/* Bloque de Contenido de Texto */
.porque-participar-section .porque-content {
  padding: 0 15px 20px 15px;
  box-sizing: border-box;
  height: auto !important; /* Desplegado y fluido por defecto en Escritorio */
  opacity: 1 !important;
  overflow: visible !important;
}

/* Bajadas tipográficas utilizando Founders Grotesk de alta legibilidad */
.porque-participar-section .porque-content p {
  font-family: var(--font-body);
  font-size: 1.05rem;
  line-height: 1.65;
  color: var(--stem-white);
  margin: 0;
}

/* Cambio cromático táctico enfocado en hovers de escritorio */
.porque-participar-section .porque-item[data-color="turquesa"]:hover .porque-header-title { color: var(--stem-cyan-neon); }
.porque-participar-section .porque-item[data-color="purple"]:hover .porque-header-title { color: var(--stem-magenta-neon); }
.porque-participar-section .porque-item[data-color="lime"]:hover .porque-header-title { color: #c5eb24; }


/* ==========================================================================
   RESPONSIVE: SISTEMA DE ACORDEÓN TÁCTIL (MOBILE FIRST UX)
   ========================================================================== */
@media (max-width: 768px) {
  .porque-participar-section {
    padding: 60px 16px;
    /* Reducción proporcional del grid en dispositivos móviles */
    background-size: 16px 16px;
  }

  /* Colapso de la Rejilla a un solo bloque vertical */
  .porque-participar-section .porque-grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  /* La cabecera se transforma en un disparador interactivo para el pulgar */
  .porque-participar-section .porque-header {
    padding: 16px 12px;
    cursor: pointer;
    align-items: center;
  }

  .porque-participar-section .porque-header-title {
    font-size: 1.1rem;
    padding-right: 12px;
  }

  /* Habilitamos el ícono HUD del acordeón */
  .porque-participar-section .porque-icon-toggle {
    display: block;
  }

  /* Asignación de colores dinámicos al ícono según su categoría en móvil */
  .porque-participar-section .porque-item[data-color="turquesa"] .porque-icon-toggle { color: var(--stem-cyan-neon); }
  .porque-participar-section .porque-item[data-color="purple"] .porque-icon-toggle { color: var(--stem-magenta-neon); }
  .porque-participar-section .porque-item[data-color="lime"] .porque-icon-toggle { color: #c5eb24; }

  /* Mantenemos el gradiente visible en móvil de manera consistente */
  .porque-participar-section .porque-item.active[data-color="turquesa"]::before {
    background: linear-gradient(135deg, var(--stem-cyan-neon) 0%, rgba(223, 18, 149, 0.6) 100%);
  }
  .porque-participar-section .porque-item.active[data-color="purple"]::before {
    background: linear-gradient(135deg, var(--stem-magenta-neon) 0%, rgba(8, 224, 229, 0.6) 100%);
  }
  .porque-participar-section .porque-item.active[data-color="lime"]::before {
    background: linear-gradient(135deg, #c5eb24 0%, var(--stem-cyan-neon) 100%);
  }

  /* ESTADO COLAPSADO DE CONTROL DE ESPACIO (WPO / EVITA SALTOS DE CONTENIDO) */
  .porque-participar-section .porque-content {
    max-height: 0;
    overflow: hidden !important;
    padding: 0 12px !important;
    opacity: 0 !important;
    transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1), 
                padding 0.35s cubic-bezier(0.4, 0, 0.2, 1), 
                opacity 0.3s ease;
  }

  /* ESTADO REVELADO / ACTIVO DESDE TU SCRIPT JAVASCRIPT */
  .porque-participar-section .porque-item.active {
    transform: scale(1.01);
  }

  .porque-participar-section .porque-item.active .porque-content {
    max-height: 200px; /* Cubre holgadamente el volumen del párrafo sin clipping */
    padding-bottom: 20px !important;
    opacity: 1 !important;
  }

  /* Rotación del indicador HUD */
  .porque-participar-section .porque-item.active .porque-icon-toggle {
    transform: rotate(180deg);
  }

  /* Iluminación fija de bordes en móvil solo cuando el acordeón está activo */
  .porque-participar-section .porque-item.active[data-color="turquesa"] { filter: drop-shadow(0 4px 8px rgba(8, 224, 229, 0.25)); }
  .porque-participar-section .porque-item.active[data-color="purple"] { filter: drop-shadow(0 4px 8px rgba(223, 18, 149, 0.25)); }
  .porque-participar-section .porque-item.active[data-color="lime"] { filter: drop-shadow(0 4px 8px rgba(197, 235, 36, 0.25)); }
  
  /* Desactivación de transformaciones pesadas en hover de pantalla móvil */
  .porque-participar-section .porque-item:hover {
    transform: none !important;
    filter: none !important;
  }
  .porque-participar-section .shape-top-left {
    width: 60px;
    height: 120px;
    top: 20px;
  }
  .porque-participar-section .shape-top-center {
    display: none; /* Se oculta en móvil para dejar limpio el espacio del título */
  }
  .porque-participar-section .shape-top-right {
    width: 100px;
    height: 50px;
    top: 30px;
    right: 5px;
  }
  .porque-participar-section .shape-bottom-left {
    width: 90px;
    height: 45px;
    bottom: 120px;
    left: 5px;
  }
  .porque-participar-section .shape-bottom-center {
    display: none; /* Se elimina para que no colisione con el último acordeón abierto */
  }
  .porque-participar-section .shape-bottom-right {
    width: 120px;
    height: 60px;
    bottom: 20px;
    right: -15px;
  }
}

/* ==========================================================================
   SECCIÓN 6: RETOS (STEM CHALLENGE CAROUSEL — INTERFAZ HUD SELECCIÓN)
   ========================================================================== */

.retos-section {
  position: relative;
  background-color: var(--stem-bg-abisal); /* Inmersión total oscura */
  padding: 95px 24px;
  overflow: hidden;
  border-bottom: 1px solid rgba(8, 224, 229, 0.1);
  z-index: 5;
}

/* --- Encabezado de la Sección (Estilo Torneo) --- */
.retos-section .retos-header {
  text-align: center;
  margin-bottom: 55px;
}

.retos-section .retos-main-title {
  font-family: var(--font-heading);
  font-stretch: expanded;
  font-weight: 700;
  font-size: clamp(2.2rem, 5vw, 4rem);
  color: var(--stem-white);
  line-height: 1;
  margin-bottom: 12px;
  letter-spacing: -0.5px;
  text-shadow: var(--glow-cyan);
}

.retos-section .retos-subtitle {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: clamp(1.15rem, 2.5vw, 1.7rem);
  color: var(--stem-magenta-neon);
  text-transform: uppercase;
  margin-bottom: 8px;
  line-height: 1.2;
  letter-spacing: 0.5px;
}

.retos-section .retos-tagline {
  font-family: var(--font-body);
  font-size: clamp(0.95rem, 1.8vw, 1.25rem);
  color: var(--stem-white);
  margin: 0;
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* --- Envoltorio Técnico del Carrusel --- */
.retos-section .retos-carousel-wrapper {
  position: relative;
  max-width: 1200px;
  margin: 0 auto;
}

/* --- Tira Deslizable (Flex Layout Acelerado) --- */
.retos-section .retos-grid {
  display: flex;
  gap: 24px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding: 20px 10px 45px 10px; /* Margen inferior holgado previene recortes de sombras glow */
  scrollbar-width: none; /* Firefox */
  -webkit-overflow-scrolling: touch; /* Desplazamiento inercial suave iOS */
  will-change: transform;
}

.retos-section .retos-grid::-webkit-scrollbar {
  display: none; /* Chrome / Safari */
}

/* --- TARJETA DE RETO (SISTEMA BISELADO ELÁSTICO CAJA_1) --- */
.retos-section .reto-card {
  flex: 0 0 calc(33.333% - 16px); /* 3 Tarjetas milimétricas exactas en Desktop */
  scroll-snap-align: start;
  background-color: rgba(13, 22, 47, 0.9);
  color: var(--stem-white);
  padding: 40px 28px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  box-sizing: border-box;  

  border: 14px solid transparent;
  border-image: url('../img/caja_1.svg') 28 fill stretch;
  
  /* Suavizado óptico anti-aliasing */
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
  
  /* Desactivamos las rotaciones estáticas Pop Art para dar paso a un HUD lineal limpio */
  transform: none !important;
  transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1), filter 0.3s ease;
  will-change: transform;
}

/* Efecto de Selección Hover (Iluminación Variable por Data-Color en Parte 2) */
.retos-section .reto-card:hover {
  transform: translateY(-8px) scale(1.01) !important;
  z-index: 5;
}
/* ==========================================================================
   ELEMENTOS INTERNOS DE LA TARJETA (SLOTS E IDENTIDADES)
   ========================================================================== */

/* Contenedor del Ícono (Slot de Armamento / Hardware) */
.retos-section .reto-icon-wrap {
  width: 76px;
  height: 76px;
  background-color: rgba(8, 22, 53, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 24px;
  transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1), border-color 0.3s ease, box-shadow 0.3s ease;
}

/* Feedback de Brillo en los Íconos (Slot Digital) al pasar el cursor por la tarjeta */
.retos-section .reto-card[data-color="cyan"]:hover .reto-icon-wrap   { box-shadow: var(--glow-cyan); }
.retos-section .reto-card[data-color="purple"]:hover .reto-icon-wrap { box-shadow: var(--glow-magenta); }
.retos-section .reto-card[data-color="yellow"]:hover .reto-icon-wrap { box-shadow: 0 0 12px #ffcc00; }
.retos-section .reto-card[data-color="lime"]:hover .reto-icon-wrap   { box-shadow: 0 0 12px #c5eb24; }
.retos-section .reto-card[data-color="orange"]:hover .reto-icon-wrap { box-shadow: 0 0 12px #ff6b35; }
.retos-section .reto-card[data-color="blue"]:hover .reto-icon-wrap   { box-shadow: 0 0 12px var(--stem-cyan-medium); }

.retos-section .reto-card:hover .reto-icon-wrap {
  transform: scale(1.06);
}

.retos-section .reto-icon-wrap i {
  font-size: 48px;
  color: var(--stem-white);
}

/* --- TIPOGRAFÍAS HUD --- */
.retos-section .reto-number {
  font-family: var(--font-heading);
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--stem-white);
  margin-bottom: 4px;
  letter-spacing: 1px;
}

.retos-section .reto-career {
  font-family: var(--font-heading);
  font-size: 1.4rem;
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: 22px;
  letter-spacing: -0.3px;
  text-transform: uppercase;
}

/* --- MAPEADO CROMÁTICO DE LAS INGENIERÍAS (KV ACTUALIZADO) --- */
.retos-section .reto-card[data-color="cyan"] .reto-career    { color: var(--stem-cyan-neon); }
.retos-section .reto-card[data-color="purple"] .reto-career  { color: var(--stem-magenta-neon); }
.retos-section .reto-card[data-color="yellow"] .reto-career  { color: #ffcc00; }
.retos-section .reto-card[data-color="lime"] .reto-career    { color: #c5eb24; }
.retos-section .reto-card[data-color="orange"] .reto-career  { color: #ff6b35; }
.retos-section .reto-card[data-color="blue"] .reto-career    { color: var(--stem-cyan-light); }

/* Feedback de Brillo en Hover según su Data-Color */
.retos-section .reto-card[data-color="cyan"]:hover   { filter: drop-shadow(0 0 12px rgba(8, 224, 229, 0.45)); }
.retos-section .reto-card[data-color="purple"]:hover { filter: drop-shadow(0 0 12px rgba(244, 27, 170, 0.45)); }
.retos-section .reto-card[data-color="yellow"]:hover { filter: drop-shadow(0 0 12px rgba(255, 204, 0, 0.35)); }
.retos-section .reto-card[data-color="lime"]:hover   { filter: drop-shadow(0 0 12px rgba(197, 235, 36, 0.45)); }
.retos-section .reto-card[data-color="orange"]:hover { filter: drop-shadow(0 0 12px rgba(255, 107, 53, 0.45)); }
.retos-section .reto-card[data-color="blue"]:hover   { filter: drop-shadow(0 0 12px rgba(107, 240, 245, 0.45)); }

.retos-section .reto-desc {
  font-family: var(--font-body);
  font-size: 1.05rem;
  line-height: 1.65;
  color: var(--stem-white);
  margin: 0;
}

/* --- BLOQUE DE DESCARGA (RETO 2: CIBERSEGURIDAD) --- */
.retos-section .reto-callaction {
  display: block;
  font-family: var(--font-body);
  font-size: 0.8rem;
  color: var(--stem-white);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-top: auto; /* Empuja el call to action al fondo de la tarjeta */
  padding-top: 20px;
}

.retos-section .reto-download {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--stem-cyan-neon);
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  transition: color 0.2s ease;
}

.retos-section .reto-download i {
  font-size: 0.8rem;
  transition: transform 0.2s ease;
}

.retos-section .reto-download:hover {
  color: var(--stem-white);
}

.retos-section .reto-download:hover i {
  transform: translateY(3px);
}

/* ==========================================================================
   CONTROLES DE NAVEGACIÓN Y ACCIONES GENERALES (INTERFAZ HUD)
   ========================================================================== */

/* Flechas de Navegación del Carrusel */
.retos-section .retos-nav-controls {
  display: flex;
  justify-content: center;
  gap: 20px;
}

.retos-section .retos-nav-btn {
  width: 48px;
  height: 48px;
  background-color: transparent;
  border: 1px solid rgba(8, 224, 229, 0.3);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--stem-cyan-neon);
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.retos-section .retos-nav-btn:hover {
  background-color: rgba(8, 224, 229, 0.1);
  border-color: var(--stem-cyan-neon);
  box-shadow: var(--glow-cyan);
}

.retos-section .retos-nav-btn:active {
  transform: scale(0.95);
}

.retos-section .retos-nav-btn i {
  font-size: 16px;
}

/* Botón Descargar Bases Inferior */
.retos-section .retos-action-wrap {
  text-align: center;
  margin-top: 40px;
}

.retos-section .retos-btn-bases {
  background-color: var(--stem-cyan-neon);
  border: none;
  color: var(--stem-bg-abisal);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.8rem;
  padding: 14px 40px;
  border-radius: 100px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  box-shadow: var(--glow-cyan);
  text-transform: uppercase;
  letter-spacing: 0.3px;
  transition: transform 0.25s ease, background-color 0.25s ease, box-shadow 0.25s ease;
}

.retos-section .retos-btn-bases:hover {
  transform: translateY(-2px);
  background-color: var(--stem-white);
  box-shadow: 0 8px 25px rgba(255, 255, 255, 0.25);
}

.retos-section .retos-btn-bases i {
  font-size: 0.9rem;
  transition: transform 0.25s ease;
}

.retos-section .retos-btn-bases:hover i {
  transform: translateY(2px);
}

/* ==========================================================================
   RESPONSIVE DESIGN (MEDIA QUERIES)
   ========================================================================== */

/* Tablets y Laptops Medianas (2 Tarjetas completas a la vista) */
@media (max-width: 992px) {
  .retos-section .reto-card {
    flex: 0 0 calc(50% - 12px);
  }
  .retos-section .retos-header {
    margin-bottom: 40px;
  }
}

/* Pantallas Móviles (Efecto Signifier: 1 Tarjeta entera + 15% Fraccional) */
@media (max-width: 768px) {
  .retos-section {
    padding: 65px 16px;
  }

  .retos-section .retos-grid {
    gap: 16px;
    padding-left: 4px;
    padding-right: 4px;
  }

  /* CRÍTICO: Indica de manera implícita al pulgar que hay más contenido a la derecha */
  .retos-section .reto-card {
    flex: 0 0 83%; /* Equivale al Signifier visual exacto en viewport móvil */
    padding: 35px 20px;
  }

  .retos-section .reto-career {
    font-size: 1.25rem;
    margin-bottom: 16px;
  }

  /* Botón de bases expandido para simplificar usabilidad móvil */
  .retos-section .retos-btn-bases {
    width: 100%;
    max-width: 400px;
    justify-content: center;
    font-size: 0.7rem;
    padding: 14px 20px;
  } 
  
  /* Anulamos elevaciones táctiles invasivas */
  .retos-section .reto-card:hover {
    transform: none !important;
  }
}


/* ==========================================================================
   SECCIÓN 7: PASOS — PROCESO DE INSCRIPCIÓN (INTERFAZ DE MISIÓN DE 3 ETAPAS)
   ========================================================================== */

.pasos-section {
  padding: 95px 24px;
  background-color: var(--stem-cyan-medium);
  position: relative;
  border-bottom: 2px solid rgba(8, 22, 53, 0.05);
  z-index: 5;

  /* Trama de cuadrícula técnica (Grid Líneo) para mantener el lenguaje visual de ingeniería */
  background-image: 
    linear-gradient(rgba(8, 22, 53, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(8, 22, 53, 0.03) 1px, transparent 1px);
  background-size: 20px 20px;
  background-position: center top;
}

/* --- Encabezado de Misión / Quest --- */
.pasos-section .pasos-header {
  text-align: center;
  max-width: 850px;
  margin: 0 auto 60px auto;
}

.pasos-section .pasos-main-title {
  font-family: var(--font-heading);
  font-stretch: expanded;
  font-weight: 700;
  font-size: clamp(2rem, 4.5vw, 2.8rem);
  color: var(--stem-bg-abisal); /* Máximo anclaje visual Science Gothic Expanded */
  line-height: 1.1;
  margin-bottom: 16px;
  letter-spacing: -0.5px;
}

.pasos-section .pasos-subtitle {
  font-family: var(--font-body);
  font-size: clamp(1.05rem, 2vw, 1.25rem);
  color: #2a3b50; /* Gris pizarra oscuro (Founders Grotesk) para perfecta legibilidad */
  line-height: 1.5;
  margin: 0;
}

/* --- Contenedor del Stack (Filas Coplanares Anchas en Desktop) --- */
.pasos-section .pasos-stack {
  max-width: 1050px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* --- FILA INDIVIDUAL (ESTRUCTURA POLIGONAL ELÁSTICA CAJA_3) --- */
.pasos-section .paso-item {
  background-color: var(--stem-bg-abisal); /* Chasis oscuro de hardware para contraste superlativo */
  color: var(--stem-white);
  position: relative;
  display: flex;
  flex-direction: row; /* Apilamiento horizontal nativo en Desktop */
  align-items: stretch;
  box-sizing: border-box;  

  /* PADDING REAL: Reemplaza el grosor que antes simulaba el 'border: 16px' */
  padding: 8px;

  /* 1. CORTE POLIGONAL DE ESQUINAS: Corta las 4 esquinas a 16px exactamente en diagonal */
  clip-path: polygon(
    16px 0%, calc(100% - 16px) 0%, 
    100% 16px, 100% calc(100% - 16px), 
    calc(100% - 16px) 100%, 16px 100%, 
    0% calc(100% - 16px), 0% 16px
  );
  
  /* Limpiamos el border-image anterior que causaba el conflicto */
  border: none !important;
  border-image: none !important;
  
  will-change: transform;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), filter 0.3s ease;
}
.pasos-section .paso-item::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  
  /* Grosor del borde perimetral */
  padding: 2px; 
  
  /* Se deja transparente en la base porque se inyecta de forma intensa abajo por atributo */
  background: transparent; 
  
  /* Crea el efecto de borde recortando solo el área interna del contenedor */
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  
  /* Aplica el mismo calco de esquinas biseladas al borde */
  clip-path: polygon(
    16px 0%, calc(100% - 16px) 0%, 
    100% 16px, 100% calc(100% - 16px), 
    calc(100% - 16px) 100%, 16px 100%, 
    0% calc(100% - 16px), 0% 16px
  );
  
  pointer-events: none;
  z-index: 2;
  transition: background 0.3s ease;
}

/* Efectos de Elevación Limpia y Halo Gamer basados en el data-color */
.pasos-section .paso-item:hover {
  transform: translateY(-4px);
}

/* --- ASIGNACIÓN DE GRADIENTES MULTICOLOR POR DEFECTO DESDE LA CARGA (REPOSO) --- */
.pasos-section .paso-item[data-color="turquesa"]::before {
  background: linear-gradient(135deg, var(--stem-cyan-neon) 0%, rgba(223, 18, 149, 0.6) 100%);
}

.pasos-section .paso-item[data-color="purple"]::before {
  background: linear-gradient(135deg, var(--stem-magenta-neon) 0%, rgba(8, 224, 229, 0.6) 100%);
}

.pasos-section .paso-item[data-color="lime"]::before {
  background: linear-gradient(135deg, #c5eb24 0%, var(--stem-cyan-neon) 100%);
}

/* --- EFECTOS HOVER OPTIMIZADOS (RESPLANDOR ACTIVO SOBRE EL BORDE YA PINTADO) --- */
.pasos-section .paso-item:hover {
  transform: translateY(-4px);
}

.pasos-section .paso-item[data-color="turquesa"]:hover { filter: drop-shadow(0 8px 20px rgba(8, 224, 229, 0.35)); }
.pasos-section .paso-item[data-color="purple"]:hover   { filter: drop-shadow(0 8px 20px rgba(223, 18, 149, 0.35)); }
.pasos-section .paso-item[data-color="lime"]:hover     { filter: drop-shadow(0 8px 20px rgba(197, 235, 36, 0.35)); }

/* ==========================================================================
   ESTRUCTURA INTERNA Y SEGMENTACIÓN EN DESKTOP
   ========================================================================== */

/* Cabecera del Paso (Bloque de Control Izquierdo en Desktop) */
.pasos-section .paso-header {
  background: none;
  border: none;
  padding: 20px 25px;
  display: flex;
  align-items: center;
  gap: 28px;
  text-align: left;
  cursor: default; /* Estático en Desktop */
  flex-shrink: 0;
  box-sizing: border-box;
}

/* Indicador Numérico Gigante (Estilo HUD con Micro-Resplandor de Identidad) */
.pasos-section .paso-num-badge {
  font-family: var(--font-heading);
  font-size: clamp(3rem, 5vw, 4.2rem);
  font-weight: 700;
  line-height: 0.8;
  user-select: none;
}

/* Colores Dinámicos del Número e Inyección de Filtro Glow según su Etapa */
.pasos-section .paso-item[data-color="turquesa"] .paso-num-badge { 
  color: var(--stem-cyan-neon); 
  text-shadow: 0 0 8px rgba(8, 224, 229, 0.5);
}
.pasos-section .paso-item[data-color="purple"] .paso-num-badge   { 
  color: var(--stem-magenta-neon); 
  text-shadow: 0 0 8px rgba(223, 18, 149, 0.5);
}
.pasos-section .paso-item[data-color="lime"] .paso-num-badge     { 
  color: #c5eb24; 
  text-shadow: 0 0 8px rgba(197, 235, 36, 0.5);
}

/* Título de la Etapa de Inscripción */
.pasos-section .paso-header-title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: clamp(1.15rem, 2vw, 1.4rem);
  color: var(--stem-white);
  line-height: 1.2;
  letter-spacing: 0.5px;
  max-width: 300px;
}

/* Flecha de Acordeón (Oculta nativamente en Escritorio) */
.pasos-section .paso-icon-toggle {
  display: none;
  font-size: 1.1rem;
  color: var(--stem-white);
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

/* --- Bloque de Instrucciones (Lado Derecho en Desktop) --- */
.pasos-section .paso-content {
  flex-grow: 1;
  display: flex;
  align-items: center;
  padding: 20px 30px 20px 25px;
  border-left: 1px dashed rgba(255, 255, 255, 0.15); /* Separador técnico sutil */
  height: auto !important; /* Mantiene visibilidad fija en Desktop */
  opacity: 1 !important;
  overflow: visible !important;
  box-sizing: border-box;
}

.pasos-section .paso-content-inner {
  width: 100%;
}

.pasos-section .paso-content p {
  font-family: var(--font-body);
  font-size: 1.05rem;
  line-height: 1.65;
  color: var(--stem-white);
  margin: 0;
}

.pasos-section .paso-content strong {
  font-family: var(--font-heading);
  font-weight: 700;
  color: var(--stem-white);
}

/* Lista de Preguntas del Filtro (Paso 2) */
.pasos-section .paso-questions-list {
  margin: 12px 0 0 0;
  padding-left: 20px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.pasos-section .paso-questions-list li {
  font-family: var(--font-body);
  font-size: 1.05rem;
  line-height: 1.65;
  color: var(--stem-white);
  list-style-type: square;
}

/* --- Footer Informativo de la Sección --- */
.pasos-section .pasos-footer {
  text-align: center;
  margin-top: 50px;
}

.pasos-section .pasos-reminder {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: clamp(1.15rem, 2.5vw, 1.45rem);
  color: var(--stem-bg-abisal); /* Texto de urgencia anclado al azul abisal */
  margin: 0 0 8px 0;
}

.pasos-section .pasos-disclaimer {
  font-family: var(--font-body);
  font-size: 1.05rem;
  color: #2a3b50; /* Gris pizarra oscuro con opacidad controlada */
  opacity: 0.85;
}

/* ==========================================================================
   RESPONSIVE DESIGN: COLAPSO A ACORDEÓN TÁCTIL (PREVIENE SCROLL FATIGUE)
   ========================================================================== */
@media (max-width: 768px) {
  .pasos-section {
    padding: 65px 16px;
    background-size: 16px 16px; /* Ajuste métrico de grilla en móvil */
  }

  .pasos-section .pasos-header {
    margin-bottom: 40px;
  }

  .pasos-section .pasos-stack {
    gap: 14px;
  }

  /* Transformación a bloque vertical rígido */
  .pasos-section .paso-item {
    flex-direction: column;
    align-items: stretch;
  }

  /* La cabecera se convierte en el disparador interactivo táctil */
  .pasos-section .paso-header {
    width: 100%;
    padding: 16px;
    cursor: pointer;
    justify-content: space-between;
    gap: 16px;
    z-index: 2;
  }

  .pasos-section .paso-num-badge {
    font-size: 2.6rem;
  }

  .pasos-section .paso-header-title {
    font-size: 1.05rem;
    max-width: 65%;
  }

  /* Activamos el indicador visual del acordeón */
  .pasos-section .paso-icon-toggle {
    display: block;
  }

  /* --- Transición de Altura Dinámica de Hardware --- */
  .pasos-section .paso-content {
    border-left: none;
    border-top: 1px dashed rgba(255, 255, 255, 0.12);
    padding: 0 16px !important;
    max-height: 0;
    overflow: hidden !important;
    opacity: 0 !important;
    transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1), 
                padding 0.35s cubic-bezier(0.4, 0, 0.2, 1), 
                opacity 0.3s ease;
  }

  /* --- Estado Revelado / Activo desde tu JS --- */
  .pasos-section .paso-item.active {
    transform: scale(1.01);
  }

  .pasos-section .paso-item.active .paso-content {
    max-height: 400px; /* Margen adaptado ópticamente al volumen de la lista del paso 2 */
    padding-top: 16px !important;
    padding-bottom: 20px !important;
    opacity: 1 !important;
  }

  /* Rotación HUD del Chevron */
  .pasos-section .paso-item.active .paso-icon-toggle {
    transform: rotate(180deg);
    color: var(--stem-white);
  }
  
  .pasos-section .paso-item.active[data-color="turquesa"]::before {
  background: linear-gradient(135deg, var(--stem-cyan-neon) 0%, rgba(223, 18, 149, 0.6) 100%);
}
.pasos-section .paso-item.active[data-color="purple"]::before   {
  background: linear-gradient(135deg, var(--stem-magenta-neon) 0%, rgba(8, 224, 229, 0.6) 100%);
}
.pasos-section .paso-item.active[data-color="lime"]::before     {
  background: linear-gradient(135deg, #c5eb24 0%, var(--stem-cyan-neon) 100%);
} 

  .pasos-section .paso-questions-list {
    margin-top: 10px;
    gap: 5px;
  }

  .pasos-section .paso-questions-list li {
    font-size: 0.9rem;
  }

  .pasos-section .pasos-footer {
    margin-top: 35px;
  }
  
  /* Anulamos transformaciones hover en pantallas touch */
  .pasos-section .paso-item:hover {
    transform: none !important;
    filter: none !important;
  }
}

/* ==========================================================================
   SECCIÓN 8: PREMIOS (MOCKUP INTERACTIVO HÍBRIDO 3D - DESKTOP/MOBILE)
   ========================================================================== */

.premios-section {
  position: relative;
  background-color: var(--stem-bg-abisal); /* Inmersión total oscura */
  color: var(--stem-white);
  padding: 95px 24px;
  overflow: hidden;
  border-bottom: 1px solid rgba(8, 224, 229, 0.1);
  z-index: 5;
}

/* --- Encabezado y Descriptores --- */
.premios-section .premios-header {
  text-align: center;
  margin-bottom: 15px;
}

.premios-section .premios-main-title {
  font-family: var(--font-heading);
  font-stretch: expanded;
  font-weight: 700;
  font-size: clamp(2.2rem, 4.5vw, 3.8rem);
  color: var(--stem-white);
  line-height: 1.1;
  margin: 0;
  text-shadow: var(--glow-cyan);
}

.premios-section .premios-intro {
  text-align: center;
  max-width: 750px;
  margin: 0 auto 45px auto;
}

.premios-section .premios-desc {
  font-family: var(--font-body);
  font-size: 1.05rem;
  line-height: 1.65;
  color: var(--stem-white);
  margin: 0;
}

/* --- INTERRUPTORES ASÍNCRONOS (TABS HUD) --- */
.premios-section .premios-tabs-container {
  display: flex;
  justify-content: center;
  margin-bottom: 50px;
}

.premios-section .tabs-navegacion {
  display: flex;
  justify-content: center;
  gap: 16px;
  width: 100%;
  max-width: 600px;
}

.premios-section .btn-tab {
  flex: 1;
  background-color: rgba(13, 22, 47, 0.8);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: var(--stem-white);
  padding: 14px 28px;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: clamp(0.9rem, 1.2vw, 1.05rem);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-radius: 100px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.premios-section .indicador-neon {
  width: 8px;
  height: 8px;
  background-color: rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  transition: all 0.25s ease;
}

/* Hover e Interacciones */
.premios-section .btn-tab:hover {
  color: var(--stem-white);
  border-color: rgba(255, 255, 255, 0.4);
  background-color: rgba(13, 22, 47, 0.95);
}

/* Estado Activo */
.premios-section .btn-tab.active {
  background-color: rgba(8, 224, 229, 0.08);
  color: var(--stem-cyan-neon);
  border-color: var(--stem-cyan-neon);
  box-shadow: inset 0 0 10px rgba(8, 224, 229, 0.15);
}

.premios-section .btn-tab.active .indicador-neon {
  background-color: var(--stem-cyan-neon);
  box-shadow: var(--glow-cyan);
}

/* --- ESCENARIO FÍSICO 3D (PERSPECTIVA) --- */
.premios-section .escenario-3d {
  position: relative;
  width: 100%;
  max-width: 1050px; 
  margin: 0 auto;
  perspective: 1800px; /* Profundidad tridimensional calibrada */
}

.premios-section .panel-contenido {
  display: none;
  width: 100%;
}

.premios-section .panel-contenido.active {
  display: block;
  animation: entradaPremioHorizontal 0.5s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}

@keyframes entradaPremioHorizontal {
  from { opacity: 0; transform: translateZ(-50px) scale(0.97); }
  to { opacity: 1; transform: translateZ(0) scale(1); }
}

/* ==========================================================================
   MOCKUP SMARTPHONE - VISTA DESKTOP (LANDSCAPE DEFAULT 16:9)
   ========================================================================== */
.premios-section .smartphone-landscape-3d {
  position: relative;
  width: 100%;
  background-color: #090f21;
  border: 4px solid #1c2642;
  border-radius: 44px;
  padding: 16px 20px 16px 48px; /* Espacio para Notch a la izquierda en Desktop */
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.6), 
              inset 0 0 2px rgba(255, 255, 255, 0.2);
  cursor: grab;
  transform-style: preserve-3d;
  will-change: transform;
  transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}

.premios-section .smartphone-landscape-3d:active {
  cursor: grabbing;
}

/* Hardware Físico: Notch Lateral (Desktop) */
.premios-section .smartphone-notch-side {
  position: absolute;
  top: 50%;
  left: 20px;
  transform: translateY(-50%) translateZ(35px);
  display: flex;
  flex-direction: column; /* Alineación vertical al estar echado */
  align-items: center;
  gap: 14px;
  z-index: 10;
  user-select: none;
}

.premios-section .smartphone-speaker {
  width: 5px;
  height: 60px;
  background-color: #040812;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.premios-section .smartphone-camera {
  width: 11px;
  height: 11px;
  background-color: #03060d;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.15);
  box-shadow: inset 0 0 3px rgba(8, 224, 229, 0.3);
}

/* Pantalla del Celular */
.premios-section .smartphone-screen {
  position: relative;
  width: 100%;
  border-radius: 28px;
  overflow: hidden;
  border: 2px solid #040812;
  background-color: #0c142b;
  transform-style: preserve-3d;
  aspect-ratio: 16 / 9; /* Proporción Desktop */
}

.premios-section .smartphone-screen picture {
  display: block;
  width: 100%;
  height: 100%;
}

/* Imagen Interna con Despegue 3D (Paralaje) */
.premios-section .imagen-premio-3d {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  transform: translateZ(30px) scale(0.98);
  will-change: transform;
  transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}

/* Reflejo del Cristal */
.premios-section .capa-brillo {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.08) 0%, transparent 50%);
  z-index: 5;
  pointer-events: none;
  mix-blend-mode: overlay;
  border-radius: 44px;
  will-change: transform;
}
/* --- ENLACE DE TÉRMINOS Y CONDICIONES (HUD STYLE) --- */
.premios-section .premios-legal-wrap {
  width: 100%;
  text-align: center;
  margin-top: 50px; /* Separación óptima desde la base del smartphone mockup */
  position: relative;
  z-index: 10;
}

.premios-section .link-terminos-pdf {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 400;
  color: var(--stem-white);
  text-decoration: none;
  letter-spacing: 0.5px;
  padding: 8px 16px;
  border-radius: var(--radius-sm, 4px);
  transition: all 0.3s ease;
}

.premios-section .link-terminos-pdf i {
  color: var(--stem-white);
  font-size: 1rem;
  transition: all 0.3s ease;
}

/* Estado Hover e Interacción */
.premios-section .link-terminos-pdf:hover {
  color: var(--stem-cyan-neon); /* Encendido neón al pasar el cursor */
  text-shadow: 0 0 8px rgba(8, 224, 229, 0.6);
}

.premios-section .link-terminos-pdf:hover i {
  color: var(--stem-cyan-neon);
  transform: scale(1.1);
}

/* ==========================================================================
   RESPONSIVE DESIGN Y TRANSFORMACIÓN PORTRAIT (VISTA MÓVIL)
   ========================================================================== */

@media (max-width: 992px) {
  .premios-section .premios-tabs-container { margin-bottom: 35px; }
  .premios-section .tabs-navegacion { gap: 12px; max-width: 520px; }
  .premios-section .btn-tab { padding: 12px 22px; font-size: 0.95rem; }
}

@media (max-width: 768px) {
   .premios-section .premios-legal-wrap {
    margin-top: 40px; /* Compactamos el espacio en pantallas táctiles */
  }
  
  .premios-section .link-terminos-pdf {
    font-size: 0.85rem; /* Ajuste fino de lectura móvil */
  }  
  .premios-section {
    padding: 65px 16px;
  }
  /* ------------------------------------------------------------------------
     RECONFIGURACIÓN: El Smartphone se para (Pasa de Landscape a Portrait)
     ------------------------------------------------------------------------ */
  .premios-section .smartphone-landscape-3d {
    max-width: 340px; /* Ancho ideal emulado de un teléfono en mano */
    margin: 0 auto;
    padding: 46px 14px 16px 14px; /* Cambia espacio técnico de Notch hacia ARRIBA */
    border-radius: 36px;
    border-width: 3.5px;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.5);
    
    /* WPO: Desactivamos inclinaciones complejas por puntero en pantallas touch */
    transform: none !important; 
  }

  /* El Notch pasa a la parte superior central */
  .premios-section .smartphone-notch-side {
    top: 16px;
    left: 50%;
    transform: translateX(-50%) translateZ(35px);
    flex-direction: row; /* Alineación horizontal del hardware (tipo iPhone/Samsung) */
    gap: 12px;
  }

  .premios-section .smartphone-speaker {
    width: 50px; /* Parlante horizontal en móvil */
    height: 4px;
  }

  .premios-section .smartphone-camera {
    width: 8px;
    height: 8px;
  }

  /* La pantalla adopta la relación vertical nativa */
  .premios-section .smartphone-screen {
    border-radius: 22px;
    aspect-ratio: 9 / 16; /* Forzado vertical */
  }

  .premios-section .capa-brillo {
    border-radius: 36px;
  }

  /* Animación optimizada de escala para la imagen vertical activa */
  .premios-section .panel-contenido.active .imagen-premio-3d {
    animation: zoomFocalMovil 0.4s cubic-bezier(0.25, 1, 0.5, 1) forwards;
  }
}

@media (max-width: 480px) {
  .premios-section .btn-tab {
	  font-size: 0.7rem;
  }
  .premios-section .indicador-neon {
	width: 5px;
    height: 5px;
  }
  .premios-section .btn-tab {
	  padding: 6px 12px;
  }
}

@keyframes zoomFocalMovil {
  from { transform: scale(0.95) translateZ(0); }
  to { transform: scale(1) translateZ(15px); }
}

/* MODO SEGURO: Accesibilidad */
@media (prefers-reduced-motion: reduce) {
  .premios-section .smartphone-landscape-3d, 
  .premios-section .imagen-premio-3d, 
  .premios-section .capa-brillo {
    transform: none !important;
    transition: none !important;
  }
  .premios-section .panel-contenido.active,
  .premios-section .panel-contenido.active .imagen-premio-3d { 
    animation: none !important; 
  }
}


/* ==========================================================================
   SECCIÓN 9: ¿POR QUÉ ELEGIR? (VENTAJAS INSTITUCIONALES CON CONTRASTE HUD)
   ========================================================================== */
.elegir-section {
  padding: 95px 24px;
  background-color: var(--stem-cyan-medium); /* Gris acero platino: reemplazo del blanco clínico */
  position: relative;
  overflow: hidden;
  border-top: 2px solid rgba(8, 22, 53, 0.08);
  z-index: 5;

  /* Trama técnica (Grid Líneo) para justificar el fondo claro temáticamente */
  background-image: 
    linear-gradient(rgba(8, 22, 53, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(8, 22, 53, 0.03) 1px, transparent 1px);
  background-size: 20px 20px;
}

/* --- Encabezado Institucional --- */
.elegir-section .elegir-header {
  text-align: center;
  margin-bottom: 55px;
}

.elegir-section .elegir-main-title {
  font-family: var(--font-heading);
  font-stretch: expanded;
  font-weight: 700;
  font-size: clamp(2.2rem, 4.5vw, 3.8rem);
  color: var(--stem-bg-abisal);
  line-height: 1.1;
  margin: 0;
  letter-spacing: -0.5px;
}

/* --- Envoltorio del Carrusel HUD --- */
.elegir-section .elegir-carousel-wrapper {
  position: relative;
  max-width: 1200px;
  margin: 0 auto;
}

/* --- Grid Desplazable (Inercia Fluida y Snap Nativo para WPO) --- */
.elegir-section .elegir-grid {
  display: flex;
  gap: 30px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding: 25px 15px 45px 15px;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.elegir-section .elegir-grid::-webkit-scrollbar {
  display: none;
}

.elegir-section .elegir-card {
  flex: 0 0 calc(33.333% - 20px);
  scroll-snap-align: start;
  background-color: var(--stem-bg-abisal);
  color: var(--stem-white);
  padding: 40px 28px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  
  /* 1. CORTE POLIGONAL DE ESQUINAS EXACTO A 16PX */
  clip-path: polygon(
    16px 0%, calc(100% - 16px) 0%, 
    100% 16px, 100% calc(100% - 16px), 
    calc(100% - 16px) 100%, 16px 100%, 
    0% calc(100% - 16px), 0% 16px
  );

  /* Eliminación absoluta de bordes basados en imágenes */
  border: none !important;
  border-image: none !important;
  
  will-change: transform;
  transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1), filter 0.3s ease;
}
.elegir-section .elegir-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  
  /* Grosor del borde */
  padding: 2px; 
  background: transparent; 
  
  /* Efecto de máscara inversa para recortar el interior */
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  
  /* Mismo calco de esquinas biseladas */
  clip-path: polygon(
    16px 0%, calc(100% - 16px) 0%, 
    100% 16px, 100% calc(100% - 16px), 
    calc(100% - 16px) 100%, 16px 100%, 
    0% calc(100% - 16px), 0% 16px
  );
  
  pointer-events: none;
  z-index: 2;
  transition: background 0.3s ease;
}

/* Inclinaciones Asimétricas Sutiles */
.elegir-section .elegir-card.rot-neg { transform: rotate(-1deg); }
.elegir-section .elegir-card.rot-pos { transform: rotate(1deg); }
.elegir-section .elegir-card.rot-neg-mid { transform: rotate(-0.5deg); }
.elegir-section .elegir-card.rot-pos-mid { transform: rotate(0.5deg); }

/* Interacción Hover */
.elegir-section .elegir-card:hover {
  transform: translateY(-8px) scale(1.02) rotate(0deg) !important;
  z-index: 5;
}

/* --- Envoltorio de Íconos HUD --- */
.elegir-section .elegir-icon-wrap {
  width: 80px;
  height: 80px; 
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 25px;
  transform: rotate(4deg);
  transition: all 0.3s ease;
}

.elegir-section .elegir-card:hover .elegir-icon-wrap {
  transform: rotate(-4deg) scale(1.05);
  border-color: var(--stem-cyan-neon);
  background-color: rgba(8, 224, 229, 0.08);
}

.elegir-section .elegir-icon-wrap i {
  font-size: 48px;
  color: var(--stem-white);
  transition: color 0.3s ease;
}

.elegir-section .elegir-card:hover .elegir-icon-wrap i {
  color: var(--stem-cyan-neon);
}

/* --- Tipografías (Founders Grotesk / Science Gothic) --- */
.elegir-section .elegir-card-title {
  font-family: var(--font-heading);
  font-size: 1.45rem;
  color: var(--stem-white);
  line-height: 1.2;
  margin: 0 0 16px 0;
  font-weight: 700;
}

.elegir-section .elegir-card-desc {
  font-family: var(--font-body);
  font-size: 1.05rem;
  line-height: 1.65;
  color: var(--stem-white);
  margin: 0;
}

/* --- ASIGNACIÓN DE GRADIENTES MULTICOLOR POR DEFECTO DESDE LA CARGA --- */
.elegir-section .elegir-card[data-color="turquesa"]::before {
  background: linear-gradient(135deg, #08e0e5 0%, rgba(168, 85, 247, 0.5) 100%);
}
.elegir-section .elegir-card[data-color="purple"]::before {
  background: linear-gradient(135deg, #a855f7 0%, rgba(8, 224, 229, 0.5) 100%);
}
.elegir-section .elegir-card[data-color="yellow"]::before {
  background: linear-gradient(135deg, #facc15 0%, rgba(249, 115, 22, 0.5) 100%);
}
.elegir-section .elegir-card[data-color="lime"]::before {
  background: linear-gradient(135deg, #84cc16 0%, rgba(8, 224, 229, 0.5) 100%);
}
.elegir-section .elegir-card[data-color="orange"]::before {
  background: linear-gradient(135deg, #f97316 0%, rgba(250, 204, 21, 0.5) 100%);
}
.elegir-section .elegir-card[data-color="blue"]::before {
  background: linear-gradient(135deg, #3b82f6 0%, rgba(8, 224, 229, 0.5) 100%);
}

/* --- INTERACCIÓN HOVER: EFECTO GLOW PERSONALIZADO --- */
.elegir-section .elegir-card[data-color="turquesa"]:hover { filter: drop-shadow(0 8px 20px rgba(8, 224, 229, 0.35)); }
.elegir-section .elegir-card[data-color="purple"]:hover   { filter: drop-shadow(0 8px 20px rgba(168, 85, 247, 0.35)); }
.elegir-section .elegir-card[data-color="yellow"]:hover   { filter: drop-shadow(0 8px 20px rgba(250, 204, 21, 0.35)); }
.elegir-section .elegir-card[data-color="lime"]:hover     { filter: drop-shadow(0 8px 20px rgba(132, 204, 22, 0.35)); }
.elegir-section .elegir-card[data-color="orange"]:hover   { filter: drop-shadow(0 8px 20px rgba(249, 115, 22, 0.35)); }
.elegir-section .elegir-card[data-color="blue"]:hover     { filter: drop-shadow(0 8px 20px rgba(59, 130, 246, 0.35)); }

/* --- Mapeo Dinámico de Colores de Acento Neon en Íconos --- */
.elegir-section .elegir-card[data-color="turquesa"]:hover .elegir-icon-wrap { border-color: #08e0e5; background-color: rgba(8, 224, 229, 0.1); }
.elegir-section .elegir-card[data-color="turquesa"] .elegir-icon-wrap i { color: #08e0e5; }

.elegir-section .elegir-card[data-color="purple"]:hover .elegir-icon-wrap { border-color: #a855f7; background-color: rgba(168, 85, 247, 0.1); }
.elegir-section .elegir-card[data-color="purple"] .elegir-icon-wrap i { color: #a855f7; }

.elegir-section .elegir-card[data-color="yellow"]:hover .elegir-icon-wrap { border-color: #facc15; background-color: rgba(250, 204, 21, 0.1); }
.elegir-section .elegir-card[data-color="yellow"] .elegir-icon-wrap i { color: #facc15; }

.elegir-section .elegir-card[data-color="lime"]:hover .elegir-icon-wrap { border-color: #84cc16; background-color: rgba(132, 204, 22, 0.1); }
.elegir-section .elegir-card[data-color="lime"] .elegir-icon-wrap i { color: #84cc16; }

.elegir-section .elegir-card[data-color="orange"]:hover .elegir-icon-wrap { border-color: #f97316; background-color: rgba(249, 115, 22, 0.1); }
.elegir-section .elegir-card[data-color="orange"] .elegir-icon-wrap i { color: #f97316; }

.elegir-section .elegir-card[data-color="blue"]:hover .elegir-icon-wrap { border-color: #3b82f6; background-color: rgba(59, 130, 246, 0.1); }
.elegir-section .elegir-card[data-color="blue"] .elegir-icon-wrap i { color: #3b82f6; }

/* --- Controles de Navegación: Adaptados al Estilo Homólogo de Retos --- */
.elegir-section .elegir-nav-controls {
  display: flex;
  justify-content: center;
  gap: 20px;
}

.elegir-section .elegir-nav-btn {
  width: 48px;
  height: 48px;
  background-color: var(--stem-bg-abisal); /* Fondo oscuro para contraste sobre el fondo cian claro */
  border: 1px solid rgba(8, 224, 229, 0.4); /* Borde cian sutil */
  border-radius: 50%; /* Circular perfecto */
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--stem-cyan-neon); /* Flecha cian neón */
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
.elegir-section .elegir-nav-btn::before,
.elegir-section .elegir-nav-btn::after {
  content: none !important;
}

/* Remoción de los corchetes inyectados antiguos que estorbaban el layout */
.elegir-section .elegir-nav-btn[aria-label="Tarjetas anteriores"]::before,
.elegir-section .elegir-nav-btn[aria-label="Tarjetas anteriores"]::after,
.elegir-section .elegir-nav-btn[aria-label="Siguientes tarjetas"]::before,
.elegir-section .elegir-nav-btn[aria-label="Siguientes tarjetas"]::after { 
  content: none !important; 
}

/* Estados Interactivos y Halo Gamer de Consistencia */
.elegir-section .elegir-nav-btn:hover {
  background-color: var(--stem-bg-abisal); /* Mantiene el fondo oscuro base */
  border-color: var(--stem-cyan-neon);
  box-shadow: var(--glow-cyan); /* Efecto Glow característico */
  filter: brightness(1.2); /* Sutil feedback de iluminación al pasar el mouse */
}

.elegir-section .elegir-nav-btn:active {
  transform: scale(0.95);
}

/* Forzar visualización correcta del glifo FontAwesome */
.elegir-section .elegir-nav-btn i { 
  font-size: 16px; 
}

/* --- Responsive Design --- */
@media (max-width: 992px) {
  .elegir-section .elegir-card { flex: 0 0 calc(50% - 15px); }
  .elegir-section .elegir-header { margin-bottom: 40px; }
}

@media (max-width: 768px) {
  .elegir-section { padding: 65px 16px; }
  .elegir-section .elegir-grid { gap: 20px; padding: 0 5px 30px 5px; }
  .elegir-section .elegir-card { flex: 0 0 85%; padding: 35px 20px; transform: none !important;filter: none !important; }
  .elegir-section .elegir-card-title { font-size: 1.3rem; margin-bottom: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .elegir-section .elegir-card { transform: none !important; transition: none !important; }
}


/* ==========================================================================
   SECCIÓN 10: FOOTER (ESTILO INSTITUCIONAL REORGANIZADO)
   ========================================================================== */

/* --- Contenedor Principal --- */
.site-footer {
  width: 100%;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  background-color: #112233;
}

/* --- BLOQUE SUPERIOR: Organizadores (Fondo Claro) --- */
.site-footer .footer-organizador-wrap {
  padding: 50px 20px;
  border-top: 4px solid var(--stem-bg-abisal, #090f21);
  text-align: center;
}

.site-footer .footer-center-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

/* Etiqueta "ORGANIZA" en caja alta pequeña */
.site-footer .footer-label-organiza {
  font-family: "Founders Grotesk Regular", var(--font-body), sans-serif;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 2px;
  color: var(--stem-white);
  margin-bottom: 8px;
  text-transform: uppercase;
}

/* Título de la Facultad (Science Gothic Expanded Bold / Coherente al chasis) */
.site-footer .footer-faculty-title {
  font-family: var(--font-heading, "Science Gothic", sans-serif);
  font-stretch: expanded;
  font-weight: 700;
  font-size: clamp(1rem, 1.7vw, 1.2rem);
  color: var(--stem-white); /* Reemplazo a tono abisal de la campaña */
  margin: 0;
  letter-spacing: -0.5px;
  line-height: 1.2;
}


/* --- BLOQUE INFERIOR: Barra Informativa (Fondo Azul Oscuro) --- */
.site-footer .footer-bar-dark {
  color: var(--stem-white);
  padding: 30px 20px;
}

.site-footer .footer-bar-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 30px;
  max-width: 1200px;
  margin: 0 auto;
}

/* Lado Izquierdo: Datos de Contacto Activo */
.site-footer .footer-contact-info {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.site-footer .footer-contact-title {
  font-family: var(--font-heading, "Science Gothic", sans-serif);
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 1px;
  color: var(--stem-white);
  margin: 0 0 4px 0;
}

.site-footer .footer-contact-link {
  font-family: "Founders Grotesk Regular", var(--font-body), sans-serif;
  font-size: 0.9rem;
  color: var(--stem-white);
  text-decoration: none;
  width: fit-content;
  transition: color 0.25s ease;
}

.site-footer .footer-contact-link:hover {
  color: #08e0e5; /* Enlace activo neón al pasar el puntero */
}

.site-footer .footer-contact-text {
  font-family: "Founders Grotesk Regular", var(--font-body), sans-serif;
  font-size: 0.9rem;
  color: var(--stem-white);
  margin: 0;
}

.site-footer .footer-phone-link {
  color: #08e0e5; /* Resalte en canal telefónico */
  text-decoration: none;
  font-weight: 600;
  transition: opacity 0.2s ease, text-decoration 0.2s ease;
}

.site-footer .footer-phone-link:hover {
  text-decoration: underline;
  opacity: 0.9;
}

/* Lado Derecho: Copyright Legal (Founders Grotesk Regular) */
.site-footer .footer-copyright-wrap {
  text-align: right;
}

.site-footer .footer-copy-text {
  font-family: "Founders Grotesk Regular", var(--font-body), sans-serif;
  font-size: 0.85rem;
  color: var(--stem-white);
  margin: 0;
  letter-spacing: 0.2px;
}


/* ==========================================================================
   RESPONSIVE DESIGN Y ORDENAMIENTO VERTICAL SEGURO
   ========================================================================== */
@media (max-width: 768px) {
  .site-footer .footer-organizador-wrap {
    padding: 45px 16px;
  }

  /* Cambio de flujo a columna para prevenir desbordes en smartphones */
  .site-footer .footer-bar-inner {
    flex-direction: column;
    align-items: flex-start; /* Alineación limpia hacia la izquierda */
    gap: 25px;
    padding-top: 5px;
    padding-bottom: 5px;
  }

  .site-footer .footer-copyright-wrap {
    text-align: left;
    width: 100%;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding-top: 20px;
  }
}

/* ================================================================
   BOTÓN FLOTANTE - ESTILO ADAPTADO AL KEY VISUAL GAMER 2026
   ================================================================ */
.btnregistro {
  position: fixed;
  bottom: 30px;
  right: 30px;
  z-index: 999;
  display: block;
  perspective: 1000px;
  will-change: transform;
}

.btn-float {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--stem-magenta-neon); /* Tono disruptivo de alto impacto */
  color: var(--stem-white) !important;
  font-family: var(--font-heading); /* Uso de Science Gothic */
  font-size: 0.85rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  padding: 14px 26px;
  position: relative;
  white-space: nowrap;
  border: none; /* Quitamos borde estándar para no ensuciar el clip-path */
  
  /* 📐 CORTE POLIGONAL: Esquinas biseladas sutiles estilo interfaz militar/gamer */
  clip-path: polygon(8px 0%, 100% 0%, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0% 100%, 0% 8px);
  -webkit-clip-path: polygon(8px 0%, 100% 0%, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0% 100%, 0% 8px);
  
  /* Resplandor neón Magenta inicial */
  box-shadow: var(--glow-magenta);
  transition: var(--transition-pop);
  
  /* Animación atmosférica de pulso neón inalámbrico */
  animation: hudPulse 2.5s infinite ease-in-out;
}

/* Efecto Hover: Sobrecarga de energía */
.btn-float:hover {
  background: var(--stem-cyan-neon); /* Swapping cromático al pasar el cursor */
  color: var(--stem-bg-abisal) !important; /* Contraste inverso legible */
  transform: translateY(-4px);
  box-shadow: var(--glow-cyan); /* El resplandor transmuta a Cyan */
  cursor: pointer;
}

/* El icono del rayo interactúa con el hover */
.btn-float i {
  font-size: 1rem;
  transition: transform 0.3s ease;
}

.btn-float:hover i {
  transform: scale(1.25) cubic-bezier(.25, .8, .25, 1);
}

/* 🔄 ANIMACIÓN HUD PULSE: Simula la carga de un capacitor neón */
@keyframes hudPulse {
  0%, 100% {
    filter: brightness(1);
    box-shadow: 0 0 12px rgba(223, 18, 149, 0.4);
  }
  50% {
    filter: brightness(1.2);
    box-shadow: 0 0 22px rgba(223, 18, 149, 0.85), 0 0 4px rgba(223, 18, 149, 0.5);
  }
}

/* ================================================================
   RESPONSIVE LOGIC (MOBILE OPTIMIZATION)
   ================================================================ */
@media (max-width: 768px) {
  .btnregistro {
    bottom: 20px;
    right: 20px;
  }
  
  .btn-float {
    padding: 12px 20px;
    font-size: 0.75rem;
    letter-spacing: 0.5px;
    /* Reducimos el bisel en móviles para que no rompa la estructura del texto */
    clip-path: polygon(6px 0%, 100% 0%, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0% 100%, 0% 6px);
    -webkit-clip-path: polygon(6px 0%, 100% 0%, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0% 100%, 0% 6px);
  }
}

/* ==========================================================================
   AJUSTE DE SCROLL PRECISO PARA SECCIONES (EVITAR DESFASE DE NAVBAR)
   ========================================================================== */
section[id],
div[id="form-section"] {
  /* Ajusta el valor (90px) según la altura exacta que desees dejar libre */
  scroll-margin-top: 70px; 
}

@media (max-width: 768px) {
section[id],
div[id="form-section"] {
  /* Ajusta el valor (90px) según la altura exacta que desees dejar libre */
  scroll-margin-top: 69px; 
}
}

/* ==========================================================================
   HOJA DE ESTILOS DE AISLAMIENTO: PÁGINA DE GRACIAS (#lpgracias)
   ========================================================================== */
 
#lpgracias .site-header {
	position: relative;
}

#lpgracias .hero {
	padding-top: 0;
	background-image: linear-gradient(to top, var(--stem-bg-abisal) 0%, rgba(8, 22, 53, 0.8) 35%, rgba(8, 22, 53, 0) 70%),
    url('../img/bg-hero-d.webp') !important;
}

/* 1. Forzar a que la grilla del Hero sea de una sola columna centrada */
#lpgracias .hero-inner {
  display: block !important; /* Rompemos las dos columnas del index principal */
  width: min(92%, 800px) !important; /* Estrechamos el contenedor maestro para centrar el arte */
  text-align: center;
  padding: 20px 0 0;
}

/* 5. La Tarjeta de Textos Cyberpunk: La volvemos relativa */
#lpgracias .hero-copy-wrapper {
  text-align: center; /* Textos perfectamente centrados para formato gracias */
  bottom: 180px;
}

/* 6. Centrar el llamado a la acción */
#lpgracias .hero-cta-group {
  margin-top: 25px;
  display: flex;
  justify-content: center;
}
#lpgracias .hero-main-title {
  font-size: 2rem;
}
#lpgracias .hero-text {
	background-image: none !important;
}
#lpgracias .hero-left-panel {
	padding-top: 170px;
}
/* ==========================================================================
   ADAPTATIVO MOBILE INTERNO PARA LA PÁGINA DE GRACIAS
   ========================================================================== */
   

@media screen and (max-width: 991px) {
  #lpgracias .hero-inner {
    padding-top: 20px;
  } 

  #lpgracias .hero-main-logo {
    max-width: 200px; /* Logo más compacto en móviles */
  }

  #lpgracias .hero-character-art {
    max-width: 320px;
  }

  #lpgracias .hero-copy-wrapper {
    padding: 25px 16px !important;
	top: 280px !important;
  }
  #lpgracias .hero-text {
	padding: 20px 20px 0 !important;
  }
  #lpgracias .hero {
	min-height: 50vh;
	}
  #lpgracias .hero-main-title {
		font-size: 1.5rem !important;
	}
  #lpgracias .hero-left-panel {
	padding-top: 15px;
}	
}
@media screen and (max-width: 480px) {
  #lpgracias .hero-main-title {
		font-size: 1rem !important;
	}  
   #lpgracias .hero-text {
        padding: 20px 20px 50px !important
    }
	
}
@media screen and (max-width: 375px) {
     #lpgracias .hero-text {
        padding: 20px 20px 80px !important;
    }
	#lpgracias .hero-copy-wrapper {      
        top: 250px !important;
    }
	 #lpgracias .btn-hud-scroll {
        font-size: 0.6rem !important;
		padding: 5px 10px;
    }
}