/* =========================
   INDEX (index.css) — solo portada
   ========================= */

/* HERO con gradiente animado */
.hero-modern{
  min-height:calc(100vh - 80px);
  margin-top:-80px; padding-top:160px;
  background:var(--gc-gradient); background-size:200% 200%;
  animation:gradientShift 10s ease infinite; position:relative; display:flex; align-items:center; overflow:hidden;
}
@keyframes gradientShift{
  0%{ background-position:0% 50%; }
  50%{ background-position:100% 50%; }
  100%{ background-position:0% 50%; }
}
.hero-modern::before{
  content:''; position:absolute; inset:0; background:rgba(0,0,0,0.3); z-index:1;
}
.hero-content{ position:relative; z-index:2; color:#fff; padding-top:0; }
.hero-title{ font-size:clamp(2.5rem, 6vw, 4.5rem); font-weight:900; margin-bottom:1.5rem; letter-spacing:-0.02em; text-shadow:2px 2px 4px rgba(0,0,0,0.3); }
.hero-subtitle{ font-size:clamp(1.1rem, 2vw, 1.5rem); font-weight:300; margin-bottom:2.5rem; opacity:.95; }

/* Resalte de texto en hero */
.hero-highlight{
  background:linear-gradient(90deg, #ffffff 0%, #B3E5FC 100%);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
}

/* Elementos flotantes del hero */
.floating-shapes{ position:absolute; width:100%; height:100%; overflow:hidden; z-index:1; }
.shape{ position:absolute; opacity:.1; }
.shape-1{
  width:300px; height:300px; background:#fff;
  border-radius:30% 70% 70% 30% / 30% 30% 70% 70%;
  top:10%; right:10%; animation:float 6s ease-in-out infinite;
}
.shape-2{
  width:200px; height:200px; background:#fff; border-radius:50%;
  bottom:20%; left:5%; animation:float 8s ease-in-out infinite reverse;
}
@keyframes float{
  0%,100%{ transform:translateY(0) rotate(0deg); }
  50%{ transform:translateY(-20px) rotate(10deg); }
}

/* Sección Servicios (id=servicios) */
#servicios{ padding:100px 0; background:#ffffff; position:relative; }

/* Stats */
.stats-section{
  background:var(--gc-gradient-reverse); padding:100px 0; position:relative; overflow:hidden;
}
.stats-section::before{
  content:''; position:absolute; inset:0;
  background:url('data:image/svg+xml,<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg"><defs><pattern id="grid" width="100" height="100" patternUnits="userSpaceOnUse"><path d="M 100 0 L 0 0 0 100" fill="none" stroke="white" stroke-width="0.5" opacity="0.1"/></pattern></defs><rect width="100%" height="100%" fill="url(%23grid)"/></svg>');
  opacity:.1;
}
.stat-card{
  text-align:center; color:#fff; padding:2rem; border-radius:20px; background:rgba(255,255,255,0.1);
  backdrop-filter:blur(10px); transition:transform .3s ease;
}
.stat-card:hover{ transform:translateY(-10px); background:rgba(255,255,255,0.15); }
.stat-number{
  font-size:3.5rem; font-weight:900;
  background:linear-gradient(135deg, #fff 0%, #f0f0f0 100%);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
}
.stat-label{ font-size:1.1rem; opacity:.9; margin-top:.5rem; }

/* Portafolio */
.portfolio-grid{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(280px, 1fr));
  gap:1.5rem; padding:2rem 0;
}
.portfolio-item{
  position:relative; border-radius:20px; overflow:hidden; aspect-ratio:4/3; cursor:pointer; border:2px solid transparent;
  transition:all .3s ease;
  background:#fff;
}
.portfolio-item:hover{ border-color:var(--gc-primary); box-shadow:0 10px 30px rgba(0,188,212,0.2); }
.portfolio-item img{
  display:block; width:100%; height:100%; object-fit:contain; object-position:center;
  background:#fff; transition:transform .5s ease;
}
.portfolio-overlay{
  position:absolute; inset:0; background:linear-gradient(to top, rgba(25,118,210,0.9) 0%, transparent 60%);
  opacity:0; transition:opacity .3s ease; display:flex; flex-direction:column; justify-content:flex-end; padding:1.5rem; color:#fff;
}
.portfolio-overlay .fw-semibold,
.portfolio-overlay .small,
.portfolio-overlay .fw-bold{
  text-shadow:0 1px 2px rgba(0,0,0,0.8);
}
.portfolio-item:hover img{ transform:scale(1.1); }
.portfolio-item:hover .portfolio-overlay{ opacity:1; }

/* CTA */
.cta-section{
  background:var(--gc-gradient); padding:100px 0; text-align:center; color:#fff; position:relative; overflow:hidden;
}
.cta-section::before{
  content:''; position:absolute; top:-50%; right:-50%; width:200%; height:200%;
  background:radial-gradient(circle, rgba(255,255,255,0.1) 1px, transparent 1px);
  background-size:50px 50px; animation:moveGrid 20s linear infinite;
}
@keyframes moveGrid{
  0%{ transform:translate(0,0); }
  100%{ transform:translate(50px,50px); }
}

/* Responsive específico de portada */
@media (max-width:768px){
  .hero-modern{ min-height:80vh; padding-top:180px; }
  .hero-title{ font-size:2.5rem; }
  .stats-section{ padding:60px 0; }
  .stat-number{ font-size:2.5rem; }
}