/* ============================================================================
   SUNSET SERRA · SITE V2 — COMPONENTES
   Peças reutilizáveis. Cada bloco abaixo é um componente com nome próprio.
============================================================================ */

/* ================================================================= BOTÃO === */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--e-2);
  min-height: 48px;
  padding: 0 var(--e-4);
  border-radius: var(--r-fio);
  border: 0;
  font: 600 var(--t-body) var(--f-texto);
  letter-spacing: .02em;
  text-decoration: none;
  cursor: pointer;
  text-align: center;
  transition: background var(--dur-rapida) var(--ease-pedra),
              border-color var(--dur-rapida) var(--ease-pedra),
              color var(--dur-rapida) var(--ease-pedra);
}
/* Os cinco estados do botão primário, todos ≥ 4,5:1 com preto puro sobre o
   cobre da marca. O `active` escurece o suficiente para dar retorno de toque
   sem cair abaixo do mínimo — por isso #CC5117, e não o #B84612 da V1, que
   com preto daria 3,92:1. */
.btn-pri { background: var(--cobre); color: var(--tinta-botao); }
.btn-pri:hover { background: var(--cobre-luz); color: var(--tinta-botao); }
.btn-pri:active { background: var(--cobre-press); color: var(--tinta-botao); }
.btn-pri:disabled, .btn-pri[aria-disabled="true"] {
  background: var(--surf-2); color: var(--texto-3); cursor: default;
}

.btn-sec { background: transparent; color: var(--ambar-luz); border: 1px solid var(--ambar); }
.btn-sec:hover { background: rgb(201 138 43 / .12); border-color: var(--ambar-luz); }

/* terciário: link com fio, alvo de toque garantido por padding vertical */
.btn-ter {
  background: none; border: 0; padding: var(--e-2) 0;
  color: var(--texto-2);
  font: 600 var(--t-body) var(--f-texto);
  text-decoration: none;
  position: relative;
  cursor: pointer;
  display: inline-block;
  min-height: 44px;
  line-height: 28px;
}
.btn-ter::after {
  content: ""; position: absolute; left: 0; bottom: var(--e-2);
  height: 1px; width: 100%;
  background: var(--linha-forte);
  transition: background var(--dur-rapida) var(--ease-pedra);
}
.btn-ter:hover { color: var(--texto); }
.btn-ter:hover::after { background: var(--ambar); }

/* ícone do WhatsApp dentro de botão */
.btn .zap { width: 18px; height: 18px; flex: none; fill: currentColor; }

/* ================================================================== NAV === */
.nav {
  position: fixed;
  inset-inline: 0;
  top: 0;
  z-index: var(--z-nav);
  height: var(--nav-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-3);
  padding-inline: var(--margem);
  background: transparent;
  transition: background var(--dur-media) var(--ease-pedra),
              box-shadow var(--dur-media) var(--ease-pedra);
}
.nav.solida {
  background: var(--scrim-nav);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 1px 0 var(--linha);
}
.nav .marca { display: flex; align-items: center; text-decoration: none; min-height: 44px; flex: none; }
.nav .marca img { height: 36px; width: auto; }

.navlinks {
  display: none;
  align-items: center;
  gap: var(--e-4);
  list-style: none;
}
.navlinks a {
  font-size: var(--t-caption);
  font-weight: 500;
  letter-spacing: .03em;
  color: var(--texto-2);
  text-decoration: none;
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  white-space: nowrap;
}
.navlinks a::after {
  content: ""; position: absolute; left: 0; bottom: 10px;
  height: 2px; width: 100%;
  background: var(--ambar);
  transform: scaleX(0); transform-origin: left;
  transition: transform var(--dur-rapida) var(--ease-pedra);
}
.navlinks a:hover::after, .navlinks a[aria-current="true"]::after { transform: scaleX(1); }
.navlinks a[aria-current="true"] { color: var(--texto); }
.navlinks .btn::after { display: none; }
/* `.navlinks a` (0,1,1) vence `.btn-pri` (0,1,0) e pintava o texto do botão de
   creme sobre cobre — 2,28:1. A cor precisa ser reafirmada com especificidade
   igual ou maior, e não com !important. */
.navlinks a.btn-pri { color: var(--tinta-botao); min-height: 42px; padding-inline: var(--e-4); }
.navlinks a.btn-sec { color: var(--ambar-luz); min-height: 42px; padding-inline: var(--e-4); }

.btnmenu {
  display: inline-flex;
  align-items: center;
  gap: var(--e-2);
  min-width: 44px; min-height: 44px;
  background: none; border: 0;
  color: var(--texto);
  font: 600 var(--t-caption) var(--f-texto);
  letter-spacing: .06em;
  cursor: pointer;
  padding: var(--e-2);
}
.btnmenu i {
  display: block; width: 20px; height: 10px;
  border-top: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
}

/* Seis destinos cabem na barra a partir de 1100px. Abaixo disso, menu. */
@media (min-width: 1100px) {
  .nav .marca img { height: 40px; }
  .navlinks { display: flex; }
  .btnmenu { display: none; }
}

/* ================================================================= MENU === */
.menu {
  position: fixed; inset: 0;
  z-index: var(--z-menu);
  background: var(--bg-fundo);
  display: none;
  flex-direction: column;
  padding: calc(var(--nav-h) + var(--e-4)) var(--margem) var(--e-5);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.menu[open], .menu.aberto { display: flex; }
.menu ol {
  list-style: none;
  flex: 1;
  display: flex; flex-direction: column;
  gap: var(--e-1);
  margin-bottom: var(--e-4);
}
.menu ol a {
  font: 500 var(--t-h3) var(--f-display);
  color: var(--texto);
  text-decoration: none;
  display: flex; gap: var(--e-3); align-items: baseline;
  padding-block: var(--e-2);
  min-height: 52px;
}
.menu ol a small {
  font: 500 var(--t-caption) var(--f-texto);
  color: var(--ambar);
  min-width: 2ch;
}
.menu .fechar {
  position: absolute; top: var(--e-2); right: var(--margem);
  min-width: 44px; min-height: 44px;
  background: none; border: 0;
  color: var(--texto-2);
  font: 600 var(--t-caption) var(--f-texto);
  cursor: pointer;
}

/* ==================================================== BARRA DE AÇÃO MÓVEL === */
/* CTA sempre alcançável no celular — critério P0-08 do backlog. */
.barra {
  position: fixed;
  inset-inline: 0; bottom: 0;
  z-index: var(--z-barra);
  display: flex;
  gap: var(--e-2);
  padding: var(--e-2) var(--e-3) calc(var(--e-2) + env(safe-area-inset-bottom));
  background: var(--scrim-nav);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-top: 1px solid var(--linha);
}
.barra .btn { flex: 1; min-height: 46px; font-size: var(--t-caption); padding-inline: var(--e-3); }
@media (min-width: 1100px) { .barra { display: none; } }

/* ================================================================= SELO === */
/* D-008: toda imagem de projeto carrega o selo de ilustrativa, no servidor. */
.selo {
  position: absolute;
  inset-block-end: var(--e-2);
  inset-inline-start: var(--e-2);
  z-index: var(--z-selo);
  border-radius: var(--r-pill);
  /* O fundo é translúcido, então o contraste do chip depende da foto atrás.
     Sobre um céu estourado, .74 de alfa compunha um cinza claro e o par com
     `--texto-2` caía para 4,48:1 — reprovado. Alfa maior e tinta mais clara
     tiram a foto da conta: o pior caso passa a ser 7:1. */
  background: rgb(14 19 10 / .82);
  backdrop-filter: blur(6px);
  border: 1px solid rgb(242 231 206 / .18);
  color: var(--texto);
  font: 500 .75rem/1 var(--f-texto);
  padding: 6px 12px;
  pointer-events: none;
  white-space: nowrap;
}

/* Chip da célula da galeria: uma linha, compacto, e o menor pedaço possível da
   foto. A ressalva inteira está na nota abaixo da grade, e chega ao leitor de
   tela por `aria-describedby`.

   CRITÉRIO DE ACEITE (definido em 31/08/2026, depois de medir):

     desktop   largura ≤ 45% da célula
     celular   largura ≤ 85% · altura ≤ 24 px · área ≤ 8% da imagem

   O limite de largura muda no celular porque no desktop ele é alcançável e no
   celular não: "Imagem ilustrativa" tem 18 caracteres e a célula tem 136 px a
   320 px. Não existe corpo de fonte legível que caiba 18 caracteres em 61 px, e
   encolher o texto contrariaria a exigência de ele estar integral e legível.
   Por isso o celular passa a ser medido por ÁREA — que é o que de fato
   descreve "tapar a foto". Largura sozinha engana numa célula estreita.

   10px é o corpo que faz a conta fechar nos dois: ~42,6% na célula de 263 px do
   desktop e 5,9% de área na de 170 px do celular. */
.cel .selo {
  font-size: .625rem;
  padding: 4px 8px;
  letter-spacing: -.005em;
}

/* Na célula de 136 px do celular pequeno, os 4 px de respiro vertical levavam a
   área para 9,3% — acima do teto de 8%. Como a largura não pode ceder sem
   cortar o texto, quem cede é a altura: o chip fica mais rente, e a área cai
   para ~7,6% sem perder uma linha nem um caractere. */
@media (max-width: 640px) {
  .cel .selo { padding: 2px 7px; }
}
.selo-texto {
  display: inline-flex; align-items: center; gap: var(--e-2);
  font-size: var(--t-caption); font-weight: 500; color: var(--texto-2);
}
.selo-texto::before { content: ""; width: 8px; height: 8px; background: var(--ambar); flex: none; }

/* ================================================================= SLOT === */
/* Conteúdo bloqueado por falta de fonte única. NUNCA vermelho: vermelho é
   reservado a erro, risco e pendência jurídica, e não vai a rota pública
   (D-078). O slot é uma ausência declarada, não um alarme. */
.slot {
  border: 1px dashed var(--linha-forte);
  border-radius: var(--r-cartao);
  background: rgb(34 42 24 / .45);
  padding: var(--e-4);
  display: grid;
  gap: var(--e-2);
}
.slot-rotulo {
  display: inline-flex; align-items: center; gap: var(--e-2);
  font: 600 var(--t-overline) var(--f-texto);
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--ambar);
  margin: 0;
}
.slot-rotulo::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  border: 1.5px solid var(--ambar); flex: none;
}
.slot p { font-size: var(--t-caption); color: var(--texto-2); margin: 0; line-height: 1.6; }
.slot ul { list-style: none; display: grid; gap: var(--e-1); }
.slot li {
  font-size: var(--t-caption); color: var(--texto-3);
  padding-left: var(--e-3); position: relative;
}
.slot li::before {
  content: "—"; position: absolute; left: 0; color: var(--linha-forte);
}

/* ============================================================== FIGURA === */
.figura {
  position: relative;
  border-radius: var(--r-media);
  overflow: hidden;
  background: var(--surf-1);
}
.figura img { width: 100%; height: 100%; object-fit: cover; }
.figura.r169 { aspect-ratio: 16 / 9; }
.figura.r45  { aspect-ratio: 4 / 5; }
.figura.r11  { aspect-ratio: 1; }

/* ============================================================== CARTÃO === */
.cartao {
  background: var(--surf-1);
  border-radius: var(--r-cartao);
  box-shadow: var(--sombra-1);
  padding: var(--e-4);
  display: flex;
  flex-direction: column;
  gap: var(--e-3);
  transition: box-shadow var(--dur-media) var(--ease-pedra);
}
.cartao:hover { box-shadow: var(--sombra-2); }
.cartao h3 { font-size: var(--t-h3); font-weight: 600; font-family: var(--f-texto); }
.cartao p { font-size: var(--t-caption); color: var(--texto-2); margin: 0; line-height: 1.6; max-width: none; }
.cartao .num {
  font: 600 var(--t-dado) var(--f-display);
  color: var(--ambar-luz);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.cartao .pe { margin-top: auto; padding-top: var(--e-3); border-top: 1px solid var(--linha); }

/* ========================================================== CÉLULA MÍDIA === */
/* Botão que abre o lightbox. Não é <div> com onclick: é botão de verdade. */
.cel {
  position: relative;
  border-radius: var(--r-media);
  overflow: hidden;
  background: var(--surf-1);
  display: block; border: 0; padding: 0;
  width: 100%; text-align: left;
  cursor: zoom-in; color: inherit;
}
.cel img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-lenta) var(--ease-luz); }
.cel:hover img { transform: scale(1.02); }
.cel .rotulo {
  position: absolute; inset-inline: 0; bottom: 0; z-index: 2;
  padding: var(--e-5) var(--e-3) var(--e-3);
  background: var(--scrim-media);
  font: 600 var(--t-caption) var(--f-texto);
  color: var(--texto);
}
.cel .selo { inset-block-end: auto; inset-block-start: var(--e-2); }

/* ============================================================= LIGHTBOX === */
.lb {
  position: fixed; inset: 0;
  z-index: var(--z-lightbox);
  background: rgb(8 11 6 / .97);
  display: none; flex-direction: column;
  padding: 0; margin: 0; border: 0;
  width: 100%; height: 100%; max-width: none; max-height: none;
  color: var(--texto);
}
.lb[open] { display: flex; }
.lb::backdrop { background: rgb(8 11 6 / .97); }
.lb-topo {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--e-3); padding: var(--e-3); flex: none;
}
.lb-pos { font-size: var(--t-caption); color: var(--texto-2); font-variant-numeric: tabular-nums; letter-spacing: .06em; }
.lb-fechar, .lb-nav {
  min-width: 48px; min-height: 48px;
  background: var(--surf-1);
  border: 1px solid var(--linha-forte);
  color: var(--texto);
  border-radius: var(--r-pill);
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  font: 600 var(--t-caption) var(--f-texto);
  padding: 0 var(--e-3);
}
.lb-fechar:hover, .lb-nav:hover { background: var(--surf-2); border-color: var(--ambar); }
.lb-palco {
  flex: 1 1 0; position: relative;
  display: flex; align-items: center; justify-content: center;
  padding: 0 var(--e-3); min-height: 0; overflow: hidden; touch-action: pan-y;
}
.lb-palco img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; border-radius: var(--r-fio); }
.lb-nav { position: absolute; top: 50%; transform: translateY(-50%); background: rgb(14 19 10 / .78); font-size: 1.3rem; }
.lb-nav.ant { left: var(--e-3); }
.lb-nav.prox { right: var(--e-3); }
@media (max-width: 639px) { .lb-nav { display: none; } }
.lb-pe {
  flex: none;
  padding: var(--e-3) var(--e-4) calc(var(--e-4) + env(safe-area-inset-bottom));
  max-width: var(--medida); margin-inline: auto; text-align: center;
}
.lb-pe b { display: block; font: 500 var(--t-h3) var(--f-texto); color: var(--texto); margin-bottom: var(--e-1); }
.lb-pe p { font-size: var(--t-caption); color: var(--texto-2); margin: 0 auto; }
.lb-dica { font-size: .75rem; color: var(--texto-3); margin-top: var(--e-2) !important; }

/* =========================================================== FORMULÁRIO === */
.form-caixa {
  grid-column: 1 / -1;
  background: var(--surf-1);
  border-radius: var(--r-cartao);
  box-shadow: var(--sombra-1);
  padding: clamp(var(--e-4), 4vw, var(--e-5));
}
@media (min-width: 768px) { .form-caixa { grid-column: 2 / span 10; } }

.form-caixa h2 { font-size: var(--t-h2); margin-bottom: var(--e-2); }

.opcoes { display: grid; gap: var(--e-2); margin: var(--e-4) 0; }
@media (min-width: 640px) { .opcoes { grid-template-columns: 1fr 1fr; } }
.opcao {
  position: relative;
  display: flex; align-items: center; gap: var(--e-3);
  background: var(--surf-2);
  border: 1px solid var(--linha);
  border-radius: var(--r-fio);
  padding: var(--e-2) var(--e-3);
  cursor: pointer; min-height: 48px;
  font-size: var(--t-caption);
  transition: border-color var(--dur-rapida) var(--ease-pedra);
}
.opcao:hover { border-color: var(--linha-forte); }
.opcao input { position: absolute; opacity: 0; pointer-events: none; }
.opcao .disco {
  width: 8px; height: 8px; border-radius: 50%;
  border: 1px solid var(--texto-3); flex: none;
  transition: background var(--dur-rapida), border-color var(--dur-rapida);
}
.opcao:has(input:checked) { border-color: var(--ambar); }
.opcao:has(input:checked) .disco { background: var(--ambar); border-color: var(--ambar); }
.opcao:has(input:focus-visible) { outline: 2px solid var(--foco); outline-offset: 3px; }

.campos { display: grid; gap: var(--e-3); margin-bottom: var(--e-4); }
@media (min-width: 768px) { .campos { grid-template-columns: repeat(3, 1fr); } }
.campo label { display: block; font-size: var(--t-caption); font-weight: 500; color: var(--texto-2); margin-bottom: var(--e-1); }
.campo label .obr { color: var(--ambar); margin-left: 2px; }
.campo input {
  width: 100%;
  background: var(--surf-2);
  border: 1px solid var(--linha);
  border-radius: var(--r-fio);
  color: var(--texto);
  font: 400 var(--t-body) var(--f-texto);
  padding: 12px var(--e-3);
  min-height: 48px;
}
.campo input:focus { border-color: var(--ambar-luz); outline: 2px solid var(--foco); outline-offset: 2px; }
.campo .msg-erro { display: none; font-size: var(--t-caption); color: var(--erro); margin-top: var(--e-1); }
.campo.erro input { border-color: var(--erro); }
.campo.erro .msg-erro { display: block; }

/* consentimento LGPD — caixa própria, nunca pré-marcada */
.consent {
  display: flex; align-items: flex-start; gap: var(--e-3);
  margin-bottom: var(--e-4);
  font-size: var(--t-caption); color: var(--texto-2);
  line-height: 1.6; cursor: pointer;
}
.consent input {
  width: 20px; height: 20px; flex: none; margin-top: 2px;
  accent-color: var(--ambar);
}
.consent a { color: var(--ambar-luz); }
.consent.erro { color: var(--erro); }
.msg-consent { display: block; margin: calc(var(--e-3) * -1) 0 var(--e-3); }

.form-fim { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-3) var(--e-4); }
.form-fim .btn { flex: 0 1 auto; }
@media (max-width: 479px) { .form-fim .btn { flex: 1 1 100%; } }

.confirmacao { display: none; }
.confirmacao.mostra { display: block; }
.confirmacao h3 {
  font: 500 var(--t-h3) var(--f-display); margin: 0 0 var(--e-2);
  display: flex; align-items: center; gap: var(--e-3);
}
.confirmacao h3::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--ok); flex: none; }
.envio-acoes { display: flex; flex-wrap: wrap; gap: var(--e-2); margin-top: var(--e-4); }

/* ============================================================== RODAPÉ === */
.rodape {
  background: var(--bg-fundo);
  border-top: 1px solid var(--linha);
  padding: var(--e-6) 0 var(--e-4);
  margin-top: var(--e-6);
}
.rodape .grade { row-gap: var(--e-5); }
.rodape .bloco-marca, .rodape .bloco-nav, .rodape .bloco-legal { grid-column: 1 / -1; }
.rodape .bloco-marca img { width: min(200px, 55vw); height: auto; }
.rodape .bloco-nav ul { list-style: none; display: grid; }
.rodape .bloco-nav a {
  font-size: var(--t-caption); color: var(--texto-2); text-decoration: none;
  display: inline-flex; align-items: center; min-height: 44px;
}
.rodape .bloco-nav a:hover { color: var(--texto); }
.rodape .legal { font-size: var(--t-caption); color: var(--texto-3); line-height: 1.6; max-width: none; }
@media (min-width: 768px) {
  .rodape .bloco-marca { grid-column: 1 / span 4; }
  .rodape .bloco-nav   { grid-column: 6 / span 3; }
  .rodape .bloco-legal { grid-column: 9 / span 4; }
}
.rodape .linha-final {
  border-top: 1px solid var(--linha);
  margin-top: var(--e-4); padding-top: var(--e-4);
  grid-column: 1 / -1;
  font-size: var(--t-caption); color: var(--texto-3);
  display: flex; flex-wrap: wrap; gap: var(--e-2) var(--e-4);
  justify-content: space-between;
}