:root{
  --bg:#eef6f7;
  --teal:#2fb3ad;
  --ink:#14262b;
  --muted:#4b646b;
  --card:rgba(47,179,173,0.78);
  --pill:rgba(255,255,255,0.85);
  --shadow:0 18px 38px rgba(0,0,0,0.12);
  --radius:28px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif;color:var(--ink);background:var(--bg);scroll-behavior:smooth}
a{color:inherit;text-decoration:none}
.container{max-width:1200px;margin:0 auto;padding:0 22px}

/* Top bar */
.topbar{
  position:sticky; top:0; z-index:50;
  background:rgba(255,255,255,0.92);
  backdrop-filter:saturate(140%) blur(10px);
  border-bottom:1px solid rgba(0,0,0,0.06);
}
.topbar-inner{display:flex; align-items:center; justify-content:space-between; height:72px;}
.brand{display:flex; align-items:center; gap:12px; min-width:220px}
.brand img{height:44px; width:auto; display:block} /* logo más grande */
.nav{display:flex; gap:16px; align-items:center; font-size:13px; letter-spacing:0.12em; text-transform:uppercase; color:rgba(20,38,43,0.78)}
.nav a{padding:10px 6px;border-radius:10px}
.nav a:hover{background:rgba(47,179,173,0.10)}
.nav .cta{background:var(--teal); color:white; padding:10px 16px; border-radius:999px; letter-spacing:0.06em; text-transform:none; font-weight:800;}
.nav .cta:hover{filter:brightness(0.95)}
.burger{display:none;background:none;border:0;font-size:26px}

/* Hero */
.hero{
  position:relative; overflow:hidden; min-height:640px; display:flex; align-items:stretch;
  background:linear-gradient(90deg, #38b9b2 0%, #38b9b2 33%, #d5f0f1 33%, #cfe9f7 78%, #cfd8ff 100%);
}
.hero-right-bg{
  position:absolute; inset:0 0 0 33%;
  background-image:url("assets/hero-tech.jpg");
  background-size:cover; background-position:center;
  opacity:0.26; filter:saturate(1.15) contrast(1.05);
  mix-blend-mode:overlay;
}
.hero-geo{
  position:absolute; inset:0 0 0 33%;
  background:url("assets/geo.svg") center/62% no-repeat;
  opacity:0.55; pointer-events:none;
}
.hero-inner{
  position:relative; width:100%;
  display:grid; grid-template-columns: 1fr 1.35fr; gap:24px;
  padding:66px 0;
}
.hero-card{
  width:min(520px, 100%);
  margin-left:22px;
  background:var(--card);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:38px 34px 30px;
  color:rgba(6,18,20,0.92);
  border:1px solid rgba(255,255,255,0.22);
}
.hero-kicker{font-size:12px; letter-spacing:0.24em; text-transform:uppercase; font-weight:900; opacity:0.85; margin-bottom:10px;}
.hero-title{font-size:54px; line-height:1.02; letter-spacing:-0.02em; margin:0 0 14px; font-weight:950;}
.hero-sub{color:rgba(7,20,24,0.82); font-size:14px; line-height:1.6; margin:0 0 22px; max-width:44ch;}
.hero-actions{display:flex; gap:12px; flex-wrap:wrap; margin-bottom:16px;}
.btn{border:0;border-radius:999px;padding:12px 18px;font-weight:900;cursor:pointer;display:inline-flex;align-items:center;gap:10px}
.btn-primary{background:rgba(255,255,255,0.88); color:#0c1f22}
.btn-primary:hover{background:white}
.btn-ghost{background:rgba(0,0,0,0.12); color:#0c1f22}
.btn-ghost:hover{background:rgba(0,0,0,0.18)}
.btn-accent{background:var(--teal); color:white; box-shadow:0 10px 18px rgba(47,179,173,0.28)}
.btn-accent:hover{filter:brightness(0.95)}
.btn-accent:active{transform:translateY(1px)}

.pills{display:flex; gap:10px; flex-wrap:wrap; margin-top:12px}
.pill{background:var(--pill); border-radius:999px; padding:8px 12px; font-size:12px; color:#0c1f22; display:flex; align-items:center; gap:8px; border:1px solid rgba(0,0,0,0.06);}
.pill b{font-weight:950}

/* Sections */
.section{padding:62px 0}
.section h2{margin:0 0 14px;font-size:32px}
.section p.lead{margin:0 0 28px; color:var(--muted); line-height:1.7; max-width:75ch}
.grid{display:grid; grid-template-columns:repeat(3,1fr); gap:18px}
.card{background:white; border:1px solid rgba(0,0,0,0.06); border-radius:22px; padding:20px 18px; box-shadow:0 10px 18px rgba(0,0,0,0.06);}
.card h3{margin:0 0 8px;font-size:16px}
.card p{margin:0; color:var(--muted); line-height:1.55; font-size:14px}

/* Contact */
.contact-wrap{display:grid; grid-template-columns: 0.95fr 1.05fr; gap:18px; align-items:start;}
.contact-box{background:white; border:1px solid rgba(0,0,0,0.06); border-radius:22px; padding:18px; box-shadow:0 10px 18px rgba(0,0,0,0.06);}
.contact-cta{display:flex; gap:10px; flex-wrap:wrap; margin-top:10px}
.small{font-size:13px;color:var(--muted);line-height:1.6}
.form-row{display:grid; grid-template-columns:1fr 1fr; gap:12px}
label{display:block;font-size:12px;font-weight:900;letter-spacing:0.06em;text-transform:uppercase;color:#2d4248;margin:10px 0 6px}
input, textarea{width:100%; border:1px solid rgba(0,0,0,0.12); border-radius:14px; padding:12px 12px; font-size:14px; outline:none}
input:focus, textarea:focus{border-color:rgba(47,179,173,0.8); box-shadow:0 0 0 4px rgba(47,179,173,0.15)}
textarea{min-height:140px; resize:vertical}
.form-actions{display:flex;align-items:center;justify-content:space-between;gap:12px; flex-wrap:wrap; margin-top:14px}
.notice{font-size:13px;color:var(--muted)}
.error{color:#9b1c1c;font-weight:900}
.success{color:#0f7a3c;font-weight:900}
.honey{display:none !important}

/* Footer */
.footer{padding:30px 0; border-top:1px solid rgba(0,0,0,0.06); color:rgba(20,38,43,0.70); font-size:13px}

@media (max-width: 980px){
  .hero-inner{grid-template-columns:1fr; padding:46px 0}
  .hero{min-height:720px}
  .hero-card{margin:0 auto}
  .hero-right-bg, .hero-geo{inset:0; opacity:0.18}
  .grid{grid-template-columns:1fr 1fr}
  .contact-wrap{grid-template-columns:1fr}
  .nav{display:none}
  .burger{display:block}
}
@media (max-width: 560px){
  .hero-title{font-size:42px}
  .grid{grid-template-columns:1fr}
  .form-row{grid-template-columns:1fr}
  .brand img{height:40px}
}


/* Larger logo */
.logo img{height:44px; width:auto}
@media (max-width: 980px){ .logo img{height:38px} }

/* Section background alternation (same tone, slightly different) */
.section-a{background:rgba(47,179,173,0.06)}
.section-b{background:rgba(47,179,173,0.03)}
.section-c{background:rgba(47,179,173,0.08)}

/* Social icons */
.social{display:flex; gap:10px; align-items:center}
.social-link{
  width:34px; height:34px; display:inline-flex; align-items:center; justify-content:center;
  border-radius:999px;
  background:rgba(47,179,173,0.12);
  color:rgba(20,38,43,0.82);
  border:1px solid rgba(0,0,0,0.06);
}
.social-link:hover{background:rgba(47,179,173,0.18)}
.social-contact{margin-top:12px}