/* Bruno Ataíde — réplica do tema Squarespace 7.1 do brunoataide.com
   Medidas tiradas do site original a 1440 e 390 px de largura. */

:root {
  --bg: #f4f2ea;
  --fg: #184027;
  --pad: var(--margem, 3vw);
  --titulo: 'Tenor Sans', sans-serif;
  --texto: 'Pontano Sans', sans-serif;
}
@media (max-width: 767px) { :root { --pad: 6vw; } }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100vh; display: flex; flex-direction: column;
  background: var(--bg); color: var(--fg);
  font: 400 var(--tam-texto, 16px)/var(--lh-texto, 1.5) var(--texto);
  letter-spacing: var(--ls-texto, 0em);
  -webkit-font-smoothing: antialiased;
}
main { flex: 1 0 auto; }
a { color: inherit; }
img { display: block; max-width: 100%; height: auto; }
p { margin: var(--esp-par, 1rem) 0; }
strong { font-weight: 700; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Escala tipográfica do Squarespace: (v − 1) × 1,2vw + 1rem, e no celular em retrato
   (v − 1) × 1,2% de min(100vh, 900px) + 1rem. */
h1, h2, h3, h4 {
  margin: 0; font-family: var(--titulo); font-weight: 400; letter-spacing: var(--ls-tit, -0.02em);
  font-size: calc(min(calc((var(--v) - 1) * 1.2vw + 1rem),
                 max(calc((var(--v) - 1) * 19.2px + 1rem), calc(var(--v) * 1rem))) * var(--esc-tit, 1));
}
@media (max-width: 767px) and (orientation: portrait) {
  h1, h2, h3, h4 { font-size: calc(((var(--v) - 1) * .012 * min(100vh, 900px) + 1rem) * var(--esc-tit, 1)); }
}
h2 { --v: 2.8; line-height: calc(1.1136 * var(--lh-tit, 1)); }
h3 { --v: 2.2; line-height: calc(1.1424 * var(--lh-tit, 1)); }
h4 { --v: 1.6; line-height: calc(1.1712 * var(--lh-tit, 1)); }

/* ------------------------------------------------------------ cabeçalho */
.topo {
  position: absolute; top: 0; left: 0; right: 0; z-index: 20;
  display: flex; align-items: flex-start; gap: 2vw;
  padding: var(--pad);
}
.marca {
  --v: 1.5;
  font-family: var(--titulo); letter-spacing: var(--ls-tit, -0.02em); text-decoration: none; line-height: 1.2;
  font-size: min(calc((var(--v) - 1) * 1.2vw + 1rem), max(calc((var(--v) - 1) * 19.2px + 1rem), calc(var(--v) * 1rem)));
  margin-right: auto;
}
.nav { display: flex; gap: 2vw; padding-top: 1px; }
.nav a {
  text-decoration: none; padding-bottom: 2px;
  background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat;
  transition: background-size .3s ease;
}
.nav a:hover, .nav a.ativo { background-size: 100% 1px; }
.ig { display: inline-flex; width: 17px; height: 17px; }
.ig svg { width: 100%; height: 100%; fill: currentColor; }
.topo-ig { margin-left: 1vw; margin-top: 8px; margin-right: 3px; }
.topo.claro { color: var(--bg); }
/* cabeçalho fixo (Design → Cabeçalho): ganha fundo depois de rolar */
.cab-fixo .topo { position: fixed; transition: background-color .3s ease, color .3s ease; }
.cab-fixo.rolou .topo { background: var(--bg); color: var(--fg); }
.burger { display: none; }

.menu { display: none; }

@media (max-width: 799px), (pointer: coarse) and (max-width: 1024px) {
  .topo { align-items: center; padding: calc(6vw + 8px) 6vw; }
  .marca { font-size: 16px; }
  .nav, .topo-ig { display: none; }
  .burger {
    display: flex; flex-direction: column; justify-content: center; gap: 7px;
    width: 50px; height: 37px; padding: 0 3px 0 15px; margin: -10px 0;
    background: none; border: 0; cursor: pointer; color: inherit;
  }
  .burger span { display: block; height: 1px; background: currentColor; transition: transform .3s ease; }
  .menu-aberto .burger span:first-child { transform: translateY(4px) rotate(45deg); }
  .menu-aberto .burger span:last-child { transform: translateY(-4px) rotate(-45deg); }
  .menu-aberto .topo { color: var(--fg); position: fixed; }
  .menu {
    display: flex; position: fixed; inset: 0; z-index: 15; background: var(--bg);
    flex-direction: column; align-items: center; justify-content: center;
    visibility: hidden; opacity: 0;
    transition: visibility .6s cubic-bezier(.4,0,.2,1), opacity .4s cubic-bezier(.4,0,.2,1);
  }
  .menu-aberto .menu { visibility: visible; opacity: 1; }
  .menu nav { display: flex; flex-direction: column; align-items: center; }
  .menu nav a {
    text-decoration: none; text-align: center;
    font-size: calc(1.693 * .012 * min(100vh, 900px) + 1rem); line-height: 1.7;
  }
  .menu-ig { position: absolute; bottom: 42px; width: 19px; height: 19px; }
  .menu-aberto { overflow: hidden; }
}

/* ------------------------------------------------------------ rodapé */
.rodape {
  display: grid; grid-template-columns: 1fr 15vw; grid-template-rows: auto auto;
  column-gap: 3vw; padding: 4.25vw var(--pad) 4.85vw;
}
.rodape h4 { grid-column: 1; grid-row: 1 / span 2; }
.rodape-end { grid-column: 2; grid-row: 1; }
.rodape-end p { margin: 0 0 16px; }
.rodape-ig { grid-column: 2; grid-row: 2; padding-top: 24px; }
@media (max-width: 767px) {
  .rodape { display: block; padding: 78px var(--pad) 90px; }
  .rodape-ig { padding-top: 47px; }
  .rodape-end { padding-top: 48px; width: 43vw; }
}

/* ------------------------------------------------------------ animações (slide + fade, 0,45s) */
.js .rv { opacity: 0; transform: translateY(40px); transition: opacity .45s ease, transform .45s ease; }
.js .rv.in { opacity: 1; transform: none; }
.js .sem-anim .rv { opacity: 1; transform: none; transition: none; }
.js .galeria .rv { transform: scale(.85); transition-duration: .6s; }
.js .galeria .rv.in { transform: none; }
@media (prefers-reduced-motion: reduce) { .js .rv { opacity: 1; transform: none; transition: none; } }

/* ------------------------------------------------------------ home */
.pg-home { min-height: 100vh; }
.pg-home.com-menu main { flex: none; }
.banner { position: relative; height: 100vh; overflow: hidden; touch-action: pan-y; }
.banner img, .banner-fundo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; max-width: none; }
.slides { list-style: none; margin: 0; padding: 0; position: absolute; inset: 0; }
.slide {
  position: absolute; inset: 0; padding: 2%;
  display: flex; align-items: center; justify-content: center;
  transform: translateX(-100%); transition: transform .6s ease;
}
.slide.ativo { transform: none; }
.slide.depois { transform: translateX(100%); }
.slide-txt { position: relative; width: 350px; min-width: 50%; max-width: 100%; text-align: center; }
.slide h2 { --v: 3; line-height: calc(1.1136 * var(--lh-tit, 1)); }
.setas-mob { display: none; }
@media (max-width: 767px) {
  .setas-mob { display: flex; gap: 18px; position: absolute; left: 50%; bottom: 25px; transform: translateX(-50%); z-index: 2; }
  .setas-mob button { width: 40px; height: 40px; border-radius: 50%; border: 0; background: var(--fg); display: flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; }
  .setas-mob svg { width: 20px; height: 12px; fill: none; stroke: var(--bg); stroke-width: 2; }
}

/* ------------------------------------------------------------ overview (masonry 3 col, gutter 13) */
.overview { padding: calc(var(--pad) * 2 + 29.57px) var(--ov-gap, .65vw) var(--ov-gap, .65vw); }
.masonry { display: flex; gap: var(--ov-gap, .65vw); align-items: flex-start; }
.mcol { flex: 1; display: flex; flex-direction: column; gap: var(--ov-gap, .65vw); min-width: 0; }
.masonry figure { margin: 0; }
.masonry img { width: 100%; height: auto; }
.so-mob { display: none; }
@media (max-width: 767px) {
  .overview { padding: 84px var(--ov-gap, .65vw) var(--ov-gap, .65vw); }
  .so-desk { display: none; }
  .so-mob { display: flex; }
}

/* ------------------------------------------------------------ projetos (portfolio grid basic) */
.grade-projetos {
  display: grid; grid-template-columns: repeat(var(--proj-cols, 3), 1fr); column-gap: 8px; row-gap: 53px;
  padding: calc(var(--pad) * 2 + 29.57px + 47px) var(--pad) 60px;
}
.card { text-decoration: none; text-align: center; }
.card-img { overflow: hidden; aspect-ratio: var(--proj-ar, 2 / 3); }
.card-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.card:hover .card-img img { transform: scale(1.05); }
.card h3 { --v: 1.6; line-height: calc(1.2 * var(--lh-tit, 1)); margin-top: 2px; }
@media (max-width: 767px) {
  .grade-projetos { grid-template-columns: repeat(var(--proj-cols-cel, 1), 1fr); row-gap: 52px; padding-top: 97px; }
}

/* ------------------------------------------------------------ página de projeto */
.proj-titulo {
  height: 41.25vw; padding: 23.2vw var(--pad) 0; text-align: center;
}
.proj-titulo h3 { max-width: 70.3vw; margin: 0 auto; }
.abertura { height: 100vh; }
.abertura img { width: 100%; height: 100%; object-fit: cover; }
.galeria {
  display: grid; grid-template-columns: repeat(var(--gal-cols, 3), 1fr); gap: var(--gal-gap, .42vw);
  padding: var(--pad);
}
.gcel { display: block; aspect-ratio: var(--gal-ar, 2 / 3); overflow: hidden; }
.gal-orig { align-items: start; }
.gal-orig .gcel img, .galeria-mosaico .gcel img { height: auto; }
.galeria-mosaico { display: block; }
.galeria-mosaico .masonry, .galeria-mosaico .mcol { gap: var(--gal-gap, .42vw); }
.galeria-mosaico .gcel { aspect-ratio: auto; }
.gcel img { width: 100%; height: 100%; object-fit: cover; }
.com-lb .gcel { cursor: zoom-in; }
.paginacao { display: flex; justify-content: space-between; gap: 3vw; padding: var(--pad); }
.paginacao a { display: flex; align-items: center; text-decoration: none; }
.paginacao h2 { --v: 2.2; line-height: var(--lh-tit, 1); }
.pag-prox { text-align: right; }
.seta { width: 10px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.3; flex: none; }
.pag-ant .seta { margin-right: 33px; }
.pag-prox .seta { margin-left: 33px; }
@media (max-width: 767px) {
  .proj-titulo { height: 163.8vw; padding-top: 88.5vw; }
  .proj-titulo h3 { max-width: none; }
  .galeria { grid-template-columns: repeat(var(--gal-cols-cel, 2), 1fr); gap: max(2px, var(--gal-gap, .42vw)); }
  .paginacao { padding-top: 11px; padding-bottom: 11px; }
  .paginacao a { flex: 0 1 50%; }
  .pag-ant .seta { margin-right: 20px; }
  .pag-prox { justify-content: flex-end; }
  .pag-prox .seta { margin-left: 20px; }
}

.lb {
  position: fixed; inset: 0; z-index: 50; background: var(--bg);
  display: flex; align-items: center; justify-content: center;
  visibility: hidden; opacity: 0; transition: opacity .3s ease, visibility .3s;
}
.lb.aberto { visibility: visible; opacity: 1; }
.lb img { max-width: calc(100vw - 160px); max-height: calc(100vh - 80px); object-fit: contain; }
.lb button { position: absolute; background: none; border: 0; padding: 16px; cursor: pointer; color: var(--fg); }
.lb-fechar { top: 16px; right: 16px; }
.lb-fechar svg { width: 16px; height: 16px; stroke: currentColor; stroke-width: 1.3; }
.lb-ant { left: 24px; }
.lb-prox { right: 24px; }
.lb .seta { width: 14px; height: 26px; }
@media (max-width: 767px) {
  .lb img { max-width: 100vw; max-height: calc(100vh - 140px); }
  .lb-ant, .lb-prox { bottom: 20px; }
}

/* ------------------------------------------------------------ obras disponíveis */
.obras-heroi { position: relative; height: 55.6vw; overflow: hidden; }
.obras-heroi img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.obras-heroi h2 { position: absolute; left: var(--pad); top: 23.7vw; color: var(--bg); max-width: 74vw; }
.obras-cuidados {
  display: grid; grid-template-columns: 46.6vw 42.6vw; column-gap: 4.7vw;
  padding: var(--pad) var(--pad) 8vw;
}
.oc-img img { width: 100%; aspect-ratio: 671 / 1162; object-fit: cover; }
.legenda { margin: 11px 0 0; max-width: 444px; }
.oc-txt { padding-top: 2.8vw; text-align: justify; }
.oc-txt h3 { text-align: left; margin-bottom: 1rem; }
.oc-txt p:first-of-type { margin-top: 1rem; }
.obras-larga { padding: 47px var(--pad) 48px; }
.obras-larga img { width: 100%; aspect-ratio: 1354 / 951; object-fit: cover; }
.obras-galeria { padding: 0; }
.obras-galeria .masonry, .obras-galeria .mcol { gap: var(--obras-gap, 0px); }
.obras-adquirir { padding: 60px var(--pad) 93px; }
.obras-adquirir h3 { max-width: 558px; }
.obras-adquirir p { margin: 64px 0 0; max-width: 444px; }
@media (max-width: 767px) {
  .obras-heroi { height: 158.5vw; }
  .obras-heroi h2 { top: 118.5vw; max-width: none; right: var(--pad); }
  .obras-cuidados { display: flex; flex-direction: column-reverse; padding: 39vw var(--pad) 67px; }
  .oc-txt { padding-top: 0; }
  .oc-img { margin-top: 11px; }
  .oc-img img { aspect-ratio: 343 / 514; }
  .obras-larga { padding: 44px var(--pad) 40px; }
  .obras-larga img { aspect-ratio: 343 / 479; }
  .obras-adquirir { padding: 72px var(--pad) 70px; }
  .obras-adquirir p { margin-top: 29px; }
}

/* ------------------------------------------------------------ bio */
.bio-foto { padding: calc(var(--pad) * 2 + 29.57px) 26.7vw 0; }
.bio-foto img { width: 100%; aspect-ratio: 671 / 871; object-fit: cover; }
.bio-texto { padding: 48px 26.7vw 170px; }
.bio-texto p:first-child { margin-top: 0; }
.bio-texto .vazio { height: 9px; margin: 0; }
@media (max-width: 767px) {
  .bio-foto { padding: 84px var(--pad) 0; }
  .bio-foto img { aspect-ratio: 343 / 199; }
  .bio-texto { padding: 28px var(--pad) 28px; }
  .bio-texto .vazio { height: 19px; }
}

/* ------------------------------------------------------------ contato */
.contato { padding: calc(var(--pad) * 2 + 29.57px + 47px) var(--pad) 48px; }
.contato > div { max-width: 330px; }
.contato p:first-child { margin-top: 0; }
@media (max-width: 767px) {
  .contato { padding-top: 147px; }
  .contato > div { max-width: none; }
}

/* ------------------------------------------------------------ diário (posts do Instagram) */
.diario-topo { height: auto; padding: calc(var(--pad) * 2 + 29.57px + 8vw) var(--pad) 5vw; }
.diario-intro { padding: 0 26.7vw 4vw; text-align: center; }
.grade-diario {
  display: grid; grid-template-columns: repeat(var(--di-cols, 3), 1fr); column-gap: 8px; row-gap: 48px;
  padding: 0 var(--pad) 60px;
}
.diario-card { text-align: left; }
.diario-card .card-img { position: relative; aspect-ratio: var(--di-ar, 4 / 5); }
.diario-meta { margin: 12px 0 0; font-size: 13px; letter-spacing: .06em; text-transform: uppercase; }
.diario-resumo {
  margin: 6px 0 0; font-size: 15px; opacity: .85;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.play {
  position: absolute; left: 50%; top: 50%; width: 56px; height: 56px; margin: -28px 0 0 -28px;
  border-radius: 50%; background: rgba(0, 0, 0, .35); pointer-events: none;
}
.play::after {
  content: ""; position: absolute; left: 22px; top: 17px;
  border-style: solid; border-width: 11px 0 11px 17px; border-color: transparent transparent transparent #fff;
}
.diario-cab { height: auto; padding: calc(var(--pad) * 2 + 29.57px + 8vw) var(--pad) 3vw; }
.diario-cab .diario-meta { margin: 0 0 14px; }
.diario-texto { padding: 0 26.7vw 3vw; }
.diario-texto p:first-child { margin-top: 0; }
.diario-fotos { padding: var(--pad); }
.diario-fotos .masonry, .diario-fotos .mcol { gap: .42vw; }
.diario-uma { width: 60vw; margin: 0 auto; }
.diario-uma figure, .diario-fotos figure { margin: 0; }
.diario-video { position: relative; display: block; }
.diario-video .play { position: absolute; }
.diario-ig { text-align: center; margin: 0 0 2vw; font-size: 14px; }
@media (max-width: 767px) {
  .diario-topo { padding-top: 130px; }
  .diario-intro, .diario-texto { padding-left: var(--pad); padding-right: var(--pad); }
  .grade-diario { grid-template-columns: repeat(var(--di-cols-cel, 1), 1fr); row-gap: 40px; }
  .diario-cab { padding-top: 130px; }
  .diario-uma { width: auto; }
  .diario-fotos .masonry, .diario-fotos .mcol { gap: 4px; }
}