/* components.css — botões, header, cards, formulário, toggles. Tudo chapado. */

/* ---------- Botões ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .7rem;
  font-family: var(--sans); font-weight: 600; font-size: var(--t-sm);
  letter-spacing: .01em; line-height: 1; cursor: pointer;
  padding: 1.05rem 1.7rem; border: 1px solid transparent; border-radius: var(--raio);
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.btn svg { width: 18px; height: 18px; transition: transform var(--dur) var(--ease); }
.btn:hover svg { transform: translateX(4px); }

/* Sobre fundo claro: CTA verde sólido. Sobre fundo escuro: CTA dourado. */
.btn--primario { background: var(--verde); color: var(--papel); }
.btn--primario:hover { background: var(--tinta); }
.secao--escura .btn--primario,
.oferta-card .btn--primario,
.sim-resultado .btn--primario { background: var(--gold); color: var(--verde); }
.secao--escura .btn--primario:hover,
.oferta-card .btn--primario:hover,
.sim-resultado .btn--primario:hover { background: var(--gold-escuro); color: var(--papel); }

.btn--escuro { background: var(--verde); color: var(--papel); }
.btn--escuro:hover { background: var(--gold); color: var(--verde); }

.btn--contorno { background: transparent; color: inherit; border-color: currentColor; }
.btn--contorno:hover { background: var(--tinta); color: var(--papel); border-color: var(--tinta); }

.btn--bloco { width: 100%; }
.btn--lg { padding: 1.2rem 2rem; font-size: 1rem; }
.btn--fantasma {
  background: transparent; color: var(--txt-inv-suave); border-color: var(--linha-inv);
}
.secao--escura .btn--fantasma { color: var(--papel); border-color: #ffffff33; }
.btn--fantasma:hover { background: #ffffff12; color: var(--papel); border-color: #ffffff55; }
.sim-wiz-foot .btn--fantasma { color: var(--txt-suave); border-color: var(--linha-forte); }
.sim-wiz-foot .btn--fantasma:hover { background: var(--verde); color: var(--papel); }

/* Link editorial com sublinhado animado */
.link-seta {
  display: inline-flex; align-items: center; gap: .6rem;
  font-weight: 600; font-size: var(--t-sm); letter-spacing: .02em;
  padding-bottom: 4px; position: relative; color: inherit;
}
.link-seta::after { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform var(--dur) var(--ease); }
.link-seta:hover::after { transform: scaleX(1); }
.link-seta svg { width: 18px; height: 18px; transition: transform var(--dur) var(--ease); }
.link-seta:hover svg { transform: translateX(4px); }

/* ---------- Header ---------- */
.cabecalho {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  display: flex; align-items: center; justify-content: space-between; gap: var(--gap);
  padding: clamp(16px, 2vw, 24px) var(--margem);
  background: var(--verde);
  transition: padding var(--dur) var(--ease), border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
  border-bottom: 1px solid var(--linha-inv);
}
.cabecalho.is-stuck { padding-block: clamp(11px, 1.3vw, 15px); box-shadow: 0 10px 30px #0f25214d; }
.marca-topo { display: flex; align-items: center; gap: .65rem; color: var(--papel); }
.marca-topo .emblema { width: clamp(38px, 4vw, 46px); height: auto; flex: 0 0 auto; }
.marca-topo strong { font-family: var(--serif); font-weight: 400; font-size: clamp(1.15rem, 2vw, 1.4rem); letter-spacing: .01em; line-height: 1; }
.marca-topo small { display: block; font-family: var(--mono); font-weight: 600; font-size: .54rem; letter-spacing: .26em; text-transform: uppercase; opacity: .7; margin-bottom: 3px; }

.nav { display: flex; align-items: center; gap: clamp(20px, 2.4vw, 40px); }
.nav a:not(.btn) { color: var(--papel); font-family: var(--mono); font-size: var(--t-eyebrow); letter-spacing: .16em; text-transform: uppercase; opacity: .82; transition: opacity var(--dur) var(--ease); }
.nav a:not(.btn):hover { opacity: 1; }
.nav .btn { padding: .7rem 1.2rem; }
.cabecalho .btn--primario { background: var(--gold); color: var(--verde); }
.cabecalho .btn--primario:hover { background: var(--papel); color: var(--verde); }
.nav-toggle { display: none; background: none; border: 0; cursor: pointer; color: var(--papel); padding: .3rem; position: relative; z-index: 120; }

/* Backdrop escuro atrás do menu mobile */
.nav-scrim {
  position: fixed; inset: 0; z-index: 95; background: rgba(15, 37, 33, .55);
  opacity: 0; visibility: hidden; transition: opacity var(--dur) var(--ease), visibility var(--dur) var(--ease);
}
.nav-scrim.is-open { opacity: 1; visibility: visible; }

@media (max-width: 920px) {
  .nav-toggle { display: inline-flex; }
  .nav {
    position: fixed; inset: 0 0 0 auto; width: min(84vw, 360px); z-index: 110;
    flex-direction: column; align-items: flex-start; justify-content: center; gap: 1.6rem;
    padding: clamp(80px, 14vh, 120px) var(--margem) 2rem; background: var(--verde);
    border-left: 1px solid var(--linha-inv);
    transform: translateX(100%); transition: transform var(--dur) var(--ease);
    overflow-y: auto;
  }
  .nav.is-open { transform: translateX(0); box-shadow: -20px 0 60px #0f252166; }
  .nav a:not(.btn) { font-size: 1.05rem; opacity: 1; }
  .nav .btn { width: 100%; }
}
@media (min-width: 921px) { .nav-scrim { display: none; } }

/* ---------- Cards genéricos ---------- */
.card { background: var(--papel); border: 1px solid var(--linha); border-radius: var(--raio); padding: clamp(24px, 2.6vw, 40px); height: 100%; }

/* ---------- Formulário (campos com sublinhado) ---------- */
.form { display: grid; gap: 1.6rem; }
.campo { display: grid; gap: .5rem; }
.campo label { font-family: var(--mono); font-size: var(--t-eyebrow); letter-spacing: .18em; text-transform: uppercase; color: var(--txt-inv-suave); }
.campo input, .campo textarea {
  width: 100%; padding: .7rem 0; background: transparent; color: var(--papel);
  border: 0; border-bottom: 1px solid var(--linha-inv); border-radius: 0;
  transition: border-color var(--dur) var(--ease);
}
.campo input::placeholder { color: #f4eee155; }
.campo input:focus, .campo textarea:focus { outline: none; border-bottom-color: var(--terra); }
.campo--erro input { border-bottom-color: #ff9d86; }
.campo .erro-msg { font-size: var(--t-sm); color: #ffb4a6; min-height: 1em; }

.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.form-consent { display: flex; gap: .7rem; align-items: flex-start; font-size: var(--t-sm); color: var(--txt-inv-suave); }
.form-consent input { margin-top: .25rem; accent-color: var(--terra); }
.form-consent a { color: var(--papel); text-decoration: underline; text-underline-offset: 3px; }

.form-status { font-size: var(--t-sm); min-height: 1.4em; }
.form-status.is-ok { color: #a9e2bf; }
.form-status.is-err { color: #ffb4a6; }

/* Select de qualificação (interesse) — mesmo traço editorial dos inputs */
.campo--select[hidden] { display: none; }
.campo-select { position: relative; }
.campo select {
  width: 100%; padding: .7rem 2rem .7rem 0; background: transparent; color: var(--papel);
  border: 0; border-bottom: 1px solid var(--linha-inv); border-radius: 0;
  appearance: none; -webkit-appearance: none; cursor: pointer;
  transition: border-color var(--dur) var(--ease);
}
.campo select:focus { outline: none; border-bottom-color: var(--terra); }
.campo select option { color: #211e17; }
.campo-select__seta { position: absolute; right: 0; top: 50%; transform: translateY(-50%) rotate(90deg); width: 18px; height: 18px; color: var(--txt-inv-suave); pointer-events: none; }

/* Microcopy de segurança abaixo do botão de envio */
.form-seguranca { display: flex; align-items: center; gap: .55rem; margin-top: 1rem; font-size: var(--t-sm); line-height: 1.5; color: var(--txt-inv-suave); }
.form-seguranca[hidden] { display: none; }
.form-seguranca svg { width: 16px; height: 16px; flex: 0 0 auto; color: var(--gold); }

/* ---------- WhatsApp flutuante ---------- */
.wpp-float {
  position: fixed; right: clamp(16px, 3vw, 32px); bottom: clamp(16px, 3vw, 32px); z-index: 90;
  display: inline-flex; align-items: center; gap: .65rem;
  background: var(--verde); color: var(--papel); font-weight: 600; font-size: var(--t-sm);
  padding: .95rem 1.2rem; border-radius: 999px; border: 1px solid var(--verde-fundo);
  transition: background-color var(--dur) var(--ease);
}
.wpp-float:hover { background: var(--gold); color: var(--verde); border-color: var(--gold-escuro); }
.wpp-float .rotulo { white-space: nowrap; }
@media (max-width: 520px) { .wpp-float .rotulo { display: none; } .wpp-float { padding: 1rem; } }

/* ---------- Barra de ação fixa (mobile) ---------- */
.acao-mobile { display: none; }
@media (max-width: 900px) {
  .acao-mobile {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
    display: flex; align-items: center; gap: .6rem;
    padding: .6rem clamp(12px, 3vw, 18px);
    padding-bottom: calc(.6rem + env(safe-area-inset-bottom, 0px));
    background: var(--verde); border-top: 1px solid var(--linha-inv);
    box-shadow: 0 -10px 28px #0f252140;
  }
  .acao-mobile__wpp {
    display: inline-flex; align-items: center; justify-content: center; gap: .5rem; flex: 0 0 auto;
    padding: .9rem 1rem; border-radius: var(--raio); border: 1px solid var(--linha-inv); color: var(--papel);
    font-family: var(--mono); font-weight: 600; font-size: var(--t-eyebrow); letter-spacing: .1em; text-transform: uppercase;
    transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
  }
  .acao-mobile__wpp:hover, .acao-mobile__wpp:active { background: #ffffff12; }
  .acao-mobile__wpp svg { width: 20px; height: 20px; }
  .acao-mobile__cta { flex: 1 1 auto; padding: .95rem 1rem; }
  .acao-mobile .btn--primario { background: var(--gold); color: var(--verde); }
  .acao-mobile .btn--primario:hover { background: var(--papel); color: var(--verde); }
  .wpp-float { display: none; }
  body { padding-bottom: 74px; }
}

/* ---------- Toggles (filtros, prazos) ---------- */
.mapa-filtro, .sim-prazo {
  font-family: var(--mono); font-weight: 600; font-size: var(--t-eyebrow); letter-spacing: .12em; text-transform: uppercase;
  padding: .65rem 1.1rem; border-radius: 999px; cursor: pointer; background: transparent;
  border: 1px solid var(--linha-forte); color: var(--txt);
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.mapa-filtro[aria-pressed="true"] { background: var(--verde); color: var(--papel); border-color: var(--verde); }
.sim-prazo { border-color: var(--linha-inv); color: var(--papel); }
.sim-prazo[aria-pressed="true"] { background: var(--gold); border-color: var(--gold); color: var(--verde); }

/* ---------- Carrossel ---------- */
.carrossel { display: flex; gap: var(--gap); overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 1rem; }
.carrossel > * { scroll-snap-align: start; flex: 0 0 min(88%, 460px); }

/* ---------- Selo Copacabana ---------- */
.selo-copa { display: inline-flex; align-items: center; gap: .55rem; font-family: var(--mono); font-size: var(--t-eyebrow); letter-spacing: .14em; text-transform: uppercase; color: var(--txt-inv-suave); }
.selo-copa .sol { color: var(--terra); }

/* ---------- Popup de captura ---------- */
.popup-lead { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: 20px; }
.popup-lead[hidden] { display: none !important; }
.popup-lead__scrim { position: absolute; inset: 0; background: #0f2521b8; backdrop-filter: blur(4px); }
.popup-lead__card {
  position: relative; z-index: 1; width: min(100%, 420px);
  background: var(--papel); border-radius: var(--raio-md); padding: clamp(24px, 4vw, 36px);
  box-shadow: 0 30px 80px #0f252160; animation: subir .4s var(--ease) both;
}
.popup-lead__fechar {
  position: absolute; top: 14px; right: 14px; width: 40px; height: 40px;
  display: grid; place-items: center; border: 0; border-radius: 50%;
  background: var(--areia); color: var(--verde); cursor: pointer;
}
.popup-lead__fechar:hover { background: var(--verde); color: var(--papel); }
.popup-lead__fechar svg { width: 18px; height: 18px; }
.popup-lead__selo {
  font-family: var(--mono); font-size: var(--t-eyebrow); letter-spacing: .16em; text-transform: uppercase;
  color: var(--gold-escuro); margin: 0 0 .5rem;
}
.popup-lead__titulo { font-family: var(--titulo); font-size: clamp(1.35rem, 3vw, 1.7rem); margin: 0 0 .5rem; color: var(--verde); line-height: 1.2; }
.popup-lead__sub { color: var(--txt-suave); margin: 0 0 1.4rem; line-height: 1.5; font-size: var(--t-sm); }
.popup-lead__lgpd { font-size: .78rem; color: var(--txt-suave); line-height: 1.45; margin: 0 0 1rem; }
.popup-lead__status { margin-top: .8rem; font-size: var(--t-sm); min-height: 1.2em; }
.popup-lead__status.is-ok { color: var(--verde-folha); }
.popup-lead__status.is-err { color: #a33; }
.popup-lead__card .campo label { color: var(--txt-suave); }
.popup-lead__card .campo input {
  color: var(--txt); border-bottom: 1px solid var(--linha-forte);
  background: transparent;
}
.popup-lead__card .campo input::placeholder { color: var(--txt-suave); opacity: .7; }
.popup-lead__card .campo .erro-msg { color: #b33; }