/* 🚧 TB Architects — "Site em reconstrução" (09/11/2026). O desenho do PDF que o Lucas mandou: barra creme com a logo, a foto da casa com o
   título embaixo à esquerda e o lugar à direita, e a barra creme dos 4 contatos com a seta e as divisórias em verde-oliva.
   Cores medidas no PDF: creme #f5ecde · texto #2a2722 · oliva #746a2f. Letra: Montserrat (a do PDF). */
:root{
  --creme:#f5ecde; --creme2:#ece0cb; --tinta:#2a2722; --oliva:#746a2f;
  --barra:clamp(58px,8.8vh,84px); --borda:clamp(20px,3.6vw,60px);
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{background:var(--creme);color:var(--tinta);font-family:Montserrat,"Segoe UI",Helvetica,Arial,sans-serif;
  display:flex;flex-direction:column;min-height:100vh;min-height:100svh;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}

/* ---- topo ---- */
.topo{flex:none;height:var(--barra);display:flex;align-items:center;padding:0 var(--borda);background:var(--creme)}
.logo{display:block;height:clamp(26px,3.6vh,40px);width:auto}

/* ---- a foto ---- */
.capa{position:relative;flex:1 1 auto;min-height:360px;overflow:hidden;background:#4a5236}
.capa picture,.foto{position:absolute;inset:0;width:100%;height:100%}
.foto{display:block;object-fit:cover;object-position:50% 58%}
.capa::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to top,rgba(16,18,12,.72) 0%,rgba(16,18,12,.4) 27%,rgba(16,18,12,0) 54%)}
.texto{position:absolute;z-index:1;left:var(--borda);right:var(--borda);bottom:clamp(28px,7.5vh,92px);color:#fff;text-shadow:0 2px 22px rgba(0,0,0,.32)}
h1{font-weight:400;font-size:clamp(34px,4.7vw,78px);line-height:1.04;letter-spacing:-.012em}
.texto p{margin-top:.55em;font-weight:400;font-size:clamp(16px,1.7vw,28px);line-height:1.35;max-width:36em}
.lugar{position:absolute;z-index:1;right:var(--borda);bottom:clamp(30px,7.8vh,96px);color:#fff;font-weight:500;
  font-size:clamp(10px,.9vw,14px);letter-spacing:.22em;text-transform:uppercase;text-shadow:0 1px 12px rgba(0,0,0,.45)}

/* ---- os contatos ---- */
.contatos{flex:none;display:grid;grid-template-columns:repeat(4,1fr);background:var(--creme);min-height:var(--barra)}
.contatos a{position:relative;display:flex;align-items:center;justify-content:center;gap:clamp(14px,2.4vw,40px);
  padding:14px 12px;color:var(--tinta);text-decoration:none;font-size:clamp(14px,1.3vw,21px);transition:background-color .2s ease}
.contatos a+a::before{content:"";position:absolute;left:0;top:26%;bottom:26%;width:1px;background:var(--oliva);opacity:.75}
.seta{flex:none;width:.95em;height:.95em;fill:none;stroke:var(--oliva);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;transition:transform .2s ease}
.contatos a:hover,.contatos a:focus-visible{background:var(--creme2)}
.contatos a:hover .seta,.contatos a:focus-visible .seta{transform:translate(2px,-2px)}
.contatos a:focus-visible{outline:2px solid var(--oliva);outline-offset:-5px}

/* ---- a entrada: o título sobe quando a abertura com a logo sai (abertura.js põe "solto" no <html>). Só esconde ENQUANTO a abertura está
   na tela (abrindo/veu) — sem JavaScript, ou com "reduzir movimento", o texto aparece direto. ---- */
.texto,.lugar{transition:opacity .9s ease .1s,transform .9s cubic-bezier(.2,.7,.2,1) .1s}
.abrindo .texto,.abrindo .lugar,.veu .texto,.veu .lugar{opacity:0;transform:translateY(16px)}

/* ---- celular e tablet em pé ---- */
/* um contato por linha (como no PDF: "WhatsApp · Tiago" inteiro, sem quebrar), o texto à esquerda e a seta à direita */
@media (max-width:760px){
  .contatos{grid-template-columns:1fr}
  .contatos a{justify-content:space-between;min-height:54px;padding:0 var(--borda);font-size:15px}
  .contatos a+a::before{display:none}
  .contatos a+a{border-top:1px solid rgba(116,106,47,.38)}
  .lugar{right:auto;left:var(--borda);bottom:auto;top:18px;font-size:10px}
  .texto{bottom:26px}
}
@media (max-height:640px) and (max-width:760px){ .contatos a{min-height:46px} }
@media (prefers-reduced-motion:reduce){ .texto,.lugar{transition:none} }