/* ====== BASE ====== */
*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%}
body{
  font-family:'Poppins',system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  color:#000; background:linear-gradient(135deg,#fff,#f8f4ff);
}
img{max-width:100%;display:block}
.container{max-width:1200px;margin:0 auto;padding:0 20px}

/* ====== ANIMACIONES ====== */
@keyframes fadeInUp{0%{opacity:0;transform:translateY(30px)}100%{opacity:1;transform:translateY(0)}}
@keyframes fadeInRight{0%{opacity:0;transform:translateX(30px)}100%{opacity:1;transform:translateX(0)}}
.animate-up{animation:fadeInUp 0.8s ease-out both}
.animate-right{animation:fadeInRight 1s ease-out both}

/* ====== HEADER ====== */
.site-header{position:sticky;top:0;z-index:1000;background:#fff;box-shadow:0 2px 10px rgba(0,0,0,.05)}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1rem 0}
.logo img{height:28px}
.nav{display:flex;gap:1rem}
.nav a{text-decoration:none;color:#333;font-weight:500}
.nav a:hover{color:#5a25cf;font-weight:700}
.header-actions{display:flex;align-items:center;gap:1rem}
.whatsapp-btn{background:#25D366;color:#fff;text-decoration:none;font-weight:700;display:flex;align-items:center;gap:.5rem;padding:.5rem 1rem;border-radius:50px}
.whatsapp-btn img{width:24px;height:24px}
.hamburger{display:none;flex-direction:column;gap:4px;background:none;border:0;cursor:pointer}
.hamburger .bar{width:20px;height:2px;background:#333;margin-right: 5px;}


/* ====== HERO (55/45) ====== */
.hero{padding:4rem 0}
.hero-inner{display:flex;align-items:center;justify-content:space-between;gap:2rem}
.hero-text{flex:0 0 55%;max-width:55%}
.hero-img{flex:0 0 45%;display:flex;justify-content:center}
.hero-text h1{font-size:clamp(2.2rem,4vw,3.6rem);line-height:1.3;margin-bottom:1.25rem}
.hero-text h1 span{background:linear-gradient(90deg,#5a25cf,#e054c0);color:#fff;padding:0 .4rem;border-radius:12px}
.hero-text p{font-size:clamp(1rem,1.4vw,1.2rem);margin-bottom:1.5rem}
.btn{display:inline-block;background:#5a25cf;color:#fff;text-decoration:none;font-weight:700;padding:.75rem 1.5rem;border-radius:8px;transition:transform .2s, box-shadow .2s}
.btn:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(90,37,207,.3)}
.hero-img img{max-width:100%;height:auto;border-radius:1rem}

/* ====== ABOUT ====== */
.about{padding:4rem 0}
.about-inner{display:flex;align-items:center;justify-content:space-between;gap:2rem;flex-wrap:wrap}
.about-img{flex:1;display:flex;justify-content:center}
.about-img img{max-width:460px;border-radius:2rem}
.about-text{flex:1;max-width:600px}
.about-text h2{font-size:2.2rem;color:#5a25cf;margin-bottom:.5rem}
.about-text h3{font-size:1.6rem;color:#5a25cf;margin:.25rem 0 1rem}
.about-text p{color:#333;line-height:1.6;margin-bottom:1rem}
.about-text strong{color:#5a25cf}
.about-text ul{list-style:none}
.about-text li{margin-bottom:.5rem;font-weight:500}
.about-text li::before{content:"• ";color:#5a25cf}

/* ====== SERVICIOS ====== */
.services{position:relative;padding:4rem 0 5rem}
.services .services-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;pointer-events:none}
.servicios-header{position:relative;z-index:1;text-align:center;color:#fff;max-width:900px;margin:0 auto 2rem;padding:0 16px}
.servicios-header h2{font-size:clamp(1.6rem,3vw,2rem);margin-bottom:.75rem}
.servicios-header p{font-size:1rem;line-height:1.6;opacity:.95}
.services__list{position:relative;z-index:1;display:flex;flex-wrap:wrap;gap:24px;width:100%;max-width:1200px;margin:0 auto;padding:0 16px}
.service-card{
  flex:0 0 calc((100% - (3 * 24px)) / 4);
  display:flex;flex-direction:column;align-items:center;text-align:center;gap:.7rem;
  padding:2rem;border-radius:26px;
  background:linear-gradient(180deg,rgba(255,255,255,.22),rgba(255,255,255,.10));
  border:1px solid rgba(255,255,255,.35);outline:1px solid rgba(255,255,255,.12);
  backdrop-filter:blur(22px) saturate(170%) contrast(105%) brightness(1.05);
  -webkit-backdrop-filter:blur(22px) saturate(170%) contrast(105%) brightness(1.05);
  box-shadow:0 10px 30px rgba(0,0,0,.18);
  transition:transform .25s, box-shadow .25s;min-height:250px;color:#fff
}
.service-card:hover{transform:translateY(-4px);box-shadow:0 18px 44px rgba(0,0,0,.22)}
.service-icon{width:clamp(60px,7vw,80px);height:clamp(60px,7vw,80px);object-fit:contain}
.service-card h3{font-size:clamp(1.2rem,2.4vw,1.7rem);line-height:1.2;margin:0}
.service-card h3 small{font-size:1rem;font-weight:600;opacity:.9}
.service-card p{font-size:clamp(1rem,1.6vw,1.05rem);line-height:1.55;color:#f1f1f1;margin:0}
.servicios-cta{position:relative;z-index:1;display:flex;justify-content:center;margin-top:2rem}
.cta-btn{background:#cf2ab1;color:#fff;text-decoration:none;font-weight:700;padding:.9rem 1.4rem;border-radius:12px;box-shadow:0 8px 24px rgba(224,84,192,.35); margin-top: 40px;}

/* Tablet: 2 columnas */
@media (min-width:769px) and (max-width:1024px){
  .service-card{flex:0 0 calc((100% - 24px) / 2)}
}

/* Mobile: carrusel (snap) */
@media (max-width:768px){
  .services{padding:3rem 0 5rem}
  .services__list{
    --pad:16px;padding:.25rem var(--pad) 1rem var(--pad);
    flex-wrap:nowrap;overflow-x:auto;gap:16px;
    scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
    scroll-behavior:smooth;overscroll-behavior-x:contain
  }
  .service-card{
    flex:0 0 calc(100vw - (2 * var(--pad)));
    max-width:520px;min-height:260px;border-radius:22px;scroll-snap-align:start
  }
  .service-icon{width:clamp(68px,12vw,90px);height:clamp(68px,12vw,90px)}
}

.clientes-section {
  background: #f5f5f5;
  padding: 3rem 0;
  overflow: hidden;
}

.clientes-slider {
  width: 100%;
  overflow: hidden;
  position: relative;
}

.clientes-track {
  display: flex;
  width: calc(250px * 16); /* 16 logos * ancho estimado */
  animation: scroll 40s linear infinite;
}

.clientes-track img {
  height: 40px; /* tamaño ajustable */
  margin: 0 40px;
  object-fit: contain;
  flex-shrink: 0;
  transition: transform 0.3s ease;
}

.clientes-track img:hover {
  transform: scale(1.2);
}

@keyframes scroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
/* ====== PARTNERS ====== */
.partners{padding:3rem 0; background:#f5f5f5;}
.partners__title{text-align:center;font-weight:800;color:#5a25cf;font-size:clamp(1.25rem,2.4vw,1.75rem);margin-bottom:2rem}
.partners__grid{display:flex;flex-wrap:wrap;justify-content:center;gap:2rem}
.partner img{height:clamp(55px,8vw,80px);width:auto;object-fit:contain;transition:transform .3s ease}
.partner:hover img{transform:scale(1.12)}
@media (max-width:768px){.partners__grid{gap:2rem}.partner img{height:clamp(45px,10vw,70px)}}

/* ====== CONTACTO ====== */
.contact-section{background:url("assets/images/fondo-contactos.jpg") center/cover no-repeat;padding:4rem 2rem}
.contact-container{max-width:1200px;margin:0 auto;display:grid;grid-template-columns:1fr auto;gap:2rem;align-items:center}
.contact-title{font-size:clamp(2.4rem,5vw,3.5rem);font-weight:800;color:#5a25cf;margin-bottom:.5rem}
.contact-subtitle{font-size:clamp(1.2rem,3vw,1.6rem);font-weight:600;color:#5a25cf;margin-bottom:1.5rem}
.contact-form{display:flex;flex-direction:column;gap:1rem}
.contact-form input,.contact-form textarea{width:100%;background:#eaeaea;border:0;outline:0;padding:1rem;border-radius:12px;font-size:1rem}
.contact-btn{background:linear-gradient(90deg,#9a4bff,#e054c0);color:#fff;font-weight:700;border:0;padding:.7rem 1.5rem;border-radius:8px;cursor:pointer;transition:transform .2s, box-shadow .2s}
.contact-btn:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(157,75,255,.3)}
.contact-image img{max-width:350px;height:auto}
@media (max-width:992px){.contact-image img{max-width:250px}}
@media (max-width:576px){.contact-container{grid-template-columns:1fr;text-align:center}.contact-image{display:none}.contact-btn{align-self:center}}

/* ====== FLOATING WHATSAPP (solo mobile) ====== */
.floating-whatsapp{display:none;position:fixed;bottom:20px;right:20px;z-index:1100;background:#25D366;color:#fff;text-decoration:none;padding:.8rem 1rem;border-radius:50px;box-shadow:0 2px 10px rgba(0,0,0,.2);align-items:center;gap:.5rem}
.floating-whatsapp img{width:24px;height:24px}

/* ====== RESPONSIVE HEADER & HERO ====== */
@media (max-width:768px){
  .hamburger{display:flex}
  .nav{
    display:none;position:absolute;left:0;top:100%;width:100%;background:#fff;border-radius:0 0 10px 10px;
    box-shadow:0 4px 6px rgba(0,0,0,.1);flex-direction:column;align-items:flex-start;padding:1rem;z-index:1050
  }
  .nav.active{display:flex}
  .header-actions{display:none}
  .whatsapp-text{display:none}
  .floating-whatsapp{display:flex}
  .hero-inner{flex-direction:column;text-align:center;gap:1.75rem}
  .hero-text{flex:unset;max-width:700px}
  .hero-img{flex:unset;width:100%}
  .btn{font-size:.95rem}
}
/* Botón WhatsApp flotante visible en todas las vistas */
.floating-whatsapp{
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  background: #25d366;
  border-radius: 50%;
  box-shadow: 0 4px 10px rgba(0,0,0,.25);
  transition: transform .2s ease-in-out;
}
.floating-whatsapp:hover{ transform: scale(1.08); }
.floating-whatsapp img{ width: 32px; height: 32px; object-fit: contain; }

/* Ajustes en mobile */
@media (max-width: 768px){
  .floating-whatsapp{ width: 50px; height: 50px; right: 15px; bottom: 15px; }
  .floating-whatsapp img{ width: 26px; height: 26px; }
}

/* ====== MOBILE VIEWPORT FIXES ====== */
html, body {
  width: 100%;
  overflow-x: hidden;        /* quita scroll lateral por desbordes */
}

/* imágenes y SVG nunca más grandes que su contenedor */
img, svg, video, canvas {
  max-width: 100%;
  height: auto;
}

/* evita que algún elemento “estire” el viewport por márgenes/anchos */
* {
  box-sizing: border-box;
}
[style*="width: 100vw"] { width: 100%; }  /* 100vw puede generar overflow por scrollbars */

/* Header / nav mobile: que no se “salga” del ancho */
@media (max-width: 768px) {
  header, .site-header, .header-inner { max-width: 100%; }
  #nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;               /* en vez de width:100% (evita sumar paddings) */
    max-width: 100%;
    overflow-x: hidden;
  }
}

/* Botón de WhatsApp flotante: que no empuje layout */
.floating-whatsapp {
  position: fixed;
  inset: auto 16px 16px auto;   /* right/bottom 16px */
  transform: translateZ(0);     /* evita “píxeles fantasmas” */
}

/* Sección Servicios: fondo absoluto sin afectar layout */
.services .services-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}

/* Carrusel de clientes: que la pista no marque ancho de página */
.clients__mask {
  overflow: hidden;
}
.clients__track {
  will-change: transform;
  transform: translateX(0);   /* el transform no afecta el ancho del documento */
}
.client img {
  height: clamp(32px, 6vw, 56px);  /* logos un poco más grandes en mobile */
  width: auto;
}