:root {
  --ink: #0f172a;
  --muted: #4b5563;
  --bg: #ffffff;
  --brand: #15A0EA;
  --brand-strong: #0e7ec2;
  --chip: #f1f5f9;
  --shadow: 0 4px 12px rgba(2, 6, 23, .08);
  --radius: 12px;
  --max: 1100px;

  --header-left-gap: 0px;
  --header-right-gap: 16px;
}

/* Base */
* { box-sizing: border-box; }
body { margin: 0; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 16px; line-height: 1.55; background: var(--bg); color: var(--ink); }
a { color: var(--brand); text-decoration: none; }
a:hover { text-decoration: underline; }

/* Container */
.container { max-width: var(--max); margin: auto; padding: 24px 16px; }

@media (min-width: 961px){
  .container-align-with-header{
    width: var(--max);
    margin-left: calc((100vw - var(--max)) / 2);
    margin-right: 0;
    padding-left: var(--header-left-gap);
    padding-right: 16px;
  }
}
@media (max-width: 960px){
  .container-align-with-header{ margin: 0 auto; padding: 18px 14px; }
}

/* Navbar */
.nav { background:#fff; box-shadow:var(--shadow); position:sticky; top:0; z-index:20; position: relative; }
.nav .inner { display:flex; align-items:center; justify-content:flex-start; max-width: none; margin: 0; padding:14px var(--header-right-gap) 14px 8px; }
.logo { display:flex; align-items:center; gap:10px; font-weight:700; color:var(--ink); }
.brand-link { font-size:18px; font-weight:700; color:var(--ink); }
.logo-dot { width:32px; height:32px; border-radius:50%; background:#fff; display:flex; align-items:center; justify-content:center; overflow:hidden; box-shadow:0 0 4px rgba(0,0,0,.1); }
.logo-dot img { width:100%; height:100%; object-fit:contain; }

/* Header links */
.nav-links { position:absolute; right:16px; top:50%; transform:translateY(-50%); display:flex; gap:12px; flex-wrap:wrap; }

/* Buttons */
.btn{ padding:12px 18px; border-radius:999px; font-weight:700; display:inline-flex; align-items:center; justify-content:center; transition:background .2s, box-shadow .2s, transform .02s; border:0; }
.btn.btn-main{ color:#fff; background:var(--brand); box-shadow:0 8px 20px rgba(21,160,234,.25); }
.btn.btn-main:hover{ background:var(--brand-strong); }
.btn.btn-main:active{ transform:translateY(1px); }

/* Layout */
.grid{ display:grid; gap:24px; }
@media (min-width: 960px){
  .grid{ grid-template-columns:240px 1fr; }
  .sticky{ position:sticky; top:88px; }
}

/* Sidebar */
.card{ background:#fff; border-radius:var(--radius); box-shadow:var(--shadow); margin-bottom:16px; }
.card h3{ margin:0; padding:12px 16px; border-bottom:1px solid #eef2ff; font-size:15px; color:var(--ink); }
.list{ list-style:none; margin:0; padding:10px 12px 16px; }
.list li{ padding:6px 0; }
.list a{ padding:8px 10px; display:block; border-radius:8px; color:var(--ink); }
.list a:hover{ background:var(--chip); }

/* Provider logo + H1 */
.provider-logo{ width:80px; height:80px; border-radius:50%; display:flex; align-items:center; justify-content:center; margin:18px auto 10px; background:var(--brand); overflow:hidden; box-shadow: 0 6px 18px rgba(2, 6, 23, .08); }
.provider-logo img{ width:70%; height:70%; object-fit:contain; display:block; }
h1{ text-align:center; font-size:clamp(28px,6vw,48px); line-height:1.1; margin:6px 0 18px; color:var(--ink); }

/* CTA */
.cta{ background:#f4f7ff; border:1.5px solid var(--brand); border-radius:16px; padding:18px; text-align:center; }
.cta h2{ margin:0 0 6px; font-size:clamp(18px,3vw,22px); color:var(--ink); }
.cta p{ margin:6px 0 14px; color:var(--muted); }
.row{ display:flex; gap:12px; flex-wrap:wrap; justify-content:center; }

/* Content */
.content{ background:#f5fdf7; border:1px solid #cde7d5; border-radius:16px; padding:20px; margin-top:20px; }
.content h2{ font-size:22px; margin:0 0 12px; color:var(--ink); }
.content p, .content ul{ margin:0 0 12px; color:var(--muted); }
.content ul{ padding-left:18px; }
.catalog li{ margin-bottom:8px; }

/* Footer */
.footer{ margin-top:40px; background:#eef2fb; }
.footer .inner{ max-width:var(--max); margin:auto; padding:22px 16px; display:flex; flex-direction:column; gap:32px; color:#334155; }
.footer-sections{ display:grid; gap:20px; }
@media (min-width: 960px){ .footer-sections{ grid-template-columns: repeat(3,1fr); } }

/* Footer bottom layout */
.footer-bottom{ display:flex; flex-direction:column; align-items:center; gap:12px; }
.footer-left{ display:none; } /* placeholder to balance the grid on desktop */
.mini{ font-size:13px; color:#64748b; text-align:center; }

/* Social icons centered */
.social-links{ display:flex; justify-content:center; gap:20px; margin:12px 0; }
.social-links a svg{ transition: transform .2s ease, opacity .2s ease; }
.social-links a:hover svg{ transform: scale(1.08); opacity: .9; }

/* Desktop alignment: left placeholder, socials centered, links right */
@media (min-width: 960px){
  .footer-bottom{ flex-direction:row; align-items:center; gap:0; }
  .footer-left, .social-links, .footer-right{ flex:1; }
  .footer-left{ display:block; }
  .social-links{ justify-content:center; }
  .footer-right{ text-align:right; }
}

/* Mobile */
@media (max-width: 960px){
  .sidebar{ display:none; }
  .nav-links{ display:none; }
  .container{ padding:18px 14px; }
}

/* Sidebar alinhada e mais estreita */
@media (min-width: 960px){
  .sidebar{ margin-left:-96px; max-width:200px; }
  .sidebar .card{ width:100%; }
}

/* Deslocar conteúdo principal (+1 cm à direita do ajuste anterior) */
@media (min-width: 960px){
  main.container-align-with-header > .grid{ column-gap:16px; }
  main.container-align-with-header > .grid > section{
    margin-left:-82px;  /* -120px + ~38px */
    margin-right:auto;
    max-width:820px;
  }
}

/* ---------- FAQ ---------- */
.faq{ margin: 40px auto 20px; max-width: 900px; }
.faq-title{ text-align:center; font-size: clamp(22px, 4vw, 34px); line-height:1.15; margin:0 0 20px; color:#15A0EA; font-weight:800; }
.faq-list{ border:2px solid #15A0EA; border-radius:12px; padding:10px; background:#f9fcff; box-shadow:0 8px 20px rgba(21,160,234,.08); }
.faq-item + .faq-item{ border-top:1px solid #e3f0fa; }

.faq-q{ width:100%; text-align:left; background:transparent; color:#0f172a; border:none; padding:14px 40px 14px 10px; font-size: clamp(16px,2.2vw,20px); font-weight:700; cursor:pointer; display:flex; align-items:center; transition:color .2s, background .2s; }
.faq-q:hover{ background:#eef8ff; color:#15A0EA; }

.faq-a{ overflow:hidden; max-height:0; transition:max-height .35s ease; will-change:max-height; padding:0 8px; background:#e9f6fd; border-radius:8px; margin:6px 0; }
.faq-a p{ color:#334155; font-size: clamp(15px,1.9vw,17px); margin:10px 6px 14px; line-height:1.5; }

/* Chevron */
.faq-q .chev{ margin-left:auto; width:18px; height:18px; position:relative; }
.faq-q .chev::before, .faq-q .chev::after{ content:""; position:absolute; top:50%; left:50%; width:10px; height:2px; background:#15A0EA; transform-origin:center; transition: transform .25s ease; }
.faq-q .chev::before{ transform: translate(-50%,-50%) rotate(45deg); }
.faq-q .chev::after{ transform: translate(-50%,-50%) rotate(-45deg); }
.faq-q[aria-expanded="true"] .chev::before{ transform: translate(-50%,-50%) rotate(-45deg); }
.faq-q[aria-expanded="true"] .chev::after{ transform: translate(-50%,-50%) rotate(45deg); }

/* Mobile FAQ tweaks */
@media (max-width: 640px){
  .faq{ margin: 24px auto 10px; }
  .faq-list{ padding:6px; }
  .faq-q{ padding:12px 40px 12px 14px; font-size:16px; }
}