/* ==========================================================================
   Clube do Buco — base compartilhada
   Identidade herdada de renatomarano.com.br: Inter 300, títulos em caixa alta,
   paleta fria monocromática, botão pílula vazada, filete com ponto.
   Sem build, sem dependência. Editar aqui muda o site inteiro.
   ========================================================================== */

:root{
  /* superfícies, do mais fundo ao mais claro */
  --breu:#12171D;        /* fundo da página */
  --carvao:#1B2129;      /* seções e cartões sobre o breu */
  --grafite:#4C4F54;     /* blocos de apoio */
  --navy:#25405D;        /* única nota cromática, herdada do site oficial */
  --navy-claro:#33547A;

  /* superfícies claras (seções de respiro) */
  --osso:#E6E6E3;
  --osso-fundo:#EFEFEC;

  /* texto */
  --claro:#E6E6E3;       /* texto principal sobre escuro */
  --cinza:#929497;       /* texto de apoio */
  --apagado:#6E7378;     /* placeholders, legendas */
  --escuro:#1B2129;      /* texto sobre superfícies claras */
  --escuro-medio:#4C4F54;

  /* traços */
  --fio:rgba(230,230,227,.16);
  --fio-fraco:rgba(230,230,227,.08);
  --fio-escuro:rgba(27,33,41,.16);
  --fio-escuro-fraco:rgba(27,33,41,.08);

  /* estados (dessaturados para não brigar com a paleta) */
  --bom:#6E9B82;
  --atencao:#B8946A;
  --grave:#B87A72;
  --bom-fundo:rgba(110,155,130,.14);
  --atencao-fundo:rgba(184,148,106,.14);
  --grave-fundo:rgba(184,122,114,.14);

  --sombra:0 1px 2px rgba(0,0,0,.3),0 18px 50px rgba(0,0,0,.28);
  --sombra-forte:0 30px 80px rgba(0,0,0,.5);

  --fonte:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;

  --raio:4px;            /* cantos discretos: o arredondamento vive nos botões */
  --pilula:40px;
  --gut:clamp(20px,5vw,56px);
  --max:1180px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{animation:none!important;transition:none!important}
}

body{
  margin:0;background:var(--breu);color:var(--claro);
  font-family:var(--fonte);font-size:16px;font-weight:300;line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:1px solid var(--claro);outline-offset:3px}

/* ---------- tipografia ---------- */
h1,h2,h3,h4{
  margin:0;font-weight:300;text-transform:uppercase;
  color:var(--claro);line-height:1.16;text-wrap:balance;
}
h1{font-size:clamp(29px,4.4vw,46px)}
h2{font-size:clamp(25px,3.2vw,36px)}
h3{font-size:clamp(17px,1.7vw,21px)}
h4{font-size:15px}
p{margin:0}

/* peso 500 dentro de um título vira ênfase sem mudar a cor */
h1 b,h2 b,h3 b{font-weight:500}

.texto{color:var(--cinza);font-size:16px;line-height:1.5;max-width:62ch;font-weight:300}
.texto-p{font-size:14px;color:var(--cinza);line-height:1.55}

/* superfícies claras invertem o texto */
.claro-bg{background:var(--osso);color:var(--escuro)}
.claro-bg h1,.claro-bg h2,.claro-bg h3,.claro-bg h4{color:var(--escuro)}
.claro-bg .texto,.claro-bg .texto-p{color:var(--escuro-medio)}

/* ---------- assinatura: rótulo + filete + ponto ---------- */
.rotulo{
  display:flex;align-items:center;gap:16px;margin:0 0 22px;
  font-size:12px;font-weight:400;letter-spacing:.22em;text-transform:uppercase;
  color:var(--cinza);
}
.rotulo::after{
  content:"";flex:1;height:1px;max-width:180px;
  background:linear-gradient(to right,var(--fio) 0%,var(--fio) calc(100% - 5px),transparent calc(100% - 5px));
  position:relative;
}
.rotulo .ponto{width:5px;height:5px;border-radius:50%;background:var(--cinza);flex:none;margin-left:-16px}
.rotulo.centro{justify-content:center}
.rotulo.centro::after{display:none}
.rotulo.centro .ponto{display:none}
.claro-bg .rotulo{color:var(--escuro-medio)}
.claro-bg .rotulo::after{background:linear-gradient(to right,var(--fio-escuro) 0%,var(--fio-escuro) calc(100% - 5px),transparent calc(100% - 5px))}
.claro-bg .rotulo .ponto{background:var(--escuro-medio)}

/* ---------- estrutura ---------- */
.faixa{max-width:var(--max);margin:0 auto;padding-inline:var(--gut)}
.faixa-estreita{max-width:840px;margin:0 auto;padding-inline:var(--gut)}
section{padding-block:clamp(56px,8vw,110px)}
.navy-bg{background:var(--navy)}
.carvao-bg{background:var(--carvao)}
.regua{height:1px;background:var(--fio);border:0;margin:0}

/* ---------- botões ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:12px;
  text-decoration:none;cursor:pointer;
  border:1px solid var(--claro);border-radius:var(--pilula);background:transparent;
  color:var(--claro);padding:16px 40px;font-size:15px;font-weight:300;line-height:1;
  transition:background .22s,color .22s,border-color .22s;
}
.btn:hover{background:var(--claro);color:var(--breu)}
.btn .seta{transition:transform .22s}
.btn:hover .seta{transform:translateX(4px)}

.btn-cheio{background:var(--claro);color:var(--breu)}
.btn-cheio:hover{background:transparent;color:var(--claro)}

.btn-navy{border-color:var(--navy-claro);background:var(--navy);color:var(--claro)}
.btn-navy:hover{background:var(--navy-claro);border-color:var(--navy-claro);color:var(--claro)}

.btn-fraco{border-color:var(--fio);color:var(--cinza);padding-inline:26px}
.btn-fraco:hover{border-color:var(--claro);background:transparent;color:var(--claro)}

.btn-pp{padding:10px 22px;font-size:13px}
.btn[disabled],.btn[aria-disabled=true]{opacity:.45;pointer-events:none}

.claro-bg .btn{border-color:var(--escuro);color:var(--escuro)}
.claro-bg .btn:hover{background:var(--escuro);color:var(--osso)}
.claro-bg .btn-cheio{background:var(--escuro);color:var(--osso)}
.claro-bg .btn-cheio:hover{background:transparent;color:var(--escuro)}

/* ---------- marca ---------- */
.marca{display:flex;align-items:center;gap:12px;text-decoration:none;flex:none}
.marca .simbolo{
  width:32px;height:32px;border-radius:50%;flex:none;overflow:hidden;
  border:1px solid var(--fio);background:var(--breu);
}
.marca .simbolo img{width:100%;height:100%;object-fit:cover;display:block}
.marca .nome{
  font-size:11px;font-weight:400;letter-spacing:.26em;text-transform:uppercase;
  white-space:nowrap;color:var(--claro);
}
.claro-bg .marca .nome{color:var(--escuro)}
.claro-bg .marca .simbolo{border-color:var(--fio-escuro)}

/* ---------- campos ---------- */
.campo{display:flex;flex-direction:column;gap:8px;min-width:0}
.campo > .nome-campo{
  font-size:11px;font-weight:400;letter-spacing:.14em;text-transform:uppercase;
  color:var(--cinza);display:block;line-height:1.5;
}
/* o asterisco anda colado na última palavra: como flex, ele era jogado
   para a ponta direita sempre que o rótulo quebrava em duas linhas */
.campo > .nome-campo b{color:var(--claro);font-weight:400;margin-left:4px;white-space:nowrap}
.campo .dica{font-size:13px;color:var(--apagado);line-height:1.5;font-weight:300;margin:-3px 0 1px}

input[type=text],input[type=email],input[type=tel],input[type=password],input[type=date],
input[type=search],select,textarea{
  width:100%;min-width:0;font-family:var(--fonte);font-size:15px;font-weight:300;
  background:transparent;color:var(--claro);
  border:0;border-bottom:1px solid var(--fio);border-radius:0;
  padding:10px 2px;transition:border-color .2s;
}
textarea{
  resize:vertical;line-height:1.6;padding:12px 14px;
  border:1px solid var(--fio);background:rgba(230,230,227,.03);
}
select{
  appearance:none;cursor:pointer;padding-right:26px;
  background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),
                   linear-gradient(135deg,currentColor 50%,transparent 50%);
  background-position:calc(100% - 11px) 55%,calc(100% - 6px) 55%;
  background-size:5px 5px,5px 5px;background-repeat:no-repeat;
}
select option{background:var(--carvao);color:var(--claro)}
input:hover,select:hover,textarea:hover{border-color:rgba(230,230,227,.34)}
input:focus,select:focus,textarea:focus{outline:0;border-color:var(--claro)}
::placeholder{color:var(--apagado);font-weight:300}

.campo.erro input,.campo.erro select,.campo.erro textarea{border-color:var(--grave)}
.campo .msg-erro{font-size:12.5px;color:var(--grave);display:none;font-weight:300}
.campo.erro .msg-erro{display:block}

/* campos sobre superfície clara */
.claro-bg input,.claro-bg select,.claro-bg textarea{color:var(--escuro);border-color:var(--fio-escuro)}
.claro-bg textarea{background:rgba(27,33,41,.03);border:1px solid var(--fio-escuro)}
.claro-bg select option{background:var(--osso);color:var(--escuro)}
.claro-bg input:focus,.claro-bg select:focus,.claro-bg textarea:focus{border-color:var(--escuro)}
.claro-bg .campo > .nome-campo{color:var(--escuro-medio)}
.claro-bg .campo > .nome-campo b{color:var(--escuro)}
.claro-bg .campo .dica{color:var(--escuro-medio)}
.claro-bg ::placeholder{color:rgba(27,33,41,.38)}

/* ---------- etiquetas ---------- */
.etiqueta{
  font-size:11px;font-weight:400;letter-spacing:.1em;text-transform:uppercase;
  padding:6px 14px;border:1px solid var(--fio);border-radius:var(--pilula);
  color:var(--cinza);white-space:nowrap;
}
.etiqueta b{color:var(--claro);font-weight:400}
.claro-bg .etiqueta{border-color:var(--fio-escuro);color:var(--escuro-medio)}
.claro-bg .etiqueta b{color:var(--escuro)}

.indice{
  font-size:11px;font-weight:400;letter-spacing:.2em;color:var(--apagado);
  font-variant-numeric:tabular-nums;
}

/* ---------- grades ---------- */
.grade{display:grid;gap:clamp(16px,2.4vw,28px)}
.c2{grid-template-columns:repeat(2,1fr)}
.c3{grid-template-columns:repeat(3,1fr)}
.c4{grid-template-columns:repeat(4,1fr)}
@media (max-width:900px){.c3,.c4{grid-template-columns:repeat(2,1fr)}}
@media (max-width:620px){.c2,.c3,.c4{grid-template-columns:1fr}}

/* ---------- utilidades ---------- */
.pilha{display:flex;flex-direction:column}
.linha{display:flex;align-items:center}
.quebra{flex-wrap:wrap}
.v-pp{gap:10px}.v{gap:18px}.v-g{gap:30px}
.t-pp{margin-top:18px}.t{margin-top:30px}.t-g{margin-top:52px}
.centro{text-align:center}
.numerico{font-variant-numeric:tabular-nums}
.oculto-visual{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}