/* ============================================================
   03. COMPONENTES BÁSICOS
   ============================================================ */

/* ---------- 3.1 AÇÕES --------------------------------------- */

.btn {
  --btn-bg: transparent;
  --btn-fg: var(--text-primary);
  --btn-borda: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--esp-3);
  padding: 0.9375rem var(--esp-6);
  min-height: 3rem;
  border: var(--traco-medio) solid var(--btn-borda);
  border-radius: var(--raio-pill);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-family: var(--fonte-texto);
  font-size: var(--t-button);
  font-weight: var(--w-titulo);
  letter-spacing: var(--ls-botao);
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  position: relative;
  transition:
    transform var(--dur-toque) var(--ease-out),
    background-color var(--dur-hover) var(--ease-hover),
    border-color var(--dur-hover) var(--ease-hover),
    color var(--dur-hover) var(--ease-hover);
}
.btn:active, .btn.is-active { transform: scale(0.97); }

.btn:focus-visible, .btn.is-focus {
  outline: var(--traco-grosso) solid var(--foco-anel);
  outline-offset: 3px;
}
.btn[disabled], .btn.is-disabled {
  cursor: not-allowed;
  opacity: .45;
  filter: saturate(.3);
  transform: none;
}

/* Primário — dourado. Reservado à ação principal da página. */
.btn--primario {
  --btn-bg: var(--acao-primaria-bg);
  --btn-fg: var(--acao-primaria-texto);
  --btn-borda: var(--acao-primaria-bg);
}
/* Secundário — terracota. Ação de apoio. */
.btn--secundario {
  --btn-bg: var(--acao-secundaria-bg);
  --btn-fg: var(--acao-secundaria-texto);
  --btn-borda: var(--acao-secundaria-bg);
}
/* Outline — ação terciária, sobre qualquer fundo. */
.btn--outline {
  --btn-bg: transparent;
  --btn-fg: var(--acao-outline-texto);
  --btn-borda: var(--acao-outline-borda);
}
/* Discreto — navegação interna, sem peso visual. */
.btn--discreto {
  --btn-bg: transparent;
  --btn-fg: var(--text-secondary);
  --btn-borda: transparent;
  padding-inline: var(--esp-4);
  font-weight: var(--w-medio);
}
/* WhatsApp — canal de contato. Verde da marca, nunca verde genérico. */
.btn--whats {
  --btn-bg: var(--acao-whats-bg);
  --btn-fg: var(--acao-whats-texto);
  --btn-borda: var(--acao-whats-bg);
}
.btn--grande { min-height: 3.5rem; padding-inline: var(--esp-7); font-size: 1rem; }
.btn--bloco  { width: 100%; }

@media (hover: hover) and (pointer: fine) {
  .btn--primario:hover,  .btn--primario.is-hover  { --btn-bg: var(--acao-primaria-hover);   --btn-borda: var(--acao-primaria-hover); }
  .btn--secundario:hover,.btn--secundario.is-hover{ --btn-bg: var(--acao-secundaria-hover); --btn-borda: var(--acao-secundaria-hover); }
  .btn--outline:hover,   .btn--outline.is-hover   { --btn-bg: var(--acao-outline-hover-bg); }
  .btn--discreto:hover,  .btn--discreto.is-hover  { --btn-fg: var(--text-primary); --btn-bg: var(--acao-outline-hover-bg); }
  .btn--whats:hover,     .btn--whats.is-hover     { --btn-bg: var(--acao-whats-hover); --btn-borda: var(--acao-whats-hover); }
  .btn[disabled]:hover, .btn.is-disabled:hover { --btn-bg: initial; }
}

/* Ícone dentro do botão acompanha o texto */
.btn .ico { flex: none; }
.btn--icone-so { padding: 0; width: 3rem; height: 3rem; }

/* A seta do botão avança no hover — 4px, nada mais */
.btn .ico--seta { transition: transform var(--dur-hover) var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .btn:hover .ico--seta, .btn.is-hover .ico--seta { transform: translateX(4px); }
}

.acoes { display: flex; flex-wrap: wrap; gap: var(--esp-4); align-items: center; }

/* Link textual — sublinhado que cresce da esquerda */
.link {
  display: inline-flex; align-items: center; gap: var(--esp-2);
  color: var(--text-accent);
  font-weight: var(--w-medio);
  text-decoration: none;
  position: relative;
  padding-bottom: 2px;
}
.link::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 1.5px; background: currentColor;
  transform: scaleX(.34); transform-origin: left;
  transition: transform var(--dur-hover) var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .link:hover::after, .link.is-hover::after { transform: scaleX(1); }
}
.link:focus-visible, .link.is-focus { outline: 2px solid var(--foco-anel); outline-offset: 4px; border-radius: 2px; }
.link.is-disabled { color: var(--estado-off); pointer-events: none; }
.link.is-disabled::after { opacity: .4; }

/* ---------- 3.1b MARCA --------------------------------------
   A marca é monocromática. O PNG entra como máscara e a tinta
   vem de `color`, então ela assume qualquer cor da paleta sem
   gerar um arquivo por cor. Três recortes do mesmo original.   */

.marca {
  display: inline-block;
  flex: none;
  background-color: currentColor;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center;  mask-position: center;
  -webkit-mask-size: contain;     mask-size: contain;
}
.marca--simbolo {
  aspect-ratio: 512 / 660;
  -webkit-mask-image: url("../marca/simbolo.png");
  mask-image: url("../marca/simbolo.png");
}
.marca--lettering {
  aspect-ratio: 900 / 772;
  -webkit-mask-image: url("../marca/lettering.png");
  mask-image: url("../marca/lettering.png");
}
.marca--completo {
  aspect-ratio: 1200 / 640;
  -webkit-mask-image: url("../marca/completo.png");
  mask-image: url("../marca/completo.png");
}

/* Selo: a marca assentada sobre fotografia, com folga de fundo */
.marca-selo {
  display: inline-grid; place-items: center;
  background: var(--bg-primary);
  border-radius: var(--raio-arco);
  padding: var(--esp-3) var(--esp-4);
  color: var(--terra-700);
}

/* ---------- 3.2 SELOS, TAGS, DIVISORES ---------------------- */

.badge {
  display: inline-flex; align-items: center; gap: var(--esp-2);
  padding: .375rem var(--esp-4) .4375rem;
  border-radius: var(--raio-pill);
  background: var(--surface-warm);
  color: var(--marrom-900);
  font-size: var(--t-caption);
  font-weight: var(--w-titulo);
  letter-spacing: .1em; text-transform: uppercase;
  line-height: 1.2;
}
.badge--ouro     { background: var(--ouro-600); color: var(--marrom-900); }
.badge--terra    { background: var(--terra-700); color: var(--creme-100); }
.badge--verde    { background: var(--verde-600); color: var(--creme-100); }
.badge--escuro   { background: var(--marrom-900); color: var(--creme-300); }
.badge--contorno { background: transparent; border: var(--traco-fino) solid var(--border-medium); color: var(--text-secondary); }
/* Vermelho profundo: exclusivo de detalhe / urgência real */
.badge--alerta   { background: transparent; color: var(--vermelho); border: var(--traco-fino) solid var(--vermelho); }
.badge--alerta::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--vermelho); }

.tag {
  display: inline-flex; align-items: center; gap: var(--esp-2);
  padding: .3125rem var(--esp-3);
  border: var(--traco-fino) solid var(--border-light);
  border-radius: var(--raio-sm);
  background: transparent;
  font-size: var(--t-small);
  color: var(--text-secondary);
  line-height: 1.3;
  transition: border-color var(--dur-hover) var(--ease-hover), color var(--dur-hover) var(--ease-hover);
}
.tag--ativa, .tag.is-selected {
  border-color: var(--terra-700); color: var(--terra-700);
  background: color-mix(in srgb, var(--terra-700) 8%, transparent);
}
@media (hover: hover) and (pointer: fine) {
  .tag:hover, .tag.is-hover { border-color: var(--border-medium); color: var(--text-primary); }
}

/* Divisor — linha fina com ornamento de raiz ao centro */
.divisor { border: 0; height: 1px; background: var(--border-light); margin: 0; }
.divisor--ornamento {
  display: flex; align-items: center; gap: var(--esp-5);
  height: auto; background: none;
  color: var(--terra-500);
}
.divisor--ornamento::before, .divisor--ornamento::after {
  content: ""; flex: 1; height: 1px; background: var(--border-light);
}
.divisor--pontilhado { background: none; border-top: 1.5px dotted var(--border-medium); }

/* ---------- 3.3 ÍCONES -------------------------------------- */
/* Grade 24. Traço 1.75. Ponta e junção redondas. Sem preenchimento. */

.ico {
  width: 1.5rem; height: 1.5rem;
  display: inline-block;
  stroke: currentColor;
  stroke-width: var(--traco-icone);
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
  vector-effect: non-scaling-stroke;
}
.ico--sm { width: 1.125rem; height: 1.125rem; stroke-width: 2; }
.ico--lg { width: 2rem;     height: 2rem;     stroke-width: 1.5; }
.ico--xl { width: 3rem;     height: 3rem;     stroke-width: 1.25; }

/* Ícone assentado em disco — usado em grades de benefício */
.ico-disco {
  display: inline-flex; align-items: center; justify-content: center;
  width: 3.25rem; height: 3.25rem;
  border-radius: var(--raio-arco-sut);
  background: color-mix(in srgb, var(--terra-700) 12%, transparent);
  color: var(--terra-700);
  flex: none;
}
.ctx-escuro .ico-disco { background: color-mix(in srgb, var(--creme-100) 12%, transparent); color: var(--ouro-400); }
.ico-disco--ouro  { background: color-mix(in srgb, var(--ouro-600) 26%, transparent); color: var(--marrom-900); }
.ico-disco--verde { background: color-mix(in srgb, var(--verde-600) 16%, transparent); color: var(--verde-600); }

/* Ornamentos — marcas gráficas da Casa, só como respiro */
.ornamento { color: var(--terra-500); opacity: .9; }
.ornamento--ouro { color: var(--ouro-600); }
.ornamento--creme { color: var(--creme-300); }

/* ---------- 3.4 CAMPO DE INFORMAÇÃO ------------------------- */

.campo {
  display: flex; align-items: flex-start; gap: var(--esp-4);
  padding-block: var(--esp-4);
}
.campo + .campo { border-top: 1px solid var(--border-light); }
.campo__ico { color: var(--text-accent); flex: none; margin-top: 2px; }
.campo__rot {
  font-size: var(--t-caption);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 0 0 var(--esp-1);
}
.campo__val {
  font-family: var(--fonte-display);
  font-size: 1.125rem;
  font-weight: var(--w-titulo);
  line-height: 1.3;
  color: var(--title-primary);
  margin: 0;
}
.campo--horizontal { flex-direction: column; gap: var(--esp-2); padding-block: 0; }
.campo--horizontal + .campo--horizontal { border-top: 0; }

/* ---------- 3.5 CARDS --------------------------------------- */

.card {
  position: relative;
  display: flex; flex-direction: column;
  padding: var(--pad-card);
  border-radius: var(--raio-md);
  background: var(--surface-light);
  border: var(--traco-fino) solid var(--border-light);
  transition:
    transform var(--dur-hover) var(--ease-out),
    border-color var(--dur-hover) var(--ease-hover);
}
.card__titulo {
  font-family: var(--fonte-display);
  font-size: var(--t-h3);
  line-height: var(--lh-h3);
  letter-spacing: var(--ls-h3);
  font-weight: var(--w-titulo);
  color: var(--title-primary);
  margin: 0;
}
.card__texto { color: var(--text-secondary); font-size: var(--t-small); margin: 0; }
.card__topo  { display: flex; align-items: center; justify-content: space-between; gap: var(--esp-4); }
.card__pe    { margin-top: auto; padding-top: var(--esp-5); }

.card--interativo { cursor: pointer; }
@media (hover: hover) and (pointer: fine) {
  .card--interativo:hover, .card--interativo.is-hover {
    transform: translateY(-3px);
    border-color: var(--border-medium);
  }
}
.card--interativo:focus-visible { outline: var(--traco-grosso) solid var(--foco-anel); outline-offset: 3px; }

/* Destaque — bloco de cor cheia, texto claro */
.card--destaque {
  background: var(--bg-terra);
  border-color: transparent;
  color: var(--text-on-dark);
}
.card--destaque .card__titulo { color: var(--creme-300); }
.card--destaque .card__texto  { color: var(--text-on-dark-sec); }

.card--escuro { background: var(--bg-deep); border-color: transparent; color: var(--text-on-dark); }
.card--mata   { background: var(--bg-mata); border-color: transparent; color: var(--text-on-dark); }
.card--quente { background: var(--surface-warm); border-color: transparent; }

/* Arco — card com a forma assinatura, para conteúdo com imagem */
.card--arco { border-radius: var(--raio-arco); padding-top: var(--esp-8); text-align: center; align-items: center; }

/* Card de informação — dado prático, sem decoração */
.card--info { padding: var(--pad-card-denso); gap: var(--esp-3); }
.card--info .campo__val { font-size: 1rem; }

/* Card de investimento — hierarquia de preço */
.card-invest {
  position: relative;
  display: flex; flex-direction: column; gap: var(--esp-5);
  padding: var(--pad-card);
  border-radius: var(--raio-lg);
  background: var(--surface-light);
  border: var(--traco-medio) solid var(--border-light);
}
.card-invest--eleito {
  background: var(--bg-deep);
  border-color: var(--ouro-600);
  color: var(--text-on-dark);
}
.card-invest__selo { position: absolute; top: calc(var(--esp-4) * -1); left: var(--pad-card); }
.card-invest__rot {
  font-size: var(--t-caption); letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase; color: var(--text-muted); margin: 0;
}
.card-invest--eleito .card-invest__rot { color: var(--text-on-dark-sec); }
.card-invest__preco {
  font-family: var(--fonte-display);
  font-size: clamp(2.25rem, 1.6rem + 2.4vw, 3.25rem);
  line-height: 1;
  letter-spacing: var(--ls-h1);
  font-weight: var(--w-display);
  color: var(--title-primary);
  margin: 0;
  display: flex; align-items: baseline; gap: .375rem;
}
.card-invest--eleito .card-invest__preco { color: var(--ouro-400); }
.card-invest__moeda { font-size: .45em; font-weight: var(--w-titulo); opacity: .8; }
.card-invest__obs { font-size: var(--t-small); color: var(--text-muted); margin: 0; }
.card-invest--eleito .card-invest__obs { color: var(--text-on-dark-sec); }
.card-invest__lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--esp-3); }
.card-invest__lista li { display: flex; gap: var(--esp-3); align-items: flex-start; font-size: var(--t-small); }
.card-invest__lista .ico { color: var(--text-accent); flex: none; margin-top: 3px; }
.card-invest--eleito .card-invest__lista .ico { color: var(--ouro-400); }

/* ---------- 3.6 BLOCOS -------------------------------------- */

.bloco-img { position: relative; }
.bloco-img--arco .foto { border-radius: var(--raio-arco); }
.bloco-img--seixo .foto { border-radius: var(--raio-seixo); }
.bloco-img--suave .foto { border-radius: var(--raio-md); }
/* Placa de cor atrás da imagem: profundidade sem sombra */
.bloco-img--placa::before {
  content: "";
  position: absolute; inset: var(--esp-6) calc(var(--esp-6) * -1) calc(var(--esp-6) * -1) var(--esp-6);
  background: var(--terra-700);
  border-radius: inherit;
  z-index: 0;
}
.bloco-img--placa .foto { position: relative; z-index: 1; }

.bloco-texto { display: flex; flex-direction: column; gap: var(--gap-titulo-texto); max-width: var(--largura-texto); }

.dupla {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gap-img-conteudo);
  align-items: center;
}
.dupla--imagem-maior { grid-template-columns: 1.15fr 1fr; }
.dupla--texto-maior  { grid-template-columns: 1fr 1.15fr; }
.dupla--invertida > :first-child { order: 2; }
@media (max-width: 860px) {
  .dupla, .dupla--imagem-maior, .dupla--texto-maior { grid-template-columns: 1fr; }
  .dupla--invertida > :first-child { order: 0; }
}

/* Citação — voz da Casa, nunca aspas decorativas grandes */
.citacao {
  margin: 0;
  padding-left: var(--esp-6);
  border-left: var(--traco-grosso) solid var(--terra-500);
  max-width: 34ch;
}
.citacao p {
  font-family: var(--fonte-display);
  font-size: clamp(1.375rem, 1.1rem + 1.2vw, 1.875rem);
  line-height: 1.32;
  letter-spacing: -.01em;
  font-weight: var(--w-medio);
  color: var(--title-primary);
  margin: 0;
}
.citacao footer {
  margin-top: var(--esp-4);
  font-size: var(--t-caption);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--text-muted);
}
.citacao--centro { border-left: 0; padding: 0; text-align: center; max-width: 46ch; margin-inline: auto; }
.citacao--centro .ornamento { margin-inline: auto; margin-bottom: var(--esp-5); }

/* ---------- 3.7 ACCORDION / FAQ ----------------------------- */

.faq { border-top: 1px solid var(--border-light); }
.faq__item { border-bottom: 1px solid var(--border-light); }
.faq__botao {
  width: 100%;
  display: flex; align-items: center; justify-content: space-between; gap: var(--esp-5);
  padding: var(--esp-5) 0;
  background: none; border: 0; cursor: pointer; text-align: left;
  font-family: var(--fonte-display);
  font-size: 1.125rem;
  font-weight: var(--w-titulo);
  line-height: 1.35;
  color: var(--title-primary);
  transition: color var(--dur-hover) var(--ease-hover);
}
.faq__botao:focus-visible { outline: 2px solid var(--foco-anel); outline-offset: 2px; border-radius: var(--raio-xs); }
@media (hover: hover) and (pointer: fine) {
  .faq__botao:hover, .faq__botao.is-hover { color: var(--text-accent); }
}
.faq__sinal {
  flex: none; width: 1.75rem; height: 1.75rem;
  display: grid; place-items: center;
  color: var(--text-accent);
  transition: transform var(--dur-menu) var(--ease-out);
}
.faq__item[data-aberto] .faq__sinal { transform: rotate(45deg); }
.faq__corpo {
  height: 0; overflow: hidden; opacity: 0;
  transition: height var(--dur-menu) var(--ease-out), opacity var(--dur-menu) var(--ease-out);
}
.faq__item[data-aberto] .faq__corpo { opacity: 1; }
.faq__corpo > div { padding-bottom: var(--esp-5); }
.faq__corpo p { color: var(--text-secondary); font-size: var(--t-small); margin: 0; max-width: 62ch; }

/* ---------- 3.8 NAVEGAÇÃO ----------------------------------- */

.nav {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--esp-6);
  padding: var(--esp-4) var(--esp-5);
  border-radius: var(--raio-pill);
  background: color-mix(in srgb, var(--creme-100) 88%, transparent);
  border: 1px solid var(--border-light);
  backdrop-filter: none;
}
.nav--escura { background: var(--marrom-900); border-color: transparent; }
.nav__marca { display: flex; align-items: center; gap: var(--esp-3); flex: none; }
.nav__marca-nome {
  font-family: var(--fonte-display);
  font-weight: var(--w-display);
  font-size: .9375rem; line-height: 1.05;
  letter-spacing: -.01em;
  text-transform: uppercase;
}
.nav__links { display: flex; align-items: center; gap: var(--esp-2); list-style: none; margin: 0; padding: 0; }
.nav__link {
  display: inline-block;
  padding: var(--esp-2) var(--esp-4);
  border-radius: var(--raio-pill);
  font-size: var(--t-nav);
  font-weight: var(--w-medio);
  letter-spacing: var(--ls-nav);
  color: var(--text-secondary);
  text-decoration: none;
  transition: color var(--dur-hover) var(--ease-hover), background-color var(--dur-hover) var(--ease-hover);
}
@media (hover: hover) and (pointer: fine) {
  .nav__link:hover, .nav__link.is-hover { color: var(--text-primary); background: var(--acao-outline-hover-bg); }
}
.nav__link.is-selected { color: var(--text-primary); background: var(--acao-outline-hover-bg); }
.nav__link:focus-visible { outline: 2px solid var(--foco-anel); outline-offset: 2px; }
@media (max-width: 860px) { .nav__links { display: none; } }

/* ---------- 3.9 FOOTER -------------------------------------- */

.rodape { background: var(--bg-deep); color: var(--text-on-dark); padding-block: var(--esp-10) var(--esp-6); }
.rodape__grade { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: var(--gap-img-conteudo); }
@media (max-width: 860px) { .rodape__grade { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .rodape__grade { grid-template-columns: 1fr; } }
.rodape__tit {
  font-size: var(--t-caption); letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase; color: var(--ouro-600);
  margin: 0 0 var(--esp-4);
}
.rodape__lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--esp-3); }
.rodape__lista a { color: var(--text-on-dark-sec); text-decoration: none; font-size: var(--t-small); transition: color var(--dur-hover) var(--ease-hover); }
@media (hover: hover) and (pointer: fine) { .rodape__lista a:hover { color: var(--creme-100); } }
.rodape__base {
  margin-top: var(--esp-9); padding-top: var(--esp-5);
  border-top: 1px solid var(--border-on-dark);
  display: flex; justify-content: space-between; gap: var(--esp-4); flex-wrap: wrap;
  font-size: var(--t-caption); color: var(--text-on-dark-sec);
}