/* =========================================================
   Rodrigo Avanzo — link da bio · versão F
   Direção: CARTAZ SERIGRÁFICO em duas tintas verdes.
   Tinta 1: verde-floresta Legado. Tinta 2: verde ácido.
   Papel: marfim. Dourado: só fio e numeração.
   ========================================================= */

:root{
  --forest:   #203D36;   /* tinta principal (Legado) */
  --forest-2: #2C4F45;   /* fio/divisória sobre escuro */
  --forest-3: #16302A;   /* sombra profunda */
  --acid:     #CBF24C;   /* tinta 2 — verde ácido */
  --acid-ink: #7FA321;   /* ácido queimado (trama impressa) */
  --paper:    #F3EEE4;   /* marfim */
  --gold:     #C39F66;   /* detalhe mínimo */
  --moss:     #8FA79C;   /* dado secundário sobre escuro */
  --moss-2:   #6E8A7E;   /* dado secundário sobre marfim */

  --gutter: clamp(16px, 4.6vw, 64px);
  --arr-gap: clamp(20px,6vw,34px);
  --top-gap: clamp(22px,6vw,48px);
  --rule: 1px;

  --exp: 125%;
  --cond: 70%;

  --ease: cubic-bezier(.16,1,.3,1);
}

*,*::before,*::after{ box-sizing:border-box; }

html{ background: var(--forest); }

body{
  margin:0;
  background: var(--forest);
  color: var(--paper);
  font-family:"Archivo", system-ui, -apple-system, sans-serif;
  font-synthesis-weight:none;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

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

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

:focus-visible{
  outline: 3px solid var(--acid);
  outline-offset: 3px;
}

.pular{
  position:absolute; left:-9999px; top:0; z-index:50;
  background:var(--acid); color:var(--forest);
  padding:12px 18px;
  font-family:"Martian Mono", ui-monospace, monospace;
  font-size:12px;
}
.pular:focus{ left:0; }

/* ---------- micro-tipografia utilitária ---------- */
.trilho__local,.rotulo__conta,.lote__num,.lote__tag,
.rodape__copy,.rodape__link,.faixa__bloco{
  font-family:"Martian Mono", ui-monospace, "SFMono-Regular", monospace;
  text-transform:uppercase;
  letter-spacing:.02em;
}

/* =========================================================
   TRILHO SUPERIOR — barra floresta com a marca
   ========================================================= */
.trilho{
  display:flex; justify-content:space-between; align-items:center;
  gap:16px;
  padding: 12px var(--gutter);
  background: var(--forest);
  border-bottom: 2px solid var(--forest-3);
}
.trilho__marca{ width:77px; height:36px; flex:none; }
.trilho__local{
  font-size:10px; font-weight:700;
  color: var(--moss);
  white-space:nowrap;
}

/* =========================================================
   CARTAZ (hero) — campo de tinta ácida
   ========================================================= */
.cartaz{
  position:relative;
  background: var(--acid);
  color: var(--forest);
  padding: var(--top-gap) var(--gutter) 0;
  overflow:hidden;

  display:grid;
  grid-template-columns: 1fr 52%;
  grid-template-areas:
    "nome nome"
    "txt  foto"
    "arr  foto";
  align-items:end;
  column-gap: clamp(10px,3vw,28px);
}

/* trama de serigrafia */
.cartaz::after{
  content:"";
  position:absolute; inset:0;
  pointer-events:none;
  background-image: radial-gradient(var(--acid-ink) 1px, transparent 1.1px);
  background-size: 5px 5px;
  opacity:.28;
  mix-blend-mode:multiply;
}

.cartaz__foto{
  grid-area: foto;
  width: calc(100% + var(--gutter));
  height:auto;
  justify-self:end;
  margin-right: calc(var(--gutter) * -1);
  margin-top: -6%;
  margin-bottom: calc(var(--arr-gap) * -1);
  align-self:end;
  -webkit-mask-image: linear-gradient(100deg, transparent 0%, #000 18%, #000 100%);
          mask-image: linear-gradient(100deg, transparent 0%, #000 18%, #000 100%);
}

.nome{
  grid-area: nome;
  position:relative;
  z-index:2;
  margin: 0 0 clamp(14px,4vw,26px);
  font-weight:900;
  font-stretch: var(--exp);
  text-transform:uppercase;
  line-height:.76;
  letter-spacing:-.035em;
  color: var(--forest);
}
.nome__l1,.nome__l2{ display:block; }
.nome__l1{ font-size: 14.7vw; }
.nome__l2{ font-size: 16.35vw; }

.linha{
  grid-area: txt;
  position:relative; z-index:2;
  margin:0 0 10px;
  max-width: 15ch;
  font-size: clamp(15px,4.3vw,21px);
  font-weight:600;
  font-stretch:100%;
  line-height:1.2;
  letter-spacing:-.015em;
  text-wrap:balance;
}

.arroba{
  grid-area: arr;
  position:relative; z-index:2;
  margin:0 0 var(--arr-gap);
  font-size: clamp(13px,3.4vw,16px);
  font-weight:800;
  font-stretch: var(--cond);
  text-transform:uppercase;
  letter-spacing:.06em;
}

/* =========================================================
   FAIXA ROLANTE
   ========================================================= */
.faixa{
  overflow:hidden;
  background: var(--paper);
  color: var(--forest);
  border-top: 2px solid var(--forest-3);
  border-bottom: 2px solid var(--forest-3);
  padding: 9px 0;
}
.faixa__trilha{
  display:flex; width:max-content;
  animation: correr 26s linear infinite;
}
.faixa:hover .faixa__trilha{ animation-play-state:paused; }
.faixa__bloco{
  flex:none;
  font-size:11px; font-weight:700;
  white-space:nowrap;
}
.faixa__bloco i{ color: var(--gold); font-style:normal; padding:0 .35em; }

@keyframes correr{ from{ transform:translate3d(0,0,0);} to{ transform:translate3d(-33.3333%,0,0);} }

/* =========================================================
   RÓTULO DE SEÇÃO
   ========================================================= */
.rotulo{
  display:flex; align-items:baseline; justify-content:space-between;
  gap:14px;
  padding: clamp(30px,7vw,56px) var(--gutter) clamp(12px,2.4vw,18px);
}
.rotulo__texto{
  margin:0;
  font-size: clamp(30px,10vw,64px);
  font-weight:900;
  font-stretch: var(--cond);
  text-transform:uppercase;
  letter-spacing:-.02em;
  line-height:.9;
  color: var(--paper);
}
.rotulo__conta{
  font-size:10px; font-weight:700;
  color: var(--moss);
  white-space:nowrap;
}
.rotulo--papel .rotulo__texto{ color: var(--forest); }
.rotulo--papel .rotulo__conta{ color: var(--moss-2); }

/* =========================================================
   LOTES (links principais)
   ========================================================= */
.lotes{ list-style:none; margin:0; padding:0; border-top: var(--rule) solid var(--forest-2); }

.lote__link{
  display:grid;
  grid-template-columns: auto 1fr auto;
  grid-template-areas:
    "num tag  seta"
    "tit tit  seta";
  align-items:center;
  column-gap: 12px;
  row-gap: 4px;
  padding: clamp(16px,4.4vw,24px) var(--gutter);
  border-bottom: var(--rule) solid var(--forest-2);
  background: transparent;
  transition: background-color .28s var(--ease), color .28s var(--ease);
}

.lote__num{
  grid-area:num;
  font-size:10px; font-weight:700;
  color: var(--gold);
  transition: color .28s var(--ease);
}
.lote__tag{
  grid-area:tag;
  font-size:10px; font-weight:700;
  color: var(--moss);
  transition: color .28s var(--ease);
}
.lote__titulo{
  grid-area:tit;
  font-size: clamp(25px,7.6vw,44px);
  font-weight:800;
  font-stretch: var(--cond);
  text-transform:uppercase;
  letter-spacing:-.018em;
  line-height:1;
}
.lote__seta{
  grid-area:seta;
  font-size: clamp(24px,6.6vw,36px);
  line-height:1;
  color: var(--acid);
  transition: transform .34s var(--ease), color .28s var(--ease);
}

@media (hover:hover){
  .lote__link:hover{ background: var(--acid); color: var(--forest); }
  .lote__link:hover .lote__num,
  .lote__link:hover .lote__tag,
  .lote__link:hover .lote__seta{ color: var(--forest); }
  .lote__link:hover .lote__seta{ transform: translate3d(7px,-7px,0); }
}
.lote__link:active{ background: var(--paper); color: var(--forest); }
.lote__link:active .lote__num,
.lote__link:active .lote__tag,
.lote__link:active .lote__seta{ color: var(--forest); }

.lote__link:focus-visible{
  outline:3px solid var(--acid);
  outline-offset:-5px;
}

/* =========================================================
   SÓCIOS — verso do cartaz, em papel marfim
   ========================================================= */
.socios{
  background: var(--paper);
  color: var(--forest);
  border-top: 2px solid var(--forest-3);
}

.dupla{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--rule);
  background: var(--gold);          /* o fio dourado nasce do vão */
  border-top: var(--rule) solid var(--gold);
  border-bottom: var(--rule) solid var(--gold);
}

.socio{
  margin:0;
  background: var(--forest-3);
  display:flex;
  flex-direction:column;
}
.socio img{
  width:100%; height:auto;
  aspect-ratio: 315 / 580;
  object-fit:cover;
  object-position: 50% 22%;
}
.socio__nome{
  padding: 12px var(--gutter) 16px;
  font-size: clamp(19px,5.6vw,30px);
  font-weight:800;
  font-stretch: var(--cond);
  text-transform:uppercase;
  line-height:.94;
  letter-spacing:-.015em;
  color: var(--paper);
  background: var(--forest-3);
}
.socio__nome span{ display:block; color: var(--acid); }
.dupla .socio:nth-child(2) .socio__nome{ padding-left: clamp(14px,3.6vw,28px); }

.socios__nota{
  margin:0;
  padding: clamp(18px,4.6vw,26px) var(--gutter) clamp(30px,7vw,54px);
  font-size: clamp(17px,4.6vw,21px);
  font-weight:600;
  font-stretch:100%;
  line-height:1.28;
  letter-spacing:-.015em;
  max-width: 24ch;
  text-wrap:balance;
  color: var(--forest);
}

/* =========================================================
   REDES
   ========================================================= */
.redes{ border-top: 2px solid var(--forest-3); }
.redes__grade{
  display:grid;
  grid-template-columns: repeat(2,1fr);
  gap: var(--rule);
  background: var(--forest-2);
  border-top: var(--rule) solid var(--forest-2);
  border-bottom: var(--rule) solid var(--forest-2);
}
.rede{
  display:flex; align-items:center; justify-content:space-between;
  gap:8px;
  min-height:64px;
  padding: 16px var(--gutter);
  background: var(--forest);
  font-size: clamp(14px,4vw,19px);
  font-weight:800;
  font-stretch: var(--cond);
  text-transform:uppercase;
  letter-spacing:.01em;
  transition: background-color .24s var(--ease), color .24s var(--ease);
}
.rede i{ font-style:normal; color: var(--acid); transition: color .24s var(--ease), transform .3s var(--ease); }
@media (hover:hover){
  .rede:hover{ background: var(--acid); color: var(--forest); }
  .rede:hover i{ color: var(--forest); transform: translate3d(5px,-5px,0); }
}
.rede:active{ background: var(--paper); color: var(--forest); }
.rede:active i{ color: var(--forest); }
.rede:focus-visible{ outline:3px solid var(--acid); outline-offset:-4px; }

.redes__grade .rede:nth-child(2n){ padding-left: clamp(14px,3.6vw,28px); }

/* =========================================================
   RODAPÉ
   ========================================================= */
.rodape{
  padding: clamp(28px,7vw,52px) var(--gutter) clamp(34px,9vw,64px);
  display:flex; flex-direction:column; gap:22px;
}
.rodape__marca{ width:88px; height:41px; align-self:flex-start; opacity:.9; }
.rodape__texto{ display:flex; flex-direction:column; gap:10px; }
.rodape__link{
  display:inline-flex; align-items:center;
  min-height:48px;
  font-size:10px; font-weight:700;
  color: var(--paper);
  text-decoration:underline;
  text-underline-offset:4px;
  text-decoration-color: var(--moss);
  align-self:flex-start;
  transition: color .2s var(--ease), text-decoration-color .2s var(--ease);
}
.rodape__link:hover{ color: var(--acid); text-decoration-color: var(--acid); }
.rodape__copy{ margin:0; font-size:10px; color: var(--moss); }

/* =========================================================
   DESKTOP
   ========================================================= */
@media (min-width: 880px){
  .trilho{ padding-top:18px; padding-bottom:18px; }
  .trilho__marca{ width:92px; height:43px; }

  .cartaz{
    grid-template-columns: minmax(0,1fr) 36%;
    grid-template-areas:
      "nome foto"
      "txt  foto"
      "arr  foto";
    --top-gap: clamp(40px,5vw,80px);
    --arr-gap: clamp(40px,5vw,78px);
    grid-template-rows: auto 1fr auto;
    align-items:start;
    column-gap: clamp(24px,4vw,64px);
  }
  .nome__l1{ font-size: min(9.15vw, 176px); }
  .nome__l2{ font-size: min(10.2vw, 196px); }
  .linha{ max-width:22ch; font-size: clamp(20px,1.9vw,29px); align-self:end; margin-top: clamp(10px,2vw,22px); margin-bottom:14px; }
  .arroba{ align-self:start; }
  .cartaz__foto{
    align-self:stretch;
    height:auto;
    object-fit:cover;
    object-position: 50% 14%;
    margin-top: calc(var(--top-gap) * -1);
    -webkit-mask-image: linear-gradient(100deg, transparent 0%, #000 15%, #000 100%);
            mask-image: linear-gradient(100deg, transparent 0%, #000 15%, #000 100%);
  }

  .lote__link{
    grid-template-columns: 78px minmax(0,1fr) 190px auto;
    grid-template-areas: "num tit tag seta";
    column-gap: clamp(16px,2.4vw,40px);
  }
  .lote__tag{ text-align:right; }

  .socios__corpo{
    display:grid;
    grid-template-columns: minmax(0, 760px) minmax(0,1fr);
    align-items:start;
    column-gap: clamp(32px,5vw,80px);
    padding-right: var(--gutter);
  }
  .socio__nome{ padding: 14px clamp(18px,2vw,30px) 20px; font-size: clamp(24px,2.2vw,34px); }
  .dupla .socio:nth-child(2) .socio__nome{ padding-left: clamp(18px,2vw,30px); }
  .socios__nota{ padding: 0 0 clamp(26px,3vw,44px); max-width:15ch; font-size: clamp(28px,3vw,46px); font-weight:700; line-height:1.1; }

  .redes__grade{ grid-template-columns: repeat(4,1fr); }
  .rede{ min-height:96px; }
  .redes__grade .rede{ padding-left: clamp(18px,2vw,32px); padding-right: clamp(18px,2vw,32px); }
  .redes__grade .rede:first-child{ padding-left: var(--gutter); }
  .redes__grade .rede:last-child{ padding-right: var(--gutter); }

  .rodape{ flex-direction:row; justify-content:space-between; align-items:center; }
  .rodape__texto{ align-items:flex-end; }
}

/* =========================================================
   ENTRADA EM CASCATA (só CSS)
   ========================================================= */
@media (prefers-reduced-motion: no-preference){
  .nome__l1,.nome__l2{
    animation: subir .95s var(--ease) both;
    clip-path: inset(0 0 0 0);
  }
  .nome__l2{ animation-delay:.09s; }
  .linha{ animation: aparecer .8s var(--ease) .26s both; }
  .arroba{ animation: aparecer .8s var(--ease) .34s both; }
  .cartaz__foto{ animation: aparecer 1.1s var(--ease) .12s both; }
  .lote{ animation: aparecer .7s var(--ease) both; animation-delay: calc(.30s + var(--i) * .07s); }
  .redes__grade{ animation: aparecer .7s var(--ease) .62s both; }

  @keyframes subir{
    from{ transform: translate3d(0,42%,0); opacity:0; }
    to  { transform: translate3d(0,0,0);   opacity:1; }
  }
  @keyframes aparecer{
    from{ transform: translate3d(0,14px,0); opacity:0; }
    to  { transform: translate3d(0,0,0);    opacity:1; }
  }
}

@media (prefers-reduced-motion: reduce){
  .faixa__trilha{ animation:none; }
  *{ transition-duration:.01ms !important; animation-duration:.01ms !important; animation-iteration-count:1 !important; }
}