:root{
  --primary:#0a2540;
  --secondary:#102a43;
  --accent:#16a34a;
  --text:#1f2933;
  --gray:#6b7280;
  --bg:#f7f9fc;
}

*{
  margin:0;
  padding:0;
  box-sizing:border-box;
  font-family:'Poppins', sans-serif;
}

body{
  background:var(--bg);
  color:var(--text);
}

/* GENERAL */
.container{
  max-width:1200px;
  margin:auto;
  padding:0 24px;
}

a{
  text-decoration:none;
}


/* NAVBAR PREMIUM */
.nav{
  position:fixed;
  top:0;
  width:100%;
  z-index:1000;
  background:rgba(10,37,64,.85);
  backdrop-filter:blur(12px);
  border-bottom:1px solid rgba(255,255,255,.08);
  transition:.4s ease;
}

.nav.scrolled{
  background:#0a2540;
  box-shadow:0 10px 30px rgba(0,0,0,.35);
}

.nav-content{
  display:flex;
  align-items:center;
  justify-content:space-between;
  height:90px;
}

.logo-box img{
  height:46px;
  transition:.3s;
}

.logo-box img:hover{
  transform:scale(1.05);
}

/* MENU */
.menu{
  display:flex;
  gap:36px;
}

.menu a{
  color:#e5e7eb;
  font-weight:500;
  position:relative;
  padding:4px 0;
}

.menu a::after{
  content:"";
  position:absolute;
  left:0;
  bottom:-6px;
  width:0;
  height:2px;
  background:#16a34a;
  transition:.3s;
}

.menu a:hover::after{
  width:100%;
}

/* CTA BUTTON */
.nav-cta{
  background:#16a34a;
  color:white;
  padding:12px 22px;
  border-radius:999px;
  font-weight:600;
  box-shadow:0 10px 20px rgba(22,163,74,.4);
  transition:.3s;
}

.nav-cta:hover{
  transform:translateY(-2px);
  box-shadow:0 14px 28px rgba(22,163,74,.6);
}

/* RESPONSIVE */
@media(max-width:900px){
  .menu{
    display:none;
  }
}























/* HERO */
.hero{
  padding:160px 0 120px;
  background:linear-gradient(120deg,var(--primary),var(--secondary));
  color:white;
}

.hero-grid{
  display:grid;
  grid-template-columns:1.2fr 0.8fr;
  gap:60px;
}

.hero-text h2{
  font-size:46px;
  line-height:1.2;
  margin-bottom:20px;
}

.hero-text span{
  color:#a7f3d0;
}

.hero-text p{
  color:#e5e7eb;
  font-size:18px;
  margin-bottom:32px;
}

.hero-buttons{
  display:flex;
  gap:16px;
}

/* BUTTONS */
.btn-primary{
  background:var(--accent);
  color:white;
  padding:14px 28px;
  border-radius:10px;
  font-weight:600;
}

.btn-primary:hover{
  opacity:0.9;
}

.btn-secondary{
  border:1px solid white;
  color:white;
  padding:14px 28px;
  border-radius:10px;
}

/* HERO CARD */
.hero-card{
  background:white;
  color:var(--text);
  border-radius:18px;
  padding:32px;
  box-shadow:0 20px 40px rgba(0,0,0,.2);
}

.card-title{
  font-weight:600;
  margin-bottom:16px;
}

.hero-card li{
  margin-bottom:10px;
}

/* SERVICES */
.services{
  padding:120px 0;
}

.services h3{
  text-align:center;
  font-size:36px;
  margin-bottom:12px;
}

.subtitle{
  text-align:center;
  color:var(--gray);
  margin-bottom:60px;
}

.services-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:24px;
}

.service-card{
  background:white;
  padding:32px;
  border-radius:16px;
  box-shadow:0 10px 30px rgba(0,0,0,.08);
  transition:.3s;
}

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

/* VALUE */
.value{
  background:white;
  padding:100px 0;
}

.value-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:60px;
}

.value-list li{
  margin-bottom:14px;
}

/* CTA */
.cta{
  background:var(--primary);
  color:white;
  text-align:center;
  padding:100px 20px;
}

.cta p{
  margin:16px 0 32px;
  color:#e5e7eb;
}

/* FOOTER */
.footer{
  background:#020617;
  color:#9ca3af;
  text-align:center;
  padding:24px;
}
/* HERO PRO */
.hero-pro{
  padding:180px 0 140px;
  background:
    radial-gradient(circle at top right, rgba(22,163,74,.15), transparent 40%),
    linear-gradient(120deg,#0a2540,#020617);
  color:white;
  overflow:hidden;
}

.hero-wrapper{
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:80px;
  align-items:center;
}

/* TEXTO */
.hero-tag{
  display:inline-block;
  background:rgba(22,163,74,.15);
  color:#a7f3d0;
  padding:8px 18px;
  border-radius:999px;
  font-size:14px;
  margin-bottom:20px;
}

.hero-content h2{
  font-size:52px;
  line-height:1.15;
  margin-bottom:24px;
}

.hero-content h2 span{
  color:#86efac;
}

.hero-content p{
  font-size:19px;
  color:#e5e7eb;
  max-width:520px;
  margin-bottom:40px;
}

.hero-actions{
  display:flex;
  gap:18px;
}

/* VISUAL */
.hero-visual{
  position:relative;
}

.hero-card-pro{
  background:white;
  color:#020617;
  border-radius:22px;
  padding:36px;
  box-shadow:0 40px 80px rgba(0,0,0,.35);
  animation:float 6s ease-in-out infinite;
}

.hero-card-pro h4{
  font-size:18px;
  margin-bottom:28px;
}

.stats{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:18px;
  text-align:center;
}

.stats span{
  font-size:34px;
  font-weight:700;
  color:#16a34a;
}

.stats p{
  font-size:13px;
  color:#64748b;
}

.card-footer{
  margin-top:28px;
  padding-top:20px;
  border-top:1px solid #e5e7eb;
  font-size:14px;
  color:#475569;
}

/* ANIMACIÓN */
@keyframes float{
  0%,100%{ transform:translateY(0); }
  50%{ transform:translateY(-12px); }
}

/* RESPONSIVE */
@media(max-width:900px){
  .hero-wrapper{
    grid-template-columns:1fr;
    gap:60px;
  }

  .hero-content h2{
    font-size:40px;
  }

  .hero-actions{
    flex-direction:column;
  }
}
/* SERVICES PRO */
.services-pro{
  padding:120px 0;
  background:#f8fafc;
}

.services-header{
  max-width:700px;
  margin-bottom:80px;
}

.section-tag{
  display:inline-block;
  background:rgba(22,163,74,.12);
  color:#15803d;
  padding:8px 18px;
  border-radius:999px;
  font-size:14px;
  margin-bottom:16px;
}

.services-header h3{
  font-size:38px;
  margin-bottom:18px;
}

.services-header p{
  color:#64748b;
  font-size:18px;
}

/* GRID */
.services-grid-pro{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:32px;
}

/* CARD */
.service-card-pro{
  background:white;
  padding:42px 32px;
  border-radius:22px;
  box-shadow:0 20px 50px rgba(0,0,0,.08);
  transition:.4s ease;
  position:relative;
  overflow:hidden;
}

.service-card-pro::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(120deg,rgba(22,163,74,.08),transparent);
  opacity:0;
  transition:.4s;
}

.service-card-pro:hover::before{
  opacity:1;
}

.service-card-pro:hover{
  transform:translateY(-10px);
  box-shadow:0 40px 80px rgba(0,0,0,.12);
}

.service-card-pro h4{
  font-size:20px;
  margin-bottom:14px;
}

.service-card-pro p{
  color:#64748b;
  line-height:1.6;
}

/* ICON */
.icon-box{
  width:64px;
  height:64px;
  background:#ecfdf5;
  color:#16a34a;
  border-radius:18px;
  display:flex;
  align-items:center;
  justify-content:center;
  margin-bottom:26px;
  transition:.4s;
}

.icon-box svg{
  width:32px;
  height:32px;
}

.service-card-pro:hover .icon-box{
  background:#16a34a;
  color:white;
  transform:scale(1.05);
}

/* RESPONSIVE */
@media(max-width:1000px){
  .services-grid-pro{
    grid-template-columns:repeat(2,1fr);
  }
}

@media(max-width:600px){
  .services-grid-pro{
    grid-template-columns:1fr;
  }

  .services-header h3{
    font-size:30px;
  }
}
/* VALUE PRO */
.value-pro{
  padding:140px 0;
  background:
    radial-gradient(circle at left, rgba(22,163,74,.08), transparent 40%),
    #ffffff;
}

.value-wrapper{
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:80px;
  align-items:flex-start;
}

/* TEXTO */
.value-content h3{
  font-size:42px;
  line-height:1.2;
  margin-bottom:22px;
}

.value-content h3 span{
  color:#16a34a;
}

.value-content p{
  font-size:18px;
  color:#475569;
  max-width:520px;
  margin-bottom:40px;
}

/* HIGHLIGHTS */
.value-highlights{
  display:flex;
  gap:36px;
}

.highlight{
  display:flex;
  flex-direction:column;
}

.highlight strong{
  font-size:34px;
  color:#0a2540;
}

.highlight span{
  font-size:14px;
  color:#64748b;
}

/* CARDS */
.value-cards{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:28px;
}

.value-card{
  background:#f8fafc;
  border-radius:20px;
  padding:34px 30px;
  border:1px solid #e5e7eb;
  transition:.4s ease;
  position:relative;
}

.value-card::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:20px;
  background:linear-gradient(120deg,rgba(22,163,74,.12),transparent);
  opacity:0;
  transition:.4s;
}

.value-card:hover::before{
  opacity:1;
}

.value-card:hover{
  transform:translateY(-8px);
  box-shadow:0 30px 60px rgba(0,0,0,.12);
}

.value-card h4{
  font-size:18px;
  margin-bottom:12px;
  position:relative;
}

.value-card p{
  color:#64748b;
  line-height:1.6;
  position:relative;
}

/* RESPONSIVE */
@media(max-width:1000px){
  .value-wrapper{
    grid-template-columns:1fr;
  }

  .value-cards{
    grid-template-columns:1fr;
  }

  .value-highlights{
    margin-bottom:40px;
  }
}
/* MODAL ASESORIA */
.modal-asesoria{
  position:fixed;
  inset:0;
  background:rgba(2,6,23,.75);
  backdrop-filter:blur(6px);
  display:flex;
  align-items:center;
  justify-content:center;
  opacity:0;
  pointer-events:none;
  transition:.4s ease;
  z-index:2000;
}

.modal-asesoria.active{
  opacity:1;
  pointer-events:auto;
}

.modal-content{
  background:white;
  border-radius:24px;
  padding:48px 42px;
  max-width:520px;
  width:90%;
  position:relative;
  transform:translateY(20px) scale(.96);
  transition:.4s ease;
}

.modal-asesoria.active .modal-content{
  transform:translateY(0) scale(1);
}

/* CLOSE */
.modal-close{
  position:absolute;
  top:20px;
  right:22px;
  font-size:30px;
  background:none;
  border:none;
  cursor:pointer;
  color:#64748b;
}

/* TEXT */
.modal-content h3{
  font-size:32px;
  margin:16px 0;
}

.modal-content p{
  color:#475569;
  margin-bottom:32px;
}

/* FORM */
.asesoria-form{
  display:grid;
  gap:18px;
}

.form-group{
  display:flex;
  flex-direction:column;
}

.form-group label{
  font-size:14px;
  margin-bottom:6px;
  color:#334155;
}

.form-group input,
.form-group textarea{
  padding:14px 16px;
  border-radius:12px;
  border:1px solid #e5e7eb;
  font-size:15px;
  resize:none;
}

.form-group input:focus,
.form-group textarea:focus{
  outline:none;
  border-color:#16a34a;
}

/* BUTTON FULL */
.btn-primary.full{
  width:100%;
  margin-top:12px;
}
/* MODAL ASESORIA - FIX SCROLL */
.modal-asesoria{
  position: fixed;
  inset: 0;
  background: rgba(2,6,23,.75);
  backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow-y: auto;          /* 🔑 permite scroll */
  padding: 40px 20px;        /* espacio en móvil */
  opacity: 0;
  pointer-events: none;
  transition: .4s ease;
  z-index: 2000;
}

.modal-asesoria.active{
  opacity: 1;
  pointer-events: auto;
}

/* CONTENIDO */
.modal-content{
  background: white;
  border-radius: 24px;
  padding: 48px 42px;
  max-width: 520px;
  width: 100%;
  max-height: 90vh;          /* 🔑 nunca se sale de la pantalla */
  overflow-y: auto;          /* 🔑 scroll interno */
  position: relative;
}
/* ===============================
   LOADER OSCURO
================================ */
#loader{
  position: fixed;
  inset: 0;
  background: radial-gradient(1200px 600px at 50% 0%, #0a2540 0%, #020617 55%, #020617 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 3000;
  transition: opacity .6s ease, visibility .6s ease;
}

#loader.hidden{
  opacity: 0;
  visibility: hidden;
}

.loader-content{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
}

.loader-content img{
  width: 96px;
  filter: drop-shadow(0 10px 30px rgba(0,0,0,.6));
  animation: logoPulse 1.8s ease-in-out infinite;
}

.loader-content span{
  font-size: 13px;
  color: #cbd5f5;
  letter-spacing: 2px;
  text-transform: uppercase;
}

/* Animación sutil */
@keyframes logoPulse{
  0%{
    transform: scale(1);
    opacity: 1;
  }
  50%{
    transform: scale(1.08);
    opacity: .75;
  }
  100%{
    transform: scale(1);
    opacity: 1;
  }
}
/* ===============================
   HERO BACKGROUND DEPTH
================================ */
.hero-pro{
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(1200px 600px at 80% -10%, rgba(22,163,74,.14), transparent 40%),
    radial-gradient(900px 500px at 10% 10%, rgba(56,189,248,.12), transparent 45%),
    linear-gradient(120deg, #0a2540, #020617);
}

/* SHAPES */
.bg-shapes{
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
}

.shape{
  position:absolute;
  width:420px;
  height:420px;
  border-radius:50%;
  filter: blur(120px);
  opacity:.55;
  animation: floatSlow 14s ease-in-out infinite;
}

/* SHAPE COLORS */
.shape-1{
  background:#22c55e;      /* green glow */
  top:-120px;
  right:-120px;
  animation-delay:0s;
}

.shape-2{
  background:#38bdf8;      /* blue glow */
  bottom:-140px;
  left:-140px;
  animation-delay:4s;
}

.shape-3{
  background:#60a5fa;      /* soft blue */
  top:40%;
  left:55%;
  width:300px;
  height:300px;
  animation-delay:8s;
}

/* CONTENT ABOVE SHAPES */
.hero-pro .container{
  position:relative;
  z-index:1;
}

/* FLOAT ANIMATION */
@keyframes floatSlow{
  0%{ transform:translateY(0) translateX(0); }
  50%{ transform:translateY(-30px) translateX(20px); }
  100%{ transform:translateY(0) translateX(0); }
}

/* MOBILE TUNE */
@media(max-width:900px){
  .shape{
    width:260px;
    height:260px;
    filter: blur(90px);
  }
}
/* ===============================
   SECTION DIVIDER
================================ */
.section-divider{
  position: relative;
  height: 90px;
  overflow: hidden;
  background: #f8fafc; /* fondo de la siguiente sección */
}

.section-divider svg{
  position:absolute;
  bottom:0;
  width:100%;
  height:100%;
}

.section-divider path{
  fill: #020617; /* color del HERO */
}
/* ===============================
   SVG LINE
================================ */
.svg-line{
  display:flex;
  justify-content:center;
  margin-bottom:40px;
}

.svg-line svg{
  width:120px;
}

.svg-line line{
  stroke:#16a34a;
  stroke-width:2;
  stroke-dasharray:400;
  stroke-dashoffset:400;
  animation: drawLine 1.6s ease forwards;
}

@keyframes drawLine{
  to{
    stroke-dashoffset:0;
  }
}
.section-divider.reverse path{
  fill:#f8fafc;
}
/* ===============================
   GLASSMORPHISM BASE
================================ */
.glass{
  background: rgba(255,255,255,.08);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 22px;
  box-shadow:
    0 20px 40px rgba(0,0,0,.18),
    inset 0 1px 0 rgba(255,255,255,.25);
  transition: transform .4s ease, box-shadow .4s ease;
}
.service-card-pro{
  position: relative;
  overflow: hidden;
}

.service-card-pro::after{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(
    120deg,
    transparent,
    rgba(255,255,255,.25),
    transparent
  );
  opacity:0;
  transition:.4s;
}

.service-card-pro:hover::after{
  opacity:1;
}

.service-card-pro:hover{
  transform: translateY(-12px) scale(1.02);
  box-shadow:
    0 40px 80px rgba(0,0,0,.25),
    inset 0 1px 0 rgba(255,255,255,.35);
}
.icon-box{
  background: rgba(22,163,74,.18);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(22,163,74,.35);
  box-shadow: 0 10px 30px rgba(22,163,74,.35);
}

.service-card-pro:hover .icon-box{
  background:#16a34a;
  color:white;
  box-shadow: 0 20px 40px rgba(22,163,74,.55);
}
.value-card:hover{
  transform: translateY(-10px);
  box-shadow:
    0 30px 60px rgba(0,0,0,.22),
    inset 0 1px 0 rgba(255,255,255,.25);
}
/* ===============================
   MODAL FULL STACK DESIGN
================================ */
.modal-asesoria{
  position:fixed;
  inset:0;
  background:rgba(2,6,23,.85);
  backdrop-filter:blur(10px);
  display:flex;
  align-items:center;
  justify-content:center;
  overflow-y:auto;
  padding:40px 20px;
  opacity:0;
  pointer-events:none;
  transition:.5s ease;
  z-index:2000;
}

.modal-asesoria.active{
  opacity:1;
  pointer-events:auto;
}

/* FONDO DECORATIVO */
.modal-bg-shapes{
  position:absolute;
  inset:0;
  overflow:hidden;
  pointer-events:none;
}

.m-shape{
  position:absolute;
  width:420px;
  height:420px;
  border-radius:50%;
  filter:blur(140px);
  opacity:.4;
  animation:floatModal 14s ease-in-out infinite;
}

.m1{
  background:#22c55e;
  top:-120px;
  left:-120px;
}

.m2{
  background:#38bdf8;
  bottom:-120px;
  right:-120px;
  animation-delay:5s;
}

/* MODAL CARD */
.modal-content{
  position:relative;
  max-width:520px;
  width:100%;
  max-height:90vh;
  overflow-y:auto;
  padding:48px 42px;
  border-radius:26px;
  color:#020617;
  z-index:1;
}

/* TEXTO */
.modal-content h3{
  font-size:30px;
  margin:14px 0 10px;
}

.modal-desc{
  font-size:16px;
  color:#475569;
  margin-bottom:28px;
}

/* CLOSE */
.modal-close{
  position:absolute;
  top:18px;
  right:22px;
  font-size:32px;
  background:none;
  border:none;
  cursor:pointer;
  color:#64748b;
}

/* FORM */
.asesoria-form{
  display:grid;
  gap:16px;
}

.form-group input,
.form-group textarea{
  width:100%;
  padding:14px 16px;
  border-radius:14px;
  border:1px solid rgba(0,0,0,.08);
  font-size:15px;
  background:rgba(255,255,255,.85);
}

.form-group textarea{
  resize:none;
  min-height:90px;
}

.form-group input:focus,
.form-group textarea:focus{
  outline:none;
  border-color:#16a34a;
  box-shadow:0 0 0 3px rgba(22,163,74,.18);
}

/* ANIMACIÓN */
@keyframes floatModal{
  0%,100%{ transform:translateY(0); }
  50%{ transform:translateY(-40px); }
}
/* ===============================
   MODAL ANIMATION PRO
================================ */

/* Estado base (cerrado) */
.modal-content{
  transform: translateY(40px) scale(.96);
  opacity: 0;
  transition:
    transform .55s cubic-bezier(.16,1,.3,1),
    opacity .45s ease;
}

/* Cuando el modal está activo */
.modal-asesoria.active .modal-content{
  transform: translateY(0) scale(1);
  opacity: 1;
}

/* Fondo fade suave */
.modal-asesoria{
  transition: opacity .45s ease;
}
/* ===============================
   LOGO WATERMARK HERO
================================ */
.logo-watermark-hero{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  pointer-events:none;
  z-index:0;
}

.logo-watermark-hero img{
  width:680px;
  opacity:.035;              /* MUY SUTIL */
  filter: blur(.2px);
  transform: rotate(-8deg);
}
/* ===============================
   LOGO PATTERN BACKGROUND
================================ */
.services-pro,
.value-pro{
  position:relative;
  background:
    url("../img/logo\ svg") center / 420px no-repeat,
    #f8fafc;
}

.services-pro::before,
.value-pro::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    url("../img/logo\ ") repeat;
  background-size:220px;
  opacity:.025;
  pointer-events:none;
}
.partners-pro{
  padding:80px 0;
  background:#ffffff;
  text-align:center;
}

.partners-label{
  font-size:14px;
  letter-spacing:2px;
  text-transform:uppercase;
  color:#64748b;
  margin-bottom:30px;
}

.partners-logos img{
  max-width:360px;
  opacity:.55;
  filter:grayscale(100%);
  transition:.4s ease;
}

.partners-logos img:hover{
  opacity:1;
  filter:grayscale(0%);
}
.trust-badge{
  padding:50px 0;
  background:#ffffff;
  text-align:center;
}

.trust-badge img{
  max-width:260px;
  margin-bottom:14px;
}

.trust-badge p{
  font-size:14px;
  color:#64748b;
  letter-spacing:.5px;
}
/* ===============================
   MENU RESPONSIVE
================================ */

/* HAMBURGUESA */
.menu-toggle{
  display:none;
  flex-direction:column;
  gap:6px;
  background:none;
  border:none;
  cursor:pointer;
  z-index:3001;
}

.menu-toggle span{
  width:26px;
  height:3px;
  background:white;
  border-radius:2px;
  transition:.4s;
}

/* ANIMACIÓN X */
.menu-toggle.active span:nth-child(1){
  transform:rotate(45deg) translate(6px,6px);
}
.menu-toggle.active span:nth-child(2){
  opacity:0;
}
.menu-toggle.active span:nth-child(3){
  transform:rotate(-45deg) translate(7px,-7px);
}

/* MOBILE MENU OVERLAY */
.mobile-menu{
  position:fixed;
  inset:0;
  background:#020617;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;   /* 🔑 NO center */
  gap:32px;
  padding:120px 20px 40px;      /* espacio arriba y abajo */
  transform:translateX(100%);
  transition:.5s ease;
  z-index:3000;

  overflow-y:auto;              /* 🔑 SCROLL */
  -webkit-overflow-scrolling: touch;
}


.mobile-menu.active{
  transform:translateX(0);
}

.mobile-menu a{
  color:white;
  font-size:24px;
  font-weight:500;
  opacity:0;
  transform:translateY(20px);
  transition:.4s ease;
}

.mobile-menu.active a{
  opacity:1;
  transform:translateY(0);
}

/* CTA MOBILE */
.mobile-cta{
  margin-top:20px;
  background:#16a34a;
  padding:14px 32px;
  border-radius:999px;
  font-weight:600;
}

/* RESPONSIVE BREAKPOINT */
@media(max-width:900px){
  .menu,
  .nav-cta{
    display:none;
  }

  .menu-toggle{
    display:flex;
  }
}
/* ===============================
   FOOTER PREMIUM
================================ */
.footer-pro{
  background:
    radial-gradient(800px 300px at 50% 0%, rgba(22,163,74,.18), transparent 60%),
    #020617;
  color:#cbd5f5;
  padding-top:120px;
}

/* CTA */
.footer-cta{
  max-width:780px;
  margin:0 auto 100px;
  text-align:center;
}

.footer-cta h3{
  font-size:36px;
  margin-bottom:14px;
}

.footer-cta p{
  font-size:18px;
  color:#94a3b8;
  margin-bottom:28px;
}

/* GRID */
.footer-grid{
  display:grid;
  grid-template-columns:2fr 1fr 1fr 1fr;
  gap:60px;
  padding-bottom:60px;
}

/* BRAND */
.footer-brand img{
  width:160px;
  margin-bottom:16px;
}

.footer-brand p{
  color:#94a3b8;
  line-height:1.6;
}

/* LINKS */
.footer-links h4,
.footer-contact h4{
  font-size:16px;
  margin-bottom:16px;
  color:white;
}

.footer-links a{
  display:block;
  color:#94a3b8;
  margin-bottom:10px;
  transition:.3s;
}

.footer-links a:hover{
  color:#22c55e;
  transform:translateX(4px);
}

/* CONTACT */
.footer-contact p{
  margin-bottom:10px;
  color:#94a3b8;
}

/* BOTTOM */
.footer-bottom{
  border-top:1px solid rgba(255,255,255,.08);
  padding:22px 0;
  text-align:center;
  font-size:14px;
  color:#64748b;
}

/* RESPONSIVE */
@media(max-width:1000px){
  .footer-grid{
    grid-template-columns:1fr;
    gap:40px;
  }

  .footer-cta h3{
    font-size:28px;
  }
}
.hero-nosotros{
  min-height:80vh;
}

.timeline-pro{
  padding:140px 0;
  background:#ffffff;
}

.timeline{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:40px;
  margin-top:60px;
}

.timeline-step{
  background:#f8fafc;
  padding:30px;
  border-radius:20px;
}

.timeline-step span{
  font-size:28px;
  font-weight:700;
  color:#16a34a;
}

@media(max-width:900px){
  .timeline{
    grid-template-columns:1fr;
  }
}

/* SCROLL REVEAL */
.reveal{
  opacity:0;
  transform:translateY(40px);
  transition:.8s ease;
}

.reveal.visible{
  opacity:1;
  transform:none;
}
.hero-contacto{
  min-height:70vh;
}

.contact-pro{
  padding:140px 0;
  background:#ffffff;
}

.contact-grid{
  display:grid;
  grid-template-columns:1fr 1.2fr;
  gap:90px;
}

.contact-benefits{
  list-style:none;
  padding:0;
  margin:30px 0;
}

.contact-benefits li{
  margin-bottom:12px;
  color:#475569;
  font-weight:500;
}

.contact-trust{
  margin-top:40px;
}

.contact-trust img{
  max-width:220px;
  opacity:.7;
}

.contact-form .form-row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px;
}

.contact-form textarea{
  min-height:120px;
  resize:none;
}

.form-desc{
  color:#64748b;
  margin-bottom:20px;
}

.form-note{
  font-size:13px;
  color:#64748b;
  margin-top:14px;
  text-align:center;
}

@media(max-width:900px){
  .contact-grid{
    grid-template-columns:1fr;
  }

  .contact-form .form-row{
    grid-template-columns:1fr;
  }
}
/* ===============================
   CTA PREMIUM FULL STACK
================================ */
.cta-pro{
  position:relative;
  padding:160px 0;
  background:
    radial-gradient(800px 300px at 50% 0%, rgba(22,163,74,.25), transparent 60%),
    #020617;
  overflow:hidden;
  text-align:center;
}

/* SVG */
.cta-lines{
  position:absolute;
  top:0;
  left:50%;
  transform:translateX(-50%);
  width:700px;
  opacity:.8;
  pointer-events:none;
}

/* CARD */
.cta-card{
  max-width:720px;
  margin:0 auto;
  padding:70px 60px;
  border-radius:30px;
  position:relative;
  color:#020617;
}

/* ICON */
.cta-icon{
  width:64px;
  height:64px;
  margin:0 auto 24px;
  background:rgba(22,163,74,.12);
  color:#16a34a;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
}

.cta-icon svg{
  width:28px;
}

/* TEXT */
.cta-card h3{
  font-size:36px;
  margin-bottom:14px;
}

.cta-card p{
  font-size:18px;
  color:#475569;
  margin-bottom:32px;
}

/* CTA BUTTON */
.cta-btn{
  padding:16px 40px;
  font-size:16px;
}

/* NOTE */
.cta-note{
  display:block;
  margin-top:20px;
  font-size:13px;
  color:#64748b;
}

/* RESPONSIVE */
@media(max-width:768px){
  .cta-card{
    padding:50px 30px;
  }

  .cta-card h3{
    font-size:28px;
  }
}
/* ===============================
   CONTACTO PREMIUM
================================ */
.contact-pro{
  position:relative;
  padding:160px 0;
  background:#ffffff;
  overflow:hidden;
}

/* SVG */
.contact-lines{
  position:absolute;
  top:-40px;
  left:50%;
  transform:translateX(-50%);
  width:720px;
  pointer-events:none;
}

.contact-grid{
  display:grid;
  grid-template-columns:1fr 1.2fr;
  gap:100px;
  position:relative;
}

/* INFO */
.contact-intro{
  margin:20px 0 30px;
  color:#475569;
  max-width:420px;
}

.contact-benefits-pro{
  list-style:none;
  padding:0;
  margin:0;
}

.contact-benefits-pro li{
  display:flex;
  align-items:center;
  gap:14px;
  margin-bottom:18px;
  font-weight:500;
  color:#020617;
}

.contact-benefits-pro svg{
  width:22px;
  color:#16a34a;
}

/* TRUST */
.contact-trust-pro{
  margin-top:40px;
}

.contact-trust-pro span{
  display:block;
  font-size:13px;
  letter-spacing:.5px;
  color:#64748b;
  margin-bottom:10px;
}

.contact-trust-pro img{
  max-width:220px;
  opacity:.7;
}

/* FORM */
.contact-form-pro{
  padding:60px 56px;
  border-radius:28px;
}

.form-pro{
  display:grid;
  gap:26px;
}

.form-row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:20px;
}

/* INPUT GROUP */
.input-group{
  position:relative;
}

.input-group input,
.input-group textarea{
  width:100%;
  padding:16px 14px;
  border-radius:14px;
  border:1px solid rgba(0,0,0,.1);
  background:rgba(255,255,255,.9);
  font-family:inherit;
}

.input-group textarea{
  min-height:120px;
  resize:none;
}

/* FLOAT LABEL */
.input-group label{
  position:absolute;
  left:16px;
  top:50%;
  transform:translateY(-50%);
  background:white;
  padding:0 6px;
  font-size:14px;
  color:#64748b;
  pointer-events:none;
  transition:.3s;
}

.input-group textarea + label{
  top:20px;
  transform:none;
}

.input-group input:focus + label,
.input-group input:not(:placeholder-shown) + label,
.input-group textarea:focus + label,
.input-group textarea:not(:placeholder-shown) + label{
  top:-8px;
  font-size:12px;
  color:#16a34a;
}

.input-group input:focus,
.input-group textarea:focus{
  outline:none;
  border-color:#16a34a;
  box-shadow:0 0 0 3px rgba(22,163,74,.15);
}

/* BUTTON */
.form-btn{
  margin-top:10px;
}

/* NOTE */
.form-note{
  font-size:13px;
  color:#64748b;
  text-align:center;
}

/* RESPONSIVE */
@media(max-width:900px){
  .contact-grid{
    grid-template-columns:1fr;
    gap:60px;
  }

  .form-row{
    grid-template-columns:1fr;
  }
}
/* ===============================
   WHATSAPP FLOAT
================================ */
/* ===============================
   WHATSAPP FLOAT PRO (AGENCY)
================================ */
.whatsapp-float-pro{
  position:fixed;
  right:22px;
  bottom:22px;
  z-index:99999;
  text-decoration:none;
}

/* ICON */
.wp-icon{
  width:64px;
  height:64px;
  background:
    radial-gradient(circle at top left, #34eb7a, #25D366);
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  color:white;

  box-shadow:
    0 15px 35px rgba(37,211,102,.45),
    0 0 0 0 rgba(37,211,102,.5);

  animation: wpPulse 2.5s infinite;
  transition:
    transform .3s ease,
    box-shadow .3s ease;
}

.wp-icon svg{
  width:30px;
  height:30px;
}

/* HOVER */
.whatsapp-float-pro:hover .wp-icon{
  transform:scale(1.12);
  box-shadow:
    0 25px 55px rgba(37,211,102,.6),
    0 0 0 12px rgba(37,211,102,.15);
}

/* TOOLTIP */
.wp-tooltip{
  position:absolute;
  right:78px;
  top:50%;
  transform:translateY(-50%);
  background:#020617;
  color:white;
  padding:10px 14px;
  border-radius:10px;
  font-size:14px;
  white-space:nowrap;

  opacity:0;
  pointer-events:none;
  transform:translateY(-50%) translateX(10px);
  transition:.3s ease;
}

.whatsapp-float-pro:hover .wp-tooltip{
  opacity:1;
  transform:translateY(-50%) translateX(0);
}

/* TRIANGULITO */
.wp-tooltip::after{
  content:"";
  position:absolute;
  right:-6px;
  top:50%;
  transform:translateY(-50%);
  border-width:6px;
  border-style:solid;
  border-color:transparent transparent transparent #020617;
}

/* ANIMACIÓN PULSO */
@keyframes wpPulse{
  0%{
    box-shadow:
      0 15px 35px rgba(37,211,102,.45),
      0 0 0 0 rgba(37,211,102,.4);
  }
  70%{
    box-shadow:
      0 15px 35px rgba(37,211,102,.45),
      0 0 0 18px rgba(37,211,102,0);
  }
  100%{
    box-shadow:
      0 15px 35px rgba(37,211,102,.45),
      0 0 0 0 rgba(37,211,102,0);
  }
}

/* MOBILE */
@media(max-width:768px){
  .wp-icon{
    width:56px;
    height:56px;
  }

  .wp-tooltip{
    display:none; /* no estorba en móvil */
  }
}
/* ===============================
   FORM LOADING STATE PRO
================================ */

/* BOTÓN */
.btn-loading{
  position:relative;
  overflow:hidden;
}

/* TEXTO */
.btn-loading .btn-text{
  transition:opacity .25s ease;
}

/* SPINNER */
.btn-spinner{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  opacity:0;
  pointer-events:none;
}

.btn-spinner::after{
  content:"";
  width:22px;
  height:22px;
  border:3px solid rgba(255,255,255,.4);
  border-top-color:white;
  border-radius:50%;
  animation:spin .8s linear infinite;
}

/* LOADING ACTIVO */
.btn-loading.loading .btn-text{
  opacity:0;
}

.btn-loading.loading .btn-spinner{
  opacity:1;
}

/* DESACTIVADO */
.btn-loading.loading{
  pointer-events:none;
  opacity:.85;
}

/* SPIN */
@keyframes spin{
  to{ transform:rotate(360deg); }
}

/* SUCCESS CHECK */
.form-success{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  color:#16a34a;
  font-weight:600;
  margin-top:18px;
  animation:fadeUp .5s ease forwards;
}

.form-success svg{
  width:22px;
}

@keyframes fadeUp{
  from{
    opacity:0;
    transform:translateY(10px);
  }
  to{
    opacity:1;
    transform:none;
  }
}
.hero-content h2 span{
  display:inline-block;
  animation: floatText 6s ease-in-out infinite;
}

@keyframes floatText{
  0%,100%{ transform:translateY(0); }
  50%{ transform:translateY(-6px); }
}
.card::before{
  content:"";
  position:absolute;
  inset:0;
  background:radial-gradient(
    400px circle at var(--x) var(--y),
    rgba(22,163,74,.18),
    transparent 40%
  );
  opacity:0;
  transition:.4s;
}

.card:hover::before{
  opacity:1;
}
/* ===============================
   WHY PRO SECTION
================================ */
.why-pro{
  padding:140px 0;
  background:#ffffff;
}

.why-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:40px;
}

.why-item{
  position:relative;
  padding:36px 30px;
  border-radius:22px;
  background:#f8fafc;
  border:1px solid #e5e7eb;
  transition:.45s ease;
}

.why-item:hover{
  transform:translateY(-10px);
  box-shadow:0 30px 60px rgba(0,0,0,.12);
}

/* ICON */
.why-icon{
  width:56px;
  height:56px;
  margin-bottom:18px;
  border-radius:16px;
  background:rgba(22,163,74,.12);
  color:#16a34a;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:.4s ease;
}

.why-icon svg{
  width:28px;
  height:28px;
}

.why-item:hover .why-icon{
  background:#16a34a;
  color:#ffffff;
  box-shadow:0 12px 30px rgba(22,163,74,.45);
  transform:scale(1.08);
}

/* NUMBER */
.why-number{
  position:absolute;
  top:26px;
  right:26px;
  font-size:14px;
  font-weight:700;
  color:#94a3b8;
}

/* TEXT */
.why-item h4{
  font-size:18px;
  margin-bottom:10px;
}

.why-item p{
  font-size:15px;
  color:#64748b;
  line-height:1.6;
}

/* RESPONSIVE */
@media(max-width:1000px){
  .why-grid{
    grid-template-columns:repeat(2,1fr);
  }
}

@media(max-width:600px){
  .why-grid{
    grid-template-columns:1fr;
  }
}
.section-divider.diagonal{
  height:120px;
  background:linear-gradient(
    -3deg,
    #ffffff 50%,
    #f8fafc 50%
  );
}
.divider-line{
  display:flex;
  justify-content:center;
  margin:80px 0;
}

.divider-line svg{
  width:140px;
}

.divider-line line{
  stroke:#16a34a;
  stroke-width:2;
  stroke-dasharray:400;
  stroke-dashoffset:400;
  animation:drawLine 1.6s ease forwards;
}

@keyframes drawLine{
  to{ stroke-dashoffset:0; }
}
.separator-3d{
  position:relative;
  height:160px;
  overflow:hidden;
  background:#020617;
}

.sep-layer{
  position:absolute;
  inset:-20%;
  background:radial-gradient(circle at center, rgba(22,163,74,.25), transparent 60%);
  filter:blur(120px);
  animation:float3d 12s ease-in-out infinite;
}

.layer-2{
  animation-delay:4s;
  opacity:.6;
}

.layer-3{
  animation-delay:8s;
  opacity:.35;
}

@keyframes float3d{
  0%{ transform:translateY(0); }
  50%{ transform:translateY(-40px); }
  100%{ transform:translateY(0); }
}
.separator-svg{
  position:relative;
  height:120px;
  background:#f8fafc;
}

.separator-svg svg{
  position:absolute;
  width:100%;
  height:100%;
}

.separator-svg path{
  fill:none;
  stroke:#16a34a;
  stroke-width:3;
  stroke-dasharray:2000;
  stroke-dashoffset:2000;
  animation:drawWave 2.4s ease forwards;
}

@keyframes drawWave{
  to{ stroke-dashoffset:0; }
}
.separator-glass{
  height:180px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:
    radial-gradient(800px 300px at 50% 0%, rgba(22,163,74,.25), transparent 60%),
    #020617;
}

.separator-glass img{
  width:420px;
  opacity:.04;
  filter:blur(.5px);
  transform:rotate(-6deg);
}
/* LOGO CONTAINER */
.logo-box{
  display:flex;
  align-items:center;
  gap:14px;
}

/* LOGO PRINCIPAL (GRANDE) */
.logo-main{
  height:64px;              /* 🔥 más grande */
  width:auto;
}

/* LOGO SECUNDARIO */
.logo-sub{
  height:38px;
  width:auto;
  opacity:.85;
}

/* MOBILE AJUSTE */
@media(max-width:900px){
  .logo-main{
    height:54px;
  }

  .logo-sub{
    height:30px;
  }
}
/* ===============================
   WHATSAPP FLOAT RESPONSIVE
================================ */
.whatsapp-float{
  position:fixed;
  right:20px;
  bottom:20px;
  width:64px;
  height:64px;
  background:#25D366;
  color:#fff;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:99999;

  box-shadow:0 12px 28px rgba(0,0,0,.35);
  transition:transform .25s ease, box-shadow .25s ease;
}

/* Icono */
.whatsapp-float svg{
  width:32px;
  height:32px;
}

/* Hover desktop */
.whatsapp-float:hover{
  transform:scale(1.08);
  box-shadow:0 16px 36px rgba(0,0,0,.45);
}
@media(max-width:900px){
  /* ===============================
   WHATSAPP FLOAT - LEFT CENTER
================================ */

/* ===============================
   WHATSAPP FLOAT - BOTTOM CENTER
================================ */

.

/* ICONO */
.whatsapp-float svg{
  width:28px;
  height:28px;
}

/* MOBILE AJUSTE */
@media(max-width:900px){
  .whatsapp-float{
    width:54px;
    height:54px;
  }

  .whatsapp-float svg{
    width:26px;
    height:26px;
  }
}
/* ===============================
   WHATSAPP FLOAT - ALWAYS VISIBLE
================================ */

.whatsapp-float{
  position:fixed;
  left:50%;
  bottom:calc(16px + env(safe-area-inset-bottom));
  transform:translateX(-50%) !important;
  width:58px;
  height:58px;
  background:#25D366;
  color:white;
  border-radius:50%;
  display:flex !important;
  opacity:1 !important;
  visibility:visible !important;
  pointer-events:auto !important;
  z-index:99999;
}
	/* ===============================
   WHATSAPP FLOAT – FORCE VISIBLE
================================ */

.whatsapp-float{
  position:fixed !important;
  left:50% !important;
  bottom:calc(20px + env(safe-area-inset-bottom)) !important;
  transform:translateX(-50%) !important;

  width:58px;
  height:58px;
  background:#25D366;
  color:white;
  border-radius:50%;

  display:flex !important;
  align-items:center;
  justify-content:center;

  opacity:1 !important;
  visibility:visible !important;

  z-index:999999 !important; /* 🔑 MÁS ALTO QUE TODO */
  pointer-events:auto !important;
}