/* ==========================================================================
   HOME PAGE SPECIFIC STYLES
   ========================================================================== */

/* ===== HERO SECTION ===== */
.hero-section {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding-top: var(--header-height);
  background: linear-gradient(135deg, var(--color-azul-oscuro) 0%, var(--color-azul-marino) 100%);
}

.hero-background {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  overflow: hidden;
  z-index: 0;
}

/* Partículas doradas animadas */
.hero-particles {
  position: absolute;
  width: 100%;
  height: 100%;
  background-image: 
    radial-gradient(2px 2px at 20% 30%, rgba(255, 194, 0, 0.8), transparent),
    radial-gradient(2px 2px at 60% 70%, rgba(255, 194, 0, 0.6), transparent),
    radial-gradient(1px 1px at 50% 50%, rgba(255, 194, 0, 0.4), transparent),
    radial-gradient(2px 2px at 80% 10%, rgba(255, 194, 0, 0.7), transparent),
    radial-gradient(1px 1px at 90% 60%, rgba(255, 194, 0, 0.5), transparent),
    radial-gradient(2px 2px at 30% 80%, rgba(255, 194, 0, 0.6), transparent);
  background-size: 200% 200%;
  animation: particles-float 20s ease-in-out infinite;
  opacity: 0.6;
}

@keyframes particles-float {
  0%, 100% {
    background-position: 0% 0%, 100% 100%, 50% 50%, 100% 0%, 0% 100%, 50% 100%;
  }
  50% {
    background-position: 100% 100%, 0% 0%, 100% 0%, 0% 100%, 100% 0%, 0% 50%;
  }
}

.hero-content {
  position: relative;
  z-index: 1;
  text-align: center;
  color: var(--color-blanco);
  max-width: 900px;
  padding: 0 var(--spacing-md);
}

.hero-title {
  font-size: var(--text-6xl);
  font-weight: 800;
  color: var(--color-blanco);
  margin-bottom: var(--spacing-md);
  line-height: 1.1;
}

.text-dorado {
  color: var(--color-dorado);
  position: relative;
  display: inline-block;
}

.hero-subtitle {
  font-size: var(--text-xl);
  color: rgba(255, 255, 255, 0.9);
  margin-bottom: var(--spacing-xl);
  line-height: 1.6;
  font-weight: 300;
}

.hero-cta {
  display: flex;
  gap: var(--spacing-md);
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: var(--spacing-xl);
}

.hero-badges {
  display: flex;
  gap: var(--spacing-sm);
  justify-content: center;
  flex-wrap: wrap;
}

/* Scroll indicator */
.scroll-indicator {
  position: absolute;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1;
}

.scroll-icon {
  width: 30px;
  height: 50px;
  border: 2px solid rgba(255, 194, 0, 0.5);
  border-radius: 20px;
  position: relative;
}

.scroll-icon::before {
  content: '';
  position: absolute;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  width: 6px;
  height: 6px;
  background: var(--color-dorado);
  border-radius: 50%;
  animation: scroll-down 2s infinite;
}

@keyframes scroll-down {
  0% {
    top: 10px;
    opacity: 1;
  }
  100% {
    top: 30px;
    opacity: 0;
  }
}

/* ===== IMPACT STATS ===== */
.impact-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--spacing-xl);
  text-align: center;
}

.stat-item {
  padding: var(--spacing-lg);
}

.stat-number {
  font-family: var(--font-titulos);
  font-size: var(--text-5xl);
  font-weight: 800;
  color: var(--color-azul-marino);
  margin-bottom: var(--spacing-xs);
  line-height: 1;
}

.stat-label {
  font-size: var(--text-base);
  color: var(--color-gris-texto);
  font-weight: 500;
}

/* ===== SECTION INTRO ===== */
.section-intro {
  font-size: var(--text-xl);
  color: var(--color-gris-texto);
  max-width: 700px;
  margin: 0 auto var(--spacing-lg);
  font-weight: 300;
}

.section-blue .section-intro {
  color: rgba(255, 255, 255, 0.9);
}

/* ===== SERVICES GRID ===== */
.services-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: var(--spacing-xl);
  margin-top: var(--spacing-2xl);
}

.service-card {
  background: rgba(255, 255, 255, 0.95);
  border-radius: var(--border-radius-xl);
  padding: var(--spacing-xl);
  border: 2px solid transparent;
  transition: all var(--transition-normal);
  position: relative;
}

.service-card:hover {
  transform: translateY(-10px);
  border-color: var(--color-dorado);
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.2);
}

.service-featured {
  border-color: var(--color-dorado);
  box-shadow: 0 10px 30px rgba(255, 194, 0, 0.3);
}

.featured-badge {
  position: absolute;
  top: -12px;
  right: 30px;
  background: linear-gradient(135deg, var(--color-dorado) 0%, var(--color-dorado-oscuro) 100%);
  color: var(--color-azul-oscuro);
  padding: 0.375rem 1rem;
  border-radius: var(--border-radius-full);
  font-size: var(--text-sm);
  font-weight: 700;
  font-family: var(--font-titulos);
  box-shadow: 0 4px 10px rgba(255, 194, 0, 0.4);
}

.service-header {
  margin-bottom: var(--spacing-md);
}

.service-icon {
  font-size: 3rem;
  margin-bottom: var(--spacing-sm);
}

.service-for {
  font-size: var(--text-sm);
  color: var(--color-dorado);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.service-title {
  font-size: var(--text-2xl);
  color: var(--color-azul-oscuro);
  margin-bottom: var(--spacing-sm);
}

.service-description {
  color: var(--color-gris-texto);
  margin-bottom: var(--spacing-md);
  line-height: 1.7;
}

.service-features {
  list-style: none;
  padding: 0;
  margin: var(--spacing-md) 0;
}

.service-features li {
  padding: 0.5rem 0;
  color: var(--color-gris-texto);
  font-size: var(--text-base);
  border-bottom: 1px solid rgba(0, 45, 114, 0.1);
}

.service-features li:last-child {
  border-bottom: none;
}

.service-duration {
  font-size: var(--text-sm);
  color: var(--color-azul-marino);
  font-weight: 600;
  margin: var(--spacing-md) 0;
  padding: 0.5rem;
  background: rgba(0, 45, 114, 0.05);
  border-radius: var(--border-radius-md);
  text-align: center;
}

.service-card .btn {
  width: 100%;
  margin-top: var(--spacing-md);
}

/* ===== QUINTUPLE IMPACT ===== */
.quintuple-impact {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--spacing-3xl);
  align-items: center;
}

.impact-visual {
  display: flex;
  justify-content: center;
  align-items: center;
}

.impact-diagram {
  max-width: 100%;
  height: auto;
  filter: drop-shadow(0 10px 30px rgba(0, 0, 0, 0.1));
}

.impact-circle {
  cursor: pointer;
  transition: all var(--transition-normal);
}

.impact-circle:hover {
  transform: scale(1.1);
}

.impact-description {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
}

.impact-item {
  display: flex;
  gap: var(--spacing-md);
  align-items: flex-start;
  padding: var(--spacing-md);
  background: var(--color-gris-fondo);
  border-radius: var(--border-radius-lg);
  transition: all var(--transition-fast);
}

.impact-item:hover {
  background: var(--color-blanco);
  box-shadow: var(--shadow-md);
  transform: translateX(5px);
}

.impact-icon {
  width: 50px;
  height: 50px;
  border-radius: var(--border-radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  flex-shrink: 0;
}

.impact-content h4 {
  font-size: var(--text-lg);
  color: var(--color-azul-oscuro);
  margin-bottom: 0.5rem;
}

.impact-content p {
  font-size: var(--text-base);
  color: var(--color-gris-texto);
  margin: 0;
  line-height: 1.6;
}

/* ===== METHODOLOGY TIMELINE ===== */
.methodology-timeline {
  max-width: 800px;
  margin: 0 auto;
  position: relative;
}

.methodology-timeline::before {
  content: '';
  position: absolute;
  left: 30px;
  top: 0;
  bottom: 0;
  width: 4px;
  background: linear-gradient(to bottom, var(--color-dorado), var(--color-azul-marino));
}

.timeline-item {
  display: flex;
  gap: var(--spacing-lg);
  margin-bottom: var(--spacing-xl);
  position: relative;
}

.timeline-marker {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-titulos);
  font-size: var(--text-2xl);
  font-weight: 800;
  color: var(--color-blanco);
  flex-shrink: 0;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
  z-index: 1;
}

.timeline-content {
  flex: 1;
  background: var(--color-blanco);
  padding: var(--spacing-lg);
  border-radius: var(--border-radius-lg);
  box-shadow: var(--shadow-md);
  border-left: 4px solid var(--color-dorado);
}

.timeline-content h3 {
  font-size: var(--text-xl);
  color: var(--color-azul-oscuro);
  margin-bottom: var(--spacing-sm);
}

.timeline-content p {
  color: var(--color-gris-texto);
  margin: 0;
  line-height: 1.7;
}

/* ===== GLOBAL MAP ===== */
.global-map {
  max-width: 1000px;
  margin: 0 auto;
}

.map-container {
  background: var(--color-gris-fondo);
  border-radius: var(--border-radius-xl);
  padding: var(--spacing-xl);
  box-shadow: var(--shadow-lg);
}

.world-map {
  width: 100%;
  height: auto;
}

.map-legend {
  display: flex;
  justify-content: center;
  gap: var(--spacing-lg);
  margin-top: var(--spacing-lg);
  flex-wrap: wrap;
}

.legend-item {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  font-size: var(--text-sm);
  font-weight: 500;
}

.legend-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  animation: pulse 2s infinite;
}

/* ===== PROJECTS CAROUSEL ===== */
.projects-carousel {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: var(--spacing-lg);
}

.project-card {
  background: var(--color-blanco);
  border-radius: var(--border-radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  transition: all var(--transition-normal);
  border: 2px solid transparent;
}

.project-card:hover {
  transform: translateY(-8px);
  box-shadow: var(--shadow-xl);
  border-color: var(--color-dorado);
}

.project-image {
  height: 180px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.project-emoji {
  font-size: 4rem;
  filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.3));
}

.project-content {
  padding: var(--spacing-lg);
}

.project-badges {
  margin-bottom: var(--spacing-sm);
}

.project-title {
  font-size: var(--text-xl);
  color: var(--color-azul-oscuro);
  margin-bottom: var(--spacing-sm);
}

.project-description {
  color: var(--color-gris-texto);
  font-size: var(--text-base);
  line-height: 1.6;
  margin-bottom: var(--spacing-md);
}

.project-stats {
  display: flex;
  gap: var(--spacing-lg);
  margin: var(--spacing-md) 0;
  padding: var(--spacing-sm) 0;
  border-top: 1px solid rgba(0, 45, 114, 0.1);
  border-bottom: 1px solid rgba(0, 45, 114, 0.1);
}

.project-stats .stat {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.project-stats .stat strong {
  font-size: var(--text-2xl);
  font-family: var(--font-titulos);
  color: var(--color-azul-marino);
  line-height: 1;
}

.project-stats .stat span {
  font-size: var(--text-sm);
  color: var(--color-gris-texto);
}

.project-impact-mini {
  display: flex;
  gap: 0.5rem;
  font-size: 1.25rem;
  margin-top: var(--spacing-sm);
}

.project-impact-mini span {
  cursor: help;
}

/* ===== PROGRAMS GRID ===== */
.programs-grid {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-sm);
  justify-content: center;
}

.program-badge {
  padding: 0.75rem 1.5rem;
  background: var(--color-gris-fondo);
  border: 2px solid var(--color-azul-marino);
  border-radius: var(--border-radius-lg);
  font-family: var(--font-titulos);
  font-weight: 600;
  font-size: var(--text-base);
  color: var(--color-azul-marino);
  transition: all var(--transition-fast);
}

.program-badge:hover {
  background: var(--color-azul-marino);
  color: var(--color-blanco);
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}

/* ===== CTA FINAL ===== */
.cta-final h2 {
  color: var(--color-blanco);
  font-size: var(--text-4xl);
}

/* ===== RESPONSIVE ===== */
@media (max-width: 1024px) {
  .quintuple-impact {
    grid-template-columns: 1fr;
  }
  
  .impact-visual {
    order: -1;
  }
}

@media (max-width: 768px) {
  .hero-title {
    font-size: var(--text-4xl);
  }
  
  .hero-subtitle {
    font-size: var(--text-lg);
  }
  
  .hero-cta {
    flex-direction: column;
  }
  
  .hero-cta .btn {
    width: 100%;
  }
  
  .services-grid {
    grid-template-columns: 1fr;
  }
  
  .impact-stats {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-lg);
  }
  
  .methodology-timeline::before {
    left: 20px;
  }
  
  .timeline-marker {
    width: 50px;
    height: 50px;
    font-size: var(--text-xl);
  }
  
  .projects-carousel {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 480px) {
  .impact-stats {
    grid-template-columns: 1fr;
  }
  
  .stat-number {
    font-size: var(--text-4xl);
  }
  
  .hero-badges {
    justify-content: center;
  }
  
  .hero-badges .badge {
    font-size: var(--text-xs);
    padding: 0.25rem 0.625rem;
  }
}