/* LOOK Vila Prudente · Solidi
   Identidade extraida do book Folheto_21x21cm_v4.pdf */

:root{
  --terracota:#B5674A;
  --terracota-med:#DE8A62;
  --pessego:#F7C593;
  --pessego-claro:#FAD9B4;
  --tinta:#1E1E1E;
  --tinta-suave:#5A5A5A;
  --linha:#E6E1DD;
  --branco:#fff;
  --fundo-quente:#FBF8F6;
  --container:1240px;
  --header-h:76px;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;
  font-family:'Jost',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  color:var(--tinta);
  background:var(--branco);
  font-size:17px;
  line-height:1.7;
  font-weight:300;
  overflow-x:hidden;
}
img{max-width:100%;display:block;height:auto}
a{color:inherit;text-decoration:none}
button{font-family:inherit}

.container{width:100%;max-width:var(--container);margin-inline:auto;padding-inline:24px}

/* tipografia: caixa alta com tracking largo, como no book */
.eyebrow{
  font-size:12px;letter-spacing:.34em;text-transform:uppercase;
  color:var(--terracota);font-weight:400;margin:0 0 20px
}
h1,h2,h3{font-weight:300;margin:0;line-height:1.25}
h2{
  font-size:clamp(26px,3.4vw,40px);
  letter-spacing:.16em;text-transform:uppercase
}
h3{font-size:clamp(19px,2vw,23px);letter-spacing:.12em;text-transform:uppercase}
.lead{font-size:clamp(16px,1.5vw,18.5px);color:var(--tinta-suave);max-width:62ch}

section{padding:clamp(72px,9vw,130px) 0}
.sec-quente{background:var(--fundo-quente)}

/* faixa da fachada, fixa no scroll, antes das areas comuns */
.faixa-fachada{
  height:clamp(300px,44vh,470px);
  background-image:url('../img/fachada-1920.webp');
  background-size:cover;
  background-position:center 42%;
  background-repeat:no-repeat;
  background-attachment:fixed
}

/* blocos coloridos, assinatura grafica do book */
.blocos{display:flex;gap:9px;align-items:flex-end;height:74px;margin-bottom:34px}
.blocos i{display:block;width:26px;border-radius:1px}
.blocos i:nth-child(1){height:74px;background:var(--terracota)}
.blocos i:nth-child(2){height:48px;background:var(--terracota-med)}
.blocos i:nth-child(3){height:62px;background:var(--pessego)}
.blocos i:nth-child(4){height:34px;border:1px solid var(--terracota-med);background:transparent}

/* ---------- header ---------- */
.header{
  position:fixed;inset:0 0 auto;height:var(--header-h);z-index:60;
  display:flex;align-items:center;
  background:transparent;transition:background .35s,box-shadow .35s
}
.header.solido{background:rgba(255,255,255,.97);box-shadow:0 1px 0 var(--linha);backdrop-filter:blur(8px)}
.header .container{display:flex;align-items:center;justify-content:space-between;gap:20px}
.header .logo{height:38px;width:auto;transition:opacity .3s}
.header .logo-branco{display:block}
.header .logo-cor{display:none}
.header.solido .logo-branco{display:none}
.header.solido .logo-cor{display:block}

.btn{
  display:inline-block;padding:14px 30px;border:0;cursor:pointer;
  background:var(--terracota);color:#fff;
  font-size:12px;letter-spacing:.2em;text-transform:uppercase;font-weight:400;
  transition:background .25s,transform .25s
}
.btn:hover{background:#9d573c;transform:translateY(-1px)}
.btn-ghost{background:transparent;border:1px solid rgba(255,255,255,.85);color:#fff}
.header.solido .btn-ghost{border-color:var(--terracota);color:var(--terracota)}
.header.solido .btn-ghost:hover{background:var(--terracota);color:#fff}
/* botao secundario sobre fundo claro */
.btn-linha{background:transparent;border:1px solid var(--terracota);color:var(--terracota)}
.btn-linha:hover{background:var(--terracota);color:#fff}
/* botao secundario sobre a capa */
.btn-claro{background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.85);color:#fff;backdrop-filter:blur(3px)}
.btn-claro:hover{background:#fff;color:var(--terracota)}
/* botao unico do topo, largo e em cor cheia */
.btn-topo{
  background:var(--terracota);border:1px solid var(--terracota);color:#fff;
  min-width:376px;text-align:center
}
.btn-topo:hover{background:#9d573c;border-color:#9d573c;color:#fff}

/* ---------- hero ---------- */
.hero{
  position:relative;min-height:100svh;display:flex;align-items:flex-end;
  padding-bottom:clamp(56px,8vw,96px);color:#fff;overflow:hidden
}
.hero-bg{position:absolute;inset:0;z-index:0}
.hero-bg img{width:100%;height:100%;object-fit:cover;object-position:center 60%}
.hero-bg::after{
  content:'';position:absolute;inset:0;
  background:
    linear-gradient(101deg,rgba(20,16,14,.76) 0%,rgba(20,16,14,.62) 24%,rgba(20,16,14,.24) 52%,rgba(20,16,14,0) 76%),
    linear-gradient(180deg,rgba(20,16,14,.42) 0%,rgba(20,16,14,.10) 38%,rgba(20,16,14,.72) 100%)
}
.hero .container{position:relative;z-index:2}
.hero-logo{width:min(360px,66vw);margin-bottom:30px;filter:drop-shadow(0 2px 18px rgba(20,16,14,.55))}

/* selo do programa, canto superior direito da capa */
.hero-topo{position:absolute;left:0;right:0;top:calc(var(--header-h) + 22px);z-index:3}
.hero-topo .container{display:flex;justify-content:flex-end}
.selo-mcmv img{
  width:clamp(142px,13.5vw,182px);height:auto;display:block;
  filter:drop-shadow(0 2px 14px rgba(20,16,14,.6))
}
.hero-chamadas{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:26px}
.tag{
  padding:9px 20px;border:1px solid rgba(255,255,255,.6);
  font-size:11.5px;letter-spacing:.22em;text-transform:uppercase
}
.tag-cheia{background:var(--terracota);border-color:var(--terracota)}
.hero-frase{
  font-size:clamp(22px,3vw,34px);font-weight:200;letter-spacing:.14em;
  text-transform:uppercase;margin:0 0 32px;max-width:16ch;line-height:1.35
}
.hero-acoes{display:flex;flex-wrap:wrap;gap:14px;align-items:center}
.hero-end{font-size:13.5px;letter-spacing:.18em;text-transform:uppercase;opacity:.9;margin:22px 0 0}

/* ---------- conceito ---------- */
.conceito{display:grid;grid-template-columns:1fr 1fr;gap:clamp(36px,6vw,90px);align-items:center}
.conceito p{margin:0 0 20px}
.conceito p:last-child{margin-bottom:0}

/* ---------- plantas ---------- */
.plantas-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(24px,4vw,56px);margin-top:52px}
.planta{
  background:#fff;border:1px solid var(--linha);padding:clamp(20px,3vw,38px);text-align:center;
  display:flex;flex-direction:column
}
.planta .corpo{flex:1;display:grid;place-items:center;min-height:0}
.planta img{margin:0 auto;height:clamp(340px,42vw,540px);width:auto;object-fit:contain}
.planta .num{
  font-size:clamp(38px,5vw,58px);font-weight:300;line-height:1;
  display:inline-block;vertical-align:middle;margin-right:12px
}
.planta .rot{
  display:inline-block;vertical-align:middle;background:var(--pessego);
  padding:6px 16px;font-size:13px;letter-spacing:.2em;text-transform:uppercase
}
.planta .cab{margin-bottom:28px}
.planta .obs{font-size:12.5px;color:var(--tinta-suave);margin-top:22px;letter-spacing:.04em}

/* ---------- galeria areas comuns ---------- */
.galeria{margin-top:52px}

/* palco: mostra a imagem inteira, sem cortar */
.gal-palco{
  position:relative;margin:0;background:#EFE9E5;overflow:hidden;
  aspect-ratio:16/9;display:grid;place-items:center;cursor:zoom-in
}
.gal-palco img{
  width:100%;height:100%;object-fit:contain;display:block;
  animation:galEntra .5s cubic-bezier(.2,.7,.3,1)
}
@keyframes galEntra{from{opacity:0;transform:scale(1.012)}to{opacity:1;transform:none}}
.gal-palco figcaption{
  position:absolute;left:0;right:0;bottom:0;padding:34px 22px 16px;color:#fff;
  font-size:12px;letter-spacing:.2em;text-transform:uppercase;pointer-events:none;
  background:linear-gradient(transparent,rgba(20,16,14,.85))
}

/* carrossel de miniaturas */
.gal-carrossel{display:flex;align-items:center;gap:10px;margin-top:12px}
.gal-nav{
  flex:0 0 auto;width:38px;height:38px;padding:0;display:grid;place-items:center;
  background:var(--branco);border:1px solid var(--linha);color:var(--tinta);
  cursor:pointer;transition:background .25s,border-color .25s,color .25s
}
.gal-nav svg{width:20px;height:20px}
.gal-nav:hover{background:var(--terracota);border-color:var(--terracota);color:#fff}
.gal-nav[disabled]{opacity:.3;cursor:default}
.gal-nav[disabled]:hover{background:var(--branco);border-color:var(--linha);color:var(--tinta)}

.gal-thumbs{
  flex:1 1 auto;min-width:0;display:flex;gap:10px;margin:0;padding:2px;list-style:none;
  overflow-x:auto;scroll-behavior:smooth;scroll-snap-type:x proximity;
  scrollbar-width:none;-ms-overflow-style:none
}
.gal-thumbs::-webkit-scrollbar{display:none}
.gal-thumbs li{flex:0 0 auto;scroll-snap-align:start}
.gal-thumb{
  position:relative;display:block;padding:0;border:0;background:#EFE9E5;
  width:clamp(132px,15vw,186px);cursor:pointer;overflow:hidden;
  outline:1px solid transparent;outline-offset:2px;transition:outline-color .25s
}
.gal-thumb img{
  width:100%;aspect-ratio:16/10;object-fit:cover;display:block;
  opacity:.62;transition:opacity .35s,transform .7s cubic-bezier(.2,.7,.3,1)
}
.gal-thumb span{
  position:absolute;left:0;right:0;bottom:0;padding:18px 10px 7px;color:#fff;
  font-size:10px;letter-spacing:.14em;text-transform:uppercase;text-align:left;
  background:linear-gradient(transparent,rgba(20,16,14,.8));
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis
}
.gal-thumb:hover img{opacity:.85;transform:scale(1.05)}
.gal-thumb[aria-selected="true"]{outline-color:var(--terracota)}
.gal-thumb[aria-selected="true"] img{opacity:1}
.gal-thumb:focus-visible{outline:2px solid var(--terracota);outline-offset:2px}

/* ---------- diferenciais ---------- */
.difs{display:grid;grid-template-columns:repeat(2,1fr);gap:0 clamp(30px,5vw,70px);margin-top:44px}
.difs li{
  list-style:none;display:flex;gap:16px;align-items:flex-start;
  padding:17px 0;border-bottom:1px solid var(--linha);font-size:15.5px
}
.difs li::before{
  content:'';flex:0 0 auto;width:9px;height:9px;margin-top:9px;
  background:var(--terracota-med)
}
.difs{padding:0;margin-inline:0}

/* ---------- implantacao ---------- */
.implant{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(30px,5vw,70px);align-items:center;margin-top:44px}
.legenda{display:grid;grid-template-columns:1fr 1fr;gap:2px 22px;padding:0;margin:26px 0 0}
.legenda li{list-style:none;display:flex;gap:11px;align-items:center;font-size:14px;padding:5px 0}
.legenda b{
  flex:0 0 auto;width:23px;height:23px;background:var(--terracota);color:#fff;
  display:grid;place-items:center;font-size:11.5px;font-weight:400
}

/* ---------- localizacao ---------- */
.aerea{margin-bottom:52px;border:1px solid var(--linha)}
.loc-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,5vw,64px)}

/* card de destaque do decorado */
.decorado{
  position:relative;background:var(--fundo-quente);
  border:1px solid var(--linha);border-left:4px solid var(--terracota);
  padding:clamp(24px,3vw,36px);margin-bottom:26px;
  scroll-margin-top:calc(var(--header-h) + 24px)
}
.decorado-selo{
  display:inline-block;background:var(--terracota);color:#fff;
  padding:7px 16px;font-size:11px;letter-spacing:.22em;text-transform:uppercase
}
.decorado-titulo{margin:18px 0 12px;font-size:clamp(22px,2.6vw,30px)}
.decorado-end{
  margin:0 0 26px;font-size:15.5px;letter-spacing:.06em;color:var(--tinta-suave);line-height:1.6
}
.decorado-acoes{display:flex;flex-wrap:wrap;gap:12px}
.mapa{width:100%;aspect-ratio:4/3;border:0;filter:grayscale(1) contrast(1.05);transition:filter .5s}
.mapa:hover{filter:none}
.pois{columns:2;column-gap:36px;padding:0;margin:0}
.poi-grupo{break-inside:avoid;margin-bottom:26px}
.poi-grupo h4{
  margin:0 0 10px;font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--terracota);font-weight:400
}
.poi-grupo ul{padding:0;margin:0}
.poi-grupo li{
  list-style:none;display:flex;justify-content:space-between;gap:14px;
  font-size:14.5px;padding:5px 0;border-bottom:1px dotted var(--linha)
}
.poi-grupo li span{color:var(--tinta-suave);white-space:nowrap}
.fonte{font-size:12px;color:var(--tinta-suave);margin-top:16px}

/* ---------- formulario ---------- */
.form-sec{background:var(--tinta);color:#fff}
.form-sec h2{color:#fff}
.form-sec .eyebrow{color:var(--pessego)}
.form-wrap{display:grid;grid-template-columns:1fr 1.15fr;gap:clamp(34px,6vw,80px);align-items:start}
.form-sec .lead{color:rgba(255,255,255,.7)}
.campos{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.campo{display:flex;flex-direction:column;gap:8px}
.campo.full{grid-column:1/-1}
.campo label{font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.72)}
.campo input,.campo select,.campo textarea{
  background:transparent;border:0;border-bottom:1px solid rgba(255,255,255,.28);
  color:#fff;font-family:inherit;font-size:16px;font-weight:300;
  padding:11px 2px;transition:border-color .25s
}
.campo select option{background:var(--tinta);color:#fff}
.campo textarea{resize:vertical;min-height:74px}
.campo input:focus,.campo select:focus,.campo textarea:focus{outline:0;border-bottom-color:var(--pessego)}
.campo input::placeholder,.campo textarea::placeholder{color:rgba(255,255,255,.32)}
.campo.erro input,.campo.erro select{border-bottom-color:#E06B5A}
.msg-erro{font-size:12px;color:#E9857A;display:none}
.campo.erro .msg-erro{display:block}

.consent.campo{
  grid-column:1/-1;display:flex;flex-direction:row;gap:12px;align-items:flex-start;
  font-size:13px;color:rgba(255,255,255,.66);line-height:1.6;cursor:pointer
}
.consent input{
  flex:0 0 auto;width:17px;height:17px;margin-top:3px;accent-color:var(--terracota);
  border-bottom:0;padding:0
}
.consent a{text-decoration:underline;text-underline-offset:3px}
.form-acao{grid-column:1/-1;display:flex;align-items:center;gap:20px;flex-wrap:wrap;margin-top:8px}
.form-status{font-size:14px}
.form-status.ok{color:#8FCB9B}
.form-status.falha{color:#E9857A}
button[disabled]{opacity:.55;cursor:not-allowed}

/* ---------- solidi ---------- */
.logo-solidi{width:clamp(190px,20vw,258px);height:auto;margin:20px 0 4px}
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0
}
.solidi-num{display:flex;flex-wrap:wrap;gap:clamp(28px,5vw,70px);margin-top:38px}
.solidi-num div strong{display:block;font-size:clamp(30px,4vw,44px);font-weight:300;color:var(--terracota);line-height:1.1}
.solidi-num div span{font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--tinta-suave)}

/* ---------- rodape ---------- */
.rodape{background:#141110;color:rgba(255,255,255,.62);padding:64px 0 40px;font-size:13.5px}
.rodape-topo{display:flex;justify-content:space-between;gap:34px;flex-wrap:wrap;align-items:flex-start;padding-bottom:34px;border-bottom:1px solid rgba(255,255,255,.1)}
.rodape img{height:44px;width:auto}
.rodape .logo-solidi-rodape{height:auto;width:172px;opacity:.9;transition:opacity .25s}
.rodape .logo-cia-rodape{height:auto;width:88px;opacity:.9;transition:opacity .25s}
.rodape a:hover .logo-solidi-rodape,
.rodape a:hover .logo-cia-rodape{opacity:1}
.rodape .disc{font-size:12px;line-height:1.75;margin-top:28px;color:rgba(255,255,255,.42);max-width:100%}
.rodape a:hover{color:#fff}

/* ---------- barra fixa mobile ---------- */
.barra-mob{
  position:fixed;left:0;right:0;bottom:0;z-index:70;display:none;
  padding:11px 16px calc(11px + env(safe-area-inset-bottom));
  background:rgba(255,255,255,.97);border-top:1px solid var(--linha);
  backdrop-filter:blur(8px)
}
.barra-mob .btn{display:block;width:100%;text-align:center;padding:16px}

/* ---------- lightbox ---------- */
.lightbox{
  position:fixed;inset:0;z-index:90;display:none;place-items:center;
  background:rgba(15,12,11,.94);padding:24px;cursor:zoom-out
}
.lightbox.aberto{display:grid}
.lightbox img{max-width:min(1400px,94vw);max-height:88vh;object-fit:contain}
.lightbox .fechar{position:absolute;top:20px;right:26px;color:#fff;font-size:34px;line-height:1;background:0;border:0;cursor:pointer}
.lightbox p{position:absolute;bottom:26px;left:0;right:0;text-align:center;color:#fff;font-size:12px;letter-spacing:.2em;text-transform:uppercase}

/* ---------- reveal ---------- */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .85s ease,transform .85s cubic-bezier(.2,.7,.3,1)}
.reveal.vis{opacity:1;transform:none}

/* ---------- responsivo ---------- */
@media (max-width:900px){
  .conceito,.plantas-grid,.implant,.loc-grid,.form-wrap,.difs{grid-template-columns:1fr}
  .pois{columns:1}
  .campos{grid-template-columns:1fr}
  .legenda{grid-template-columns:1fr 1fr}
  .btn-topo{min-width:min(300px,46vw)}
  /* iOS Safari nao renderiza background-attachment:fixed corretamente */
  .faixa-fachada{background-attachment:scroll;height:clamp(230px,36vh,330px)}
}
@media (max-width:640px){
  body{font-size:16px}
  .header .btn{display:none}
  .barra-mob{display:block}
  .hero-acoes .btn{width:100%;text-align:center}
  .decorado-acoes .btn{flex:1 1 100%;text-align:center}
  body{padding-bottom:78px}
  /* no mobile a altura acompanha a imagem, sem faixa vazia */
  .gal-palco{aspect-ratio:auto}
  .gal-palco img{height:auto}
  .gal-nav{display:none}
  .gal-thumbs{gap:8px}
  .gal-thumb{width:140px}
  .hero{min-height:92svh}
  .planta img{max-height:440px}
  .blocos{height:56px;margin-bottom:26px}
  .blocos i{width:20px}
  .blocos i:nth-child(1){height:56px}
  .blocos i:nth-child(2){height:36px}
  .blocos i:nth-child(3){height:46px}
  .blocos i:nth-child(4){height:26px}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .reveal{opacity:1;transform:none}
}