/* Catrini Ambientes · folha de estilo única */

@font-face { font-family: "Libre Caslon Display"; src: url("../fonts/libre-caslon-display.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Montserrat"; src: url("../fonts/montserrat.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }

:root {
  --linho: #f4efe7;
  --areia: #e8dfd2;
  --cafe: #3a2e27;
  --cafe-escuro: #241d19;
  --texto: #2e2621;
  --suave: #6f6259;
  --bronze: #9a7b5b;
  --linha: rgba(58, 46, 39, .16);
  --serif: "Libre Caslon Display", Georgia, serif;
  --sans: "Montserrat", system-ui, -apple-system, "Segoe UI", sans-serif;
  --larg: 1240px;
  --gutter: clamp(20px, 5vw, 64px);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; overflow-x: clip; }
body {
  margin: 0; background: var(--linho); color: var(--texto);
  font-family: var(--sans); font-weight: 300; font-size: 16px; line-height: 1.75;
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3 { font-family: var(--serif); font-weight: 400; line-height: 1.15; font-synthesis: none; margin: 0 0 .5em; letter-spacing: .005em; }
h1 { font-size: clamp(2.4rem, 5.4vw, 4.2rem); }
h2 { font-size: clamp(2rem, 4.2vw, 3.2rem); }
h3 { font-size: clamp(1.4rem, 2.4vw, 1.75rem); }
p { margin: 0 0 1.2em; }
em { font-style: normal; font-weight: 500; }

.sobretitulo {
  display: inline-block; font-size: .72rem; font-weight: 500; letter-spacing: .32em;
  text-transform: uppercase; color: var(--bronze); margin-bottom: 1.4rem;
}
.container { width: 100%; max-width: var(--larg); margin: 0 auto; padding: 0 var(--gutter); }
.secao { padding: clamp(80px, 12vw, 160px) 0; }
.secao--areia { background: var(--areia); }
.secao--escura { background: var(--cafe-escuro); color: var(--linho); }
.secao--escura .sobretitulo { color: #c9ad8c; }
.estreito { max-width: 720px; }
.lead { font-size: clamp(1.05rem, 1.6vw, 1.2rem); color: var(--suave); }
.secao--escura .lead { color: #cfc3b6; }

/* Botões */
.botao {
  display: inline-flex; align-items: center; gap: .7em; padding: 1.05em 2em;
  font: 500 .74rem/1 var(--sans); letter-spacing: .24em; text-transform: uppercase;
  text-decoration: none; border: 1px solid var(--cafe); color: var(--cafe); background: transparent;
  cursor: pointer; transition: background .3s, color .3s;
}
.botao:hover, .botao:focus-visible { background: var(--cafe); color: var(--linho); }
.botao--cheio { background: var(--cafe); color: var(--linho); }
.botao--cheio:hover, .botao--cheio:focus-visible { background: var(--cafe-escuro); }
.secao--escura .botao { border-color: var(--linho); color: var(--linho); }
.secao--escura .botao:hover { background: var(--linho); color: var(--cafe); }
.link-seta {
  font: 500 .74rem/1 var(--sans); letter-spacing: .24em; text-transform: uppercase;
  text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: .5em;
}

/* Cabeçalho */
.topo {
  position: sticky; top: env(safe-area-inset-top, 0px); z-index: 50; background: rgba(244, 239, 231, .94);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid transparent; transition: border-color .3s;
}
.topo.rolou { border-color: var(--linha); }
.topo .container { display: flex; align-items: center; justify-content: space-between; height: 84px; }
.marca { display: flex; flex-direction: column; align-items: center; text-decoration: none; }
.marca img { width: 138px; }
.marca span { font-size: .56rem; letter-spacing: .62em; text-transform: uppercase; color: var(--suave); margin-top: 2px; padding-left: .62em; }
.menu { display: flex; gap: clamp(20px, 3vw, 40px); list-style: none; margin: 0; padding: 0; }
.menu a {
  font-size: .72rem; font-weight: 500; letter-spacing: .2em; text-transform: uppercase;
  text-decoration: none; padding: 6px 0; border-bottom: 1px solid transparent;
}
.menu a:hover, .menu a[aria-current="page"] { border-color: var(--cafe); }
.menu-botao { display: none; }

@media (max-width: 900px) {
  .topo { backdrop-filter: none; -webkit-backdrop-filter: none; background: var(--linho); }
  .topo .container { height: 70px; }
  .marca img { width: 116px; }
  .menu-botao {
    display: grid; place-items: center; width: 44px; height: 44px; margin-right: -10px;
    background: none; border: 0; cursor: pointer; color: var(--cafe);
  }
  .menu-botao span, .menu-botao span::before, .menu-botao span::after {
    display: block; width: 24px; height: 1px; background: currentColor; position: relative; transition: transform .3s;
  }
  .menu-botao span::before, .menu-botao span::after { content: ""; position: absolute; left: 0; }
  .menu-botao span::before { top: -7px; } .menu-botao span::after { top: 7px; }
  .menu-aberto .menu-botao span { background: transparent; }
  .menu-aberto .menu-botao span::before { transform: translateY(7px) rotate(45deg); }
  .menu-aberto .menu-botao span::after { transform: translateY(-7px) rotate(-45deg); }
  .menu {
    position: fixed; inset: 70px 0 0; flex-direction: column; gap: 0; background: var(--linho);
    padding: 24px var(--gutter); transform: translateX(100%); visibility: hidden; transition: transform .35s ease, visibility .35s; height: calc(100dvh - 70px);
  }
  .menu-aberto .menu { transform: none; visibility: visible; }
  .menu-aberto { overflow: hidden; }
  .menu li { border-bottom: 1px solid var(--linha); }
  .menu a { display: block; padding: 22px 0; font-size: .8rem; border: 0; }
}

/* Abertura (home) */
.abertura { display: grid; grid-template-columns: 1fr 1fr; min-height: calc(100svh - 84px); }
.abertura__texto { display: flex; flex-direction: column; justify-content: center; padding: 64px var(--gutter); max-width: 640px; margin-left: auto; }
.abertura__texto h1 { margin-bottom: .4em; }
.abertura__texto .lead { max-width: 30em; margin-bottom: 2.4rem; }
.abertura__acoes { display: flex; flex-wrap: wrap; gap: 16px 28px; align-items: center; }
.abertura__foto { position: relative; overflow: hidden; background: var(--cafe); }
.abertura__foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.abertura__legenda {
  position: absolute; left: 24px; bottom: 20px; font-size: .68rem; letter-spacing: .22em; text-transform: uppercase;
  color: rgba(255, 255, 255, .85); text-shadow: 0 1px 8px rgba(0, 0, 0, .4);
}
@media (max-width: 900px) {
  .abertura { grid-template-columns: 1fr; min-height: 0; }
  .abertura__foto { order: -1; height: 62svh; min-height: 380px; }
  .abertura__texto { padding: 48px var(--gutter) 72px; margin: 0; }
}

/* Manifesto */
.manifesto { text-align: center; }
.manifesto p.frase { font-family: var(--serif); font-size: clamp(1.6rem, 3.4vw, 2.6rem); line-height: 1.35; max-width: 22em; margin: 0 auto 1.2em; }
.ornamento { width: 22px; margin: 0 auto 2rem; color: var(--bronze); }

/* Cabeçalho de seção */
.cabeca { display: flex; justify-content: space-between; align-items: end; gap: 24px; margin-bottom: clamp(40px, 6vw, 72px); flex-wrap: wrap; }
.cabeca h2 { margin: 0; }

/* Grade de projetos */
.projetos { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 2.4vw, 32px); }
.projetos--destaque .card:nth-child(2) { margin-top: clamp(0px, 6vw, 96px); }
.card { display: block; text-decoration: none; cursor: pointer; background: none; border: 0; padding: 0; text-align: left; color: inherit; font: inherit; }
.card__foto { overflow: hidden; aspect-ratio: 4 / 5; background: var(--areia); }
.card__foto img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s cubic-bezier(.2, .7, .2, 1); }
.card:hover .card__foto img, .card:focus-visible .card__foto img { transform: scale(1.04); }
.card__info { padding-top: 18px; }
.card__ambiente { font-size: .66rem; letter-spacing: .28em; text-transform: uppercase; color: var(--bronze); }
.card__titulo { font-family: var(--serif); font-size: 1.55rem; line-height: 1.2; margin-top: 4px; }
@media (max-width: 900px) {
  .projetos { grid-template-columns: 1fr 1fr; }
  .projetos--destaque .card:nth-child(2) { margin-top: 0; }
  .projetos--destaque .card:first-child { grid-column: span 2; }
}
@media (max-width: 560px) {
  .projetos { grid-template-columns: 1fr; }
  .projetos--destaque .card:first-child { grid-column: auto; }
  .projetos--destaque .card:nth-child(2) { margin-top: 0; }
}

/* Filtros do portfólio */
.filtros { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; margin: 0 calc(-1 * var(--gutter)) 40px; padding: 0 var(--gutter); }
.filtros::-webkit-scrollbar { display: none; }
.filtro {
  flex: none; padding: .9em 1.4em; font: 500 .68rem/1 var(--sans); letter-spacing: .2em; text-transform: uppercase;
  border: 1px solid var(--linha); background: transparent; color: var(--texto); cursor: pointer; border-radius: 40px;
}
.filtro[aria-pressed="true"] { background: var(--cafe); color: var(--linho); border-color: var(--cafe); }

/* Diferenciais */
.diferenciais { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; border-top: 1px solid var(--linha); }
.diferencial { padding: 40px 32px 8px 0; }
.diferencial + .diferencial { padding-left: 32px; border-left: 1px solid var(--linha); }
.diferencial__num { font-family: var(--serif); font-size: 1.1rem; color: var(--bronze); }
.diferencial h3 { margin: 10px 0 12px; }
.diferencial p { color: var(--suave); font-size: .95rem; }
@media (max-width: 900px) {
  .diferenciais { grid-template-columns: 1fr 1fr; }
  .diferencial:nth-child(3) { border-left: 0; padding-left: 0; }
  .diferencial:nth-child(n+3) { border-top: 1px solid var(--linha); }
}
@media (max-width: 560px) {
  .diferenciais { grid-template-columns: 1fr; }
  .diferencial, .diferencial + .diferencial { padding: 32px 0 4px; border-left: 0; }
  .diferencial + .diferencial { border-top: 1px solid var(--linha); }
}

/* Etapas */
.etapas { list-style: none; margin: 0; padding: 0; counter-reset: etapa; }
.etapa { display: grid; grid-template-columns: 120px 1fr 1.3fr; gap: 32px; padding: 40px 0; border-top: 1px solid var(--linha); counter-increment: etapa; }
.etapa:last-child { border-bottom: 1px solid var(--linha); }
.etapa::before { content: "0" counter(etapa); font-family: var(--serif); font-size: 3rem; line-height: 1; color: var(--bronze); font-weight: 300; }
.etapa h3 { margin: 0; }
.etapa p { margin: 0; color: var(--suave); }
.secao--escura .etapa { border-color: rgba(244, 239, 231, .16); }
.secao--escura .etapa p { color: #cfc3b6; }
.etapas--compactas .etapa { grid-template-columns: 80px 1fr; padding: 28px 0; }
.etapas--compactas .etapa p { grid-column: 2; }
.etapas--compactas .etapa::before { font-size: 2.2rem; }
@media (max-width: 760px) {
  .etapa { grid-template-columns: 56px 1fr; gap: 8px 20px; padding: 30px 0; }
  .etapa::before { font-size: 2rem; grid-row: span 2; }
  .etapa p { grid-column: 2; }
}

/* Duas colunas */
.duas-colunas { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 8vw, 120px); align-items: center; }
.duas-colunas--topo { align-items: start; }
@media (max-width: 900px) { .duas-colunas { grid-template-columns: 1fr; } }
.retrato { aspect-ratio: 4 / 5; overflow: hidden; background: var(--areia); }
.retrato img { width: 100%; height: 100%; object-fit: cover; }

/* Cabeçalho de página interna */
.pagina-topo { padding: clamp(64px, 10vw, 128px) 0 clamp(40px, 6vw, 64px); }
.pagina-topo h1 { max-width: 14em; }

/* Bloco de chamada */
.chamada { text-align: center; }
.chamada h2 { max-width: 16em; margin: 0 auto .6em; }
.chamada .lead { max-width: 32em; margin: 0 auto 2.4rem; }

/* Formulário */
.form { display: grid; gap: 28px; }
.campo label, .campo legend { display: block; font-size: .68rem; font-weight: 500; letter-spacing: .22em; text-transform: uppercase; margin-bottom: 10px; padding: 0; }
.campo input, .campo select, .campo textarea {
  width: 100%; font: 400 1rem/1.4 var(--sans); color: var(--texto); background: transparent;
  border: 0; border-bottom: 1px solid rgba(58, 46, 39, .35); padding: 10px 0 12px; border-radius: 0; -webkit-appearance: none; appearance: none;
}
.campo select { background-image: linear-gradient(45deg, transparent 50%, var(--cafe) 50%), linear-gradient(135deg, var(--cafe) 50%, transparent 50%); background-position: calc(100% - 10px) 52%, calc(100% - 5px) 52%; background-size: 5px 5px; background-repeat: no-repeat; }
.campo input:focus, .campo select:focus, .campo textarea:focus { outline: none; border-color: var(--cafe); }
.campo fieldset { border: 0; margin: 0; padding: 0; }
.opcoes { display: flex; flex-wrap: wrap; gap: 8px; }
.opcoes label { margin: 0; position: relative; }
.campo .opcoes input { position: absolute; left: 0; top: 0; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.opcoes span {
  display: inline-block; padding: .8em 1.2em; border: 1px solid var(--linha); border-radius: 40px; cursor: pointer;
  font-size: .78rem; letter-spacing: .04em; text-transform: none; font-weight: 400; transition: all .2s;
}
.opcoes input:checked + span { background: var(--cafe); color: var(--linho); border-color: var(--cafe); }
.opcoes input:focus-visible + span { outline: 2px solid var(--bronze); outline-offset: 2px; }
.form__linha { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
@media (max-width: 560px) { .form__linha { grid-template-columns: 1fr; } }
.form__aviso { font-size: .82rem; color: var(--suave); margin: 0; }
.form__erro { color: #8a2f1d; font-size: .85rem; min-height: 1.2em; margin: 0; }

/* Contato */
.contatos { list-style: none; padding: 0; margin: 0; }
.contatos li { padding: 22px 0; border-top: 1px solid var(--linha); }
.contatos li:last-child { border-bottom: 1px solid var(--linha); }
.contatos small { display: block; font-size: .66rem; letter-spacing: .26em; text-transform: uppercase; color: var(--bronze); margin-bottom: 4px; }
.contatos a { text-decoration: none; font-family: var(--serif); font-size: 1.45rem; }

/* Texto longo (privacidade) */
.texto-longo h2 { font-size: 1.7rem; margin-top: 2.2em; }
.texto-longo li { margin-bottom: .5em; }

/* Rodapé */
.rodape { background: var(--cafe-escuro); color: #cfc3b6; padding: 88px 0 40px; font-size: .9rem; }
.rodape__grade { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 48px; }
.rodape img { width: 170px; margin-bottom: 20px; }
.rodape h4 { font: 500 .66rem/1 var(--sans); letter-spacing: .26em; text-transform: uppercase; color: #c9ad8c; margin: 0 0 20px; }
.rodape ul { list-style: none; margin: 0; padding: 0; }
.rodape li { margin-bottom: 8px; }
.rodape a { text-decoration: none; }
.rodape a:hover { color: var(--linho); }
.rodape__base { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin-top: 64px; padding-top: 28px; border-top: 1px solid rgba(244, 239, 231, .12); font-size: .76rem; color: #9d9086; }
@media (max-width: 760px) { .rodape__grade { grid-template-columns: 1fr; gap: 36px; } }

/* WhatsApp fixo */
.whats-fixo {
  position: fixed; right: calc(20px + env(safe-area-inset-right, 0px)); bottom: calc(20px + env(safe-area-inset-bottom, 0px)); z-index: 60; width: 58px; height: 58px; border-radius: 50%;
  display: grid; place-items: center; background: var(--cafe); color: var(--linho);
  box-shadow: 0 10px 30px rgba(36, 29, 25, .28); transition: transform .3s, background .3s;
}
.whats-fixo:hover { transform: translateY(-2px); background: var(--cafe-escuro); }
.whats-fixo svg { width: 26px; height: 26px; }
@media (max-width: 560px) { .whats-fixo { right: 16px; bottom: 16px; width: 54px; height: 54px; } }

/* Galeria (lightbox) */
.galeria { position: fixed; inset: 0; z-index: 100; background: #181310; color: var(--linho); display: none; flex-direction: column; }
.galeria.aberta { display: flex; }
.galeria__topo { display: flex; justify-content: space-between; align-items: center; padding: 16px 20px; gap: 16px; }
.galeria__titulo { font-family: var(--serif); font-size: 1.3rem; }
.galeria__titulo small { display: block; font-family: var(--sans); font-size: .62rem; letter-spacing: .26em; text-transform: uppercase; color: #c9ad8c; }
.galeria__palco { flex: 1; position: relative; display: flex; align-items: center; justify-content: center; min-height: 0; touch-action: pan-y; }
.galeria__img { position: absolute; inset: 0 16px; display: flex; align-items: center; justify-content: center; }
.galeria__palco img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
.galeria__ant, .galeria__prox { z-index: 1; }
.galeria__rodape { padding: 14px 20px 22px; text-align: center; font-size: .82rem; color: #cfc3b6; max-width: 640px; margin: 0 auto; }
.galeria button { background: none; border: 0; color: inherit; cursor: pointer; width: 48px; height: 48px; display: grid; place-items: center; }
.galeria button svg { width: 26px; height: 26px; }
.galeria__ant, .galeria__prox { position: absolute; top: 50%; transform: translateY(-50%); }
.galeria__ant { left: 8px; } .galeria__prox { right: 8px; }
.galeria__contador { font-size: .7rem; letter-spacing: .2em; }
@media (max-width: 560px) { .galeria__ant, .galeria__prox { display: none !important; } }

/* Aparição suave */
.revela { opacity: 0; transform: translateY(18px); transition: opacity .9s ease, transform .9s ease; }
.revela.visivel { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .revela { opacity: 1; transform: none; transition: none; } html { scroll-behavior: auto; } }

.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
:focus-visible { outline: 2px solid var(--bronze); outline-offset: 3px; }

/* ---------- Projeto 3D ---------- */
.faixa-3d .duas-colunas { align-items: center; }
.faixa-3d__imagem { position: relative; display: block; overflow: hidden; }
.faixa-3d__imagem img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform .8s ease; }
.faixa-3d__imagem:hover img { transform: scale(1.03); }
.faixa-3d__selo {
  position: absolute; left: 1rem; bottom: 1rem; padding: .45rem .8rem;
  background: rgba(36, 29, 25, .78); color: var(--linho);
  font-size: .7rem; letter-spacing: .18em; text-transform: uppercase;
}
.tres-d { padding-bottom: 3rem; }
.tres-d__palco { position: relative; height: min(78vh, 760px); min-height: 420px; background: #e9e2d8; }
.tres-d__tela, .tres-d__tela canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.tres-d__tela canvas { touch-action: none; cursor: grab; }
.tres-d__tela canvas:active { cursor: grabbing; }
.tres-d__carregando {
  position: absolute; inset: 0; display: flex; flex-direction: column; gap: 1rem;
  align-items: center; justify-content: center; color: var(--cafe);
  font-size: .75rem; letter-spacing: .18em; text-transform: uppercase; transition: opacity .6s;
}
.tres-d__carregando span { width: 32px; height: 32px; border: 1px solid var(--bronze); border-top-color: transparent; border-radius: 50%; animation: girar 1s linear infinite; }
@keyframes girar { to { transform: rotate(360deg); } }
.tres-d.pronto .tres-d__carregando { opacity: 0; pointer-events: none; }
.tres-d__dica {
  position: absolute; left: 50%; bottom: 1.2rem; transform: translateX(-50%); margin: 0;
  padding: .55rem 1rem; background: rgba(36, 29, 25, .72); color: var(--linho);
  font-size: .72rem; letter-spacing: .08em; white-space: nowrap; pointer-events: none; transition: opacity .6s;
}
.tres-d:not(.pronto) .tres-d__dica, .tres-d__dica.some { opacity: 0; }
.tres-d__aviso { position: absolute; inset: 0; display: grid; place-items: center; margin: 0; }
.tres-d__controles { display: flex; flex-wrap: wrap; gap: 1.2rem 2.5rem; padding-top: 1.5rem; padding-bottom: 1rem; }
.tres-d__grupo { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.tres-d__rotulo { width: 100%; font-size: .7rem; letter-spacing: .16em; text-transform: uppercase; color: var(--bronze); }
.tres-d__rotulo strong { font-weight: 500; color: var(--cafe); }
.tres-d__controles button {
  font: inherit; font-size: .8rem; letter-spacing: .04em; padding: .6rem 1rem; min-height: 44px;
  background: transparent; color: var(--cafe); border: 1px solid rgba(58, 46, 39, .3); cursor: pointer;
  transition: background .25s, color .25s, border-color .25s;
}
.tres-d__controles button:hover { border-color: var(--cafe); }
.tres-d__controles button[aria-pressed="true"] { background: var(--cafe); color: var(--linho); border-color: var(--cafe); }
.tres-d__controles .amostra { width: 44px; padding: 0; border-radius: 50%; background: var(--cor); border: 1px solid rgba(58, 46, 39, .25); }
.tres-d__controles .amostra[aria-pressed="true"] { background: var(--cor); box-shadow: 0 0 0 2px var(--linho), 0 0 0 3px var(--cafe); }
.tres-d__nota { font-size: .82rem; color: #7a6a5d; margin-top: .5rem; }
@media (max-width: 760px) {
  .tres-d__palco { height: 68vh; min-height: 360px; }
  .tres-d__controles { gap: 1rem; }
  .tres-d__dica { font-size: .66rem; }
}