:root {
  --blue: #148fe3;
  --blue-dark: #104f9f;
  --cyan: #11b4c2;
  --text: #233a63;
  --muted: #6b7891;
  --bg: #f4f8fd;
  --line: #e4edf7;
  --shadow: 0 18px 45px rgba(16, 79, 159, 0.10);
  --container: 1180px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: "Inter", sans-serif;
  color: var(--text);
  background:
    linear-gradient(to bottom, rgba(255,255,255,0.96), rgba(255,255,255,0.98)),
    url("./assets/bg-wave-light.png") no-repeat bottom center / cover,
    var(--bg);
}
img { display:block; max-width:100%; height:auto; }
a { text-decoration:none; color:inherit; }
button, input, textarea { font: inherit; }
.container { width:min(var(--container), calc(100% - 40px)); margin:0 auto; }
.header { position:sticky; top:0; z-index:1000; background:rgba(255,255,255,.95); backdrop-filter:blur(12px); border-bottom:1px solid var(--line); }
.header-inner { min-height:82px; display:flex; align-items:center; justify-content:space-between; gap:20px; }
.brand-logo { width:auto; height:48px; max-width:260px; object-fit:contain; }
.nav { display:flex; gap:28px; align-items:center; }
.nav a { font-weight:600; color:#35507a; transition:.2s ease; }
.nav a:hover { color:var(--blue); }
.btn { display:inline-flex; align-items:center; justify-content:center; min-height:52px; padding:0 24px; border-radius:14px; font-weight:700; border:0; cursor:pointer; transition:.25s ease; }
.btn:hover { transform:translateY(-2px); }
.btn-primary { color:#fff; background:linear-gradient(90deg, var(--blue) 0%, var(--cyan) 100%); }
.btn-light { background:#fff; color:var(--blue-dark); border:1px solid rgba(255,255,255,.7); }
.menu-toggle { display:none; width:46px; height:46px; border:1px solid var(--line); background:#fff; border-radius:12px; cursor:pointer; padding:10px; }
.menu-toggle span { display:block; height:2px; background:var(--text); margin:6px 0; }
.hero { padding:60px 0 50px; background:linear-gradient(120deg, #0d64c4 0%, #2d96da 54%, #89d7ef 100%); }
.hero-grid { display:grid; grid-template-columns:1fr 1fr; gap:36px; align-items:center; }
.hero-tag, .section-tag { display:inline-block; margin-bottom:14px; font-size:.95rem; font-weight:700; }
.hero-tag { color:rgba(255,255,255,.88); }
.section-tag { color:var(--blue); }
.hero-copy h1 { margin:0 0 18px; color:#fff; font-size:clamp(2.3rem, 4vw, 4rem); line-height:1.08; }
.hero-copy p { margin:0; font-size:1.15rem; line-height:1.7; color:rgba(255,255,255,.92); }
.hero-actions { display:flex; gap:16px; margin-top:30px; flex-wrap:wrap; }
.hero-visual { display:flex; justify-content:center; align-items:center; min-width:0; }
.hero-image { width:100%; max-width:520px; object-fit:contain; }
.benefits { margin-top:-18px; position:relative; z-index:2; }
.benefit-grid { display:grid; grid-template-columns:repeat(3, 1fr); background:#fff; border:1px solid var(--line); border-radius:22px; overflow:hidden; box-shadow:var(--shadow); }
.benefit-card { padding:28px 24px; display:grid; grid-template-columns:70px 1fr; gap:16px; }
.benefit-card + .benefit-card { border-left:1px solid var(--line); }
.benefit-icon { width:56px; height:56px; object-fit:contain; }
.benefit-card h3 { margin:0 0 10px; font-size:1.5rem; }
.benefit-card p { margin:0; color:var(--muted); line-height:1.65; }
.section { padding:84px 0; }
.section-head { text-align:center; max-width:820px; margin:0 auto 40px; }
.section-head h2, .about-content h2 { margin:0 0 18px; font-size:clamp(2rem, 4vw, 3.2rem); line-height:1.12; }
.section-head p, .about-content p { color:var(--muted); font-size:1.08rem; line-height:1.8; }
.about-grid { display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:center; }
.about-image-wrap { border-radius:24px; overflow:hidden; background:#e8f1fa; box-shadow:var(--shadow); }
.about-image { width:100%; height:420px; object-fit:cover; }
.services-grid { display:grid; grid-template-columns:repeat(3, 1fr); gap:20px; }
.service-card { background:#fff; border:1px solid var(--line); border-radius:20px; padding:24px; }
.service-card h3 { margin:0 0 12px; font-size:1.2rem; }
.service-card p { margin:0; color:var(--muted); line-height:1.7; }
.contact-grid { display:grid; grid-template-columns:.9fr 1.1fr; gap:24px; }
.contact-info-card, .contact-form-card { background:#fff; border:1px solid var(--line); border-radius:24px; padding:26px; box-shadow:var(--shadow); }
.contact-info-card h3 { margin:0 0 20px; }
.contact-list { display:grid; gap:14px; margin-bottom:24px; }
.contact-link { display:flex; align-items:center; gap:12px; font-weight:600; }
.contact-link-icon { width:40px; height:40px; border-radius:12px; background:#eef6ff; color:var(--blue); display:inline-flex; align-items:center; justify-content:center; flex:0 0 auto; }
.contact-link-icon svg { width:20px; height:20px; }
.social-box h4 { margin:0 0 12px; color:var(--muted); }
.social-links { display:flex; gap:12px; }
.social-link { width:44px; height:44px; border-radius:12px; background:#eef6ff; color:var(--blue); display:inline-flex; align-items:center; justify-content:center; transition:.2s ease; }
.social-link:hover { transform:translateY(-2px); color:var(--blue-dark); }
.social-link svg { width:22px; height:22px; }
.form-tabs { display:flex; gap:10px; margin-bottom:22px; flex-wrap:wrap; }
.tab-btn { border:1px solid var(--line); background:#f4f8fd; color:#4a5d7d; padding:12px 18px; border-radius:12px; font-weight:700; cursor:pointer; }
.tab-btn.active { background:linear-gradient(90deg, var(--blue) 0%, var(--cyan) 100%); color:#fff; border-color:transparent; }
.tab-content { display:none; }
.tab-content.active { display:block; }
.contact-form { display:grid; gap:16px; }
.form-row { display:grid; grid-template-columns:repeat(2, 1fr); gap:14px; }
.form-group { display:grid; gap:8px; }
.form-group label { font-weight:700; }
.form-group input, .form-group textarea { width:100%; border:1px solid #d8e5f3; border-radius:14px; padding:14px 16px; background:#fff; color:var(--text); outline:none; }
.form-group input:focus, .form-group textarea:focus { border-color:var(--blue); box-shadow:0 0 0 4px rgba(20,143,227,.1); }
.status-box { width:min(var(--container), calc(100% - 40px)); margin:0 auto 24px; padding:14px 18px; border-radius:14px; font-weight:600; }
.status-box.success { background:#e8fff0; color:#1f7a3d; border:1px solid #b9ebc9; }
.status-box.error { background:#fff0f0; color:#a13333; border:1px solid #f1c0c0; }
.footer { margin-top:30px; padding:28px 0; border-top:1px solid var(--line); background:#fff; }
.footer-inner { display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap; }
.footer-logo { width:auto; height:38px; max-width:220px; object-fit:contain; }
.footer-email { font-weight:600; }
.footer-social { display:flex; gap:12px; }
.footer-social a { width:40px; height:40px; border-radius:12px; border:1px solid var(--line); background:#fff; display:inline-flex; align-items:center; justify-content:center; color:var(--blue); }
.footer-social svg { width:20px; height:20px; }
.floating-whatsapp { position:fixed; right:20px; bottom:20px; width:58px; height:58px; border-radius:999px; background:#18c44f; color:#fff; display:inline-flex; align-items:center; justify-content:center; box-shadow:0 16px 30px rgba(13,158,61,.28); z-index:1100; }
.floating-whatsapp svg { width:28px; height:28px; }
@media (max-width:1100px) {
  .hero-grid, .about-grid, .contact-grid, .services-grid, .benefit-grid { grid-template-columns:1fr; }
  .benefit-card + .benefit-card { border-left:0; border-top:1px solid var(--line); }
}
@media (max-width:860px) {
  .menu-toggle { display:block; }
  .desktop-cta { display:none; }
  .nav { position:absolute; top:82px; left:0; right:0; display:none; flex-direction:column; gap:0; background:#fff; border-bottom:1px solid var(--line); }
  .nav.open { display:flex; }
  .nav a { padding:16px 20px; border-top:1px solid var(--line); width:100%; }
}
@media (max-width:760px) {
  .header-inner { min-height:74px; }
  .brand-logo { height:40px; max-width:180px; }
  .hero { padding:48px 0 36px; }
  .hero-copy p { font-size:1rem; }
  .hero-image { max-width:100%; }
  .about-image { height:320px; }
  .form-row { grid-template-columns:1fr; }
  .footer-inner { flex-direction:column; align-items:flex-start; }
}
