/* Dra. Adriana Cassaro — identidade: verde-água + petróleo + areia, Montserrat/Roboto */
:root {
  --agua: #89B6AF;
  --agua-escura: #7B9B96;
  --menta: #DFFAF6;
  --petroleo: #344B47;
  --petroleo-2: #274742;
  --noite: #1E2C2A;
  --areia: #E8E4DA;
  --off: #F5F4EE;
  --tinta: #1D1B19;
  --grafite: #4A4A45;
  --branco: #fff;
  --m: 24px;               /* margem lateral (celular) */
  --max: 1320px;
  --raio: 28px;
  --ease: cubic-bezier(.2, .7, .1, 1);
  --titulo: 'Montserrat', system-ui, sans-serif;
  --corpo: 'Roboto', system-ui, sans-serif;
}
@media (min-width: 900px) { :root { --m: 48px; } }

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 96px; }
body { margin: 0; background: var(--off); color: var(--tinta); font: 300 17px/1.7 var(--corpo); overflow-x: clip; -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
svg { width: 1.2em; height: 1.2em; flex: none; }
figure { margin: 0; }
h1, h2, h3, p { margin: 0; }
h1, h2, .titulo, .gigante { font-family: var(--titulo); text-wrap: balance; }
p { text-wrap: pretty; }
:focus-visible { outline: 2px solid var(--agua); outline-offset: 3px; }
.pular { position: absolute; left: -999px; top: 8px; z-index: 100; background: var(--branco); padding: 8px 16px; border-radius: 99px; }
.pular:focus { left: 8px; }

/* ---------- tipografia ---------- */
.rotulo, .contador { font: 500 12px/1.4 var(--titulo); letter-spacing: .28em; text-transform: uppercase; color: var(--petroleo); }
.contador b { font-weight: 600; color: var(--agua-escura); }
.titulo { font-weight: 300; font-size: clamp(30px, 4.2vw, 56px); line-height: 1.1; letter-spacing: -.01em; color: var(--petroleo); margin: 14px 0 22px; }
.texto p + p { margin-top: 1em; }
.texto { color: var(--grafite); max-width: 60ch; }
.gigante { font-weight: 200; text-transform: uppercase; letter-spacing: -.02em; line-height: .92; }

/* ---------- botões ---------- */
.btn { display: inline-flex; align-items: center; gap: 14px; margin-top: 28px; padding: 15px 18px 15px 26px; border-radius: 99px; font: 500 13px/1 var(--titulo); letter-spacing: .14em; text-decoration: none; border: 1px solid transparent; cursor: pointer; transition: transform .4s var(--ease), background-color .3s, color .3s; }
.btn svg { width: 30px; height: 30px; padding: 7px; border-radius: 50%; background: rgba(255, 255, 255, .18); transition: transform .4s var(--ease); }
.btn:hover svg { transform: translateX(4px) rotate(-45deg); }
.btn:active { transform: scale(.97); }
/* gradiente animado: traço da identidade do site antigo */
.btn.grad { color: var(--branco); background: linear-gradient(270deg, var(--agua-escura), var(--petroleo), #B7B7B7, var(--agua-escura)); background-size: 800% 800%; animation: degrade 18s ease infinite; }
.btn.contorno { color: var(--petroleo); border-color: currentColor; }
.btn.contorno svg { background: var(--petroleo); color: var(--branco); }
.btn.contorno:hover { background: var(--petroleo); color: var(--branco); }
.btn.contorno:hover svg { background: var(--agua); }
.btn.claro { background: var(--branco); color: var(--petroleo); }
.btn.claro svg { background: var(--petroleo); color: var(--branco); }
@keyframes degrade { 0%, 100% { background-position: 0 50%; } 50% { background-position: 100% 50%; } }

.redondo { width: 52px; height: 52px; border-radius: 50%; border: 1px solid rgba(52, 75, 71, .35); background: transparent; color: var(--petroleo); display: grid; place-items: center; cursor: pointer; transition: background-color .3s, color .3s, transform .3s var(--ease); }
.redondo:hover { transform: scale(1.06); }
.redondo.cheio { background: var(--petroleo); color: var(--branco); border-color: var(--petroleo); }
.redondo:disabled { opacity: .35; cursor: default; transform: none; }

/* ---------- topo (estilo SUITS): logo · links em linha · ícones ---------- */
.topo { position: fixed; top: 0; left: 0; right: 0; z-index: 50; display: flex; align-items: center; gap: 40px; padding: 22px var(--m); color: var(--branco); transition: background-color .4s, padding .4s var(--ease); }
.topo.rolou { padding-top: 12px; padding-bottom: 12px; background: rgba(12, 16, 15, .78); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.marca img { width: 92px; transition: width .4s var(--ease); }
.topo.rolou .marca img { width: 80px; }
.topo-links { display: none; }
.topo-icones { margin-left: auto; display: flex; align-items: center; gap: 4px; }
.topo-icones a { display: none; width: 40px; height: 40px; place-items: center; border-radius: 50%; color: var(--branco); transition: background-color .3s, color .3s; }
.topo-icones a svg { width: 18px; height: 18px; }
.topo-icones a:hover { background: rgba(255, 255, 255, .1); color: var(--agua); }
.abrir { position: relative; z-index: 60; width: 44px; height: 44px; border: 0; background: none; cursor: pointer; }
.abrir i { position: absolute; right: 8px; height: 1.5px; background: var(--branco); transition: transform .5s var(--ease), top .5s var(--ease), width .5s var(--ease); }
.abrir i:first-child { top: 17px; width: 26px; }
.abrir i:last-child { top: 25px; width: 18px; }
.abrir:hover i:last-child { width: 26px; }
.menu-aberto .abrir i { top: 21px; width: 26px; }
.menu-aberto .abrir i:first-child { transform: rotate(45deg); }
.menu-aberto .abrir i:last-child { transform: rotate(-45deg); }
.menu-aberto .topo { background: transparent; backdrop-filter: none; }
@media (min-width: 1000px) {
  .topo { padding: 30px clamp(32px, 5vw, 80px); }
  .marca img { width: 104px; }
  .topo-links { display: flex; gap: 34px; }
  .topo-links a { position: relative; font: 500 11px/1 var(--titulo); letter-spacing: .2em; text-transform: uppercase; color: rgba(255, 255, 255, .78); text-decoration: none; transition: color .3s; }
  .topo-links a::after { content: ''; position: absolute; left: 0; right: 100%; bottom: -8px; height: 1px; background: var(--agua); transition: right .4s var(--ease); }
  .topo-links a:hover, .topo-links a[aria-current] { color: var(--branco); }
  .topo-links a:hover::after, .topo-links a[aria-current]::after { right: 0; }
  .topo-icones a { display: grid; }
  .abrir { display: none; }
}

/* painel do menu: desce do topo, links grandes + cards de procedimentos */
.painel { position: fixed; inset: 0; z-index: 45; background: var(--noite); color: var(--branco); overflow-y: auto; clip-path: inset(0 0 100% 0); visibility: hidden; transition: clip-path .8s var(--ease), visibility 0s .8s; }
.menu-aberto .painel { clip-path: inset(0 0 0 0); visibility: visible; transition: clip-path .8s var(--ease); }
.menu-aberto { overflow: hidden; }
.painel-grade { min-height: 100%; display: grid; gap: 36px; align-content: start; padding: 120px var(--m) 36px; max-width: var(--max); margin: 0 auto; }
.painel-nav { display: flex; flex-direction: column; }
.painel-nav a { display: flex; align-items: baseline; gap: 16px; padding: 14px 0; font: 300 clamp(24px, 7vw, 64px)/1.05 var(--titulo); white-space: nowrap; letter-spacing: -.01em; text-decoration: none; border-bottom: 1px solid rgba(255, 255, 255, .12); transition: color .3s; }
.painel-nav a:hover { color: var(--agua); }
.painel-nav a span, .painel-nav a small { transition: transform .5s var(--ease); }
.painel-nav a:hover span, .painel-nav a:hover small { transform: translateX(12px); }
.painel-nav small { font: 500 11px/1 var(--titulo); letter-spacing: .2em; color: var(--agua); }
.painel-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.painel-card { display: flex; flex-direction: column; justify-content: space-between; gap: 28px; min-height: 150px; padding: 20px; border-radius: 20px; background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .12); text-decoration: none; transition: background-color .35s, border-color .35s; }
.painel-card img { width: 46px; }
.painel-card span { font: 400 17px/1.25 var(--titulo); }
.painel-card svg { align-self: flex-end; width: 34px; height: 34px; padding: 8px; margin-top: -40px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .35); transform: rotate(-45deg); transition: transform .4s var(--ease), background-color .3s; }
.painel-card:hover { background: rgba(137, 182, 175, .14); border-color: var(--agua); }
.painel-card:hover svg { transform: none; background: var(--areia); color: var(--petroleo); }
.painel-pe { font-size: 14px; color: rgba(255, 255, 255, .7); }
.painel-pe .btn { margin: 0 0 22px; }
.painel-ig { display: inline-flex; gap: 10px; align-items: center; margin-top: 14px; text-decoration: none; color: var(--branco); }
.painel-nav a, .painel-cards, .painel-pe { opacity: 0; transform: translateY(30px); transition: opacity .6s, transform .8s var(--ease), color .3s; }
.menu-aberto .painel-nav a, .menu-aberto .painel-cards, .menu-aberto .painel-pe { opacity: 1; transform: none; }
.menu-aberto .painel-nav a:nth-child(1) { transition-delay: .25s; }
.menu-aberto .painel-nav a:nth-child(2) { transition-delay: .32s; }
.menu-aberto .painel-nav a:nth-child(3) { transition-delay: .39s; }
.menu-aberto .painel-nav a:nth-child(4) { transition-delay: .46s; }
.menu-aberto .painel-cards { transition-delay: .5s; }
.menu-aberto .painel-pe { transition-delay: .6s; }
.menu-aberto .painel-nav a:hover { transition-delay: 0s; }
@media (min-width: 1000px) {
  .painel-grade { grid-template-columns: 7fr 5fr; grid-template-rows: auto 1fr; gap: 40px 80px; padding-top: 150px; }
  .painel-nav { grid-row: span 2; }
  .painel-nav a { font-size: clamp(36px, 4.3vw, 64px); }
  .painel-cards { grid-template-columns: 1fr; }
  .painel-pe { align-self: end; }
}

.btn.creme { background: var(--areia); color: var(--petroleo); }
.btn.creme svg { background: var(--petroleo); color: var(--branco); }
.btn.creme:hover { background: var(--branco); }

/* ---------- HERO (estilo SUITS): fundo escuro, headline em negrito com 1ª linha em contorno ---------- */
.hero { position: relative; background: #0b0f0e; color: var(--branco); overflow: hidden; }
.hero-foto { position: relative; display: block; }
.hero-foto img { width: 100%; display: block; }
.hero-foto::after { content: ''; position: absolute; inset: 0; background: linear-gradient(transparent 45%, #0b0f0e 96%); }
.hero-txt { position: relative; z-index: 2; margin-top: -40vw; padding: 0 var(--m); }
.hero-nome { font: 500 11px/1.3 var(--titulo); letter-spacing: .32em; text-transform: uppercase; color: var(--areia); }
.hero-nome span { color: var(--agua); }
.hero-slogan { margin-top: 18px; font: 300 clamp(34px, 9.4vw, 92px)/1.06 var(--titulo); letter-spacing: -.02em; color: var(--areia); }
.hero-slogan > span { display: block; }
.hero-slogan .contorno { color: var(--areia); }
.hero-slogan .destaque { color: var(--agua); }
.hero .btn { margin-top: 30px; }
.hero-itens { list-style: none; margin: 44px 0 0; padding: 0 var(--m) 56px; display: grid; gap: 22px; }
.hero-itens li { display: grid; grid-template-columns: 46px 1fr; column-gap: 14px; align-items: center; }
.hero-itens img { grid-row: span 2; width: 46px; height: 46px; padding: 9px; border-radius: 14px; background: rgba(137, 182, 175, .1); border: 1px solid rgba(137, 182, 175, .3); }
.hero-itens b { font: 600 14px/1.35 var(--titulo); }
.hero-itens b { align-self: end; }
.hero-itens small { grid-column: 2; align-self: start; font-size: 12.5px; line-height: 1.5; color: rgba(255, 255, 255, .6); }
.hero-contato, .hero-assinatura { display: none; }

@media (min-width: 1000px) {
  .hero { min-height: 100svh; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr auto; padding: 0 clamp(32px, 5vw, 80px); }
  .hero-foto { position: absolute; inset: 0; }
  .hero-foto img { height: 100%; object-fit: cover; object-position: 14% 30%; }
  .hero-foto::after { background: radial-gradient(70% 90% at 20% 40%, transparent 30%, rgba(11, 15, 14, .55) 75%), linear-gradient(90deg, transparent 35%, rgba(11, 15, 14, .7) 62%, #0b0f0e 85%), linear-gradient(transparent 65%, #0b0f0e); }
  /* a headline avança um pouco sobre a foto, como na referência */
  .hero-txt { grid-column: 2; grid-row: 1; align-self: center; margin: 0 0 0 -11vw; padding: 140px 0 0; }
  .hero-slogan { font-size: clamp(44px, 4.6vw, 84px); line-height: 1.04; }
  .hero-itens { grid-column: 2; grid-row: 2; grid-template-columns: repeat(3, 1fr); gap: 32px; margin: 0 0 0 -9vw; padding: 0 120px 56px 0; margin-left: -11vw; }
  .hero-contato { display: block; position: absolute; right: clamp(4px, 1.2vw, 24px); top: 50%; transform: translateY(-50%) rotate(-90deg); transform-origin: center; font: 300 15px/1 var(--titulo); letter-spacing: .5em; text-transform: uppercase; color: rgba(255, 255, 255, .7); text-decoration: none; transition: color .4s; }
  .hero-contato:hover { color: var(--agua); }
  .hero-assinatura { display: block; position: absolute; left: clamp(32px, 5vw, 80px); bottom: 50px; font: 200 30px/1 var(--titulo); letter-spacing: .06em; text-transform: uppercase; color: rgba(255, 255, 255, .85); }
}

/* entrada da capa */
.js .hero-foto img { animation: heroZoom 2.4s var(--ease) both; }
.js .hero .rv { opacity: 1; transform: none; transition: none; animation: subir 1s var(--ease) both; }
.js .hero-slogan .rv:nth-child(1) { animation-delay: .1s; } .js .hero-slogan .rv:nth-child(2) { animation-delay: .22s; } .js .hero-slogan .rv:nth-child(3) { animation-delay: .34s; }
.js .hero-txt > .rv:last-child { animation-delay: .5s; }
.js .hero-itens li:nth-child(1) { animation-delay: .6s; } .js .hero-itens li:nth-child(2) { animation-delay: .7s; } .js .hero-itens li:nth-child(3) { animation-delay: .8s; }
.js .hero-contato, .js .hero-assinatura { animation: aparecer 1.6s .8s both; }
@keyframes aparecer { from { opacity: 0; } }
@keyframes heroZoom { from { transform: scale(1.12); filter: brightness(.5); } }
@keyframes subir { from { opacity: 0; transform: translateY(40px); } }

/* ---------- faixa corrida ---------- */
.faixa { overflow: hidden; background: var(--petroleo); color: var(--branco); padding: 18px 0; }
.faixa-trilho { display: flex; width: max-content; animation: correr 60s linear infinite; }
.faixa span { display: flex; align-items: center; }
.faixa b { font: 400 15px/1 var(--titulo); letter-spacing: .14em; text-transform: uppercase; white-space: nowrap; }
.faixa img { width: 34px; margin: 0 26px; opacity: .9; }
.faixa:hover .faixa-trilho { animation-play-state: paused; }
@keyframes correr { to { transform: translateX(-50%); } }

/* ---------- seções ---------- */
.sec { max-width: var(--max); margin: 0 auto; padding: 88px var(--m); }
@media (min-width: 900px) { .sec { padding-top: 130px; padding-bottom: 130px; } }

/* sobre: cartão inclinado + bolha */
.sobre { display: grid; gap: 56px; align-items: center; }
.sobre-fotos { position: relative; max-width: 460px; margin: 0 auto; width: 100%; }
.cartao-incl { position: relative; border-radius: var(--raio); overflow: hidden; transform: rotate(-3deg); box-shadow: 0 30px 60px rgba(39, 71, 66, .18); transition: transform .8s var(--ease); }
.cartao-incl.outro-lado { transform: rotate(3deg); }
.cartao-incl:hover { transform: rotate(0); }
.cartao-incl img { width: 100%; }
.cartao-incl figcaption { position: absolute; left: 16px; bottom: 16px; padding: 10px 16px; border-radius: 14px; background: rgba(30, 44, 42, .55); backdrop-filter: blur(10px); color: var(--branco); font: 500 13px/1.2 var(--titulo); letter-spacing: .06em; }
.bolha { position: absolute; right: -6px; top: -26px; width: 128px; height: 128px; border-radius: 50%; display: grid; place-content: center; text-align: center; background: var(--branco); box-shadow: 0 18px 40px rgba(39, 71, 66, .14); color: var(--petroleo); text-decoration: none; animation: flutuar 6s ease-in-out infinite; }
.bolha b { font: 200 46px/1 var(--titulo); }
.bolha span { font: 500 10px/1.3 var(--titulo); letter-spacing: .12em; text-transform: uppercase; padding: 4px 14px 0; }
.bolha-ig { top: auto; bottom: -26px; right: -10px; width: auto; height: auto; padding: 14px 20px; border-radius: 99px; display: flex; align-items: center; gap: 10px; }
.bolha-ig span { padding: 0; font-size: 12px; letter-spacing: .06em; text-transform: none; }
@keyframes flutuar { 50% { transform: translateY(-10px); } }
@media (min-width: 900px) {
  .sobre { grid-template-columns: 5fr 6fr; gap: 90px; }
  .sobre.inverso .sobre-fotos { order: 2; }
}

/* pilares: foto + acordeão horizontal (Visão · Missão · Valores) */
.so-leitor { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.pilares { background: var(--noite); color: var(--branco); padding: 80px var(--m); display: grid; gap: 28px; }
.pil-foto { position: relative; border-radius: 26px; overflow: hidden; }
.pil-foto img { width: 100%; aspect-ratio: 1; object-fit: cover; object-position: center 20%; }
.pil-foto figcaption { position: absolute; left: 14px; bottom: 14px; padding: 10px 16px; border-radius: 14px; background: rgba(30, 44, 42, .6); backdrop-filter: blur(10px); font: 500 12px/1.2 var(--titulo); letter-spacing: .06em; }
.acordeao { display: flex; flex-direction: column; gap: 10px; }
.painel-pil { border-radius: 24px; background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .12); overflow: hidden; transition: background-color .5s, border-color .5s, flex-grow .8s var(--ease); }
.painel-pil[data-aberto] { background: var(--areia); border-color: var(--areia); color: var(--petroleo); }
.pil-cab { width: 100%; display: flex; align-items: center; gap: 14px; padding: 20px 22px; background: none; border: 0; color: inherit; text-align: left; cursor: pointer; }
.pil-cab small { font: 500 11px/1 var(--titulo); letter-spacing: .2em; color: var(--agua); }
.painel-pil[data-aberto] .pil-cab small { color: var(--agua-escura); }
.pil-cab span { flex: 1; font: 300 26px/1.1 var(--titulo); }
.pil-cab i { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; border: 1px solid currentColor; opacity: .7; transition: transform .5s var(--ease); }
.pil-cab i svg { width: 16px; height: 16px; }
.painel-pil[data-aberto] .pil-cab i { transform: rotate(90deg); background: var(--petroleo); color: var(--branco); border-color: var(--petroleo); opacity: 1; }
.pilar { padding: 0 22px 26px; }
.pilar h2 { display: none; }
.pilar p { font: 300 18px/1.6 var(--titulo); color: var(--grafite); }
.valores { margin: 0; padding: 0; list-style: none; display: grid; gap: 12px; font: 300 18px/1.6 var(--titulo); color: var(--grafite); }
.valores strong { font-weight: 600; color: var(--petroleo); }
.js .pilar[data-oculto] { display: none; }
.js .pilar.troca > * { animation: aparecerTexto .9s var(--ease) both; animation-delay: .35s; }
.js .pilar.troca > *:nth-child(2) { animation-delay: .47s; }
.js .pilar.troca > *:nth-child(3) { animation-delay: .59s; }
.js .pilar.troca .valores li { animation: aparecerTexto .8s var(--ease) both; }
.js .pilar.troca .valores li:nth-child(1) { animation-delay: .5s; } .js .pilar.troca .valores li:nth-child(2) { animation-delay: .58s; } .js .pilar.troca .valores li:nth-child(3) { animation-delay: .66s; } .js .pilar.troca .valores li:nth-child(4) { animation-delay: .74s; } .js .pilar.troca .valores li:nth-child(5) { animation-delay: .82s; }
@keyframes aparecerTexto { from { opacity: 0; transform: translateY(22px); filter: blur(6px); } }
.pil-foto img { transition: transform 1.2s var(--ease), filter .8s; }
.pil-foto.pisca img { animation: fotoPulso 1s var(--ease); }
@keyframes fotoPulso { 40% { transform: scale(1.04); filter: brightness(.85); } }

@media (min-width: 1000px) {
  .pilares { grid-template-columns: minmax(0, 3.4fr) minmax(0, 8.6fr); gap: 16px; padding: 120px max(var(--m), (100vw - 1440px) / 2); align-items: stretch; }
  .pil-foto img { aspect-ratio: auto; height: 100%; min-height: 680px; }
  .acordeao { flex-direction: row; gap: 16px; min-height: 680px; }
  /* o painel aberto cresce (flex-grow anima) e os outros encolhem junto */
  .painel-pil { flex: 0 1 104px; min-width: 104px; display: flex; transition: flex-grow .9s cubic-bezier(.65, 0, .35, 1), background-color .7s, border-color .7s, color .7s; }
  .painel-pil[data-aberto] { flex-grow: 1; }
  .js .painel-pil.rv { transition: flex-grow .9s cubic-bezier(.65, 0, .35, 1), background-color .7s, border-color .7s, color .7s, opacity 1s var(--ease), transform 1.1s var(--ease); }
  /* o texto fica sempre montado (só escondido) para o tamanho do painel depender apenas do flex-grow */
  .painel-pil { position: relative; }
  .js .pilar, .js .pilar[data-oculto] { display: flex; flex-direction: column; justify-content: center; position: absolute; top: 0; bottom: 0; left: 104px; width: min(560px, 42vw); }
  .js .pilar[data-oculto] { visibility: hidden; opacity: 0; transition: opacity .3s, visibility 0s .3s; }
  .pil-cab span { transition: opacity .5s, transform .6s var(--ease); }
  .painel-pil[data-aberto] .pil-cab span { opacity: .45; }
  .pil-cab { width: 104px; flex: none; flex-direction: column; justify-content: space-between; align-items: center; padding: 28px 0; }
  .pil-cab span { flex: none; writing-mode: vertical-rl; transform: rotate(180deg); font-size: 34px; letter-spacing: -.01em; }
  .pil-cab i { order: -1; }
  .pil-cab small { order: 2; }
  .painel-pil[data-aberto] .pil-cab i { transform: none; }
  .painel-pil:not([data-aberto]):hover { background: rgba(137, 182, 175, .12); border-color: var(--agua); }
  .pilar { flex: 1; align-self: center; padding: 32px 40px 32px 8px; }
  .pilar h2 { display: block; font: 300 clamp(44px, 4vw, 68px)/1 var(--titulo); letter-spacing: -.03em; color: var(--petroleo); margin-bottom: 22px; }
  /* mesmo tamanho de texto em Visão, Missão e Valores */
  .pilar p, .pilar .valores { font: 300 16px/1.6 var(--titulo); max-width: 34em; }
  .pilar .valores { gap: 14px 26px; }
  .valores { grid-template-columns: 1fr 1fr; gap: 18px 28px; }
}

@media (min-width: 1000px) and (max-width: 1199px) { .acordeao { min-height: 790px; } .pil-foto img { min-height: 790px; } }

/* trabalho (Lumina): título e texto à esquerda, foto grande com cards de vidro à direita */
.trabalho { background: var(--off); padding: 88px var(--m); display: grid; gap: 40px; max-width: 1440px; margin: 0 auto; }
.trabalho-t { font: 300 clamp(36px, 4.6vw, 68px)/1.05 var(--titulo); letter-spacing: -.02em; color: var(--petroleo); margin: 14px 0 24px; max-width: 13ch; }
.trabalho-lead { font: 300 clamp(18px, 1.5vw, 21px)/1.6 var(--titulo); color: var(--grafite); max-width: 36em; }
.trabalho .btn { margin-top: 28px; }
.trabalho-p { margin-top: 40px; padding-top: 22px; border-top: 1px solid rgba(52, 75, 71, .16); font-size: 14.5px; color: var(--grafite); max-width: 34em; }
.trabalho-foto { position: relative; border-radius: 30px; overflow: hidden; }
.trabalho-foto img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 62% center; }
.trabalho-cards { position: absolute; left: 12px; right: 12px; bottom: 12px; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.trabalho-cards a { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 12px 12px 12px 16px; border-radius: 18px; background: rgba(30, 44, 42, .38); border: 1px solid rgba(255, 255, 255, .22); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); color: var(--branco); text-decoration: none; transition: background-color .3s; }
.trabalho-cards a:hover { background: rgba(30, 44, 42, .6); }
.trabalho-cards b { font: 500 14px/1.3 var(--titulo); }
.trabalho-cards svg { width: 30px; height: 30px; padding: 7px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .5); transform: rotate(-45deg); transition: transform .4s var(--ease), background-color .3s; }
.trabalho-cards a:hover svg { transform: none; background: var(--branco); color: var(--petroleo); }
@media (min-width: 1000px) {
  .trabalho { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(48px, 6vw, 110px); align-items: stretch; padding: 130px var(--m); }
  .trabalho-txt { display: flex; flex-direction: column; justify-content: center; }
  .trabalho-p { margin-top: auto; }
  .trabalho-foto img { aspect-ratio: auto; height: 100%; min-height: 620px; }
  .trabalho-cards { left: 20px; right: 20px; bottom: 20px; width: min(460px, calc(100% - 40px)); }
}

/* procedimentos: cabeçalho + carrossel de cards verticais */
.procs { padding-left: 0; padding-right: 0; max-width: none; background: var(--areia); }
.procs-cab { max-width: var(--max); margin: 0 auto 48px; padding: 0 var(--m); display: grid; gap: 10px; }
@media (min-width: 900px) { .procs-cab { grid-template-columns: 1fr 1fr; gap: 80px; align-items: end; } }
.carrossel-trilho { display: flex; gap: 16px; margin: 0; padding: 0 var(--m) 8px; list-style: none; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 var(--m); scrollbar-width: none; overscroll-behavior-x: contain; }
.carrossel-trilho::-webkit-scrollbar { display: none; }
.carrossel-trilho li { flex: 0 0 min(76vw, 320px); scroll-snap-align: start; }
@media (min-width: 1320px) { .carrossel-trilho { padding-left: calc((100vw - var(--max)) / 2 + var(--m)); scroll-padding-left: calc((100vw - var(--max)) / 2 + var(--m)); } }
.card-proc { position: relative; display: block; height: 440px; border-radius: 24px; overflow: hidden; color: var(--branco); text-decoration: none; isolation: isolate; }
.card-proc img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform 1s var(--ease); }
.card-proc::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(30, 44, 42, .1) 40%, rgba(30, 44, 42, .88)); transition: opacity .5s; }
.card-proc:hover img { transform: scale(1.08); }
.card-n { position: absolute; top: 16px; left: 16px; padding: 8px 12px; border-radius: 99px; background: rgba(255, 255, 255, .22); backdrop-filter: blur(8px); font: 500 11px/1 var(--titulo); letter-spacing: .14em; }
.card-t { position: absolute; left: 20px; right: 70px; bottom: 22px; font: 400 22px/1.2 var(--titulo); }
.card-ir { position: absolute; right: 16px; bottom: 18px; width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; background: var(--branco); color: var(--petroleo); transition: transform .5s var(--ease); }
.card-proc:hover .card-ir { transform: rotate(-45deg); }
.carrossel-nav { display: flex; gap: 10px; justify-content: center; margin-top: 28px; }

.pilula { display: inline-block; width: 2.4em; height: 1.05em; object-fit: cover; border-radius: 99px; vertical-align: -.12em; margin: 0 .08em; }

/* Minimamente (Solaris): título tipográfico com fotos em pílula */
.tipo { background: var(--off); padding: 96px var(--m); overflow: hidden; }
.tipo > .contador, .tipo-t, .tipo-grade { max-width: 1320px; margin-left: auto; margin-right: auto; }
.tipo-t { display: flex; flex-direction: column; margin-top: 18px; font: 300 clamp(28px, 8.2vw, 150px)/1.02 var(--titulo); letter-spacing: -.035em; color: var(--petroleo); }
.tipo-t span { display: block; white-space: nowrap; }
.tipo-t .l2 { color: var(--agua-escura); padding-left: 8%; }
.tipo-t .l3 { text-align: right; }
.tipo-t .pilula { width: 2.1em; height: .82em; vertical-align: -.02em; }
.tipo-grade { display: grid; gap: 28px; margin-top: 48px; }
.tipo-card { position: relative; display: block; border-radius: 26px; overflow: hidden; color: var(--branco); text-decoration: none; }
.tipo-card img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; transition: transform 1s var(--ease); }
.tipo-card:hover img { transform: scale(1.06); }
.tipo-card span { position: absolute; left: 14px; right: 14px; bottom: 14px; display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 14px 16px; border-radius: 16px; background: rgba(52, 75, 71, .55); backdrop-filter: blur(12px); font: 500 14px/1.3 var(--titulo); }
.tipo-foto { display: none; }
@media (min-width: 1000px) {
  .tipo { padding: 140px var(--m); }
  .tipo-t { font-size: min(9.4vw, 150px); }
  .tipo-grade { grid-template-columns: 300px 1fr 280px; gap: clamp(40px, 5vw, 90px); align-items: center; margin-top: 64px; }
  .tipo-foto { display: block; border-radius: 26px; overflow: hidden; transform: translateY(-40px); }
  .tipo-foto img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; }
  .tipo-txt { max-width: 520px; }
}

/* Singolare (TERRA): foto de fundo, palavra gigante, ficha de vidro e pontos */
.terra { position: relative; color: var(--branco); overflow: hidden; isolation: isolate; background: var(--noite); }
.terra-fundo { position: absolute; inset: 0; z-index: -1; }
.terra-fundo img { width: 100%; height: 100%; object-fit: cover; }
.terra-fundo::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(14, 22, 21, .55), rgba(14, 22, 21, .25) 40%, rgba(14, 22, 21, .85)); }
.terra-in { max-width: 1440px; margin: 0 auto; padding: 88px var(--m) 56px; display: grid; gap: 36px; min-height: 760px; align-content: space-between; }
.terra .rotulo { color: var(--areia); }
.terra-t { font: 200 clamp(64px, 16vw, 250px)/.85 var(--titulo); letter-spacing: -.045em; color: var(--off); margin-top: 10px; }
.terra-ficha { margin: 0; padding: 20px 22px; border-radius: 20px; background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .22); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); font-size: 14px; line-height: 1.5; max-width: 380px; }
.terra-ficha div { display: flex; gap: 6px; flex-wrap: wrap; }
.terra-ficha dt { color: rgba(255, 255, 255, .7); }
.terra-ficha dd { margin: 0; font-weight: 500; color: var(--branco); }
.terra-colunas { display: grid; gap: 18px; font-size: 15px; line-height: 1.6; color: rgba(255, 255, 255, .85); }
.terra-colunas .btn { margin-top: 6px; justify-self: start; }
.ponto { position: absolute; z-index: 1; width: 14px; height: 14px; border-radius: 50%; background: var(--branco); box-shadow: 0 0 0 6px rgba(255, 255, 255, .25); }
.ponto::after { content: ''; position: absolute; inset: -6px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .6); animation: pulso 2.8s ease-out infinite; }
.ponto { display: none; }
@media (min-width: 1000px) {
  .terra-in { min-height: 100svh; grid-template-columns: 1fr 1fr; grid-template-rows: auto 1fr auto; padding-top: 120px; }
  .terra-topo { grid-column: 1 / -1; }
  .terra-t { font-size: min(17vw, 260px); }
  .terra-ficha { grid-column: 1; grid-row: 3; align-self: end; }
  .terra-colunas { grid-column: 2; grid-row: 3; grid-template-columns: 1fr 1fr; gap: 28px; font-size: 14.5px; }
  .terra-colunas .btn { grid-column: 1 / -1; }
  .ponto { display: block; }
  .p1 { left: 62%; top: 34%; } .p2 { left: 28%; top: 50%; } .p3 { left: 80%; top: 55%; }
}
.js .terra-fundo img { transform: scale(1.12); transition: transform 2.4s var(--ease); }
.js .terra.in .terra-fundo img { transform: none; }

/* faixa de agendamento (Noé): foto escura, título centralizado e lista */
.reserva { position: relative; color: var(--branco); text-align: center; overflow: hidden; isolation: isolate; }
.reserva-fundo { position: absolute; inset: 0; z-index: -1; }
.reserva-fundo img { width: 100%; height: 100%; object-fit: cover; object-position: center 30%; }
.reserva-fundo::after { content: ''; position: absolute; inset: 0; background: rgba(20, 30, 28, .72); }
.reserva-in { max-width: 900px; margin: 0 auto; padding: 110px var(--m); display: flex; flex-direction: column; align-items: center; }
.reserva-t { font: 200 clamp(42px, 8vw, 110px)/1 var(--titulo); text-transform: uppercase; letter-spacing: .02em; }
.reserva-lista { list-style: none; margin: 30px 0 6px; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; font: 400 14px/1.7 var(--titulo); color: rgba(255, 255, 255, .78); }
.reserva-lista li { padding: 4px 12px; border: 1px solid rgba(255, 255, 255, .22); border-radius: 99px; font-size: 13px; }

/* rodapé escuro: chamada com a headline, colunas + mapa, redes em ícones redondos */
.rodape { background: var(--noite); color: rgba(255, 255, 255, .78); padding: 72px var(--m) 28px; font-size: 15px; }
.rodape a { text-decoration: none; }
.rodape-chamada, .rodape-grade, .rodape-pe { max-width: 1320px; margin: 0 auto; }
.rodape-chamada { display: grid; gap: 26px; padding-bottom: 48px; border-bottom: 1px solid rgba(255, 255, 255, .12); }
.rodape-frase { font: 300 clamp(30px, 4.2vw, 60px)/1.1 var(--titulo); letter-spacing: -.02em; color: var(--areia); max-width: 17ch; }
.rodape-frase span { color: var(--agua); }
.rodape-chamada .btn { margin: 0; justify-self: start; }
.rodape-grade { display: grid; gap: 40px; padding: 0 0 48px; }
.rodape-col { display: flex; flex-direction: column; align-items: flex-start; }
.rodape-logo { width: 150px; margin-bottom: 28px; }
.rodape-t { font: 500 11px/1 var(--titulo); letter-spacing: .28em; text-transform: uppercase; color: var(--agua); margin-bottom: 16px; }
.rodape-linha { display: flex; gap: 12px; align-items: flex-start; margin-top: 8px; }
.rodape-linha svg { margin-top: 4px; color: var(--agua); }
nav.rodape-col a { padding: 6px 0; background: linear-gradient(var(--agua), var(--agua)) 0 100% / 0 1px no-repeat; transition: background-size .4s var(--ease), color .3s; }
nav.rodape-col a:hover { color: var(--branco); background-size: 100% 1px; }
.rodape-mapa { border-radius: 22px; overflow: hidden; min-height: 240px; background: var(--petroleo); }
.rodape-mapa iframe { width: 100%; height: 100%; min-height: 240px; border: 0; display: block; filter: grayscale(1) invert(.9) hue-rotate(150deg) contrast(.9); }
.rodape-pe { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; padding-top: 24px; border-top: 1px solid rgba(255, 255, 255, .12); }
.sociais { display: flex; gap: 10px; margin-right: auto; }
.sociais a { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; border: 1px solid rgba(255, 255, 255, .3); transition: background-color .3s, color .3s, transform .3s var(--ease); }
.sociais a:hover { background: var(--areia); color: var(--petroleo); transform: translateY(-3px); }
.copy { font-size: 13px; color: rgba(255, 255, 255, .5); }
a.copy:hover { color: var(--branco); }
@media (min-width: 1000px) {
  .rodape { padding-top: 110px; }
  .rodape-chamada { grid-template-columns: 1fr auto; align-items: end; }
  .rodape-grade { grid-template-columns: 1.2fr .8fr 1.6fr; gap: 56px; }
}

.wa-flutuante { position: fixed; right: 20px; bottom: 20px; z-index: 40; width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center; background: #25D366; color: var(--branco); box-shadow: 0 10px 30px rgba(0, 0, 0, .25); transition: transform .4s var(--ease); }
.wa-flutuante svg { width: 30px; height: 30px; }
.wa-flutuante:hover { transform: scale(1.08); }
.wa-flutuante::before { content: ''; position: absolute; inset: 0; border-radius: 50%; border: 2px solid #25D366; animation: pulso 2.6s ease-out infinite; }
@keyframes pulso { to { transform: scale(1.6); opacity: 0; } }
.menu-aberto .wa-flutuante { opacity: 0; pointer-events: none; }

/* ---------- páginas internas ---------- */
.phero { position: relative; margin: 0; border-radius: 0; background: var(--noite); color: var(--branco); overflow: hidden; padding-top: 104px; }
.phero-foto img { width: 100%; }
.phero-txt { position: relative; padding: 28px var(--m) 52px; }
.phero .gigante { font-size: min(8.4vw, 120px); margin-top: 18px; }
.trilha { display: flex; align-items: center; gap: 10px; font: 500 12px/1 var(--titulo); letter-spacing: .16em; text-transform: uppercase; color: rgba(255, 255, 255, .7); }
.trilha a { text-decoration: none; }
.trilha a:hover { color: var(--branco); }
.trilha svg { width: 16px; color: var(--agua); }
@media (min-width: 900px) {
  .phero { min-height: 78svh; display: grid; align-content: end; padding: 0; }
  .phero-foto { position: absolute; inset: 96px 0 0; overflow: hidden; }
  .phero-foto img { height: 100%; object-fit: cover; object-position: var(--pos, center); }
  .phero::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(14, 22, 21, .55), rgba(14, 22, 21, .15) 30%, rgba(14, 22, 21, .35) 50%, rgba(14, 22, 21, .9)); }
  .phero-txt { z-index: 1; width: 100%; max-width: var(--max); margin: 0 auto; padding-bottom: 64px; }
}
.js .phero-foto img { animation: heroZoom 2s var(--ease) both; }
.phero-foto { overflow: hidden; }
@media (min-width: 900px) { .phero-foto { margin: 0; border-radius: 0; } .phero::after { inset: 96px 0 0 !important; } }
.js .phero-txt > * { animation: subir 1.1s .2s var(--ease) both; }
.js .phero-txt > .gigante { animation-delay: .35s; }

.credenciais { background: var(--noite); padding: 72px var(--m); display: grid; gap: 18px; }
.credencial { max-width: 420px; padding: 32px 28px; border-radius: 24px; background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .12); color: var(--branco); transition: transform .5s var(--ease), background-color .4s; }
.credencial:hover { transform: translateY(-6px); background: rgba(137, 182, 175, .12); }
.credencial img { width: 64px; margin-bottom: 22px; }
.credencial h2 { font: 400 24px/1.2 var(--titulo); color: var(--agua); margin-bottom: 8px; }
.credencial p { color: rgba(255, 255, 255, .78); font-size: 15.5px; }
@media (min-width: 900px) { .credenciais { grid-template-columns: repeat(3, minmax(0, 360px)); justify-content: center; gap: 24px; padding: 100px var(--m); } }

.assinatura { position: relative; background: var(--noite); color: var(--branco); overflow: hidden; }
.assinatura img { width: 100%; }
.assinatura-txt { padding: 28px var(--m) 64px; }
.assinatura .gigante { font-size: clamp(40px, 12vw, 180px); }
.link-ig { display: inline-flex; align-items: center; gap: 10px; margin-top: 22px; font: 500 14px/1 var(--titulo); letter-spacing: .08em; text-decoration: none; color: var(--agua); }
@media (min-width: 900px) {
  .assinatura { min-height: 92svh; display: grid; align-content: end; }
  .assinatura figure { position: absolute; inset: 0; }
  .assinatura img { height: 100%; object-fit: cover; object-position: center 30%; }
  .assinatura::after { content: ''; position: absolute; inset: 0; background: linear-gradient(transparent 55%, rgba(14, 22, 21, .85)); }
  .assinatura-txt { position: relative; z-index: 1; width: 100%; max-width: var(--max); margin: 0 auto; }
}

/* lista de procedimentos com índice fixo */
.procs-pagina { display: grid; gap: 40px; }
.procs-pagina > * { min-width: 0; }
.indice ol { list-style: none; margin: 0; padding: 0; display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; margin-right: calc(var(--m) * -1); padding-right: var(--m); }
.indice ol::-webkit-scrollbar { display: none; }
.indice a { display: flex; gap: 8px; align-items: baseline; white-space: nowrap; padding: 10px 16px; border-radius: 99px; border: 1px solid rgba(52, 75, 71, .25); font: 400 14px/1.2 var(--titulo); text-decoration: none; color: var(--petroleo); transition: background-color .3s, color .3s; }
.indice small { font-size: 10px; letter-spacing: .14em; color: var(--agua-escura); }
.indice a.ativo, .indice a:hover { background: var(--petroleo); color: var(--branco); }
.indice a.ativo small, .indice a:hover small { color: var(--agua); }
.procs-lista { display: grid; gap: 80px; }
.proc { display: grid; gap: 28px; }
.proc figure { border-radius: var(--raio); overflow: hidden; }
.proc img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.proc .titulo { margin-bottom: 18px; }
@media (min-width: 1000px) {
  .procs-pagina { grid-template-columns: 280px 1fr; gap: 72px; align-items: start; }
  .procs-pagina.unico { grid-template-columns: 1fr; }
  .indice { position: sticky; top: 110px; }
  .indice ol { flex-direction: column; overflow: visible; margin: 0; padding: 0; gap: 4px; }
  .indice a { white-space: normal; border-color: transparent; }
  .procs-lista { gap: 120px; }
  .proc { grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
  .proc:nth-child(even) figure { order: 2; }
  .unico .proc { grid-template-columns: 6fr 5fr; }
}

/* contato */
.contato { display: grid; gap: 56px; }
.contato-foto { position: relative; border-radius: var(--raio); overflow: hidden; max-width: 480px; }
.contato-foto img { width: 100%; }
.contato-sociais { position: absolute; left: 16px; bottom: 16px; display: flex; gap: 10px; }
.contato-sociais a { width: 50px; height: 50px; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, .85); color: var(--petroleo); backdrop-filter: blur(8px); transition: transform .3s var(--ease); }
.contato-sociais a:hover { transform: translateY(-3px); }
.contato-form .texto { margin-bottom: 26px; }
form label { display: block; margin-bottom: 16px; }
form label span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
form input, form textarea { width: 100%; padding: 18px 22px; border-radius: 18px; border: 1px solid rgba(52, 75, 71, .25); background: var(--branco); font: 300 16px/1.4 var(--corpo); color: var(--tinta); transition: border-color .3s, box-shadow .3s; resize: vertical; }
form input:focus, form textarea:focus { outline: 0; border-color: var(--agua); box-shadow: 0 0 0 4px rgba(137, 182, 175, .25); }
form .btn { margin-top: 6px; }
.form-erro { color: #A4443B; font-size: 14px; margin-bottom: 8px; }
.contato-dados { margin-top: 40px; display: grid; gap: 12px; color: var(--grafite); }
.contato-dados p { display: flex; gap: 12px; }
.contato-dados svg { margin-top: 5px; color: var(--agua-escura); }
.contato-dados a { text-decoration: none; }
@media (min-width: 900px) { .contato { grid-template-columns: 5fr 6fr; gap: 90px; align-items: center; } }

/* card de conversa no WhatsApp (substitui o formulário) */
.zap { margin-top: 28px; max-width: 520px; padding: 18px; border-radius: 28px; background: var(--branco); box-shadow: 0 24px 60px rgba(39, 71, 66, .12); }
.zap-topo { display: flex; align-items: center; gap: 12px; padding-bottom: 16px; border-bottom: 1px solid rgba(52, 75, 71, .1); }
.zap-topo img { width: 46px; height: 46px; border-radius: 50%; object-fit: cover; object-position: center 20%; }
.zap-topo b { display: block; font: 600 15px/1.2 var(--titulo); color: var(--petroleo); }
.zap-topo span { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: #1FAF57; }
.zap-topo span::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #25D366; }
.zap-balao { position: relative; margin: 20px 0 22px auto; max-width: 88%; padding: 14px 16px; border-radius: 18px 18px 4px 18px; background: #DCF8C6; color: #1d2b22; font-size: 15.5px; line-height: 1.5; }
.zap-botao { display: flex; align-items: center; gap: 12px; padding: 16px 18px; border-radius: 18px; background: #25D366; color: var(--branco); font: 600 15px/1 var(--titulo); letter-spacing: .04em; text-decoration: none; transition: background-color .3s, transform .4s var(--ease); }
.zap-botao span { flex: 1; }
.zap-botao svg:first-child { width: 26px; height: 26px; }
.zap-botao svg:last-child { width: 32px; height: 32px; padding: 7px; border-radius: 50%; background: rgba(255, 255, 255, .22); transition: transform .4s var(--ease); }
.zap-botao:hover { background: #1FBF5B; transform: translateY(-2px); }
.zap-botao:hover svg:last-child { transform: translateX(4px); }
.contato-form .contato-dados { margin-top: 32px; }

/* política */
.legal { max-width: 860px; padding-top: 150px; }
.legal-logo { width: 130px; margin-bottom: 28px; }
.legal h2 { font: 400 24px/1.2 var(--titulo); color: var(--petroleo); margin: 48px 0 16px; }
.legal .texto { max-width: none; }

/* 404 */
.pagina-404 main { background: var(--noite); }
.erro { min-height: 80svh; display: grid; place-content: center; justify-items: start; padding: 140px var(--m) 80px; color: var(--branco); max-width: var(--max); margin: 0 auto; }
.erro .gigante { font-size: clamp(120px, 30vw, 320px); color: var(--agua); }
.erro .titulo { color: var(--branco); }

/* página Links (link na bio): foto + marca, ícones e cards grandes em degradê areia → verde-água */
.pagina-links { background: #0b0f0e; color: var(--branco); }
.links { position: relative; max-width: 500px; margin: 0 auto; min-height: 100svh; overflow: hidden; background: #0b0f0e; }
.lk-topo { position: relative; height: 440px; }
.lk-foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 2% 22%; }
.lk-topo::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, transparent 30%, rgba(11, 15, 14, .5) 60%, rgba(11, 15, 14, .75)), linear-gradient(transparent 55%, #0b0f0e); }
.lk-marca { position: absolute; z-index: 1; right: 20px; top: 64px; width: 48%; text-align: left; }
.lk-marca img { width: 120px; margin-bottom: 22px; }
.lk-marca h1 { font: 300 21px/1.25 var(--titulo); color: var(--areia); }
.lk-marca h1 span { color: var(--agua); }
.lk-sociais { position: relative; z-index: 1; margin-top: -40px; display: flex; align-items: center; gap: 12px; padding: 0 22px; }
.lk-linha { flex: 1; height: 1px; background: linear-gradient(90deg, transparent, var(--agua)); position: relative; }
.lk-linha:last-child { background: linear-gradient(90deg, var(--agua), transparent); }
.lk-linha::after { content: ''; position: absolute; top: -3px; width: 7px; height: 7px; background: var(--agua); transform: rotate(45deg); }
.lk-linha:first-child::after { right: -2px; }
.lk-linha:last-child::after { left: -2px; }
.lk-sociais a { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 12px; background: rgba(255, 255, 255, .06); border: 1px solid rgba(137, 182, 175, .45); color: var(--branco); transition: background-color .3s, transform .4s var(--ease); }
.lk-sociais a svg { width: 22px; height: 22px; }
.lk-sociais a:hover { background: var(--agua); color: var(--noite); transform: translateY(-3px); }
.lk-frase { margin: 34px auto 22px; padding: 0 30px; max-width: 26em; text-align: center; font: 300 17px/1.45 var(--titulo); color: var(--agua); text-wrap: balance; }
.lk-cards { position: relative; z-index: 3; display: grid; gap: 14px; padding: 0 22px; }
.lc { display: flex; align-items: center; gap: 16px; padding: 14px 16px 14px 14px; border-radius: 26px; background: linear-gradient(100deg, #F5F2EA 0%, #E8E4DA 45%, #BFD6D1 100%); color: var(--petroleo); text-decoration: none; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8), 0 14px 30px rgba(0, 0, 0, .3); transition: transform .45s var(--ease), box-shadow .45s; }
.lc:hover { transform: translateY(-3px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8), 0 20px 40px rgba(0, 0, 0, .4); }
.lc-ic { flex: none; display: grid; place-items: center; width: 66px; height: 66px; border-radius: 50%; background: linear-gradient(145deg, #FFFFFF, #E3EDEA); box-shadow: 0 6px 14px rgba(39, 71, 66, .18), inset 0 0 0 1px rgba(137, 182, 175, .5); color: var(--petroleo); }
.lc-ic svg { width: 28px; height: 28px; }
.lc-txt { flex: 1; min-width: 0; }
.lc-txt b { display: block; font: 500 16px/1.2 var(--titulo); letter-spacing: .06em; text-transform: uppercase; }
.lc-txt small { display: block; margin-top: 5px; font-size: 13.5px; line-height: 1.4; color: rgba(39, 71, 66, .85); }
.lc-seta { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; border: 1.5px solid rgba(255, 255, 255, .9); color: var(--petroleo); transition: transform .4s var(--ease), background-color .3s; }
.lc-seta svg { width: 18px; height: 18px; }
.lc:hover .lc-seta { transform: translateX(4px); background: var(--petroleo); color: var(--branco); border-color: var(--petroleo); }
.lk-pe { position: relative; margin-top: 10px; height: 260px; display: flex; align-items: flex-end; justify-content: center; }
.lk-pe img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .38; }
.lk-pe::before { content: ''; position: absolute; inset: 0; z-index: 1; background: linear-gradient(#0b0f0e 15%, rgba(11, 15, 14, .2) 60%, rgba(11, 15, 14, .7)); }
.lk-pe p { position: relative; z-index: 2; padding: 0 22px 22px; text-align: center; font-size: 11.5px; color: rgba(255, 255, 255, .7); }
/* celular no mesmo modelo do desktop: foto no topo e coluna centralizada, sem a foto do rodapé */
@media (max-width: 899px) {
  /* foto inteira (sem zoom), sumindo embaixo com desfoque e degradê */
  .lk-topo { height: auto; position: relative; }
  .lk-foto { position: relative; display: block; width: 100%; height: auto; -webkit-mask-image: linear-gradient(#000 58%, transparent 96%); mask-image: linear-gradient(#000 58%, transparent 96%); }
  .lk-topo::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 45%; z-index: 1; backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); -webkit-mask-image: linear-gradient(transparent, #000 70%); mask-image: linear-gradient(transparent, #000 70%); pointer-events: none; }
  .lk-topo::after { background: linear-gradient(transparent 50%, rgba(11, 15, 14, .6) 75%, #0b0f0e 98%); }
  .lk-marca { position: relative; z-index: 2; right: auto; top: auto; width: auto; margin-top: -70px; padding: 0 24px; text-align: center; }
  .lk-marca img { margin: 0 auto 16px; }
  /* headline em duas linhas: "Transformações que inspiram" / "confiança e bem-estar." */
  .lk-marca h1 { font-size: clamp(18px, 5.6vw, 24px); max-width: none; margin: 0 auto; white-space: nowrap; }
  .lk-marca h1 span { display: block; }
  .lk-sociais { margin-top: 26px; justify-content: center; }
  .lk-frase { margin: 22px auto 22px; }
  .lk-pe { height: auto; margin-top: 0; padding: 26px 0 0; }
  .lk-pe img, .lk-pe::before { display: none; }
}
@media (max-width: 380px) { .lk-marca h1 { font-size: 18px; } .lc-ic { width: 56px; height: 56px; } .lc-txt b { font-size: 14.5px; } }
/* desktop: foto ocupando a tela à esquerda e as informações em coluna à direita, sem cartão */
@media (min-width: 900px) {
  .pagina-links { background: #0b0f0e; }
  .links { max-width: none; margin: 0; min-height: 100svh; border-radius: 0; box-shadow: none; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr auto auto auto auto 1fr auto; padding: 0; }
  /* coluna de informações centralizada na metade escura da tela */
  .links > *:not(.lk-topo), .lk-topo > .lk-marca { justify-self: center; width: min(520px, calc(100% - 64px)); }
  .lk-topo { display: contents; }
  .lk-foto { position: fixed; inset: 0; z-index: 0; object-position: 12% 28%; }
  .lk-topo::after { position: fixed; z-index: 1; background: linear-gradient(90deg, transparent 28%, rgba(11, 15, 14, .6) 45%, rgba(11, 15, 14, .95) 58%, #0b0f0e 70%); }
  .lk-marca { position: relative; z-index: 2; grid-column: 2; grid-row: 2; right: auto; top: auto; width: auto; padding-top: 36px; }
  .lk-marca img { width: 116px; margin-bottom: 16px; }
  .lk-marca h1 { font-size: clamp(26px, 2vw, 34px); max-width: 16ch; }
  .lk-sociais { z-index: 2; grid-column: 2; grid-row: 3; margin-top: 22px; padding: 0; justify-content: flex-start; }
  .lk-sociais .lk-linha:first-child { display: none; }
  .lk-frase { position: relative; z-index: 2; grid-column: 2; grid-row: 4; margin: 18px 0 16px; padding: 0; text-align: left; max-width: none; }
  .lk-cards { grid-column: 2; grid-row: 5; gap: 10px; padding: 0; align-content: start; }
  .lk-pe { z-index: 2; grid-column: 2; grid-row: 7; height: auto; margin: 0; padding: 18px 0 20px; justify-content: flex-start; }
  .lk-pe img, .lk-pe::before { display: none; }
  .lk-pe p { padding: 0; text-align: left; }
}

/* entrada */
.js .lk-foto { animation: heroZoom 2.2s var(--ease) both; }
.js .lk-marca, .js .lk-sociais, .js .lk-frase { animation: subir .9s var(--ease) both; }
.js .lk-sociais { animation-delay: .15s; } .js .lk-frase { animation-delay: .25s; }
.js .lc { animation: subir .8s var(--ease) both; }
.js .lc:nth-child(1) { animation-delay: .35s; } .js .lc:nth-child(2) { animation-delay: .43s; } .js .lc:nth-child(3) { animation-delay: .51s; } .js .lc:nth-child(4) { animation-delay: .59s; }

/* ---------- revelação ao rolar ---------- */
.js .rv { opacity: 0; transform: translateY(36px); transition: opacity 1s var(--ease), transform 1.1s var(--ease); }
.js .rv.in { opacity: 1; transform: none; }
.js .cartao-incl.rv, .js .sobre-fotos.rv { transform: translateY(60px) rotate(-6deg); }
.js .sobre-fotos.rv.in { transform: none; }
.js .carrossel-trilho li { opacity: 0; transform: translateX(60px); transition: opacity .9s var(--ease), transform 1s var(--ease); }
.js .carrossel.in .carrossel-trilho li { opacity: 1; transform: none; }
.js .carrossel.in li:nth-child(2) { transition-delay: .08s; }
.js .carrossel.in li:nth-child(3) { transition-delay: .16s; }
.js .carrossel.in li:nth-child(4) { transition-delay: .24s; }
.js .carrossel.in li:nth-child(5) { transition-delay: .32s; }
.js .credencial.rv:nth-child(2) { transition-delay: .15s; }
.js .credencial.rv:nth-child(3) { transition-delay: .3s; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .js .rv, .js .carrossel-trilho li { opacity: 1 !important; transform: none !important; }
  .faixa-trilho { animation: none; }
}