/**
 * portal.css — Portal da Transparência CESAN (publico)
 *
 * Azure Human Interface: fonte unica Nunito, paleta water/aqua/navy.
 * Fiel ao moodboard de referencia (layout), migrado do estudo Apple-inspired original.
 */

/* ══════════════════════════════════════
   TOKENS / VARIAVEIS
   Camada de traducao sobre /includes/tokens.css (shared/tokens.css, carregado
   ANTES deste arquivo). Os nomes antigos abaixo sao mantidos de proposito —
   ~200 regras deste arquivo consomem var(--blue), var(--ink3), var(--r) etc.
   e nao devem ser renomeadas — apenas o VALOR passa a apontar para o token
   canonico Azure Human Interface. --bg e --ink foram removidos: herdam os
   canonicos (--bg / --ink de tokens.css) direto do arquivo compartilhado.
   ══════════════════════════════════════ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --font:var(--ff);
  --mono:var(--ff); /* fonte monoespacada abolida do sistema — usos convertidos p/ font-variant-numeric:tabular-nums abaixo */
  --bg2:var(--aqua-l);
  --bg3:var(--line);           /* uso de borda/divisoria (2 usos) */
  --bg3-fill:var(--surface-5); /* uso de fundo/chip (5 usos) — --bg3 tinha uso misto, ver relatorio */
  --ink2:var(--ink-soft);--ink3:var(--ink-soft);--ink4:var(--ink-faint);
  --ink5:var(--line-soft); /* os 9 usos no arquivo sao todos borda/divisoria, nunca sombra */
  --blue:var(--water);--blue-hover:var(--water-d);--blue-lt:color-mix(in srgb, var(--water) 10%, transparent);
  --teal:var(--ok);--teal-lt:color-mix(in srgb, var(--ok) 12%, transparent);
  --amber:var(--warn);--amber-lt:color-mix(in srgb, var(--warn) 10%, transparent);
  --red:var(--bad);--red-lt:color-mix(in srgb, var(--bad) 10%, transparent);
  --r:var(--radius-lg);
  --r-sm:var(--radius);
  --r-xs:var(--radius-sm);
  --shadow-sm:var(--elev-1);
  --shadow:var(--elev-2);
  --shadow-lg:var(--elev-3);
  --nav-h:var(--header-height);
  --container:1200px;
  --gap:var(--sp-md);
}
html{font-size:15px;scroll-behavior:smooth}
body{font-family:var(--font);background:var(--bg);color:var(--ink);-webkit-font-smoothing:antialiased;overflow-x:hidden}
body::after{content:'';position:fixed;inset:0;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");pointer-events:none;z-index:0;opacity:0.12}
main#main-content{position:relative;z-index:1}

a{color:var(--blue);text-decoration:none;transition:color .2s}
a:hover{color:var(--blue-hover)}
img{max-width:100%;height:auto;display:block}
button{font-family:inherit;cursor:pointer;border:none;background:none}

/* ══════════════════════════════════════
   LAYOUT UTILITIES
   ══════════════════════════════════════ */
.container{max-width:var(--container);margin:0 auto;padding:0 var(--gap)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}

/* ══════════════════════════════════════
   NAV
   ══════════════════════════════════════ */
nav{
  position:sticky;top:0;z-index:200;
  height:var(--nav-h);
  /* Glass claro do design system — mesmo chrome do admin. Antes era uma faixa
     aqua chapada, que ficava do mesmo tom do footer e da faixa de titulo e
     achatava a hierarquia. Fallback opaco no @supports do fim do arquivo. */
  background:rgba(247,250,252,.8);
  -webkit-backdrop-filter:blur(12px);
  backdrop-filter:blur(12px);
  border-bottom:1px solid color-mix(in srgb, var(--line) 45%, transparent);
  display:flex;align-items:center;justify-content:center;
  padding:0 48px;gap:28px;
  transition:box-shadow .3s;
}
nav.scrolled{box-shadow:0 1px 8px color-mix(in srgb, var(--water) 8%, transparent)}
.nav-brand{display:flex;align-items:center;text-decoration:none;flex-shrink:0;margin-right:auto}
.nav-brand img{height:32px;width:auto;display:block}
.nav-brand-svg{height:32px;width:auto;display:none}
.nav-links{position:absolute;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:2px}
.nav-link{font-size:12px;font-weight:500;color:var(--ink-soft);padding:6px 11px;border-radius:8px;cursor:pointer;text-decoration:none;transition:color .15s,background .15s;white-space:nowrap}
.nav-link:hover{color:var(--water);background:color-mix(in srgb, var(--water) 6%, transparent)}
.nav-link.on{color:var(--water);font-weight:700;background:color-mix(in srgb, var(--water) 10%, transparent)}
.nav-right{display:flex;align-items:center;gap:8px;margin-left:auto}
.nav-search{display:flex;align-items:center;gap:7px;background:color-mix(in srgb, var(--water) 6%, transparent);border-radius:8px;padding:6px 12px;border:1px solid color-mix(in srgb, var(--water) 10%, transparent);transition:border-color .15s}
.nav-search:focus-within{background:var(--surface);border-color:color-mix(in srgb, var(--water) 40%, transparent);box-shadow:0 0 0 3px color-mix(in srgb, var(--water) 8%, transparent)}
.nav-search ion-icon{font-size:13px;color:var(--ink4)}
.nav-search input{border:none;outline:none;background:transparent;font-family:var(--font);font-size:12px;color:var(--ink);width:150px}
.nav-search input::placeholder{color:var(--ink4)}
.nav-cta{font-family:var(--font);font-size:12px;font-weight:600;color:var(--surface);background:var(--blue);border:none;border-radius:8px;padding:7px 14px;cursor:pointer;display:flex;align-items:center;gap:5px;transition:filter .15s;text-decoration:none;white-space:nowrap}
.nav-cta:hover{filter:brightness(1.08);color:var(--surface)}
.nav-cta ion-icon{font-size:13px}
.nav-toggle{display:none;padding:8px;font-size:24px;color:var(--ink)}

/* ══════════════════════════════════════
   HERO FULL-WIDTH
   ══════════════════════════════════════ */
.hero-banner{
  position:relative;
  width:100%;
  height:100vh;
  height:100svh;
  min-height:400px;
  overflow:hidden;
  margin-top:calc(-1 * var(--nav-h));
  padding-top:var(--nav-h);
}
.hero-banner-img{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;object-position:center 60%;
  display:block;
}
/* Slideshow */
.hero-banner-img.slide{
  opacity:0;
  transition:opacity 1.2s ease;
  z-index:0;
}
.hero-banner-img.slide.active{
  opacity:1;
  z-index:1;
}
.hero-dots{
  position:absolute;bottom:24px;left:50%;transform:translateX(-50%);
  display:flex;gap:8px;z-index:4;
}
.hero-dot-btn{
  width:8px;height:8px;border-radius:50%;
  background:rgba(255,255,255,.4);border:none;cursor:pointer;
  transition:background .3s,transform .3s;padding:0;
}
.hero-dot-btn.active{
  background:var(--surface);transform:scale(1.25);
}
.hero-arrow{
  position:absolute;top:50%;transform:translateY(-50%);
  z-index:4;
  width:44px;height:44px;border-radius:50%;
  background:rgba(255,255,255,.18);
  border:1px solid rgba(255,255,255,.35);
  backdrop-filter:blur(6px);
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;
  transition:background .2s,transform .2s;
  color:var(--surface);
}
.hero-arrow:hover{
  background:rgba(255,255,255,.32);
  transform:translateY(-50%) scale(1.08);
}
.hero-arrow ion-icon{font-size:22px;pointer-events:none}
.hero-arrow.prev{left:28px}
.hero-arrow.next{right:28px}
.hero-banner-overlay{
  position:absolute;inset:0;
  z-index:2;
  background:linear-gradient(135deg, rgba(6,13,25,0.72) 0%, rgba(19,38,64,0.55) 100%);
}
.hero-banner-content{
  position:relative;z-index:3;
  height:100%;width:100%;max-width:700px;
  display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;
  padding:12px 48px;margin:0 auto;
  box-sizing:border-box;
}
.hero-eyebrow{
  display:inline-flex;align-items:center;gap:7px;
  font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  color:rgba(255,255,255,.7);margin-bottom:10px;
  flex-shrink:0;
}
.hero-dot{width:5px;height:5px;border-radius:50%;background:var(--water-c);animation:blink 2.4s ease-in-out infinite}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.2}}
.hero-h{
  font-size:clamp(32px,5vw,52px);
  font-weight:800;letter-spacing:-.03em;line-height:1.08;
  color:var(--surface);margin-bottom:10px;
  flex-shrink:1;min-height:0;
}
.hero-h em{font-style:italic;font-weight:300;color:rgba(255,255,255,.85)}
.hero-sub{
  font-size:14px;font-weight:300;color:rgba(255,255,255,.7);
  line-height:1.7;max-width:420px;margin-bottom:36px;
  flex-shrink:1;min-height:0;
}
.hero-actions{display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;margin-bottom:36px;flex-shrink:0}
.btn-hero-prim{
  font-family:var(--font);font-size:12px;font-weight:700;
  background:var(--surface);color:var(--blue);border:none;border-radius:100px;
  padding:10px 20px;cursor:pointer;display:flex;align-items:center;gap:6px;
  transition:filter .15s;text-decoration:none;
}
.btn-hero-prim:hover{filter:brightness(.94);color:var(--blue)}
.btn-hero-ghost{
  font-family:var(--font);font-size:12px;font-weight:600;
  background:rgba(255,255,255,.15);color:var(--surface);border:1px solid rgba(255,255,255,.4);
  border-radius:100px;padding:10px 20px;cursor:pointer;display:flex;align-items:center;gap:6px;
  transition:background .15s;text-decoration:none;
}
.btn-hero-ghost:hover{background:rgba(255,255,255,.25);color:var(--surface)}
.btn-hero-prim ion-icon,.btn-hero-ghost ion-icon{font-size:15px}
.hero-search-row{
  display:flex;align-items:center;
  background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.18);
  border-radius:10px;
  padding:4px 4px 4px 14px;
  width:min(100%,480px);
  min-width:0;
  backdrop-filter:blur(8px);
  flex-shrink:0;
}
.hero-search-row ion-icon{font-size:14px;color:rgba(255,255,255,.6);flex-shrink:0}
.hero-search-row input{
  flex:1;border:none;outline:none;background:transparent;
  font-family:var(--font);font-size:13px;color:var(--surface);padding:8px 10px;
}
.hero-search-row input::placeholder{color:rgba(255,255,255,.45)}
.hero-search-row button{
  font-family:var(--font);font-size:12px;font-weight:600;
  background:var(--surface);color:var(--blue);border:none;border-radius:7px;
  padding:8px 16px;cursor:pointer;white-space:nowrap;transition:filter .15s;flex-shrink:0;
}
.hero-search-row button:hover{filter:brightness(.94)}
.hero-search-row:focus-within{background:rgba(255,255,255,0.95);border-color:color-mix(in srgb, var(--water) 40%, transparent);box-shadow:var(--shadow-lg)}
.hero-search-row:focus-within ion-icon{color:var(--water)}
.hero-search-row:focus-within input{color:var(--ink)}
.hero-search-row:focus-within input::placeholder{color:var(--ink-faint)}
.hero-search-row:focus-within button{background:var(--water);color:var(--surface)}

/* ══════════════════════════════════════
   NUMBERS
   ══════════════════════════════════════ */
.numbers{background:var(--bg2)}
.numbers-inner{max-width:1200px;margin:0 auto;display:grid;grid-template-columns:repeat(4,1fr);border-left:1px solid var(--ink5)}
.num-cell{padding:24px 28px;border-right:1px solid var(--ink5);border-bottom:1px solid var(--ink5);transition:background .2s;text-decoration:none;color:inherit}
a.num-cell{cursor:pointer}
a.num-cell:hover{background:var(--bg3-fill)}
.num-label{font-variant-numeric:tabular-nums;font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ink4);margin-bottom:10px}
.num-val{font-variant-numeric:tabular-nums;font-size:clamp(22px,2.5vw,32px);font-weight:800;letter-spacing:-.04em;color:var(--ink);line-height:1.1;margin-bottom:4px;white-space:nowrap}
.num-val.blue{color:var(--blue)}.num-val.teal{color:var(--teal)}.num-val.amber{color:var(--amber)}
.num-sub{font-size:12px;font-weight:400;color:var(--ink3);line-height:1.4}
.num-trend{display:inline-flex;align-items:center;gap:3px;font-variant-numeric:tabular-nums;font-size:10px;font-weight:500;margin-top:10px;padding:2px 8px;border-radius:20px}
.trend-up{background:var(--teal-lt);color:var(--teal)}.trend-neu{background:var(--amber-lt);color:var(--amber)}

/* ══════════════════════════════════════
   SECTION BASE
   ══════════════════════════════════════ */
.section{max-width:1200px;margin:0 auto;padding:80px 48px}
.section+.section{padding-top:0}
/* ── Quick Links Strip (over hero image) ── */
.ql-strip{position:relative;z-index:10;background:transparent}
.ql-strip-inner{max-width:1200px;margin:0 auto;display:flex;flex-wrap:wrap;padding:10px 40px;gap:6px;justify-content:center;border:none}
.ql-link{display:inline-flex;align-items:center;gap:7px;padding:9px 16px;font-size:13px;font-weight:500;letter-spacing:0.2px;color:rgba(255,255,255,0.95);text-decoration:none;white-space:nowrap;border-radius:20px;background:rgba(255,255,255,0.12);backdrop-filter:blur(14px) saturate(150%);-webkit-backdrop-filter:blur(14px) saturate(150%);border:1px solid rgba(255,255,255,0.25);box-shadow:var(--shadow),inset 0 1px 0 rgba(255,255,255,0.1);transition:all .25s ease}
.ql-link ion-icon{font-size:15px;color:rgba(255,255,255,0.75);transition:all .25s ease}
.ql-link:hover{color:var(--surface);background:rgba(255,255,255,0.22);border-color:rgba(255,255,255,0.4);box-shadow:var(--shadow-lg),inset 0 1px 0 rgba(255,255,255,0.15);transform:translateY(-1px)}
.ql-link:hover ion-icon{color:var(--surface)}
.ql-link:active{transform:translateY(0);box-shadow:var(--shadow-sm)}

/* ── Toggle links rápidos (mobile only) ── */
.ql-toggle{display:none}


.section-divider{border:none;border-top:1px solid var(--ink5);max-width:1200px;margin:0 auto}
.sec-eyebrow{font-variant-numeric:tabular-nums;font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--blue);margin-bottom:10px}
.sec-title{font-size:clamp(24px,3vw,36px);font-weight:800;letter-spacing:-.03em;color:var(--ink);line-height:1.1;margin-bottom:8px}
.sec-sub{font-size:15px;font-weight:300;color:var(--ink3);line-height:1.6;max-width:500px;margin-bottom:40px}

/* ══════════════════════════════════════
   CARDS
   ══════════════════════════════════════ */
.cards-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.card{background:var(--surface);border:1px solid var(--line);border-radius:14px;overflow:hidden;cursor:pointer;transition:transform .22s,box-shadow .22s,border-color .22s;text-decoration:none;color:inherit;display:flex;flex-direction:column}
.card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg);border-color:color-mix(in srgb, var(--water) 25%, transparent);color:inherit}
.card-img{width:100%;height:170px;object-fit:cover;display:block;transition:transform .4s ease}
.card:hover .card-img{transform:scale(1.04)}
.card-img-wrap{overflow:hidden;height:170px;flex-shrink:0}
.card-body{padding:24px;display:flex;flex-direction:column;gap:10px;flex:1}
.card-icon{width:40px;height:40px;border-radius:10px;display:flex;align-items:center;justify-content:center}
.card-icon ion-icon{font-size:20px}
.card-icon.blue{background:var(--blue-lt);color:var(--blue)}.card-icon.teal{background:var(--teal-lt);color:var(--teal)}.card-icon.amber{background:var(--amber-lt);color:var(--amber)}.card-icon.red{background:var(--red-lt);color:var(--red)}.card-icon.gray{background:var(--bg3-fill);color:var(--ink3)}.card-icon.green{background:var(--ok-bg);color:var(--ok)}.card-icon.purple{background:var(--navy-c);color:var(--navy)}
.card-title-sm{font-size:15px;font-weight:700;color:var(--ink);letter-spacing:-.01em;line-height:1.2}
.card-desc{font-size:13px;font-weight:400;color:var(--ink3);line-height:1.6;flex:1}
.card-link{font-size:12px;font-weight:600;color:var(--blue);display:flex;align-items:center;gap:4px;margin-top:4px}
.card-link ion-icon{font-size:13px;transition:transform .15s}
.card:hover .card-link ion-icon{transform:translateX(3px)}

/* ══════════════════════════════════════
   SPLIT
   ══════════════════════════════════════ */
.split{display:grid;grid-template-columns:1fr 1fr;gap:72px;align-items:center}
.split.rev{direction:rtl}.split.rev>*{direction:ltr}
.split-text{display:flex;flex-direction:column;gap:16px;min-width:0;overflow-wrap:anywhere;word-break:break-word}
.split-num{font-variant-numeric:tabular-nums;font-size:11px;font-weight:500;letter-spacing:.14em;color:var(--blue);margin-bottom:-8px}
.split-h{font-size:clamp(22px,2.5vw,32px);font-weight:800;letter-spacing:-.03em;color:var(--ink);line-height:1.15}
.split-p{font-size:14px;font-weight:300;color:var(--ink3);line-height:1.8}
.split-action{font-size:13px;font-weight:600;color:var(--blue);display:inline-flex;align-items:center;gap:5px;cursor:pointer;text-decoration:none;transition:gap .15s}
.split-action:hover{gap:9px}
.split-action ion-icon{font-size:14px}
.split-img{border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow-lg)}
.split-img img{width:100%;height:360px;object-fit:cover;display:block;transition:transform .5s ease}
.split-img:hover img{transform:scale(1.03)}

/* DATA PREVIEW */
.data-preview{background:var(--bg2);border-radius:var(--r);overflow:hidden;border:1px solid var(--ink5)}
.dp-head{padding:18px 24px;border-bottom:1px solid var(--ink5);display:flex;align-items:center;justify-content:space-between}
.dp-title{font-size:13px;font-weight:700;color:var(--ink)}
.dp-badge{font-variant-numeric:tabular-nums;font-size:10px;font-weight:500;padding:3px 9px;border-radius:20px;background:var(--blue-lt);color:var(--blue)}
.dp-table{width:100%;border-collapse:collapse}
.dp-table thead th{font-variant-numeric:tabular-nums;font-size:9px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--ink4);padding:10px 24px;text-align:left;background:var(--surface);border-bottom:1px solid var(--ink5)}
.dp-table tbody tr{border-bottom:1px solid var(--bg3)}
.dp-table tbody tr:last-child{border-bottom:none}
.dp-table td{padding:12px 24px}
.dp-td-main{font-size:13px;font-weight:600;color:var(--ink)}
.dp-td-sub{font-size:11px;color:var(--ink4);margin-top:1px}
.dp-td-val{font-variant-numeric:tabular-nums;font-size:12px;font-weight:500;color:var(--ink)}
.pill{display:inline-flex;align-items:center;gap:4px;font-size:10px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;padding:3px 9px;border-radius:20px}
.pill-dot{width:4px;height:4px;border-radius:50%;background:currentColor}
.pill.ok{background:var(--teal-lt);color:var(--teal)}.pill.warn{background:var(--amber-lt);color:var(--amber)}
.dp-foot{padding:14px 24px;border-top:1px solid var(--ink5);display:flex;align-items:center;justify-content:space-between}
.dp-foot-note{font-size:11px;color:var(--ink4)}
.dp-foot-link{font-size:12px;font-weight:600;color:var(--blue);display:flex;align-items:center;gap:4px;text-decoration:none;cursor:pointer}
.dp-foot-link ion-icon{font-size:13px}

/* DOWNLOAD FORMATS */
.fmt-box{background:var(--surface);border-radius:10px;border:1px solid var(--line-soft);padding:14px 16px;display:flex;align-items:center;gap:14px;transition:border-color .2s}
.fmt-box:hover{border-color:color-mix(in srgb, var(--water) 30%, transparent)}
.fmt-icon{width:36px;height:36px;border-radius:8px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.fmt-icon ion-icon{font-size:18px}
.fmt-icon.teal{background:var(--teal-lt);color:var(--teal)}.fmt-icon.blue{background:var(--blue-lt);color:var(--blue)}.fmt-icon.amber{background:var(--amber-lt);color:var(--amber)}
.fmt-title{font-size:13px;font-weight:600;color:var(--ink)}
.fmt-sub{font-size:11px;color:var(--ink4);margin-top:1px}
.fmt-dl{font-size:16px;color:var(--blue);margin-left:auto}

/* ══════════════════════════════════════
   GALERIA
   ══════════════════════════════════════ */
.gallery{max-width:1200px;margin:0 auto;padding:0 48px 80px;display:grid;grid-template-columns:2fr 1fr 1fr;grid-template-rows:220px 220px;gap:12px}
.gallery-item{border-radius:14px;overflow:hidden;position:relative;cursor:pointer;text-decoration:none;color:inherit;display:block}
.gallery-item.tall{grid-row:span 2}
.gallery-item img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .45s ease}
.gallery-item:hover img{transform:scale(1.05)}
.gallery-caption{position:absolute;bottom:0;left:0;right:0;padding:32px 18px 14px;background:linear-gradient(to top,rgba(0,0,0,.62) 0%,transparent 100%);font-size:12px;font-weight:600;color:var(--surface);letter-spacing:.01em}

/* UPDATES */
.updates-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.update-item{padding:16px 20px;border:1px solid var(--line-soft);border-radius:12px;background:var(--surface);display:flex;gap:16px;align-items:flex-start;transition:border-color .2s;text-decoration:none;color:inherit}
a.update-item{cursor:pointer}
a.update-item:hover{border-color:color-mix(in srgb, var(--water) 25%, transparent)}
.update-arrow{font-size:16px;color:var(--ink4);margin-left:auto;margin-top:4px;flex-shrink:0;transition:color .15s,transform .15s}
a.update-item:hover .update-arrow{color:var(--blue);transform:translateX(3px)}
.update-icon{width:36px;height:36px;border-radius:10px;display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:2px}
.update-icon ion-icon{font-size:18px}
.update-icon.blue{background:var(--blue-lt);color:var(--blue)}.update-icon.teal{background:var(--teal-lt);color:var(--teal)}.update-icon.amber{background:var(--amber-lt);color:var(--amber)}.update-icon.gray{background:var(--bg3-fill);color:var(--ink3)}
.update-date{font-variant-numeric:tabular-nums;font-size:10px;color:var(--ink4);margin-bottom:5px}
.update-title{font-size:14px;font-weight:700;color:var(--ink);margin-bottom:5px;line-height:1.3}
.update-desc{font-size:12px;font-weight:400;color:var(--ink3);line-height:1.55}

/* BANNER CTA */
.banner-cta{max-width:1200px;margin:0 auto;padding:0 48px 80px}
.banner-cta-inner{border-radius:var(--r);overflow:hidden;position:relative;min-height:280px;display:flex;align-items:center}
.banner-cta-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 40%}
.banner-cta-overlay{position:absolute;inset:0;background:linear-gradient(135deg, rgba(6,13,25,0.78) 0%, rgba(19,38,64,0.60) 100%)}
.banner-cta-content{position:relative;z-index:1;padding:52px 56px}
.banner-cta-eyebrow{font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.6);margin-bottom:10px}
.banner-cta-title{font-size:clamp(22px,2.8vw,32px);font-weight:800;letter-spacing:-.03em;color:var(--surface);line-height:1.15;margin-bottom:10px}
.banner-cta-sub{font-size:14px;font-weight:300;color:rgba(255,255,255,.75);line-height:1.65;max-width:360px;margin-bottom:28px}
.banner-cta-btn{display:inline-flex;align-items:center;gap:7px;font-family:var(--font);font-size:13px;font-weight:600;background:var(--surface);color:var(--blue);border:none;border-radius:100px;padding:12px 24px;cursor:pointer;transition:filter .15s;text-decoration:none}
.banner-cta-btn:hover{filter:brightness(.94);color:var(--blue)}
.banner-cta-btn ion-icon{font-size:15px}

/* ══════════════════════════════════════
   FOOTER
   ══════════════════════════════════════ */
/* Footer em cinza neutro, nao no aqua do --bg2: o azul de fundo fica reservado
   a faixa de titulo (.page-header), para os tres planos ficarem separaveis. */
footer{background:var(--surface-2);border-top:1px solid var(--ink5);padding:56px 48px 32px}
.footer-inner{max-width:1200px;margin:0 auto}
.footer-top{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:40px;margin-bottom:40px}
.footer-logo{height:30px;width:auto;display:block;margin-bottom:14px}
.footer-brand-desc{font-size:12px;font-weight:300;color:var(--ink3);line-height:1.65;margin-bottom:8px}
.footer-addr{font-size:11px;color:var(--ink4);line-height:1.7}
.footer-col-title{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ink3);margin-bottom:14px}
.footer-links{display:flex;flex-direction:column;gap:8px}
.footer-link{font-size:12px;font-weight:400;color:var(--ink3);cursor:pointer;transition:color .12s;text-decoration:none}
.footer-link:hover{color:var(--ink)}
.footer-bottom{display:flex;align-items:center;justify-content:space-between;border-top:1px solid var(--ink5);padding-top:24px;flex-wrap:wrap;gap:10px}
.footer-copy{font-size:11px;color:var(--ink4)}
.footer-legal{display:flex;gap:16px}
.footer-legal a{font-size:11px;color:var(--ink4);text-decoration:none;cursor:pointer}
.footer-legal a:hover{color:var(--ink3)}

/* ══════════════════════════════════════
   FLASH MESSAGES
   ══════════════════════════════════════ */
.flash{display:flex;align-items:center;gap:12px;padding:14px 20px;border-radius:var(--r-sm);font-size:14px;font-weight:500;margin-bottom:20px;animation:flashIn .3s ease}
@keyframes flashIn{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}
.flash ion-icon{font-size:20px;flex-shrink:0}
.flash span{flex:1}
.flash-close{font-size:20px;color:inherit;opacity:.6;transition:opacity .2s;padding:0 4px;line-height:1}
.flash-close:hover{opacity:1}
.flash-info,.flash-success,.flash-sucesso{background:var(--teal-lt);color:var(--teal)}
.flash-error,.flash-erro{background:var(--red-lt);color:var(--red)}
.flash-warning,.flash-alerta{background:var(--amber-lt);color:var(--amber)}

/* ══════════════════════════════════════
   BUTTONS (reusable)
   ══════════════════════════════════════ */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:10px 24px;font-family:var(--font);font-size:14px;font-weight:600;border-radius:var(--r-xs);transition:background .2s,color .2s,box-shadow .2s;text-decoration:none;white-space:nowrap}
.btn--primary{background:var(--blue);color:var(--surface)}
.btn--primary:hover{background:var(--blue-hover);color:var(--surface)}
.btn--secondary{background:var(--bg2);color:var(--ink2);border:1px solid var(--bg3)}
.btn--secondary:hover{background:var(--bg3-fill);color:var(--ink)}
.btn--ghost{background:transparent;color:var(--blue)}
.btn--ghost:hover{background:var(--blue-lt)}

/* BADGES */
.badge{display:inline-flex;align-items:center;gap:4px;padding:3px 10px;font-size:11px;font-weight:600;border-radius:100px;letter-spacing:.02em}
.badge--blue{background:var(--blue-lt);color:var(--blue)}
.badge--teal{background:var(--teal-lt);color:var(--teal)}
.badge--amber{background:var(--amber-lt);color:var(--amber)}
.badge--red{background:var(--red-lt);color:var(--red)}
.badge--gray{background:var(--bg3-fill);color:var(--ink3)}

/* ══════════════════════════════════════
   ANIMATIONS
   ══════════════════════════════════════ */
@keyframes fadeUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}
.reveal-section{opacity:0;transform:translateY(32px);transition:opacity .7s cubic-bezier(.16,1,.3,1),transform .7s cubic-bezier(.16,1,.3,1)}
.reveal-section.revealed{opacity:1;transform:translateY(0)}

/* Stagger: filhos diretos animam com delay incremental */
.reveal-section .num-cell,
.reveal-section .card,
.reveal-section .gallery-item,
.reveal-section .update-item{opacity:0;transform:translateY(20px);transition:opacity .5s cubic-bezier(.16,1,.3,1),transform .5s cubic-bezier(.16,1,.3,1)}
.reveal-section.revealed .num-cell,
.reveal-section.revealed .card,
.reveal-section.revealed .gallery-item,
.reveal-section.revealed .update-item{opacity:1;transform:translateY(0)}
.reveal-section.revealed > :nth-child(1),.reveal-section.revealed .num-cell:nth-child(1),.reveal-section.revealed .card:nth-child(1),.reveal-section.revealed .gallery-item:nth-child(1),.reveal-section.revealed .update-item:nth-child(1){transition-delay:.05s}
.reveal-section.revealed > :nth-child(2),.reveal-section.revealed .num-cell:nth-child(2),.reveal-section.revealed .card:nth-child(2),.reveal-section.revealed .gallery-item:nth-child(2),.reveal-section.revealed .update-item:nth-child(2){transition-delay:.1s}
.reveal-section.revealed > :nth-child(3),.reveal-section.revealed .num-cell:nth-child(3),.reveal-section.revealed .card:nth-child(3),.reveal-section.revealed .gallery-item:nth-child(3),.reveal-section.revealed .update-item:nth-child(3){transition-delay:.15s}
.reveal-section.revealed > :nth-child(4),.reveal-section.revealed .num-cell:nth-child(4),.reveal-section.revealed .card:nth-child(4),.reveal-section.revealed .gallery-item:nth-child(4),.reveal-section.revealed .update-item:nth-child(4){transition-delay:.2s}
.reveal-section.revealed > :nth-child(5),.reveal-section.revealed .num-cell:nth-child(5),.reveal-section.revealed .gallery-item:nth-child(5){transition-delay:.25s}
.reveal-section.revealed > :nth-child(6),.reveal-section.revealed .num-cell:nth-child(6){transition-delay:.3s}

/* Dividers: fade in sutil */
hr.reveal-section{transform:translateY(0);transition:opacity .5s ease}
hr.reveal-section.revealed{opacity:1}
.hero-eyebrow{animation:fadeUp .5s ease both;animation-delay:.05s}
.hero-h{animation:fadeUp .55s ease both;animation-delay:.1s}
.hero-sub{animation:fadeUp .55s ease both;animation-delay:.16s}
.hero-actions{animation:fadeUp .55s ease both;animation-delay:.22s}
.hero-search-row{animation:fadeUp .55s ease both;animation-delay:.28s}

/* ══════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════ */

/* Telas com pouca altura (ex: laptop 15" 1366x768) */
@media(max-height:800px){
  .hero-banner{min-height:240px}
  .hero-banner-content{padding:6px 48px}
  .hero-eyebrow{margin-bottom:6px;font-size:10px}
  .hero-h{font-size:clamp(30px,4.2vw,46px);margin-bottom:6px;line-height:1.06}
  .hero-sub{margin-bottom:12px;font-size:14px;line-height:1.5}
  .hero-actions{margin-bottom:16px;gap:8px}
  .btn-hero-prim,.btn-hero-ghost{padding:8px 16px;font-size:11px}
  .hero-search-row{padding:3px 3px 3px 12px}
  .hero-search-row input{padding:7px 10px;font-size:12px}
  .hero-search-row button{padding:7px 14px;font-size:11px}
}

@media(max-width:900px){
  nav{padding:0 16px;gap:10px;justify-content:flex-start}
  .nav-links{
    display:none;
    position:fixed;
    top:var(--nav-h);
    left:0 !important;
    right:0;
    transform:none !important;
    height:calc(100vh - var(--nav-h));
    height:calc(100dvh - var(--nav-h));
    background:var(--aqua-l);
    flex-direction:column;
    align-items:stretch;
    justify-content:flex-start;
    padding:20px;
    gap:2px;
    overflow-y:auto;
    z-index:199;
    box-shadow:var(--shadow-lg);
  }
  .nav-links.open{display:flex !important}
  .nav-links .nav-link{font-size:15px;padding:14px 16px;border-radius:10px;width:100%;border-bottom:1px solid var(--bg2)}
  .nav-links .nav-link:last-child{border-bottom:none}
  .nav-links .nav-link.on{background:var(--blue-lt);color:var(--blue)}
  .nav-search{display:flex;flex:1;min-width:0}
  .nav-search input{width:100%;min-width:0}
  .nav-cta{display:none}
  .nav-toggle{display:flex}

  .hero-banner{min-height:260px}
  .hero-banner-content{padding:8px 24px;max-width:100%}
  .hero-eyebrow{margin-bottom:4px;font-size:9px}
  .hero-h{font-size:clamp(20px,3.5vw,30px);margin-bottom:4px;line-height:1.05}
  .hero-sub{margin-bottom:10px;font-size:11px;line-height:1.4;max-width:360px}
  .hero-actions{display:none}
  .hero-search-row{padding:3px 3px 3px 10px;flex-shrink:1;width:min(100%,420px)}
  .hero-search-row input{width:auto;min-width:0;padding:7px 8px;font-size:12px}
  .hero-search-row button{padding:7px 14px;font-size:11px}
  .hero-search-row ion-icon{font-size:13px}
  .hero-arrow.prev{left:10px}
  .hero-arrow.next{right:10px}
  .hero-arrow{width:36px;height:36px}
  .hero-arrow ion-icon{font-size:18px}

  .numbers-inner{grid-template-columns:1fr 1fr}
  .ql-strip{overflow:visible}
  .ql-strip-inner{padding:8px 16px;flex-wrap:wrap;justify-content:center;gap:5px}
  .ql-link{padding:6px 10px;font-size:11px;flex-shrink:0}

  .section{padding:48px 20px}
  .split,.split.rev{grid-template-columns:1fr;gap:32px;direction:ltr}
  .split-h{font-size:clamp(20px,5vw,28px)}
  .split-p{font-size:13px;line-height:1.7}
  .split-img img{height:220px}

  .cards-grid{grid-template-columns:1fr 1fr;gap:12px}
  .card-img-wrap,.card-img{height:130px}
  .card-body{padding:16px;gap:8px}
  .card-title-sm{font-size:13px}
  .card-desc{font-size:12px}

  .gallery{grid-template-columns:1fr 1fr;grid-template-rows:auto;padding:0 20px 48px}
  .gallery-item.tall{grid-row:span 1}
  .gallery-item img{height:180px}

  .updates-grid{grid-template-columns:1fr}

  .footer-top{grid-template-columns:1fr 1fr;gap:28px}
  footer,.banner-cta{padding:40px 20px 24px}
  .banner-cta-content{padding:28px 24px}
  .banner-cta-title{font-size:clamp(20px,5vw,26px)}
  .banner-cta-sub{font-size:13px;max-width:none}

  /* Formatos dados abertos */
  .fmt-box{padding:12px 14px;gap:10px}
  .fmt-icon{width:32px;height:32px}

  /* Data preview table: scroll horizontal */
  .data-preview{overflow-x:auto}
  .dp-table{min-width:500px}
  .dp-table td{padding:10px 16px}
  .dp-table thead th{padding:8px 16px}
}

@media(max-width:480px){
  nav{padding:0 12px}
  .nav-brand img{height:28px}

  .hero-arrow{display:none}

  .numbers-inner{grid-template-columns:1fr}
  .num-cell{padding:20px 16px}
  .num-val{font-size:20px}

  .ql-strip{}
  .ql-strip-inner{display:flex;flex-wrap:wrap;padding:8px 14px;gap:5px;max-height:0;overflow:hidden;opacity:0;transition:max-height .4s ease,opacity .3s ease,padding .3s ease;padding-top:0;padding-bottom:0}
  .ql-strip.ql-open .ql-strip-inner{max-height:600px;opacity:1;padding-top:8px;padding-bottom:8px}
  .ql-link{flex:1 1 calc(50% - 5px);padding:7px 10px;font-size:11px;min-width:0;white-space:normal;min-height:36px;box-sizing:border-box}
  /* O layout espelhado de 2 colunas (ímpares com ícone à direita, pares à
     esquerda) morreu junto com as pills sobre o hero — identidade.css agora
     empilha os tiles em coluna. As regras :nth-child de direção ficaram órfãs
     e a de :last-child:nth-child(odd), com especificidade (0,3,0), ainda
     vencia o .ql-strip .ql-link (0,2,0) da identidade: com contagem ÍMPAR de
     links o último tile virava flex-direction:row e o ícone, agora item do
     eixo principal, era esmagado pelo flex-shrink (47x60 em vez de 60x60). */

  .ql-toggle{display:inline-flex;align-items:center;gap:6px;margin:0 auto;padding:8px 20px;font-size:12px;font-weight:600;color:rgba(255,255,255,0.95);background:color-mix(in srgb, var(--water) 35%, transparent);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,0.2);border-radius:20px;cursor:pointer;letter-spacing:.3px}
  .ql-toggle ion-icon{font-size:14px}
  .ql-toggle .ql-toggle-arrow{transition:transform .3s ease}
  .ql-toggle.active .ql-toggle-arrow{transform:rotate(180deg)}
  .ql-strip{display:flex;flex-direction:column;align-items:center;padding-bottom:8px}

  .nav-cta{display:none}

  .section{padding:36px 16px}

  .cards-grid{grid-template-columns:1fr}
  .card-img-wrap,.card-img{height:160px}
  .card-body{padding:20px}

  .gallery{grid-template-columns:1fr;padding:0 16px 36px}

  .footer-top{grid-template-columns:1fr}
  .footer-bottom{flex-direction:column;text-align:center}

  .hero-banner{min-height:100svh}
  .hero-banner-content{padding:20px 24px;justify-content:flex-start;padding-top:6vh}
  .hero-eyebrow{margin-bottom:12px;font-size:10px}
  .hero-h{font-size:clamp(30px,8vw,40px);margin-bottom:14px;line-height:1.2;letter-spacing:-0.5px}
  .hero-sub{font-size:14px;max-width:none;margin-bottom:20px;line-height:1.6}
  .hero-actions{display:none}
  .hero-search-row{padding:4px;transition:opacity .3s ease,max-height .3s ease;overflow:hidden}
  .hero-search-row input{min-width:0;width:100%;padding:9px 10px;font-size:13px}
  .hero-search-row button{padding:9px 14px;font-size:12px}
  .hero-search-row ion-icon{display:none}
  .hero-search-row.ql-hide{opacity:0;max-height:0;padding:0;margin:0}

  /* Split: sem corte de texto */
  .split-h{font-size:clamp(18px,5vw,24px)}
  .split-p{word-break:break-word;overflow-wrap:anywhere}

  /* Banner CTA */
  .banner-cta-content{padding:24px 16px}
  .banner-cta-title{font-size:clamp(18px,5vw,24px)}
  .banner-cta-sub{font-size:12px}

  /* Updates compacto */
  .update-item{padding:18px 16px;gap:12px}
  .update-icon{width:32px;height:32px}
  .update-icon ion-icon{font-size:14px}
}

/* ══════════════════════════════════════
   PRINT
   ══════════════════════════════════════ */
@media print{
  nav,.hero-banner,.gallery,.banner-cta,footer,.hero-dots,.hero-arrow,.nav-toggle{display:none!important}
  body{font-size:12px;color:var(--ink);background:var(--surface)}
}

/* ══════════════════════════════════════
   FALLBACK — backdrop-filter nao suportado
   4 usos no arquivo: .hero-arrow, .hero-search-row, .ql-link, .ql-toggle.
   Sem isto, navegador sem suporte renderiza so a rgba() translucida por
   baixo e o chrome (seta do hero, busca, pills de links rapidos) some
   contra a foto de fundo. Fundo solido tingido de navy substitui o vidro
   fosco mantendo o texto branco legivel.
   ══════════════════════════════════════ */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  /* Sem blur o nav translucido deixaria o conteudo passar por baixo e ficar
     ilegivel — cai para o fundo de pagina opaco. */
  nav{background:var(--bg)}
  .hero-arrow{background:rgba(11,46,79,.55)}
  .hero-search-row{background:rgba(11,46,79,.55)}
  .ql-link{background:rgba(11,46,79,.55)}
  .ql-toggle{background:rgba(11,46,79,.55)}
}

/* ══════════════════════════════════════
   FORCED COLORS — Windows High Contrast
   box-shadow e backdrop-filter sao ignorados neste modo: header, card,
   pill e botao ficam sem contorno visivel sem borda explicita.
   ══════════════════════════════════════ */
@media (forced-colors: active) {
  nav{border-bottom:1px solid CanvasText}
  .card{border:1px solid CanvasText}
  .pill{border:1px solid CanvasText}
  .btn{border:1px solid CanvasText}
}

/* ══════════════════════════════════════
   REDUCED MOTION
   ══════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}