/* ============================================================
   JULIANO SEGUROS — DESIGN SYSTEM COMPARTILHADO  v2.0
   Importar em todas as páginas antes do <style> local
   ============================================================ */

/* ── TOKENS ─────────────────────────────────────────── */
:root {
  /* Marca */
  --color-navy:        #1A3A6B;
  --color-navy-dark:   #0D2040;
  --color-navy-mid:    #2A52A0;
  --color-navy-light:  #EEF3FB;
  --color-gold:        #C8961A;
  --color-gold-light:  #E8B430;
  --color-gold-pale:   #FDF4DC;
  --color-white:       #ffffff;
  --color-wa:          #25D366;
  --color-wa-dark:     #1A8F4E;

  /* Superfícies */
  --surface-base:      #F4F7FC;
  --surface-card:      #ffffff;
  --surface-subtle:    #E8EEF8;

  /* Bordas */
  --border-default:    rgba(26,58,107,.12);
  --border-strong:     rgba(26,58,107,.25);

  /* Textos */
  --text-primary:      #1C2338;
  --text-secondary:    #4A5878;
  --text-muted:        #8898B8;

  /* Sombras */
  --shadow-sm:  0 1px 4px rgba(26,58,107,.08);
  --shadow-md:  0 4px 16px rgba(26,58,107,.10);
  --shadow-lg:  0 8px 32px rgba(26,58,107,.14);

  /* Raios */
  --radius-sm:  6px;
  --radius-md:  10px;
  --radius-lg:  14px;
  --radius-xl:  20px;
  --radius-pill:99px;

  /* Espaçamentos fluidos */
  --space-xs:  clamp(.375rem, 1vw,  .5rem);
  --space-sm:  clamp(.625rem, 1.5vw,.875rem);
  --space-md:  clamp(1rem,    2vw,   1.5rem);
  --space-lg:  clamp(1.5rem,  3vw,   2.5rem);
  --space-xl:  clamp(2.5rem,  5vw,   4rem);

  /* Container */
  --max-w: 1140px;
  --gutter: clamp(1rem, 4vw, 2rem);

  /* Transição padrão */
  --transition: .18s ease;
}

/* ── RESET MÍNIMO ────────────────────────────────────── */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body {
  font-family: "Open Sans", system-ui, sans-serif;
  background: var(--surface-base);
  color: var(--text-primary);
  font-size: clamp(.9375rem, 2vw, 1rem);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
img, svg { display:block; max-width:100%; height:auto; }
a { color:inherit; text-decoration:none; }
button { cursor:pointer; font-family:inherit; border:none; background:none; }
ul,ol { list-style:none; }
@media (prefers-reduced-motion: reduce) {
  *,*::before,*::after { animation-duration:.01ms !important; transition-duration:.01ms !important; }
}

/* ── TIPOGRAFIA ──────────────────────────────────────── */
h1,h2,h3,h4,h5 { font-family:"Montserrat",system-ui,sans-serif; line-height:1.25; }
h1 { font-size:clamp(1.75rem, 5vw, 3rem);   font-weight:800; }
h2 { font-size:clamp(1.375rem, 3.5vw, 2rem);font-weight:700; }
h3 { font-size:clamp(1.125rem, 2.5vw, 1.5rem);font-weight:700; }
h4 { font-size:clamp(1rem, 2vw, 1.125rem);  font-weight:700; }

/* ── CONTAINER ───────────────────────────────────────── */
.container { max-width:var(--max-w); margin-inline:auto; padding-inline:var(--gutter); }

/* ── BOTÕES ──────────────────────────────────────────── */
.btn {
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.7rem 1.4rem; border-radius:var(--radius-pill);
  font-family:"Montserrat",sans-serif; font-size:.875rem; font-weight:700;
  text-decoration:none; transition:var(--transition);
  white-space:nowrap; line-height:1;
}
.btn-primary   { background:var(--color-gold);  color:var(--color-navy-dark); }
.btn-primary:hover { background:var(--color-gold-light); }
.btn-secondary { background:var(--color-navy);  color:#fff; }
.btn-secondary:hover { background:var(--color-navy-mid); }
.btn-wa { background:var(--color-wa); color:#fff; }
.btn-wa:hover { background:var(--color-wa-dark); }
.btn-outline { background:transparent; color:#fff; border:2px solid rgba(255,255,255,.45); }
.btn-outline:hover { background:rgba(255,255,255,.12); }
.btn-sm { padding:.45rem 1rem; font-size:.8125rem; }
.btn-lg { padding:.9rem 2rem; font-size:1rem; }

/* ── CARDS ───────────────────────────────────────────── */
.card {
  background:var(--surface-card); border-radius:var(--radius-lg);
  border:1px solid var(--border-default); padding:var(--space-md);
  box-shadow:var(--shadow-sm); transition:var(--transition);
}
.card:hover { box-shadow:var(--shadow-md); transform:translateY(-2px); }

/* ── SECTION TITLE ───────────────────────────────────── */
.section-label {
  font-size:.75rem; font-weight:700; text-transform:uppercase;
  letter-spacing:.1em; color:var(--color-gold);
  display:block; margin-bottom:.5rem;
}
.section-title {
  font-family:"Montserrat",sans-serif; font-size:clamp(1.25rem,3vw,1.75rem);
  font-weight:700; color:var(--color-navy); margin-bottom:var(--space-sm);
}
.section-subtitle { font-size:.9375rem; color:var(--text-secondary); max-width:56ch; }

/* ── BADGE / CHIP ────────────────────────────────────── */
.badge {
  display:inline-flex; align-items:center; gap:.35rem;
  padding:.3rem .8rem; border-radius:var(--radius-pill);
  font-size:.75rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase;
}
.badge-navy   { background:var(--color-navy-light); color:var(--color-navy); }
.badge-gold   { background:var(--color-gold-pale);  color:var(--color-navy-dark); }
.badge-wa     { background:rgba(37,211,102,.15);    color:var(--color-wa-dark); }

/* ── BREADCRUMB ──────────────────────────────────────── */
.breadcrumb-bar { background:var(--color-navy); padding:.625rem 0; }
.breadcrumb-bar .container { display:flex; align-items:center; gap:.5rem; flex-wrap:wrap; }
.breadcrumb-bar a { color:var(--color-gold-light); font-size:.8125rem; font-weight:600; }
.breadcrumb-bar a:hover { text-decoration:underline; }
.breadcrumb-bar span { color:rgba(255,255,255,.55); font-size:.8125rem; }

/* ── DISCLAIMER ──────────────────────────────────────── */
.disclaimer {
  font-size:.75rem; color:var(--text-muted); line-height:1.55;
  padding:.75rem 1rem; background:var(--surface-subtle);
  border-radius:var(--radius-sm); border-left:3px solid var(--border-strong);
}

/* ── HEADER ──────────────────────────────────────────── */
.site-header {
  background:var(--color-navy-dark);
  position:sticky; top:0; z-index:200;
  box-shadow:0 2px 20px rgba(0,0,0,.28);
}
.site-header .container {
  display:flex; align-items:center;
  justify-content:space-between; height:64px; gap:1rem;
}
/* Logo */
.site-logo { display:flex; align-items:center; gap:.75rem; flex-shrink:0; text-decoration:none; }
.site-logo__text h2 {
  font-size:.875rem; font-weight:800; color:#fff;
  letter-spacing:.1em; line-height:1.1;
}
.site-logo__text p {
  font-size:.5625rem; font-weight:600; color:var(--color-gold-light);
  letter-spacing:.18em; text-transform:uppercase;
}
/* Nav desktop */
.header-nav-desktop {
  display:flex; gap:.25rem; align-items:center;
}
.header-nav-desktop a {
  color:rgba(255,255,255,.82); font-size:.8125rem; font-weight:500;
  padding:.4rem .7rem; border-radius:var(--radius-sm);
  transition:var(--transition); white-space:nowrap;
}
.header-nav-desktop a:hover,
.header-nav-desktop a.active { color:#fff; background:rgba(255,255,255,.12); }
/* Header right */
.header-actions { display:flex; align-items:center; gap:.75rem; }
.header-ig-link {
  display:flex; align-items:center; gap:.35rem;
  color:rgba(255,255,255,.7); font-size:.75rem; transition:var(--transition);
}
.header-ig-link:hover { color:#fff; }
/* Hambúrguer */
.hamburger {
  display:none; align-items:center; justify-content:center;
  width:44px; height:44px; border-radius:var(--radius-sm);
  color:#fff; transition:var(--transition); cursor:pointer;
}
.hamburger:hover { background:rgba(255,255,255,.12); }
/* Drawer mobile */
.mobile-drawer {
  display:none; position:fixed; inset:0; z-index:300;
}
.mobile-drawer.is-open { display:block; }
.mobile-drawer__overlay {
  position:absolute; inset:0; background:rgba(0,0,0,.55);
}
.mobile-drawer__panel {
  position:absolute; top:0; right:0;
  width:min(320px, 90vw); height:100%;
  background:var(--color-navy-dark);
  display:flex; flex-direction:column;
  padding:1.5rem;
  overflow-y:auto;
  animation:slideIn .22s ease;
}
@keyframes slideIn { from{transform:translateX(100%)} to{transform:translateX(0)} }
.drawer-close {
  align-self:flex-end; color:rgba(255,255,255,.7);
  font-size:1.5rem; line-height:1; margin-bottom:1.5rem;
}
.drawer-close:hover { color:#fff; }
.drawer-nav { display:flex; flex-direction:column; gap:.25rem; flex:1; }
.drawer-nav a {
  color:rgba(255,255,255,.82); font-size:1rem; font-weight:500;
  padding:.75rem 1rem; border-radius:var(--radius-md);
  display:block; transition:var(--transition);
}
.drawer-nav a:hover,
.drawer-nav a.active { color:#fff; background:rgba(255,255,255,.1); }
.drawer-divider { height:1px; background:rgba(255,255,255,.1); margin:.75rem 0; }
.drawer-ig { display:flex; flex-direction:column; gap:.5rem; margin-top:.5rem; }
.drawer-ig a {
  display:flex; align-items:center; gap:.5rem;
  color:rgba(255,255,255,.7); font-size:.875rem;
  padding:.5rem 1rem; border-radius:var(--radius-md);
  transition:var(--transition);
}
.drawer-ig a:hover { color:#fff; background:rgba(255,255,255,.08); }
.drawer-cta { margin-top:1.25rem; }
.drawer-cta .btn { width:100%; justify-content:center; padding:.85rem; font-size:.9375rem; }

/* Responsividade do header */
@media (max-width:900px) {
  .header-nav-desktop { display:none; }
  .hamburger { display:flex; }
}
@media (max-width:480px) {
  .header-ig-link { display:none; }
}

/* ── FOOTER ──────────────────────────────────────────── */
.site-footer { background:var(--color-navy-dark); padding:var(--space-xl) 0 var(--space-md); margin-top:var(--space-xl); }
.footer-grid {
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(180px,1fr));
  gap:var(--space-lg);
  margin-bottom:var(--space-lg);
}
.footer-col h4 { color:#fff; font-size:.875rem; font-weight:700; margin-bottom:.875rem; letter-spacing:.04em; }
.footer-col a { display:block; color:rgba(255,255,255,.65); font-size:.8125rem; margin-bottom:.45rem; transition:var(--transition); }
.footer-col a:hover { color:var(--color-gold-light); }
.footer-phones { display:flex; flex-direction:column; gap:.5rem; }
.footer-phones a { display:flex; align-items:center; gap:.5rem; color:rgba(255,255,255,.82); font-size:.875rem; font-weight:600; }
.footer-phones a:hover { color:var(--color-gold-light); }
.footer-ig { display:flex; flex-direction:column; gap:.5rem; margin-top:.75rem; }
.footer-ig a { display:flex; align-items:center; gap:.5rem; color:rgba(255,255,255,.7); font-size:.8125rem; transition:var(--transition); }
.footer-ig a:hover { color:#fff; }
.footer-bottom {
  border-top:1px solid rgba(255,255,255,.1);
  padding-top:var(--space-md);
  display:flex; flex-wrap:wrap; gap:.75rem;
  justify-content:space-between; align-items:center;
}
.footer-copy { font-size:.75rem; color:rgba(255,255,255,.35); }
.footer-links { display:flex; gap:1rem; }
.footer-links a { font-size:.75rem; color:rgba(255,255,255,.45); }
.footer-links a:hover { color:rgba(255,255,255,.75); }

/* ── WHATSAPP FLOAT ──────────────────────────────────── */
.wa-float {
  position:fixed; bottom:1.5rem; right:1.5rem; z-index:150;
}
.wa-float a {
  display:flex; align-items:center; justify-content:center;
  width:56px; height:56px; border-radius:50%;
  background:var(--color-wa); color:#fff;
  box-shadow:0 4px 20px rgba(37,211,102,.45);
  transition:var(--transition);
}
.wa-float a:hover { background:var(--color-wa-dark); transform:scale(1.08); }

/* ── INSTAGRAM SECTION ───────────────────────────────── */
.ig-section { padding:var(--space-xl) 0; }
.ig-profiles { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:var(--space-md); margin-top:var(--space-lg); }
.ig-profile-card {
  background:linear-gradient(135deg,var(--color-navy),var(--color-navy-mid));
  border-radius:var(--radius-lg); padding:var(--space-md);
  display:flex; flex-direction:column; gap:1rem;
  border:1px solid rgba(255,255,255,.08);
}
.ig-profile-card__header { display:flex; align-items:center; gap:.875rem; }
.ig-avatar {
  width:52px; height:52px; border-radius:50%;
  background:linear-gradient(135deg,#f09433,#e6683c,#dc2743,#cc2366,#bc1888);
  display:flex; align-items:center; justify-content:center;
  font-size:1.5rem; flex-shrink:0;
}
.ig-handle { font-family:"Montserrat",sans-serif; font-size:1rem; font-weight:700; color:#fff; }
.ig-desc { font-size:.8125rem; color:rgba(255,255,255,.65); }
.ig-btn {
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  background:rgba(255,255,255,.12); color:#fff; padding:.6rem 1.2rem;
  border-radius:var(--radius-pill); font-size:.8125rem; font-weight:700;
  border:1px solid rgba(255,255,255,.2); transition:var(--transition);
  text-decoration:none; align-self:flex-start;
}
.ig-btn:hover { background:rgba(255,255,255,.22); }

/* ── UTILITIES ───────────────────────────────────────── */
.text-center { text-align:center; }
.text-muted   { color:var(--text-muted); }
.hidden       { display:none !important; }
.sr-only {
  position:absolute; width:1px; height:1px;
  padding:0; margin:-1px; overflow:hidden;
  clip:rect(0,0,0,0); white-space:nowrap; border-width:0;
}
.mt-sm  { margin-top:var(--space-sm); }
.mt-md  { margin-top:var(--space-md); }
.mt-lg  { margin-top:var(--space-lg); }
.mb-md  { margin-bottom:var(--space-md); }
.grid-auto { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:var(--space-md); }

/* ============================================================
   ACCORDION / FAQ COMPONENT
   ============================================================ */
.faq-section { padding:var(--space-xl) 0; }
.faq-list { max-width:720px; margin-inline:auto; display:flex; flex-direction:column; gap:.5rem; }
.faq-item {
  background:var(--surface-card);
  border:1px solid var(--border-default);
  border-radius:var(--radius-md);
  overflow:hidden;
  transition:box-shadow var(--transition);
}
.faq-item:focus-within { box-shadow:var(--shadow-md); }
.faq-trigger {
  width:100%; display:flex; align-items:center; justify-content:space-between;
  gap:1rem; padding:1.125rem 1.25rem;
  background:none; border:none; cursor:pointer;
  text-align:left; font-family:"Montserrat",sans-serif;
  font-size:.9375rem; font-weight:700; color:var(--color-navy);
  transition:var(--transition);
}
.faq-trigger:hover { background:var(--surface-subtle); }
.faq-trigger[aria-expanded="true"] { color:var(--color-gold); }
.faq-icon {
  flex-shrink:0; width:22px; height:22px; border-radius:50%;
  background:var(--color-navy-light); display:flex; align-items:center; justify-content:center;
  transition:transform var(--transition);
}
.faq-trigger[aria-expanded="true"] .faq-icon { transform:rotate(45deg); background:var(--color-gold-pale); }
.faq-icon svg { width:12px; height:12px; stroke:var(--color-navy); transition:var(--transition); }
.faq-trigger[aria-expanded="true"] .faq-icon svg { stroke:var(--color-gold); }
.faq-body {
  max-height:0; overflow:hidden;
  transition:max-height .3s ease, padding .25s ease;
}
.faq-body.is-open { max-height:600px; }
.faq-body-inner {
  padding:0 1.25rem 1.25rem;
  font-size:.9rem; color:var(--text-secondary);
  line-height:1.75;
  border-top:1px solid var(--border-default);
  padding-top:.875rem;
}
.faq-body-inner a { color:var(--color-navy); text-decoration:underline; font-weight:600; }

/* ============================================================
   HERO ILLUSTRATION — SVG hero section
   ============================================================ */
.hero-illustration {
  width:100%; max-width:480px;
  margin-inline:auto;
}
@media (max-width:768px) {
  .hero-illustration { max-width:280px; }
}