/* =============================================================================
   Ferreira & Braz Arquitetura — tema sobre o Bootstrap 5.3
   Mobile first: o estilo base vale para o celular; os @media min-width
   acrescentam para telas maiores. Nenhuma regra max-width.
   ============================================================================= */

/* ---------------------------------------------------------------- variaveis */
:root,
[data-bs-theme="dark"]{
  /* marca */
  --fb-preto:#0A0A0A;
  --fb-preto-2:#111111;
  --fb-ouro:#D9B36C;
  --fb-ouro-claro:#EBD3A4;
  --fb-texto:#EDEAE4;
  --fb-texto-2:#B4AEA5;
  --fb-texto-3:#8B857C;
  --fb-fio:rgba(237,234,228,.11);
  --fb-fio-ouro:rgba(217,179,108,.34);

  --fb-serif:"Cinzel",Georgia,"Times New Roman",serif;
  --fb-sans:"Josefin Sans","Helvetica Neue",Arial,sans-serif;

  /* Bootstrap redefinido para a marca */
  --bs-body-bg:var(--fb-preto);
  --bs-body-color:var(--fb-texto-2);
  --bs-body-font-family:var(--fb-sans);
  --bs-body-font-size:1rem;
  --bs-body-font-weight:400;
  --bs-body-line-height:1.65;
  --bs-heading-color:var(--fb-texto);
  --bs-emphasis-color:var(--fb-texto);
  --bs-border-color:var(--fb-fio);
  --bs-link-color:var(--fb-ouro);
  --bs-link-hover-color:var(--fb-ouro-claro);
  --bs-primary:#D9B36C;
  --bs-primary-rgb:217,179,108;
  --bs-focus-ring-color:rgba(217,179,108,.55);
  --bs-focus-ring-width:3px;

  /* passo de espaco proprio, alem do 0-5 do Bootstrap */
  --fb-secao:48px;
}

html{scroll-behavior:smooth;scroll-padding-top:96px}
body{-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;height:auto}
.fb-pular{
  position:fixed;top:8px;left:8px;z-index:2000;transform:translateY(-150%);
  background:var(--fb-ouro);color:#140F06;padding:12px 16px;font-weight:700;text-decoration:none;
}
.fb-pular:focus{transform:translateY(0);outline:3px solid var(--fb-texto);outline-offset:2px}

/* ---------------------------------------------------------------- tipografia */
h1,h2,.fb-serif{
  font-family:var(--fb-serif);font-weight:500;line-height:1.24;
  letter-spacing:.015em;color:var(--fb-texto);text-wrap:balance;
}
h3,h4{font-family:var(--fb-sans);font-weight:600;line-height:1.38;color:var(--fb-texto)}
h1{font-size:1.62rem}
h2{font-size:1.42rem}
h3{font-size:1.1rem}
.fb-dourado{color:var(--fb-ouro);display:block;text-wrap:balance}
.fb-olho{
  font-family:var(--fb-sans);font-size:.72rem;font-weight:600;
  letter-spacing:.18em;text-transform:uppercase;color:var(--fb-ouro);
  display:block;
}
.fb-sub{color:var(--fb-texto-2);text-wrap:pretty}
.fb-mudo{color:var(--fb-texto-3);text-wrap:balance}
.fb-secao{padding-top:var(--fb-secao);padding-bottom:var(--fb-secao)}
.fb-intro{text-align:center}
.fb-intro>div{margin-inline:auto}
.fb-fio-topo{border-top:1px solid var(--fb-fio)}
.fb-fio-base{border-bottom:1px solid var(--fb-fio)}

/* ---------------------------------------------------------------- botoes */
.btn{
  --bs-btn-font-family:var(--fb-sans);
  --bs-btn-font-size:.94rem;
  --bs-btn-font-weight:600;
  --bs-btn-border-radius:2px;
  --bs-btn-padding-y:15px;
  --bs-btn-padding-x:24px;
  min-height:56px;line-height:1.3;text-align:center;
  display:inline-flex;align-items:center;justify-content:center;
  transition:background-color .22s ease,color .22s ease,transform .22s ease,border-color .22s ease;
}
.btn-fb{
  --bs-btn-color:#140F06;--bs-btn-bg:var(--fb-ouro);--bs-btn-border-color:var(--fb-ouro);
  --bs-btn-hover-color:#140F06;--bs-btn-hover-bg:var(--fb-ouro-claro);--bs-btn-hover-border-color:var(--fb-ouro-claro);
  --bs-btn-active-bg:var(--fb-ouro-claro);--bs-btn-active-border-color:var(--fb-ouro-claro);
}
.btn-fb:hover{transform:translateY(-2px)}
.btn-fb-linha{
  --bs-btn-color:var(--fb-texto);--bs-btn-bg:transparent;--bs-btn-border-color:var(--fb-fio);
  --bs-btn-hover-color:var(--fb-ouro);--bs-btn-hover-bg:transparent;--bs-btn-hover-border-color:var(--fb-ouro);
}

/* ---------------------------------------------------------------- topo */
.fb-nav{
  background:transparent;border-bottom:1px solid transparent;
  transition:background-color .25s ease,border-color .25s ease,backdrop-filter .25s ease;
  padding-top:10px;padding-bottom:10px;
}
.fb-nav.solido{background:rgba(10,10,10,.94);backdrop-filter:blur(14px);border-bottom-color:var(--fb-fio)}
.fb-nav .container{justify-content:center!important}
.fb-nav .btn{display:none!important}
.fb-marca{display:inline-flex;align-items:center;min-height:70px}
.fb-marca img{height:70px;width:auto;max-width:min(58vw,196px);object-fit:contain}

/* ---------------------------------------------------------------- hero */
.fb-hero{padding-top:100px;text-align:center}
.fb-hero .fb-selo{margin-inline:auto}
.fb-hero-foto img{width:100%;aspect-ratio:4/3;object-fit:cover;object-position:center 55%}
.fb-selo{
  display:inline-flex;align-items:center;gap:8px;
  font-size:.82rem;color:var(--fb-texto-2);
  border:1px solid var(--fb-fio-ouro);border-radius:100px;padding:7px 15px;
}
.fb-selo b{color:var(--fb-texto);font-weight:600}
.fb-selo svg{color:var(--fb-ouro);flex:0 0 auto}

/* ---------------------------------------------------------------- numeros */
.fb-num{font-family:var(--fb-serif);font-weight:600;font-size:1.9rem;color:var(--fb-ouro);line-height:1;display:block}
.fb-num-rot{font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;color:var(--fb-texto-3);line-height:1.35}

/* ---------------------------------------------------------------- projetos */
.fb-foto{position:relative;overflow:hidden;background:var(--fb-preto-2);margin:0;height:100%}
.fb-foto > img{width:100%;height:100%;min-height:20rem;aspect-ratio:4/3;object-fit:cover;display:block;transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.fb-foto:hover > img{transform:scale(1.025)}
.fb-foto--vertical > img{aspect-ratio:4/5}
.fb-foto--quadrada > img{aspect-ratio:1/1}
.fb-foto--ampla > img{aspect-ratio:4/3}
.fb-foto--panorama > img{aspect-ratio:16/9}
.fb-deslize{font-size:.76rem;letter-spacing:.08em;text-transform:uppercase;color:var(--fb-texto-3);text-align:center}
.fb-deslize span{color:var(--fb-ouro);font-size:1rem;margin-left:4px}
.fb-galeria{
  flex-wrap:nowrap;overflow-x:auto;overscroll-behavior-inline:contain;
  scroll-snap-type:x mandatory;scroll-padding-inline:7%;padding-bottom:12px;
  scrollbar-width:none;-webkit-overflow-scrolling:touch;
}
.fb-galeria::-webkit-scrollbar{display:none}
.fb-galeria>[class*="col-"]{flex:0 0 86%;width:86%;scroll-snap-align:center}
.fb-foto figcaption{
  position:absolute;inset:auto 0 0 0;
  padding:40px 18px 16px;
  background:linear-gradient(0deg,rgba(10,10,10,.93) 12%,rgba(10,10,10,0));
  font-size:.9rem;color:var(--fb-texto);line-height:1.4;
}
.fb-foto figcaption span{
  display:block;font-size:.64rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--fb-ouro);margin-bottom:4px;
}

/* ---------------------------------------------------------------- blocos com fio */
.fb-bloco{border-top:1px solid var(--fb-fio);padding-top:20px;height:100%;text-align:center}
.fb-bloco-ouro{border-top-color:var(--fb-ouro)}
.fb-passo-n{font-family:var(--fb-serif);font-weight:600;font-size:1.35rem;color:var(--fb-texto-3);line-height:1;display:block;margin-bottom:10px}
.fb-bloco-ouro .fb-passo-n,.fb-bloco-ouro h3{color:var(--fb-ouro)}
.fb-lista{list-style:none;padding:0;margin:0}
.fb-lista{text-align:left}
.fb-lista li{display:grid;grid-template-columns:18px 1fr;gap:11px;align-items:start;font-size:.94rem;color:var(--fb-texto-2);line-height:1.55}
.fb-lista li + li{margin-top:11px}
.fb-marca-item{flex:0 0 auto;width:18px;height:18px;margin-top:4px;color:var(--fb-ouro)}
.fb-lista-nao .fb-marca-item{color:var(--fb-texto-3)}
.fb-lista-nao li{color:var(--fb-texto-3)}

/* ---------------------------------------------------------------- formulario */
.form-label{font-size:.88rem;font-weight:600;color:var(--fb-texto);margin-bottom:7px}
.form-control,.form-select{
  background-color:var(--fb-preto-2);border:1px solid #35322D;color:var(--fb-texto);
  border-radius:2px;min-height:54px;padding:15px 16px;font-size:1rem;
}
.form-control:hover,.form-select:hover{border-color:#4D4941}
.form-control:focus,.form-select:focus{
  background-color:#171410;border-color:var(--fb-ouro);color:var(--fb-texto);
  box-shadow:0 0 0 .2rem rgba(217,179,108,.18);
}
.form-control::placeholder{color:var(--fb-texto-3)}
.form-select{
  background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23D9B36C' stroke-linecap='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
  background-size:14px 11px;
}
.form-select:invalid,.form-select option[value=""]{color:var(--fb-texto-3)}
textarea.form-control{min-height:104px}
.erro{border-color:#D2685C !important;background-color:#1A1210 !important}
.fb-form-erro{display:none;color:#F0A59D;font-weight:600;text-align:center}
.fb-form-erro.ver{display:block}
.fb-ok{
  display:none;border:1px solid var(--fb-fio-ouro);border-left:2px solid var(--fb-ouro);
  padding:24px;text-align:center;
}
.fb-ok.ver{display:block}
.fb-ok h3{color:var(--fb-ouro);margin-bottom:8px}
#formulario>.container>.row>.col-12:first-child{text-align:center}

/* ---------------------------------------------------------------- faq */
.accordion{--bs-accordion-bg:transparent;--bs-accordion-border-color:var(--fb-fio);
  --bs-accordion-btn-color:var(--fb-texto);--bs-accordion-active-color:var(--fb-ouro);
  --bs-accordion-active-bg:transparent;--bs-accordion-body-color:var(--fb-texto-2);
  --bs-accordion-border-radius:0;--bs-accordion-inner-border-radius:0;
  --bs-accordion-btn-focus-box-shadow:0 0 0 3px rgba(217,179,108,.35);
  --bs-accordion-btn-padding-y:14px;--bs-accordion-btn-padding-x:0;
  --bs-accordion-body-padding-x:0;--bs-accordion-body-padding-y:0 0 20px;
}
.accordion-item{border-left:0;border-right:0;border-top:0}
.accordion-button{font-family:var(--fb-sans);font-weight:600;font-size:.98rem;min-height:56px;box-shadow:none}
.accordion-button:not(.collapsed){box-shadow:none}
.accordion-button::after{
  background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23D9B36C' stroke-width='2' stroke-linecap='round'%3e%3cpath d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
  width:1rem;height:1rem;background-size:1rem;
}
.accordion-button:not(.collapsed)::after{
  background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23D9B36C' stroke-width='2' stroke-linecap='round'%3e%3cpath d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
}
.accordion-body{padding-bottom:20px;font-size:.95rem}

/* ---------------------------------------------------------------- rodape */
.fb-rodape{border-top:1px solid var(--fb-fio);color:var(--fb-texto-2);font-size:.92rem;text-align:center;padding-bottom:92px!important}
.fb-rodape img{width:210px;max-width:72vw;display:block;margin-inline:auto}
.fb-rodape .row>div{line-height:1.7}
.fb-rodape a{color:var(--fb-texto-2);text-decoration:none;display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding-inline:8px;overflow-wrap:anywhere}
.fb-rodape a:hover{color:var(--fb-ouro)}
.fb-rodape-fim{border-top:1px solid var(--fb-fio);font-size:.84rem;color:var(--fb-texto-3);line-height:1.6}

/* ---------------------------------------------------------------- whatsapp */
.fb-zap{
  position:fixed;right:16px;bottom:16px;z-index:1040;
  width:54px;height:54px;border-radius:50%;background:#1EA952;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 8px 26px rgba(0,0,0,.5);transition:transform .22s ease,background-color .22s ease;
}
.fb-zap:hover{transform:scale(1.06);background:#178A43}

/* =========================================================================
   A PARTIR DE 576px  (sm)
   ========================================================================= */
@media(min-width:576px){
  h1{font-size:2rem}
  h2{font-size:1.7rem}
  .fb-num{font-size:2.1rem}
}

/* =========================================================================
   A PARTIR DE 768px  (md)
   ========================================================================= */
@media(min-width:768px){
  :root{--fb-secao:80px}
  body{--bs-body-font-size:1.05rem}
  h1{font-size:2.5rem}
  h2{font-size:2rem}
  h3{font-size:1.18rem}
  .fb-olho{font-size:.76rem;letter-spacing:.22em}
  .fb-nav .container{justify-content:space-between!important}
  .fb-nav .btn{display:inline-flex!important}
  .fb-intro{text-align:left}
  .fb-intro>div{margin-inline:0}
  .fb-deslize{display:none}
  .fb-galeria{flex-wrap:wrap;overflow:visible;scroll-snap-type:none;padding-bottom:0}
  .fb-galeria>[class*="col-"]{flex:0 0 auto;width:50%;scroll-snap-align:none}
  .fb-marca{min-height:78px}
  .fb-marca img{height:78px;max-width:none}
  .fb-hero{padding-top:116px;text-align:left}
  .fb-hero .fb-selo{margin-inline:0}
  .fb-foto > img{height:100%;aspect-ratio:4/3}
  .fb-rodape{text-align:left;padding-bottom:24px!important}
  .fb-rodape img{width:190px;margin-inline:0}
  .fb-rodape a{justify-content:flex-start;padding-inline:0}
  .fb-bloco{padding-top:24px;text-align:left}
  #formulario>.container>.row>.col-12:first-child{text-align:left}
  .fb-passo-n{font-size:1.5rem}
}

/* =========================================================================
   A PARTIR DE 992px  (lg)
   ========================================================================= */
@media(min-width:992px){
  :root{--fb-secao:104px}
  h1{font-size:2.45rem}
  h2{font-size:2.4rem}
  .fb-num{font-size:2.3rem}
  .fb-hero{padding-top:132px}
  .fb-hero-foto img{aspect-ratio:3/4;object-position:center}
  .fb-foto{height:100%}
  .fb-galeria>[class*="col-"]:nth-child(1),
  .fb-galeria>[class*="col-"]:nth-child(4),
  .fb-galeria>[class*="col-"]:nth-child(5){width:66.66666667%}
  .fb-galeria>[class*="col-"]:nth-child(2),
  .fb-galeria>[class*="col-"]:nth-child(3),
  .fb-galeria>[class*="col-"]:nth-child(6){width:33.33333333%}
  .fb-foto > img{height:100%;min-height:420px}
  .fb-foto figcaption{padding:48px 24px 22px;font-size:.95rem}
  .fb-num-rot{font-size:.72rem}
}

/* =========================================================================
   MOVIMENTO
   O estado escondido so vale depois que o JS confirma que consegue revelar.
   ========================================================================= */
html:not([data-anim]) [data-rev]{opacity:1 !important;transform:none !important}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;transition-duration:.01ms !important}
  html{scroll-behavior:auto}
  .btn-fb:hover,.fb-zap:hover{transform:none}
}

/* =========================================================================
   A PARTIR DE 1200px  (xl)
   ========================================================================= */
@media(min-width:1200px){
  h1{font-size:2.9rem}
  h2{font-size:2.6rem}
}