*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root { --red: #E8231A; --blue: #364a9a; --yellow: #ecc316; --green: #36a936; --dark: #1a1a1a; --light: #f5f4f0; --nav-h: 58px; }
html { scroll-behavior: smooth; scroll-padding-top: var(--nav-h); }

/* Cuerpo general de la página */
body { font-family: 'Poppins', sans-serif; background: var(--light); color: var(--dark); overflow-x: hidden; padding-top: var(--nav-h); }

/* --- HERO Y CAPAS --- */

/* === Navbar superior === */
#site-nav {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 90;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.2rem;
  min-height: var(--nav-h);
  padding: 0.85rem 2rem;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}
.nav-brand { display: inline-flex; align-items: center; gap: 5px; flex-shrink: 0; }
.nav-dot { width: 11px; height: 11px; border-radius: 50%; transition: transform 0.2s ease; }
.nav-dot--red { background: var(--red); }
.nav-dot--blue { background: var(--blue); }
.nav-dot--yellow { background: var(--yellow); }
.nav-dot--green { background: var(--green); }
.nav-brand:hover .nav-dot { transform: scale(1.2); }

.nav-links {
  list-style: none;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.6rem 1.3rem;
  margin: 0;
  padding: 0;
}
.nav-links li { position: relative; }
.nav-links li + li::before {
  content: "";
  position: absolute;
  left: -0.65rem;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 12px;
  background: rgba(0, 0, 0, 0.18);
}
.nav-links a {
  font-family: 'Poppins', sans-serif;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: var(--dark);
  text-decoration: none;
  transition: color 0.2s ease;
}
.nav-links a:hover { color: var(--blue); }

@media (max-width: 900px) {
  .nav-links { gap: 0.5rem 1rem; }
  .nav-links a { font-size: 0.68rem; letter-spacing: 0.16em; }
  .nav-links li + li::before { left: -0.5rem; }
}
@media (max-width: 760px) {
  #site-nav { padding: 0.65rem 1rem; gap: 0.8rem; }
  .nav-links { gap: 0.4rem 0.8rem; }
  .nav-links a { font-size: 0.62rem; letter-spacing: 0.12em; }
}

#hero { position: relative; height: calc(100vh - var(--nav-h)); min-height: calc(640px - var(--nav-h)); display: flex; flex-direction: column; align-items: center; justify-content: center; overflow: hidden; background: #fff; }
#string-canvas { position: absolute; inset: 0; pointer-events: none; z-index: 10; }
#nodes-layer { position: absolute; inset: 0; z-index: 5; pointer-events: none; }

.hero-content { position: relative; z-index: 2; text-align: center; pointer-events: none; display: flex; flex-direction: column; align-items: center; }
.logo-svg-wrap { width: clamp(320px, 50vw, 600px); display: block; }
.logo-svg-wrap svg, .logo-svg-wrap img { width: 100%; height: auto; }

/* Botones */
.cta-btn {
  pointer-events: all;
  margin-top: 2rem;
  background: var(--blue);
  color: white;
  font-family: 'Poppins', sans-serif;
  font-size: 1.05rem;
  font-weight: 600;
  padding: 1.1rem 3rem;
  border: none;
  border-radius: 999px;
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
  box-shadow: 0 8px 24px rgba(54, 74, 154, 0.35);
  transition: background 0.25s, transform 0.2s, box-shadow 0.25s;
  animation: hero-fade-up 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.5s both,
             pulse-border 2.2s 1.4s infinite;
}
.cta-btn:hover {
  background: #1e2c80;
  transform: translateY(-4px) scale(1.04);
  box-shadow: 0 16px 40px rgba(54, 74, 154, 0.5);
}
.hint {
  pointer-events: none;
  position: absolute;
  top: calc(100% + 1.1rem);
  left: 0;
  right: 0;
  text-align: center;
  font-size: 0.72rem;
  color: #999;
  letter-spacing: 0.05em;
  line-height: 1.5;
}

/* --- ESTILOS DE LOS NODOS (CÍRCULOS) --- */
.node { position: absolute; border-radius: 50%; cursor: pointer; pointer-events: all; display: flex; align-items: center; justify-content: center; will-change: transform; z-index: 3; transition: filter 0.3s ease, transform 0.2s; }
.node::after { content: ''; width: 5px; height: 5px; border-radius: 50%; background: white; opacity: 0.8; position: absolute; }
.node:hover { filter: brightness(1.1); transform: scale(1.05); }

.node-red    { background: var(--red);    --glow-color: var(--red); }
.node-blue   { background: var(--blue);   --glow-color: var(--blue); }
.node-yellow { background: var(--yellow); --glow-color: var(--yellow); }
.node-green  { background: var(--green);  --glow-color: var(--green); }
.node-ringed { box-shadow: 0 0 0 3px #fff, 0 0 0 6px #1a1a1a; }

/* Feedback visual para el nodo seleccionado */
.node.active { filter: brightness(1.2) drop-shadow(0 0 12px var(--glow-color)); z-index: 6; }

/* --- SECCIÓN 1: TRADUCCIÓN DIGITAL (Izquierda, fondo crema con circulos difuminados) --- */

section.content-section { 
  position: relative; 
  overflow: hidden; 
  background: var(--light); 
  width: 100%; 
  padding: 6rem 2rem; 
}
section.content-section .inner { 
  max-width: 920px; 
  margin: 0 auto; 
  position: relative; 
  z-index: 2; 
}

.section-label { font-family: 'Poppins', sans-serif; font-size: 0.74rem; letter-spacing: 0.20em; text-transform: uppercase; color: var(--blue); margin-bottom: 0.9rem; font-weight: 700; }
.section-title { font-family: 'Poppins', sans-serif; font-size: clamp(1.5rem, 3.5vw, 2.6rem); font-weight: 700; line-height: 1.15; color: var(--dark); margin-bottom: 1.2rem; }
.section-body { font-size: 1.08rem; font-weight: 300; line-height: 1.88; color: #444; max-width: 560px; }

/* --- SECCIÓN 2: PiX (Centrado, fondo blanco) --- */
#pix { padding: 6rem 2rem; background: white; }
#pix .inner { max-width: 920px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; text-align: center; }
.pix-box { width: 100%; border-radius: 16px; overflow: hidden; background: #fff; box-shadow: 0 10px 30px rgba(0,0,0,0.05); border: 1px solid rgba(0,0,0,0.05); }

/* --- SECCIÓN 3: COMPONENTES (Centrado, fondo crema) --- */
#components { padding: 6rem 2rem; background: var(--light); }
#components .inner { max-width: 920px; margin: 0 auto; text-align: center; }
.cards-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; margin-top: 3rem; }
.comp-card { background: white; border-radius: 16px; padding: 2.5rem 1.5rem; border: 1.5px solid rgba(0,0,0,0.06); text-align: center; }

/* 
   CAMBIO: Se creó un contenedor de iconos (.comp-icon-wrap) con altura fija (100px) 
   y centrado flexbox. Esto garantiza que todos los títulos h3 comiencen exactamente 
   en la misma altura horizontal, sin importar las proporciones de la imagen.
   Además, se ajustó el tamaño individual de los iconos para equilibrar su peso visual:
   los dos primeros (PNGs cuadrados) son un poco más grandes, y el tercero (SVG rectangular) 
   es más angosto para que no se vea desproporcionado.
*/
.comp-icon-wrap {
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.5rem;
}

.comp-custom-icon {
  display: block;
  max-height: 100%;
  object-fit: contain;
  transition: transform 0.42s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Las tres tarjetas ahora llevan GIF animado: contenedor más alto y ancho uniforme */
.comp-icon-wrap {
  height: 170px;
}

.comp-card:nth-child(1) .comp-custom-icon,
.comp-card:nth-child(2) .comp-custom-icon,
.comp-card:nth-child(3) .comp-custom-icon {
  width: 100%;
  max-width: 260px;
  border-radius: 8px;
  /* Recorta 3px de cada borde para eliminar la línea negra del screenshot */
  clip-path: inset(3px round 8px);
}

.comp-card h3 { font-family: 'Poppins', sans-serif; font-size: 1rem; font-weight: 700; color: var(--blue); margin-bottom: 0.5rem; }
.comp-card p { font-size: 0.92rem; color: #666; line-height: 1.68; }

/* --- SECCIÓN 4: GALERÍA (Fondo blanco) --- */
#gallery { padding: 6rem 2rem; background: white; }
#gallery .inner { max-width: 920px; margin: 0 auto; }
.gallery-carousel { margin-top: 3rem; }

.gallery-track {
  position: relative;
  width: 100%;
  height: clamp(220px, 50vw, 420px);
  overflow: hidden;
}

.gallery-slide {
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(72%, 560px);
  transform: translate(-50%, -50%) scale(0.8);
  opacity: 0.5;
  z-index: 1;
  transition: all 0.4s ease;
  cursor: pointer;
}

.gallery-slide img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 16px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
  display: block;
}

.gallery-slide.active {
  transform: translate(-50%, -50%) scale(1);
  opacity: 1;
  z-index: 3;
  cursor: default;
}

.gallery-slide.prev {
  transform: translate(calc(-50% - 58%), -50%) scale(0.8);
  opacity: 0.5;
  z-index: 2;
}

.gallery-slide.next {
  transform: translate(calc(-50% + 58%), -50%) scale(0.8);
  opacity: 0.5;
  z-index: 2;
}

.gallery-slide.hidden {
  transform: translate(-50%, -50%) scale(0.6);
  opacity: 0;
  z-index: 0;
  pointer-events: none;
}

.gallery-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  margin-top: 2rem;
}

.gallery-arrow {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1.5px solid rgba(0, 0, 0, 0.1);
  background: white;
  color: var(--dark);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background 0.2s, transform 0.15s, border-color 0.2s, color 0.2s;
}

.gallery-arrow:hover {
  background: var(--light);
  border-color: var(--blue);
  color: var(--blue);
  transform: scale(1.05);
}

.gallery-dots {
  display: flex;
  align-items: center;
  gap: 0.55rem;
}

.gallery-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: none;
  background: rgba(0, 0, 0, 0.15);
  cursor: pointer;
  padding: 0;
  transition: background 0.3s, transform 0.2s;
}

.gallery-dot.active {
  background: var(--blue);
  transform: scale(1.25);
}

.gallery-dot:hover:not(.active) {
  background: var(--red);
}

/* --- SECCIÓN 5: VIDEO (Centrado, fondo crema) --- */
#video-section { padding: 6rem 2rem; background: var(--light); }
#video-section .inner { max-width: 920px; margin: 0 auto; text-align: center; }
.video-wrapper { position: relative; margin-top: 3rem; border-radius: 20px; overflow: hidden; background: #111; aspect-ratio: 16/9; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 1rem; }
.play-btn { width: 72px; height: 72px; border-radius: 50%; background: var(--blue); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: transform 0.15s; }
.play-btn:hover { transform: scale(1.08); }
.video-label { color: rgba(255,255,255,0.5); font-size: 0.82rem; letter-spacing: 0.05em; }

/* --- FOOTER --- */
footer { position: relative; overflow: hidden; padding: 7rem 2rem 3rem; background: white; text-align: center; }
.fn { position: absolute; border-radius: 50%; }
.footer-cta-btn { position: relative; z-index: 1; background: var(--blue); color: white; font-family: 'Poppins', sans-serif; font-size: 1rem; font-weight: 500; padding: 1rem 2.8rem; border: none; border-radius: 999px; cursor: pointer; margin-bottom: 2.5rem; display: block; margin-left: auto; margin-right: auto; transition: background 0.2s, transform 0.15s; }
.footer-cta-btn:hover { background: #1e2c80; transform: scale(1.03); }
.copyright { position: relative; z-index: 1; font-size: 0.73rem; color: #aaa; letter-spacing: 0.05em; }

/* Media Queries */
@media(max-width: 700px) { 
  .cards-row { grid-template-columns: 1fr; }
  .gallery-slide { width: min(82%, 420px); }
  .gallery-slide.prev { transform: translate(calc(-50% - 48%), -50%) scale(0.75); }
  .gallery-slide.next { transform: translate(calc(-50% + 48%), -50%) scale(0.75); }
}

/* ===  SECCIÓN 6: EXPERIENCIA WEB (Centrado, fondo VIDEO LOOP) === */
#experiencia-cta {
  position: relative;
  min-height: max(750px, 100vh);
  padding: 6rem 2rem;
  background-color: white;
  color: var(--dark);
  text-align: center;
  overflow: hidden;
  border-top: 1px solid rgba(0,0,0,0.05);
  display: flex;
  align-items: center;
  justify-content: center;
}

.cta-video-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}

.cta-video-bg video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.cta-video-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0.82) 0%,
    rgba(255, 255, 255, 0.72) 50%,
    rgba(255, 255, 255, 0.82) 100%
  );
}

#experiencia-cta .inner {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 650px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.cta-heading {
  font-family: 'Poppins', sans-serif;
  font-size: clamp(2rem, 5vw, 3.5rem);
  font-weight: 700;
  line-height: 1.1;
  color: var(--dark);
  margin-bottom: 1.5rem;
  text-shadow: 0 1px 12px rgba(255, 255, 255, 0.9);
}

.cta-sub {
  font-size: 1.1rem;
  font-weight: 300;
  color: #444;
  margin-bottom: 3rem;
  line-height: 1.6;
  text-shadow: 0 1px 8px rgba(255, 255, 255, 0.85);
}

/* El botón palpitante */
.cta-btn-large {
  display: inline-block;
  background: var(--blue);
  color: white;
  font-family: 'Poppins', sans-serif;
  font-size: 1.1rem;
  font-weight: 600;
  padding: 1.2rem 3rem;
  border: none;
  border-radius: 999px;
  cursor: pointer;
  text-decoration: none;
  position: relative;
  transition: all 0.3s ease;
  box-shadow: 0 10px 20px rgba(54, 74, 154, 0.3);
  animation: pulse-border 2s infinite;
}

.cta-btn-large:hover {
  transform: translateY(-8px) scale(1.05);
  background-color: #1e2c80; 
  box-shadow: 0 20px 50px rgba(54, 74, 154, 0.5);
}

/* Luces flotantes del fondo (Animaciones caóticas y opacidad reactiva) */

.bg-glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px); 
  opacity: 0.18; 
  z-index: 1;
  pointer-events: none;
}

.bg-yellow { 
  background: var(--yellow); 
  width: 380px; 
  height: 380px; 
  top: 5%; 
  left: -120px; 
  animation: float-yellow 15s infinite ease-in-out;
}

.bg-red { 
  background: var(--red); 
  width: 320px; 
  height: 320px; 
  bottom: 5%; 
  right: -100px; 
  animation: float-red 18s infinite ease-in-out; 
}

.bg-blue { 
  background: var(--blue); 
  width: 350px; 
  height: 350px; 
  top: 35%; 
  left: 20%; 
  animation: float-blue 20s infinite ease-in-out; 
}


.bg-green {
  background: var(--green);
  width: 330px;
  height: 330px;
  bottom: 15%;
  left: -50px;
  animation: float-green 22s infinite ease-in-out;
}

/* === KEYFRAMES DE LUCES Y BOTÓN === */
@keyframes float-yellow {
  0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.2; }
  33% { transform: translate(250px, 150px) scale(1.2); opacity: 0.45; } 
  66% { transform: translate(50px, 250px) scale(0.9); opacity: 0.25; }
}

@keyframes float-red {
  0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.25; }
  33% { transform: translate(-250px, -200px) scale(1.1); opacity: 0.5; } 
  66% { transform: translate(-100px, -50px) scale(1.3); opacity: 0.3; }
}

@keyframes float-blue {
  0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.15; }
  33% { transform: translate(300px, -150px) scale(0.8); opacity: 0.35; }
  66% { transform: translate(150px, 200px) scale(1.2); opacity: 0.4; } 
}

/* 
   CAMBIO: Se añadieron los keyframes para la animación de flotabilidad del orbe verde, 
   usando trayectorias y tiempos desfasados para generar un movimiento orgánico y caótico.
*/
@keyframes float-green {
  0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.15; }
  33% { transform: translate(180px, -120px) scale(1.2); opacity: 0.38; }
  66% { transform: translate(-100px, -220px) scale(0.9); opacity: 0.22; }
}

@keyframes pulse-border {
  0% { box-shadow: 0 0 0 0 rgba(54, 74, 154, 0.6); }
  70% { box-shadow: 0 0 0 18px rgba(54, 74, 154, 0); }
  100% { box-shadow: 0 0 0 0 rgba(54, 74, 154, 0); }
}

/* === FOOTER === */
footer {
  padding: 3.2rem 2rem 2.5rem;
  background-color: #fff; 
  text-align: center;
  position: relative;
  z-index: 10;
}

.copyright {
  font-family: 'Poppins', sans-serif;
  font-size: 0.75rem;
  color: #666;
  letter-spacing: 0.05em;
}

/* === Footer: línea de circulitos de colores que lo separa === */
.footer-dots {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 16px;
  background-image:
    radial-gradient(circle at center, var(--red)    3.5px, transparent 4px),
    radial-gradient(circle at center, var(--blue)   3.5px, transparent 4px),
    radial-gradient(circle at center, var(--yellow) 3.5px, transparent 4px),
    radial-gradient(circle at center, var(--green)  3.5px, transparent 4px);
  background-size: 88px 16px;
  background-position: 0 center, 22px center, 44px center, 66px center;
  background-repeat: repeat-x;
}

/* === Transición de ruleta al volver al landing === */
#roulette-transition {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  overflow: hidden;
}
.no-intro #roulette-transition { display: none; }

.rt-ring-wrap {
  position: relative;
  width: 140px;
  height: 140px;
  will-change: transform;
}
.roulette-ring { width: 100%; height: 100%; position: relative; }
.roulette-dot {
  position: absolute;
  border-radius: 50%;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.22);
}
.roulette-dot-red    { background: var(--red); }
.roulette-dot-blue   { background: var(--blue); }
.roulette-dot-yellow { background: var(--yellow); }
.roulette-dot-green  { background: var(--green); }

/* === Footer: columnas (logos | créditos) === */
.footer-inner {
  max-width: 1000px;
  margin: 0 auto;
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: 2.8rem;
  text-align: left;
}

.footer-col { display: flex; flex-direction: column; justify-content: center; }
.footer-col--logos { flex: 0 0 auto; }
.footer-col--text  { flex: 1; min-width: 280px; }

.footer-heading {
  display: block;
  font-family: 'Poppins', sans-serif;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--blue);
  margin-bottom: 1rem;
}

.footer-divider {
  width: 1px;
  align-self: stretch;
  background: #e7e7e7;
  flex-shrink: 0;
}

.footer-logos {
  display: flex;
  align-items: center;
  gap: 1.6rem;
}

.footer-logo { display: block; width: auto; }
.footer-logo--ead  { height: 64px; }
.footer-logo--pucv { height: 72px; }

.footer-text {
  margin: 0;
  text-align: justify;
  font-family: 'Poppins', sans-serif;
  font-size: 0.82rem;
  line-height: 1.7;
  color: #555;
  letter-spacing: 0.02em;
}
.footer-text strong { color: var(--dark); font-weight: 600; }

.wiki-cta {
  margin-top: 3.2rem;
  text-align: center;
}
.wiki-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.8rem 1.8rem;
  border: 1.5px solid var(--blue);
  border-radius: 999px;
  color: var(--blue);
  background: transparent;
  font-family: 'Poppins', sans-serif;
  font-size: 0.85rem;
  font-weight: 600;
  text-decoration: none;
  letter-spacing: 0.02em;
  transition: background 0.2s ease, color 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;
}
.wiki-btn svg { flex-shrink: 0; }
.wiki-btn:hover {
  background: var(--blue);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 10px 26px rgba(54, 74, 154, 0.32);
}

.footer-bottom {
  max-width: 1000px;
  margin: 2.2rem auto 0;
  padding-top: 1.3rem;
  border-top: 1px solid #eee;
  font-family: 'Poppins', sans-serif;
  font-size: 0.72rem;
  color: #aaa;
  letter-spacing: 0.05em;
  text-align: center;
}

@media (max-width: 760px) {
  .footer-inner { flex-direction: column; align-items: center; text-align: center; gap: 2rem; }
  .footer-divider { width: 60%; height: 1px; align-self: center; }
  .footer-col { align-items: center; }
  .footer-text { text-align: center; }
}

/* === Responsive (Video Experiencia) === */
@media(max-width: 700px) { 
  .cards-row { grid-template-columns: 1fr; }
  .gallery-grid { grid-template-columns: 1fr; }
  .gallery-item:first-child { grid-column: 1; }
}


/* ================================================================
   MICROINTERACCIONES — Scroll · Reveal · Énfasis · Tilt · Hero
   Todos los efectos usan @keyframes o transition CSS puro.
   No se necesita ninguna librería externa.
   ================================================================ */


/* ---------------------------------------------------------------
   BARRA DE PROGRESO DE SCROLL
   Una línea delgada fija en la parte superior de la pantalla que
   se llena de izquierda a derecha conforme el usuario hace scroll.
   El ancho (width) lo actualiza JavaScript en tiempo real.
   Se usa will-change: width para que el navegador la optimice en GPU.
   --------------------------------------------------------------- */
#scroll-progress {
  position: fixed;
  top: 0; left: 0;
  height: 5px;
  width: 0%;
  background: linear-gradient(90deg, var(--blue) 0%, var(--red) 60%, var(--yellow) 100%);
  z-index: 9999;
  pointer-events: none;
  will-change: width;
  border-radius: 0 3px 3px 0;
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.08);
}


/* ---------------------------------------------------------------
   ANIMACIÓN GENÉRICA DE ENTRADA POR SCROLL (reveal-rise)
   Los elementos que tengan la clase .reveal comienzan invisibles.
   Cuando el IntersectionObserver en JS detecta que el elemento
   entra en el viewport, agrega la clase .visible y se dispara
   esta animación: el elemento sube desde abajo y aparece.
   Se usa @keyframes en lugar de transition para que no interfiera
   con las transiciones de hover que los elementos ya tienen.
   --------------------------------------------------------------- */
.reveal {
  opacity: 0;
}
.reveal.visible {
  animation: reveal-rise 0.75s cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes reveal-rise {
  from { opacity: 0; transform: translateY(38px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Las cards reciben un data-delay distinto cada una para que
   aparezcan en cascada (stagger) en lugar de todas a la vez. */
.reveal[data-delay="1"] { animation-delay: 0.08s; }
.reveal[data-delay="2"] { animation-delay: 0.18s; }
.reveal[data-delay="3"] { animation-delay: 0.28s; }


/* ---------------------------------------------------------------
   SUBRAYADO ANIMADO EN LAS ETIQUETAS DE SECCIÓN
   El ::after de cada .section-label empieza con width: 0.
   Cuando JS detecta que la etiqueta entra en pantalla y agrega
   la clase .label-visible, el subrayado se expande hasta cubrir
   todo el texto con una transición suave.
   --------------------------------------------------------------- */
.section-label {
  position: relative;
  display: inline-block;
}
.section-label::after {
  content: '';
  position: absolute;
  bottom: -3px; left: 0;
  width: 0; height: 1.5px;
  background: var(--blue);
  transition: width 0.55s cubic-bezier(0.22, 1, 0.36, 1) 0.12s;
}
.section-label.label-visible::after {
  width: 100%;
}


/* ---------------------------------------------------------------
   TÍTULOS: CADA PALABRA ENTRA POR SEPARADO (word-fly-up)
   JS divide el texto de .section-title y .cta-heading en <span>
   individuales con clase .word. Cada span comienza invisible y
   desplazado hacia abajo. Cuando el título entra en el viewport,
   JS agrega .title-visible y las palabras aparecen una por una
   con un pequeño skew para darle carácter tipográfico.
   Además, para que se sienta vivo y experimental, las palabras
   nacen con el color azul de la marca (var(--blue)) y transicionan
   suavemente al color oscuro final (var(--dark)).
   El delay de cada <span> lo calcula JS según su posición.
   --------------------------------------------------------------- */
.section-title .word,
.cta-heading .word {
  display: inline-block;
  opacity: 0;
  will-change: opacity, transform, color;
}
.section-title.title-visible .word,
.cta-heading.title-visible .word {
  animation: word-fly-up 0.6s cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes word-fly-up {
  from { 
    opacity: 0; 
    transform: translateY(24px) skewX(-5deg); 
    color: var(--blue);
  }
  to { 
    opacity: 1; 
    transform: translateY(0)   skewX(0deg);   
    color: var(--dark);
  }
}


/* ---------------------------------------------------------------
   ENTRADA DEL HERO AL CARGAR LA PÁGINA
   El logo, el botón CTA y el hint del hero aparecen con
   animaciones encadenadas apenas carga la página (no requieren
   scroll). Cada uno tiene un animation-delay distinto para que
   entren en orden: logo → botón → hint.
   --------------------------------------------------------------- */
.logo-svg-wrap {
  animation: hero-logo-in 1.1s cubic-bezier(0.22, 1, 0.36, 1) 0.1s both;
}
.hint {
  animation: hero-fade-up 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.7s both;
}
@keyframes hero-logo-in {
  from { opacity: 0; transform: scale(0.88) translateY(18px); }
  to   { opacity: 1; transform: scale(1)    translateY(0);    }
}
@keyframes hero-fade-up {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0);    }
}


/* ---------------------------------------------------------------
   TARJETAS DE COMPONENTES: HOVER CON TILT 3D + ICONO BOUNCE
   .cards-row tiene perspective para que los hijos puedan rotar
   en el espacio 3D. .comp-card usa transform-style: preserve-3d
   para que el tilt calculado por JS (rotateX/rotateY) se vea real.
   El icono tiene una curva bezier con overshoot (1.56) que produce
   el efecto de rebote elástico al hacer hover.
   --------------------------------------------------------------- */
.cards-row {
  perspective: 1400px;
}
.comp-card {
  transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 0.32s ease,
              border-color 0.32s ease;
  will-change: transform;
  transform-style: preserve-3d;
}
.comp-card:hover {
  box-shadow: 0 22px 52px rgba(0, 0, 0, 0.10);
  border-color: rgba(54, 74, 154, 0.2);
}
.comp-custom-icon {
  transition: transform 0.42s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.comp-card:hover .comp-custom-icon {
  transform: scale(1.13) translateY(-5px);
}



/* ---------------------------------------------------------------
   PULSO EN EL NODO ACTIVO DEL HERO
   Cuando el usuario hace clic en un nodo del juego y queda
   seleccionado (clase .active), el drop-shadow amarillo oscila
   suavemente entre un brillo menor y uno mayor de forma infinita,
   reforzando visualmente que ese nodo está "conectado".
   --------------------------------------------------------------- */
.node.active {
  filter: brightness(1.25) drop-shadow(0 0 14px var(--glow-color));
  animation: node-pulse 1.8s ease-in-out infinite alternate;
}
@keyframes node-pulse {
  from { filter: brightness(1.2) drop-shadow(0 0 10px var(--glow-color)); }
  to   { filter: brightness(1.3) drop-shadow(0 0 22px var(--glow-color)); }
}


/* ---------------------------------------------------------------
   SOMBRA SUAVE EN LA CAJA PiX AL HACER HOVER
   El contenedor del iframe de la partitura PiX gana una sombra
   azulada al pasar el cursor, dando retroalimentación de que
   el área es interactiva.
   --------------------------------------------------------------- */
.pix-box {
  transition: box-shadow 0.4s ease;
}
.pix-box:hover {
  box-shadow: 0 16px 48px rgba(54, 74, 154, 0.12);
}


/* ---------------------------------------------------------------
   MODO SIN MOVIMIENTO (prefers-reduced-motion)
   Si el sistema operativo del usuario tiene activada la opción
   "Reducir movimiento", se desactivan todas las animaciones y
   transiciones. Los elementos aparecen directamente en su estado
   final, sin animaciones de entrada ni efectos de scroll.
   --------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  #scroll-progress { display: none; }
  .reveal, .reveal.visible { opacity: 1; animation: none; }
  .section-label::after { width: 100%; transition: none; }
  .section-title .word, .cta-heading .word { opacity: 1; animation: none; }
  .section-title.title-visible { animation: none; background: none; -webkit-text-fill-color: unset; }
  .logo-svg-wrap, .cta-btn, .hint { animation: none; }
  .comp-card, .comp-custom-icon, .pix-box { transition: none; }
  .node.active { animation: none; }
}