/* =====================
   RJ Certificadora Digital - Styles
   Palette derived from logo
   ===================== */
:root{
  --brand-green:#8BC53F;   /* lime/green from logo */
  --brand-green-600:#6aa12d;
  --brand-blue:#1f5c77;    /* deep teal/blue from logo */
  --brand-blue-700:#17475b;
  --brand-sky:#2aa9d6;     /* accent orbit stroke */
  --ink:#0f172a;           /* slate-900 */
  --muted:#475569;         /* slate-600 */
  --bg:#f8fafc;            /* slate-50 */
  --card:#ffffff;
  --ring:rgba(31,92,119,.25);
  --shadow:0 10px 30px rgba(2,12,27,.08), 0 2px 8px rgba(2,12,27,.06);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  color:var(--ink);
  background:linear-gradient(180deg,var(--bg),#eef6fb 25%, var(--bg) 60%);
  line-height:1.6;
}

/* Utilities */
.container{width:min(1120px, 92%); margin-inline:auto}
.btn{
  display:inline-flex; align-items:center; gap:.6rem;
  padding:.85rem 1.2rem; border-radius:999px; border:1px solid transparent;
  font-weight:700; letter-spacing:.2px; cursor:pointer; text-decoration:none;
  transition:all .22s ease;
}
.btn-primary{ background:linear-gradient(135deg,var(--brand-green),#9fd85a); color:#0a1a0f; box-shadow:var(--shadow)}
.btn-primary:hover{ transform:translateY(-2px); box-shadow:0 18px 40px rgba(139,197,63,.25)}
.btn-outline{ background:transparent; color:var(--brand-blue); border-color:var(--brand-blue)}
.btn-outline:hover{ background:rgba(31,92,119,.06) }
.badge{display:inline-block; font-size:.8rem; padding:.3rem .6rem; border-radius:999px; background:rgba(139,197,63,.15); color:var(--brand-green); font-weight:700}

/* Header */
.header{
  position:sticky; top:0; z-index:50;
  background:rgba(255,255,255,.85); backdrop-filter:saturate(180%) blur(8px);
  border-bottom:1px solid rgba(2,12,27,.06);
}
.nav{ display:flex; align-items:center; justify-content:space-between; padding:.75rem 0}
.brand{ display:flex; align-items:center; gap:.75rem; text-decoration:none}
.brand img{ height:42px; width:auto; border-radius:6px}
.brand .wordmark{ font-weight:800; color:var(--brand-blue); letter-spacing:.3px}
.brand .wordmark span{ color:var(--brand-green) }
.navlinks{ display:flex; align-items:center; gap:1rem}
.navlinks a{ text-decoration:none; color:#0b2530; font-weight:600; padding:.5rem .75rem; border-radius:10px}
.navlinks a:hover{ background:rgba(31,92,119,.06)}
.mobile-toggle{ display:none; border:none; background:transparent; font-size:1.6rem; cursor:pointer}

/* Hero */
.hero{
  padding:clamp(3rem, 6vw, 6rem) 0 3rem;
}
.grid-2{
  display:grid; grid-template-columns:1.2fr .8fr; gap:3rem; align-items:center;
}
.hero h1{font-size: clamp(2rem, 2.8rem + 1vw, 3.4rem); line-height:1.12; margin:.4rem 0 .5rem; color:var(--brand-blue)}
.hero p{font-size:1.1rem; color:var(--muted)}
.hero .cta{display:flex; gap:.8rem; flex-wrap:wrap; margin-top:1.4rem}

/* Feature cards */
.features{ padding:3rem 0}
.cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.2rem}
.card{
  background:var(--card); border:1px solid rgba(2,12,27,.06); border-radius:18px; padding:1.25rem;
  box-shadow:var(--shadow); transition:transform .2s ease;
}
.card:hover{ transform: translateY(-4px) }
.card h3{ margin:.2rem 0 .6rem; color:var(--brand-blue)}
.icon{
  width:44px; height:44px; border-radius:12px; display:grid; place-items:center;
  background:linear-gradient(135deg, rgba(42,169,214,.15), rgba(31,92,119,.08));
  border:1px solid rgba(31,92,119,.15);
}

/* Products / Plans */
.section{ padding:3.5rem 0 }
.section h2{ font-size:2.2rem; color:var(--brand-blue); margin:0 0 .8rem }
.section p.lead{ color:var(--muted); margin-top:0 }

.plans{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.2rem; margin-top:1rem}
.plan{
  background:#fff; border:1px solid rgba(2,12,27,.06); border-radius:22px; overflow:hidden; box-shadow:var(--shadow);
  display:flex; flex-direction:column
}
.plan .head{ padding:1.2rem 1.2rem .8rem; background:linear-gradient(180deg,rgba(31,92,119,.04),transparent)}
.plan .price{ font-size:2rem; font-weight:800; color:var(--brand-blue)}
.plan ul{ list-style:none; padding:0 1.2rem 1.2rem; margin:0}
.plan ul li{ padding:.45rem 0; display:flex; gap:.6rem; align-items:flex-start}
.plan ul li::before{ content:"✓"; color:var(--brand-green); font-weight:900; margin-top:.05rem}
.plan .cta{ padding:0 1.2rem 1.4rem; margin-top:auto}

/* Social proof */
.logos{ display:flex; gap:2.4rem; align-items:center; flex-wrap:wrap; opacity:.8}

/* FAQ */
.faq{ max-width:900px; margin-inline:auto}
.accordion{ border:1px solid rgba(2,12,27,.08); border-radius:18px; overflow:hidden; box-shadow:var(--shadow)}
.ac{ border-top:1px solid rgba(2,12,27,.08) }
.ac:first-child{ border-top:none}
.ac h3{ margin:0}
.ac button{
  width:100%; text-align:left; padding:1rem 1.2rem; font-weight:700; color:var(--brand-blue);
  background:#fff; border:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between
}
.ac .panel{ max-height:0; overflow:hidden; transition:max-height .35s ease; background:#fff; padding:0 1.2rem}
.ac .panel p{ color:var(--muted) }
.ac.open .panel{ padding:0 1.2rem 1rem }
.chev{ transition: transform .3s ease }

/* Contact */
.contact{
  display:grid; grid-template-columns:1.1fr .9fr; gap:1.5rem; align-items:stretch;
}
.form{
  background:#fff; border-radius:18px; border:1px solid rgba(2,12,27,.06); padding:1.2rem; box-shadow:var(--shadow)
}
.form label{ display:block; font-weight:700; margin:.4rem 0 .25rem; color:var(--brand-blue)}
.form input,.form textarea, .form select{
  width:100%; padding:.8rem; border-radius:12px; border:1px solid rgba(2,12,27,.12); outline:none;
}
.form input:focus,.form textarea:focus,.form select:focus{ box-shadow:0 0 0 4px var(--ring); border-color:var(--brand-blue) }
.form .row{ display:grid; grid-template-columns:1fr 1fr; gap:.8rem}
.form .help{ font-size:.86rem; color:var(--muted) }
.map{
  border-radius:18px; overflow:hidden; min-height:380px; border:1px solid rgba(2,12,27,.06); box-shadow:var(--shadow)
}

/* Footer */
.footer{
  background:#0d2530; color:#d9edf5; margin-top:3rem
}
.footer a{ color:#a9e3ff; text-decoration:none}
.footer .grid{ display:grid; grid-template-columns:2fr 1fr 1fr; gap:1.5rem; padding:2rem 0}
.footer .brand img{ height:38px}
.subfooter{ border-top:1px solid rgba(255,255,255,.08); padding:.9rem 0; font-size:.92rem; color:#c6e4ef}

/* WhatsApp FAB */
.fab{
  position:fixed; right:18px; bottom:18px; z-index:60;
  width:60px; height:60px; border-radius:50%; display:grid; place-items:center;
  background:linear-gradient(135deg,var(--brand-green),#a6e066); color:#08220a; font-size:1.6rem;
  box-shadow:0 18px 40px rgba(139,197,63,.35);
}
.fab:hover{ transform:translateY(-2px) }

/* Responsive */
@media (max-width: 960px){
  .grid-2{ grid-template-columns:1fr; }
  .cards{ grid-template-columns:repeat(2,1fr) }
  .plans{ grid-template-columns:repeat(2,1fr) }
  .contact{ grid-template-columns:1fr }
  .navlinks{ display:none }
  .mobile-toggle{ display:block }
}
@media (max-width: 640px){
  .cards{ grid-template-columns:1fr }
  .plans{ grid-template-columns:1fr }
}