/* ==========================================================
   effects.css — Replica los efectos del HTML Tailwind
   (sin tocar tu HTML)
   ========================================================== */

/* Material Symbols parecido al Tailwind */
.material-symbols-outlined{
  font-variation-settings: 'FILL' 0,'wght' 300,'GRAD' 0,'opsz' 24;
  line-height: 1;
}

/* ==========================================================
   Keyframes EXACTOS
   ========================================================== */
@keyframes fadeInUp{
  0%{ opacity: 0; transform: translateY(30px); }
  100%{ opacity: 1; transform: translateY(0); }
}
@keyframes pulseSlow{
  0%,100%{ opacity: 1; transform: scale(1); }
  50%{ opacity: .8; transform: scale(1.05); }
}
@keyframes reveal{
  0%{ width: 0; }
  100%{ width: 100%; }
}

/* ==========================================================
   Header blur + borde (como .nav-blur + border)
   ========================================================== */
.site-header{
  position: sticky;
  top: 0;
  z-index: 50;
  backdrop-filter: blur(12px);
  background-color: rgba(10,17,24,.9);
  border-bottom: 1px solid rgba(255,255,255,.10);
}

/* ==========================================================
   Logo / marca: “group-hover” del Tailwind (sin group)
   - icono gira 360 en el original
   ========================================================== */
.header-logo img{
 
  transform-origin: 50% 50%;
  will-change: transform;
}
.site-header:hover .header-logo img{
  transform: rotate(360deg);
}

/* Tracking del nombre al hover */
.brand-name{
  transition: letter-spacing 350ms ease;
}
.site-header:hover .brand-name{
  letter-spacing: .12em;
}

/* ==========================================================
   Nav underline tipo after:w-full
.header-nav .nav-link{
  position: relative;
  display: inline-block;
  transition: color 300ms ease;
}
.header-nav .nav-link::after{
  content:"";
  position:absolute;
  left:0;
  bottom:-6px;F
  width:0;
  height:2px;
  background: rgba(197,160,89,1);
  transition: width 300ms ease;
}
.header-nav .nav-link:hover{
  color: rgba(197,160,89,1);
}
.header-nav .nav-link:hover::after{
  width:100%;
}

/* CTA del nav: hover scale + sombra */
.header-nav .nav-cta{
  transition: transform 300ms ease, box-shadow 300ms ease, background-color 300ms ease;
  will-change: transform;
}
.header-nav .nav-cta:hover{
  transform: scale(1.05);
  box-shadow: 0 12px 28px rgba(197,160,89,.18);
}
.header-nav .nav-cta:active{
  transform: scale(.95);
}

/* ==========================================================
   Hero: parallax + overlay parecido al hero-gradient
   ========================================================== */
.hero-bg{
  background-position:center;
  background-repeat:no-repeat;
  background-size:cover;
}
@media (min-width:1024px){
  .hero-bg{ background-attachment: fixed; }
}

/* Si tu overlay existe, le damos el gradient del original */
.hero-overlay{
  background: linear-gradient(to right, rgba(10,17,24,.9) 0%, rgba(10,17,24,.4) 100%);
}

/* Línea reveal (como .animate-reveal origin-left) */
.hero-line{
  position: relative;
  overflow: hidden;
}
.hero-line::after{
  content:"";
  position:absolute;
  top:0; left:0; bottom:0;
  width:0;
  background: rgba(197,160,89,1);
  animation: reveal 1.5s ease-out forwards;
}

/* ==========================================================
   Botones glow (como .btn-glow)
   ========================================================== */
.btn,
.form-submit,
.nav-cta,
.mobile-cta{
  transition: transform 300ms ease, box-shadow 300ms ease, background-color 300ms ease, border-color 300ms ease;
}
.btn:hover,
.form-submit:hover,
.nav-cta:hover,
.mobile-cta:hover{
  box-shadow: 0 0 20px rgba(197,160,89,.4);
  transform: scale(1.03);
}
.btn:active,
.form-submit:active,
.nav-cta:active,
.mobile-cta:active{
  transform: scale(.95);
}

/* ==========================================================
   Cards: hover translate (como hover:-translate-y-2)
   ========================================================== */
.info-card,
.area-card,
.team-card{
  transition: transform 500ms ease, background-color 500ms ease, box-shadow 500ms ease;
  will-change: transform;
}
.info-card:hover,
.area-card:hover,
.team-card:hover{
  transform: translateY(-8px);
  box-shadow: 0 20px 60px rgba(0,0,0,.35);
}

/* Iconos con pulseSlow (como animate-pulseSlow) */
.info-icon .material-symbols-outlined{
  animation: pulseSlow 3s ease-in-out infinite;
}

/* ==========================================================
   Scroll reveal EXACTO (pausado hasta is-visible)
   ========================================================== */
.scroll-reveal{
  opacity: 0;
  animation: fadeInUp .8s ease-out forwards;
  animation-play-state: paused;
}

/* Stagger delays exactos como el original */
.stagger-1{ animation-delay: .1s; }
.stagger-2{ animation-delay: .2s; }
.stagger-3{ animation-delay: .3s; }
.stagger-4{ animation-delay: .4s; }

/* Cuando entra en pantalla */
@media (prefers-reduced-motion: no-preference){
  .is-visible{
    animation-play-state: running;
  }
}

/* Footer links translate-x (como hover:translate-x-2) */
.footer-link{
  display:inline-block;
  transition: transform 300ms ease, color 300ms ease;
}
.footer-link:hover{
  transform: translateX(8px);
  color: rgba(197,160,89,1);
}

/* Accesibilidad */
@media (prefers-reduced-motion: reduce){
  .scroll-reveal{
    opacity: 1 !important;
    animation: none !important;
    transform: none !important;
  }
  .info-icon .material-symbols-outlined{
    animation: none !important;
  }
  .btn:hover,.nav-cta:hover,.form-submit:hover,.mobile-cta:hover,
  .info-card:hover,.area-card:hover,.team-card:hover{
    transform:none !important;
    box-shadow:none !important;
  }
}


/* ==========================================================
   STAGGER GENÉRICO (para Áreas, Equipo y Footer)
   ========================================================== */

/* Delay por variable --i (0,1,2...) */
.stagger .scroll-reveal{
  animation-delay: calc(var(--i, 0) * 0.10s);
}

/* Un toque más lento si querés “premium” */
.stagger-slow .scroll-reveal{
  animation-delay: calc(var(--i, 0) * 0.14s);
}



/* ==========================================================
   ¿POR QUÉ ELEGIRNOS? — EFECTO EXACTO DEL HTML ORIGINAL
   ========================================================== */

/* Estado inicial */
#servicios .scroll-reveal{
  opacity: 0;
  animation: fadeInUp 0.8s ease-out forwards;
  animation-play-state: paused;
}

/* Delays EXACTOS */
#servicios .stagger-1{ animation-delay: 0.1s; }
#servicios .stagger-2{ animation-delay: 0.2s; }
#servicios .stagger-3{ animation-delay: 0.3s; }
#servicios .stagger-4{ animation-delay: 0.4s; }

/* Al entrar en viewport */
#servicios .is-visible{
  animation-play-state: running;
}

/* Hover EXACTO */
#servicios .info-card{
  transition: transform 500ms ease, background-color 500ms ease, box-shadow 500ms ease;
}

#servicios .info-card:hover{
  transform: translateY(-8px);
  box-shadow: 0 20px 60px rgba(0,0,0,.35);
}

#servicios .info-card h4{
  transition: color 300ms ease;
}

#servicios .info-card:hover h4{
  color: #C5A059;
}

/* Icono pulsando lento */
#servicios .info-icon .material-symbols-outlined{
  animation: pulseSlow 3s ease-in-out infinite;
}

.site-header:hover .header-logo img{
  transform: rotate(360deg);
}