:root{
  --primary:#2683C3;
  --accent:#47B58F;

  /* Paleta clara */
  --ink:#0b1220;          /* texto principal */
  --muted:#5b6b80;        /* texto secundario */
  --bg:#c2d0dd;            /* fondo general */
  --card:#FFFFFF;         /* tarjetas / superficies */
  --ring:#D6E2F0;         /* bordes e inputs */
  --shine:rgba(10,20,40,.08); /* borde sutil / divisores */
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}

body{
  font-family:'Inter',ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial;
  color:var(--ink);
  background:
    radial-gradient(900px 600px at 12% -10%, rgba(38,131,195,.10), transparent 45%),
    radial-gradient(900px 700px at 88% -5%, rgba(71,181,143,.10), transparent 45%),
    linear-gradient(180deg,#FFFFFF,var(--bg) 40%,var(--bg) 100%);
  line-height:1.65;
  overflow-x:hidden;
}

/* Layout */
.container{width:min(1180px,92%); margin:0 auto}
.section{padding:96px 0}
.grid{display:grid; gap:26px}

/* Typography */
.h1{font-size:clamp(36px,5vw,64px); line-height:1.04; margin:0 0 16px}
.lead{font-size:clamp(16px,2.1vw,20px); color:var(--muted)}
.kicker{color:var(--accent); font-weight:800; letter-spacing:.14em; text-transform:uppercase; font-size:.8rem}

/* Header */
.header{
  position:sticky; top:0; z-index:50;
  backdrop-filter:saturate(160%) blur(14px);
  background:rgba(255,255,255,.72);
  border-bottom:1px solid var(--shine);
  box-shadow:0 6px 16px rgba(15,23,42,.05);
}
.nav{display:flex; align-items:center; justify-content:space-between; padding:14px 0}
.brand{display:flex; gap:12px; align-items:center; text-decoration:none}
.brand img{height:36px}
.brand span{font-weight:800; color:#0b1220; letter-spacing:.4px}
.menu{display:flex; gap:22px; align-items:center}
.menu a{color:#334155; text-decoration:none; font-weight:600}
.menu a:hover{color:#0b1220}

/* Buttons */
.btn{display:inline-flex; gap:10px; align-items:center; border:1px solid transparent; padding:12px 16px; border-radius:14px; text-decoration:none; font-weight:700}
.btn-primary{
  background:linear-gradient(120deg,var(--primary), var(--accent));
  color:white;
  box-shadow:0 10px 24px rgba(38,131,195,.20);
}
.btn-ghost{
  border-color:var(--ring);
  background:#ffffff;
  color:#0b1220;
}
.btn-ghost:hover{border-color:#bcd0e6; background:#f9fbff}

/* Hero */
.hero{padding:120px 0 40px; position:relative}
.hero .wrap{display:grid; grid-template-columns:1.25fr .75fr; gap:34px; align-items:center}
.gradient-text{
  background:linear-gradient(120deg,#0b1220,#215f8e 40%, #2f9d7a 75%, #0b1220);
  -webkit-background-clip:text; background-clip:text; color:transparent
}
.hero-card{
  position:relative;
  background:#ffffff;
  border:1px solid var(--shine);
  border-radius:22px; padding:22px;
  overflow:hidden;
  box-shadow:0 10px 26px rgba(15,23,42,.06);
}
.hero-card:before{
  content:""; position:absolute; inset:-80px -40px auto auto; width:300px; height:300px;
  background:radial-gradient(closest-side, rgba(71,181,143,.18), transparent);
  transform:rotate(25deg);
}

/* Feature cards */
.cards{grid-template-columns:repeat(3,1fr)}
.card{
  background:var(--card);
  border:1px solid var(--shine);
  border-radius:18px; padding:22px;
  transition:transform .25s, border-color .25s, box-shadow .25s;
  position:relative; overflow:hidden;
  box-shadow:0 6px 14px rgba(15,23,42,.06);
}
.card:after{
  content:""; position:absolute; inset:auto -60px -60px auto; width:140px; height:140px; border-radius:50%;
  background:radial-gradient(closest-side, rgba(38,131,195,.14), transparent);
  transform:translateY(10px);
}
.card:hover{
  transform:translateY(-6px);
  border-color:#bcd0e6;
  box-shadow:0 14px 30px rgba(15,23,42,.10);
}
.card h3{margin:8px 0 8px}
.card p{color:#475569; font-size:15px}
.icon{
  width:46px; height:46px; border-radius:12px; display:grid; place-items:center;
  background:rgba(38,131,195,.12);
  border:1px solid var(--ring);
  font-size:22px
}

/* Value strip */
.strip{
  background:linear-gradient(90deg, rgba(38,131,195,.10), rgba(71,181,143,.10));
  border:1px dashed var(--shine);
  padding:24px; border-radius:18px; display:flex; justify-content:space-between; align-items:center; gap:16px
}

/* Pricing */
.pricing{grid-template-columns:repeat(3,1fr)}
.price-card{
  padding:24px; border:1px solid var(--shine); border-radius:18px; background:#ffffff;
  box-shadow:0 6px 14px rgba(15,23,42,.05);
}
.price-card h4{margin:6px 0}
.price{font-weight:800; font-size:32px; margin:8px 0 14px}
.price small{color:#64748b; font-weight:600}

/* Testimonials */
.testimonials{grid-template-columns:repeat(3,1fr)}
.quote{
  background:#ffffff; border:1px solid var(--shine); border-radius:16px; padding:18px;
  box-shadow:0 6px 14px rgba(15,23,42,.04);
}
.quote p{margin:0 0 10px; color:#334155; font-style:italic}
.quote .who{color:#0b1220; font-weight:700}

/* Contact */
.contact{grid-template-columns:1.1fr .9fr}
.form{display:grid; gap:14px}
.input{
  background:#ffffff; color:#0b1220;
  border:1px solid var(--ring); border-radius:12px; padding:12px 14px;
}
.input:focus{outline:none; border-color:#3b82f6; box-shadow:0 0 0 4px rgba(59,130,246,.15)}
.textarea{min-height:130px; resize:vertical}

/* Social buttons */
.social{display:flex; gap:12px; flex-wrap:wrap}
.social a{
  display:inline-flex; align-items:center; gap:10px; padding:10px 14px;
  border-radius:12px; text-decoration:none; color:#0b1220;
  background:#ffffff; border:1px solid var(--ring);
  transition:transform .2s, border-color .2s, background .2s;
}
.social a:hover{transform:translateY(-2px); border-color:#b6c4da; background:#f8fbff}
.social svg{width:18px; height:18px; display:block}

/* Footer */
footer{border-top:1px solid var(--shine); padding:34px 0; color:#475569; font-size:14px; background:#ffffff}
footer .row{display:flex; justify-content:space-between; align-items:center; gap:18px; flex-wrap:wrap}
footer img{height:26px}

/* Floating WhatsApp */
.fab{position:fixed; right:18px; bottom:18px; z-index:60}
.fab a{
  display:inline-flex; align-items:center; gap:10px; padding:12px 16px; border-radius:999px; text-decoration:none;
  background:linear-gradient(120deg,var(--primary), var(--accent)); color:#fff;
  box-shadow:0 10px 24px rgba(38,131,195,.25)
}

/* Reveal */
.reveal{opacity:0; transform:translateY(16px); transition:opacity .6s, transform .6s}
.reveal.is-visible{opacity:1; transform:none}

/* Responsive */
@media (max-width:1024px){
  .hero .wrap{grid-template-columns:1fr}
  .cards,.pricing,.testimonials{grid-template-columns:1fr}
  .contact{grid-template-columns:1fr}
  .menu{display:none}
}
