/* Antônia Buffet — "noite de gala art déco". Direção e tokens em ../../DESIGN.md */
@font-face { font-family: "Gloock"; src: url(/assets/fonts/gloock-400.woff2) format("woff2"); font-weight: 400; font-display: swap }
@font-face { font-family: "Albert Sans"; src: url(/assets/fonts/albert-sans.woff2) format("woff2"); font-weight: 400 600; font-display: swap }

:root {
  --tinta: oklch(0.19 0.012 60); --tinta-2: oklch(0.24 0.014 60); --tinta-3: oklch(0.30 0.016 62);
  --papel: oklch(0.965 0.014 80); --papel-2: oklch(0.925 0.02 80);
  --champanhe: oklch(0.82 0.09 78); --champanhe-forte: oklch(0.52 0.085 70);
  --folha: oklch(0.29 0.045 158);
  --claro: oklch(0.94 0.012 80); --claro-2: oklch(0.80 0.02 78); --escuro: oklch(0.22 0.012 60); --escuro-2: oklch(0.42 0.02 65);
  --display: "Gloock", "Bodoni 72", Didot, Georgia, serif; --corpo: "Albert Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --t-0: clamp(.95rem, .9rem + .2vw, 1.05rem); --t-1: clamp(1.1rem, 1rem + .5vw, 1.35rem);
  --t-2: clamp(1.6rem, 1.2rem + 1.8vw, 2.6rem); --t-3: clamp(2.3rem, 1.4rem + 4vw, 4.8rem);
  --gap: clamp(1.25rem, 1rem + 2vw, 3rem); --secao: clamp(4rem, 3rem + 6vw, 8.5rem); --borda: 1px solid color-mix(in oklch, var(--champanhe) 45%, transparent);
  --lento: 900ms; --suave: cubic-bezier(.2,.7,.2,1);
  --dms-cookies-bg: var(--tinta-2); --dms-cookies-fg: var(--claro); --dms-cookies-accent: var(--champanhe); --dms-cookies-accent-fg: var(--tinta);
}
* { box-sizing: border-box }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100% }
body { margin: 0; background: var(--tinta); color: var(--claro); font: 400 var(--t-0)/1.65 var(--corpo); overflow-x: hidden }
img { max-width: 100%; display: block; height: auto }
a { color: inherit }
h1, h2, h3 { font-family: var(--display); font-weight: 400; line-height: 1.08; letter-spacing: -.01em; margin: 0 0 .5em; text-wrap: balance }
h1 { font-size: var(--t-3) } h2 { font-size: var(--t-2) } h3 { font-size: var(--t-1) }
p { margin: 0 0 1em; text-wrap: pretty }
:focus-visible { outline: 2px solid var(--champanhe); outline-offset: 3px }
.pular { position: absolute; left: -999px; top: 0 } .pular:focus { left: 1rem; z-index: 99; background: var(--papel); color: var(--escuro); padding: .5rem 1rem }
.kicker { display: flex; align-items: center; gap: .75rem; font: 500 .95rem/1.2 var(--corpo); color: var(--champanhe); margin-bottom: 1rem }
.kicker::before { content: ""; width: 2.5rem; height: 1px; background: currentColor }
.cabeca .kicker { justify-content: center }
.centro { text-align: center; margin-top: 2.5rem }
.botao { display: inline-flex; align-items: center; gap: .5rem; padding: .95rem 1.6rem; background: var(--champanhe); color: var(--tinta);
  font: 600 .95rem/1 var(--corpo); letter-spacing: .02em; text-decoration: none; border: 0; border-radius: 2px; cursor: pointer;
  transition: transform .3s var(--suave), background .3s }
.botao:hover { background: var(--claro); transform: translateY(-2px) }
.link { color: var(--champanhe); text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: 2px; font-weight: 500 }
.papel .link, .papel .kicker { color: var(--champanhe-forte) }

/* leque: o fan do logo, desenhado em traço quando entra na tela */
.leque { width: 64px; height: auto; color: var(--champanhe); display: block; margin-bottom: 1.25rem }
.leque path { stroke-dasharray: 1; stroke-dashoffset: 0 }
.js .leque path { stroke-dashoffset: 1; transition: stroke-dashoffset 1.4s var(--suave) }
.js .leque path:nth-child(2), .js .leque path:nth-child(5) { transition-delay: .12s }
.js .leque path:nth-child(3), .js .leque path:nth-child(4) { transition-delay: .24s }
.js .leque path:last-child { transition-delay: .5s }
.js .visto .leque path, .js .leque.visto path { stroke-dashoffset: 0 }

/* topo: menu dividido em volta do logo, como numa fachada simétrica */
.topo { position: fixed; inset: 0 0 auto; z-index: 20; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  gap: 2rem; padding: 1.1rem clamp(1rem, 4vw, 3rem); transition: background .4s, padding .4s, border-color .4s; border-bottom: 1px solid transparent }
/* avoid-ai-design-ignore: K3 (o topo fica sobre fotos rolando) */
.topo.rolou { background: color-mix(in oklch, var(--tinta) 88%, transparent); backdrop-filter: blur(12px); padding-block: .6rem; border-color: color-mix(in oklch, var(--champanhe) 25%, transparent) }
.topo-logo img { height: 52px; width: auto; transition: height .4s }
.topo.rolou .topo-logo img { height: 40px }
.topo-nav { display: flex; gap: clamp(1rem, 2vw, 2rem); font-size: .9rem; letter-spacing: .04em }
.topo-nav a { text-decoration: none; color: var(--claro-2); position: relative; padding-block: .3rem }
.topo-nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--champanhe); transform: scaleX(0); transition: transform .4s var(--suave) }
.topo-nav a:hover, .topo-nav a[aria-current] { color: var(--claro) } .topo-nav a:hover::after, .topo-nav a[aria-current]::after { transform: scaleX(1) }
.topo-dir { justify-self: end; display: flex; align-items: center; gap: clamp(1rem, 2vw, 2rem) }
.topo-cta { color: var(--champanhe); text-decoration: none; border: var(--borda); padding: .55rem 1.1rem; font-size: .9rem; transition: background .3s, color .3s }
.topo-cta:hover { background: var(--champanhe); color: var(--tinta) }
.topo-menu { display: none; justify-self: end; background: none; border: var(--borda); color: var(--claro); font: 500 .95rem var(--corpo); padding: .55rem .9rem; cursor: pointer }
.menu { position: fixed; inset: 0; z-index: 19; background: var(--tinta); display: grid; place-content: center; text-align: center; padding: 6rem 1.5rem 2rem }
.menu[hidden] { display: none }
.menu .leque { margin: 0 auto 2rem; width: 90px } .menu nav { display: grid; gap: 1rem }
.menu nav a { font: 400 var(--t-2)/1.1 var(--display); text-decoration: none } .menu p { margin-top: 2rem; color: var(--claro-2) }

/* herói da home: colagem de fotos reais que se monta */
.heroi { min-height: min(100svh, 60rem); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: var(--gap); align-items: center;
  padding: 8rem clamp(1rem, 5vw, 5rem) 4rem; position: relative; overflow: hidden;
  background: radial-gradient(60% 70% at 85% 40%, color-mix(in oklch, var(--folha) 70%, transparent), transparent 70%), var(--tinta) }
.heroi-texto { max-width: 36rem; position: relative; z-index: 2 }
.heroi-texto > p:not(.kicker) { color: var(--claro-2); font-size: var(--t-1); line-height: 1.55 }
.acoes { display: flex; flex-wrap: wrap; align-items: center; gap: 1.25rem; margin-top: 2rem }
.colagem { position: relative; aspect-ratio: 1 / .95 }
.colagem img { position: absolute; object-fit: cover; box-shadow: 0 30px 60px -20px rgb(0 0 0 / .6) }
.colagem .c1 { inset: 12% 8% 22% 6%; width: 86%; height: 66% }
.colagem .c2 { left: 0; bottom: 0; width: 34%; aspect-ratio: 2/3; outline: 1px solid var(--champanhe); outline-offset: 8px }
.colagem .c3 { right: 0; bottom: 4%; width: 42%; aspect-ratio: 3/2 }
.colagem .c4 { right: 4%; top: 0; width: 30%; aspect-ratio: 3/2 }
.js .colagem img { clip-path: inset(100% 0 0 0); animation: abre 1.1s var(--suave) forwards }
.js .colagem .c1 { animation-delay: .1s } .js .colagem .c2 { animation-delay: .45s } .js .colagem .c3 { animation-delay: .65s } .js .colagem .c4 { animation-delay: .85s }
@keyframes abre { to { clip-path: inset(0 0 0 0) } }
@supports (animation-timeline: scroll()) {
  .colagem .c2, .colagem .c4 { animation: abre 1.1s var(--suave) forwards, sobe linear both; animation-timeline: auto, scroll(root); animation-range: normal, 0 100vh }
  @keyframes sobe { to { translate: 0 -60px } }
}

/* capa das páginas internas: foto em tela cheia sob véu */
.capa { position: relative; min-height: min(78svh, 46rem); display: grid; align-items: end; overflow: hidden; isolation: isolate }
.capa-foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2 }
.capa::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, color-mix(in oklch, var(--tinta) 55%, transparent), color-mix(in oklch, var(--tinta) 92%, transparent) 85%) }
.capa-texto { padding: 9rem clamp(1rem, 5vw, 5rem) clamp(3rem, 6vw, 5rem); max-width: 52rem }
.capa-texto > p:not(.kicker) { font-size: var(--t-1); color: var(--claro-2) }
@supports (animation-timeline: view()) {
  .capa-foto { animation: deriva linear both; animation-timeline: view(); animation-range: exit -20% exit 100% }
  @keyframes deriva { to { transform: translateY(14%) scale(1.06) } }
}

.secao { padding: var(--secao) clamp(1rem, 5vw, 5rem) }
.papel { background: var(--papel); color: var(--escuro) } .papel p { color: var(--escuro-2) } .papel h2 { color: var(--escuro) }
.tinta { background: var(--tinta-2) } .folha { background: var(--folha) }
.cabeca { max-width: 44rem; margin: 0 auto 3rem; text-align: center } .cabeca .leque { margin-inline: auto }
.estreito { max-width: 44rem; margin: 0 auto } .abre { font-size: var(--t-1); text-align: center; margin-bottom: 3rem }

/* história + números */
.historia { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: var(--gap) clamp(2rem, 6vw, 6rem); align-items: center }
.hist-foto img { width: 100%; aspect-ratio: 4/5; object-fit: cover; border-radius: 999px 999px 0 0 }
.hist-texto.largo { grid-column: 1 / -1; max-width: 46rem; margin: 0 auto }
.citacao { font: 400 var(--t-1)/1.4 var(--display); color: var(--escuro) !important; border-left: 2px solid var(--champanhe-forte); padding-left: 1.25rem }
.numeros { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; margin: 3rem 0 0; background: color-mix(in oklch, var(--champanhe-forte) 35%, transparent); border: 1px solid color-mix(in oklch, var(--champanhe-forte) 35%, transparent) }
.numeros div { background: var(--papel); padding: 2rem 1.5rem }
.numeros dt { font: 400 var(--t-3)/1 var(--display); color: var(--champanhe-forte) } .numeros dd { margin: .6rem 0 0; color: var(--escuro-2) }

/* trilho de especialidades */
.trilho { position: relative }
.trilho-faixa { display: grid; grid-auto-flow: column; grid-auto-columns: clamp(16rem, 30vw, 24rem); gap: 1.25rem; overflow-x: auto; scroll-snap-type: x mandatory;
  padding: .5rem 0 1.5rem; scrollbar-width: thin; scrollbar-color: var(--champanhe) transparent; overscroll-behavior-x: contain }
.esp { scroll-snap-align: start; position: relative; background: var(--tinta); border: var(--borda); overflow: hidden }
.esp img { width: 100%; aspect-ratio: 4/5; object-fit: cover; transition: transform .8s var(--suave) }
.esp:hover img { transform: scale(1.05) }
.esp > div { padding: 1.25rem 1.25rem 1.5rem }
.esp h3 { margin: .3rem 0 .2rem } .esp-sub { color: var(--claro-2); margin: 0 }
.trilho-setas { display: flex; justify-content: flex-end; gap: .5rem }
.trilho-setas button { width: 3rem; height: 3rem; border: var(--borda); background: none; color: var(--champanhe); font-size: 1.2rem; cursor: pointer; transition: background .3s, color .3s }
.trilho-setas button:hover { background: var(--champanhe); color: var(--tinta) }
.esp-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr)); gap: 1.5rem; max-width: 80rem; margin: 0 auto }
.papel .esp { background: var(--tinta); color: var(--claro) } .papel .esp p { color: var(--claro-2) } .papel .esp h3 { color: var(--claro) }

/* ocasiões: lista editorial com foto que aparece */
.ocasioes { list-style: none; margin: 0 auto; padding: 0; max-width: 72rem; border-top: 1px solid color-mix(in oklch, var(--escuro) 18%, transparent) }
.ocasiao a { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) 9rem; gap: 2rem; align-items: center; padding: 1.5rem 0;
  border-bottom: 1px solid color-mix(in oklch, var(--escuro) 18%, transparent); text-decoration: none; color: var(--escuro) }
.oc-nome { font: 400 var(--t-2)/1.1 var(--display); transition: transform .5s var(--suave), color .3s }
.oc-txt { color: var(--escuro-2) }
.oc-foto { width: 9rem; aspect-ratio: 3/2; object-fit: cover; clip-path: inset(0 0 0 100%); transition: clip-path .6s var(--suave) }
.ocasiao a:hover .oc-nome, .ocasiao a:focus-visible .oc-nome { transform: translateX(.75rem); color: var(--champanhe-forte) }
.ocasiao a:hover .oc-foto, .ocasiao a:focus-visible .oc-foto { clip-path: inset(0 0 0 0) }

/* galeria em colunas + lupa */
.galeria { columns: 3 16rem; column-gap: 1rem; max-width: 80rem; margin: 0 auto }
.galeria a { display: block; margin-bottom: 1rem; break-inside: avoid; overflow: hidden }
.galeria img { width: 100%; transition: transform .8s var(--suave), filter .4s } .galeria a:hover img { transform: scale(1.04); filter: brightness(1.08) }
.lupa { border: 0; padding: 0; background: none; max-width: min(92vw, 80rem); max-height: 92vh } .lupa::backdrop { background: rgb(10 8 6 / .9) }
.lupa img { max-height: 88vh; width: auto; margin: auto } .lupa button { position: absolute; top: .5rem; right: .5rem; width: 2.75rem; height: 2.75rem; background: var(--tinta); color: var(--claro); border: var(--borda); font-size: 1.5rem; cursor: pointer }

/* blog */
.posts { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 18rem), 1fr)); gap: 2rem; max-width: 80rem; margin: 0 auto }
.post-card { text-decoration: none; color: inherit; display: grid; gap: .6rem; align-content: start }
.post-card img { width: 100%; aspect-ratio: 3/2; object-fit: cover; transition: transform .6s var(--suave) } .post-card:hover img { transform: translateY(-4px) }
.post-card span { font-size: .9rem; color: var(--champanhe-forte) } .post-card h3 { margin: 0 }
.artigo { max-width: 46rem; margin: 0 auto; font-size: 1.08rem }
.artigo h2 { font-size: clamp(1.4rem, 1.1rem + 1.2vw, 2rem); margin-top: 2em } .artigo h3 { margin-top: 1.6em }
.artigo img { margin: 1.5rem auto } .artigo a { color: var(--champanhe-forte) } .artigo li { margin-bottom: .4em; color: var(--escuro-2) }
.cta-post { margin: 3rem 0 0; padding: 2rem; background: var(--tinta); color: var(--claro) } .cta-post p { color: var(--claro-2) } .cta-post h2 { color: var(--claro); margin-top: 0 }

/* FAQ */
.faq details { border-bottom: 1px solid color-mix(in oklch, var(--escuro) 18%, transparent); padding: 1.1rem 0 }
.faq summary { cursor: pointer; font: 400 var(--t-1)/1.3 var(--display); color: var(--escuro); list-style: none; display: flex; justify-content: space-between; gap: 1rem }
.faq summary::after { content: "+"; color: var(--champanhe-forte); transition: transform .3s } .faq details[open] summary::after { transform: rotate(45deg) }
.faq details p { margin: .75rem 0 0 }

/* orçamento */
.orcamento { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: var(--gap) clamp(2rem, 6vw, 6rem); align-items: start }
.orc-texto > p { color: var(--claro-2); font-size: var(--t-1) }
.contatos { list-style: none; padding: 0; margin: 2rem 0 0; display: grid; gap: .8rem } .contatos a { text-decoration: none; border-bottom: 1px solid color-mix(in oklch, var(--champanhe) 40%, transparent) }
.form { display: grid; gap: 1rem; background: var(--tinta); border: var(--borda); padding: clamp(1.25rem, 3vw, 2.5rem) }
.dupla { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem }
.campo { display: grid; gap: .35rem } .campo label { font-size: .85rem; letter-spacing: .06em; color: var(--claro-2) }
.campo input, .campo select, .campo textarea { width: 100%; font: inherit; color: var(--claro); background: var(--tinta-2); border: 1px solid var(--tinta-3); border-radius: 2px; padding: .8rem .9rem; transition: border-color .3s }
.campo input:focus, .campo select:focus, .campo textarea:focus { border-color: var(--champanhe); outline: none }
.campo [aria-invalid="true"] { border-color: oklch(0.68 0.16 30) }
.campo input[type=date] { color-scheme: dark }
.armadilha { position: absolute; left: -9999px; width: 1px; height: 1px }
.form-nota { margin: 0; min-height: 1.4em; color: var(--champanhe) } .form-nota.erro { color: oklch(0.78 0.13 35) }
.form-lgpd { font-size: .85rem; color: var(--claro-2); margin: 0 }
.form .botao { justify-self: start } .form .botao[disabled] { opacity: .6; cursor: progress }

/* rodapé */
.rodape { background: var(--tinta); border-top: var(--borda); padding: 4rem clamp(1rem, 5vw, 5rem) 2rem; display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 2rem; color: var(--claro-2); font-size: .95rem }
.rodape h2 { font: 400 1.15rem var(--display); color: var(--champanhe); margin-bottom: .6rem }
.rodape a { text-decoration: none } .rodape a:hover { color: var(--claro) } .rodape-marca img { width: 150px; margin-bottom: 1rem }
.rodape-base { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; align-items: center; border-top: 1px solid var(--tinta-3); padding-top: 1.5rem; margin: 1rem 0 0; font-size: .85rem }
.dms-pref { background: none; border: 0; color: inherit; font: inherit; cursor: pointer; padding: 0; text-decoration: underline }
.assinatura { margin-left: auto }
.zap { position: fixed; right: 1rem; bottom: 1rem; z-index: 15; width: 3.4rem; height: 3.4rem; border-radius: 50%; display: grid; place-items: center;
  background: var(--champanhe); color: var(--tinta); box-shadow: 0 10px 30px -8px rgb(0 0 0 / .5); transition: transform .3s var(--suave) }
.zap svg { width: 1.7rem } .zap:hover { transform: scale(1.08) }

/* revelar ao rolar */
.js .revela { opacity: 0; transform: translateY(28px); transition: opacity var(--lento) var(--suave), transform var(--lento) var(--suave) }
.js .revela.visto { opacity: 1; transform: none }

/* tablet paisagem / notebook */
@media (max-width: 1180px) {
  .topo-nav { gap: 1rem; font-size: .85rem }
  .rodape { grid-template-columns: 1fr 1fr }
}
/* tablet retrato */
@media (max-width: 900px) {
  .topo { grid-template-columns: auto 1fr auto; gap: 1rem }
  .topo .topo-nav { display: none } .topo-logo { grid-column: 1; grid-row: 1 } .topo-dir { grid-column: 2 / -1 } .topo-menu { display: block }
  .topo-logo img { height: 44px }
  .heroi { grid-template-columns: 1fr; padding-top: 7rem; min-height: auto }
  .colagem { max-width: 40rem; width: 100%; margin: 0 auto }
  .historia, .orcamento { grid-template-columns: 1fr } .hist-foto { max-width: 30rem }
  .numeros { grid-template-columns: repeat(2, 1fr) }
  .ocasiao a { grid-template-columns: 1fr 7rem; gap: .5rem 1.25rem } .oc-txt { grid-column: 1 } .oc-foto { grid-row: 1 / span 2; grid-column: 2; width: 7rem; clip-path: none }
}
/* celular */
@media (max-width: 600px) {
  .topo-cta { display: none }
  .topo-logo img, .topo.rolou .topo-logo img { height: 38px }
  .dupla { grid-template-columns: 1fr }
  .rodape { grid-template-columns: 1fr } .assinatura { margin-left: 0 }
  .numeros div { padding: 1.25rem 1rem }
  .trilho-faixa { grid-auto-columns: 78vw }
  .colagem { aspect-ratio: 1 / 1.05 }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto }
  *, *::before, *::after { animation: none !important; transition-duration: .001s !important }
  .js .colagem img { clip-path: none } .js .revela { opacity: 1; transform: none } .js .leque path { stroke-dashoffset: 0 }
}