:root{
  --bg:#ffffff;
  --text:#1a1f2b;
  --muted:#5e6a78;
  --brand:#0b79d0;
  --brand-2:#0cc27a;
  --accent:#ff7a59;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font-family:Poppins, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;color:var(--text);background:var(--bg);min-height:100vh;line-height:1.6;overflow-x:hidden}
/* Animated background blobs */
.bg-blobs{position:fixed; inset:0; z-index:-2; overflow:hidden;
  background: radial-gradient(1200px 800px at 10% 10%, rgba(255,122,89,.10), transparent 60%),
              radial-gradient(900px 700px at 90% 20%, rgba(12,194,122,.08), transparent 60%),
              radial-gradient(1000px 900px at 30% 90%, rgba(11,121,208,.10), transparent 60%);}
.blob{position:absolute; width:50vmax; height:50vmax; filter:blur(60px); opacity:.22; border-radius:50%; mix-blend-mode:multiply; animation:float 18s ease-in-out infinite}
.b1{ background:#ff7a59; top:-10vmax; left:-10vmax; animation-delay:0s}
.b2{ background:#0cc27a; top:10vmax; right:-15vmax; animation-delay:3s}
.b3{ background:#0b79d0; bottom:-15vmax; left:25vmax; animation-delay:6s}
.b4{ background:#ffd74a; bottom:-10vmax; right:-10vmax; animation-delay:9s}
@keyframes float{0%,100%{ transform: translateY(0) translateX(0) scale(1)} 50%{ transform: translateY(-4vmax) translateX(2vmax) scale(1.05)}}
/* Header */
.site-header{position:sticky; top:0; z-index:50; backdrop-filter:saturate(180%) blur(8px); background:rgba(255,255,255,.75); border-bottom:1px solid rgba(0,0,0,.06)}
.container{width:min(1100px,92%); margin-inline:auto}
.nav{display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:.6rem 0}
.brand{display:flex; align-items:center; gap:.6rem; text-decoration:none; color:var(--text); font-weight:700}
.logo{width:48px; height:auto; display:block}
.brand-name{font-family:Montserrat, Poppins, sans-serif; letter-spacing:.5px}
.menu{display:flex; gap:1rem; align-items:center}
.menu-link{ text-decoration:none; color:var(--text); padding:.5rem .8rem; border-radius:999px; position:relative}
.menu-link:hover{ background:linear-gradient(90deg, rgba(11,121,208,.12), rgba(12,194,122,.12))}
.menu-link.active::after{content:""; position:absolute; left:1rem; right:1rem; bottom:.2rem; height:2px; background:linear-gradient(90deg, var(--brand), var(--brand-2)); border-radius:2px}
.hamburger{display:none; flex-direction:column; gap:4px; background:transparent; border:0; padding:.4rem .5rem}
.hamburger span{width:24px; height:2px; background:#222; display:block}
/* Hero */
.hero{ padding: min(20vh, 160px) 0 90px; text-align:center; position:relative}
.hero-title{ font-family:Montserrat, Poppins, sans-serif; font-size: clamp(28px, 4.5vw, 46px); line-height:1.15; margin:0 0 .6rem; opacity:0; transform:translateY(10px); animation:fadeUp .9s ease .2s forwards}
.hero-sub{ color:var(--muted); margin:.2rem 0 1.2rem; opacity:0; transform:translateY(8px); animation:fadeUp .9s ease .35s forwards}
.hero-actions{ display:flex; gap:.8rem; justify-content:center; opacity:0; transform:translateY(8px); animation:fadeUp .9s ease .5s forwards}
@keyframes fadeUp{ to{opacity:1; transform:none}}
.btn-cta{ background:linear-gradient(90deg, var(--brand), var(--brand-2)); color:#fff; text-decoration:none; padding:.8rem 1.2rem; border-radius:14px; font-weight:600; border:0; display:inline-block; box-shadow:0 8px 24px rgba(11,121,208,.18); transition: transform .15s ease, box-shadow .15s ease, opacity .2s ease}
.btn-cta:hover{ transform:translateY(-1px); box-shadow:0 10px 30px rgba(11,121,208,.24) }
.btn-cta.outline{ background:#fff; color:var(--text); border:2px solid rgba(0,0,0,.08); box-shadow:none}
.btn-cta.outline:hover{ border-color:rgba(0,0,0,.18)}
.btn-cta.small{ padding:.5rem .9rem; border-radius:12px; font-size:.95rem}
.btn-cta.full{ display:block; text-align:center; width:100%}
.section{ padding:72px 0}
.section.alt{ background:rgba(255,255,255,.6)}
.two-col{ display:grid; grid-template-columns: 1.2fr .8fr; gap:24px; align-items:start}
.grid-3{ display:grid; grid-template-columns: repeat(3, 1fr); gap:18px}
.card{ background:#fff; border:1px solid rgba(0,0,0,.06); border-radius:16px; padding:18px; box-shadow:0 6px 18px rgba(0,0,0,.05)}
.ticks{ list-style:none; padding:0; margin:0}
.ticks li{ padding-left:26px; position:relative; margin:.4rem 0}
.ticks li::before{ content:"✓"; position:absolute; left:0; top:0; color:var(--brand-2); font-weight:700}
.service-card{ background:#fff; border:1px solid rgba(0,0,0,.06); border-radius:16px; padding:16px; box-shadow:0 6px 14px rgba(0,0,0,.05); transition: transform .15s ease, box-shadow .15s ease}
.service-card:hover{ transform: translateY(-2px); box-shadow:0 12px 26px rgba(0,0,0,.08)}
.benefit{ background:#fff; border:1px solid rgba(0,0,0,.06); border-radius:16px; padding:16px; box-shadow:0 6px 14px rgba(0,0,0,.05)}
.gallery{ display:grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap:10px}
.gallery .g{ display:block; border-radius:14px; overflow:hidden; border:1px solid rgba(0,0,0,.06); background:#fff; box-shadow:0 6px 14px rgba(0,0,0,.05)}
.gallery img{ width:100%; height:220px; object-fit:cover; display:block; transition: transform .35s ease, filter .35s ease}
.gallery .g:hover img{ transform:scale(1.06); filter:brightness(1.05)}
.contact{ list-style:none; padding:0; margin:0}
.contact li{ margin:.4rem 0}
.contact a{ color:var(--brand); text-decoration:none}
.contact a:hover{ text-decoration:underline}
.fab{ position:fixed; right:16px; bottom:16px; display:flex; flex-direction:column; gap:10px; z-index:60}
.fab-btn{ width:54px; height:54px; border-radius:999px; display:grid; place-items:center; text-decoration:none; font-size:24px; background:#fff; border:1px solid rgba(0,0,0,.08); box-shadow:0 10px 26px rgba(0,0,0,.12); transition: transform .15s ease, box-shadow .15s ease, filter .15s ease}
.fab-btn:hover{ transform: translateY(-2px); filter:brightness(1.05); box-shadow:0 14px 30px rgba(0,0,0,.16)}
.fab-btn.call{ color:#0b79d0}
.fab-btn.wa{ color:#1fa855}
@media (max-width: 900px){ .two-col{ grid-template-columns: 1fr} .grid-3{ grid-template-columns: 1fr 1fr}}
@media (max-width: 640px){ .menu{ display:none} .hamburger{ display:flex} .grid-3{ grid-template-columns: 1fr} .hero{ padding: 120px 0 70px} .logo{ width:42px}}
h2{font-family:Montserrat, Poppins, sans-serif; margin:0 0 .6rem; font-size: clamp(22px, 3vw, 32px)}
h3{margin:.2rem 0 .4rem}


/* Estilo para imágenes dispersas intercaladas en el contenido */
.foto-dispersa {
  text-align: center;
  margin: 2rem 0;
}

.foto-dispersa img {
  max-width: 80%;
  border-radius: 16px;
  box-shadow: 0 6px 15px rgba(0,0,0,0.2);
}


/* Estilos botón flotante con logo oficial */
.whatsapp-float {
  position: fixed;
  width: 60px;
  height: 60px;
  bottom: 20px;
  right: 20px;
  display: block;
  z-index: 1000;
}

.whatsapp-float img {
  width: 100%;
  height: 100%;
}