/* =====================================================
   PAGINA ENERGIA ALTERNATIVA
   ===================================================== */
/* ESTILOS DE NOVEDADES */

/* ----------------- Variables exclusivas para Novedades ----------------- */
body[data-page="novedades"] {
  --novedades-primary: #2055a4;
  --novedades-primary-light: #3673cc;
  --novedades-primary-dark: #184281;
  --novedades-secondary: #42a5f5;
  --novedades-accent: #26a69a;
  --novedades-dark: #2c3e50;
  --novedades-light: #f8f9fa;
  --novedades-light-accent: #e9ecef;
  --novedades-neutral: #78909c;
  --novedades-neutral-dark: #455a64;
}

/* Header blanco fijo en esta página */
body[data-page="novedades"] .header {
  background-color: #ffffff !important;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

/* ----------------- Fondo global + capas 3D ----------------- */
body[data-page="novedades"] .novedades-background {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  z-index: -1;
  background-color: #fff;
  background: linear-gradient(to bottom, #fff, #f8f9fa);
  overflow: hidden;
  perspective: 1500px;
  transform-style: preserve-3d;
}
body[data-page="novedades"] .node-layer,
body[data-page="novedades"] .connection-lines {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  transform-style: preserve-3d;
}
body[data-page="novedades"] .connection-lines { pointer-events: none; }
body[data-page="novedades"] .connection {
  position: absolute;
  height: 2px;
  background: linear-gradient(90deg, rgba(66,165,245,0.2) 0%, rgba(66,165,245,1) 50%, rgba(66,165,245,0.2) 100%);
  background-size: 200% 100%;
  transform-origin: left center;
  pointer-events: none;
  z-index: 2;
  transform-style: preserve-3d;
  border-radius: 2px;
}
body[data-page="novedades"] .connection.active {
  animation: lightFlow 1.5s linear infinite, connectionPulse 1.5s linear infinite;
  box-shadow: 0 0 12px rgba(66,165,245,1);
}
@keyframes lightFlow {
  0% { background-position: 100% 0; }
  50% { background-position: 0 0; }
  100% { background-position: 100% 0; }
}
@keyframes connectionPulse {
  0% { opacity: 0.3; }
  50% { opacity: 1; }
  100% { opacity: 0.3; }
}
body[data-page="novedades"] .data-cloud {
  position: absolute;
  width: 100%; height: 100%;
  background: radial-gradient(circle at center, rgba(255,255,255,0) 0%, rgba(32,85,164,0.05) 60%, rgba(32,85,164,0.1) 100%);
  transform: translateZ(-400px) scale(1.2);
  animation: cloudDrift 20s ease-in-out infinite;
}
@keyframes cloudDrift {
  0% { transform: translateZ(-400px) translateX(0); opacity: 0.4; }
  50% { transform: translateZ(-400px) translateX(50px); opacity: 0.6; }
  100% { transform: translateZ(-400px) translateX(0); opacity: 0.4; }
}
body[data-page="novedades"] .node {
  position: absolute;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--novedades-primary-light);
  box-shadow: 0 0 10px rgba(54,115,204,0.5);
  pointer-events: none;
  transition: all 0.5s ease;
  transform-style: preserve-3d;
}
body[data-page="novedades"] .node.highlight {
  width: 8px; height: 8px;
  background: var(--novedades-secondary);
  box-shadow: 0 0 15px rgba(66,165,245,0.9), 0 0 30px rgba(66,165,245,0.4);
}
body[data-page="novedades"] .node.front { z-index: 5; transform: translateZ(50px); }
body[data-page="novedades"] .node.middle { z-index: 3; opacity: 0.7; transform: translateZ(0); }
body[data-page="novedades"] .node.back { z-index: 1; opacity: 0.4; transform: translateZ(-100px); }
body[data-page="novedades"] .node.approaching { animation: nodeApproach 4s ease-in-out forwards !important; }
@keyframes nodeApproach {
  0% { transform: translateZ(50px) scale(1); }
  40% { transform: translateZ(150px) scale(2); }
  60% { transform: translateZ(150px) scale(2); }
  100% { transform: translateZ(50px) scale(1); }
}

/* ----------------- Banner (Hero) modernizado ----------------- */
body[data-page="novedades"] .novedades-hero {
  position: relative;
  height: 60vh; min-height: 450px;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  background: linear-gradient(135deg, #1e3c72, #2a5298, #1e3c72);
  background-size: 400% 400%;
  animation: gradientShift 10s ease infinite, bannerShimmer 3s ease-in-out infinite;
  box-shadow: inset 0 0 50px rgba(0,0,0,0.2);
}
@keyframes gradientShift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
@keyframes bannerShimmer {
  0% { filter: brightness(1); }
  50% { filter: brightness(1.2); }
  100% { filter: brightness(1); }
}
/* Efecto shimmer */
body[data-page="novedades"] .novedades-hero::after {
  content: '';
  position: absolute; top: 0; left: -150%;
  width: 300%; height: 100%;
  background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,0.2) 50%, transparent 70%);
  transform: skewX(-25deg);
  animation: shimmer 3s infinite;
}
@keyframes shimmer { 0% { left: -150%; } 100% { left: 150%; } }
/* Ocultamos shapes/waves en esta versión */
body[data-page="novedades"] .novedades-shapes,
body[data-page="novedades"] .novedades-waves { display: none; }
body[data-page="novedades"] .novedades-hero-content {
  position: relative; z-index: 10; text-align: center;
  max-width: 900px; margin: 0 auto; padding: 0;
  animation: textAppearSmooth 1.5s ease forwards;
}
@keyframes textAppearSmooth { 0% { opacity: 0; transform: scale(0.95); } 100% { opacity: 1; transform: scale(1); } }
body[data-page="novedades"] .novedades-hero-content h1 {
  font-size: 4rem; font-weight: 700; color: #fff; margin-bottom: 15px;
  font-family: 'Montserrat', sans-serif; letter-spacing: 2px;
  text-shadow: 0 4px 10px rgba(0,0,0,0.3);
}
body[data-page="novedades"] .novedades-hero-content p {
  font-size: 1.5rem; color: rgba(255,255,255,0.9);
  max-width: 600px; margin: 0 auto 30px;
  text-shadow: 0 2px 5px rgba(0,0,0,0.2);
}

/* ================= TIMELINE SECTION ================= */
body[data-page="novedades"] .novedades-content {
  position: relative;
  padding: 80px 0;
  margin-top: 0;
}

/* Contenedor */
body[data-page="novedades"] .novedades-timeline-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 30px;
  position: relative;
}

/* (A PRUEBA DE BALAS) — Línea central dibujada con ::before */
body[data-page="novedades"] .novedades-timeline-container::before {
  content: "";
  position: absolute;
  width: 4px;
  background: linear-gradient(180deg, var(--novedades-primary), var(--novedades-accent));
  top: -50px;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  border-radius: 4px;
}

/* Ocultamos el viejo div .novedades-timeline-center para que no cuente */
body[data-page="novedades"] .novedades-timeline-center { display: none !important; }

/* Ítems */
body[data-page="novedades"] .novedades-timeline-item {
  margin-bottom: 80px;
  position: relative;
  opacity: 0;
  transform: translateY(50px);
  transition: all 0.6s ease;
}
body[data-page="novedades"] .novedades-timeline-item.show {
  opacity: 1; transform: translateY(0);
}
body[data-page="novedades"] .novedades-timeline-item:last-child { margin-bottom: 0; }

/* (A PRUEBA DE BALAS) — Alternado contando SOLO .novedades-timeline-item */
body[data-page="novedades"] .novedades-timeline-container > :nth-child(odd of .novedades-timeline-item) {
  padding-right: calc(50% + 30px);
  text-align: right;
}
body[data-page="novedades"] .novedades-timeline-container > :nth-child(even of .novedades-timeline-item) {
  padding-left: calc(50% + 30px);
}

/* Fecha */
body[data-page="novedades"] .novedades-timeline-date {
  display: inline-block;
  padding: 8px 16px;
  background: var(--novedades-primary);
  color: #fff;
  border-radius: 4px;
  font-weight: 600;
  font-size: 0.9rem;
  margin-bottom: 15px;
  box-shadow: 0 3px 10px rgba(32,85,164,0.2);
  transition: all 0.3s ease;
}
body[data-page="novedades"] .novedades-timeline-item:hover .novedades-timeline-date {
  transform: translateY(-3px);
  box-shadow: 0 5px 15px rgba(32,85,164,0.3);
  background: var(--novedades-primary-light);
}

/* Tarjeta */
body[data-page="novedades"] .novedades-timeline-content {
  background: #fff;
  padding: 25px 30px;
  border-radius: 6px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.06);
  transition: all 0.3s ease;
  position: relative;
  border-top: 3px solid var(--novedades-primary);
}
body[data-page="novedades"] .novedades-timeline-item:hover .novedades-timeline-content {
  transform: translateY(-5px);
  box-shadow: 0 10px 25px rgba(0,0,0,0.08);
  border-top-color: var(--novedades-secondary);
}

/* Flechita de la tarjeta (cuenta solo ítems) */
body[data-page="novedades"] .novedades-timeline-content::before {
  content: '';
  position: absolute;
  width: 16px; height: 16px;
  background: #fff;
  top: 28px;
  transform: rotate(45deg);
  box-shadow: -2px 2px 6px rgba(0,0,0,0.05);
}
body[data-page="novedades"] .novedades-timeline-container > :nth-child(odd of .novedades-timeline-item) .novedades-timeline-content::before {
  right: -8px;
  left: auto;
  box-shadow: 2px -2px 6px rgba(0,0,0,0.05);
}
body[data-page="novedades"] .novedades-timeline-container > :nth-child(even of .novedades-timeline-item) .novedades-timeline-content::before {
  left: -8px;
  right: auto;
}

/* Punto (dot) en la línea */
body[data-page="novedades"] .novedades-timeline-dot {
  position: absolute;
  width: 20px; height: 20px;
  background: var(--novedades-primary);
  border-radius: 50%;
  top: 30px; left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  box-shadow: 0 0 0 4px rgba(32,85,164,0.15);
  transition: all 0.3s ease;
}
body[data-page="novedades"] .novedades-timeline-item:hover .novedades-timeline-dot {
  background: var(--novedades-secondary);
  transform: translateX(-50%) scale(1.2);
  box-shadow: 0 0 0 6px rgba(66,165,245,0.15);
}

/* Texto + links */
body[data-page="novedades"] .novedades-timeline-content p {
  color: var(--novedades-neutral-dark);
  line-height: 1.7;
  margin: 0;
  font-size: 1rem;
}
body[data-page="novedades"] .novedades-timeline-content a {
  color: var(--novedades-primary);
  text-decoration: none;
  font-weight: 600;
  position: relative;
  transition: all 0.3s ease;
}
body[data-page="novedades"] .novedades-timeline-content a::after {
  content: '';
  position: absolute;
  width: 100%; height: 2px;
  background: var(--novedades-primary);
  bottom: -2px; left: 0;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s ease;
}
body[data-page="novedades"] .novedades-timeline-content a:hover {
  color: var(--novedades-secondary);
}
body[data-page="novedades"] .novedades-timeline-content a:hover::after {
  transform: scaleX(1);
  background: var(--novedades-secondary);
}

/* ----------------- Ajuste de anclas (scroll-margin-top) ----------------- */
/* Compatibilidad con ID viejo + nuevos IDs únicos */
#Certificaciones,
#certificaciones-2025-sep-09,
#certificaciones-2024-nov-21 {
  scroll-margin-top: 200px;
}

/* nv-linkfull: link en la línea de abajo, subrayado del ancho del texto */
body[data-page="novedades"] .novedades-timeline-content a.nv-linkfull {
  display: inline-block;   /* crea una cajita para medir bien el ::after */
  width: auto;             /* el ancho del enlace = ancho del texto */
  text-align: inherit;     /* respeta la alineación de la tarjeta */
}

/* forzamos salto de línea antes del link sin ensancharlo */
body[data-page="novedades"] .novedades-timeline-content a.nv-linkfull::before {
  content: "";
  display: block;          /* pone el enlace en la línea de abajo */
}

/* Centrar aprox. el elemento anclado en la pantalla */
body[data-page="novedades"] .novedades-timeline-item:target {
  scroll-margin-top: 45vh;   /* empuja el destino hacia el centro */
  scroll-margin-bottom: 45vh; /* ayuda en navegadores que lo usan */
}