:root {
  --bg: #ffffff;
  --surface: #f7f8fc;
  --surface-2: #eef2f9;
  --primary: #66779f;
  --primary-dark: #3b467d;
  --text: #1f2430;
  --muted: #5d6473;
  --line: #dde3ef;
  --shadow: 0 18px 45px rgba(45, 56, 89, 0.12);
  --radius: 24px;
  --radius-sm: 16px;
  --container: 1180px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
  color: var(--text);
  background: var(--bg);
  line-height: 1.6;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
.container { width: min(var(--container), calc(100% - 2rem)); margin: 0 auto; }
.topbar {
  position: sticky; top: 0; z-index: 50;
  backdrop-filter: blur(10px);
  background: rgba(255,255,255,.92);
  border-bottom: 1px solid rgba(221,227,239,.8);
}
.topbar-inner {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 0.9rem 0;
}
.brand { display: flex; align-items: center; gap: .85rem; min-width: 0; }
.brand-logo {
  width: 74px; height: 74px; object-fit: contain; background: #fff; border-radius: 18px;
  padding: .35rem; box-shadow: var(--shadow);
}
.brand-text { display:flex; flex-direction:column; line-height:1.1; }
.brand-title { font-weight: 800; font-size: 1.05rem; }
.brand-subtitle { color: var(--primary-dark); font-weight: 700; }
.nav { display:flex; gap:1rem; flex-wrap:wrap; }
.nav a {
  font-weight:700; color: var(--muted); padding:.65rem .85rem; border-radius:999px;
}
.nav a:hover { background: var(--surface); color: var(--primary-dark); }
.hero {
  padding: 3rem 0 2rem;
  background:
    radial-gradient(circle at top right, rgba(142, 196, 233, 0.22), transparent 32%),
    linear-gradient(180deg, #ffffff 0%, #f9fbff 100%);
}
.hero-grid {
  display:grid; grid-template-columns: 1.05fr .95fr; gap: 2rem; align-items:center;
}
.card, .content-card, .contact-card, .topics-panel, .logo-panel {
  background:#fff; border:1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow);
}
.hero-copy { padding: 2rem; }
.eyebrow {
  display:inline-block; margin:0 0 .75rem; text-transform:uppercase; letter-spacing:.15em;
  font-size:.78rem; font-weight:800; color: var(--primary-dark);
}
h1, h2 { margin: 0 0 1rem; line-height:1.1; }
h1 { font-size: clamp(2.2rem, 4vw, 4.5rem); }
h2 { font-size: clamp(1.6rem, 2.4vw, 2.6rem); }
.lead { font-size: 1.05rem; color: var(--muted); max-width: 58ch; }
.hero-actions, .contact-actions { display:flex; gap:.9rem; flex-wrap:wrap; margin-top:1.4rem; }
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem; min-height:50px;
  padding:.9rem 1.2rem; border-radius: 999px; font-weight:800; transition:.2s ease;
}
.btn-primary { background: linear-gradient(135deg, var(--primary-dark), var(--primary)); color:#fff; }
.btn-primary:hover { transform: translateY(-2px); }
.btn-secondary { background: var(--surface); color: var(--primary-dark); border:1px solid var(--line); }
.hero-visual {
  position:relative; min-height: 500px; display:flex; align-items:center; justify-content:center;
}
.logo-panel {
  width:min(100%, 520px); padding:1.25rem; position:relative; z-index:2; background: linear-gradient(180deg, #fff, #f5f8ff);
}
.logo-panel img { width:100%; object-fit:contain; }
.shape {
  position:absolute; border-radius: 30px; filter: blur(.2px);
}
.shape-a { width: 180px; height: 180px; background: rgba(145, 209, 239, .55); top: 18px; right: 10px; clip-path: polygon(50% 0%, 100% 100%, 0% 100%); }
.shape-b { width: 220px; height: 220px; background: rgba(110, 130, 185, .22); bottom: 22px; left: 18px; transform: rotate(14deg); }
.shape-c { width: 110px; height: 110px; background: rgba(164, 220, 244, .55); bottom: 42px; right: 40px; clip-path: polygon(0 0, 100% 0, 50% 100%); }
.section { padding: 2rem 0 4rem; }
.section-alt { background: linear-gradient(180deg, #f9fbff 0%, #ffffff 100%); }
.section-heading { margin-bottom: 1.25rem; }
.content-card { padding: 1.6rem 1.5rem; }
.two-col {
  display:grid; grid-template-columns: 1fr 1fr; gap:1.5rem;
}
.signature-card { background: linear-gradient(180deg, #ffffff, #f7f9ff); }
.topics-panel {
  padding: 1.6rem 1.7rem;
  background: linear-gradient(135deg, #2e3494 0%, #4540a4 100%);
  color: #fff;
}
.topics-panel ul { margin:0; padding-left: 1.3rem; }
.topics-panel li { margin:.75rem 0; font-size: 1.06rem; }
.section-contact {
  background: radial-gradient(circle at bottom left, rgba(149, 201, 235, 0.18), transparent 28%), #fff;
}
.contact-grid {
  display:grid; grid-template-columns: .9fr 1.1fr; gap:1.5rem; align-items:center;
}
.contact-card { padding: 1.5rem; }
.contact-item { padding: 1rem 0; border-bottom: 1px solid var(--line); }
.contact-item:last-of-type { border-bottom: none; }
.contact-label { display:block; font-size:.78rem; letter-spacing:.12em; text-transform:uppercase; color: var(--muted); font-weight: 800; margin-bottom: .25rem; }
.contact-item a { font-size: 1.1rem; font-weight: 700; color: var(--primary-dark); overflow-wrap:anywhere; }
.footer { padding: 1.6rem 0 4.5rem; border-top: 1px solid var(--line); background: #fbfcff; }
.footer-inner { display:flex; align-items:center; gap:1rem; }
.footer-logo { width: 72px; height:72px; object-fit: contain; }
.footer-title { font-weight:800; margin:0; }
.floating-whatsapp {
  position: fixed; right: 18px; bottom: 18px; width: 56px; height:56px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; font-weight:900; color:#fff;
  background: linear-gradient(135deg, #2a3091, #66779f); box-shadow: var(--shadow); z-index: 60;
}
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; }
.reveal.is-visible { opacity: 1; transform: translateY(0); }
@media (max-width: 900px) {
  .hero-grid, .two-col, .contact-grid { grid-template-columns: 1fr; }
  .hero-visual { min-height: auto; }
  .nav { display:none; }
  .brand-logo { width: 62px; height: 62px; }
}
@media (max-width: 640px) {
  .container { width: min(var(--container), calc(100% - 1.2rem)); }
  .hero { padding-top: 1.5rem; }
  .hero-copy, .content-card, .contact-card, .topics-panel { padding: 1.2rem; }
  h1 { font-size: 2rem; }
  .btn { width: 100%; }
  .footer-inner { align-items:flex-start; }
}