/* ============================================================
   CBVideira — Componentes de site "Videira & Deserto"
   Depende de cbvideira-tokens.css (variáveis, .btn, .card, .selo, .etiqueta).
   Reaproveitado em todas as páginas (nav e rodapé são os mesmos em todo lugar).
   ============================================================ */

/* ---------- Acessibilidade ---------- */
.pular-conteudo {
  position: absolute;
  left: var(--e-4);
  top: -60px;
  z-index: 200;
  background: var(--cor-primaria);
  color: var(--areia-50);
  padding: 10px 18px;
  border-radius: var(--raio-md);
  text-decoration: none;
  transition: top var(--transicao);
}
.pular-conteudo:focus { top: var(--e-4); }

/* ---------- Nav ---------- */
.nav {
  position: fixed;
  inset-inline: 0;
  top: 0;
  z-index: 100;
  background: var(--cor-fundo);
  transition: box-shadow var(--transicao);
}
.nav--elevado { box-shadow: var(--elev-2); }

.nav__linha {
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--pagina-px);
  height: 76px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-5);
}

.nav__marca { display: flex; align-items: center; gap: var(--e-3); text-decoration: none; }
.nav__marca img { height: 44px; width: auto; display: block; }
.nav__marca span {
  font-family: var(--fonte-titulo);
  font-weight: 600;
  font-size: 1.0625rem;
  color: var(--cor-texto);
}

.nav__links {
  display: flex;
  align-items: center;
  gap: var(--e-5);
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav__links > li { position: relative; }

.nav__link,
.nav__link-btn {
  font-family: var(--fonte-corpo);
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--cor-texto);
  text-decoration: none;
  background: none;
  border: 0;
  padding: 8px 2px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  white-space: nowrap;
}
.nav__link:hover,
.nav__link-btn:hover,
.nav__link[aria-current="page"] { color: var(--cor-primaria); }

.nav__link[aria-current="page"] {
  border-bottom: 2px solid var(--cor-destaque);
}

.nav__link-btn svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 2; transition: transform var(--transicao); }
.nav__item--aberto .nav__link-btn svg { transform: rotate(180deg); }

.nav__submenu {
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  min-width: 220px;
  background: var(--cor-superficie);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-md);
  box-shadow: var(--elev-3);
  padding: var(--e-2);
  list-style: none;
  margin: 0;
  display: none;
}
.nav__item--aberto .nav__submenu { display: block; }

.nav__submenu a {
  display: block;
  padding: 10px 12px;
  border-radius: var(--raio-sm);
  color: var(--cor-texto);
  text-decoration: none;
  font-size: 0.9375rem;
}
.nav__submenu a:hover { background: var(--areia-100); color: var(--cor-primaria); }
.nav__submenu a[aria-current="page"] { color: var(--cor-primaria); font-weight: 600; }

.nav__toggle {
  position: relative;
  z-index: 101;
  display: none;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  background: none;
  border: 0;
  cursor: pointer;
  color: var(--cor-texto);
}
.nav__toggle svg { width: 26px; height: 26px; stroke: currentColor; fill: none; stroke-width: 2; }

/* ---------- Mobile ---------- */
@media (max-width: 1024px) {
  .nav__linha { padding-inline: var(--pagina-px); }
  .nav__toggle { display: inline-flex; }

  .nav__links {
    position: fixed;
    z-index: 100;
    inset: 0 0 0 auto;
    width: min(320px, 86vw);
    height: 100vh;
    background: var(--videira-900);
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 96px var(--e-5) var(--e-5);
    transform: translateX(100%);
    transition: transform var(--transicao);
    overflow-y: auto;
  }
  .nav--aberto .nav__links { transform: translateX(0); }

  .nav__links > li { width: 100%; }
  .nav__link, .nav__link-btn {
    color: var(--areia-50);
    width: 100%;
    padding: 14px 4px;
    min-height: 44px;
    justify-content: space-between;
    border-bottom: 1px solid rgba(251, 247, 240, 0.12);
  }
  .nav__link[aria-current="page"] { border-bottom: 2px solid var(--cor-destaque); }
  .nav__link-btn:hover, .nav__link:hover { color: var(--sol-400); }

  .nav__submenu {
    position: static;
    background: transparent;
    border: 0;
    box-shadow: none;
    padding-left: var(--e-4);
  }
  .nav__submenu a { color: var(--areia-200); }
  .nav__submenu a:hover { background: rgba(251, 247, 240, 0.08); color: var(--sol-400); }
  .nav__submenu a[aria-current="page"] { color: var(--sol-400); }

  .nav__cta { margin-top: var(--e-5); }

  .nav__cortina {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(36, 27, 20, 0.4);
    z-index: 99;
  }
  .nav--aberto .nav__cortina { display: block; }
}

/* ---------- Carrossel (seção opcional, desligada por padrão) ---------- */
.carousel-home { padding-block: var(--e-6); }
.carousel__viewport {
  position: relative;
  overflow: hidden;
  border-radius: var(--raio-lg);
  box-shadow: var(--elev-2);
  aspect-ratio: 16 / 7;
}
.carousel__trilho {
  display: flex;
  height: 100%;
  transition: transform 500ms ease;
}
.carousel__slide {
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.carousel__seta {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 0;
  background: rgba(36, 27, 20, 0.45);
  color: var(--areia-50);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background var(--transicao);
}
.carousel__seta:hover { background: rgba(36, 27, 20, 0.7); }
.carousel__seta svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 2; }
.carousel__seta--prev { left: var(--e-4); }
.carousel__seta--next { right: var(--e-4); }

.carousel__pontos {
  position: absolute;
  bottom: var(--e-4);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
}
.carousel__ponto {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  border: 0;
  background: rgba(251, 247, 240, 0.5);
  cursor: pointer;
  padding: 0;
}
.carousel__ponto--ativo { background: var(--sol-400); }

@media (max-width: 640px) {
  .carousel__viewport { aspect-ratio: 4 / 5; }
  .carousel__seta { width: 36px; height: 36px; }
}

/* ---------- Hero ---------- */
.hero {
  position: relative;
  min-height: 660px;
  padding-top: 76px;
  display: flex;
  align-items: center;
  overflow: hidden;
  color: var(--areia-50);
  background: linear-gradient(135deg, var(--videira-900) 0%, #2C3A1C 55%, var(--vinho-900) 100%);
}
.hero::before {
  content: "";
  position: absolute;
  top: -20%;
  right: -10%;
  width: 640px;
  height: 640px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--sol-400) 0%, transparent 70%);
  opacity: 0.38;
  pointer-events: none;
}
.hero::after {
  content: "";
  position: absolute;
  bottom: -30%;
  left: -10%;
  width: 720px;
  height: 360px;
  border-radius: 50%;
  background: var(--tinta);
  opacity: 0.28;
  filter: blur(10px);
  pointer-events: none;
}

.hero__conteudo { position: relative; z-index: 1; max-width: 760px; }

.hero__pilula {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border-radius: var(--raio-full);
  background: rgba(251, 247, 240, 0.1);
  border: 1px solid rgba(251, 247, 240, 0.25);
  font-size: var(--t-legenda);
  font-weight: 600;
  letter-spacing: 0.4px;
  margin-bottom: var(--e-5);
}

.hero__titulo { color: var(--areia-50); margin-bottom: var(--e-5); }
.hero__lead { color: var(--areia-200); font-size: var(--t-corpo-g); max-width: 60ch; margin-bottom: var(--e-6); }
.hero__acoes { display: flex; gap: var(--e-4); flex-wrap: wrap; }

/* ---------- Cabeçalho de página (páginas internas) ---------- */
.cabecalho-pagina {
  position: relative;
  overflow: hidden;
  padding-top: 76px;
  min-height: 300px;
  display: flex;
  align-items: center;
  color: var(--areia-50);
  background: linear-gradient(135deg, var(--videira-900), var(--videira-700));
}
.cabecalho-pagina::before {
  content: "";
  position: absolute;
  top: -30%;
  right: -8%;
  width: 480px;
  height: 480px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--sol-400) 0%, transparent 70%);
  opacity: 0.32;
  pointer-events: none;
}
.cabecalho-pagina__conteudo { position: relative; z-index: 1; max-width: 720px; padding-block: var(--e-7); }
.cabecalho-pagina .olho { color: var(--sol-400); display: block; margin-bottom: var(--e-3); }
.cabecalho-pagina h1 { color: var(--areia-50); margin-bottom: var(--e-3); }
.cabecalho-pagina__lead { color: var(--areia-200); font-size: var(--t-corpo-g); max-width: 60ch; }

/* ---------- Faixa de horários ---------- */
.faixa-horarios {
  position: relative;
  z-index: 2;
  max-width: calc(var(--container) - var(--pagina-px));
  margin: -60px auto 0;
  background: rgba(251, 247, 240, 0.96);
  border-radius: var(--raio-xl);
  box-shadow: var(--elev-3);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}
.faixa-horarios__item {
  padding: var(--e-6) var(--e-5);
  text-align: center;
  border-right: 1px solid var(--cor-borda);
}
.faixa-horarios__item:last-child { border-right: 0; }
.faixa-horarios__item strong {
  display: block;
  font-family: var(--fonte-titulo);
  font-size: var(--t-h3);
  color: var(--cor-primaria);
}
.faixa-horarios__item span { color: var(--cor-texto-suave); font-size: var(--t-corpo-p); }

/* ---------- Cabeçalho de seção ---------- */
.cabecalho-secao { max-width: 640px; margin-bottom: var(--e-7); }
.cabecalho-secao .olho { display: block; margin-bottom: var(--e-3); }

/* ---------- Pilares ---------- */
.grade-pilares { align-items: stretch; }
.grade-pilares .card { display: flex; flex-direction: column; gap: var(--e-4); height: 100%; }

/* ---------- Pregação ---------- */
.pregacao { display: grid; grid-template-columns: 1fr 1fr; gap: var(--e-8); align-items: center; }
.pregacao__player {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: var(--raio-lg);
  overflow: hidden;
  background: linear-gradient(135deg, var(--videira-700), var(--vinho-700));
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}
.pregacao__player img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.55; }
.pregacao__play {
  position: relative;
  z-index: 1;
  width: 68px;
  height: 68px;
  border-radius: 50%;
  background: var(--sol-400);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--elev-3);
  transition: transform var(--transicao);
}
.pregacao__player:hover .pregacao__play { transform: scale(1.06); }
.pregacao__play svg { width: 26px; height: 26px; fill: var(--videira-900); margin-left: 3px; }

/* ---------- Grupos de vida ---------- */
.gv-grade {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--e-5);
}
.gv-card {
  background: var(--areia-100);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-lg);
  padding: var(--e-5);
  display: flex;
  flex-direction: column;
  gap: var(--e-2);
}
.gv-card__horario {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--cor-acento);
  font-size: var(--t-corpo-p);
  font-weight: 600;
}
.gv-card__horario svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 1.8; }
.gv-card h4 { margin-top: 2px; }
.gv-card .etiqueta { align-self: flex-start; }

/* ---------- Conferências ---------- */
.conferencias {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, var(--vinho-900), var(--vinho-700));
  color: var(--areia-50);
}
.conferencias::before {
  content: "";
  position: absolute;
  top: -30%;
  right: -5%;
  width: 520px;
  height: 520px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--sol-400) 0%, transparent 70%);
  opacity: 0.3;
  pointer-events: none;
}
.conferencias__grade { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr 1fr; gap: var(--e-8); align-items: center; }
.conferencias__cartoes { display: flex; flex-direction: column; gap: var(--e-4); }
.conferencias__cartao {
  background: rgba(251, 247, 240, 0.08);
  border: 1px solid var(--vinho-500);
  border-radius: var(--raio-lg);
  padding: var(--e-5);
}
.conferencias__cartao h4 { color: var(--areia-50); margin-bottom: var(--e-2); }
.conferencias__cartao p { color: var(--areia-200); }

/* ---------- Contribuir ---------- */
.contribuir-grade { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--e-5); }
.chip-pix {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--e-3);
  margin-top: var(--e-4);
  padding: var(--e-4);
  background: var(--areia-100);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-md);
}
.chip-pix span { font-size: var(--t-corpo-p); overflow-wrap: anywhere; }
.chip-pix button {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: var(--raio-full);
  border: 1px solid var(--cor-primaria);
  background: transparent;
  color: var(--cor-primaria);
  font-size: var(--t-legenda);
  font-weight: 600;
  cursor: pointer;
  transition: background var(--transicao);
}
.chip-pix button:hover { background: var(--videira-100); }
.chip-pix button svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 1.8; }

/* ---------- Layout de duas colunas (páginas internas) ---------- */
.duas-colunas { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: var(--e-8); align-items: start; }
.duas-colunas img { width: 100%; border-radius: var(--raio-lg); box-shadow: var(--elev-2); display: block; }
.duas-colunas .corpo-texto > * + * { margin-top: var(--e-4); }

/* ---------- Card · Pessoa ---------- */
.grade-pessoas { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--e-5); }
.card-pessoa { background: var(--cor-superficie); border: 1px solid var(--cor-borda); border-radius: var(--raio-lg); box-shadow: var(--elev-1); overflow: hidden; }
.card-pessoa__foto { aspect-ratio: 1 / 1; overflow: hidden; background: var(--areia-200); }
.card-pessoa__foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.card-pessoa__corpo { padding: var(--e-5); }
.card-pessoa .olho { display: block; margin-bottom: 4px; }
.card-pessoa h4 { margin-bottom: 6px; }
.card-pessoa p { color: var(--cor-texto-suave); font-size: var(--t-corpo-p); }

/* ---------- Card · Link ---------- */
.lista-links { display: flex; flex-direction: column; gap: var(--e-3); }
.card-link {
  display: flex;
  align-items: center;
  gap: var(--e-4);
  padding: var(--e-4) var(--e-5);
  background: var(--cor-superficie);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-md);
  text-decoration: none;
  color: var(--cor-texto);
  transition: box-shadow var(--transicao), transform var(--transicao);
}
.card-link:hover { box-shadow: var(--elev-2); transform: translateY(-1px); }
.card-link__icone { flex-shrink: 0; color: var(--videira-600); display: flex; }
.card-link__icone svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 1.7; }
.card-link span { flex: 1; font-weight: 500; }
.card-link__seta { flex-shrink: 0; color: var(--barro-400); display: flex; }
.card-link__seta svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 1.8; }

.grade-links-grade { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--e-6); }
.grade-links-grade h3 { margin-bottom: var(--e-4); }

/* ---------- Visite-nos ---------- */
.grade-visite { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--e-5); margin-bottom: var(--e-8); }
.mapa-visite { width: 100%; max-width: 640px; height: 420px; border-radius: var(--raio-xl); overflow: hidden; box-shadow: var(--elev-2); margin-inline: auto; }
.mapa-visite iframe { width: 100%; height: 100%; border: 0; display: block; }

/* ---------- Rodapé ---------- */
.rodape { background: var(--videira-900); color: var(--areia-200); }
.rodape__grade { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: var(--e-6); padding-block: var(--e-9) var(--e-7); }
.rodape__coluna h5 {
  font-family: var(--fonte-corpo);
  font-size: var(--t-olho);
  font-weight: 600;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--sol-400);
  margin: 0 0 var(--e-4);
}
.rodape__marca { display: flex; align-items: center; gap: var(--e-3); margin-bottom: var(--e-4); }
.rodape__marca img { height: 40px; }
.rodape__marca span { font-family: var(--fonte-titulo); font-weight: 600; color: var(--areia-50); font-size: 1.0625rem; }
.rodape__coluna ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--e-3); }
.rodape__coluna a { color: var(--areia-200); text-decoration: none; font-size: var(--t-corpo-p); }
.rodape__coluna a:hover { color: var(--sol-400); }
.rodape__base {
  border-top: 1px solid rgba(251, 247, 240, 0.12);
  padding-block: var(--e-5);
  font-size: var(--t-legenda);
  color: var(--areia-300);
}

/* ---------- Responsivo ---------- */
@media (max-width: 1024px) {
  .faixa-horarios { grid-template-columns: 1fr; margin-inline: var(--pagina-px); }
  .faixa-horarios__item { border-right: 0; border-bottom: 1px solid var(--cor-borda); }
  .faixa-horarios__item:last-child { border-bottom: 0; }
  .pregacao, .conferencias__grade, .duas-colunas { grid-template-columns: 1fr; gap: var(--e-6); }
  .rodape__grade { grid-template-columns: 1fr 1fr; }
  .grade-links-grade { grid-template-columns: 1fr 1fr; }
  .grade-visite { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 640px) {
  .hero { min-height: auto; padding-block: 140px var(--e-8); }
  .faixa-horarios { margin-inline: var(--e-4); margin-top: var(--e-6); }
  .rodape__grade { grid-template-columns: 1fr; }
  .grade-links-grade, .grade-visite { grid-template-columns: 1fr; }
  .cabecalho-pagina { min-height: 240px; }
}