/* ==========================================================================
   CONFECAP · SISTEMA DE DESIGN COMPARTILHADO  —  "SAFIRA PROFUNDO" (Layout C)
   Base de todas as páginas. No Laravel isto vira o CSS do layout raiz (app).
   Cada página inclui ESTE arquivo + o seu próprio (ex.: home.css, form.css).

   ÍNDICE
   00 · Tokens (cores, tipos, espaços, durações)
   01 · Reset e base
   02 · Utilitários (wrap, section, marca de seção, eyebrow, botões, superfícies)
   03 · Header + navegação (desktop e drawer mobile)
   04 · Rodapé
   05 · Foco, movimento e responsivo compartilhado
   ========================================================================== */

/* ==========================================================================
   00 · TOKENS
   ========================================================================== */
:root{
  /* Paleta base — não alterar */
  --navy-900:#050F26;  --navy-800:#0A1F44;  --navy-700:#06396A;
  --navy-600:#0F52BA;                        /* safira */
  --blue-500:#1E6FFF;  --blue-400:#4C8DFF;   /* azul elétrico — acento */
  --gold-500:#C9A227;  --gold-300:#E3C765;   /* dourado do brasão — só fio */
  --ink-900:#101725;   --ink-600:#4A5568;    --ink-400:#8A94A6;
  --paper:#FFFFFF;     --paper-alt:#F6F8FC;  --line:#E3E9F2;

  /* Derivados (variações de estado) */
  --btn-hover:#1A62D6;
  --on-dark:rgba(255,255,255,.90);
  --on-dark-soft:#C9D3E6;
  --on-dark-mute:rgba(255,255,255,.62);
  --hair:rgba(255,255,255,.10);
  --hair-strong:rgba(255,255,255,.20);
  --focus:var(--gold-300);

  /* Tipografia */
  --font-display:"Manrope", "Segoe UI", sans-serif;
  --font-read:"Source Serif 4", Georgia, "Times New Roman", serif;

  --t-hero:clamp(2.85rem, 1.6rem + 5.4vw, 5.4rem);
  --t-h2:clamp(2rem, 1.25rem + 2.8vw, 3.35rem);
  --t-h3:clamp(1.35rem, 1.1rem + .8vw, 1.75rem);
  --t-lead:clamp(1.1rem, 1.02rem + .38vw, 1.35rem);
  --t-body:1.0625rem;      /* 17px */
  --t-small:.9375rem;      /* 15px */
  --t-eyebrow:.75rem;

  --dur-1:.18s;   /* micro-interações */
  --dur-2:.28s;   /* drawer mobile */
  --dur-3:.7s;    /* reveal no scroll */

  --gutter:clamp(1.25rem, 4.4vw, 3rem);
  --wrap:1200px;
  --sec-y:clamp(4.5rem, 9vw, 8.5rem);
  --header-h:88px;

  /* Assinatura: traço de luz (safira → elétrico → dourado) */
  --beam:linear-gradient(180deg,
          rgba(15,82,186,0) 0%,
          var(--navy-600) 14%,
          var(--blue-500) 52%,
          var(--gold-500) 88%,
          rgba(201,162,39,0) 100%);
}

/* ==========================================================================
   01 · RESET E BASE
   ========================================================================== */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
body{
  margin:0;
  background:var(--navy-900);
  color:var(--on-dark);
  font-family:var(--font-read);
  font-size:var(--t-body);
  line-height:1.72;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%; height:auto; display:block}
a{color:inherit}
h1,h2,h3,h4{
  font-family:var(--font-display);
  font-weight:800;
  letter-spacing:-.03em;
  line-height:1.06;
  margin:0;
  color:#fff;
  text-wrap:balance;
}
h3{letter-spacing:-.022em; line-height:1.16}
p{margin:0 0 1.1em}
ul,figure,dl{margin:0; padding:0}
ul{list-style:none}
:target{scroll-margin-top:calc(var(--header-h) + 24px)}

/* ==========================================================================
   02 · UTILITÁRIOS
   ========================================================================== */
.wrap{width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--gutter)}
.section{position:relative; padding-block:var(--sec-y)}

/* Seções claras: inverte tokens de texto/foco */
.section--light{
  background:var(--paper-alt);
  color:var(--ink-600);
  --on-dark:var(--ink-600);
  --on-dark-soft:var(--ink-600);
  --on-dark-mute:var(--ink-400);
  --hair:var(--line);
  --hair-strong:#CFD9E8;
  --focus:var(--navy-600);
}
.section--light h2,.section--light h3,.section--light h4{color:var(--ink-900)}
.h2{font-size:var(--t-h2)}

/* Marca de seção (traço de luz vertical + número dourado) */
.smark{display:flex; align-items:center; gap:1rem; margin-bottom:1.6rem}
.smark::before{
  content:""; width:2px; height:60px; flex:0 0 2px;
  background:var(--beam); border-radius:2px;
}
.smark__n{
  font-family:var(--font-display); font-weight:700; font-size:.8rem;
  letter-spacing:.16em; color:var(--gold-500);
  font-variant-numeric:tabular-nums;
}
.section--light .smark__n{color:#836810}
.smark__label{
  font-family:var(--font-display); font-weight:600; font-size:var(--t-eyebrow);
  letter-spacing:.22em; text-transform:uppercase; color:var(--on-dark-soft);
}

/* Eyebrow solto */
.eyebrow{
  font-family:var(--font-display); font-weight:600; font-size:var(--t-eyebrow);
  letter-spacing:.24em; text-transform:uppercase; color:var(--gold-300);
  display:flex; align-items:center; gap:.75rem; margin:0 0 1.4rem;
}
.eyebrow::before{content:""; width:34px; height:2px; background:var(--gold-500); border-radius:2px}

/* Fio dourado que sublinha títulos */
.rule-gold{
  display:block; width:76px; height:2px; margin:1.5rem 0 0;
  background:linear-gradient(90deg,var(--gold-500),rgba(201,162,39,0));
  border-radius:2px;
}

.lead{font-size:var(--t-lead); line-height:1.62; color:var(--on-dark)}
.section--light .lead{color:#2C3A50}

/* --- Botões --- */
.btn{
  display:inline-flex; align-items:center; gap:.6rem;
  font-family:var(--font-display); font-weight:700; font-size:.95rem;
  letter-spacing:.005em; text-decoration:none; cursor:pointer;
  padding:.95rem 1.6rem; border-radius:3px; border:1px solid transparent;
  transition:background-color var(--dur-1) ease, border-color var(--dur-1) ease, color var(--dur-1) ease, transform var(--dur-1) ease, box-shadow var(--dur-1) ease;
}
.btn svg{flex:0 0 auto}
.btn--primary{
  background:var(--navy-600); color:#fff;
  box-shadow:0 14px 34px -16px rgba(30,111,255,.9), inset 0 1px 0 rgba(255,255,255,.22);
}
.btn--primary:hover{background:var(--btn-hover); transform:translateY(-2px)}
.btn--ghost{background:transparent; color:#fff; border-color:var(--hair-strong)}
.btn--ghost:hover{border-color:var(--gold-300); color:var(--gold-300); transform:translateY(-2px)}
.section--light .btn--ghost{color:var(--navy-700); border-color:#C3D1E6}
.section--light .btn--ghost:hover{border-color:var(--navy-600); color:var(--navy-600)}
.btn--sm{padding:.7rem 1.15rem; font-size:.875rem}
.btn--block{width:100%; justify-content:center}

/* Link de texto com seta */
.tlink{
  display:inline-flex; align-items:center; gap:.5rem;
  font-family:var(--font-display); font-weight:700; font-size:.95rem;
  color:var(--blue-400); text-decoration:none;
  border-bottom:1px solid rgba(76,141,255,.35); padding-bottom:.15rem;
  transition:color var(--dur-1) ease, border-color var(--dur-1) ease, gap var(--dur-1) ease;
}
.tlink:hover{color:var(--gold-300); border-color:var(--gold-500); gap:.85rem}
.section--light .tlink{color:var(--navy-600); border-color:rgba(15,82,186,.3)}
.section--light .tlink:hover{color:var(--navy-700); border-color:var(--navy-700)}

/* Superfície elevada */
.surface{
  position:relative; isolation:isolate;
  background:linear-gradient(180deg, rgba(255,255,255,.062), rgba(255,255,255,.018));
  border:1px solid var(--hair);
  border-radius:6px;
  backdrop-filter:blur(2px);
}
.surface::before{
  content:""; position:absolute; inset:0 0 auto 0; height:1px;
  background:linear-gradient(90deg, transparent 6%, rgba(255,255,255,.42) 30%,
             rgba(227,199,101,.55) 62%, transparent 94%);
}

.skip{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--gold-300); color:var(--navy-900);
  font-family:var(--font-display); font-weight:700; padding:.85rem 1.4rem;
  text-decoration:none; border-radius:0 0 4px 0;
}
.skip:focus{left:0}

/* Fotos: duotone navy + moldura */
.photo{position:relative; overflow:hidden; border-radius:4px; background:var(--navy-800)}
.photo img{width:100%; height:100%; object-fit:cover; filter:saturate(.72) contrast(1.06)}
.photo::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg, rgba(6,57,106,.34) 0%, rgba(5,15,38,.62) 100%);
  mix-blend-mode:multiply;
}
.photo--frame{box-shadow:0 40px 80px -40px rgba(0,0,0,.85)}

/* ==========================================================================
   SUBCABEÇALHO PADRÃO DE PÁGINA INTERNA (banner curto com trilha e breadcrumb)
   Usado por todas as páginas exceto a home.
   ========================================================================== */
.pagehead{
  position:relative; isolation:isolate; overflow:hidden;
  background:
    radial-gradient(60% 120% at 88% -10%, rgba(30,111,255,.34) 0%, rgba(30,111,255,0) 60%),
    linear-gradient(120deg, var(--navy-900) 0%, var(--navy-800) 60%, #0A2E63 100%);
  border-bottom:1px solid rgba(255,255,255,.08);
  padding-block:clamp(2.5rem,6vw,4.25rem);
}
.pagehead::after{ /* fio de luz na base */
  content:""; position:absolute; inset:auto 0 0 0; height:2px;
  background:linear-gradient(90deg,rgba(15,82,186,0),var(--navy-600) 20%,var(--blue-500) 55%,var(--gold-500) 85%,rgba(201,162,39,0));
}
.crumbs{
  display:flex; flex-wrap:wrap; align-items:center; gap:.45rem;
  font-family:var(--font-display); font-size:.78rem; font-weight:600;
  letter-spacing:.06em; color:var(--on-dark-mute); margin:0 0 1.15rem;
}
.crumbs a{color:var(--on-dark-soft); text-decoration:none; transition:color var(--dur-1) ease}
.crumbs a:hover{color:var(--gold-300)}
.crumbs span[aria-current]{color:#fff}
.crumbs i{font-style:normal; color:var(--gold-500); opacity:.7}
.pagehead h1{
  font-size:clamp(2.1rem, 1.3rem + 3vw, 3.5rem); color:#fff; max-width:20ch;
}
.pagehead__lead{
  margin:1.25rem 0 0; max-width:52ch; color:var(--on-dark-soft);
  font-size:var(--t-lead); line-height:1.6;
}

/* Bloco de conteúdo de leitura (páginas institucionais / jurídicas) */
.prose{max-width:70ch}
.prose h2{font-size:var(--t-h3); color:#fff; margin:2.6rem 0 .9rem}
.prose h3{font-size:1.15rem; color:#fff; margin:2rem 0 .6rem}
.prose p{margin:0 0 1.15em; color:var(--on-dark-soft)}
.prose a:not(.btn):not(.tlink){color:var(--blue-400); text-decoration:underline; text-underline-offset:3px}
.prose a:not(.btn):not(.tlink):hover{color:var(--gold-300)}
.prose ul{margin:0 0 1.3em; padding-left:0}
.prose ul li{
  position:relative; padding-left:1.5rem; margin-bottom:.6rem; color:var(--on-dark-soft);
}
.prose ul li::before{
  content:""; position:absolute; left:0; top:.62em; width:8px; height:8px;
  border-right:1.5px solid var(--gold-500); border-bottom:1.5px solid var(--gold-500);
  transform:rotate(-45deg);
}
.prose strong{color:#fff; font-weight:600}
.section--light .prose h2,.section--light .prose h3{color:var(--ink-900)}
.section--light .prose p,.section--light .prose ul li{color:#2C3A50}

/* ==========================================================================
   03 · HEADER + NAVEGAÇÃO
   ========================================================================== */
.header{
  position:sticky; top:0; z-index:100;
  background:rgba(5,15,38,.86);
  backdrop-filter:blur(14px) saturate(140%);
  border-bottom:1px solid rgba(255,255,255,.07);
}
.header__bar{display:flex; align-items:center; gap:1.25rem; min-height:var(--header-h)}
.brand{
  display:inline-flex; align-items:center; margin-right:auto;
  background:var(--paper); border:1px solid rgba(201,162,39,.55);
  border-radius:4px; padding:.5rem .85rem;
  box-shadow:0 8px 24px -14px rgba(0,0,0,.9);
  transition:border-color var(--dur-1) ease;
}
.brand:hover{border-color:var(--gold-300)}
.brand img{width:clamp(146px, 18vw, 190px); height:auto; aspect-ratio:420/162}

.nav{display:none}
.nav__list{display:flex; align-items:center; gap:.15rem}
.nav__item{position:relative}
.nav__link{
  display:inline-flex; align-items:center; gap:.35rem;
  font-family:var(--font-display); font-weight:600; font-size:.815rem;
  letter-spacing:.11em; text-transform:uppercase; text-decoration:none;
  color:var(--on-dark-soft); padding:1.6rem .8rem;
  transition:color var(--dur-1) ease;
}
.nav__link:hover{color:#fff}
.nav__item--sub > .nav__link::after{
  content:""; width:5px; height:5px; margin-top:-3px;
  border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor;
  transform:rotate(45deg); transition:transform var(--dur-1) ease;
}
.nav__item--sub:hover > .nav__link::after,
.nav__item--sub:focus-within > .nav__link::after{transform:rotate(225deg) translate(-2px,-2px)}
.nav__link::before{
  content:""; position:absolute; left:.8rem; right:.8rem; bottom:0; height:2px;
  background:linear-gradient(90deg,var(--blue-500),var(--gold-500));
  transform:scaleX(0); transform-origin:left; transition:transform var(--dur-1) ease;
}
.nav__item:hover > .nav__link::before,
.nav__item:focus-within > .nav__link::before,
.nav__link[aria-current="page"]::before{transform:scaleX(1)}
.nav__link[aria-current="page"]{color:#fff}

.subnav{
  position:absolute; top:100%; left:0; min-width:264px;
  background:#08183A; border:1px solid var(--hair); border-radius:5px;
  padding:.5rem; box-shadow:0 30px 60px -24px rgba(0,0,0,.9);
  opacity:0; visibility:hidden; transform:translateY(8px);
  transition:opacity var(--dur-1) ease, transform var(--dur-1) ease, visibility var(--dur-1);
}
.nav__item--sub:hover .subnav,
.nav__item--sub:focus-within .subnav{opacity:1; visibility:visible; transform:translateY(0)}
.subnav a{
  display:block; padding:.62rem .8rem; border-radius:3px;
  font-family:var(--font-display); font-size:.9rem; font-weight:500;
  color:var(--on-dark-soft); text-decoration:none;
  transition:background-color var(--dur-1) ease, color var(--dur-1) ease;
}
.subnav a:hover{background:rgba(255,255,255,.07); color:#fff}

.wa{
  display:none; align-items:center; gap:.55rem;
  background:var(--navy-600); color:#fff; text-decoration:none;
  font-family:var(--font-display); font-weight:700; font-size:.85rem;
  padding:.72rem 1.1rem; border-radius:3px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22);
  transition:background-color var(--dur-1) ease, transform var(--dur-1) ease;
}
.wa:hover{background:var(--btn-hover); transform:translateY(-2px)}

.navtoggle{
  display:inline-flex; flex-direction:column; justify-content:center; gap:5px;
  width:46px; height:46px; padding:0 11px; cursor:pointer;
  background:transparent; border:1px solid var(--hair-strong); border-radius:3px;
}
.navtoggle span{
  display:block; height:1.5px; background:#fff; border-radius:2px;
  transition:transform var(--dur-1) ease, opacity var(--dur-1) ease;
}
.nav-open .navtoggle span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.nav-open .navtoggle span:nth-child(2){opacity:0}
.nav-open .navtoggle span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}

.drawer{
  position:fixed; inset:var(--header-h) 0 0 auto; width:min(94vw,420px); z-index:99;
  background:#07142F; border-left:1px solid var(--hair);
  padding:1.5rem var(--gutter) 3rem; overflow-y:auto;
  transform:translateX(102%); visibility:hidden;
  transition:transform var(--dur-2) cubic-bezier(.4,0,.2,1), visibility var(--dur-2);
}
.nav-open .drawer{transform:translateX(0); visibility:visible}
.drawer a{
  display:block; text-decoration:none; color:var(--on-dark);
  font-family:var(--font-display); font-weight:600; font-size:1rem;
  padding:.85rem 0; border-bottom:1px solid rgba(255,255,255,.07);
  transition:color var(--dur-1) ease, padding-left var(--dur-1) ease;
}
.drawer a:hover{color:var(--gold-300); padding-left:.4rem}
.drawer details summary{
  list-style:none; cursor:pointer; display:flex; align-items:center;
  justify-content:space-between;
  font-family:var(--font-display); font-weight:600; font-size:1rem;
  color:var(--on-dark); padding:.85rem 0; border-bottom:1px solid rgba(255,255,255,.07);
}
.drawer details summary::-webkit-details-marker{display:none}
.drawer details summary::after{
  content:""; width:7px; height:7px; margin-right:4px;
  border-right:1.5px solid var(--gold-300); border-bottom:1.5px solid var(--gold-300);
  transform:rotate(45deg); transition:transform var(--dur-1) ease;
}
.drawer details[open] summary::after{transform:rotate(225deg)}
.drawer details a{
  padding-left:1.1rem; font-weight:500; font-size:.94rem; color:var(--on-dark-soft);
  border-bottom-color:rgba(255,255,255,.05);
}
.drawer .wa{display:inline-flex; margin-top:1.75rem; width:100%; justify-content:center}
.scrim{
  position:fixed; inset:0; z-index:98; background:rgba(3,9,22,.72);
  opacity:0; visibility:hidden; transition:opacity var(--dur-2) ease, visibility var(--dur-2);
}
.nav-open .scrim{opacity:1; visibility:visible}

/* ==========================================================================
   04 · RODAPÉ
   ========================================================================== */
.footer{
  background:
    radial-gradient(70% 100% at 88% 0%, rgba(15,82,186,.22) 0%, rgba(15,82,186,0) 60%),
    var(--navy-900);
  border-top:1px solid rgba(255,255,255,.08);
  padding-top:clamp(3.5rem,7vw,5.5rem);
}
.footer__top{
  display:grid; gap:2rem; align-items:center;
  padding-bottom:2.5rem; border-bottom:1px solid rgba(255,255,255,.09);
}
.footer__brand a{
  display:inline-block; background:var(--paper);
  border:1px solid rgba(201,162,39,.5); border-radius:4px; padding:.7rem 1.1rem;
}
.footer__brand img{width:230px; height:auto; aspect-ratio:420/162}
.footer__brand p{
  margin:1.1rem 0 0; max-width:30rem; font-size:var(--t-small);
  color:var(--on-dark-soft);
}
.social{display:flex; gap:.7rem}
.social a{
  display:inline-flex; align-items:center; justify-content:center;
  width:46px; height:46px; border:1px solid var(--hair-strong); border-radius:3px;
  color:var(--on-dark-soft);
  transition:color var(--dur-1) ease, border-color var(--dur-1) ease, transform var(--dur-1) ease;
}
.social a:hover{color:var(--gold-300); border-color:var(--gold-500); transform:translateY(-2px)}

.footer__cols{display:grid; gap:clamp(2.5rem,5vw,4rem); padding-block:clamp(2.5rem,5vw,3.5rem)}
.footer h2{
  font-size:1rem; letter-spacing:.2em; text-transform:uppercase; color:#fff;
  font-weight:700; margin-bottom:.9rem;
}
.footer h2 + .rule-gold{margin:0 0 1.75rem}
.footer h3{
  font-family:var(--font-display); font-size:.72rem; font-weight:700;
  letter-spacing:.2em; text-transform:uppercase; color:var(--gold-300);
  margin:0 0 .55rem;
}
.footer p, .footer address{
  font-style:normal; font-size:var(--t-small); line-height:1.7;
  color:var(--on-dark-soft); margin:0 0 1.6rem;
}
.footer a{color:var(--on-dark-soft); text-decoration:none; transition:color var(--dur-1) ease}
.footer address a:hover, .footer p a:hover{color:var(--gold-300)}
.cnpj{
  display:inline-block; margin-top:.6rem; color:#fff;
  font-family:var(--font-display); font-weight:600; font-size:.9rem; letter-spacing:.02em;
}
.pix{
  display:inline-flex; align-items:baseline; gap:.6rem; margin-top:.35rem;
  border:1px solid rgba(201,162,39,.4); border-radius:3px; padding:.6rem .95rem;
  font-family:var(--font-display); font-weight:700; font-size:.95rem; color:#fff;
}
.pix b{font-size:.7rem; letter-spacing:.18em; color:var(--gold-300); font-weight:700}

.footer__bar{
  border-top:1px solid rgba(255,255,255,.09);
  display:flex; flex-wrap:wrap; gap:1rem 1.75rem; align-items:center;
  justify-content:space-between; padding-block:1.6rem 2rem;
}
.footer__bar p{margin:0; font-family:var(--font-display); font-size:.8rem; color:var(--on-dark-mute)}
.footer__bar nav{display:flex; flex-wrap:wrap; gap:.4rem 1.4rem}
.footer__bar nav a{
  font-family:var(--font-display); font-size:.8rem; letter-spacing:.03em;
  border-bottom:1px solid transparent; padding-bottom:2px;
}
.footer__bar nav a:hover{color:#fff; border-color:var(--gold-500)}

/* ==========================================================================
   05 · FOCO, MOVIMENTO E RESPONSIVO COMPARTILHADO
   ========================================================================== */
:focus-visible{outline:2px solid var(--focus); outline-offset:3px; border-radius:2px}

/* Reveal no scroll — só com JS (html.js) */
.js .reveal{opacity:0; transform:translateY(26px);
  transition:opacity var(--dur-3) cubic-bezier(.22,.7,.3,1), transform var(--dur-3) cubic-bezier(.22,.7,.3,1)}
.js .reveal.is-in{opacity:1; transform:none}

@media (prefers-reduced-motion:reduce){
  :root{--dur-1:1ms; --dur-2:1ms; --dur-3:1ms}
  html{scroll-behavior:auto}
  .js .reveal{opacity:1; transform:none; transition:none}
  .btn:hover,.tlink:hover,.wa:hover,.social a:hover{transform:none}
}

@media (min-width:600px){
  .footer__cols{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (min-width:860px){
  .footer__top{grid-template-columns:1fr auto}
}
@media (min-width:1024px){
  .nav{display:block}
  .wa{display:inline-flex}
  .navtoggle{display:none}
  .drawer,.scrim{display:none}
  .header__bar{gap:1.5rem}
  .footer__cols{grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:5rem}
}
@media (min-width:1400px){
  :root{--wrap:1280px}
}