/* ==========================================================================
   Wizard de cadastro (/pt/espera) — escopo próprio, sem tocar em main.css.
   Namespace .hhw-*  ·  root do tema = 62.5% (1rem = 10px)
   ========================================================================== */

.hhw {
  --hhw-accent: #14b8a6;
  --hhw-accent-soft: rgba(20, 184, 166, .16);
  --hhw-accent-line: rgba(20, 184, 166, .38);
  --hhw-surface: rgba(15, 23, 42, .72);
  --hhw-surface-solid: #0f172a;
  --hhw-field: #0b1424;
  --hhw-stroke: rgba(148, 163, 184, .18);
  --hhw-stroke-strong: rgba(148, 163, 184, .32);
  --hhw-bright: #e9e9f1;
  --hhw-muted: #94a3b8;
  --hhw-error: #fb7185;
  --hhw-radius: 2.4rem;
  --hhw-ease: cubic-bezier(.23, .65, .74, 1.09);
}

/* --- layout da página ---------------------------------------------------
   .content reserva 330–500px à esquerda para a sidebar fixa do tema. Esta
   página não usa aquela sidebar, então o espaço volta para o conteúdo. */
/* o tema trava 360px de largura mínima; esta página vai até 320px */
body.hhw-page, .hhw-page .content { min-width: 320px; }
.hhw { padding: 0 1.6rem; }
@media only screen and (min-width: 768px) { .hhw { padding: 0 3.2rem; } }
@media only screen and (min-width: 992px) { .hhw { padding: 0 3rem; } }
/* o card usa toda a largura do miolo */

/* --- shell -------------------------------------------------------------- */
.hhw-shell {
  width: 100%;
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 0 6rem;
}


/* --- card --------------------------------------------------------------- */
.hhw-card {
  position: relative;
  background: var(--hhw-surface);
  border: 1px solid var(--hhw-stroke);
  border-radius: var(--hhw-radius);
  padding: 2.8rem 2.2rem 3rem;
  box-shadow: 0 2.4rem 6rem rgba(2, 6, 23, .55);
  overflow: hidden;
}
/* glow discreto no topo do card, no lugar de glass pesado */
.hhw-card::before {
  content: "";
  position: absolute;
  top: -18rem; left: 50%;
  width: 42rem; height: 30rem;
  transform: translateX(-50%);
  background: radial-gradient(closest-side, var(--hhw-accent-soft), transparent 70%);
  pointer-events: none;
}
.hhw-card > * { position: relative; }

/* --- progresso ---------------------------------------------------------- */
.hhw-progress { display: flex; align-items: center; gap: .8rem; margin-bottom: 2.8rem; }
.hhw-progress__dot {
  width: .9rem; height: .9rem; border-radius: 999px;
  background: var(--hhw-stroke-strong);
  transition: background .3s var(--hhw-ease), transform .3s var(--hhw-ease);
  flex: none;
}
.hhw-progress__bar {
  flex: 1; height: .2rem; max-width: 4.4rem;
  background: var(--hhw-stroke);
  border-radius: 999px;
  overflow: hidden;
}
.hhw-progress__bar span {
  display: block; height: 100%; width: 0;
  background: var(--hhw-accent);
  transition: width .45s var(--hhw-ease);
}
.hhw-progress__step.is-done .hhw-progress__dot,
.hhw-progress__step.is-active .hhw-progress__dot { background: var(--hhw-accent); }
.hhw-progress__step.is-active .hhw-progress__dot { transform: scale(1.25); }
.hhw-progress__step.is-done .hhw-progress__bar span { width: 100%; }
.hhw-progress__step { display: contents; }
.hhw-progress__label {
  margin-left: auto;
  font-size: 1.3rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--hhw-muted);
}

/* --- passos ------------------------------------------------------------- */
.hhw-steps { position: relative; }
.hhw-step { display: none; }
.hhw-step.is-current { display: block; animation: hhw-in .38s var(--hhw-ease) both; }
@keyframes hhw-in {
  from { opacity: 0; transform: translateY(1.2rem); }
  to   { opacity: 1; transform: none; }
}
/* volta: entra pelo outro lado */
.hhw-steps.is-back .hhw-step.is-current { animation-name: hhw-in-back; }
@keyframes hhw-in-back {
  from { opacity: 0; transform: translateY(-1.2rem); }
  to   { opacity: 1; transform: none; }
}

.hhw-eyebrow {
  display: inline-flex; align-items: center; gap: .8rem;
  font-size: 1.3rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--hhw-accent);
  margin-bottom: 1.8rem;
}
.hhw-eyebrow::before {
  content: ""; width: .7rem; height: .7rem; border-radius: 999px;
  background: var(--hhw-accent);
  box-shadow: 0 0 0 .4rem var(--hhw-accent-soft);
}
.hhw-title {
  font-size: clamp(3.2rem, 8vw, 4.4rem);
  line-height: 1.08;
  font-weight: 700;
  color: var(--hhw-bright);
  margin: 0 0 1.6rem;
  letter-spacing: -.02em;
}
.hhw-lead { font-size: 1.7rem; line-height: 1.55; color: var(--hhw-muted); margin: 0 0 2.4rem; }
.hhw-lead strong { color: var(--hhw-bright); font-weight: 600; }

/* --- selo de benefício -------------------------------------------------- */
.hhw-perk {
  display: flex; align-items: center; gap: 1.2rem;
  padding: 1.4rem 1.6rem;
  border: 1px solid var(--hhw-accent-line);
  background: var(--hhw-accent-soft);
  border-radius: 1.6rem;
  margin-bottom: 2.8rem;
}
.hhw-perk__icon {
  flex: none; width: 3.2rem; height: 3.2rem; border-radius: 999px;
  display: grid; place-items: center;
  background: var(--hhw-accent); color: #06231f; font-size: 1.8rem;
}
.hhw-perk__title { font-size: 1.7rem; font-weight: 700; color: var(--hhw-bright); line-height: 1.2; }
.hhw-perk__note { font-size: 1.35rem; color: var(--hhw-muted); }

/* --- campos ------------------------------------------------------------- */
.hhw-fields { display: grid; gap: 1.6rem; margin-bottom: 2.4rem; }
.hhw-field { display: block; }
.hhw-field__label {
  display: block;
  font-size: 1.35rem; font-weight: 600; color: var(--hhw-muted);
  margin-bottom: .8rem; letter-spacing: .01em;
}
.hhw-field__input {
  width: 100%;
  min-height: 5.6rem;
  padding: 1.4rem 1.6rem;
  font-family: inherit;
  font-size: 1.6rem;
  color: var(--hhw-bright);
  background: var(--hhw-field);
  border: 1px solid var(--hhw-stroke-strong);
  border-radius: 1.4rem;
  outline: none;
  transition: border-color .18s var(--hhw-ease), box-shadow .18s var(--hhw-ease);
  -webkit-appearance: none;
  appearance: none;
}
.hhw-field__input::placeholder { color: #64748b; }
.hhw-field__input:focus-visible {
  border-color: var(--hhw-accent);
  box-shadow: 0 0 0 .3rem var(--hhw-accent-soft);
}
.hhw-field.has-error .hhw-field__input { border-color: var(--hhw-error); }
.hhw-field.has-error .hhw-field__input:focus-visible { box-shadow: 0 0 0 .3rem rgba(251, 113, 133, .2); }
.hhw-field__error {
  display: none;
  font-size: 1.3rem; color: var(--hhw-error);
  margin-top: .7rem;
}
.hhw-field.has-error .hhw-field__error { display: block; }
/* autofill do Chrome não pode voltar ao azul do main.css */
.hhw-field__input:-webkit-autofill,
.hhw-field__input:-webkit-autofill:focus {
  box-shadow: 0 0 0 1000px var(--hhw-field) inset !important;
  -webkit-text-fill-color: var(--hhw-bright) !important;
}

/* --- botões ------------------------------------------------------------- */
.hhw-actions { display: flex; align-items: center; gap: 1.2rem; }
.hhw-btn {
  appearance: none;
  display: inline-flex; align-items: center; justify-content: center; gap: 1rem;
  width: 100%;
  min-height: 5.6rem;
  padding: 1.4rem 2.4rem;
  font-family: inherit; font-size: 1.7rem; font-weight: 700;
  color: #06231f;
  background: var(--hhw-accent);
  border: 1px solid transparent;
  border-radius: 1.4rem;
  cursor: pointer;
  transition: transform .16s var(--hhw-ease), filter .16s var(--hhw-ease), box-shadow .16s var(--hhw-ease);
  box-shadow: 0 .8rem 2.4rem rgba(20, 184, 166, .22);
}
.hhw-btn:hover { filter: brightness(1.06); transform: translateY(-.1rem); }
.hhw-btn:active { transform: translateY(0); }
.hhw-btn:focus-visible { outline: .3rem solid var(--hhw-accent-soft); outline-offset: .3rem; }
.hhw-btn[disabled] { opacity: .65; cursor: not-allowed; transform: none; filter: none; }
.hhw-btn__spinner {
  display: none;
  width: 1.8rem; height: 1.8rem; flex: none;
  border: .25rem solid rgba(6, 35, 31, .3);
  border-top-color: #06231f;
  border-radius: 999px;
  animation: hhw-spin .7s linear infinite;
}
.hhw-btn.is-loading .hhw-btn__spinner { display: block; }
.hhw-btn.is-loading .hhw-btn__icon { display: none; }
@keyframes hhw-spin { to { transform: rotate(360deg); } }

.hhw-btn--ghost {
  width: auto; flex: none;
  min-width: 5.6rem;
  padding: 1.4rem 1.8rem;
  color: var(--hhw-muted);
  background: transparent;
  border-color: var(--hhw-stroke-strong);
  box-shadow: none;
  font-size: 1.5rem;
}
.hhw-btn--ghost:hover { color: var(--hhw-bright); filter: none; }

.hhw-hint { margin-top: 1.6rem; font-size: 1.3rem; color: #64748b; text-align: center; }
.hhw-hint a { color: var(--hhw-muted); text-decoration: underline; }

/* --- erro de envio ------------------------------------------------------ */
.hhw-alert {
  display: none;
  align-items: flex-start; gap: 1rem;
  padding: 1.4rem 1.6rem;
  margin-bottom: 1.8rem;
  border: 1px solid rgba(251, 113, 133, .4);
  background: rgba(251, 113, 133, .1);
  border-radius: 1.4rem;
  font-size: 1.45rem;
  color: #fecdd3;
}
.hhw-alert.is-visible { display: flex; }

/* --- sucesso ------------------------------------------------------------ */
.hhw-success { text-align: center; }
.hhw-check-mark {
  width: 7.2rem; height: 7.2rem; margin: 0 auto 2.4rem;
  border-radius: 999px;
  display: grid; place-items: center;
  background: var(--hhw-accent-soft);
  border: 1px solid var(--hhw-accent-line);
}
.hhw-check-mark svg { width: 3.4rem; height: 3.4rem; }
.hhw-check__path {
  stroke: var(--hhw-accent);
  stroke-width: 3.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
  stroke-dasharray: 32;
  stroke-dashoffset: 32;
  animation: hhw-draw .5s var(--hhw-ease) .18s forwards;
}
@keyframes hhw-draw { to { stroke-dashoffset: 0; } }

.hhw-success .hhw-title { font-size: clamp(2.8rem, 7vw, 3.8rem); }
.hhw-highlight {
  padding: 2rem 1.8rem;
  margin: 2.4rem 0 1.8rem;
  border-radius: 1.6rem;
  border: 1px solid var(--hhw-stroke-strong);
  background: rgba(15, 23, 42, .6);
}
.hhw-highlight__label {
  font-size: 1.25rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--hhw-accent); margin-bottom: .8rem;
}
.hhw-highlight__value { font-size: 2rem; font-weight: 700; color: var(--hhw-bright); line-height: 1.3; }
.hhw-chip {
  display: inline-flex; align-items: center; gap: .8rem;
  padding: 1rem 1.6rem;
  border-radius: 999px;
  border: 1px solid var(--hhw-accent-line);
  background: var(--hhw-accent-soft);
  color: var(--hhw-bright);
  font-size: 1.45rem; font-weight: 600;
}

/* telas estreitas: o rótulo do submit não pode quebrar em duas linhas */
@media only screen and (max-width: 479px) {
  .hhw-actions .hhw-btn { font-size: 1.5rem; padding-left: 1.2rem; padding-right: 1.2rem; gap: .7rem; }
  .hhw-actions .hhw-btn--ghost { min-width: 4.8rem; }
  .hhw-actions [data-submit] .hhw-btn__icon { display: none; }
}
.hhw-btn { white-space: nowrap; }

/* ====== */

/* ==========================================================================
   Tablet
   ========================================================================== */
@media only screen and (min-width: 768px) {
  .hhw-card { padding: 4rem 4rem 4.4rem; }
  .hhw-shell { padding-bottom: 8rem; }
  .hhw-fields--split { grid-template-columns: 1fr 1fr; }
}

/* ==========================================================================
   Desktop — coluna institucional + wizard
   ========================================================================== */

@media only screen and (min-width: 1200px) {
  .hhw-card { padding: 4.8rem 5.2rem 5.2rem; }
}

/* ==========================================================================
   Acessibilidade
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .hhw-step.is-current,
  .hhw-check__path,
  .hhw-btn__spinner { animation: none !important; }
  .hhw-check__path { stroke-dashoffset: 0; }
  .hhw-btn, .hhw-progress__dot, .hhw-progress__bar span { transition: none !important; }
}


/* ==========================================================================
   Campos adicionais do cadastro completo (selects, opções, checkbox, código)
   ========================================================================== */
.hhw-field__input--select {
  padding-right: 4.4rem;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1.6rem center;
}
.hhw-field__input--select:disabled { opacity: .55; cursor: default; }
.hhw-field__input--select option { background: var(--hhw-surface-solid); color: var(--hhw-bright); }
.hhw-field__input[type="date"] { min-height: 5.6rem; color-scheme: dark; }
.hhw-field__input[type="date"]::-webkit-calendar-picker-indicator { filter: invert(.7); cursor: pointer; }
.hhw-field__hint { font-weight: 500; color: #64748b; margin-left: .6rem; text-transform: none; }
.hhw-field__row { margin-top: .8rem; }
.hhw-field__row:first-of-type { margin-top: 0; }
.hhw-field__row--inline { display: flex; gap: .8rem; }
.hhw-field__row--inline .hhw-field__input { flex: 1; }
.hhw-fields--split { display: grid; gap: 1.6rem; }
.hhw-fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.hhw-fieldset legend { padding: 0; }
.hhw-field[hidden], .hhw-field__row[hidden] { display: none !important; }

/* cartões de opção (radio) */
.hhw-options { display: grid; gap: .8rem; }
.hhw-option { display: block; cursor: pointer; }
.hhw-option input { position: absolute; opacity: 0; width: 0; height: 0; }
.hhw-option__box {
  display: flex; align-items: center; gap: 1rem;
  min-height: 5.2rem; padding: 1.2rem 1.4rem;
  font-size: 1.5rem; font-weight: 600; color: var(--hhw-bright);
  background: var(--hhw-field);
  border: 1px solid var(--hhw-stroke-strong);
  border-radius: 1.4rem;
  transition: border-color .18s var(--hhw-ease), box-shadow .18s var(--hhw-ease), background .18s var(--hhw-ease);
}
.hhw-option__dot {
  flex: none; width: 1.8rem; height: 1.8rem; border-radius: 999px;
  border: .2rem solid var(--hhw-stroke-strong);
  display: grid; place-items: center;
  transition: border-color .18s var(--hhw-ease);
}
.hhw-option__dot::after { content: ""; width: .8rem; height: .8rem; border-radius: 999px; background: var(--hhw-accent); transform: scale(0); transition: transform .18s var(--hhw-ease); }
.hhw-option input:checked + .hhw-option__box { border-color: var(--hhw-accent); background: var(--hhw-accent-soft); }
.hhw-option input:checked + .hhw-option__box .hhw-option__dot { border-color: var(--hhw-accent); }
.hhw-option input:checked + .hhw-option__box .hhw-option__dot::after { transform: scale(1); }
.hhw-option input:focus-visible + .hhw-option__box { box-shadow: 0 0 0 .3rem var(--hhw-accent-soft); border-color: var(--hhw-accent); }
.hhw-option__box:hover { border-color: var(--hhw-accent-line); }

/* chips de especialidade */
.hhw-chips { display: flex; flex-wrap: wrap; gap: .6rem; margin-bottom: .8rem; }
.hhw-chips:empty { display: none; }
.hhw-chip--tag { padding: .6rem .6rem .6rem 1.4rem; font-size: 1.4rem; gap: .6rem; }
.hhw-chip__x {
  appearance: none; border: 0; cursor: pointer;
  width: 2.4rem; height: 2.4rem; border-radius: 999px;
  background: rgba(255,255,255,.08); color: var(--hhw-bright);
  font-size: 1.8rem; line-height: 1; display: grid; place-items: center;
}
.hhw-chip__x:hover, .hhw-chip__x:focus-visible { background: rgba(251,113,133,.25); outline: none; }

/* checkbox de termos */
.hhw-check { display: flex; align-items: flex-start; gap: 1.2rem; cursor: pointer; font-size: 1.4rem; line-height: 1.5; color: var(--hhw-muted); }
.hhw-check input { position: absolute; opacity: 0; width: 0; height: 0; }
.hhw-check__box {
  flex: none; width: 2.4rem; height: 2.4rem; margin-top: .1rem;
  border-radius: .7rem; border: 1px solid var(--hhw-stroke-strong);
  background: var(--hhw-field); color: #06231f; font-size: 1.4rem;
  display: grid; place-items: center;
  transition: background .18s var(--hhw-ease), border-color .18s var(--hhw-ease);
}
.hhw-check__box i { opacity: 0; transform: scale(.6); transition: opacity .18s, transform .18s var(--hhw-ease); }
.hhw-check input:checked + .hhw-check__box { background: var(--hhw-accent); border-color: var(--hhw-accent); }
.hhw-check input:checked + .hhw-check__box i { opacity: 1; transform: scale(1); }
.hhw-check input:focus-visible + .hhw-check__box { box-shadow: 0 0 0 .3rem var(--hhw-accent-soft); border-color: var(--hhw-accent); }
.hhw-check a { color: var(--hhw-bright); text-decoration: underline; }
.hhw-field.has-error .hhw-check__box { border-color: var(--hhw-error); }

/* honeypot */
.hhw-hp { position: absolute; left: -9999px; top: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* código de 6 dígitos */
.hhw-code__input {
  font-size: 3rem; letter-spacing: .5em; text-align: center;
  font-variant-numeric: tabular-nums; padding-left: 2rem;
  min-height: 7rem;
}
.hhw-code__input::placeholder { letter-spacing: .5em; color: #475569; }
.hhw-link {
  appearance: none; background: none; border: 0; padding: 0;
  font: inherit; color: var(--hhw-muted); text-decoration: underline; cursor: pointer;
}
.hhw-link:hover, .hhw-link:focus-visible { color: var(--hhw-bright); outline: none; }
.hhw-link[disabled] { color: #475569; text-decoration: none; cursor: default; }
[data-resend-ok] { color: var(--hhw-accent); }

@media only screen and (min-width: 768px) {
  .hhw-options { grid-template-columns: 1fr 1fr 1fr; }
  .hhw-fields--split { grid-template-columns: 1fr 1fr; }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .hhw-options:not(.hhw-options--3) { grid-template-columns: 1fr; }
}

/* selo de benefício: oferta e observação em linhas separadas */
.hhw-perk__title, .hhw-perk__note { display: block; }
.hhw-perk__note { margin-top: .2rem; }