/* 
 * MEJORAS PREMIUM PARA LA PORTADA
 * Refinamientos estéticos (ruido visual, botones) y mejora del layout.
 */

/* 1. Ruido visual (noise) para los fondos hero */
.hero::before,
.comu-hero::before,
.rt-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.05'/%3E%3C/svg%3E");
  pointer-events: none;
  z-index: 0;
  mix-blend-mode: overlay;
}

/* 2. Suavizar y agrandar los blobs para que parezcan una malla fluida (mesh gradient) */
.hero-blob,
.rt-hero-blob {
  filter: blur(100px) !important;
  opacity: 0.65 !important;
  mix-blend-mode: screen;
}

/* 3. Ajuste de la altura de la sección para centrarla perfectamente */
.hero {
  padding-top: 24px !important; 
  padding-bottom: 24px !important;
  min-height: calc(100vh - 56px) !important;
  display: flex !important;
  align-items: center !important;
}
.comu-hero, .rt-hero {
  padding-top: 0px !important; 
  padding-bottom: 24px !important;
  min-height: calc(100vh - 56px) !important;
  display: flex !important;
  align-items: center !important;
}

/* 4. Refinamiento de los botones (CTA) - Minimalista y Sólido */
.hero-cta,
#career-comu .hero-cta,
.rt-hero-cta {
  background-image: none !important; /* Quitamos el gradiente para que tome el color de fondo original de cada carrera */
  border: none !important;
  border-radius: 6px !important; /* Rectangular con bordes modernos */
  box-shadow: 0 4px 12px rgba(0,0,0,0.2) !important;
  text-shadow: none !important;
  font-family: 'Outfit', sans-serif !important;
  font-weight: 600 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
}
.hero-cta:hover,
#career-comu .hero-cta:hover,
.rt-hero-cta:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 16px rgba(0,0,0,0.3) !important;
}

/* 5. Animación de entrada más suave y fluida */
.hero-inner,
.rt-hero-inner,
#career-comu .hero-inner {
  animation: fadeUpPremium 1.2s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
@keyframes fadeUpPremium {
  0% { opacity: 0; transform: translateY(20px); filter: blur(4px); }
  100% { opacity: 1; transform: translateY(0); filter: blur(0); }
}

/* =========================================================================
   6. NUEVO LAYOUT: MINIMALISTA CENTRADO (Sin Logo Redundante)
   ========================================================================= */

.hero-inner,
.rt-hero-inner,
#career-comu .hero-inner {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
  max-width: 900px !important;
  margin: 0 auto !important;
  padding-top: 20px !important;
}

/* Posicionamiento y Orden Exacto de cada elemento para garantizar simetría en las 3 carreras */
.hero-inner > *, .rt-hero-inner > *, #career-comu .hero-inner > * {
  /* Aseguramos que nada rompa el centrado */
  margin-left: auto !important;
  margin-right: auto !important;
}

.badge, .comu-badge, .rt-badge { 
  order: 1 !important;
  margin: 0 auto 20px auto !important; 
  background: transparent !important;
  border: 1px solid rgba(255,255,255,0.25) !important;
  color: rgba(255,255,255,0.7) !important;
  font-weight: 500 !important;
  letter-spacing: 0.15em !important;
  padding: 6px 16px !important;
  border-radius: 50px !important;
}

/* Destacar sutilmente la insignia de Comu (Nueva edición) */
.comu-badge {
  background: #ff7a00 !important; /* Fondo naranja sólido y brillante */
  border: 1px solid #ff9d4a !important; /* Borde sutilmente más claro */
  color: #ffffff !important; /* Texto blanco puro para máximo contraste */
  box-shadow: 0 4px 16px rgba(255, 122, 0, 0.4) !important; /* Resplandor naranja más fuerte */
  font-weight: 600 !important; /* Letra un poco más gruesa */
  text-shadow: 0 1px 2px rgba(0,0,0,0.3) !important;
}

.hero-inner h1, .rt-hero-inner h1, #career-comu .hero-inner h1 { 
  order: 2 !important;
  margin: 0 0 16px 0 !important; 
  line-height: 0.85 !important;
  font-size: 9.5rem !important; 
  letter-spacing: -0.03em !important; 
}

/* Eliminamos el glow de H1 según tu pedido */
.hero h1 span, .comu-hero h1 span, .rt-hero-inner h1 span {
  text-shadow: none !important;
}

/* Ocultamos el subtítulo redundante */
.hero-sub, .rt-hero-sub { 
  display: none !important;
  order: 3 !important;
}

/* Descripción */
.hero-copy, .rt-hero-copy, #career-comu .hero-copy { 
  order: 4 !important;
  margin: 16px auto 32px auto !important; 
  max-width: 600px !important;
  font-family: 'Inter', sans-serif !important;
  color: rgba(255,255,255,0.85) !important;
  font-weight: 300 !important;
  font-size: 1.1rem !important;
  line-height: 1.6 !important;
}

.hero-cta, .rt-hero-cta { 
  order: 5 !important;
  margin: 8px auto 0 auto !important; 
}

/* Restaurar logo pero al pie del Hero */
.hero-logo-img, .rt-hero-logo-img { 
  display: block !important; 
  order: 6 !important; /* Fuerza al logo a ir al fondo de la columna en las 3 carreras */
  max-width: 140px !important;
  margin: 40px auto 32px auto !important; /* Margen arriba y abajo para que respire */
  opacity: 0.4 !important; /* Transparencia base */
  animation: pulseLogo 6s ease-in-out infinite;
}


/* 8. RESPONSIVE: Volver al diseño apilado y centrado en pantallas chicas */
@media (max-width: 820px) {
  .hero {
    min-height: auto !important;
    padding-top: 70px !important; /* Deja espacio para la barra de navegación superior */
  }
  .comu-hero, .rt-hero {
    min-height: auto !important;
    padding-top: 32px !important; /* Mucho menos padding porque no tienen navbar arriba */
  }
  
  .hero-inner, .rt-hero-inner, #career-comu .hero-inner {
    display: flex !important;
    flex-direction: column !important;
    text-align: center !important;
  }
  
  /* Centrar todo en mobile */
  .badge, .comu-badge, .rt-badge,
  .hero-inner h1, .rt-hero-inner h1, #career-comu .hero-inner h1,
  .hero-sub, .rt-hero-sub,
  .hero-copy, .rt-hero-copy,
  .hero-cta, .rt-hero-cta {
    align-self: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  
  /* Aumentamos aún más el tamaño del H1 en mobile */
  .hero-inner h1, .rt-hero-inner h1, #career-comu .hero-inner h1 {
    font-size: 19vw !important; /* Título que domina toda la pantalla en mobile */
    line-height: 0.88 !important;
    margin-bottom: 12px !important;
  }
  
  .hero-copy, .rt-hero-copy {
    margin: 8px auto 20px auto !important;
  }
}

/* =========================================================================
   9. INTERACCIONES Y ANIMACIONES (SCROLL REVEAL & HOVERS)
   ========================================================================= */

/* Transición suave/gradiente al final del Hero (Efecto #3) */
.hero, .comu-hero, .rt-hero {
  /* Suaviza el corte con el siguiente bloque mediante una máscara de opacidad */
  -webkit-mask-image: linear-gradient(to bottom, black 95%, transparent 100%);
  mask-image: linear-gradient(to bottom, black 95%, transparent 100%);
}

/* Clases para el Script de Scroll Reveal (Efecto #2) */
.reveal-on-scroll {
  opacity: 0;
  transform: translateY(30px) scale(0.98);
  transition: opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1), transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform;
}
.reveal-on-scroll.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* Micro-interacciones premium para las Tarjetas de Materias (Efecto #4) */
.materia-card, .rt-materia-card {
  transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.3s ease !important;
}
.materia-card:hover, .rt-materia-card:hover {
  transform: translateY(-8px) scale(1.02) !important;
  box-shadow: 0 15px 35px rgba(0,0,0,0.12) !important;
}
/* Efectos de brillo de color según la materia */
.materia-card.verde:hover { box-shadow: 0 15px 35px rgba(26,122,46,0.15) !important; }
.materia-card.naranja:hover { box-shadow: 0 15px 35px rgba(232,92,26,0.15) !important; }
.materia-card.magenta:hover { box-shadow: 0 15px 35px rgba(194,24,91,0.15) !important; }
.materia-card.cyan:hover { box-shadow: 0 15px 35px rgba(0,119,168,0.15) !important; }
.rt-materia-card:hover { box-shadow: 0 15px 35px rgba(139,26,26,0.15) !important; }


/* =========================================================================
   11. FONDO INTERACTIVO (Mouse Tracking para los Blobs)
   ========================================================================= */

:root {
  --mouse-x: 0px;
  --mouse-y: 0px;
}

/* Modificamos los blobs para que se desplacen ligeramente siguiendo el mouse */
.hero-blob.b1, .hero-blob.rb1 { 
  transform: translate(var(--mouse-x), var(--mouse-y)) !important; 
  transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1); 
  animation: none !important; 
}
.hero-blob.b2, .hero-blob.rb2 { 
  transform: translate(calc(var(--mouse-x) * -1), calc(var(--mouse-y) * -1)) !important; 
  transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1); 
  animation: none !important; 
}
.hero-blob.b3, .hero-blob.rb3 { 
  transform: translate(calc(var(--mouse-x) * 0.5), calc(var(--mouse-y) * 0.5)) !important; 
  transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1); 
  animation: none !important; 
}

/* =========================================================================
   12. FIX: ORGANIZACIÓN DE BOTONES (SEC-ACTIONS)
   ========================================================================= */

.sec-actions, .comu-sec-actions, .rt-sec-actions {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 12px !important;
  align-items: center !important;
}

.search-wrap, .comu-search-bar, .rt-search-wrap {
  flex: 1 1 100% !important; /* Fuerza la barra de búsqueda a ocupar toda su propia fila */
  max-width: 100% !important;
  margin-bottom: 8px !important;
}

.sec-actions button, .comu-sec-actions button, .rt-sec-actions button {
  flex: 1 1 calc(25% - 12px); /* Hasta 4 botones por fila */
  white-space: nowrap;
}

@media (max-width: 820px) {
  .sec-actions button, .comu-sec-actions button, .rt-sec-actions button {
    flex: 1 1 calc(50% - 12px); /* 2 botones por fila en tablet/móvil */
  }
}

@media (max-width: 480px) {
  .sec-actions button, .comu-sec-actions button, .rt-sec-actions button {
    flex: 1 1 100%; /* 1 botón por fila en pantallas muy chicas */
  }
}