/* =========================
   FONTS CORPORATIVAS
========================= */
@font-face { font-family:'SpyAgency'; src:url('../fonts/spyagency.ttf'); }
@font-face { font-family:'SpyAgencyAcad'; src:url('../fonts/spyagencyacad.ttf'); }

/* =========================
   VARIABLES / BRANDING
========================= */
:root{
  --primary:#4290cd;
  --primary-dark:#3578a8;
  --dark:#373435;
  --white:#ffffff;
  --gray:#6c757d;
  --light:#f8f9fa;
}

/* =========================
   BASE
========================= */
body{
  font-family: "Aptos SemiBold", "Selawik Semibold", Arial, sans-serif;
  color: var(--dark);
  line-height:1.6;
}

/* =========================
   JERARQUÍA TIPOGRÁFICA
========================= */
h1,h2,h3{
  font-family:'SpyAgency',sans-serif;
  text-transform:uppercase;
  letter-spacing:0.5px;
  margin-bottom:15px;
}

h1{
  font-size:2.6rem;
  font-weight:700;
}

h2{
  font-size:2rem;
}

h3{
  font-size:1.5rem;
}

p{
  font-size:1rem;
}

/* =========================
   TEXTOS ESPECIALES
========================= */
.accent-font{
  font-family:'SpyAgencyAcad';
  color:#000;
  -webkit-text-stroke:1px #fff;
  letter-spacing:1px;
}

.light-title{ color:var(--dark); }
.dark-title{ color:var(--white); }
.small-muted{ color:var(--gray); }

/* =========================
   SECCIONES
========================= */
.section{
  padding:80px 0;
}

.bg-light{
  background:var(--light) !important;
}

.bg-dark-custom{
  background:var(--dark);
  color:#fff;
}

/* =========================
   HERO GLOBAL (PRO FIX)
========================= */

.hero{
  position: relative;
  color:#fff;
  padding:120px 0;
  display:flex;
  align-items:center;
  text-align:center;
  overflow:hidden;

  /* 🔥 SOLUCIÓN CLAVE */
  min-height:60vh;
  max-height:700px;
}

/* OVERLAY CORPORATIVO */
.hero::before{
  content:'';
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  background: linear-gradient(
    rgba(55,52,53,0.75),
    rgba(66,144,205,0.65)
  );
  z-index:1;
}

/* CONTENIDO */
.hero .container{
  position:relative;
  z-index:2;
}

.hero h1{
  font-size:2.5rem;
  font-weight:700;
  letter-spacing:1px;
}

.hero p{
  font-size:1.1rem;
  opacity:0.95;
}

/* =========================
   HERO IMÁGENES (FIX)
========================= */

.hero-index{
  background: url('../img/hero/index.webp') center center/cover no-repeat;
}

.hero-services{
  background: url('../img/hero/services.webp') center 30%/cover no-repeat;
}

.hero-cases{
  background: url('../img/hero/cases.webp') center center/cover no-repeat;
}

.hero-team{
  background: url('../img/hero/team.webp') center 25%/cover no-repeat;
}

.hero-about{
  background: url('../img/hero/about.webp') center 30%/cover no-repeat;
}

.hero-pricing{
  background: url('../img/hero/pricing.webp') center center/cover no-repeat;
}

.hero-blog{
  background: url('../img/hero/blog.webp') center center/cover no-repeat;
}

.hero-contact{
  background: url('../img/hero/contact.webp') center 20%/cover no-repeat;
}

/* =========================
   NAVBAR
========================= */
.navbar{
  padding:15px 0;
  box-shadow:0 2px 10px rgba(0,0,0,0.05);
}

.navbar a{
  text-decoration:none;
  color:var(--dark);
  font-weight:600;
  margin-right:20px;
  transition:.2s;
}

.navbar a:hover{
  color:var(--primary);
}

.navbar a.active{
  color:var(--primary);
  border-bottom:2px solid var(--primary);
  padding-bottom:4px;
}

/* =========================
   BOTONES (CONVERSIÓN)
========================= */
.btn-primary-custom{
  background:var(--primary);
  color:#fff;
  border:none;
  padding:12px 25px;
  font-weight:600;
  border-radius:6px;
  transition:.2s;
}

.btn-primary-custom:hover{
  background:var(--primary-dark);
  transform:translateY(-2px);
}

/* =========================
   CARDS / SERVICIOS
========================= */
.service-card{
  background:#fff;
  padding:25px;
  border-radius:12px;
  box-shadow:0 5px 20px rgba(0,0,0,0.05);
  height:100%;
  transition:.3s;
}

.service-card:hover{
  transform:translateY(-8px);
}

.service-icon{
  font-size:40px;
  color:var(--primary);
}

/* =========================
   CARDS GENERALES
========================= */
.card-hover{
  transition:.25s;
}

.card-hover:hover{
  transform:translateY(-6px);
}

/* =========================
   CTA SECTION
========================= */
.cta-section{
  background:var(--dark);
  color:#fff;
  padding:80px 0;
}

/* =========================
   FOOTER
========================= */
footer{
  background:var(--dark) !important;
  color:#fff;
}

footer p{
  margin:0;
}

footer .small{
  opacity:0.8;
}

/* =========================
   WHATSAPP BUTTON ANIMADO
========================= */
@keyframes whatsappPulse {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(0.9);
  }
  100% {
    transform: scale(1);
  }
}
.whatsapp-btn:hover{
  animation: none;
}
.whatsapp-btn{
  position:fixed;
  bottom:20px;
  right:20px;
  width:56px;
  height:56px;
  background:#25D366;
  color:#fff;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 4px 15px rgba(0,0,0,0.2);
  z-index:999;

  /* ANIMACIÓN */
  animation: whatsappPulse 1.2s infinite;
}

/* =========================
   CONTACTOS
========================= */
.contact-card{
  background:#fff;
  border-radius:12px;
  box-shadow:0 8px 25px rgba(0,0,0,0.08);
  max-width:400px;
  margin:auto;
  transition:.3s;
}

.contact-card:hover{
  transform:translateY(-5px);
}
/* =========================
   ANIMACIONES (UX PRO)
========================= */
.fade-in{
  opacity:0;
  transform:translateY(30px);
  transition: all 0.6s ease;
}

.fade-in.visible{
  opacity:1;
  transform:translateY(0);
}

.fade-delay-1 { transition-delay: 0.1s; }
.fade-delay-2 { transition-delay: 0.2s; }
.fade-delay-3 { transition-delay: 0.3s; }
.fade-delay-4 { transition-delay: 0.4s; }

/* =========================
   LOGOS CLIENTES
========================= */
.logo-client{
  max-height:60px;
  opacity:0.8;
  filter:grayscale(100%);
  transition:.3s;
}

.logo-client:hover{
  filter:grayscale(0%);
  opacity:1;
  transform:scale(1.05);
}

/* =========================
   LOGOS MARCAS (PRO)
========================= */

/* CONTENEDOR */
.brands-wrapper{
  overflow: hidden;
  position: relative;
  padding: 20px 0;
}

/* TRACK */
.brands-track{
  display: flex;
  align-items: center;
  gap: 60px;
  width: max-content;
  animation: scrollBrands 25s linear infinite;
}
.brands-track:hover{
  animation-play-state: paused;
}
/* LOGOS */
.brand-logo{
  height:50px;
  opacity:0.6;
  filter: grayscale(100%);
  transition: all 0.4s ease;
}

/* SCROLL SUAVE */
@keyframes scrollBrands {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* EFECTO CENTRO */
.brand-active{
  transform: scale(1.1);
  filter: grayscale(0%);
  opacity:1;
}

/* HOVER (OPCIONAL SUAVE) */
.brand-logo:hover{
  transform: scale(1.08);
  filter: grayscale(0%);
  opacity:1;
}

/* FADE EN BORDES (MEJORADO) */
.brands-wrapper::after{
  content:'';
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  background: linear-gradient(to right, 
    #fff 0%, 
    rgba(255,255,255,0) 15%, 
    rgba(255,255,255,0) 85%, 
    #fff 100%);
  pointer-events:none;
}

/* =========================
   RESPONSIVE HERO FIX
========================= */

@media(max-width:768px){

  .hero{
    padding:80px 20px;
    min-height:50vh;

    /* 🔥 IMPORTANTE: NO romper encuadre */
    background-position: center 25%;
  }

  h1{
    font-size:1.8rem;
  }

  h2{
    font-size:1.5rem;
  }

  .section{
    padding:60px 20px;
  }

  .navbar a{
    margin-right:10px;
    font-size:14px;
  }

}