/* =========================================================
   VARIÁVEIS / BASE
   ========================================================= */

:root{
  /* PALETA */
  --ink:#0b0b0a;
  --char:#181815;
  --char-2:#22221e;
  --bone:#efede7;
  --bone-dim:#c7c4bb;
  --amber:#d4a24c;
  --amber-2:#b9793a;
  --edge:#33332d;
  --muted:#a5a29a;
  --dark-amber:#f0c469;

  --pad:clamp(20px,5vw,64px);
  --radius:4px;
  --radius-md: 18px;
  --header-height:76px;
}

*{
  margin:0;
  padding:0;
  box-sizing:border-box;
}

html{
  scroll-behavior:smooth;
}

body{
  margin:0;
  background:var(--ink);
  color:var(--bone);
  font-family:'Barlow',system-ui,sans-serif;
  font-size:17px;
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

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

a{
  color:inherit;
  text-decoration:none;
}

button,
input,
select{
  font:inherit;
}

h1,
h2,
h3{
  font-family:'Anton',Impact,sans-serif;
  font-weight:400;
  line-height:1.25;
  text-transform:uppercase;
  letter-spacing:.005em;
}

h1{
  font-size:clamp(44px,7vw,92px);
}

h2{
  font-size:clamp(32px,5vw,58px);
}

h3{
  font-size:clamp(20px,2.2vw,27px);
}

p{
  margin:0;
}

.wrap{
  max-width:1240px;
  margin:0 auto;
  padding-inline:var(--pad);
}

.eyebrow{
  font-family:'Barlow Condensed',sans-serif;
  font-size:14px;
  font-weight:700;
  letter-spacing:.28em;
  text-transform:uppercase;
  color:var(--amber);
}

.eyebrow::before{
  content:"";
  display:inline-block;
  width:22px;
  height:1px;
  background:var(--amber);
  vertical-align:middle;
  margin:0 10px 4px 0;
}

.reveal{
  opacity:0;
  transform:translateY(22px);
  transition:
    opacity .7s ease,
    transform .7s ease;
}

.reveal.in{
  opacity:1;
  transform:none;
}

/* =========================================================
   HEADER
   ========================================================= */

header.site-header{
  position:sticky;
  top:0;
  z-index:100;
  background:rgba(11,11,10,.92);
  backdrop-filter:blur(12px);
  border-bottom:1px solid var(--edge);
}

.nav{
  min-height:var(--header-height);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:28px;
}

.logo{
  font-family:'Anton',sans-serif;
  font-size:25px;
  letter-spacing:.04em;
  text-transform:uppercase;
  white-space:nowrap;
}

.logo i{
  font-style:normal;
  color:var(--amber);
}

.logo-img{height:38px;width:auto;display:block;}

.nav-actions{
  display:flex;
  align-items:center;
  gap:16px;
}

.navlinks{
  display:flex;
  gap:28px;
  align-items:center;
}

.navlinks a{
  font-family:'Barlow Condensed',sans-serif;
  font-size:14px;
  font-weight:600;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--bone-dim);
  position:relative;
  padding:8px 0;
}

.navlinks a::after{
  content:"";
  position:absolute;
  left:0;
  bottom:2px;
  width:0;
  height:2px;
  background:var(--amber);
  transition:.2s;
}

.navlinks a:hover{
  color:var(--bone);
}

.navlinks a:hover::after{
  width:100%;
}


/* =========================================================
   HAMBÚRGUER
   ========================================================= */

.burger{
  display:none;
  background:transparent;
  border:1px solid var(--edge);
  border-radius:6px;
  padding:8px 10px;
  cursor:pointer;
  flex-direction:column;
  gap:4px;
  transition:border-color .2s ease;
}

.burger span{
  display:block;
  width:20px;
  height:2px;
  background:var(--bone-dim);
  border-radius:2px;
  transition:
    background .2s ease,
    transform .2s ease;
}

.burger:hover{
  border-color:var(--amber);
}

.burger:hover span{
  background:var(--amber);
}


/* =========================================================
   BOTÕES
   ========================================================= */

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  border:0;
  border-radius:3px;
  cursor:pointer;
  font-family:'Barlow Condensed',sans-serif;
  font-weight:700;
  font-size:16px;
  letter-spacing:.12em;
  text-transform:uppercase;
  padding:15px 27px;
  transition:
    transform .18s,
    background .2s,
    border-color .2s,
    color .2s;
}

.btn:hover{
  transform:translateY(-2px);
}

.btn-primary{
  background:var(--amber);
  color:#231703;
}

.btn-primary:hover{
  background:var(--amber-2);
}

.btn-ghost{
  background:transparent;
  color:var(--bone);
  box-shadow:inset 0 0 0 1.5px rgba(239,237,231,.32);
}

.btn-ghost:hover{
  box-shadow:inset 0 0 0 1.5px var(--amber);
  color:var(--amber);
}


/* =========================================================
   HERO
   ========================================================= */

.hero{
  position:relative;
  overflow:hidden;
  border-bottom:1px solid var(--edge);
  background:
    linear-gradient(
      180deg,
      rgba(11, 11, 10, 0.82) 0%,
      rgba(11, 11, 10, 0.95) 100%
    ),
    radial-gradient(
      ellipse 750px 500px at 88% 35%,
      rgba(245,161,27,.18),
      transparent 65%
    ),
    url('https://lp.axtwood.com.br/assets/FUNDOrecortadoaxt.png') center/cover no-repeat;
}

.hero::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:.35;
  background:repeating-linear-gradient(
    180deg,
    rgba(255,255,255,.025) 0,
    rgba(255,255,255,.025) 1px,
    transparent 1px,
    transparent 8px
  );
}

.hero-grid{
  position:relative;
  z-index:2;
  display:grid;
  grid-template-columns:1.08fr .92fr;
  gap:clamp(35px,6vw,75px);
  align-items:center;
  padding-block:clamp(65px,8vw,105px);
}

.hero h1{
  margin:18px 0 25px;
}

.hero h1 i{
  font-style:normal;
  color:var(--amber);
}

.hero .lede{
  max-width:58ch;
  font-size:clamp(16px,1.5vw,19px);
  color:#bfbcB3;
}

.minq{
  display:inline-flex;
  margin-top:25px;
  border:1px solid rgba(245,161,27,.42);
  border-radius:3px;
  padding:8px 15px;
  color:var(--amber);
  font-family:'Barlow Condensed',sans-serif;
  font-weight:700;
  letter-spacing:.1em;
  text-transform:uppercase;
}

.cta-row{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-top:28px;
}

.hero-stats{
  display:flex;
  flex-wrap:wrap;
  gap:30px;
  margin-top:40px;
}

.hero-stat b{
  display:block;
  color:var(--amber);
  font-family:'Anton',sans-serif;
  font-size:28px;
  line-height:1;
}

.hero-stat span{
  display:block;
  margin-top:5px;
  color:#85827b;
  font-family:'Barlow Condensed',sans-serif;
  font-size:12px;
  font-weight:600;
  letter-spacing:.12em;
  text-transform:uppercase;
}

.hero-visual{
  position:relative;
  min-height:570px;
  overflow:hidden;
}

.hero-board{
  position:absolute;
  left:14%;
  right:14%;
  top:21%;
  bottom:20%;
  transform:rotate(-7deg);
  border-radius:18px;
  background:
    repeating-linear-gradient(
      172deg,
      rgba(255,255,255,.045) 0 2px,
      transparent 2px 23px
    ),
    linear-gradient(
      135deg,
      #594631,
      #2a2119 60%,
      #171511
    );
  box-shadow:
    20px 28px 45px rgba(0,0,0,.55),
    inset 0 0 0 1px rgba(255,255,255,.1);
}

.hero-board::before{
  content:"AXT WOOD";
  position:absolute;
  right:12%;
  bottom:16%;
  width:100px;
  height:100px;
  border:2px solid rgba(239,237,231,.48);
  border-radius:50%;
  display:grid;
  place-items:center;
  color:rgba(239,237,231,.68);
  font-family:'Barlow Condensed',sans-serif;
  font-size:11px;
  font-weight:700;
  letter-spacing:.14em;
  text-align:center;
}

.hero-board::after{
  content:"SUA MARCA";
  position:absolute;
  left:13%;
  top:18%;
  padding:10px 15px;
  border:1px dashed var(--amber);
  color:var(--amber);
  font-family:'Barlow Condensed',sans-serif;
  font-weight:700;
  font-size:12px;
  letter-spacing:.15em;
}

.visual-caption{
  position:absolute;
  left:20px;
  right:20px;
  bottom:18px;
  color:#aaa69c;
  font-family:'Barlow Condensed',sans-serif;
  font-size:12px;
  letter-spacing:.1em;
  text-transform:uppercase;
  text-align:center;
}

.hero-board-img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  display: block;
  border-radius: 8px;
}


/* =========================================================
   STRIP / TICKER
   ========================================================= */

.strip{
  background:var(--amber);
  color:#231703;
  border-bottom:1px solid var(--edge);
}

.strip .wrap{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:1px;
  padding-block:0;
}

.strip-item{
  padding:24px 22px;
  border-right:1px solid rgba(35,23,3,.2);
}

.strip-item:last-child{
  border-right:0;
}

.strip b{
  display:block;
  font-family:'Anton',sans-serif;
  font-size:18px;
  text-transform:uppercase;
}

.strip small{
  display:block;
  margin-top:3px;
  color:#5a3e08;
  font-size:13.5px;
  line-height:1.35;
}

.ticker{
  overflow:hidden;
  white-space:nowrap;
  border-bottom:1px solid var(--edge);
  background:#11110f;
}

.ticker-track{
  display:inline-flex;
  animation:scroll 30s linear infinite;
  padding:14px 0;
}

.ticker-track span{
  padding:0 32px;
  border-right:1px solid var(--edge);
  color:#88857d;
  font-family:'Barlow Condensed',sans-serif;
  font-size:13px;
  font-weight:600;
  letter-spacing:.12em;
  text-transform:uppercase;
}

.ticker-track strong{
  color:var(--amber);
}

@keyframes scroll{
  from{
    transform:translateX(0);
  }

  to{
    transform:translateX(-50%);
  }
}


/* =========================================================
   SEÇÕES
   ========================================================= */

section{
  padding-block:clamp(65px,8vw,105px);
}

.section-head{
  max-width:760px;
}

.section-head h2{
  margin-top:12px;
}

.section-head p{
  margin-top:17px;
  color:#b0ada4;
  font-size:17px;
}


/* =========================================================
   BRASÃO
   ========================================================= */

.brand-swap{
  margin-top:46px;
  display:grid;
  grid-template-columns:1fr auto 1fr;
  gap:clamp(22px,4vw,55px);
  align-items:center;
  background:var(--char);
  border:1px solid var(--edge);
  padding:clamp(25px,4vw,45px);
}

.bs-side{
  display:flex;
  align-items:center;
  gap:18px;
}

.bs-side b{
  display:block;
  color:var(--bone);
  font-family:'Barlow Condensed',sans-serif;
  font-weight:700;
  font-size:15px;
  letter-spacing:.14em;
  text-transform:uppercase;
}

.bs-side p{
  margin-top:5px;
  color:#aaa69e;
  font-size:15px;
}

.medal{
  width:68px;
  height:68px;
  flex:none;
  display:grid;
  place-items:center;
  border-radius:50%;
  border:2px solid rgba(239,237,231,.34);
  background:
    radial-gradient(
      circle at 34% 28%,
      #6e6e68,
      #262623 72%
    );
  color:#d2d0c9;
  font-family:'Barlow Condensed',sans-serif;
  font-size:10px;
  font-weight:700;
  letter-spacing:.12em;
  text-align:center;
  line-height:1.1;
}

.medal.you{
  border-color:var(--amber);
  border-style:dashed;
  color:var(--amber);
  background:#211a0d;
}

.bs-arrow{
  font-family:'Anton';
  font-size:35px;
  color:var(--amber);
}


/* =========================================================
   PRODUTOS / GRID
   ========================================================= */

.product-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:20px;
  margin-top:45px;
}

.product-card{
  background:var(--char);
  border:1px solid var(--edge);
  display:flex;
  flex-direction:column;
  overflow:hidden;
  transition:.2s;
}

.product-card:hover{
  transform:translateY(-4px);
  border-color:rgba(245,161,27,.55);
}

.product-visual{
  aspect-ratio:4/3;
  position:relative;
  overflow:hidden;
  background:
    repeating-linear-gradient(
      170deg,
      rgba(255,255,255,.035) 0 2px,
      transparent 2px 20px
    ),
    linear-gradient(
      135deg,
      #4b3929,
      #201a14
    );
}

.product-visual::before{
  content:"";
  position:absolute;
  width:72%;
  height:55%;
  left:14%;
  top:22%;
  transform:rotate(-5deg);
  border-radius:9px;
  background:
    repeating-linear-gradient(
      173deg,
      rgba(255,255,255,.055) 0 2px,
      transparent 2px 18px
    ),
    linear-gradient(
      135deg,
      #71583d,
      #33271d
    );
  box-shadow:12px 18px 25px rgba(0,0,0,.4);
}

.product-visual::after{
  content:"AXT";
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%) rotate(-5deg);
  color:rgba(239,237,231,.55);
  font-family:'Barlow Condensed',sans-serif;
  font-weight:700;
  font-size:12px;
  letter-spacing:.18em;
}

.product-body{
  padding:21px;
  display:flex;
  flex-direction:column;
  gap:11px;
  flex:1;
}

.product-body h3{
  font-size:24px;
}

.cod{
  color:var(--amber);
  font-family:'Barlow Condensed',sans-serif;
  font-size:13px;
  font-weight:700;
  letter-spacing:.15em;
  text-transform:uppercase;
}

.chips{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
}

.chip{
  padding:5px 9px;
  border-radius:3px;
  background:#262622;
  color:#c7c4bb;
  font-family:'Barlow Condensed',sans-serif;
  font-size:12px;
  font-weight:600;
  letter-spacing:.07em;
  text-transform:uppercase;
}

.pick{
  margin-top:auto;
  padding:12px 0;
  background:none;
  border:1.5px solid rgba(239,237,231,.3);
  border-radius:3px;
  color:var(--bone);
  cursor:pointer;
  font-family:'Barlow Condensed',sans-serif;
  font-size:15px;
  font-weight:700;
  letter-spacing:.12em;
  text-transform:uppercase;
  transition:.18s;
}

.pick:hover,
.pick[data-on="1"]{
  background:var(--amber);
  border-color:var(--amber);
  color:#231703;
}


/* =========================================================
   CATEGORIAS
   ========================================================= */

.bento{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  grid-auto-rows:minmax(190px,1fr);
  gap:1px;
  margin-top:42px;
  background:var(--edge);
  border:1px solid var(--edge);
  overflow:hidden;
}

.bento a{
  position:relative;
  min-height:190px;
  padding:24px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  overflow:hidden;

  /* Imagem individual de cada categoria + proteção para leitura */
  background-image:
    linear-gradient(
      180deg,
      rgba(11,11,10,.08) 0%,
      rgba(11,11,10,.16) 45%,
      rgba(11,11,10,.82) 100%
    ),
    var(--cat-image);
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;

  color:var(--bone);
  transition:
    transform .25s ease,
    filter .25s ease;
}

/* Imagem de cada caixa sem alterar o HTML da seção */
.bento a:nth-child(1){--cat-image:url('https://lp.axtwood.com.br/assets/categorias/tabua.jpg');}
.bento a:nth-child(2){--cat-image:url('https://lp.axtwood.com.br/assets/categorias/servir.jpg');}
.bento a:nth-child(3){--cat-image:url('https://lp.axtwood.com.br/assets/categorias/kit.jpg');}
.bento a:nth-child(4){--cat-image:url('https://lp.axtwood.com.br/assets/categorias/petisqueira.jpg');}
.bento a:nth-child(5){--cat-image:url('https://lp.axtwood.com.br/assets/categorias/facahod.jpg');}
.bento a:nth-child(6){--cat-image:url('https://lp.axtwood.com.br/assets/categorias/cinzeiro.jpg');}
.bento a:nth-child(7){--cat-image:url('https://lp.axtwood.com.br/assets/categorias/abridor.jpg');}
.bento a:nth-child(8){--cat-image:url('https://lp.axtwood.com.br/assets/categorias/linhabbq.jpg');}
.bento a:nth-child(9){--cat-image:url('https://lp.axtwood.com.br/assets/categorias/porta copos.jpg');}

.bento a::after{
  content:"";
  position:absolute;
  width:180px;
  height:180px;
  right:-80px;
  bottom:-95px;
  border:1px solid rgba(245,161,27,.22);
  border-radius:50%;
  transition:transform .3s ease;
}

.bento a > *{
  position:relative;
  z-index:2;
}

.bento a:hover{
  filter:brightness(1.16);
  transform:translateY(-3px);
}

.bento a:hover::after{
  transform:scale(1.45);
}

.bento .big{
  grid-column:span 2;
  grid-row:span 2;
  min-height:381px;
}

.cat-tag{
  display:inline-block;
  color:var(--amber);
  font-family:'Barlow Condensed',sans-serif;
  font-size:12px;
  font-weight:700;
  letter-spacing:.17em;
  text-transform:uppercase;
}

.cat-name{
  margin-top:10px;
  max-width:13ch;
  font-family:'Anton',sans-serif;
  font-size:clamp(22px,2.7vw,36px);
  line-height:.96;
  text-transform:uppercase;
}

.bento .big .cat-name{
  font-size:clamp(34px,4.5vw,60px);
  max-width:10ch;
}

.arrow{
  align-self:flex-end;
  color:var(--bone);
  font-family:'Barlow Condensed',sans-serif;
  font-size:14px;
  font-weight:700;
  letter-spacing:.13em;
  text-transform:uppercase;
}

.bento a:hover .arrow{
  color:var(--amber);
}


/* =========================================================
   PERSONALIZAÇÃO
   ========================================================= */

.bone{
  background:var(--bone);
  color:var(--ink);
}

.bone .section-head p{
  color:#5a574e;
}

.split{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(30px,5vw,60px);
  align-items:center;
  margin-top:45px;
}

.tech{
  display:grid;
  gap:1px;
  background:rgba(11,11,10,.15);
  border:1px solid rgba(11,11,10,.15);
}

.tech div{
  background:var(--bone);
  padding:18px 20px;
  display:flex;
  gap:15px;
  align-items:baseline;
}

.tech b{
  min-width:175px;
  font-family:'Barlow Condensed',sans-serif;
  font-size:16px;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.tech span{
  font-size:14.5px;
  color:#5a574e;
}

.personal-card{
  min-height:330px;
  background:#171713;
  border:1px solid #33332d;
  position:relative;
  overflow:hidden;
}

/* Indica interatividade nos textos sem alterar seu layout original */
.tech > div {
  cursor: pointer;
  transition: opacity 0.3s ease;
}

/* Opcional: destaque visual para a opção selecionada */
.tech > div.active {
  opacity: 1;
}

.tech > div:not(.active) {
  opacity: 0.6; /* Deixa as não selecionadas levemente suavizadas */
}

/* Ajusta a imagem dentro da estrutura da direita */
.personal-card img {
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  display: block;
  border-radius: 8px;
}

/* =========================================================
   BRIEFING
   ========================================================= */

.steps{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:1px;
  margin-top:45px;
  background:var(--edge);
  border:1px solid var(--edge);
  overflow:hidden;
}

.step{
  background:var(--char);
  padding:28px 23px;
}

.step .n{
  color:var(--amber);
  font-family:'Barlow Condensed',sans-serif;
  font-size:13px;
  font-weight:700;
  letter-spacing:.2em;
  text-transform:uppercase;
}

.step h3{
  margin:12px 0 8px;
  font-size:23px;
}

.step p{
  font-size:15px;
  color:#a5a29a;
}


/* =========================================================
   SEGMENTOS
   ========================================================= */

.who{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:1px;
  margin-top:42px;
  background:var(--edge);
  border:1px solid var(--edge);
}

.who div{
  background:var(--char);
  padding:23px 18px;
}

.who b{
  display:block;
  margin-bottom:7px;
  font-family:'Barlow Condensed',sans-serif;
  font-size:16px;
  font-weight:700;
  letter-spacing:.12em;
  text-transform:uppercase;
}

.who span{
  font-size:14.5px;
  color:#a5a29a;
}

/* ===== COLLECTIONS CARROSSEL INFINITO ===== */
#colecoes .wrap-carousel{
  width:100%;
  overflow:hidden;
  position:relative;
  padding:10px 0;
}

#colecoes .wrap-carousel::before,
#colecoes .wrap-carousel::after{
  content:"";
  position:absolute;
  top:0;
  width:80px;
  height:100%;
  z-index:10;
  pointer-events:none;
}

#colecoes .wrap-carousel::before{
  left:0;
  background:linear-gradient(90deg, var(--ink, #000) 0%, transparent 100%);
}

#colecoes .wrap-carousel::after{
  right:0;
  background:linear-gradient(-90deg, var(--ink, #000) 0%, transparent 100%);
}

.coll-track{
  display:flex;
  gap:16px;
  width:max-content;
  animation:scrollInfinite 28s linear infinite;
}

@keyframes scrollInfinite{
  0%{
    transform:translateX(0);
  }
  100%{
    transform:translateX(-50%);
  }
}

/* ===== CARD SOMENTE COM LOGO ===== */
.coll-card{
  flex:0 0 300px;
  height:160px;
  position:relative;
  overflow:hidden;
  border-radius:var(--radius-md);
  background:transparent;
  transition:transform .3s ease, border-color .3s ease, box-shadow .3s ease;
}

/* logo */
.coll-card::before{
  content:"";
  position:absolute;
  inset:0;
  background-repeat:no-repeat;
  background-position:center;
  background-size:68% auto;

  /* transforma logo preta em branca */
  filter:brightness(0) invert(1);
  opacity:.92;

  transition:transform .3s ease, opacity .3s ease;
}


/* ===== LOGOS DOS CLIENTES ===== */

.coll-1::before{background-image:url('https://lp.axtwood.com.br/assets/logos/alltech.png');
}

.coll-2::before{background-image:url('https://lp.axtwood.com.br/assets/logos/boering.png');
}

.coll-3::before{background-image:url('https://lp.axtwood.com.br/assets/logos/case.png');
}

.coll-4::before{background-image:url('https://lp.axtwood.com.br/assets/logos/cineflix.png');
}

.coll-5::before{background-image:url('https://lp.axtwood.com.br/assets/logos/cooperalianca.png');
}

.coll-6::before{background-image:url('https://lp.axtwood.com.br/assets/logos/domnovilho.png');
}

.coll-7::before{background-image:url('https://lp.axtwood.com.br/assets/logos/elcapitain.png');
}

.coll-8::before{background-image:url('https://lp.axtwood.com.br/assets/logos/helopalacio.png');
}

.coll-9::before{background-image:url('https://lp.axtwood.com.br/assets/logos/ingatubos.png');
}

.coll-10::before{background-image:url('https://lp.axtwood.com.br/assets/logos/leao.png');
}

.coll-11::before{background-image:url('https://lp.axtwood.com.br/assets/logos/nxboats.png');
}

.coll-12::before{background-image:url('https://lp.axtwood.com.br/assets/logos/pedrogranado.png');
}

.coll-13::before{background-image:url('https://lp.axtwood.com.br/assets/logos/ramanhoexperience.png');
}

.coll-14::before{background-image:url('https://lp.axtwood.com.br/assets/logos/revest.png');
}

.coll-15::before{background-image:url('https://lp.axtwood.com.br/assets/logos/sicredi.png');
}

/* =========================================================
   FAQ
   ========================================================= */

.faq{
  margin-top:40px;
  border-top:1px solid var(--edge);
}

details{
  border-bottom:1px solid var(--edge);
}

summary{
  list-style:none;
  cursor:pointer;
  padding:20px 0;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  font-family:'Barlow Condensed',sans-serif;
  font-size:20px;
  font-weight:700;
  letter-spacing:.06em;
  text-transform:uppercase;
}

summary::-webkit-details-marker{
  display:none;
}

summary::after{
  content:"+";
  color:var(--amber);
  font-size:25px;
}

details[open] summary::after{
  content:"–";
}

details p{
  padding:0 0 20px;
  max-width:80ch;
  color:#a5a29a;
  font-size:16px;
}

/* =========================================================
   FORMULÁRIO B2B — AXT WOOD
   ========================================================= */

.form-sec{
  background:var(--char);
  border-top:1px solid var(--edge);
}

.form-grid{
  display:grid;
  grid-template-columns:.85fr 1.15fr;
  gap:clamp(30px,5vw,65px);
  align-items:start;
}

.form-sec .lede{
  margin-top:16px;
  color:#b0ada4;
  max-width:44ch;
}

.reassure{
  margin-top:24px;
  padding:0;
  display:grid;
  gap:10px;
}

.reassure li{
  list-style:none;
  color:#bfbcB3;
  font-size:15px;
  display:flex;
  gap:10px;
}

.reassure li::before{
  content:"—";
  color:var(--amber);
}


/* =========================================================
   PAINEL
   ========================================================= */

.panel{
  background:var(--bone);
  color:var(--ink);
  border-radius:4px;
  padding:clamp(23px,3vw,35px);
}

.panel-title{
  font-family:'Anton',Impact,sans-serif;
  font-size:24px;
  font-weight:400;
  line-height:1.15;
  color:var(--ink);
  margin-bottom:22px;
  text-align:left;
  text-transform:uppercase;
}


/* =========================================================
   CAMPOS
   ========================================================= */

.fields{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px;
}

.f{
  display:flex;
  flex-direction:column;
  gap:7px;
}

.f.wide{
  grid-column:1/-1;
}

.f label{
  color:#6b685f;
  font-family:'Barlow Condensed',sans-serif;
  font-size:13px;
  font-weight:700;
  letter-spacing:.16em;
  text-transform:uppercase;
}

.f input,
.f select{
  width:100%;
  min-height:48px;
  padding:13px 14px;
  border:1px solid rgba(11,11,10,.18);
  border-radius:3px;
  background:#fff;
  color:var(--ink);
  font-family:'Barlow',sans-serif;
  font-size:16px;
  line-height:1.3;
  appearance:auto;
  transition:
    border-color .18s ease,
    box-shadow .18s ease,
    outline-color .18s ease,
    background .18s ease;
}

.f input::placeholder{
  color:#9b988f;
}

.f input:hover,
.f select:hover{
  border-color:rgba(11,11,10,.35);
}

.f input:focus,
.f select:focus{
  outline:2.5px solid var(--amber);
  outline-offset:0;
  border-color:transparent;
}


/* =========================================================
   ESTADO DE ERRO
   ========================================================= */

.f input.field-error,
.f select.field-error{
  border-color:#b84a32;
  outline:2px solid rgba(184,74,50,.22);
  background:#fffafa;
}

.f input.field-error:focus,
.f select.field-error:focus{
  outline:2.5px solid #b84a32;
}


/* =========================================================
   TAGS / INTERESSES
   ========================================================= */

.tagset{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}

.tag{
  cursor:pointer;
  user-select:none;
}

.tag input{
  position:absolute;
  opacity:0;
  width:1px;
  height:1px;
  pointer-events:none;
}

.tag span{
  display:inline-block;
  padding:9px 15px;
  border:1.5px solid rgba(11,11,10,.20);
  border-radius:3px;
  background:transparent;
  color:var(--ink);
  font-size:14.5px;
  line-height:1.2;
  transition:
    background .16s ease,
    border-color .16s ease,
    color .16s ease,
    transform .16s ease;
}

.tag:hover span{
  border-color:var(--ink);
  transform:translateY(-1px);
}

.tag input:checked + span{
  background:var(--ink);
  border-color:var(--ink);
  color:var(--bone);
}

.tag input:focus-visible + span{
  outline:3px solid var(--amber);
  outline-offset:2px;
}


/* =========================================================
   PRODUTO SELECIONADO
   ========================================================= */

.f-product{
  margin-top:4px;
  padding:11px 13px;
  border:1px solid rgba(11,11,10,.14);
  border-radius:3px;
  background:rgba(212,162,76,.08);
  color:#5d594f;
  font-size:13px;
}

.f-product strong{
  color:var(--ink);
}


/* =========================================================
   BOTÃO
   ========================================================= */

.submit{
  width:100%;
  margin-top:22px;
  min-height:56px;
  padding:18px 20px;
  border:0;
  border-radius:3px;
  background:var(--ink);
  color:var(--bone);
  cursor:pointer;

  font-family:'Barlow Condensed',sans-serif;
  font-size:17px;
  font-weight:700;
  letter-spacing:.10em;
  text-transform:uppercase;

  transition:
    background .18s ease,
    color .18s ease,
    transform .18s ease,
    opacity .18s ease,
    box-shadow .18s ease;
}

.submit:hover{
  background:var(--amber);
  color:var(--ink);
  transform:translateY(-2px);
  box-shadow:0 10px 24px rgba(0,0,0,.18);
}

.submit:active{
  transform:translateY(0);
}

.submit:disabled{
  opacity:.65;
  cursor:wait;
  transform:none;
  box-shadow:none;
}


/* =========================================================
   TEXTO LEGAL
   ========================================================= */

.legal{
  margin-top:12px;
  color:#77736a;
  font-size:12px;
  line-height:1.5;
  text-align:center;
}


/* =========================================================
   MENSAGEM DE SUCESSO
   ========================================================= */

.done{
  display:none;
  text-align:center;
  padding:45px 20px 35px;
}

.done.is-visible{
  display:block;
}

.done[hidden]{display:none !important;}
.done:not([hidden]){display:block;}
.done strong{color:var(--ink);}
.done-action{margin-top:18px !important;}
.nexy-botao-whats{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:46px;padding:12px 18px;border-radius:3px;
  background:var(--ink);color:var(--bone);
  font-family:'Barlow Condensed',sans-serif;font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;
}
.nexy-botao-whats:hover{background:var(--amber);color:var(--ink);}
.done-warning .done-mark,.done-error .done-mark{border-color:var(--amber);color:var(--amber);}

.done-mark{
  width:58px;
  height:58px;
  margin:0 auto 20px;

  display:flex;
  align-items:center;
  justify-content:center;

  border:2px solid var(--amber);
  border-radius:50%;

  color:var(--amber);
  font-size:27px;
  font-weight:700;
}

.done h3{
  margin-bottom:10px;
  color:var(--ink);
  font-family:'Anton',Impact,sans-serif;
  font-size:28px;
  font-weight:400;
  line-height:1.1;
  text-transform:uppercase;
}

.done p{
  max-width:420px;
  margin:0 auto;
  color:#6b685f;
  font-size:15px;
  line-height:1.6;
}


/* =========================================================
   HONEYPOT
   ========================================================= */

.form-honeypot{
  position:absolute !important;
  left:-9999px !important;
  top:auto !important;
  width:1px !important;
  height:1px !important;
  overflow:hidden !important;
}


/* =========================================================
   RESPONSIVO
   ========================================================= */

@media(max-width:900px){

  .form-grid{
    grid-template-columns:1fr;
    gap:40px;
  }

  .form-info{
    max-width:720px;
  }

}


@media(max-width:600px){

  .panel{
    padding:24px 18px;
  }

  .fields{
    grid-template-columns:1fr;
    gap:15px;
  }

  .f.wide{
    grid-column:auto;
  }

  .tagset{
    gap:7px;
  }

  .tag span{
    padding:9px 12px;
    font-size:14px;
  }

  .submit{
    min-height:54px;
  }

}


@media(max-width:420px){

  .panel{
    padding:22px 16px;
  }

  .panel-title{
    font-size:22px;
  }

  .tag span{
    width:100%;
    text-align:center;
  }

  .tag{
    width:100%;
  }

}


/* =========================================================
   INFORMAÇÕES DA EMPRESA NO FORMULÁRIO
   ========================================================= */

.form-info{
  padding-right:20px;
}

.company-info{
  margin-top:38px;
  padding-top:28px;
  border-top:1px solid var(--edge);
}

.company-brand .logo{
  font-size:24px;
}

.company-brand p{
  max-width:440px;
  margin-top:12px;
  color:#8f8c84;
  font-size:15px;
  line-height:1.55;
}

.company-contact{
  margin-top:25px;
  display:grid;
}

.contact-title{
  margin-bottom:5px;
  color:var(--amber);
  font-family:'Barlow Condensed',sans-serif;
  font-size:12px;
  font-weight:700;
  letter-spacing:.16em;
  text-transform:uppercase;
}

.company-contact p,
.company-contact a{
  color:#8f8c84;
  font-size:14.5px;
}

.company-contact a{
  transition:color .2s ease;
}

.company-contact a:hover{
  color:var(--amber);
}

.company-info .foot-social{
  margin-top:22px;
}

.company-info .foot-social a{
  width:36px;
  height:36px;
}


/* =========================================================
   FOOTER
   ========================================================= */

footer{
  background:#000;
  color:#7e7b73;
  font-size:14px;
  border-top:1px solid var(--edge);
}

footer .wrap{
  padding-block:0;
}

.foot-grid{
  display:grid;
  grid-template-columns:1.35fr 1fr;
  justify-content:space-between;
  gap:40px;
  padding-block:55px;
}

.foot-brand p{
  max-width:440px;
  margin-top:15px;
  margin-bottom:15px;
  color:#8f8c84;
}

.foot-col h4{
  margin-bottom:15px;
  color:#77736b;
  font-family:'Barlow Condensed',sans-serif;
  font-size:12px;
  font-weight:700;
  letter-spacing:.15em;
  text-transform:uppercase;
}

.foot-col a,
.foot-col p{
  display:block;
  margin-bottom:9px;
  color:#8f8c84;
}

.foot-col a:hover{
  color:var(--amber);
}

.foot-social{
  display:flex;
  gap:12px;
  margin-top:8px;
}

.foot-social a{
  width:38px;
  height:38px;
  border-radius:50%;
  border:1px solid rgba(243,247,246,.25);
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--bone);
  font-size:15px;
  transition:
    background .2s ease,
    border-color .2s ease,
    color .2s ease;
}

.foot-social a:hover{
  color:var(--amber);
  border-color:var(--amber);
}

.foot-bottom{
  display:flex;
  justify-content:space-between;
  align-items:center;
  flex-wrap:wrap;
  gap:12px;
  padding-block:22px;
  border-top:1px solid var(--edge);
  color:var(--amber);
  font-family:'Barlow Condensed',sans-serif;
  font-size:12px;
  letter-spacing:.05em;
}


/* =========================================================
   MENU MOBILE
   ========================================================= */

@media(max-width:960px){

  .burger{
    display:flex;
  }

  .navlinks{
    position:fixed;
    top:var(--header-height);
    left:0;
    width:100%;
    background:#0b0b0a;
    border-bottom:1px solid var(--edge);
    padding:24px 32px;
    flex-direction:column;
    align-items:flex-start;
    gap:16px;
    box-shadow:0 10px 30px rgba(0,0,0,.8);
    transform:translateY(-150%);
    transition:transform .3s ease-in-out;
    z-index:99;
  }

  .navlinks.active{
    transform:translateY(0);
  }

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

  .hero-visual{
    min-height:430px;
  }

  .brand-swap{
    grid-template-columns:1fr;
  }

  .bs-arrow{
    transform:rotate(90deg);
    justify-self:start;
  }

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

  .split,
  .wood-fact{
    grid-template-columns:1fr;
  }

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

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

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

  .form-info{
    padding-right:0;
  }

  .company-info{
    margin-top:32px;
  }

  .foot-grid{
    grid-template-columns:1fr;
    gap:30px;
  }

}


/* =========================================================
   800px
   ========================================================= */

@media(max-width:800px){

  .strip .wrap{
    grid-template-columns:1fr 1fr;
  }

  .strip-item:nth-child(2){
    border-right:0;
  }

}


/* =========================================================
   760px
   ========================================================= */

@media(max-width:760px){

  .topbar .wrap{
    justify-content:center;
    text-align:center;
  }

  .topbar-right{
    display:none;
  }

}


/* =========================================================
   600px
   ========================================================= */

@media(max-width:600px){

  .nav .btn{
    padding:12px 15px;
    font-size:13px;
  }

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

  .f.wide{
    grid-column:auto;
  }

  .company-info{
    margin-top:28px;
    padding-top:23px;
  }

  .company-brand .logo{
    font-size:21px;
  }

}


/* =========================================================
   560px
   ========================================================= */

@media(max-width:560px){

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

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

  .bento .big{
    grid-column:span 1;
    grid-row:span 1;
    min-height:270px;
  }

  .bento a{
    min-height:170px;
  }

}


/* =========================================================
   520px
   ========================================================= */

@media(max-width:520px){

  .strip .wrap{
    grid-template-columns:1fr;
  }

  .strip-item{
    border-right:0;
    border-bottom:1px solid rgba(35,23,3,.2);
  }

  .strip-item:last-child{
    border-bottom:0;
  }

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

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

  .hero h1{
    font-size:48px;
  }

  .hero-visual{
    min-height:360px;
  }

  .hero-stats{
    gap:20px;
  }

  .btn{
    width:100%;
  }

  .cta-row{
    display:grid;
  }

  .foot-bottom{
    justify-content:center;
    text-align:center;
  }

}



/* =========================================================
   REFRESH VISUAL 2026 — AXT WOOD
   Mantém a estrutura existente e adiciona profundidade,
   movimento e acabamento rústico contemporâneo.
   ========================================================= */

/* ---------- atmosfera / textura ---------- */

:root{
  --amber-glow:rgba(212,162,76,.22);
  --amber-soft:rgba(212,162,76,.10);
  --wood:#6f4e32;
  --wood-dark:#2a1c13;
  --coal:#0d0d0b;
  --coal-2:#13130f;
  --line-soft:rgba(239,237,231,.10);
}

body{
  position:relative;
  background:
    radial-gradient(circle at 12% 8%, rgba(212,162,76,.055), transparent 26%),
    radial-gradient(circle at 88% 45%, rgba(111,78,50,.08), transparent 30%),
    var(--ink);
}

/* ruído quase imperceptível — dá materialidade sem “sujar” */
body::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:999;
  pointer-events:none;
  opacity:.024;
  mix-blend-mode:screen;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.72' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.65'/%3E%3C/svg%3E");
}

main{
  position:relative;
}

section:not(.hero){
  position:relative;
  isolation:isolate;
}

/* ---------- header mais premium ---------- */

header.site-header{
  background:linear-gradient(
    180deg,
    rgba(11,11,10,.96),
    rgba(11,11,10,.86)
  );
  box-shadow:0 12px 34px rgba(0,0,0,.16);
}

header.site-header::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:-1px;
  height:1px;
  background:linear-gradient(
    90deg,
    transparent,
    rgba(212,162,76,.48) 30%,
    rgba(212,162,76,.16) 70%,
    transparent
  );
}

.logo-img{
  filter:drop-shadow(0 4px 12px rgba(0,0,0,.28));
}

.navlinks a{
  transition:color .25s ease;
}

/* ---------- botões ---------- */

.btn{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  min-height:50px;
}

.btn::before{
  content:"";
  position:absolute;
  inset:-1px;
  z-index:-1;
  background:linear-gradient(
    110deg,
    transparent 18%,
    rgba(255,255,255,.22) 44%,
    transparent 68%
  );
  transform:translateX(-135%);
  transition:transform .65s ease;
}

.btn:hover::before{
  transform:translateX(135%);
}

.btn-primary{
  background:
    linear-gradient(135deg,#e0b45f 0%,var(--amber) 48%,#b9793a 100%);
  box-shadow:
    0 12px 26px rgba(0,0,0,.18),
    0 0 0 1px rgba(255,255,255,.08) inset;
}

.btn-primary:hover{
  background:
    linear-gradient(135deg,#efc974 0%,#d9a84e 48%,#bd7939 100%);
}

.btn-ghost{
  background:rgba(11,11,10,.24);
  backdrop-filter:blur(7px);
}

/* ---------- hero: composição mais cinematográfica ---------- */

.hero{
  min-height:clamp(690px,82vh,860px);
  isolation:isolate;
  background:
    linear-gradient(
      90deg,
      rgba(11,11,10,.96) 0%,
      rgba(11,11,10,.87) 41%,
      rgba(11,11,10,.58) 68%,
      rgba(11,11,10,.86) 100%
    ),
    radial-gradient(
      ellipse 720px 620px at 82% 46%,
      rgba(212,162,76,.25),
      transparent 66%
    ),
    radial-gradient(
      ellipse 460px 300px at 20% 12%,
      rgba(111,78,50,.20),
      transparent 72%
    ),
    url('https://lp.axtwood.com.br/assets/FUNDOrecortadoaxt.png') center/cover no-repeat;
}

.hero::before{
  content:"";
  position:absolute;
  width:min(48vw,650px);
  aspect-ratio:1;
  right:-12%;
  top:12%;
  z-index:0;
  border-radius:50%;
  border:1px solid rgba(212,162,76,.13);
  box-shadow:
    0 0 0 55px rgba(212,162,76,.025),
    0 0 0 110px rgba(212,162,76,.015);
  pointer-events:none;
  animation:axtHalo 12s ease-in-out infinite;
}

.hero::after{
  z-index:0;
  opacity:.42;
  background:
    repeating-linear-gradient(
      180deg,
      rgba(255,255,255,.022) 0,
      rgba(255,255,255,.022) 1px,
      transparent 1px,
      transparent 9px
    ),
    linear-gradient(
      180deg,
      transparent 72%,
      rgba(0,0,0,.36) 100%
    );
}

@keyframes axtHalo{
  0%,100%{transform:scale(1) rotate(0deg);opacity:.65}
  50%{transform:scale(1.04) rotate(5deg);opacity:1}
}

.hero-grid{
  min-height:inherit;
  grid-template-columns:1.02fr .98fr;
  gap:clamp(30px,5vw,70px);
  padding-block:clamp(72px,8vw,116px);
}

.hero-grid > .reveal:first-child{
  position:relative;
  z-index:3;
}

.hero .eyebrow{
  display:inline-flex;
  align-items:center;
  width:max-content;
  padding:8px 12px;
  border:1px solid rgba(212,162,76,.25);
  border-radius:999px;
  background:rgba(11,11,10,.36);
  backdrop-filter:blur(8px);
}

.hero h1{
  max-width:10.5ch;
  margin:20px 0 24px;
  font-size:clamp(50px,6.7vw,94px);
  line-height:.96;
  letter-spacing:-.012em;
  text-shadow:0 12px 40px rgba(0,0,0,.38);
}

.hero h1 i{
  position:relative;
  display:inline-block;
  background:linear-gradient(180deg,#f2d391 0%,var(--amber) 62%,#b9793a 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

.hero h1 i::after{
  content:"";
  position:absolute;
  left:2%;
  right:5%;
  bottom:-7px;
  height:2px;
  transform:rotate(-1deg);
  background:linear-gradient(90deg,var(--amber),transparent);
  opacity:.72;
}

.hero .lede{
  max-width:53ch;
  color:#c9c5ba;
  font-size:clamp(16px,1.45vw,19px);
}

.hero-stats{
  position:relative;
  gap:0;
  margin-top:42px;
  padding-top:20px;
  border-top:1px solid rgba(239,237,231,.12);
}

.hero-stats::before{
  content:"";
  position:absolute;
  left:0;
  top:-1px;
  width:86px;
  height:1px;
  background:var(--amber);
  box-shadow:0 0 16px rgba(212,162,76,.55);
}

.hero-stat{
  min-width:120px;
  padding-right:26px;
  margin-right:26px;
  border-right:1px solid rgba(239,237,231,.10);
}

.hero-stat:last-child{
  margin-right:0;
  padding-right:0;
  border-right:0;
}

.hero-stat b{
  font-size:31px;
  background:linear-gradient(180deg,#f1d08b,var(--amber));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

.hero-visual{
  min-height:610px;
  overflow:visible;
  display:grid;
  place-items:center;
  isolation:isolate;
}

.hero-visual::before{
  content:"";
  position:absolute;
  inset:11% 4% 8%;
  z-index:-2;
  border-radius:50%;
  background:
    radial-gradient(
      closest-side,
      rgba(212,162,76,.32),
      rgba(111,78,50,.16) 42%,
      transparent 72%
    );
  filter:blur(14px);
}

.hero-visual::after{
  content:"";
  position:absolute;
  width:76%;
  aspect-ratio:1;
  z-index:-1;
  border:1px dashed rgba(212,162,76,.22);
  border-radius:50%;
  animation:axtSpin 34s linear infinite;
}

@keyframes axtSpin{
  to{transform:rotate(360deg)}
}

.hero-board-img{
  position:relative;
  z-index:2;
  width:min(100%,560px);
  max-height:610px;
  aspect-ratio:auto;
  object-fit:contain;
  border-radius:0;
  filter:
    drop-shadow(0 34px 30px rgba(0,0,0,.46))
    drop-shadow(0 0 38px rgba(212,162,76,.10));
  animation:axtFloat 6.5s ease-in-out infinite;
  transform-origin:50% 60%;
}

@keyframes axtFloat{
  0%,100%{transform:translateY(0) rotate(-.7deg)}
  50%{transform:translateY(-12px) rotate(.7deg)}
}

.visual-caption{
  left:50%;
  right:auto;
  bottom:7px;
  width:max-content;
  max-width:90%;
  transform:translateX(-50%);
  padding:9px 14px;
  border:1px solid rgba(239,237,231,.10);
  border-radius:999px;
  background:rgba(11,11,10,.56);
  backdrop-filter:blur(8px);
  color:#bdb8ad;
}

/* ---------- strip / ticker: mais editorial ---------- */

.strip{
  position:relative;
  overflow:hidden;
  background:
    linear-gradient(110deg,#bd8740 0%,#e2b45a 47%,#c4883a 100%);
}

.strip::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:.14;
  background:
    repeating-linear-gradient(
      165deg,
      rgba(35,23,3,.16) 0 1px,
      transparent 1px 16px
    );
}

.strip-item{
  position:relative;
  padding-block:26px;
}

.strip-item::after{
  content:"";
  position:absolute;
  left:22px;
  bottom:0;
  width:42px;
  height:2px;
  background:rgba(35,23,3,.34);
}

.strip b{
  letter-spacing:.02em;
}

.ticker{
  background:
    linear-gradient(90deg,#0d0d0b,#17140f 50%,#0d0d0b);
}

.ticker-track{
  padding:15px 0;
}

.ticker-track span{
  border-right:1px solid rgba(212,162,76,.18);
  color:#99958b;
}

/* ---------- cabeçalhos de seção / ritmo ---------- */

section:not(.hero) .section-head{
  position:relative;
  max-width:820px;
  padding-left:26px;
}

section:not(.hero) .section-head::before{
  content:"";
  position:absolute;
  left:0;
  top:3px;
  width:2px;
  height:58px;
  background:linear-gradient(180deg,var(--amber),rgba(212,162,76,.08));
  box-shadow:0 0 18px rgba(212,162,76,.16);
}

section:not(.hero) .section-head::after{
  content:"";
  position:absolute;
  left:-4px;
  top:0;
  width:10px;
  height:10px;
  transform:rotate(45deg);
  background:var(--amber);
  box-shadow:0 0 14px rgba(212,162,76,.34);
}

section:not(.hero) .section-head h2{
  line-height:1.02;
  letter-spacing:-.006em;
}

section:not(.hero) .section-head p{
  max-width:68ch;
}

/* fundos em camadas, sem criar novas seções */
#brasao,
#processo,
#colecoes,
#faq{
  overflow:hidden;
}

#brasao::after,
#processo::after,
#colecoes::after,
#faq::after{
  content:"";
  position:absolute;
  z-index:-1;
  width:520px;
  height:520px;
  border-radius:50%;
  filter:blur(4px);
  pointer-events:none;
  background:radial-gradient(circle,rgba(212,162,76,.07),transparent 70%);
}

#brasao::after{
  right:-260px;
  top:-210px;
}

#processo::after{
  left:-280px;
  bottom:-250px;
}

#colecoes::after{
  right:-220px;
  top:0;
}

#faq::after{
  left:38%;
  bottom:-390px;
}

/* ---------- brasão ---------- */

.brand-swap{
  position:relative;
  isolation:isolate;
  margin-top:52px;
  padding:clamp(30px,4.2vw,50px);
  border:1px solid rgba(239,237,231,.12);
  border-radius:14px;
  background:
    radial-gradient(circle at 82% 35%,rgba(212,162,76,.14),transparent 34%),
    linear-gradient(135deg,#1c1b17,#11110f 68%);
  box-shadow:
    0 28px 65px rgba(0,0,0,.24),
    inset 0 1px rgba(255,255,255,.035);
  overflow:hidden;
}

.brand-swap::before{
  content:"";
  position:absolute;
  inset:-1px;
  z-index:-1;
  background:
    linear-gradient(
      110deg,
      transparent 0 38%,
      rgba(212,162,76,.06) 49%,
      transparent 60% 100%
    );
  transform:translateX(-36%);
  animation:axtSweep 8s ease-in-out infinite;
}

@keyframes axtSweep{
  50%{transform:translateX(36%)}
}

.medal{
  width:80px;
  height:80px;
  border-color:rgba(239,237,231,.28);
  box-shadow:
    inset 0 0 0 5px rgba(255,255,255,.025),
    0 14px 30px rgba(0,0,0,.20);
}

.medal.you{
  background:
    radial-gradient(circle at 35% 25%,rgba(212,162,76,.13),transparent 34%),
    #211a0d;
  box-shadow:
    0 0 0 5px rgba(212,162,76,.035),
    0 14px 30px rgba(0,0,0,.20);
}

.bs-arrow{
  width:56px;
  height:56px;
  display:grid;
  place-items:center;
  border:1px solid rgba(212,162,76,.20);
  border-radius:50%;
  background:rgba(212,162,76,.055);
  font-size:28px;
}

/* ---------- categorias: imagem protagonista ---------- */

#categorias{
  overflow:hidden;
}

#categorias::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-2;
  background:
    radial-gradient(circle at 15% 0%,rgba(111,78,50,.11),transparent 28%),
    linear-gradient(180deg,#0b0b0a,#10100d 70%,#0b0b0a);
}

.bento{
  gap:14px;
  margin-top:50px;
  background:transparent;
  border:0;
  overflow:visible;
}

.bento a{
  isolation:isolate;
  border:1px solid rgba(239,237,231,.10);
  border-radius:12px;
  background:#171511;
  box-shadow:0 18px 44px rgba(0,0,0,.16);
  transition:
    transform .35s cubic-bezier(.2,.75,.25,1),
    border-color .3s ease,
    box-shadow .35s ease;
}

.bento a::before{
  content:"";
  display:block;
  position:absolute;
  inset:0;
  z-index:-2;
  background:
    var(--cat-image) center/cover no-repeat;
  transform:scale(1.002);
  transition:transform .75s cubic-bezier(.2,.7,.2,1);
}

.bento a::after{
  content:"";
  position:absolute;
  inset:0;
  width:auto;
  height:auto;
  right:0;
  bottom:0;
  z-index:-1;
  border:0;
  border-radius:inherit;
  background:
    linear-gradient(
      180deg,
      rgba(11,11,10,.08) 0%,
      rgba(11,11,10,.16) 34%,
      rgba(11,11,10,.86) 83%,
      rgba(11,11,10,.96) 100%
    ),
    linear-gradient(
      90deg,
      rgba(11,11,10,.44),
      transparent 55%
    );
  transition:background .35s ease;
}

.bento a:hover{
  filter:none;
  transform:translateY(-7px);
  border-color:rgba(212,162,76,.40);
  box-shadow:
    0 26px 58px rgba(0,0,0,.28),
    0 0 0 1px rgba(212,162,76,.04) inset;
}

.bento a:hover::before{
  transform:scale(1.065);
}

.bento a:hover::after{
  transform:none;
}

.bento .big{
  min-height:405px;
}

.cat-tag{
  width:max-content;
  padding:7px 10px;
  border:1px solid rgba(212,162,76,.26);
  border-radius:999px;
  background:rgba(11,11,10,.54);
  backdrop-filter:blur(6px);
  color:#e5b65b;
}

.cat-name{
  margin-top:13px;
  color:#fff;
  text-shadow:0 7px 24px rgba(0,0,0,.48);
}

.arrow{
  padding:7px 10px;
  border-radius:999px;
  background:rgba(11,11,10,.54);
  backdrop-filter:blur(6px);
  transition:
    color .2s ease,
    transform .25s ease;
}

.bento a:hover .arrow{
  transform:translateX(3px);
}

/* ---------- personalização: claro, porém material ---------- */

.bone{
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(circle at 88% 14%,rgba(185,121,58,.13),transparent 28%),
    repeating-linear-gradient(
      168deg,
      rgba(70,48,28,.022) 0 1px,
      transparent 1px 20px
    ),
    #efede7;
}

.bone::before{
  content:"";
  position:absolute;
  width:560px;
  height:560px;
  right:-290px;
  bottom:-340px;
  border:1px solid rgba(90,65,40,.11);
  border-radius:50%;
  box-shadow:
    0 0 0 60px rgba(90,65,40,.025),
    0 0 0 120px rgba(90,65,40,.018);
}

.bone .section-head::before{
  background:linear-gradient(180deg,#8d5c2c,rgba(141,92,44,.08));
}

.bone .section-head::after{
  background:#8d5c2c;
}

.tech{
  gap:10px;
  border:0;
  background:transparent;
}

.tech > div{
  position:relative;
  overflow:hidden;
  padding:20px 22px;
  border:1px solid rgba(11,11,10,.11);
  border-radius:8px;
  background:rgba(255,255,255,.30);
  opacity:1;
  transition:
    transform .25s ease,
    background .25s ease,
    border-color .25s ease,
    box-shadow .25s ease;
}

.tech > div::before{
  content:"";
  position:absolute;
  left:0;
  top:0;
  bottom:0;
  width:3px;
  background:#8d5c2c;
  transform:scaleY(0);
  transform-origin:center;
  transition:transform .25s ease;
}

.tech > div:hover,
.tech > div.active{
  transform:translateX(6px);
  border-color:rgba(141,92,44,.28);
  background:rgba(255,255,255,.56);
  box-shadow:0 12px 30px rgba(66,45,28,.07);
}

.tech > div:hover::before,
.tech > div.active::before{
  transform:scaleY(1);
}

.tech > div:not(.active){
  opacity:.72;
}

.personal-card{
  overflow:visible;
  min-height:420px;
  border:0;
  border-radius:14px;
  background:transparent;
}

.personal-card::before{
  content:"";
  position:absolute;
  inset:8% -4% -2% 10%;
  z-index:0;
  border-radius:18px;
  background:
    radial-gradient(circle at 70% 25%,rgba(212,162,76,.32),transparent 32%),
    #171511;
  transform:rotate(3deg);
  box-shadow:0 30px 60px rgba(41,29,18,.20);
}

.personal-card::after{
  content:"";
  position:absolute;
  width:120px;
  height:120px;
  right:-18px;
  top:-20px;
  z-index:0;
  border:1px dashed rgba(141,92,44,.38);
  border-radius:50%;
  animation:axtSpin 28s linear infinite reverse;
}

.personal-card img{
  position:relative;
  z-index:1;
  height:420px;
  aspect-ratio:auto;
  object-fit:cover;
  border-radius:12px;
  box-shadow:0 24px 50px rgba(41,29,18,.22);
  transform:rotate(-1.6deg);
  transition:transform .5s cubic-bezier(.2,.75,.25,1);
}

.personal-card:hover img{
  transform:rotate(0deg) translateY(-5px);
}


/* ---------- CORES DA RESINA / SVG REALISTA ---------- */

.tech .tech-copy{
  display:flex;
  flex:1;
  min-width:0;
  flex-direction:column;
  align-items:flex-start;
  gap:12px;
}

.tech .tech-description{
  display:block;
}

.tech .resin-colors{
  display:flex;
  align-items:center;
  gap:10px;
  width:auto;
  margin-top:3px;
}

/* pontos clicáveis */
.resin-color{
  position:relative;
  width:22px;
  height:22px;
  flex:0 0 22px;
  padding:0;
  border:2px solid rgba(11,11,10,.16);
  border-radius:50%;
  background:var(--resin-color);
  box-shadow:
    inset 0 1px 2px rgba(255,255,255,.30),
    0 2px 6px rgba(41,29,18,.14);
  cursor:pointer;
  appearance:none;
  -webkit-appearance:none;
  transition:
    transform .18s ease,
    box-shadow .18s ease,
    border-color .18s ease;
}

.resin-color::after{
  content:"";
  position:absolute;
  inset:-5px;
  border:1px solid transparent;
  border-radius:50%;
  pointer-events:none;
}

.resin-color:hover{
  transform:scale(1.10);
}

.resin-color.active{
  border-color:#8d5c2c;
  box-shadow:
    inset 0 1px 2px rgba(255,255,255,.30),
    0 0 0 3px rgba(141,92,44,.12),
    0 3px 8px rgba(41,29,18,.14);
}

.resin-color.active::after{
  border-color:rgba(141,92,44,.46);
}

.resin-color:focus-visible{
  outline:2px solid #8d5c2c;
  outline-offset:4px;
}


/* =========================================================
   FOTO + SVG
   A proporção fixa 5:4 impede que a máscara desalinhe
   entre desktop e mobile.
   ========================================================= */

.personal-media{
  --resin-active:#161616;

  position:relative;
  z-index:1;

  width:100%;
  height:auto;
  aspect-ratio:5 / 4;

  overflow:hidden;
  isolation:isolate;

  border-radius:12px;

  box-shadow:0 24px 50px rgba(41,29,18,.22);

  transform:rotate(-1.6deg);

  transition:transform .5s cubic-bezier(.2,.75,.25,1);
}

.personal-card:hover .personal-media{
  transform:rotate(0deg) translateY(-5px);
}


/* imagem-base */
.personal-card .personal-media img{
  position:absolute;
  inset:0;

  z-index:1;

  width:100%;
  height:100%;
  max-width:none;

  object-fit:cover;
  object-position:center;

  border-radius:0;
  box-shadow:none;

  transform:none !important;

  transition:opacity .18s ease;
}

.personal-card:hover .personal-media img{
  transform:none !important;
}

#personal-preview.is-changing{
  opacity:.45;
}


/* =========================================================
   SVG DA RESINA
   ========================================================= */

.resin-overlay{
  position:absolute;
  inset:0;

  z-index:3;

  width:100%;
  height:100%;

  pointer-events:none;

  color:var(--resin-active);

  opacity:0;

  transition:opacity .22s ease;
}

.personal-card.resin-active .resin-overlay{
  opacity:1;
}


/*
  1. CANALETA
  Não é a resina em si.
  É somente uma sombra sutil para fazer o material parecer
  depositado dentro do rebaixo existente.
*/
.resin-groove{
  fill:none;

  stroke:rgba(46,24,8,.46);
  stroke-width:19;

  stroke-linecap:round;
  stroke-linejoin:round;

  opacity:.50;

  filter:drop-shadow(0 1px 1px rgba(20,10,3,.22));
}


/*
  2. PROFUNDIDADE
  Uma linha escura muito fina sob a resina.
*/
.resin-depth{
  fill:none;

  stroke:rgba(18,8,3,.48);
  stroke-width:12.5;

  stroke-linecap:round;
  stroke-linejoin:round;

  opacity:.58;

  transform:translateY(1.4px);
}


/*
  3. COR
  É propositalmente semitransparente.
  O multiply deixa parte do veio e das sombras da madeira
  aparecerem através da cor, evitando aspecto de plástico.
*/
.resin-body{
  fill:none;

  stroke:currentColor;
  stroke-width:10.5;

  stroke-linecap:round;
  stroke-linejoin:round;

  opacity:.80;

  mix-blend-mode:multiply;

  filter:url(#resin-soft);
}


/*
  4. VOLUME
  Segunda passagem mais fina da própria cor.
  Recupera saturação depois do multiply.
*/
.resin-body + .resin-highlight-top{
  pointer-events:none;
}


/*
  5. BRILHO SUPERIOR
  Não contorna toda a peça. Isso é importante para não
  parecer uma borda vetorial perfeita.
*/
.resin-highlight-top{
  fill:none;

  stroke:rgba(255,255,255,.34);
  stroke-width:1.6;

  stroke-linecap:round;
  stroke-linejoin:round;

  opacity:.62;

  filter:blur(.18px);
}


/*
  6. REFLEXOS INTERROMPIDOS
  Pequenos brilhos quebrados deixam o preenchimento menos
  "digital" e mais próximo de uma resina polida.
*/
.resin-glint{
  fill:none;

  stroke:rgba(255,255,255,.22);
  stroke-width:1;

  stroke-linecap:round;
  stroke-linejoin:round;

  stroke-dasharray:9 11 4 19 14 43;

  opacity:.46;
}


/* evita que o SVG fique exagerado em telas pequenas */
@media(max-width:600px){

  .resin-color{
    width:24px;
    height:24px;
    flex-basis:24px;
  }

  .tech .resin-colors{
    gap:12px;
  }

  .resin-groove{
    stroke-width:17;
  }

  .resin-depth{
    stroke-width:11.5;
  }

  .resin-body{
    stroke-width:10;
  }
}

/* ---------- processo ---------- */

.steps{
  gap:14px;
  margin-top:52px;
  background:transparent;
  border:0;
  overflow:visible;
  counter-reset:axtstep;
}

.step{
  position:relative;
  min-height:250px;
  overflow:hidden;
  padding:30px 25px 26px;
  border:1px solid rgba(239,237,231,.10);
  border-radius:10px;
  background:
    linear-gradient(155deg,rgba(34,34,30,.94),rgba(20,20,17,.98));
  box-shadow:0 18px 44px rgba(0,0,0,.12);
  transition:
    transform .3s ease,
    border-color .3s ease,
    background .3s ease;
}

.step::before{
  counter-increment:axtstep;
  content:"0" counter(axtstep);
  position:absolute;
  right:16px;
  top:5px;
  font-family:'Anton',sans-serif;
  font-size:82px;
  line-height:1;
  color:rgba(212,162,76,.055);
  pointer-events:none;
}

.step::after{
  content:"";
  position:absolute;
  left:0;
  right:100%;
  bottom:0;
  height:2px;
  background:linear-gradient(90deg,var(--amber),#8c562c);
  transition:right .4s ease;
}

.step:hover{
  transform:translateY(-6px);
  border-color:rgba(212,162,76,.30);
  background:
    linear-gradient(155deg,rgba(42,38,29,.98),rgba(20,20,17,.98));
}

.step:hover::after{
  right:0;
}

.step .n{
  position:relative;
  z-index:2;
}

.step h3{
  position:relative;
  z-index:2;
  margin-top:28px;
  font-size:26px;
}

.step p{
  position:relative;
  z-index:2;
  margin-top:10px;
  line-height:1.55;
}

/* ---------- objetivos ---------- */

#ocasioes{
  overflow:hidden;
  background:
    radial-gradient(circle at 0% 100%,rgba(212,162,76,.08),transparent 30%),
    var(--ink);
}

.who{
  gap:14px;
  margin-top:50px;
  background:transparent;
  border:0;
  counter-reset:axtwho;
}

.who div{
  position:relative;
  overflow:hidden;
  min-height:220px;
  padding:28px 20px 24px;
  border:1px solid rgba(239,237,231,.09);
  border-radius:9px;
  background:
    linear-gradient(150deg,#1b1b17,#121210);
  transition:
    transform .3s ease,
    border-color .3s ease,
    background .3s ease;
}

.who div::before{
  counter-increment:axtwho;
  content:"0" counter(axtwho);
  display:block;
  margin-bottom:22px;
  font-family:'Anton',sans-serif;
  font-size:36px;
  line-height:1;
  color:rgba(212,162,76,.82);
}

.who div::after{
  content:"";
  position:absolute;
  width:120px;
  height:120px;
  right:-75px;
  bottom:-75px;
  border:1px solid rgba(212,162,76,.12);
  border-radius:50%;
  transition:transform .35s ease;
}

.who div:hover{
  transform:translateY(-6px);
  border-color:rgba(212,162,76,.28);
  background:
    linear-gradient(150deg,#211f19,#121210);
}

.who div:hover::after{
  transform:scale(1.55);
}

.who b{
  color:#f1eee6;
  font-size:17px;
}

.who span{
  display:block;
  margin-top:10px;
  line-height:1.55;
}

/* ---------- logos: manter sem interação, dar mais presença ---------- */

#colecoes{
  border-top:1px solid rgba(239,237,231,.055);
  border-bottom:1px solid rgba(239,237,231,.055);
  background:
    linear-gradient(180deg,#0b0b0a,#11100d 48%,#0b0b0a);
}

#colecoes .wrap-carousel{
  padding:24px 0 10px;
}

.coll-track{
  gap:26px;
  animation-duration:34s;
}

.coll-card{
  flex-basis:250px;
  height:135px;
  border-radius:0;
  background:transparent;
}

.coll-card::before{
  background-size:64% auto;
  opacity:.76;
  filter:
    brightness(0)
    invert(1)
    drop-shadow(0 7px 16px rgba(0,0,0,.22));
}

/* ---------- FAQ ---------- */

.faq{
  max-width:900px;
  margin:46px auto 0;
  border-top:0;
  display:grid;
  gap:8px;
}

.faq details{
  overflow:hidden;
  border:1px solid rgba(239,237,231,.085);
  border-radius:8px;
  background:rgba(24,24,21,.58);
  transition:
    background .25s ease,
    border-color .25s ease;
}

.faq details[open]{
  border-color:rgba(212,162,76,.24);
  background:
    linear-gradient(135deg,rgba(31,29,23,.96),rgba(21,21,18,.96));
}

.faq summary{
  padding:20px 22px;
}

.faq summary::after{
  margin-right:2px;
}

.faq details p{
  max-width:none;
  padding:0 58px 22px 22px;
}

/* ---------- orçamento: fechamento mais forte ---------- */

.form-sec{
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(circle at 14% 28%,rgba(212,162,76,.13),transparent 30%),
    radial-gradient(circle at 90% 85%,rgba(111,78,50,.16),transparent 28%),
    linear-gradient(145deg,#191814,#11110f);
}

.form-sec::before{
  content:"";
  position:absolute;
  width:540px;
  height:540px;
  left:-300px;
  bottom:-350px;
  border:1px solid rgba(212,162,76,.08);
  border-radius:50%;
  box-shadow:
    0 0 0 65px rgba(212,162,76,.018),
    0 0 0 130px rgba(212,162,76,.012);
}

.form-grid{
  position:relative;
  z-index:1;
}

.form-info{
  padding-top:18px;
}

.company-info{
  padding:26px;
  border:1px solid rgba(239,237,231,.08);
  border-radius:10px;
  background:rgba(11,11,10,.24);
  backdrop-filter:blur(4px);
}

.panel{
  border-radius:10px;
  box-shadow:
    0 30px 70px rgba(0,0,0,.28),
    0 0 0 1px rgba(255,255,255,.08) inset;
}

.submit{
  background:
    linear-gradient(135deg,#151512,#0b0b0a);
}

.submit:hover{
  background:
    linear-gradient(135deg,#e0b45f,var(--amber));
}

/* ---------- footer ---------- */

footer{
  background:
    radial-gradient(circle at 50% 0%,rgba(212,162,76,.06),transparent 35%),
    #050504;
}

/* ---------- reveal um pouco mais orgânico ---------- */

.reveal{
  transform:translateY(28px) scale(.992);
  transition:
    opacity .8s ease,
    transform .8s cubic-bezier(.2,.72,.2,1);
}

.reveal.in{
  transform:none;
}

/* ---------- responsivo do refresh ---------- */

@media(max-width:960px){

  .hero{
    min-height:auto;
  }

  .hero-grid{
    min-height:auto;
    padding-block:72px 56px;
  }

  .hero h1{
    max-width:12ch;
  }

  .hero-visual{
    min-height:500px;
    margin-top:-12px;
  }

  .hero-board-img{
    max-height:500px;
  }

  .hero::before{
    width:520px;
    right:-240px;
    top:45%;
  }

  .brand-swap{
    gap:26px;
  }

  .bs-arrow{
    transform:rotate(90deg);
  }

  .personal-card{
    max-width:620px;
    width:100%;
    margin:0 auto;
  }

  .personal-card img{
    width:100%;
  }

  .who div{
    min-height:190px;
  }

}

@media(max-width:800px){

  section:not(.hero) .section-head{
    padding-left:20px;
  }

  .hero-stats{
    max-width:560px;
  }

  .hero-stat{
    min-width:105px;
    padding-right:18px;
    margin-right:18px;
  }

}

@media(max-width:560px){

  body::before{
    opacity:.018;
  }

  .hero-grid{
    padding-block:56px 38px;
  }

  .hero h1{
    max-width:none;
    font-size:clamp(44px,14vw,58px);
  }

  .hero .eyebrow{
    font-size:12px;
  }

  .hero-stats{
    gap:16px 0;
  }

  .hero-stat{
    width:50%;
    min-width:0;
    margin:0;
    padding:0 14px 0 0;
    border-right:0;
  }

  .hero-visual{
    min-height:380px;
    margin-top:-6px;
  }

  .hero-board-img{
    max-height:390px;
  }

  .visual-caption{
    bottom:-2px;
    max-width:96%;
    width:auto;
    font-size:10px;
    white-space:normal;
  }

  section:not(.hero) .section-head{
    padding-left:17px;
  }

  section:not(.hero) .section-head::before{
    height:46px;
  }

  .bento{
    gap:10px;
  }

  .bento .big{
    min-height:300px;
  }

  .bento a{
    min-height:210px;
    border-radius:10px;
  }

  .personal-card{
    min-height:350px;
  }

  .personal-card img{
    height:350px;
  }

  .steps,
  .who{
    gap:10px;
  }

  .step{
    min-height:220px;
  }

  .who div{
    min-height:180px;
  }

  .coll-card{
    flex-basis:210px;
    height:110px;
  }

  .faq summary{
    padding:18px 18px;
    font-size:18px;
  }

  .faq details p{
    padding:0 46px 20px 18px;
  }

  .company-info{
    padding:20px;
  }

}


/* =========================================================
   MOVIMENTO REDUZIDO
   ========================================================= */

@media(prefers-reduced-motion:reduce){

  *,
  *::before,
  *::after{
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
    transition-duration:.01ms!important;
    scroll-behavior:auto!important;
  }

  .reveal{
    opacity:1;
    transform:none;
  }

}