:root{
 --bg:#f5f1ea;
 --dark:#0b0b0b;
 --text:#171717;
 --muted:#716a61;
 --gold:#c9a66b;
 --gold2:#ddbd83;
 --line:#e5ddd2;
}

*{box-sizing:border-box}

html{scroll-behavior:smooth}

body{
 margin:0;
 background:#fff;
 color:var(--text);
 font-family:Arial,Helvetica,sans-serif;
}

img{
 max-width:100%;
 display:block;
}

a{
 color:inherit;
}

/* INTRO */

#fibrax-intro{
 position:fixed;
 inset:0;
 background:#080808;
 z-index:99999;
 display:flex;
 align-items:center;
 justify-content:center;
 overflow:hidden;
 transition:opacity .7s ease,visibility .7s ease;
}

#fibrax-intro.intro-finish{
 opacity:0;
 visibility:hidden;
}

.intro-center{
 text-align:center;
 color:#fff;
 position:relative;
 z-index:3;
}

.intro-symbol{
 width:90px;
 height:90px;
 margin:0 auto 22px;
 border:1px solid rgba(201,166,107,.65);
 display:flex;
 align-items:center;
 justify-content:center;
 gap:2px;
 transform:rotate(45deg);
}

.intro-symbol span{
 transform:rotate(-45deg);
 font-family:Georgia,serif;
 font-size:30px;
 color:var(--gold);
}

.intro-brand{
 display:flex;
 justify-content:center;
 gap:11px;
 font-size:31px;
 letter-spacing:8px;
 font-weight:700;
}

.intro-divider{
 width:0;
 height:1px;
 background:var(--gold);
 margin:20px auto;
 animation:introLine 1.4s .4s forwards;
}

.intro-description{
 opacity:0;
 color:#bbb;
 font-size:11px;
 letter-spacing:4px;
 animation:introFade .8s 1s forwards;
}

@keyframes introLine{
 to{width:150px}
}

@keyframes introFade{
 to{opacity:1}
}

/* TOPO */

.topbar{
 background:#080808;
 color:#ddd;
 text-align:center;
 padding:11px 20px;
 font-size:11px;
 letter-spacing:1.8px;
 font-weight:700;
}

nav{
 height:87px;
 padding:0 5vw;
 display:flex;
 align-items:center;
 justify-content:space-between;
 gap:30px;
 background:#fff;
 border-bottom:1px solid #eee8df;
 position:sticky;
 top:0;
 z-index:1000;
}

.logo{
 width:225px;
 height:auto;
}

.menu{
 display:flex;
 align-items:center;
 gap:27px;
}

.menu a{
 text-decoration:none;
 color:#161616;
 font-size:13px;
 font-weight:700;
}

.menu-toggle{
 display:none;
 width:42px;
 height:42px;
 border:0;
 background:none;
 cursor:pointer;
}

.menu-toggle span{
 display:block;
 width:25px;
 height:2px;
 background:#111;
 margin:5px auto;
}

/* HERO */

.hero{
 min-height:720px;
 position:relative;
 display:flex;
 align-items:center;
 background-size:cover;
 background-position:center;
 color:#fff;
}

.hero:before{
 content:"";
 position:absolute;
 inset:0;
 background:linear-gradient(
 90deg,
 rgba(0,0,0,.85) 0%,
 rgba(0,0,0,.58) 47%,
 rgba(0,0,0,.20) 100%
 );
}

.hero-inner{
 width:min(1180px,90%);
 margin:auto;
 position:relative;
 z-index:2;
}

.hero-label{
 color:var(--gold2);
 font-size:12px;
 letter-spacing:2.8px;
 font-weight:800;
 margin-bottom:18px;
}

.hero h1{
 max-width:760px;
 margin:0;
 font-family:Georgia,serif;
 font-weight:400;
 font-size:clamp(48px,7vw,86px);
 line-height:.98;
}

.hero p{
 max-width:650px;
 margin-top:27px;
 color:#ddd;
 line-height:1.7;
 font-size:18px;
}

.catalogo-destaque{
 display:inline-flex;
 align-items:center;
 justify-content:center;
 margin-top:28px;
 padding:15px 28px;
 border-radius:999px;
 background:var(--gold);
 color:#111;
 text-decoration:none;
 font-size:14px;
 font-weight:800;
}

/* SEÇÕES */

section{
 padding:90px 5vw;
}

.section-head{
 max-width:1180px;
 margin:0 auto 42px;
 text-align:center;
}

.section-head span{
 color:#9e7b45;
 font-size:11px;
 font-weight:800;
 letter-spacing:2.5px;
}

.section-head h2{
 margin:10px auto 13px;
 font-family:Georgia,serif;
 font-size:clamp(35px,5vw,52px);
 font-weight:400;
}

.section-head p{
 max-width:720px;
 margin:auto;
 color:var(--muted);
 line-height:1.7;
}

/* AMBIENTES */

.ambientes{
 max-width:1180px;
 margin:auto;
 display:grid;
 grid-template-columns:repeat(2,1fr);
 gap:18px;
}

.ambiente{
 min-height:430px;
 position:relative;
 overflow:hidden;
 background:#111;
}

.ambiente img{
 width:100%;
 height:100%;
 position:absolute;
 inset:0;
 object-fit:cover;
}

.ambiente:after{
 content:"";
 position:absolute;
 inset:0;
 background:linear-gradient(
 180deg,
 transparent 30%,
 rgba(0,0,0,.82) 100%
 );
}

.ambiente-content{
 position:absolute;
 z-index:2;
 left:30px;
 right:30px;
 bottom:28px;
 color:#fff;
}

.ambiente-content small{
 color:#dbc18f;
 letter-spacing:2px;
 font-weight:800;
}

.ambiente-content h3{
 margin:8px 0;
 font-family:Georgia,serif;
 font-size:31px;
 font-weight:400;
}

/* PRODUTOS */

.products{
 background:#f6f3ed;
}

.product-grid{
 max-width:1180px;
 margin:auto;
 display:grid;
 grid-template-columns:repeat(3,1fr);
 gap:20px;
}

.product{
 background:#fff;
 overflow:hidden;
}

.product img{
 width:100%;
 height:350px;
 object-fit:cover;
}

.product-body{
 padding:24px;
}

.product-body h3{
 margin:7px 0 10px;
 font-family:Georgia,serif;
 font-size:27px;
 font-weight:400;
}

.product-body p{
 color:#777067;
 line-height:1.6;
}

/* MATERIAIS */

.material-grid{
 max-width:1180px;
 margin:auto;
 display:grid;
 grid-template-columns:repeat(3,1fr);
 gap:18px;
}

.material{
 border:1px solid var(--line);
 padding:35px;
 min-height:240px;
}

/* GALERIA */

.gallery-section{
 background:#0e0e0e;
 color:#fff;
}

.gallery{
 max-width:1180px;
 margin:auto;
 display:grid;
 grid-template-columns:2fr 1fr;
 gap:15px;
 height:650px;
}

.gallery-main{
 width:100%;
 height:100%;
 object-fit:cover;
}

.gallery-column{
 display:grid;
 grid-template-rows:1fr 1fr;
 gap:15px;
}

.gallery-small{
 width:100%;
 height:100%;
 object-fit:cover;
}

/* FEATURES */

.features{
 max-width:1180px;
 margin:auto;
 display:grid;
 grid-template-columns:repeat(4,1fr);
 gap:14px;
}

.feature{
 padding:30px 25px;
 border-top:1px solid #c8aa78;
 background:#faf8f5;
}

/* CONTATO */

.info{
 background:#f6f3ed;
}

.info-grid{
 max-width:1000px;
 margin:auto;
 display:grid;
 grid-template-columns:1fr 1fr;
 gap:20px;
}

.info-card{
 background:#fff;
 padding:35px;
 border:1px solid #e5ddd2;
}

/* FINAL */

.final{
 background:#111;
 color:#fff;
 text-align:center;
 padding:100px 20px;
}

/* FOOTER */

footer{
 background:#070707;
 color:#fff;
 padding:65px 5vw 45px;
}

.footer-grid{
 max-width:1180px;
 margin:auto;
 display:grid;
 grid-template-columns:2fr 1fr 1fr;
 gap:55px;
}

footer img{
 width:230px;
 padding:7px;
 background:#fff;
}

footer a{
 display:block;
 color:#aaa;
 text-decoration:none;
 padding:5px 0;
}

/* MOBILE */

@media(max-width:800px){

 .menu-toggle{
  display:block;
 }

 .menu{
  position:absolute;
  left:0;
  right:0;
  top:75px;
  padding:25px;
  background:#fff;
  flex-direction:column;
  align-items:flex-start;
  display:none;
 }

 .menu.open{
  display:flex;
 }

 .ambientes,
 .product-grid,
 .material-grid,
 .info-grid,
 .footer-grid{
  grid-template-columns:1fr;
 }

 .gallery{
  height:auto;
  grid-template-columns:1fr;
 }

 .gallery-main{
  height:430px;
 }

 .gallery-small{
  height:300px;
 }

 .features{
  grid-template-columns:1fr 1fr;
 }

}

@media(max-width:500px){

 .features{
  grid-template-columns:1fr;
 }

 section{
  padding:70px 20px;
 }

}

/* BOTÕES FLUTUANTES FIBRAX */

.fibrax-whatsapp-float,
.fibrax-instagram-float{
    position:fixed;
    right:18px;
    z-index:9999;
    width:60px;
    height:60px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    box-shadow:0 8px 28px rgba(0,0,0,.28);
    transition:.2s ease;
}

.fibrax-whatsapp-float{
    bottom:18px;
    background:#25D366;
}

.fibrax-instagram-float{
    bottom:88px;
    background:
        radial-gradient(circle at 30% 110%,
        #ffd600 0%,
        #ff7a00 27%,
        #ff0169 52%,
        #d300c5 75%,
        #7638fa 100%);
}

.fibrax-whatsapp-float:hover,
.fibrax-instagram-float:hover{
    transform:scale(1.08);
}

.fibrax-whatsapp-float svg{
    width:34px;
    height:34px;
}

.fibrax-instagram-float svg{
    width:31px;
    height:31px;
}

@media(max-width:600px){

    .fibrax-whatsapp-float,
    .fibrax-instagram-float{
        width:56px;
        height:56px;
        right:15px;
    }

    .fibrax-whatsapp-float{
        bottom:15px;
    }

    .fibrax-instagram-float{
        bottom:81px;
    }

}