/* ============================================================
   SETOR SEGURO — CSS MASTER (INDEX MASTER REAL)
   EXTRAÍDO 1:1 DO INDEX ENVIADO PELO USUÁRIO
   NÃO OMITIR, NÃO SIMPLIFICAR, NÃO APROXIMAR
============================================================ */

/* ============================================================
   01) PALETA / TOKENS — DARK COMO PADRÃO
============================================================ */
:root{
  --yellow:#FFD002;
  --yellow-strong:#ffbf00;
  --gray:#94a3b8;
  --ink:#e5f0ff;
  --muted:#94a3b8;

  --bg:#020617;
  --bg-soft:#020b2a;

  --surface-1:#020b2a;
  --surface-2:#020617;
  --surface-border: rgba(148,163,184,.28);

  --card:var(--surface-1);

  --radius:18px;
  --shadow:0 18px 40px rgba(15,23,42,.75);
  --header-height: var(--ss-header-h-desktop);
}

/* ============================================================
   01B) TOKENS — TEMA CLARO
============================================================ */
[data-theme="light"]{
  --ink:#0b1220;
  --muted:#5b657a;

  --bg:#f8fafc;
  --bg-soft:#eef2f7;

  --surface-1:#ffffff;
  --surface-2:#f3f6fb;
  --surface-border: rgba(15,23,42,.10);

  --card:#ffffff;
  --gray:#646569;

  --shadow:
    0 12px 32px rgba(2,6,23,.10),
    0 3px 10px rgba(2,6,23,.06);
}

/* ============================================================
   02) BASE GLOBAL
============================================================ */
*{ box-sizing:border-box; }

body{
  margin:0;
  font-family:Inter, system-ui, sans-serif;
  background:
    radial-gradient(circle at top left,
      color-mix(in srgb, var(--bg) 85%, #000 15%) 0%,
      var(--bg-soft) 40%,
      var(--bg) 100%);
  color:var(--ink);
  padding-top: var(--header-offset, var(--header-height));
}

a{ text-decoration:none; color:inherit; }
img{ max-width:100%; display:block; }

.container{
  max-width:1180px;
  margin:0 auto;
  padding:0 16px;
}

.sr-only{
  position:absolute!important;
  width:1px;
  height:1px;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
}

/* ============================================================
   03) HEADER
============================================================ */
.site-header{
  position:fixed;
  top:0; left:0; right:0;
  min-height:var(--header-height);
  padding:10px 0;
  display:flex;
  align-items:center;
  z-index:9999;
  backdrop-filter:blur(18px) saturate(170%);
  background:
    linear-gradient(90deg,
      color-mix(in srgb, var(--bg) 92%, #000 8%),
      color-mix(in srgb, var(--bg) 88%, #000 12%));
  border-bottom:1px solid rgba(148,163,184,.28);
}

[data-theme="light"] .site-header{
  background:
    linear-gradient(90deg,
      color-mix(in srgb, #ffffff 96%, var(--bg-soft) 4%),
      color-mix(in srgb, #ffffff 92%, var(--bg-soft) 8%));
  border-color:rgba(15,23,42,.10);
}

.nav{
  display:flex;
  align-items:center;
  gap:22px;
  width:100%;
}

/* ============================================================
   03B) LOGO
============================================================ */
.brand img{
  height:110px;
  width:auto;
  filter:drop-shadow(0 18px 40px rgba(0,0,0,.8));
}

[data-theme="light"] .brand img{
  filter:drop-shadow(0 10px 22px rgba(2,6,23,.18));
}

/* ============================================================
   04) MENU
============================================================ */
.menu{
  margin-left:0;
  display:flex;
  align-items:center;
  gap:8px;
  padding:8px 18px 8px 14px;
  border-radius:22px;
  background:radial-gradient(circle at top left,
    rgba(15,23,42,.9),
    rgba(15,23,42,.98));
  border:1px solid rgba(148,163,184,.35);
  box-shadow:0 10px 30px rgba(15,23,42,.9);
}

[data-theme="light"] .menu{
  background:linear-gradient(135deg,
    rgba(255,255,255,.92),
    rgba(238,242,247,.92));
  border-color:rgba(15,23,42,.10);
  box-shadow:0 10px 28px rgba(2,6,23,.10);
}

@media (min-width:769px){
  .menu{
    display:grid;
    grid-auto-flow:row;
    grid-template-columns:repeat(3, max-content);
    grid-template-rows:repeat(2, auto);
    justify-content:end;
    justify-items:center;
    align-items:center;
    gap:8px 18px;
  }
  .menu li{ display:contents; }
}

.menu,
.menu li{ list-style:none; margin:0; padding:0; }

/* ============================================================
   04A) LINKS DO MENU
============================================================ */
.nav-link{
  display:flex;
  align-items:center;
  gap:.4rem;
  padding:8px 14px;
  border-radius:999px;
  font-weight:700;
  font-size:.95rem;
  color:#e5f0ff;
  position:relative;
  transition:.22s;
}

.nav-link::after{
  content:"";
  position:absolute;
  left:14px;
  right:14px;
  bottom:6px;
  height:2px;
  background:linear-gradient(90deg,#FFD002,#22d3ee);
  transform:scaleX(0);
  transform-origin:left;
  transition:.22s;
}

.nav-link:hover{
  background:rgba(15,23,42,.9);
  color:#fff;
}

.nav-link:hover::after{ transform:scaleX(1); }

[data-theme="light"] .nav-link{ color:#111827; }

[data-theme="light"] .nav-link:hover{
  background:rgba(15,23,42,.06);
  color:#0b1220;
}

.nav-link .iconify{ width:18px; height:18px; opacity:.9; }

/* ============================================================
   04B) BOTÕES
============================================================ */
.btn{
  display:flex;
  align-items:center;
  justify-content:center;
  padding:11px 22px;
  gap:.6rem;
  border-radius:999px;
  font-weight:800;
  cursor:pointer;
  border:none;
  white-space:nowrap;
  font-size:.95rem;
  box-shadow:0 18px 40px rgba(0,0,0,.7);
}

.btn-primary{
  background:radial-gradient(circle at 30% 0,
    #fff7c0 0,
    #FFD002 40%,
    #ff8a00 100%);
  color:#000;
}

/* ============================================================
   04C) TOGGLE DE TEMA
============================================================ */
.theme-toggle{
  margin-left:14px;
  width:42px;
  height:42px;
  border-radius:14px;
  display:grid;
  place-items:center;
  cursor:pointer;
  border:1px solid rgba(148,163,184,.35);
  background:
    linear-gradient(145deg, rgba(255,255,255,.08), rgba(255,255,255,.02)),
    radial-gradient(circle at top left, #0f172a, #020617);
  backdrop-filter:blur(10px);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.05),
    0 10px 28px rgba(0,0,0,.55);
  transition:.25s ease;
}

.theme-toggle:hover{ transform:translateY(-1px) scale(1.05); }

.theme-toggle .iconify{ width:20px; height:20px; color:#e5e7eb; }

[data-theme="light"] .theme-toggle{
  background:linear-gradient(145deg,#ffffff,#f1f5f9);
  border-color:rgba(15,23,42,.12);
}

[data-theme="light"] .theme-toggle .iconify{ color:#0b1220; }

/* ============================================================
   05) HERO
============================================================ */
.hero{
  padding:14px 0 22px;
  min-height:0;
  display:flex;
  align-items:center;
  position:relative;
  overflow:hidden;
}

.hero::before{
  content:"";
  position:absolute;
  inset:-30% -20% auto -20%;
  height:90%;
  background:
    radial-gradient(1200px 520px at 50% -180px, rgba(250,204,21,.35), transparent 60%),
    radial-gradient(900px 600px at 0 100%, rgba(56,189,248,.25), transparent 70%),
    radial-gradient(900px 600px at 100% 100%, rgba(59,130,246,.35), transparent 70%);
  opacity:.9;
  filter:blur(20px) saturate(140%);
  pointer-events:none;
  animation:swirl 22s linear infinite;
}

@keyframes swirl{ 0%{transform:rotate(0)} 100%{transform:rotate(360deg)} }

.hero > .container{ position:relative; z-index:1; }

.hero h1{
  font-size:clamp(1.65rem, 3.2vw, 2.55rem);
  font-weight:900;
  line-height:1.05;
  letter-spacing:-.03em;
  color:#f9fafb;
  text-shadow:0 18px 45px rgba(0,0,0,.95);
  margin:.4rem 0 .35rem;
}

.hero h1 span{ color:#f9c80e; }

.hero p{
  color:#e2e8f0;
  max-width:70ch;
  text-shadow:0 10px 30px rgba(15,23,42,.9);
}

[data-theme="light"] .hero h1{
  color:#0b1220;
  text-shadow:0 16px 36px rgba(2,6,23,.16);
}

[data-theme="light"] .hero p{
  color:#334155;
  text-shadow:0 12px 26px rgba(2,6,23,.10);
}

/* ============================================================
   06) BADGE
============================================================ */
.badge{
  display:inline-flex;
  align-items:center;
  gap:.55rem;
  padding:.45rem .85rem;
  border-radius:999px;
  font-weight:800;
  font-size:.8rem;
  background:rgba(15,23,42,.88);
  border:1px solid rgba(250,250,250,.15);
  color:#e5e7eb;
  box-shadow:0 12px 34px rgba(0,0,0,.75);
}

[data-theme="light"] .badge{
  background:rgba(255,255,255,.92);
  border-color:rgba(15,23,42,.10);
  color:#0b1220;
  box-shadow:0 12px 34px rgba(2,6,23,.10);
}

/* ============================================================
   07) SEÇÕES / GRID / CARDS
============================================================ */
section{ padding:22px 0; scroll-margin-top:56px; }

.section-title{
  font-size:clamp(1.3rem,2.2vw,1.85rem);
  font-weight:900;
  color:#f9fafb;
  margin-bottom:6px;
  letter-spacing:-.01em;
  line-height:1.12;
}

[data-theme="light"] .section-title{ color:#0b1220; }

.muted{ color:var(--muted); }

.grid{ display:grid; gap:10px; }
.grid-3{ grid-template-columns:repeat(3,1fr); }
.grid-2{ grid-template-columns:repeat(2,1fr); }

@media(max-width:1024px){ .grid-3{ grid-template-columns:1fr 1fr; } }
@media(max-width:760px){ .grid-3,.grid-2{ grid-template-columns:1fr; } }

.card{
  background:
    radial-gradient(circle at top left,
      color-mix(in srgb, var(--surface-1) 92%, #ffffff 8%),
      var(--surface-2) 70%);
  border-radius:var(--radius);
  padding:12px;
  border:1px solid var(--surface-border);
  box-shadow:var(--shadow);
  transition:.22s;
}

.card:hover{
  transform:translateY(-4px);
  border-color:rgba(250,204,21,.7);
  box-shadow:0 20px 50px rgba(0,0,0,.9);
}

[data-theme="light"] .card:hover{ box-shadow:0 18px 44px rgba(2,6,23,.12); }

.card h3{ color:#e5e7eb; margin:0 0 .2rem; font-size:1.02rem; }
[data-theme="light"] .card h3{ color:#0b1220; }

/* ============================================================
   08) CARROSSEL
============================================================ */
.carousel{
  display:flex;
  gap:14px;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  padding-bottom:14px;
}

.carousel img{
  width:100%;
  height:240px;
  flex:0 0 calc(50% - 7px);
  border-radius:22px;
  object-fit:cover;
  scroll-snap-align:center;
  border:1px solid rgba(148,163,184,.35);
  box-shadow:0 18px 40px rgba(0,0,0,.9);
}

@media(max-width:680px){ .carousel img{ flex:0 0 100%; height:220px; } }

/* ============================================================
   09) FAQ
============================================================ */
details.ac{
  background:
    radial-gradient(circle at top left,
      color-mix(in srgb, var(--surface-1) 92%, #ffffff 8%),
      var(--surface-2) 70%);
  border:1px solid rgba(148,163,184,.4);
  padding:9px 12px;
  border-radius:14px;
  box-shadow:var(--shadow);
  margin:7px 0;
}

[data-theme="light"] details.ac{
  border-color:rgba(15,23,42,.10);
  box-shadow:0 12px 30px rgba(2,6,23,.10);
}

details.ac summary{
  list-style:none;
  cursor:pointer;
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-weight:800;
  font-size:0.92rem;
  color:#e5e7eb;
}

[data-theme="light"] details.ac summary{ color:#0b1220; }

details.ac .plus{
  width:24px;
  height:24px;
  border-radius:999px;
  border:1px solid rgba(148,163,184,.7);
  display:grid;
  place-items:center;
  color:#e5e7eb;
}

[data-theme="light"] details.ac .plus{
  border-color:rgba(15,23,42,.14);
  color:#0b1220;
}

details[open] .plus{ transform:rotate(45deg); }

/* ============================================================
   10) FORMULÁRIOS
============================================================ */
.field{ display:flex; flex-direction:column; gap:4px; margin-bottom:12px; }

.field label{ font-size:.85rem; color:var(--muted); }

.input, textarea{
  background:rgba(15,23,42,.9);
  border-radius:10px;
  border:1px solid rgba(148,163,184,.5);
  padding:9px 11px;
  color:#e5e7eb;
  font:inherit;
  resize:vertical;
  min-height:40px;
}

[data-theme="light"] .input,
[data-theme="light"] textarea{
  background:rgba(255,255,255,.96);
  border-color:rgba(15,23,42,.12);
  color:#0b1220;
}

.input:focus, textarea:focus{
  outline:none;
  border-color:#FFD002;
  box-shadow:0 0 0 1px rgba(250,204,21,.6);
}

/* ============================================================
   11) FOOTER
============================================================ */
footer{
  padding:22px 0 26px;
  color:#94a3b8;
  border-top:1px solid rgba(30,64,175,.65);
  background:radial-gradient(circle at top,
    var(--surface-2),
    var(--bg) 70%);
}

[data-theme="light"] footer{
  color:#64748b;
  border-top:1px solid rgba(15,23,42,.08);
  background:radial-gradient(circle at top,
    #ffffff,
    var(--bg) 70%);
}

.foot{ display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px; }

.foot img{ height:48px; filter:drop-shadow(0 14px 30px rgba(0,0,0,.9)); }

[data-theme="light"] .foot img{ filter:drop-shadow(0 10px 22px rgba(2,6,23,.14)); }

.social{ display:flex; gap:.7rem; }

.social a{
  width:40px;
  height:40px;
  border-radius:12px;
  border:1px solid rgba(148,163,184,.5);
  display:grid;
  place-items:center;
  background:
    radial-gradient(circle at top left,
      color-mix(in srgb, var(--surface-1) 92%, #ffffff 8%),
      var(--surface-2) 80%);
}

[data-theme="light"] .social a{
  border-color:rgba(15,23,42,.10);
  background:linear-gradient(145deg,#ffffff,#f1f5f9);
}

/* ============================================================
   12) FAB WHATS
============================================================ */
.fab-whats{
  position:fixed;
  right:18px;
  bottom:18px;
  padding:.9rem 1.1rem;
  border-radius:999px;
  background:linear-gradient(135deg,#25d366,#128c7e);
  color:#fff;
  display:flex;
  align-items:center;
  gap:.6rem;
  box-shadow:0 16px 40px rgba(0,0,0,.7);
  font-weight:700;
  z-index:99999;
  transition:.2s;
}

.fab-whats:hover{ transform:translateY(-3px); }

/* ============================================================
   13) REVEAL
============================================================ */
.reveal{ opacity:0; transform:translateY(10px); transition:.5s; }
.visible{ opacity:1; transform:none; }

/* ============================================================
   14) MOBILE
============================================================ */
@media (max-width:768px){
  :root{ --header-height: var(--ss-header-h-mobile); }

  .site-header{ padding:10px 0 12px; }

  .site-header:not(.ss-unified-nav) .nav{ flex-direction:column; align-items:stretch; gap:10px; }

  .site-header:not(.ss-unified-nav) .menu{
    width:100%;
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:8px;
    padding:10px;
    border-radius:18px;
  }

  .site-header:not(.ss-unified-nav) .nav-link{
    width:100%;
    justify-content:center;
    padding:10px;
    font-size:.92rem;
  }

  .site-header:not(.ss-unified-nav) .nav-right{ width:100%; display:contents; }

  .site-header:not(.ss-unified-nav) .theme-toggle{
    grid-column:1 / -1;
    width:120px;
    height:42px;
    border-radius:999px;
    margin-top:4px;
  }
}

/* ============================================================
   15) TOP-BG
============================================================ */
.top-bg{
  position:relative;
  overflow:hidden;
  background:#020617;
}

.top-bg::before{
  content:"";
  position:absolute;
  inset:-40% -20% auto -20%;
  height:120%;
  background:
    radial-gradient(900px 420px at 20% 10%, rgba(56,189,248,.35), transparent 60%),
    radial-gradient(700px 520px at 80% 30%, rgba(59,130,246,.45), transparent 65%),
    radial-gradient(600px 480px at 50% 90%, rgba(14,165,233,.35), transparent 70%);
  filter:blur(22px) saturate(140%);
  opacity:.85;
  animation:topFloat 26s linear infinite;
  pointer-events:none;
}

.top-bg::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(
    to bottom,
    rgba(2,6,23,.95),
    rgba(2,6,23,.85) 40%,
    rgba(2,6,23,.75) 70%,
    rgba(2,6,23,.65)
  );
  pointer-events:none;
}

@keyframes topFloat{
  0%{ transform:translateY(0) rotate(0deg); }
  50%{ transform:translateY(-6%) rotate(180deg); }
  100%{ transform:translateY(0) rotate(360deg); }
}

[data-theme="light"] .top-bg{ background:#f8fafc; }

[data-theme="light"] .top-bg::before{
  background:
    radial-gradient(900px 420px at 20% 10%, rgba(56,189,248,.18), transparent 60%),
    radial-gradient(700px 520px at 80% 30%, rgba(59,130,246,.20), transparent 65%),
    radial-gradient(600px 480px at 50% 90%, rgba(14,165,233,.16), transparent 70%);
  filter:blur(28px) saturate(120%);
  opacity:.9;
}

[data-theme="light"] .top-bg::after{
  background:linear-gradient(
    to bottom,
    rgba(248,250,252,.95),
    rgba(248,250,252,.85) 35%,
    rgba(248,250,252,.65) 70%,
    rgba(248,250,252,.35)
  );
}

/* ============================================================
   FIX — HEADER DESKTOP
============================================================ */
@media (min-width:769px){
  .nav{ display:flex; align-items:center; }
  .nav-right{ margin-left:auto; display:flex; align-items:center; gap:12px; }
  .menu{ margin-left:0; }
  .theme-toggle{ margin-left:0; }
}

/* ============================================================
   HUB SEGUROS — BREADCRUMB
============================================================ */
.crumbs{
  margin-top:10px;
  display:flex;
  flex-wrap:wrap;
  gap:.45rem;
  color:rgba(226,232,240,.9);
  font-weight:700;
  font-size:.92rem;
}

.crumbs a{ opacity:.95; }

.crumbs .sep{ opacity:.6; }

.crumbs .iconify{
  width:16px;
  height:16px;
  opacity:.9;
}

/* ============================================================
   BOTÃO GHOST (SECUNDÁRIO)
============================================================ */
.btn-ghost{
  background:rgba(15,23,42,.95);
  border:1px solid rgba(148,163,184,.6);
  color:#e5e7eb;
}

[data-theme="light"] .btn-ghost{
  background:rgba(255,255,255,.96);
  border-color:rgba(15,23,42,.12);
  color:#0b1220;
  box-shadow:0 14px 30px rgba(2,6,23,.08);
}

/* ============================================================
   HUB SEGUROS — HERO (ALTURA REDUZIDA)
============================================================ */
body[data-page="seguros"] .hero{
  min-height:0;
  padding:18px 0 26px;
}

/* ============================================================
   HUB SEGUROS — CTA
============================================================ */
.cta{
  margin-top:14px;
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:center;
}