/* ==========================================================================
   DALILU EVENTOS — Design System
   Este arquivo é o "template base". Todas as páginas do site usam ele.
   Se você mudar uma cor aqui, muda no site inteiro.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. TOKENS — as variáveis da marca.
   Tudo que é cor, espaço e fonte fica aqui. Nunca escreva um HEX solto
   no resto do arquivo: use var(--nome-do-token).
   -------------------------------------------------------------------------- */
:root {
  /* ================================================================
     CORES — calibradas no pixel da arte oficial da Dalilu (25/08/2026).
     Matiz 4° = vermelho-tijolo. NÃO é roxo.
     Nunca escreva um HEX solto: use sempre var(--token).
     ================================================================ */

  /* Vinho tijolo — a cor da marca */
  --vinho-900: #270906;   /* fundos escuros, footer, overlay de foto */
  --vinho-700: #45110D;   /* ★ cor-base: botões, seções, header */
  --vinho-500: #6B1A14;   /* hover de botão */

  /* Champanhe — substituiu "dourado" da v1 */
  --champanhe-100: #F4DBC3;  /* títulos e caixas SOBRE vinho — 11.8:1 ✅ */
  --champanhe-300: #DFC6AF;  /* texto secundário sobre fundo escuro — 11.4:1 ✅ */
  --champanhe-500: #C49264;  /* SÓ ornamento: linha, borda, ícone. NUNCA texto sobre claro (2.6:1 ❌) */
  --champanhe-800: #744B25;  /* texto dourado SOBRE FUNDO CLARO — 7.1:1 ✅ */

  /* Neutros quentes — nunca cinza frio */
  --nude-200: #E7D8CA;   /* divisores */
  --creme-50: #FBF7F4;   /* fundo padrão do site */
  --creme-100: #F5EDE6;  /* fundo alternado de seção */
  --carvao-900: #1F1A19; /* texto corrido — 16.2:1 ✅ */
  --carvao-500: #736764; /* texto secundário — 5.1:1 ✅ */
  --branco: #FFFFFF;     /* só cards */

  /* Tipografia */
  --font-display: "Playfair Display", Georgia, "Times New Roman", serif;
  --font-texto: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Espaçamento — escala de 8px. Use sempre estes, não invente valores. */
  --sp-1: 8px;
  --sp-2: 16px;
  --sp-3: 24px;
  --sp-4: 32px;
  --sp-5: 48px;
  --sp-6: 64px;
  --sp-7: 96px;
  --sp-8: 128px;

  /* Estrutura */
  --largura-max: 1180px;
  --largura-texto: 62ch;
  --raio: 4px;
  --sombra: 0 2px 24px rgba(39, 9, 6, .10);
  --transicao: 200ms ease;
  --header-altura: 76px;

  /* Overlay padrão para foto com texto por cima */
  --overlay-foto: linear-gradient(
    to top,
    rgba(39,9,6,.92) 0%,
    rgba(39,9,6,.62) 45%,
    rgba(39,9,6,.35) 100%
  );
}

/* --------------------------------------------------------------------------
   2. RESET — zera as diferenças entre navegadores
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-altura) + 16px); }

body {
  font-family: var(--font-texto);
  font-size: 17px;
  line-height: 1.7;
  color: var(--carvao-900);
  background: var(--creme-50);
  -webkit-font-smoothing: antialiased;
}

img, picture, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
button, input, textarea, select { font: inherit; color: inherit; }

/* Acessibilidade: quem prefere menos movimento, não vê animação */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* Foco visível no teclado — obrigatório para acessibilidade */
:focus-visible { outline: 2px solid var(--champanhe-800); outline-offset: 3px; }

/* --------------------------------------------------------------------------
   3. TIPOGRAFIA
   -------------------------------------------------------------------------- */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.01em;
}

h1 { font-size: clamp(2.4rem, 5.5vw, 3.9rem); line-height: 1.08; }
h2 { font-size: clamp(1.9rem, 3.6vw, 2.6rem); }
h3 { font-size: clamp(1.25rem, 2vw, 1.5rem); }

p { max-width: var(--largura-texto); }

/* O "olho" — label pequeno em caixa alta. É a assinatura visual da marca. */
.olho {
  display: inline-block;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--champanhe-800);
  margin-bottom: var(--sp-2);
}
.olho--claro { color: var(--champanhe-300); }

/* Frase emotiva em itálico serif. Máximo 1 por seção. */
.frase-serif {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1.2rem, 2.2vw, 1.55rem);
  line-height: 1.5;
  color: var(--vinho-700);
}

.texto-secundario { color: var(--carvao-500); }
.texto-peq { font-size: 0.94rem; }

/* Ornamento: linha dourada curta sob um título */
.ornamento {
  width: 48px; height: 2px;
  background: var(--champanhe-500);
  border: 0;
  margin: var(--sp-3) 0;
}
.ornamento--centro { margin-left: auto; margin-right: auto; }

/* --------------------------------------------------------------------------
   4. LAYOUT — container e seções
   -------------------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--largura-max);
  margin-inline: auto;
  padding-inline: var(--sp-3);
}

.secao { padding-block: clamp(var(--sp-6), 9vw, var(--sp-8)); }
.secao--compacta { padding-block: clamp(var(--sp-5), 6vw, var(--sp-6)); }

/* Variações de fundo de seção */
.secao--creme { background: var(--creme-100); }
.secao--vinho { background: var(--vinho-700); color: var(--creme-50); }
.secao--vinho h1, .secao--vinho h2, .secao--vinho h3 { color: var(--creme-50); }
.secao--vinho .texto-secundario { color: var(--nude-200); }
.secao--escuro { background: var(--vinho-900); color: var(--creme-50); }
.secao--escuro h2, .secao--escuro h3 { color: var(--creme-50); }

/* Cabeçalho de seção */
.secao-cabecalho { max-width: 720px; margin-bottom: var(--sp-5); }
.secao-cabecalho--centro { margin-inline: auto; text-align: center; }
.secao-cabecalho--centro p { margin-inline: auto; }

/* Grid genérico */
.grid { display: grid; gap: var(--sp-3); }
@media (min-width: 700px)  { .grid--2 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 700px)  { .grid--3 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .grid--3 { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 700px)  { .grid--4 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .grid--4 { grid-template-columns: repeat(4, 1fr); } }

/* --------------------------------------------------------------------------
   5. BOTÕES
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-1);
  padding: 15px 30px;
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-decoration: none;
  border: 1px solid transparent;
  border-radius: var(--raio);
  cursor: pointer;
  transition: background var(--transicao), color var(--transicao), border-color var(--transicao);
  text-align: center;
}

.btn--primario { background: var(--vinho-700); color: var(--creme-50); }
.btn--primario:hover { background: var(--vinho-500); }

.btn--secundario { background: transparent; color: var(--vinho-700); border-color: var(--vinho-700); }
.btn--secundario:hover { background: var(--vinho-700); color: var(--creme-50); }

/* Para usar em cima de foto ou fundo escuro */
.btn--claro { background: var(--creme-50); color: var(--vinho-700); }
.btn--claro:hover { background: var(--branco); }

.btn--fantasma { background: transparent; color: var(--creme-50); border-color: rgba(251, 247, 242, 0.45); }
.btn--fantasma:hover { background: rgba(251, 247, 242, 0.12); border-color: var(--creme-50); }

.btn--bloco { width: 100%; }

/* Link com seta */
.link-seta {
  display: inline-flex; align-items: center; gap: 8px;
  font-weight: 600; font-size: 0.95rem;
  color: var(--vinho-700); text-decoration: none;
  border-bottom: 1px solid var(--nude-200);
  padding-bottom: 4px;
  transition: border-color var(--transicao), gap var(--transicao);
}
.link-seta:hover { border-color: var(--vinho-700); gap: 13px; }
.link-seta--claro { color: var(--champanhe-300); border-color: rgba(223, 198, 175, 0.4); }
.link-seta--claro:hover { border-color: var(--champanhe-300); }

/* --------------------------------------------------------------------------
   6. HEADER
   -------------------------------------------------------------------------- */
.header {
  position: sticky; top: 0; z-index: 100;
  height: var(--header-altura);
  display: flex; align-items: center;
  background: var(--creme-50);
  border-bottom: 1px solid var(--nude-200);
  transition: box-shadow var(--transicao);
}
.header.is-scrolled { box-shadow: var(--sombra); }

.header__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); }

.logo { display: flex; flex-direction: column; text-decoration: none; line-height: 1; }
.logo__nome { font-family: var(--font-display); font-size: 1.55rem; color: var(--vinho-700); }
.logo__sub {
  font-size: 0.58rem; font-weight: 600; letter-spacing: 0.36em;
  text-transform: uppercase; color: var(--champanhe-800); margin-top: 3px;
}

.nav { display: none; }
@media (min-width: 940px) { .nav { display: flex; align-items: center; gap: var(--sp-4); } }
.nav a {
  font-size: 0.94rem; font-weight: 500; text-decoration: none;
  color: var(--carvao-900); padding-block: 6px;
  border-bottom: 1px solid transparent;
  transition: border-color var(--transicao), color var(--transicao);
}
.nav a:hover, .nav a[aria-current="page"] { color: var(--vinho-700); border-color: var(--champanhe-500); }

.header__cta { display: none; }
@media (min-width: 940px) { .header__cta { display: inline-flex; padding: 11px 22px; } }

/* Botão hambúrguer */
.menu-btn {
  display: inline-flex; flex-direction: column; justify-content: center; gap: 5px;
  width: 44px; height: 44px; padding: 0;
  background: none; border: 0; cursor: pointer;
}
@media (min-width: 940px) { .menu-btn { display: none; } }
.menu-btn span {
  display: block; height: 2px; width: 24px; margin-inline: auto;
  background: var(--vinho-700); transition: transform var(--transicao), opacity var(--transicao);
}
.menu-btn[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.menu-btn[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.menu-btn[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Menu mobile */
.menu-mobile {
  position: fixed; inset: var(--header-altura) 0 0 0; z-index: 99;
  background: var(--creme-50);
  padding: var(--sp-4) var(--sp-3);
  display: flex; flex-direction: column; gap: var(--sp-2);
  transform: translateX(100%);
  transition: transform 260ms ease;
  overflow-y: auto;
}
.menu-mobile.is-open { transform: translateX(0); }
@media (min-width: 940px) { .menu-mobile { display: none; } }
.menu-mobile a {
  font-family: var(--font-display); font-size: 1.5rem;
  text-decoration: none; color: var(--carvao-900);
  padding-block: var(--sp-2); border-bottom: 1px solid var(--nude-200);
}
.menu-mobile .btn { margin-top: var(--sp-3); }

/* --------------------------------------------------------------------------
   7. HERO
   -------------------------------------------------------------------------- */
.hero { position: relative; min-height: min(88svh, 760px); display: flex; align-items: flex-end; }
.hero__media { position: absolute; inset: 0; overflow: hidden; background: var(--vinho-900); }
.hero__media img { width: 100%; height: 100%; object-fit: cover; }
.hero__media::after {
  content: ""; position: absolute; inset: 0;
  background: var(--overlay-foto);
}
.hero__conteudo { position: relative; z-index: 1; color: var(--creme-50); padding-block: var(--sp-6) var(--sp-6); }
.hero__conteudo h1 { color: var(--creme-50); max-width: 15ch; }
.hero__sub { max-width: 52ch; margin-top: var(--sp-3); color: var(--nude-200); font-size: 1.06rem; }
.hero__acoes { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-4); }

/* Variação do hero pra banner que já vem com o texto desenhado na própria imagem
   (enviado pelo Renan em 25/08/2026, img/hero-home.jpg). Como essa foto é bem mais
   larga e baixa (1920x600) que a foto normal do hero (1920x1280), usamos aspect-ratio
   pra altura da seção seguir sempre a proporção real da imagem — assim ela nunca
   corta as laterais nem o texto que já está desenhado nela. */
.hero--banner {
  min-height: 0;
  aspect-ratio: 1920 / 600;
}
.hero--banner .hero__media::after {
  /* Escurecido bem mais leve que o padrão: essa foto já tem texto dourado
     desenhado nela, um véu escuro forte por cima ia apagar ele. */
  background: linear-gradient(to top, rgba(39,9,6,.55) 0%, rgba(39,9,6,.25) 45%, rgba(39,9,6,.05) 100%);
}

/* --------------------------------------------------------------------------
   8. BARRA DE PROVAS (os números da casa)
   -------------------------------------------------------------------------- */
.provas { background: var(--vinho-900); color: var(--creme-50); }
.provas__lista {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-4) var(--sp-3);
  padding-block: var(--sp-5);
}
@media (min-width: 900px) { .provas__lista { grid-template-columns: repeat(4, 1fr); } }
.prova__valor { font-family: var(--font-display); font-size: 1.9rem; color: var(--champanhe-300); line-height: 1.1; }
.prova__label { font-size: 0.9rem; color: var(--nude-200); margin-top: 6px; }

/* --------------------------------------------------------------------------
   9. CARDS
   -------------------------------------------------------------------------- */
.card {
  background: var(--branco);
  border: 1px solid var(--nude-200);
  border-radius: 2px;
  overflow: hidden;
  display: flex; flex-direction: column;
}
.card__media { aspect-ratio: 4 / 3; background: var(--vinho-900); overflow: hidden; }
.card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 400ms ease; }
.card:hover .card__media img { transform: scale(1.04); }
.card__corpo { padding: var(--sp-3); display: flex; flex-direction: column; gap: var(--sp-2); flex: 1; }
.card__corpo p { flex: 1; }
.card__corpo .link-seta { align-self: flex-start; }

/* Card de caminho (Casamento / 15 Anos) — o mais importante da home */
.caminho { position: relative; display: block; text-decoration: none; overflow: hidden; border-radius: 2px; min-height: 420px; }
.caminho img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 500ms ease; }
.caminho::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(39,9,6,.94) 8%, rgba(39,9,6,.45) 55%, rgba(39,9,6,.2) 100%);
}
.caminho:hover img { transform: scale(1.05); }
.caminho__texto { position: relative; z-index: 1; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; padding: var(--sp-4); color: var(--creme-50); min-height: 420px; }
.caminho__texto h3 { color: var(--creme-50); font-size: 1.75rem; }
.caminho__texto p { color: var(--nude-200); font-size: 0.98rem; margin-top: var(--sp-1); }
.caminho__texto .link-seta { margin-top: var(--sp-3); }

/* --------------------------------------------------------------------------
   10. GALERIA
   -------------------------------------------------------------------------- */
.galeria { display: grid; gap: 10px; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 800px) { .galeria { grid-template-columns: repeat(4, 1fr); } }
.galeria figure { margin: 0; position: relative; overflow: hidden; aspect-ratio: 3 / 4; background: var(--vinho-900); }
.galeria img { width: 100%; height: 100%; object-fit: cover; transition: transform 450ms ease; }
.galeria figure:hover img { transform: scale(1.05); }
.galeria figcaption {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 10px 12px; font-size: 0.8rem; color: var(--creme-50);
  background: linear-gradient(to top, rgba(39,9,6,.9), transparent);
}
.galeria__destaque { grid-column: span 2; aspect-ratio: 3 / 2; }

/* --------------------------------------------------------------------------
   11. DEPOIMENTOS
   -------------------------------------------------------------------------- */
.depoimento {
  background: var(--branco);
  border: 1px solid var(--nude-200);
  border-left: 3px solid var(--champanhe-500);
  padding: var(--sp-4) var(--sp-3);
  display: flex; flex-direction: column; gap: var(--sp-2);
}
.depoimento blockquote { margin: 0; font-size: 1.02rem; line-height: 1.65; flex: 1; }
/* Aspas douradas — ícone feito pelo Renan (25/08/2026, img/icons/icone-aspas.png),
   troca a aspa de texto que tinha antes por um desenho no mesmo padrão visual
   dos outros ícones da marca. */
.depoimento blockquote::before {
  content: "";
  display: block;
  width: 34px; height: 34px;
  background: url('../img/icons/icone-aspas.png') no-repeat center / contain;
  margin-bottom: 14px;
}
.depoimento__autor { font-weight: 600; font-size: 0.94rem; }
.depoimento__papel { font-size: 0.85rem; color: var(--carvao-500); }

/* --------------------------------------------------------------------------
   12. FAIXA DE CTA
   -------------------------------------------------------------------------- */
.faixa-cta { text-align: center; }
.faixa-cta h2 { max-width: 18ch; margin-inline: auto; }
.faixa-cta p { margin-inline: auto; margin-top: var(--sp-2); }
.faixa-cta .hero__acoes { justify-content: center; }

/* --------------------------------------------------------------------------
   13. LOCALIZAÇÃO
   -------------------------------------------------------------------------- */
.local { display: grid; gap: var(--sp-4); align-items: center; }
@media (min-width: 900px) { .local { grid-template-columns: 1fr 1.15fr; gap: var(--sp-6); } }
.local__mapa { aspect-ratio: 4 / 3; border: 1px solid var(--nude-200); background: var(--creme-100); }
.local__mapa iframe { width: 100%; height: 100%; border: 0; display: block; }
.local dl { display: grid; gap: var(--sp-3); margin: var(--sp-3) 0 0; }
.local dt { font-size: 0.78rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--champanhe-800); }
.local dd { margin: 4px 0 0; }

/* --------------------------------------------------------------------------
   14. FOOTER
   -------------------------------------------------------------------------- */
.footer { background: var(--vinho-900); color: var(--nude-200); padding-block: var(--sp-6) var(--sp-4); font-size: 0.95rem; }
.footer a { color: var(--nude-200); text-decoration: none; }
.footer a:hover { color: var(--creme-50); text-decoration: underline; }
.footer__grid { display: grid; gap: var(--sp-4); }
@media (min-width: 800px) { .footer__grid { grid-template-columns: 1.4fr 1fr 1fr; gap: var(--sp-6); } }
.footer h4 { font-family: var(--font-texto); font-size: 0.78rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--champanhe-300); margin-bottom: var(--sp-2); }
.footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.footer .logo__nome { color: var(--creme-50); }
.footer__base { border-top: 1px solid rgba(231, 211, 193, 0.18); margin-top: var(--sp-5); padding-top: var(--sp-3); font-size: 0.85rem; display: flex; flex-wrap: wrap; gap: var(--sp-2); justify-content: space-between; }

/* --------------------------------------------------------------------------
   15. BOTÃO FLUTUANTE DE WHATSAPP
   -------------------------------------------------------------------------- */
.zap {
  position: fixed; right: 18px; bottom: 18px; z-index: 90;
  display: inline-flex; align-items: center; gap: 10px;
  padding: 13px 20px 13px 16px;
  background: #128C7E; color: #fff;
  border-radius: 999px; text-decoration: none; font-weight: 600; font-size: 0.92rem;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.22);
  transition: transform var(--transicao);
}
.zap:hover { transform: translateY(-2px); }
.zap svg { width: 22px; height: 22px; flex-shrink: 0; }
.zap span { display: none; }
@media (min-width: 640px) { .zap span { display: inline; } }

/* --------------------------------------------------------------------------
   16. UTILITÁRIOS
   -------------------------------------------------------------------------- */
.centro { text-align: center; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Animação de entrada ao rolar (ativada pelo main.js) */
.revelar { opacity: 0; transform: translateY(18px); transition: opacity 600ms ease, transform 600ms ease; }
.revelar.is-visivel { opacity: 1; transform: none; }

/* --------------------------------------------------------------------------
   17. COMPARATIVO — bloco "você não precisa coordenar seis fornecedores"
   Classe nova porque não existia nada parecido no CSS (procurei antes de criar,
   como o CLAUDE.md pede). Duas colunas de peso visual DIFERENTE de propósito:
   a esquerda vira uma lista longa e apagada (cansativa de ler), a direita vira
   uma frase só dentro de uma caixa vinho (resolvida, confiante). O contraste
   visual é a mensagem — o cérebro lê o contraste antes de ler as palavras.
   -------------------------------------------------------------------------- */
.comparativo__coluna { display: flex; flex-direction: column; gap: var(--sp-2); }

.comparativo__coluna--cansativo ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.comparativo__coluna--cansativo li {
  position: relative;
  padding-left: 24px;
  color: var(--carvao-500);
  font-size: 0.95rem;
}
.comparativo__coluna--cansativo li::before {
  content: "☎";
  position: absolute;
  left: 0;
  top: -1px;
  color: var(--champanhe-500);
}

.comparativo__coluna--simples {
  background: var(--vinho-700);
  color: var(--creme-50);
  border-radius: var(--raio);
  padding: var(--sp-4);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.comparativo__linha {
  margin: 0;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(1.6rem, 3vw, 2.1rem);
  color: var(--champanhe-100);
}