/*
   CACHE: o site usa versionamento ?v= no HTML e .htaccess com no-cache para HTML.
   Assim, aparelhos que visitaram versões antigas revalidam a página e recebem as alterações.
 ==========================================================================
   ARQUIVO: css/styles.css
   Todo o visual do site (cores, fontes, espaçamentos, layout responsivo)
   está aqui. O HTML só referencia classes (class="...") definidas neste
   arquivo — trocar aparência é sempre editar CSS, nunca o texto do HTML.

   Como o arquivo está organizado:
   1) :root            → "central de cores e fontes" do site inteiro
   2) Reset básico      → regras gerais (body, .wrap, etc.)
   3) Uma regra por seção do site (Header, Hero, Família, Timeline, Gabinete,
      Contato, Rodapé...), na MESMA ORDEM em que aparecem no index.html
   4) Blocos @media no final → ajustes específicos para celular/tablet

   IMPORTANTE — cache do navegador:
   O <link> no index.html carrega este arquivo como
   "css/styles.css?v=20260817-01". Depois de editar este arquivo, troque
   o número após "v=" (ex: v=20260817-02) no index.html — senão alguns
   visitantes continuam vendo a versão antiga guardada no cache.
   ========================================================================== */

/* --------------------------------------------------------------------------
   FONTES — hospedadas localmente em assets/fontes/ (antes vinham do Google
   Fonts). Cada @font-face é um peso específico (arquivo estático, não
   variável), o que deixa cada arquivo bem leve (~15-30 KB). O navegador só
   baixa o(s) peso(s) realmente usados na página. font-display:swap mostra
   texto com a fonte de sistema imediatamente e troca assim que a fonte
   carregar, sem travar a renderização.
   -------------------------------------------------------------------------- */
@font-face{font-family:"DM Sans";src:url("assets/fontes/DMSans-Regular.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"DM Sans";src:url("assets/fontes/DMSans-Medium.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"DM Sans";src:url("assets/fontes/DMSans-SemiBold.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"DM Sans";src:url("assets/fontes/DMSans-Bold.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"DM Mono";src:url("assets/fontes/DMMono-Regular.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"DM Mono";src:url("assets/fontes/DMMono-Medium.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Playfair Display";src:url("assets/fontes/PlayfairDisplay-Regular.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Playfair Display";src:url("assets/fontes/PlayfairDisplay-Medium.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Playfair Display";src:url("assets/fontes/PlayfairDisplay-SemiBold.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Playfair Display";src:url("assets/fontes/PlayfairDisplay-Italic.woff2") format("woff2");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"Playfair Display";src:url("assets/fontes/PlayfairDisplay-MediumItalic.woff2") format("woff2");font-weight:500;font-style:italic;font-display:swap}

/* --------------------------------------------------------------------------
   PAINEL DE CORES E FONTES DO SITE
   Mudar um valor aqui muda o site inteiro de uma vez, porque todas as
   regras abaixo usam var(--nome-da-variavel) em vez de cor "fixa".
   Ex: para deixar o site com tom mais azul, troque --ink; para mudar a
   cor dourada usada em detalhes (linhas, textos em destaque), troque --sand.
   -------------------------------------------------------------------------- */
:root{
  --ink:      #071629; /* cor escura principal — textos e fundos escuros (header, seções dark, rodapé) */
  --ink-2:    #071629; /* variação um pouco mais clara do --ink, usada em poucos detalhes */
  --paper:    #f6f4ee; /* fundo claro "papel" usado nas seções claras (section-light) */
  --paper-2:  #ece8de; /* fundo claro levemente mais escuro, usado em molduras de foto */
  --cream:    #e8dfcd; /* fundo creme da seção de Contato (section-cream) */
  --white:    #fff;    /* branco puro */
  --sand:     #c9b486; /* dourado/areia — cor de destaque (links em hover, ícones, linha do tempo, aspas) */
  --line:     #d8d4ca; /* cor cinza clara usada em linhas divisórias finas */
  --muted:    #68757a; /* cinza-azulado usado em textos secundários (menos importantes) */
  --serif:    "Playfair Display",Georgia,serif;   /* fonte dos títulos (h1, h2, itálicos) */
  --sans:     "DM Sans",Arial,sans-serif;          /* fonte usada no corpo do texto (parágrafos, menu) */
  --mono:     "DM Mono",monospace;                 /* fonte usada em rótulos pequenos (datas, "FOTO REAL DO GABINETE", etc.) */
  --max:      1240px; /* largura máxima do conteúdo central (.wrap) nas telas grandes */
}
/* --------------------------------------------------------------------------
   RESET BÁSICO + ESTRUTURA GERAL
   .wrap = a "caixa central" que limita a largura do conteúdo em todas as
   seções (controla a margem lateral do site inteiro).
   .skip = link de acessibilidade "Pular para o conteúdo" (aparece só ao
   navegar com Tab pelo teclado — pode manter mesmo sem entender).
   .grain = textura sutil de "grão de filme" sobre o site inteiro (o
   background-image em base64 é essa textura; para remover o efeito,
   pode apagar a regra .grain ou zerar sua opacidade).
   -------------------------------------------------------------------------- */
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased}.wrap{width:min(calc(100% - 96px),var(--max));margin:auto}.skip{position:fixed;left:16px;top:-80px;z-index:1000;background:#fff;padding:10px 14px;color:#000}.skip:focus{top:16px}.grain{position:fixed;inset:0;z-index:999;pointer-events:none;opacity:.035;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
/* --------------------------------------------------------------------------
   CABEÇALHO (MENU FIXO NO TOPO) — .site-header
   .header-inner = altura e espaçamento interno da barra do menu.
   .brand img = tamanho da logo no topo.
   .main-nav = links do menu no desktop (o menu que troca para "hambúrguer"
   no celular fica em .menu-toggle / .mobile-nav, mais abaixo no arquivo).
   -------------------------------------------------------------------------- */
.site-header{position:fixed;z-index:180;top:0;left:0;right:0;color:#fff;background:rgba(7,22,41,.88);backdrop-filter:blur(18px);box-shadow:0 1px 0 #fff1;transition:.35s ease}.site-header.scrolled{background:rgba(7,22,41,.96);box-shadow:0 1px 0 #fff1}.header-inner{width:min(calc(100% - 48px),1400px);height:82px;margin:auto;display:flex;align-items:center;gap:34px}.brand img{width:104px;height:auto;display:block;filter:brightness(0) invert(1)}.main-nav{display:flex;gap:20px;margin-left:auto}.main-nav a,.header-cta{font-size:12px;font-weight:600;color:#fff;text-decoration:none;letter-spacing:.02em}.main-nav a{opacity:.72;padding:29px 0 25px;border-bottom:3px solid transparent;transition:.25s,border-color .25s ease}.main-nav a:hover,.main-nav a:focus-visible,.main-nav a.active{opacity:1;border-color:var(--sand)}.header-cta{border:1px solid #fff4;border-radius:99px;padding:10px 15px}.header-cta span{margin-left:8px;color:var(--sand)}.menu-toggle,.mobile-nav{display:none}
/* --------------------------------------------------------------------------
   SEÇÃO "INÍCIO" (banner grande do topo, com a foto de fundo) — .hero
   .hero{height:700px} = altura do banner no desktop.
   .hero-bg img = a foto de fundo (Forte São José) — o filter:saturate()
   controla o "dessaturado" da foto (deixa mais acinzentada de propósito).
   .hero h1 = o título grande (tamanho controlado por clamp(), que se ajusta
   sozinho entre telas pequenas e grandes).
   .button = o botão "Conheça minha história ↓".
   -------------------------------------------------------------------------- */
.hero{position:relative;min-height:0;height:700px;background:#082331;color:#fff;overflow:hidden;isolation:isolate}.hero-bg{position:absolute;inset:0%;z-index:-4;will-change:transform}.hero-bg img{width:100%;height:100%;object-fit:cover;object-position:center 55%;filter:saturate(.78) contrast(1.08);transform:scale(1.05)}.hero-wash{position:absolute;inset:0;z-index:-4;background:linear-gradient(90deg,#061e2ddf 0%,#061e2db0 33%,#061e2d32 70%),linear-gradient(0deg,#061e2dce 0%,transparent 44%,#061e2d45 100%)}.hero-line{position:absolute;inset:102px 34px 34px;border:1px solid rgba(255,255,255,.15);pointer-events:none;z-index:1}.hero-content{position:relative;min-height:0;height:760px;display:flex;align-items:center}.hero-copy{width:60%;padding-top:28px}.kicker{display:flex;align-items:center;gap:12px;font:500 9px var(--mono);letter-spacing:.18em;color:#ffffffaa;text-transform:uppercase}.kicker i{width:34px;height:1px;background:#ffffff55}.hero-pretitle{margin:26px 0 8px;color:var(--sand);font:500 13px var(--mono);letter-spacing:.08em;text-transform:uppercase}.hero h1{margin:0;font:500 clamp(62px,6.4vw,112px)/.91 var(--serif);letter-spacing:-.055em}.hero h1 em{font-style:italic;color:#ffffffbf}.hero-text{max-width:470px;margin:22px 0;color:#fffaf0b8;font-size:16px;line-height:1.7}.button{display:inline-flex;align-items:center;gap:10px;padding:13px 0;border-bottom:1px solid #fff6;color:inherit;text-decoration:none;font-weight:600;font-size:13px}.button span{color:var(--sand);font-size:18px}.hero-person{position:absolute;right:-4%;bottom:-1px;height:min(82vh,720px);z-index:-1;display:flex;align-items:flex-end}.hero-person img{height:100%;width:auto;display:block;filter:drop-shadow(-30px 28px 40px #0005)}.hero-name{position:absolute;right:85%;bottom:390px;text-align:right}.hero-name span{display:block;font:italic 32px var(--serif)}.hero-name small{font:500 8px var(--mono);letter-spacing:.15em;color:#fff8;text-transform:uppercase}.hero-fullname{margin:10px 0 0;font:500 8px var(--mono);letter-spacing:.15em;color:#fff8;text-transform:uppercase}.hero-meta{position:absolute;right:56px;bottom:100px;z-index:2;display:flex;gap:18px;align-items:flex-end;max-width:230px}.hero-meta span{font:500 9px var(--mono);letter-spacing:.15em;color:var(--sand)}.hero-meta p{margin:0;font-size:10px;line-height:1.55;color:#fff9}.section-light{background:var(--paper)}.section-dark{background:var(--ink);color:#fff}.section-cream{background:var(--cream)}.intro{padding:150px 0 165px}.intro-grid{display:grid;grid-template-columns:1.05fr .72fr;gap:80px;align-items:center}.eyebrow{margin:0 0 24px;font:500 9px var(--mono);letter-spacing:.18em;color:#7b8587;text-transform:uppercase}.eyebrow.sand{color:var(--sand)}h2{margin:0;font:500 clamp(50px,6vw,86px)/.98 var(--serif);letter-spacing:-.045em}h2 em{font-style:italic;color:#748286}.intro-copy h2{margin-bottom:40px}.intro-photo{position:relative;aspect-ratio:4/5;overflow:hidden;max-width:520px;margin-left:auto;background:var(--paper-2)}.intro-photo img{width:100%;height:100%;display:block;object-fit:cover;object-position:center;filter:saturate(.82) contrast(1.02)}.intro-photo:after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,#061d2d88,transparent 48%);pointer-events:none}.intro-photo-label{position:absolute;z-index:2;left:24px;bottom:22px;color:#fff;font:500 9px var(--mono);letter-spacing:.14em}.intro-photo-label:before{content:"";display:inline-block;width:24px;height:1px;background:var(--sand);vertical-align:middle;margin-right:9px}.lead{font-size:20px;line-height:1.55;color:#263e47;max-width:780px}.intro-columns{display:grid;grid-template-columns:1fr 1fr;gap:48px;margin-top:38px;color:#657176}.intro-columns p{margin:0}
/* --------------------------------------------------------------------------
   SEÇÃO "FAMÍLIA" (fundo escuro, com o carrossel de fotos) — .family
   O carrossel de fotos em si (setas, bolinhas de navegação) tem CSS
   próprio mais abaixo, no bloco "Carrossel da seção Família".
   .facts = a grade de números/estatísticas (se existir na seção).
   -------------------------------------------------------------------------- */
.family{padding:120px 0 130px}.family-grid{display:grid;grid-template-columns:1fr 1fr;gap:100px;align-items:center}.family-photo{position:relative;aspect-ratio:4/5;overflow:hidden}.family-photo img{width:100%;height:100%;object-fit:cover;filter:saturate(.8)}.family-photo:after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,#061b27bb,transparent 45%)}.photo-tag{position:absolute;z-index:2;left:28px;bottom:25px;font:500 9px var(--mono);letter-spacing:.12em;color:#fff;text-transform:uppercase}.photo-tag small{color:#fff9;font-size:7px}.family-copy h2{margin-bottom:28px}.family-copy h2 em{color:#d4c4a1}.family-copy .lead{color:#fff9;margin-bottom:25px}.family-copy>p:not(.eyebrow):not(.lead){color:#ffffffa8;max-width:590px}.family blockquote{margin:45px 0 35px;padding-left:22px;border-left:1px solid var(--sand);font:italic 24px/1.45 var(--serif);color:#fff}.facts{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid #fff2;padding-top:25px;gap:20px}.facts strong{display:block;font:500 32px var(--serif);color:var(--sand)}.facts span{display:block;font-size:10px;line-height:1.5;color:#fff8}
/* --------------------------------------------------------------------------
   SEÇÃO "TRAJETÓRIA" — bloco antigo da linha do tempo (.timeline-modern,
   .timeline-card, .timeline-political, .timeline-community, .timeline-current)
   ATENÇÃO: esse formato de linha do tempo (cartões alternados) NÃO é o que
   está sendo usado no index.html atual — o HTML usa a versão mais nova,
   chamada "timeline-editorial" (procure mais abaixo no arquivo, no bloco
   com o comentário "Linha do tempo editorial"). Essas regras aqui embaixo
   ficaram no arquivo mas hoje não afetam a página; foram mantidas para não
   perder o código caso queira voltar a esse layout antigo no futuro.
   -------------------------------------------------------------------------- */
.timeline-section{padding:125px 0 135px}.timeline-head{display:grid;grid-template-columns:1fr}.timeline-head h2{margin-bottom:18px}.timeline-head>div:last-child>p:last-child{max-width:650px;color:#6d797d}.timeline-modern{position:relative;margin:72px auto 0;max-width:860px;padding:0 0 12px;display:flex;flex-direction:column;gap:0}.timeline-modern:before{content:"";position:absolute;left:50%;top:0;bottom:0;width:1px;background:#c9c7be;transform:translateX(-50%)}.timeline-card{position:relative;width:68%;margin:0 auto 28px;padding:18px 26px;border:1px solid #d7d4cb;border-radius:16px;background:#f3f1eb;text-align:center;box-shadow:0 10px 24px #0823310b}.timeline-card:after{content:"";position:absolute;left:50%;bottom:-29px;width:1px;height:28px;background:#8c908d;transform:translateX(-50%)}.timeline-card:last-child:after{display:none}.timeline-card:before{content:"";position:absolute;left:50%;top:-5px;width:9px;height:9px;border-radius:50%;background:#5f6768;border:2px solid var(--paper);transform:translate(-50%,-50%);z-index:2}.timeline-date{font:600 20px/1.2 var(--sans);color:#414748}.timeline-detail{margin-top:6px;font-size:16px;color:#697174}.timeline-political{background:#e2f4ef;border-color:#8bd2c3}.timeline-political .timeline-date{color:#0b5e54}.timeline-political .timeline-detail{color:#14776b}.timeline-community{background:#fbf0dd;border-color:#d9a54f}.timeline-community .timeline-date{color:#75420c}.timeline-community .timeline-detail{color:#9b5c13}.timeline-current{background:#082331;border-color:#d2b27a;box-shadow:0 16px 34px #08233122}.timeline-current .timeline-date{color:#fff}.timeline-current .timeline-detail{color:#d7e0df}.timeline-current .timeline-current-label{display:inline-block;margin-top:10px;padding:5px 10px;border:1px solid #d2b27a;border-radius:999px;color:#e4c98f;font:500 8px var(--mono);letter-spacing:.14em}.timeline-current:before{background:#d2b27a}.timeline-note{margin:42px auto 0;max-width:860px;padding:24px 0 0;border-top:1px solid #d6d2c9;display:grid;grid-template-columns:150px 1fr;gap:35px}.timeline-note span{font:500 9px var(--mono);letter-spacing:.14em;color:#7d8789}.timeline-note p{margin:0;color:#697477}
/* --------------------------------------------------------------------------
   SEÇÃO "PONTE" (faixa de transição com a foto da Ponte Hercílio Luz)
   — .bridge. É só uma foto full-width com uma frase por cima.
   -------------------------------------------------------------------------- */
.bridge{height:76vh;min-height:580px;position:relative;overflow:hidden;color:#fff;display:flex;align-items:flex-end}.bridge-image{position:absolute;inset:-6%;background:url("../assets/ponte_01.webp") center 54%/cover no-repeat;will-change:transform}.bridge-overlay{position:absolute;inset:0;background:linear-gradient(90deg,#061d2dc4,transparent 75%),linear-gradient(0deg,#061d2dce,transparent 60%)}.bridge-content{padding-bottom:24px;position:relative;transform:translateY(10px)}.bridge-content h2{font-size:clamp(56px,6.6vw,92px);transform:translateY(190px)}.bridge-content h2 em{color:#fff9}
/* --------------------------------------------------------------------------
   SEÇÃO "A ILHA" (Florianópolis) — .island
   -------------------------------------------------------------------------- */
/* As regras .island* abaixo NÃO são mais usadas no index.html atual — a
   seção "A Ilha" foi substituída pela seção fotográfica "Dinho pela
   cidade" (classe ".presence", logo abaixo). Mantidas aqui apenas de
   referência, seguindo o mesmo critério já usado neste arquivo para o
   bloco .timeline-modern. */
.island{padding:150px 0}.island-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:100px;align-items:center}.island-copy h2{margin-bottom:32px}.island-copy .lead{margin-bottom:25px}.island-copy>p:last-child{color:#6b777b;max-width:610px}.island-photo{position:relative;height:650px;overflow:hidden}.island-photo img{width:100%;height:100%;object-fit:cover;filter:saturate(.78)}.island-photo:after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,#061d2db8,transparent 55%)}.island-photo-label{position:absolute;z-index:2;bottom:30px;left:30px;color:#fff;font:500 10px var(--mono);letter-spacing:.13em}.island-photo-label small{color:#fff9;font-size:7px}

/* --------------------------------------------------------------------------
   SEÇÃO "DINHO PELA CIDADE" — .presence
   Galeria em mosaico (estilo "coluna", como a galeria do Gabinete) sobre
   fundo escuro. .presence-card-large e .presence-card-wide fazem uma
   foto ocupar mais espaço — use em no máximo 1 ou 2 fotos.
   -------------------------------------------------------------------------- */
.presence{padding:150px 0 130px;background:#071e2c;color:#fff;overflow:hidden}
.presence-head{max-width:760px;margin-bottom:70px}
.presence-head h2{margin:14px 0 26px;color:#fff}
.presence-head h2 em{color:#d7c49e}
.presence-head .lead{color:#ffffffa8}
.presence-gallery{column-count:3;column-gap:18px}
.presence-card{margin:0 0 18px;display:inline-block;width:100%;break-inside:avoid;vertical-align:top}
.presence-placeholder{position:relative;overflow:hidden;background:#0f2c3c;line-height:0;cursor:zoom-in}
.presence-placeholder img{display:block;width:100%;height:auto;object-fit:cover;filter:saturate(.85);transition:transform .55s cubic-bezier(.2,.7,.2,1),filter .4s ease}
.presence-placeholder:hover img{transform:scale(1.035);filter:saturate(1)}
.presence-placeholder:after{content:"";position:absolute;inset:10px;border:1px solid #fff3;pointer-events:none;transition:inset .35s ease,border-color .35s ease}
.presence-placeholder:hover:after{inset:9px;border-color:#fff8}
.presence-card figcaption{padding:13px 2px 0;display:flex;justify-content:space-between;gap:14px;color:#ffffffa0}
.presence-card figcaption b{font:600 9px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:#d7c49e}
.presence-card figcaption span{font-size:11px;text-align:right}
@media(max-width:1000px){.presence-gallery{column-count:2}}
@media(max-width:720px){.presence{padding:100px 0 85px}.presence-head{margin-bottom:45px}.presence-gallery{column-count:1}.presence-card{margin-bottom:26px}.presence-card figcaption{display:block}.presence-card figcaption span{display:block;text-align:left;margin-top:5px}}

/* O GABINETE — experiência documental */
.cabinet{padding:145px 0 0;background:#071e2c;color:#fff;overflow:hidden}
.cabinet-head{display:grid;grid-template-columns:1fr;align-items:start}
.cabinet-intro{max-width:900px}
.cabinet-intro h2{font-size:clamp(58px,7vw,96px);line-height:.96;margin:0 0 30px;color:#fff}
.cabinet-intro h2 em,.cabinet-gallery-head h3 em{color:#d7c49e}
.cabinet-intro .lead{max-width:720px;color:#ffffffa8}
.cabinet-video-wrap{width:min(1320px,calc(100% - 56px));margin:90px auto 0}
.cabinet-video-frame{height:min(74vh,780px);min-height:520px;position:relative;overflow:hidden;background:#102d3b;border:1px solid #ffffff12}
.cabinet-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;filter:none}
.cabinet-video-overlay{position:absolute;inset:0;background:linear-gradient(180deg,#061a25a8 0%,transparent 28%,transparent 55%,#061a25e8 100%),linear-gradient(90deg,#061a2575,transparent 65%);pointer-events:none}
.cabinet-video-top{position:absolute;top:24px;left:28px;right:28px;display:flex;justify-content:space-between;color:#fff9;font:500 9px var(--mono);letter-spacing:.16em}
.cabinet-video-caption{position:absolute;left:34px;bottom:38px;display:flex;align-items:flex-start;gap:14px;max-width:570px}
.cabinet-video-caption .play-dot{width:10px;height:10px;border-radius:50%;background:#d7c49e;box-shadow:0 0 0 6px #d7c49e22;margin-top:5px;flex:0 0 auto}
.cabinet-video-caption strong{display:block;font:500 27px var(--serif);color:#fff;margin-bottom:6px}
.cabinet-video-caption small{display:block;color:#ffffffa8;font:400 12px/1.5 var(--sans);max-width:500px}
.cabinet-video-note{position:absolute;right:28px;bottom:27px;color:#fff6;font:500 7px var(--mono);letter-spacing:.15em}
.cabinet-gallery-head{display:grid;grid-template-columns:1fr .72fr;gap:100px;padding:130px 0 60px;align-items:end}
.cabinet-gallery-head h3{font:500 clamp(54px,6vw,78px)/.98 var(--serif);margin:12px 0 0}
.cabinet-gallery-head>p{color:#ffffff8a;max-width:500px;margin:0;line-height:1.7}
.cabinet-gallery-wrap{background:#f1ede3;color:var(--ink);padding:70px 0 120px}
.cabinet-gallery{column-count:3;column-gap:18px}
.cabinet-card{margin:0 0 30px;display:inline-block;width:100%;break-inside:avoid;vertical-align:top}
.cabinet-card-large,.cabinet-card-wide{grid-row:auto;grid-column:auto}
.cabinet-placeholder{position:relative;overflow:hidden;background:#d8d1c4;color:#fff;padding:0;display:block;line-height:0}
.cabinet-placeholder img{position:relative;inset:auto;display:block;width:100%;height:auto;object-fit:contain;filter:saturate(.82);z-index:0}
.cabinet-placeholder{cursor:zoom-in}
.cabinet-placeholder img{transition:transform .55s cubic-bezier(.2,.7,.2,1),filter .4s ease}
.cabinet-placeholder:hover img{transform:scale(1.035);filter:saturate(.95)}
.cabinet-placeholder:after{transition:inset .35s ease,border-color .35s ease}
.cabinet-placeholder:hover:after{inset:9px;border-color:#fff8}
.photo-lightbox{position:fixed;inset:0;z-index:9999;background:rgba(3,13,20,.94);backdrop-filter:blur(12px);display:flex;align-items:center;justify-content:center;padding:28px;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .3s ease,visibility .3s ease}
.photo-lightbox.open{opacity:1;visibility:visible;pointer-events:auto}
.photo-lightbox-inner{position:relative;max-width:min(94vw,1500px);max-height:92vh;display:flex;align-items:center;justify-content:center;flex-direction:column;transform:scale(.96);transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.photo-lightbox.open .photo-lightbox-inner{transform:scale(1)}
.photo-lightbox img{display:block;max-width:94vw;max-height:82vh;width:auto;height:auto;object-fit:contain;box-shadow:0 25px 80px rgba(0,0,0,.45)}
.photo-lightbox-caption{margin-top:14px;color:#fff;max-width:900px;text-align:center;font:500 11px/1.5 var(--mono);letter-spacing:.08em;text-transform:uppercase;opacity:.8}
.photo-lightbox-close{position:fixed;top:22px;right:28px;width:46px;height:46px;border:1px solid rgba(255,255,255,.35);border-radius:50%;background:rgba(255,255,255,.08);color:#fff;font:300 30px/1 Arial,sans-serif;cursor:pointer;z-index:2;transition:background .2s ease,transform .2s ease}
.photo-lightbox-close:hover{background:rgba(255,255,255,.18);transform:rotate(90deg)}
body.lightbox-open{overflow:hidden}
@media(max-width:720px){.photo-lightbox{padding:18px}.photo-lightbox img{max-width:calc(100vw - 36px);max-height:78vh}.photo-lightbox-close{top:14px;right:14px;width:42px;height:42px;font-size:27px}.photo-lightbox-caption{font-size:9px}}
.cabinet-placeholder:before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,#061d2d08 45%,#061d2d85 100%);z-index:1;pointer-events:none}
.cabinet-placeholder:after{content:"";position:absolute;inset:12px;border:1px solid #fff4;pointer-events:none;z-index:2}
.cabinet-placeholder span,.cabinet-placeholder strong,.cabinet-placeholder small{position:absolute;z-index:3;left:28px;right:28px;line-height:1.2;display:none}
.cabinet-placeholder strong{bottom:40px;font:500 27px/1 var(--serif);color:#fff}
.cabinet-placeholder small{bottom:20px;font:500 7px/1.5 var(--mono);letter-spacing:.1em;color:#fff8}
.cabinet-card figcaption{padding:15px 3px 5px;display:flex;justify-content:space-between;gap:15px;border-bottom:1px solid #bdb7aa;color:#6f7673}
.cabinet-card figcaption b{font:600 9px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:#8a806a}.cabinet-card figcaption span{font-size:11px;text-align:right;max-width:300px}
@media(max-width:1000px){.cabinet-head{grid-template-columns:100px 1fr;gap:40px}.cabinet-gallery-head{gap:55px}.cabinet-gallery{column-count:2}}
@media(max-width:720px){.cabinet{padding:100px 0 0}.cabinet-head,.cabinet-gallery-head{grid-template-columns:1fr;gap:30px}.cabinet-video-wrap{width:calc(100% - 40px);margin-top:55px}.cabinet-video-frame{min-height:540px;height:68svh}.cabinet-video-top{top:18px;left:18px;right:18px;font-size:7px}.cabinet-video-top span:last-child{display:none}.cabinet-video-caption{left:20px;bottom:28px;right:20px}.cabinet-video-caption strong{font-size:23px}.cabinet-video-note{display:none}.cabinet-gallery-head{padding:90px 0 45px}.cabinet-gallery-wrap{padding:45px 0 80px}.cabinet-gallery{column-count:1}.cabinet-card{margin-bottom:30px}.cabinet-card figcaption{display:block}.cabinet-card figcaption span{display:block;text-align:left;margin-top:7px}}
/* --------------------------------------------------------------------------
   SEÇÃO "O QUE EU ACREDITO" (.beliefs) — declaração de valores (não é lista
   de propostas). .beliefs-list = as frases curtas de crença. .beliefs-grid/
   .belief-card = os cards das áreas com emoji abaixo.
   -------------------------------------------------------------------------- */
.beliefs{padding:130px 0 110px}.beliefs-head{max-width:640px}.beliefs-head h2{margin-bottom:0}
.beliefs-list{list-style:none;margin:55px 0 0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:0 60px}
.beliefs-list li{padding:20px 0;border-bottom:1px solid #ffffff22;font:500 21px var(--serif);color:#fff}
.beliefs-list li:before{content:"—";display:inline-block;margin-right:14px;color:var(--sand)}
.beliefs-areas{margin-top:90px;padding-top:40px;border-top:1px solid #ffffff22}
.beliefs-areas-label{margin:0 0 26px;font:500 9px var(--mono);letter-spacing:.18em;color:#c9b486;text-transform:uppercase}
.beliefs-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:14px}
.belief-card{padding:28px 16px;border:1px solid #ffffff22;background:#ffffff08;text-align:center;transition:.25s}
.belief-card:hover{border-color:var(--sand);background:#ffffff14}
.belief-emoji{display:block;font-size:26px;margin-bottom:12px;line-height:1}
.belief-card h3{margin:0;font:600 13px var(--serif);color:#fff}
/* --------------------------------------------------------------------------
   SEÇÃO "ATUAÇÃO" (lista: Comunidade, Meio ambiente, Cultura...) — .action
   Cada linha da lista é um .action-row (ícone/número + título + texto).
   -------------------------------------------------------------------------- */
.action{padding:110px 0}.action-head{display:grid;grid-template-columns:1fr;max-width:620px}.action-head h2{margin-bottom:0}.action-head>div:last-child>p:last-child{color:#6d787c;max-width:620px}.action-list{margin:90px 0 0 220px;border-top:1px solid var(--line)}.action-row{display:grid;grid-template-columns:50px 1fr 30px;gap:25px;align-items:start;padding:30px 0;border-bottom:1px solid var(--line);transition:.25s}.action-row>span{font:500 9px var(--mono);color:#879093}.action-row h3{margin:0 0 7px;font:600 24px var(--serif)}.action-row p{margin:0;max-width:720px;color:#6b777a}.action-row b{font:400 22px var(--serif);color:#9a927d;font-weight:400}.action-row:hover{padding-left:12px}
/* --------------------------------------------------------------------------
   "UM POUCO DO MEU TRABALHO" — grade de produção legislativa (.legislative-grid),
   cards de área (.areas-grid) e chamada final para a Central do Mandato
   (.action-cta). O grid de números usa o mesmo layout/estilo de card do
   site da Central do Mandato (.legislative-item): borda fina, número em
   negrito, rótulo azul e setinha dourada no canto.
   -------------------------------------------------------------------------- */
.legislative-grid{display:grid;grid-template-columns:repeat(5,1fr);margin-top:60px;border:1px solid var(--line);background:var(--white)}
.legislative-item{min-height:120px;padding:26px 22px 16px;position:relative;display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:8px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);text-decoration:none;transition:background .15s ease}
.legislative-item:nth-child(5n){border-right:0}
.legislative-item:nth-last-child(-n+5){border-bottom:0}
.legislative-item strong{font:800 32px/1 var(--sans);letter-spacing:-.03em;color:var(--ink);min-width:0}
.legislative-item span{font-size:13px;line-height:1.35;color:#245887;max-width:220px}
.legislative-item::after{content:'↗';position:absolute;right:16px;bottom:14px;font-size:16px;color:var(--sand);line-height:1}
.legislative-item:hover{background:var(--paper-2)}
.areas-block{margin-top:80px}.areas-label{margin:0 0 26px;font:500 9px var(--mono);letter-spacing:.18em;color:#7b8587;text-transform:uppercase}.areas-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.area-card{padding:26px 22px;border:1px solid var(--line);background:var(--white);transition:.25s}.area-card h3{margin:0;font:600 18px var(--serif)}.area-card:hover{border-color:var(--sand);background:var(--paper-2)}
.action-cta{margin-top:70px;padding-top:34px;border-top:1px solid var(--line);display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px}.action-cta p{margin:0;font-size:16px;color:var(--ink);max-width:420px}.text-cta{display:inline-flex;align-items:center;gap:10px;color:var(--ink);text-decoration:none;font-weight:600;font-size:13px;border-bottom:1px solid var(--ink);padding-bottom:4px;white-space:nowrap}.text-cta span{color:var(--sand);font-size:17px}.text-cta:hover{border-color:var(--sand)}
/* --------------------------------------------------------------------------
   SEÇÃO "BEYOND" (.beyond) — bloco extra de foto + texto.
   ATENÇÃO: confirme no index.html se essa classe está em uso; se não
   houver, é código reserva sem efeito visual hoje.
   -------------------------------------------------------------------------- */
.beyond{padding:120px 0 140px}.beyond-grid{display:grid;grid-template-columns:1fr .9fr;gap:110px;align-items:center}.beyond-photo{height:650px;overflow:hidden}.beyond-photo img{width:100%;height:100%;object-fit:cover;filter:saturate(.75)}.beyond-copy h2{margin-bottom:30px}.beyond-copy h2 em{color:#d4c4a1}.beyond-copy .lead{color:#fff9}.beyond-copy>p:last-child{color:#ffffffa8;max-width:540px}
/* --------------------------------------------------------------------------
   FAIXA DE FECHAMENTO (frase de efeito antes do rodapé) — .closing
   -------------------------------------------------------------------------- */
.closing{background:#071e2c;color:#fff;padding:52px 0}.closing-inner{max-width:760px;margin:auto}.closing h2{font-size:clamp(38px,4.2vw,58px);line-height:.97;letter-spacing:-.02em;margin:14px 0 20px}.closing h2{color:#fff}.button-outline{border:1px solid #fff4;padding:10px 15px;border-radius:999px;font-size:12px}.button-outline:hover{background:#fff;color:var(--ink)}
/* --------------------------------------------------------------------------
   SEÇÃO "CONTATO" — .contact
   .contact-info = os blocos GABINETE / ENDEREÇO / E-MAIL / WHATSAPP.
   Os valores de texto (e-mail, whatsapp, endereço) NÃO se mudam aqui:
   eles vêm do arquivo js/site-config.js. Aqui só se mexe na aparência
   (tamanho, cor, espaçamento).
   -------------------------------------------------------------------------- */
.contact{padding:48px 0}.contact-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:45px;align-items:start}.contact-copy h2{margin:8px 0 12px}.contact-copy>p:last-child{color:#687478}.contact-info{border-top:1px solid #bdb8aa}.contact-info>div{padding:10px 0;border-bottom:1px solid #bdb8aa}.contact-info small{display:block;font:500 8px var(--mono);letter-spacing:.15em;color:#777f80;margin-bottom:4px}.contact-info strong,.contact-info a{font:500 16px var(--serif);color:var(--ink);text-decoration:none}.socials{display:flex;gap:18px}
.socials a{
  position:relative;
  overflow:hidden;
  font:600 12px var(--sans);
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex:1;
  padding:14px 16px;
  border:1px solid #bdb8aa;
  transition:background-color .25s ease,color .25s ease,border-color .25s ease,transform .25s ease;
}
.socials a span{
  color:#958b72;
  display:inline-block;
  transition:transform .25s ease,color .25s ease;
}
.socials a:hover{
  background:var(--ink);
  color:#fff;
  border-color:var(--ink);
  transform:translateY(-2px);
}
.socials a:hover span{
  color:#fff;
  transform:translate(4px,-4px);
}
.socials a:focus-visible{
  outline:2px solid var(--sand);
  outline-offset:4px;
}
/* --------------------------------------------------------------------------
   RODAPÉ — .footer
   -------------------------------------------------------------------------- */
.footer{background:#071629;color:#fff;padding:44px 0 20px}.footer-top{display:grid;grid-template-columns:1fr auto;gap:60px;padding-bottom:32px}.footer-logo{width:95px;height:auto;filter:brightness(0) invert(1);margin-bottom:15px}.footer-top p{max-width:360px;color:#ffffff80;font-size:13px}.footer-top nav{display:flex;flex-wrap:wrap;gap:14px 30px;align-items:center}.footer-top nav a{color:#fff9;text-decoration:none;font:500 10px var(--mono);letter-spacing:.12em;text-transform:uppercase;white-space:nowrap;transition:.25s}.footer-top nav a:hover{color:#fff}.footer-bottom{border-top:1px solid #fff2;padding-top:18px;display:flex;justify-content:space-between;color:#ffffff55;font:500 8px var(--mono);letter-spacing:.08em;text-transform:uppercase}
/* --------------------------------------------------------------------------
   ANIMAÇÃO DE ENTRADA (.reveal) — controla o "fade + sobe" suave que os
   elementos fazem ao aparecer na tela durante o scroll. Isso funciona em
   conjunto com js/main.js (que adiciona a classe "visible" via
   IntersectionObserver quando o elemento entra na tela).
   .delay-1 / .delay-2 = pequenos atrasos para dar efeito "cascata".
   -------------------------------------------------------------------------- */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .8s ease,transform .8s ease}.reveal.visible{opacity:1;transform:none}.delay-1{transition-delay:.12s}.delay-2{transition-delay:.22s}
/* --------------------------------------------------------------------------
   RESPONSIVIDADE — ajustes para telas médias (tablets, até 1000px)
   -------------------------------------------------------------------------- */
@media(max-width:1000px){.wrap{width:min(calc(100% - 56px),var(--max))}.main-nav{gap:12px}.header-cta{display:none}.hero-person{right:-16%}.hero-copy{width:68%}.family-grid,.island-grid,.beyond-grid{grid-template-columns:1fr;gap:60px}.family-photo{max-width:620px}.island-photo{height:520px}.timeline-modern,.action-list,.timeline-note{margin-left:0}.timeline-head,.action-head,.values-grid{grid-template-columns:1fr;gap:40px}.legislative-grid{grid-template-columns:repeat(2,1fr)}.legislative-item:nth-child(5n){border-right:1px solid var(--line)}.legislative-item:nth-child(2n){border-right:0}.legislative-item:nth-last-child(-n+5){border-bottom:1px solid var(--line)}.legislative-item:nth-last-child(-n+2){border-bottom:0}.areas-grid{grid-template-columns:repeat(2,1fr)}.beliefs-list{grid-template-columns:1fr;gap:0}.beliefs-grid{grid-template-columns:repeat(3,1fr)}}
/* --------------------------------------------------------------------------
   RESPONSIVIDADE — ajustes para celular (até 720px de largura)
   Esse bloco é o mais importante para "como o site fica no celular":
   aqui é onde o menu vira hambúrguer, o hero muda de proporção, etc.
   -------------------------------------------------------------------------- */
@media(max-width:720px){.wrap{width:calc(100% - 40px)}.hero-line{inset:90px 15px 15px}.header-inner{height:72px;width:calc(100% - 40px)}.brand img{width:88px}.main-nav{display:none}.menu-toggle{display:flex;margin-left:auto;width:42px;height:42px;border:1px solid #fff4;background:#ffffff0d;border-radius:50%;align-items:center;justify-content:center;flex-direction:column;gap:5px}.menu-toggle span{width:15px;height:1px;background:#fff}.mobile-nav{position:absolute;display:flex;flex-direction:column;gap:2px;top:72px;left:0;right:0;padding:12px 20px 20px;background:#071629f5;backdrop-filter:blur(16px);opacity:0;visibility:hidden;transform:translateY(-8px);transition:.25s}.mobile-nav.open{opacity:1;visibility:visible;transform:none}.mobile-nav a{color:#fff;text-decoration:none;padding:13px 4px;border-bottom:1px solid #fff1;font:500 13px var(--sans)}.hero,.hero-content{height:100svh;min-height:720px}.hero-bg img{object-position:59% center}.hero-wash{background:linear-gradient(0deg,#061e2dcc 0%,#061e2d6e 40%,#061e2d24 70%,#061e2d10 100%)}.hero-content{align-items:flex-end;padding-bottom:105px}.hero-copy{width:100%;z-index:2}.kicker span:first-child,.kicker i{display:none}.hero-pretitle{margin-top:28px;font-size:9px}.hero h1{font-size:65px;line-height:.92}.hero-text{font-size:14px;max-width:340px;margin:22px 0 25px}.hero-person{height:59vh;right:-31%;opacity:.7}.hero-name{display:none}.hero-fullname{display:none}.hero-meta{display:none}.hero-footer{bottom:18px}.scroll-word{display:none}.intro,.timeline-section,.island,.action,.contact{padding:100px 0}.intro-grid,.timeline-head,.action-head,.values-grid{grid-template-columns:1fr;gap:30px}.intro-photo{order:2;max-width:620px;width:100%;margin:0 auto}.intro-photo-label{left:20px;bottom:18px}.section-index small{writing-mode:initial}.intro-copy h2{font-size:52px}.intro-columns{grid-template-columns:1fr;gap:20px}.family{padding:80px 0 95px}.family-grid{gap:45px}.family-copy h2,.island-copy h2,.beyond-copy h2{font-size:52px}.facts{grid-template-columns:1fr;gap:20px}.timeline-modern{margin-top:55px;padding-bottom:4px}.timeline-modern:before{left:18px}.timeline-card{width:calc(100% - 36px);margin-left:36px;margin-right:0;text-align:left;padding:16px 18px;border-radius:14px}.timeline-card:before{left:-18px;top:50%;transform:translate(-50%,-50%)}.timeline-card:after{left:-18px;bottom:-29px;height:28px}.timeline-date{font-size:17px}.timeline-detail{font-size:14px}.timeline-current .timeline-current-label{font-size:7px}.timeline-note{grid-template-columns:1fr;gap:8px;padding-left:0}.bridge{height:58vh;min-height:470px}.bridge-image{background-position:58% center}.bridge-content{padding-bottom:18px;transform:none}.bridge-content h2{font-size:52px;transform:translateY(105px)}.island-grid{gap:45px}.island-photo{height:420px}.values-list{grid-template-columns:1fr}.values-list span,.values-list span:nth-child(odd),.values-list span:nth-child(even){border-right:0;padding:14px 0}.action{padding:90px 0}.action-list{margin-top:55px}.action-row{grid-template-columns:35px 1fr;gap:14px}.action-row b{display:none}.action-row h3{font-size:21px}.legislative-grid{grid-template-columns:repeat(2,1fr);margin-top:45px}.legislative-item{min-height:100px;padding:18px 16px 12px}.legislative-item:nth-child(5n){border-right:1px solid var(--line)}.legislative-item:nth-child(2n){border-right:0}.legislative-item:nth-last-child(-n+5){border-bottom:1px solid var(--line)}.legislative-item:nth-last-child(-n+2){border-bottom:0}.legislative-item strong{font-size:26px}.areas-block{margin-top:55px}.areas-grid{grid-template-columns:1fr 1fr}.action-cta{margin-top:50px;padding-top:26px;flex-direction:column;align-items:flex-start}.beyond{padding:85px 0 100px}.beyond-photo{height:440px}.closing{padding:70px 0}.closing h2{font-size:40px;line-height:.97;margin:14px 0 20px}.contact-grid{grid-template-columns:1fr;gap:32px}.footer-top{grid-template-columns:1fr;gap:40px}.footer-top nav{flex-wrap:wrap;gap:10px 22px}.footer-bottom{flex-direction:column;gap:8px}}
@media(max-width:420px){.hero h1{font-size:58px}.hero-person{right:-40%;height:55vh}.intro-copy h2,.family-copy h2,.island-copy h2,.beyond-copy h2{font-size:45px}.bridge-content h2{font-size:44px}.closing h2{font-size:36px;line-height:.98}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.reveal{transition:none}.hero-bg,.bridge-image{transform:none!important}}

/* --------------------------------------------------------------------------
   BOTÃO DO WHATSAPP (na seção de Contato) — .whatsapp-button
   -------------------------------------------------------------------------- */
.whatsapp-button{display:inline-flex!important;align-items:center;justify-content:space-between;margin-top:8px;padding:10px 14px;border:1px solid #bdb8aa;text-transform:uppercase;font:600 10px var(--mono)!important;letter-spacing:.12em;width:100%;transition:.25s ease}.whatsapp-button:hover{background:var(--ink);color:#fff!important;border-color:var(--ink)}

/* Linha do tempo ampliada — trajetória pessoal, comunitária e política */
.timeline-intro{display:grid;grid-template-columns:150px 1fr;gap:55px;margin:58px auto 0;max-width:1040px;padding:30px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.timeline-intro-label{font:500 9px var(--mono);letter-spacing:.18em;color:#9a927d;padding-top:7px}
.timeline-intro h3{margin:0 0 14px;font:500 clamp(28px,3vw,42px)/1.05 var(--serif);letter-spacing:-.025em;color:var(--ink)}
.timeline-intro p{margin:0 0 10px;max-width:820px;color:#687478;font-size:15px;line-height:1.65}
.timeline-intro p:last-child{margin-bottom:0}
.timeline-modern{margin-top:64px;max-width:900px}
.timeline-card{width:76%;padding:20px 30px;margin-bottom:34px;border-radius:18px;box-shadow:0 12px 28px #0823310a}
.timeline-card p{margin:10px auto 0;max-width:660px;font-size:13px;line-height:1.55;color:#6b7475}
.timeline-origin{background:#f3f1eb;border-color:#d7d4cb}
.timeline-origin .timeline-date{color:#414748}
.timeline-work{background:#eeeae1;border-color:#cbc3b3}
.timeline-work .timeline-date{color:#4e514f}
.timeline-work .timeline-detail{color:#6f716c}
.timeline-bottom{max-width:900px;margin:28px auto 0}
.timeline-note{display:grid;grid-template-columns:110px 1fr;gap:25px;align-items:start;padding:25px 0;border-top:1px solid var(--line)}
.timeline-note>span{font:500 9px var(--mono);letter-spacing:.18em;color:#9a927d}
.timeline-note strong{display:block;font:500 23px/1.2 var(--serif);color:var(--ink)}
.timeline-note p{margin:8px 0 0;color:#687478;font-size:14px;max-width:720px}
.timeline-focus{margin-top:18px;padding:25px 0;border-top:1px solid var(--line)}
.timeline-focus .eyebrow{margin-bottom:16px}
.focus-tags{display:flex;flex-wrap:wrap;gap:8px}
.focus-tags span{padding:8px 13px;border:1px solid #c9c4b8;border-radius:999px;color:#405057;font-size:11px;background:#faf8f2}
.timeline-source-note{margin:22px 0 0;color:#8a8f8d;font-size:10px;line-height:1.5}
@media(max-width:720px){.timeline-intro{grid-template-columns:1fr;gap:12px;margin-top:45px;padding:22px 0}.timeline-intro h3{font-size:31px}.timeline-intro p{font-size:14px}.timeline-modern{margin-top:48px}.timeline-card{width:calc(100% - 36px);padding:17px 18px}.timeline-card p{font-size:12px}.timeline-bottom{margin-top:20px}.timeline-note{grid-template-columns:1fr;gap:8px}.timeline-note strong{font-size:20px}.focus-tags{gap:6px}.focus-tags span{font-size:10px;padding:7px 10px}}


/* Linha do tempo editorial — formato vertical solicitado */
.timeline-editorial{position:relative;max-width:1040px;margin:68px auto 0;padding:0 0 20px;display:flex;flex-direction:column;gap:0}
.timeline-editorial:before{content:"";position:absolute;left:24px;top:6px;bottom:20px;width:1px;background:#c9c7be}
.timeline-entry{position:relative;display:grid;grid-template-columns:220px 1fr;column-gap:55px;min-height:176px;padding:0 0 58px}
.timeline-entry:last-child{padding-bottom:8px}
.timeline-meta{position:relative;padding:4px 0 0 67px;font:500 12px/1.2 var(--mono);letter-spacing:.02em;color:#6e7779}
.timeline-meta:before{content:"";position:absolute;left:19px;top:7px;width:10px;height:10px;border-radius:50%;background:#082b3a;border:2px solid var(--paper);box-sizing:content-box;transform:translate(-50%,-50%);z-index:2}
.timeline-content{padding:0 0 2px}
.timeline-content h3{margin:0 0 10px;font:500 clamp(28px,2.4vw,39px)/1.05 var(--serif);letter-spacing:-.025em;color:var(--ink)}
.timeline-content p{margin:0;max-width:760px;color:#657277;font-size:17px;line-height:1.65}
.timeline-content strong{color:#334d59;font-weight:600}
.timeline-election .timeline-meta:before{background:#0b6d62}
.timeline-election .timeline-meta{color:#0b6d62}
.timeline-election .timeline-content h3{color:#07584f}
.timeline-community-entry .timeline-meta:before{background:#a46a1d}
.timeline-community-entry .timeline-meta{color:#8b5a19}
.timeline-current-entry .timeline-meta:before{background:#c39b57}
.timeline-current-entry .timeline-meta{color:#896c3d}
.timeline-current-entry .timeline-content h3{color:#0a2a39}
.timeline-current-label{display:inline-block;margin-top:17px;padding:7px 12px;border:1px solid #c9a96e;border-radius:999px;color:#7e6338;background:#faf6ec;font:500 9px var(--mono);letter-spacing:.14em}
.timeline-bottom{max-width:1040px;margin:24px auto 0}
.timeline-note{grid-template-columns:220px 1fr;gap:55px;padding:28px 0;border-top:1px solid var(--line)}
.timeline-note>span{padding-left:67px}
.timeline-note strong{font-size:25px}
@media(max-width:720px){.timeline-editorial{margin-top:48px}.timeline-editorial:before{left:18px}.timeline-entry{grid-template-columns:72px 1fr;column-gap:20px;min-height:0;padding-bottom:42px}.timeline-meta{padding:3px 0 0 36px;font-size:10px}.timeline-meta:before{left:13px;top:6px}.timeline-content h3{font-size:28px}.timeline-content p{font-size:14px;line-height:1.55}.timeline-bottom{margin-top:10px}.timeline-note{grid-template-columns:72px 1fr;gap:20px}.timeline-note>span{padding-left:36px}.timeline-note strong{font-size:20px}}

/* --------------------------------------------------------------------------
   OBS: os blocos abaixo (a partir daqui até o fim do arquivo) são AJUSTES
   POSTERIORES — pequenas correções feitas depois do CSS original, cada
   um com seu próprio comentário já explicando o motivo. Como regras CSS
   mais abaixo no arquivo "vencem" as de cima quando há empate, esses
   ajustes finais têm prioridade sobre as regras equivalentes no começo
   do arquivo. Se algo parecer "não fazer efeito" ao editar uma cor/medida
   lá em cima, verifique se não há um ajuste com o mesmo seletor aqui embaixo
   sobrescrevendo o valor.
   -------------------------------------------------------------------------- */
/* Ajustes finais: linha do tempo em preto */
.timeline-meta:before,.timeline-election .timeline-meta:before,.timeline-community-entry .timeline-meta:before,.timeline-current-entry .timeline-meta:before{background:#000}
.timeline-meta,.timeline-election .timeline-meta,.timeline-community-entry .timeline-meta,.timeline-current-entry .timeline-meta{color:#000}
.timeline-election .timeline-content h3,.timeline-current-entry .timeline-content h3{color:#0d2735}
.timeline-current-label{border-color:#000;color:#000;background:transparent}
.bridge-content{padding-bottom:58px}
@media(max-width:720px){.bridge-content{padding-bottom:40px}}

/* Ajuste de ritmo: seções mais compactas e contínuas */
@media (min-width:721px){
  .intro{padding:105px 0 115px}
  .family{padding:90px 0 100px}
  .timeline-section{padding:90px 0 100px}
  .timeline-modern{margin-top:52px}
  .island{padding:105px 0}
  .cabinet{padding-top:105px}
  .cabinet-video-wrap{margin-top:65px}
  .cabinet-gallery-head{padding:95px 0 45px}
  .cabinet-gallery-wrap{padding:55px 0 90px}
  .values{padding:80px 0 95px}
  .beliefs{padding:80px 0 90px}
  .action{padding:105px 0}
  .action-list{margin-top:65px}
  .beyond{padding:90px 0 105px}
  .closing{padding:52px 0}
  .contact{padding:44px 0}
}
@media (max-width:700px){
  .intro,.timeline-section,.island,.action{padding:78px 0}
  .contact{padding:40px 0}
  .family{padding:65px 0 75px}
  .timeline-modern{margin-top:42px}
  .island-grid{gap:35px}
  .cabinet{padding-top:78px}
  .cabinet-video-wrap{margin-top:42px}
  .cabinet-gallery-head{padding:65px 0 35px}
  .cabinet-gallery-wrap{padding:35px 0 60px}
  .values{padding:70px 0 75px}
  .beliefs{padding:70px 0 65px}
  .beliefs-head h2{font-size:38px}
  .beliefs-list{grid-template-columns:1fr;margin-top:35px}
  .beliefs-list li{font-size:16px;padding:15px 0}
  .beliefs-areas{margin-top:50px;padding-top:28px}
  .beliefs-grid{grid-template-columns:repeat(2,1fr);gap:10px}
  .belief-card{padding:20px 12px}
  .action-list{margin-top:42px}
  .beyond{padding:65px 0 78px}
  .closing{padding:42px 0}
}


/* Auditoria: acessibilidade, estabilidade visual e responsividade */
html{overflow-x:hidden}body{overflow-x:hidden}.main-nav a:focus-visible,.mobile-nav a:focus-visible,.menu-toggle:focus-visible,.button:focus-visible,.whatsapp-button:focus-visible,.socials a:focus-visible,.photo-lightbox-close:focus-visible{outline:2px solid var(--sand);outline-offset:4px}.cabinet-card:focus-visible{outline:2px solid var(--sand);outline-offset:5px}.photo-zoomable{cursor:zoom-in}.photo-zoomable .city-carousel-image img{transition:transform .45s ease,filter .35s ease}.photo-zoomable:hover .city-carousel-image img{transform:scale(1.035);filter:saturate(1.05)}.photo-zoomable:focus-visible{outline:2px solid var(--sand);outline-offset:5px}.cabinet-card img{display:block;width:100%;height:auto;object-fit:cover}.cabinet-placeholder{min-height:120px}.cabinet-placeholder img{height:auto}.mobile-nav{max-height:calc(100svh - 72px);overflow-y:auto}.hero-text,.timeline-content p,.lead{overflow-wrap:anywhere}.socials a{display:inline-flex;align-items:center;gap:6px}
@media(max-width:720px){.hero h1{max-width:100%;font-size:clamp(48px,14vw,65px)}.hero-text{max-width:100%}.button{max-width:100%}.timeline-content{min-width:0}.timeline-content p{overflow-wrap:anywhere}.cabinet-video-frame{min-height:420px}.cabinet-card figcaption span{max-width:none}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}

/* Correção do rodapé — evita que a altura da grade estique o logotipo e os links. */
/* Alinhamento do rodapé — nav verticalmente centralizada em relação ao
   bloco logo+texto à esquerda, igual à Central do Mandato. */
.footer-top nav{align-self:center}
.footer-top nav a{display:inline-block;line-height:1.35;padding:0}
@media(max-width:720px){.footer-top{align-items:start}.footer-logo{width:95px!important}.footer-top nav{align-self:start;width:100%;flex-wrap:wrap;gap:10px 22px}}


/* Carrossel da seção Família */
.family-gallery{position:relative;min-width:0}
.family-carousel{position:relative;aspect-ratio:4/5;overflow:hidden;background:#0b2b3a;isolation:isolate}
.family-slides{position:absolute;inset:0}
.family-slide{position:absolute;inset:0;margin:0;opacity:0;visibility:hidden;transform:scale(1.025);transition:opacity .55s ease,transform .8s ease,visibility .55s}
.family-slide.is-active{opacity:1;visibility:visible;transform:scale(1)}
.family-slide img{width:100%;height:100%;display:block;object-fit:cover;filter:saturate(.82)}
.family-slide:after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,#061b27c7 0%,transparent 52%,#061b2730 100%);pointer-events:none}
.family-slide .photo-tag{bottom:30px;left:30px}
.family-carousel-btn{position:absolute;z-index:3;top:50%;width:44px;height:44px;margin-top:-22px;border:1px solid #fff5;background:#061b2788;color:#fff;border-radius:50%;font:500 18px var(--sans);cursor:pointer;backdrop-filter:blur(8px);transition:.25s}
.family-carousel-btn:hover,.family-carousel-btn:focus-visible{background:#fff;color:var(--ink);outline:none}
.family-carousel-prev{left:18px}
.family-carousel-next{right:18px}
.family-carousel-controls{position:absolute;z-index:3;left:30px;right:30px;bottom:18px;display:flex;gap:7px;justify-content:flex-end}
.family-dot{width:28px;height:3px;padding:0;border:0;border-radius:99px;background:#fff6;cursor:pointer;transition:.25s}
.family-dot.is-active{background:#fff}
.family-dot:focus-visible{outline:2px solid #fff;outline-offset:4px}

@media (max-width: 760px){
  .family{padding:82px 0 92px}
  .family-grid{grid-template-columns:1fr;gap:54px}
  /* No mobile, o conteúdo textual de MINHAS RAÍZES aparece antes das fotos. */
  .family-copy{order:1}
  .family-gallery{order:2}
  .family-carousel{aspect-ratio:4/5}
  .family-carousel-btn{width:40px;height:40px;margin-top:-20px}
  .family-carousel-controls{left:24px;right:24px}
}
@media (prefers-reduced-motion: reduce){
  .family-slide{transition:none}
}


/* Ajuste mobile do hero: texto sempre legível e retrato sem sobrepor o conteúdo. */
@media (max-width:720px){
  .hero,
  .hero-content{
    height:100svh;
    min-height:720px;
  }

  .hero-content{
    align-items:flex-start;
    padding-top:clamp(210px, 28svh, 300px);
    padding-bottom:120px;
  }

  .hero-copy{
    width:min(100%, 520px);
    position:relative;
    z-index:3;
  }

  .hero h1{
    max-width:100%;
    font-size:clamp(46px, 13.8vw, 62px);
    line-height:.9;
    letter-spacing:-.05em;
    text-wrap:balance;
  }

  .hero-text{
    max-width:min(100%, 390px);
    margin:20px 0 24px;
    font-size:14px;
    line-height:1.55;
  }

  .hero-person{
    right:-16%;
    bottom:-2px;
    height:31svh;
    max-height:430px;
    opacity:.9;
    z-index:1;
    pointer-events:none;
  }

  .hero-person img{
    max-height:100%;
  }

  .hero-name{
    display:none;
  }

  .hero-fullname{
    display:none;
  }

  .hero-meta{
    display:none;
  }

  .hero-wash{
    background:
      linear-gradient(0deg,#061e2df8 0%,#061e2dca 30%,#061e2d70 62%,#061e2d35 100%);
  }
}

@media (max-width:420px){
  .hero-content{
    padding-top:205px;
    padding-bottom:105px;
  }

  .hero h1{
    font-size:clamp(44px, 13vw, 56px);
  }

  .hero-text{
    max-width:calc(100% - 8px);
    font-size:13px;
    line-height:1.5;
  }

  .hero-person{
    right:-22%;
    height:29svh;
    opacity:.82;
  }
}


/* Ajustes exclusivos para a versão mobile — seção Início */
@media (max-width:720px){
  .hero-bg picture{display:block;width:100%;height:100%}
  .hero-bg picture img{width:100%;height:100%;object-fit:cover}
  .hero h1{font-size:clamp(46px,12.5vw,58px);line-height:.94;max-width:92%;letter-spacing:-.045em}
  .hero-text{font-size:13px;line-height:1.55;max-width:330px;margin:16px 0 20px}
  .hero .button{font-size:12px;gap:18px;padding:10px 0}
  .hero-person{height:72vh;left:50%;right:auto;bottom:-1px;opacity:.82;transform:translateX(-50%) scale(1.04);transform-origin:bottom center}
  .hero-person img{height:100%;width:auto}
}


/* ===== Refinamentos editoriais — versão 2026-08-17 ===== */

.bio-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  margin-top: 1.25rem;
  border-top: 1px solid rgba(8,35,49,.16);
}
.bio-stat {
  padding: 1rem 1rem 0 0;
  border-right: 1px solid rgba(8,35,49,.12);
}
.bio-stat:last-child { border-right: 0; padding-right: 0; padding-left: 1rem; }
.bio-stat:nth-child(2) { padding-left: 1rem; }
.bio-stat strong {
  display: block;
  font-family: var(--serif);
  font-size: clamp(1.65rem, 3vw, 2.5rem);
  line-height: 1;
  margin-bottom: .45rem;
}
.bio-stat span {
  display: block;
  font-size: .76rem;
  line-height: 1.4;
  opacity: .72;
}

.timeline-phase {
  margin-top: 4.5rem;
}
.timeline-phase-label {
  display: grid;
  grid-template-columns: 4rem 1fr;
  gap: 1.25rem;
  align-items: start;
  margin-bottom: 2rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid rgba(8,35,49,.13);
}
.timeline-phase-label > span {
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .12em;
  opacity: .55;
  padding-top: .35rem;
}
.timeline-phase-label small {
  display: block;
  font-family: var(--mono);
  font-size: .68rem;
  letter-spacing: .16em;
  opacity: .6;
  margin-bottom: .4rem;
}
.timeline-phase-label h3 {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(1.5rem, 3vw, 2.25rem);
  font-weight: 500;
}
.timeline-divider {
  display: flex;
  justify-content: center;
  margin: 4rem 0 1rem;
}
.timeline-divider span {
  font-family: var(--mono);
  text-transform: uppercase;
  letter-spacing: .12em;
  font-size: .65rem;
  opacity: .55;
  padding: .7rem 1rem;
  border: 1px solid rgba(8,35,49,.16);
}
.timeline-public {
  margin-top: 1.5rem;
}

.cabinet-lead {
  max-width: 38rem;
  margin-top: 1rem;
  font-size: 1rem;
  line-height: 1.7;
  opacity: .78;
}

.action-lead {
  max-width: 34rem;
  margin-top: 1rem;
  font-size: 1rem;
  line-height: 1.7;
  opacity: .72;
}

.closing-inner {
  text-align: center;
}
.closing-inner h2 {
  max-width: 900px;
  margin-inline: auto;
}
.closing-inner > p:last-child {
  max-width: 650px;
  margin: 1.25rem auto 0;
  font-size: 1.05rem;
  line-height: 1.75;
  opacity: .78;
}

@media (max-width: 800px) {
  .bio-stats { grid-template-columns: 1fr; }
  .bio-stat, .bio-stat:nth-child(2), .bio-stat:last-child {
    padding: .9rem 0;
    border-right: 0;
    border-bottom: 1px solid rgba(8,35,49,.12);
  }
  .bio-stat:last-child { border-bottom: 0; }
  .timeline-phase { margin-top: 3rem; }
  .timeline-phase-label { grid-template-columns: 2.5rem 1fr; gap: .8rem; }
  .timeline-divider { margin: 2.75rem 0 0; }
}


/* ==========================================================================
   FLORIANÓPOLIS — FOTO + "DINHO PELA CIDADE"
   ========================================================================== */

.floripa-hero-photo {
  position: relative;
  width: 100%;
  height: clamp(460px, 48vw, 720px);
  overflow: hidden;
  background: var(--ink);
}
.floripa-hero-photo img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}
.floripa-hero-photo-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  background: linear-gradient(90deg, rgba(5,28,40,.72) 0%, rgba(5,28,40,.35) 45%, rgba(5,28,40,.08) 100%);
  color: #fff;
}
.floripa-hero-photo-overlay > div {
  width: min(1180px, calc(100% - 48px));
  margin: 0 auto;
}
.floripa-hero-photo-overlay p {
  margin: 0 0 12px;
  font: 500 9px var(--mono);
  letter-spacing: .18em;
  opacity: .8;
}
.floripa-hero-photo-overlay h2 {
  margin: 0;
  max-width: 850px;
  font: 500 clamp(52px, 7vw, 108px)/.9 var(--serif);
  letter-spacing: -.055em;
}
.floripa-hero-photo-overlay h2 em {
  color: rgba(255,255,255,.72);
}

.city-section {
  padding: clamp(100px, 10vw, 160px) 0 clamp(110px, 11vw, 175px);
}
.city-editorial-head {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(280px, .65fr);
  gap: clamp(40px, 7vw, 110px);
  align-items: end;
}
.city-editorial-head .overline {
  margin-bottom: 18px;
}
.city-editorial-head h2 {
  margin: 0;
  font-size: clamp(52px, 6.7vw, 100px);
  line-height: .92;
  letter-spacing: -.055em;
}
.city-editorial-head h2 em {
  color: var(--sand);
}
.city-editorial-copy {
  padding-bottom: 6px;
  max-width: 420px;
}
.city-editorial-copy p {
  margin: 0 0 14px;
  font-family: var(--serif);
  font-size: clamp(22px, 2.2vw, 30px);
  line-height: 1.2;
}
.city-editorial-copy span {
  display: block;
  font-size: 13px;
  line-height: 1.65;
  opacity: .58;
}

.city-carousel-wrap {
  margin-top: clamp(60px, 7vw, 95px);
}
.city-carousel-track {
  display: flex;
  gap: 22px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  overscroll-behavior-x: contain;
  padding: 0 0 8px;
  cursor: grab;
}
.city-carousel-track:active {
  cursor: grabbing;
}
.city-carousel-track::-webkit-scrollbar {
  display: none;
}
.city-carousel-card {
  flex: 0 0 min(39vw, 470px);
  scroll-snap-align: start;
}
.city-carousel-image {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: rgba(255,255,255,.04);
}
.city-carousel-image img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  transition: transform .7s cubic-bezier(.2,.7,.2,1);
}
.city-carousel-card:hover .city-carousel-image img {
  transform: scale(1.035);
}
.city-carousel-card-copy {
  padding: 16px 2px 0;
}
.city-carousel-card-copy span {
  display: block;
  margin-bottom: 6px;
  font-family: var(--serif);
  font-size: 22px;
}
.city-carousel-card-copy p {
  margin: 0;
  max-width: 390px;
  font-size: 12px;
  line-height: 1.6;
  opacity: .58;
}

.city-carousel-bottom {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 20px;
  margin-top: 28px;
}
.city-carousel-counter {
  min-width: 58px;
  font: 500 10px var(--mono);
  letter-spacing: .08em;
}
.city-carousel-counter strong {
  color: var(--sand);
  font-weight: 500;
}
.city-carousel-counter span {
  opacity: .4;
}
.city-carousel-progress {
  height: 1px;
  background: rgba(255,255,255,.2);
  overflow: hidden;
}
.city-carousel-progress span {
  display: block;
  height: 100%;
  width: 0;
  background: var(--sand);
  transition: width .25s ease;
}
.city-carousel-buttons {
  display: flex;
  gap: 8px;
}
.city-carousel-buttons button {
  width: 44px;
  height: 44px;
  border: 1px solid rgba(255,255,255,.35);
  border-radius: 50%;
  background: transparent;
  color: #fff;
  cursor: pointer;
  display: grid;
  place-items: center;
  font-size: 14px;
  transition: .2s ease;
}
.city-carousel-buttons button:hover {
  background: #fff;
  color: var(--ink);
  border-color: #fff;
  transform: translateY(-2px);
}

@media (max-width: 800px) {
  .floripa-hero-photo {
    height: 70vh;
    min-height: 500px;
  }
  .floripa-hero-photo-overlay > div {
    width: calc(100% - 34px);
  }
  .floripa-hero-photo-overlay h2 {
    font-size: clamp(48px, 13vw, 76px);
  }
  .city-editorial-head {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .city-editorial-copy {
    max-width: 520px;
  }
  .city-carousel-card {
    flex-basis: 78vw;
  }
  .city-carousel-bottom {
    grid-template-columns: auto 1fr;
  }
  .city-carousel-buttons {
    grid-column: 1 / -1;
    justify-content: flex-end;
  }
}

/* Carrossel do Gabinete — mesmo comportamento visual do carrossel Florianópolis,
   adaptado ao fundo claro da seção. */
.cabinet-city-carousel {
  margin-top: clamp(55px, 6vw, 85px);
}
.cabinet-city-carousel .city-carousel-track {
  padding-bottom: 8px;
}
.cabinet-city-carousel .city-carousel-card-copy span {
  color: var(--ink);
}
.cabinet-city-carousel .city-carousel-card-copy p {
  color: var(--muted);
  opacity: 1;
}
.cabinet-city-carousel .city-carousel-counter {
  color: var(--ink);
}
.cabinet-city-carousel .city-carousel-counter strong {
  color: var(--sand);
}
.cabinet-city-carousel .city-carousel-progress {
  background: rgba(8,35,49,.18);
}
.cabinet-city-carousel .city-carousel-progress span {
  background: var(--sand);
}
.cabinet-city-carousel .city-carousel-buttons button {
  border-color: rgba(8,35,49,.28);
  color: var(--ink);
}
.cabinet-city-carousel .city-carousel-buttons button:hover {
  background: var(--ink);
  color: #fff;
  border-color: var(--ink);
}
@media (max-width: 800px) {
  .cabinet-city-carousel .city-carousel-card {
    flex-basis: 78vw;
  }
}


/* ==========================================================================
   AJUSTES FINAIS — CENTRALIZAÇÃO, HOVER E CONTRASTE
   ========================================================================== */

/* Bloco que agrupa DINHO + nome completo: encolhe até a largura do
   título "DINHO" (display:inline-block), para que o nome completo,
   centralizado dentro dele, fique alinhado exatamente sob a palavra
   DINHO — e não sob toda a coluna de texto do Hero. */
.hero-title-block{
  display:inline-block;
  max-width:100%;
}

/* Nome completo centralizado sob DINHO */
.hero-fullname{
  display:block;
  width:100%;
  text-align:center;
  margin-top:10px;
}

/* Botão "Conheça minha história": interação mais elegante ao passar o mouse */
.hero .button-light{
  position:relative;
  transition:transform .28s ease, color .28s ease, border-color .28s ease;
}
.hero .button-light span{
  display:inline-block;
  transition:transform .28s ease;
}
.hero .button-light:hover{
  transform:translateY(-3px);
  color:#fff;
  border-color:var(--sand);
}
.hero .button-light:hover span{
  transform:translateY(4px);
}

/* Foto de Florianópolis mais baixa, sem perder o enquadramento */
.floripa-hero-photo{
  height:clamp(360px, 34vw, 540px);
}

/* Contraste correto na seção clara "O Gabinete" */
.cabinet-section{
  color:var(--ink);
}
.cabinet-head .overline{
  color:var(--ink);
}
.cabinet-head h2{
  color:var(--ink);
}
.cabinet-head h2 em{
  color:#9b8150;
}
.cabinet-lead{
  color:var(--muted);
  opacity:1;
}
.cabinet-gallery-head h3{
  color:var(--ink);
}
.cabinet-gallery-head h3 em{
  color:#9b8150;
}
.cabinet-gallery-head > p{
  color:var(--muted);
  opacity:1;
}
.cabinet-gallery-hint{
  color:#8a7043;
}

/* No celular, o nome completo também aparece e permanece centralizado */
@media (max-width:720px){
  .hero-fullname{
    display:block;
    width:100%;
    margin-top:8px;
    text-align:center;
    font-size:8px;
    letter-spacing:.14em;
    color:#fff;
  }

  .hero .button-light:hover{
    transform:none;
  }

  .hero .button-light:hover span{
    transform:none;
  }

  .floripa-hero-photo{
    height:clamp(340px, 58vw, 430px);
    min-height:340px;
  }
}


/* ==========================================================================
   AJUSTES SOLICITADOS — 2026-08-17
   1) Reduz o título "Uma presença feita de escuta..." da seção Cidade.
   2) Reduz e centraliza "Florianópolis faz parte da história.".
   3) Centraliza "Edinon Manoel da Rosa" em relação ao bloco DINHO.
   ========================================================================== */

/* 1. Título editorial da primeira imagem */
.city-editorial-head h2 {
  font-size: clamp(44px, 5.2vw, 78px);
  line-height: .94;
}

/* 2. Texto sobre a foto de Florianópolis */
.floripa-hero-photo-overlay {
  justify-content: center;
}
.floripa-hero-photo-overlay > div {
  text-align: center;
}
.floripa-hero-photo-overlay h2 {
  max-width: none;
  width: 100%;
  font-size: clamp(42px, 5.2vw, 78px);
  line-height: .92;
}

/* 3. Nome centralizado em relação ao título DINHO */
.hero-fullname {
  display: block;
  width: 100%;
  text-align: center;
  margin: 6px 0 0;
  font-size: 8px;
  letter-spacing: .14em;
}

/* Manter o nome visível e centralizado também no celular */
@media (max-width: 720px) {
  .hero-fullname {
    display: block;
    width: 100%;
    text-align: center;
    margin-top: 5px;
    font-size: 7px;
    letter-spacing: .12em;
  }

  .floripa-hero-photo-overlay > div {
    width: min(100% - 32px, 680px);
  }

  .floripa-hero-photo-overlay h2 {
    font-size: clamp(38px, 10vw, 58px);
    line-height: .94;
  }

  .city-editorial-head h2 {
    font-size: clamp(40px, 9.5vw, 58px);
  }
}


/* CONFIGURAÇÃO DA SEÇÃO INÍCIO — MOBILE COPIADA DA VERSÃO MOBILE APROVADA */
/* ==========================================================================
   AJUSTE MOBILE — COMPOSIÇÃO CONFORME REFERÊNCIA VISUAL 2026-08-17 (2)
   Baseado na imagem de referência enviada pelo usuário: foto mais baixa
   (a faixa de texto ocupa mais espaço abaixo dela), o título "DINHO"
   encostando bem na base da foto (não solto no meio do fundo escuro),
   um divisor "linha — ✳ — linha" entre o nome completo e a frase, e a
   seta de rolagem numa linha própria, centralizada, abaixo do botão
   (em vez de ficar ao lado do texto do botão).
   ========================================================================== */

/* Escondido por padrão (desktop) — só aparece no celular, no bloco abaixo. */
.hero-divider{display:none}

@media (max-width:399px){
  .hero,
  .hero-content{
    height:150vw;
    min-height:0;
  }

  .hero-bg{
    height:100%;
  }
  .hero-bg img{
    object-position:50% 42%;
  }
  .hero-wash{
    background:
      linear-gradient(180deg,
        rgba(6,30,45,.06) 0%,
        rgba(6,30,45,.14) 30%,
        rgba(6,30,45,.30) 45%,
        rgba(6,30,45,.60) 60%,
        rgba(6,30,45,.88) 80%,
        #061e2d 100%);
  }

  .hero-copy{
    top:53%;
  }
  .hero h1{
    font-size:clamp(58px, 16.5vw, 78px);
  }
  .hero-fullname{
    margin:3.6vw 0 0;
    font-size:clamp(9px, 2.6vw, 11px);
  }

  .hero-divider{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:14px;
    margin:3.6vw auto 0;
    width:100%;
    max-width:280px;
  }
  .hero-divider span{
    flex:1;
    height:1px;
    background:rgba(255,255,255,.4);
  }
  .hero-divider i{
    font-style:normal;
    color:var(--sand);
    font-size:14px;
    line-height:1;
  }

  .hero-text{
    margin:4.6vw auto 0;
    font-size:clamp(14px, 3.4vw, 17px);
  }

  .hero .button-light{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:4vw;
    margin:7.6vw auto 0;
    padding:0;
    border-bottom:0;
  }
  .hero .button-light span{
    font-size:clamp(24px, 6.5vw, 30px);
    line-height:1;
  }
}


/* ========================================================================
   MOBILE — TIPOGRAFIA DA REFERÊNCIA / MESMAS FONTES DO DESKTOP
   DINHO = Playfair Display (serif)
   Nome = DM Mono (rótulo)
   Frase e CTA = DM Sans (corpo/interface)
   ======================================================================== */
@media (max-width:720px){
  .hero-copy{
    top:53%;
    text-align:center;
  }

  /* Título: mesma família tipográfica do navegador/desktop */
  .hero h1{
    font-family:var(--serif);
    font-weight:500;
    font-style:normal;
    font-size:clamp(64px,17.8vw,84px);
    line-height:.88;
    letter-spacing:-.055em;
    color:#fff;
  }

  /* Nome: mesma fonte técnica usada nos pequenos rótulos do desktop */
  .hero-fullname{
    font-family:var(--mono);
    font-weight:500;
    font-size:clamp(8px,2.35vw,10px);
    line-height:1.2;
    letter-spacing:.16em;
    color:rgba(255,255,255,.62);
    text-transform:uppercase;
    margin:1.8vw 0 0;
  }

  /* A referência não usa o divisor entre o nome e a frase */
  .hero-divider{display:none!important}

  /* Frase: mesma família sans do conteúdo desktop, sem itálico */
  .hero-text{
    font-family:var(--sans);
    font-weight:400;
    font-style:normal;
    font-size:clamp(18px,4.55vw,22px);
    line-height:1.35;
    letter-spacing:-.015em;
    color:rgba(255,255,255,.82);
    max-width:100%;
    margin:8.2vw auto 0;
  }

  /* CTA: igual à linguagem de interface do desktop, com seta à direita */
  .hero .button-light{
    display:inline-flex;
    flex-direction:row;
    align-items:center;
    justify-content:center;
    gap:4.2vw;
    margin:11.5vw auto 0;
    padding:0 0 6.2vw;
    border-bottom:1px solid rgba(255,255,255,.48);
    font-family:var(--sans);
    font-weight:700;
    font-style:normal;
    font-size:clamp(15px,4vw,18px);
    line-height:1.2;
    color:#fff;
  }

  .hero .button-light span{
    font-family:var(--sans);
    font-size:clamp(24px,6.4vw,29px);
    font-weight:400;
    line-height:1;
    color:var(--sand);
    transform:none;
  }
}

@media (max-width:420px){
  .hero-copy{top:53%;}
  .hero h1{font-size:clamp(61px,18vw,76px);}
  .hero-fullname{font-size:8px;letter-spacing:.15em;}
  .hero-text{font-size:18px;margin-top:8vw;}
  .hero .button-light{font-size:15px;margin-top:11vw;padding-bottom:6vw;gap:4vw;}
  .hero .button-light span{font-size:26px;}
}


/* ==========================================================================
   CORREÇÃO DEFINITIVA — CAPA DO INÍCIO NO MOBILE
   A foto deve preencher 100% do Hero. O parallax não é aplicado no celular
   para evitar que a imagem se desloque e deixe uma área azul vazia abaixo.
   ========================================================================== */
@media (max-width: 720px) {
  .hero {
    position: relative;
    height: 100svh;
    min-height: 620px;
    overflow: hidden;
  }

  .hero-bg {
    position: absolute;
    inset: 0 !important;
    width: 100%;
    height: 100% !important;
    transform: none !important;
    overflow: hidden;
  }

  .hero-bg picture {
    display: block;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
  }

  .hero-bg img {
    display: block;
    width: 100% !important;
    height: 100% !important;
    min-width: 100%;
    min-height: 100%;
    object-fit: cover;
    object-position: 50% 42%;
  }

  .hero-content {
    height: 100% !important;
    min-height: 0 !important;
  }
}

/* Telas muito estreitas: mantém a composição aprovada sem deixar a capa
   menor que a área do celular. */
@media (max-width: 399px) {
  .hero {
    height: 100svh;
    min-height: 620px;
  }

  .hero-bg img {
    object-position: 50% 42%;
  }
}

/* Ajuste solicitado: no desktop, o nome completo fica alinhado à esquerda
   com o início de "DINHO". No mobile, permanece centralizado. */
@media (min-width: 721px){
  .hero-title-block .hero-fullname{
    width:100%;
    text-align:left;
    margin-left:0;
  }
}