/* ===== Before The Hype Club — tokens da identidade (Noono Studio) ===== */
:root {
  --bthc-offwhite:  #F2EFEB;
  --bthc-manz:      #F2EE79;
  --bthc-pink:      #F4B3E3;
  --bthc-terracota: #D96C55;
  --bthc-buccaneer: #683737;
  --bthc-masala:    #423533;

  /* Tokens de uso (trocam após o envio do formulário) */
  --bthc-bg:     var(--bthc-masala);
  --bthc-accent: var(--bthc-manz);

  --bthc-font-sans: 'Inter Tight', system-ui, sans-serif;
  --bthc-font-mono: 'IBM Plex Mono', ui-monospace, monospace;

  --bthc-symbol-h: clamp(110px, 36vw, 280px);
}

/* Etapa concluída: paleta do slide "WELCOME" */
body.bthc.bthc-done {
  --bthc-bg:     var(--bthc-buccaneer);
  --bthc-accent: var(--bthc-pink);
}

body.bthc {
  transition: background-color .8s ease;
  background: var(--bthc-bg);
  color: var(--bthc-offwhite);
  font-family: var(--bthc-font-sans);
  font-weight: 500;
  -webkit-font-smoothing: antialiased;
}

/* ===== Hero ===== */
.bthc-hero {
  display: flex;
  flex-direction: column;
  padding-block: 2.5rem;
}
.bthc-hero__inner {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 3.5rem;
}

.bthc-title {
  font-family: var(--bthc-font-sans);
  font-weight: 500;
  font-size: clamp(2.5rem, 12.5vw, 8rem);
  line-height: .95;
  letter-spacing: -.02em;
  color: var(--bthc-accent);
  margin: 0;
}

.bthc-logo {
  display: block;
  width: clamp(110px, 13vw, 200px);
  aspect-ratio: 300 / 170;
  margin-top: .35em;
  background-color: var(--bthc-accent);
  -webkit-mask: var(--bthc-logo-src) center / contain no-repeat;
          mask: var(--bthc-logo-src) center / contain no-repeat;
  transition: background-color .8s ease;
}

/* Cores do símbolo (SVG) */
.bthc-stop { stop-color: var(--bthc-accent); transition: stop-color .8s ease; }

/* Transição de cor nos elementos de destaque */
.bthc-title,
.bthc-intro__text strong,
.bthc-label,
.bthc-success__title { transition: color .8s ease; }

.bthc-label {
  font-family: var(--bthc-font-mono);
  font-weight: 400;
  font-size: clamp(.625rem, 1.1vw, .9rem);
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--bthc-offwhite);
  margin: 0;
}

.bthc-symbol {
  display: block;
  height: var(--bthc-symbol-h);
  width: auto;
  max-width: 100%;
}
.bthc-symbol--h { height: calc(var(--bthc-symbol-h) * .874); }

.bthc-symbols { min-height: var(--bthc-symbol-h); }

/* ===== Texto + formulário ===== */
.bthc-intro { padding-block: 4rem 6rem; }

.bthc-intro__text {
  font-size: clamp(1.25rem, 2.2vw, 1.875rem);
  line-height: 1.35;
  letter-spacing: -.01em;
  margin: 0;
}
.bthc-intro__text strong {
  font-weight: 500;
  color: var(--bthc-accent);
}

/* Campos do contact form (escopo .bthc-form) */
.bthc-form label {
  font-family: var(--bthc-font-mono);
  font-weight: 400;
  font-size: .8rem;
  text-transform: uppercase;
  letter-spacing: .02em;
  display: block;
  margin-bottom: .25rem;
}
.bthc-form input[type="text"],
.bthc-form input[type="email"],
.bthc-form input[type="tel"],
.bthc-form input[type="url"],
.bthc-form select,
.bthc-form textarea {
  width: 100%;
  background: transparent;
  border: 0;
  border-bottom: 1px solid rgba(242, 239, 235, .4);
  border-radius: 0;
  color: var(--bthc-offwhite);
  font-family: var(--bthc-font-sans);
  font-size: 1.125rem;
  padding: .5rem 0;
  margin-bottom: 1.5rem;
  transition: border-color .2s;
}
.bthc-form select option { color: var(--bthc-bg); }
.bthc-form input:focus,
.bthc-form select:focus,
.bthc-form textarea:focus {
  outline: 0;
  border-bottom-color: var(--bthc-accent);
}
.bthc-form input[type="submit"],
.bthc-form button[type="submit"] {
  background: var(--bthc-accent);
  color: var(--bthc-bg);
  border: 0;
  border-radius: 0;
  font-family: var(--bthc-font-mono);
  font-size: .9rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  padding: 1rem 2rem;
  cursor: pointer;
  transition: background .2s;
	font-weight: 600;
}
.bthc-form input[type="submit"]:hover,
.bthc-form button[type="submit"]:hover { background: var(--bthc-offwhite); }

.bthc-form input[type="date"] {
  width: 100%;
  background: transparent;
  border: 0;
  border-bottom: 1px solid rgba(242, 239, 235, .4);
  border-radius: 0;
  color: var(--bthc-offwhite);
  font-family: var(--bthc-font-sans);
  font-size: 1.125rem;
  padding: .5rem 0;
  margin-bottom: 1.5rem;
  color-scheme: dark;
}

/* Interesses: checkboxes como etiquetas */
.bthc-interesses { border: 0; padding: 0; margin: 0 0 2rem; }
.bthc-interesses legend {
  font-family: var(--bthc-font-mono);
  font-weight: 400;
  font-size: .8rem;
  text-transform: uppercase;
  letter-spacing: .02em;
  margin-bottom: .75rem;
}
.bthc-interesses__count { color: var(--bthc-accent); }
.bthc-interesses .wpcf7-checkbox { display: flex; flex-wrap: wrap; gap: .5rem; }
.bthc-interesses .wpcf7-list-item { margin: 0; }
.bthc-interesses .wpcf7-list-item label {
  display: inline-block;
  margin: 0;
  cursor: pointer;
  position: relative;
}
.bthc-interesses input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  inset: 0;
  margin: 0;
  cursor: pointer;
}
.bthc-interesses .wpcf7-list-item-label {
  display: inline-block;
  font-family: var(--bthc-font-sans);
  font-size: 1rem;
  text-transform: none;
  letter-spacing: 0;
  border: 1px solid rgba(242, 239, 235, .4);
  padding: .5rem 1rem;
  transition: background .2s, color .2s, border-color .2s, opacity .2s;
}
.bthc-interesses input:checked + .wpcf7-list-item-label {
  background: var(--bthc-accent);
  border-color: var(--bthc-accent);
  color: var(--bthc-bg);
}
.bthc-interesses input:focus-visible + .wpcf7-list-item-label { outline: 2px solid var(--bthc-accent); outline-offset: 2px; }
.bthc-interesses input:disabled,
.bthc-interesses input:disabled + .wpcf7-list-item-label { cursor: not-allowed; opacity: .35; }

/* Mensagens do Contact Form 7 */
.bthc-form .wpcf7-not-valid-tip,
.bthc-erro {
  color: var(--bthc-pink);
  font-family: var(--bthc-font-mono);
  font-size: .75rem;
  text-transform: none;
  letter-spacing: 0;
  margin: -1rem 0 1.5rem;
  display: block;
}
.bthc-interesses .bthc-erro { margin: .75rem 0 0; }
.bthc-form .wpcf7 form .wpcf7-response-output {
  border: 1px solid rgba(242, 239, 235, .4);
  margin: 1.5rem 0 0;
  padding: .75rem 1rem;
  font-family: var(--bthc-font-mono);
  font-size: .8rem;
}
.bthc-form .wpcf7-spinner { background-color: var(--bthc-accent); }

/* Após o envio */
.bthc-success__title {
  font-size: clamp(1.5rem, 2.6vw, 2.25rem);
  line-height: 1.2;
  color: var(--bthc-accent);
  margin: .75rem 0 2rem;
}
.bthc-success__btn {
  display: inline-block;
  background: var(--bthc-accent);
  color: var(--bthc-bg);
  font-family: var(--bthc-font-mono);
  font-size: .9rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  text-decoration: none;
  padding: 1rem 2rem;
  transition: background .2s;
}
.bthc-success__btn:hover { background: var(--bthc-offwhite); color: var(--bthc-bg); }

/* ===== Rodapé NBZ ===== */
.nbz-footer {
  border-top: 1px solid rgba(242, 239, 235, .15);
  font-family: var(--bthc-font-mono);
  font-weight: 400;
  font-size: .75rem;
  text-transform: uppercase;
  letter-spacing: .02em;
}
.nbz-footer a {
  color: var(--bthc-offwhite);
  text-decoration: none;
}
.nbz-footer a:hover { color: var(--bthc-accent); }

@media (min-width: 992px) {
  :root { --bthc-symbol-h: min(19vw, 280px); }
  .bthc-hero { min-height: 100svh; }
  .bthc-title { font-size: min(7.6vw, 8rem); }
}