/* Capa v2 · SEÇÕES 2 a 6 (29/09/2026) · uma referência do GPT por seção.
   Tokens e fontes vêm de styles.css. */

html{scrollbar-width:none}
html::-webkit-scrollbar{display:none}

.secao{
  position:relative;
  z-index:1;
  padding:clamp(90px,13vh,150px) clamp(20px,5.6vw,94px);
  max-width:1560px;
  margin:0 auto;
}

.rotulo{
  font-family:var(--mono);
  font-weight:500;
  font-size:clamp(11px,.9vw,14px);
  letter-spacing:.42em;
  text-transform:uppercase;
  color:var(--cobre-claro);
}

.titulo{
  margin-top:clamp(12px,1.6vh,20px);
  font-family:var(--titulo);
  font-stretch:112%;
  font-weight:800;
  font-size:clamp(38px,4.9vw,86px);
  line-height:.95;
  letter-spacing:-.04em;
  color:var(--branco);
  text-wrap:balance;
}

.corpo{
  margin-top:clamp(14px,2vh,22px);
  font-size:clamp(16px,1.3vw,21px);
  line-height:1.55;
  color:var(--texto);
  max-width:34em;
}

.cabeca{margin-bottom:clamp(30px,5vh,54px)}
.cabeca.centro{text-align:center}
.cabeca.centro .titulo{margin-left:auto;margin-right:auto}

/* reveal: visível por padrão; o JS só adiciona a entrada */
html.anima .sobe{opacity:0;transform:translateY(34px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
html.anima .sobe.visto{opacity:1;transform:none}

/* ---------- 2 · quem sou eu ---------- */

.quem{
  display:grid;
  grid-template-columns:1.12fr .88fr;
  gap:clamp(40px,5.6vw,100px);
  align-items:start;
}

.quem-fotos{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(10px,1vw,16px);
}

.f{margin:0;border-radius:14px;overflow:hidden;background:#1a1a1d;box-shadow:0 30px 60px -30px rgba(0,0,0,.8)}
.f img{display:block;width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)}
.f:hover img{transform:scale(1.045)}
.f1{aspect-ratio:1/.72}
.f2{aspect-ratio:1/.8;margin-top:clamp(28px,3.4vw,58px)}
.f3{aspect-ratio:1/.82}
.f4{aspect-ratio:1/1.04;margin-top:clamp(28px,3.4vw,58px)}
.f5{grid-column:1 / -1;width:74%;margin-left:13%;aspect-ratio:1/.62}

.quem-texto{padding-top:clamp(40px,8vh,120px)}

/* ---------- 3 · o que eu faço ---------- */

.fatias{
  display:grid;
  grid-template-columns:2fr 1fr 1fr;
  gap:clamp(10px,.9vw,14px);
  height:clamp(460px,70vh,680px);
  transition:grid-template-columns .8s var(--ease);
}
.fatias:has(.fatia:nth-child(2):hover),
.fatias:has(.fatia:nth-child(2):focus-visible){grid-template-columns:1fr 2fr 1fr}
.fatias:has(.fatia:nth-child(3):hover),
.fatias:has(.fatia:nth-child(3):focus-visible){grid-template-columns:1fr 1fr 2fr}

.fatia{
  position:relative;
  overflow:hidden;
  border-radius:16px;
  border:1px solid rgba(224,160,99,.18);
  background:#1a1a1d;
  outline:none;
}
.fatia img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  transform:scale(1.06);
  transition:transform 1.2s var(--ease),filter .6s;
  filter:saturate(.95) brightness(.9);
}
.fatia:hover img,.fatia:focus-visible img{transform:scale(1);filter:saturate(1.05) brightness(1)}
.fatia::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,rgba(12,12,14,0) 30%,rgba(12,12,14,.55) 58%,rgba(12,12,14,.95) 100%);
}
.fatia:focus-visible{border-color:var(--branco)}
.fatia-texto{
  position:absolute;
  z-index:1;
  left:clamp(20px,2vw,38px);
  right:clamp(20px,2vw,38px);
  bottom:clamp(22px,2.6vw,40px);
}
.num{
  font-weight:700;
  font-size:clamp(18px,1.6vw,26px);
  color:var(--cobre-claro);
  font-variant-numeric:tabular-nums;
}
.fatia h3{
  margin-top:6px;
  font-stretch:112%;
  font-weight:800;
  font-size:clamp(24px,2.6vw,46px);
  line-height:1;
  letter-spacing:-.035em;
  color:var(--branco);
}
.fatia p{
  margin-top:12px;
  font-size:clamp(15px,1.12vw,19px);
  line-height:1.5;
  color:var(--texto);
  max-width:30em;
}

/* ---------- 4 · o que está aberto ---------- */

.bento{
  display:grid;
  grid-template-columns:repeat(12,1fr);
  grid-template-rows:repeat(3,minmax(170px,auto));
  gap:clamp(10px,.9vw,14px);
}

.porta{
  position:relative;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  padding:clamp(20px,1.8vw,30px);
  border-radius:16px;
  border:1px solid rgba(224,160,99,.2);
  background:
    radial-gradient(120% 90% at 100% 0%,rgba(187,115,51,.16),transparent 55%),
    #17171a;
  transition:transform .5s var(--ease),border-color .3s,box-shadow .5s var(--ease);
}
a.porta:hover,a.porta:focus-visible{
  transform:translateY(-4px);
  border-color:rgba(224,160,99,.55);
  box-shadow:0 24px 44px -22px rgba(0,0,0,.85);
  outline:none;
}
.porta img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform 1.2s var(--ease);
}
.porta:hover img{transform:scale(1.04)}
.p-revista:hover{border-color:rgba(224,160,99,.55)}
.p-revista:hover img{transform:scale(1.04)}
.p-europa::after,.p-revista::after,.p-salvador::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,rgba(12,12,14,0) 40%,rgba(12,12,14,.92) 100%);
}
.porta-texto{position:relative;z-index:1}
/* a capa do dia fica em cima, inteira à vista; o texto senta no escuro, embaixo */
.p-revista img{height:74%;object-position:50% 12%}
.p-revista::after{background:linear-gradient(180deg,rgba(12,12,14,0) 32%,rgba(12,12,14,.88) 54%,#141416 68%)}
.revista-acoes{display:flex;flex-direction:column;align-items:flex-start;gap:12px;margin-top:14px}
.revista-ler{
  display:inline-flex;
  align-items:center;
  gap:8px;
  min-height:42px;
  padding:0 18px;
  border-radius:9px;
  background:var(--cobre-botao);
  color:#1a1009;
  font-weight:600;
  font-size:clamp(14px,.95vw,15px);
  transition:transform .35s var(--ease);
}
.revista-ler:hover{transform:translateY(-2px)}
.revista-assinar{
  font-weight:600;
  font-size:clamp(14px,.95vw,15px);
  color:var(--cobre-claro);
  border-bottom:1.5px solid currentColor;
  padding-bottom:2px;
}
.revista-assinar span{display:inline-block;transition:transform .35s var(--ease)}
.revista-assinar:hover span{transform:translateX(4px)}
.revista-ler:focus-visible,.revista-assinar:focus-visible{outline:2px solid var(--branco);outline-offset:3px}
.porta .rotulo{font-size:clamp(10px,.78vw,12px);letter-spacing:.34em}
.porta h3{
  margin-top:8px;
  font-stretch:110%;
  font-weight:800;
  font-size:clamp(21px,1.75vw,30px);
  line-height:1.02;
  letter-spacing:-.03em;
  color:var(--branco);
  text-wrap:balance;
}
.porta p{
  margin-top:8px;
  font-size:clamp(14px,.98vw,16px);
  line-height:1.45;
  color:var(--suave);
  max-width:30em;
}
.seta{
  position:absolute;
  z-index:2;
  top:clamp(16px,1.4vw,24px);
  right:clamp(18px,1.5vw,26px);
  font-size:clamp(20px,1.6vw,26px);
  line-height:1;
  color:var(--cobre-claro);
  transition:transform .4s var(--ease);
}
a.porta:hover .seta{transform:translate(3px,-3px)}

.p-europa{grid-column:1 / 6;grid-row:1 / 4;min-height:520px}
/* 01/10: a viagem de agora, faixa larga embaixo da grade */
.p-salvador{grid-column:1 / -1;grid-row:4;min-height:320px;justify-content:center}
.p-salvador img{left:auto;width:52%;object-position:50% 40%}
.p-salvador::after{background:linear-gradient(90deg,#17171a 46%,rgba(23,23,26,.6) 56%,rgba(23,23,26,0) 72%) !important}
.p-salvador .porta-texto{max-width:44%}
.p-salvador h3{font-size:clamp(26px,2.4vw,40px)}
.p-salvador p{color:var(--texto);font-size:clamp(15px,1.1vw,18px)}
.p-europa h3{font-size:clamp(28px,2.7vw,46px)}
.p-europa p{color:var(--texto);font-size:clamp(15px,1.1vw,18px)}
.p-mala{grid-column:6 / 10;grid-row:1}
.p-revista{grid-column:10 / 13;grid-row:1 / 3}
.p-raiox{grid-column:6 / 10;grid-row:2}
.p-ia{grid-column:6 / 8;grid-row:3}
.p-ia,.p-digital{padding:clamp(18px,1.3vw,22px)}
.p-ia h3,.p-digital h3{font-stretch:100%;font-size:clamp(16px,1.15vw,20px);white-space:nowrap}
.p-digital{grid-column:8 / 10;grid-row:3}
.p-breve{grid-column:10 / 13;grid-row:3;border-style:dashed;border-color:rgba(163,154,140,.35);background:transparent}
.p-breve h3,.p-breve .rotulo{color:var(--suave)}

/* ---------- 5 · o que eu vendo (díptico) ---------- */

.produtos{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:1fr 1fr;
  min-height:min(100vh,860px);
  margin-top:clamp(40px,8vh,90px);
}

.produto{
  position:relative;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
  padding:clamp(56px,9vh,110px) clamp(24px,4.4vw,80px) clamp(220px,34vh,330px);
}
.prod-tenkbio{background:linear-gradient(160deg,#D8904D,#B96A2C 70%,#9C5520);color:#1a1009}
.prod-firma{background:#141416;color:var(--branco)}

.produto .rotulo{color:#2a1a0d;margin-bottom:clamp(26px,5vh,48px)}
.prod-firma .prod-nome{margin-top:calc(clamp(11px,.9vw,14px) * 1.5 + clamp(26px,5vh,48px))}

.prod-nome{
  font-family:var(--titulo);
  font-stretch:78%;
  font-weight:800;
  font-size:clamp(64px,9.6vw,176px);
  line-height:.86;
  letter-spacing:-.035em;
  transition:transform .8s var(--ease);
}
.produto:hover .prod-nome{transform:translateX(8px)}
.prod-frase{
  margin-top:clamp(18px,3vh,30px);
  font-weight:700;
  font-size:clamp(20px,1.9vw,32px);
  line-height:1.15;
  letter-spacing:-.01em;
  max-width:18em;
}
.prod-corpo{
  margin-top:10px;
  font-size:clamp(16px,1.25vw,21px);
  line-height:1.5;
  max-width:24em;
}
.prod-tenkbio .prod-corpo{color:#1a1009}
.prod-firma .prod-corpo{color:var(--texto)}
.prod-link{
  display:inline-flex;
  align-items:center;
  gap:10px;
  margin-top:clamp(20px,3vh,32px);
  font-weight:600;
  font-size:clamp(16px,1.2vw,20px);
  border-bottom:1.5px solid currentColor;
  padding-bottom:4px;
  align-self:flex-start;
  position:relative;
  z-index:1;
}
.prod-link span{transition:transform .4s var(--ease)}
.produto:hover .prod-link span{transform:translateX(6px)}
.prod-firma .prod-link{color:var(--cobre-claro)}

.prod-foto{
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  width:100%;
  height:clamp(200px,32vh,310px);
  object-fit:cover;
  -webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 42%);
  mask-image:linear-gradient(180deg,transparent 0%,#000 42%);
  transition:transform 1.4s var(--ease);
}
.produto:hover .prod-foto{transform:scale(1.03)}
.produto:focus-visible{outline:2px solid var(--branco);outline-offset:-6px}

/* ---------- 6 · fecho ---------- */

.fecho{
  text-align:center;
  padding-bottom:clamp(30px,5vh,50px);
}
.fecho-miolo{
  display:flex;
  flex-direction:column;
  align-items:center;
  padding-top:clamp(20px,6vh,60px);
}
.fecho-foto{
  width:clamp(110px,9vw,150px);
  height:auto;
  aspect-ratio:1;
  object-fit:cover;
  object-position:50% 18%;
  border-radius:50%;
  border:2px solid rgba(224,160,99,.6);
  box-shadow:0 20px 44px -18px rgba(0,0,0,.9);
  margin-bottom:clamp(22px,3.4vh,34px);
}
.fecho .titulo{max-width:14em;font-size:clamp(40px,5.6vw,98px)}
.fecho .corpo{margin-left:auto;margin-right:auto}
.botoes.centro{justify-content:center;margin-top:clamp(26px,4vh,40px)}
.rodape{
  margin-top:clamp(90px,14vh,150px);
  font-family:var(--mono);
  font-size:13px;
  letter-spacing:.05em;
  color:var(--suave);
}

/* ---------- celular ---------- */

@media (max-width:860px){
  .secao{padding:78px 20px}
  .titulo{font-size:clamp(34px,10vw,52px)}

  .quem{grid-template-columns:1fr;gap:34px}
  .quem-texto{padding-top:0;order:-1}

  .fatias{grid-template-columns:1fr;grid-auto-rows:340px;height:auto}
  .fatias:has(.fatia:nth-child(2):hover),
  .fatias:has(.fatia:nth-child(3):hover),
  .fatias:has(.fatia:nth-child(2):focus-visible),
  .fatias:has(.fatia:nth-child(3):focus-visible){grid-template-columns:1fr}

  .bento{grid-template-columns:1fr 1fr;grid-template-rows:none}
  .porta{grid-column:auto;grid-row:auto;min-height:170px}
  .p-europa,.p-mala,.p-revista,.p-raiox,.p-breve,.p-salvador{grid-column:1 / -1;grid-row:auto}
  .p-salvador{min-height:420px;justify-content:flex-end}
  .p-salvador img{width:100%;left:0;object-position:50% 30%}
  .p-salvador::after{background:linear-gradient(180deg,rgba(12,12,14,0) 36%,rgba(12,12,14,.8) 56%,rgba(12,12,14,.95) 78%) !important}
  .p-salvador .porta-texto{max-width:none}
  .p-ia,.p-digital{grid-column:auto;grid-row:auto}
  .p-europa{min-height:380px}
  .p-revista{min-height:500px}

  .produtos{grid-template-columns:1fr;min-height:0}
  .produto{padding:64px 20px 230px}
  .prod-firma .prod-nome{margin-top:0}
  .prod-nome{font-size:clamp(52px,17vw,110px)}

  .fecho .titulo{font-size:clamp(36px,11vw,56px)}
  .botoes.centro .btn,.botoes.centro .btn2{flex:1 1 100%}
}

@media (prefers-reduced-motion:reduce){
  html.anima .sobe{opacity:1;transform:none;transition:none}
  .fatias{transition:none}
}