/* Ravena Eventos — estilos da landing page. */

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* Cabeçalho */
.cabecalho { position: fixed; inset: 0 0 auto; z-index: 50; transition: background var(--transicao), box-shadow var(--transicao); }
.cabecalho--solido { background: var(--fundo-escuro); box-shadow: 0 2px 12px rgba(0, 0, 0, 0.2); }
.cabecalho__interno { display: flex; align-items: center; justify-content: space-between; min-height: 72px; }
.marca { display: flex; flex-direction: column; align-items: center; text-decoration: none; color: var(--branco); line-height: 1; }
.marca__logo { width: auto; height: 52px; }
.menu-botao { width: 48px; height: 48px; display: grid; place-items: center; background: none; border: 0; color: var(--branco); cursor: pointer; }
.menu { position: fixed; inset: 72px 0 auto; background: var(--fundo-escuro); padding: var(--e-5) var(--gutter) var(--e-6); display: none; flex-direction: column; gap: var(--e-5); }
.menu--aberto { display: flex; }
.menu ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.menu li a { display: block; padding: var(--e-3) 0; color: var(--branco); text-decoration: none; font-weight: 500; border-bottom: 1px solid rgba(255, 255, 255, 0.1); }
.menu li a:hover { color: var(--dourado-claro); }
.cabecalho :focus-visible { outline-color: var(--dourado-claro); }

@media (min-width: 1024px) {
  .menu-botao { display: none; }
  .menu { position: static; display: flex; flex-direction: row; align-items: center; background: none; padding: 0; gap: var(--e-6); }
  .menu ul { flex-direction: row; gap: var(--e-5); }
  .menu li a { border: 0; padding: var(--e-2) 0; font-size: 0.9375rem; }
}

/* Hero */
/* Hero dividido: a foto (680px de largura) nunca é ampliada além do tamanho original. */
.hero { background: var(--fundo-escuro); color: var(--branco); padding: calc(72px + var(--e-7)) 0 var(--e-8); overflow: hidden; }
.hero__interno { display: grid; gap: var(--e-7); align-items: center; }
.hero h1 { color: var(--branco); max-width: 14ch; margin-bottom: var(--e-4); }
.hero__texto { max-width: 520px; font-size: clamp(1rem, 0.95rem + 0.3vw, 1.1875rem); color: rgba(255, 255, 255, 0.88); margin-bottom: var(--e-6); }
.hero__acoes { display: flex; flex-wrap: wrap; gap: var(--e-3); }
/* Mosaico de 2 fotos sobrepostas na diagonal. Largura máxima 580px: nenhuma foto passa do tamanho original. */
.hero__mosaico {
  position: relative; width: 100%; max-width: 580px; justify-self: center; aspect-ratio: 10 / 9;
  display: grid; grid-template-columns: repeat(12, 1fr); grid-template-rows: repeat(12, 1fr);
}
.hero__foto { width: 100%; height: 100%; object-fit: cover; border-radius: var(--raio-g); box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45); }
.hero__foto--1 { grid-column: 1 / 10; grid-row: 1 / 7; }
.hero__foto--2 { grid-column: 4 / 13; grid-row: 6 / 13; z-index: 1; border: 4px solid var(--fundo-escuro); }
.hero__detalhe { grid-column: 10 / 13; grid-row: 1 / 3; align-self: center; justify-self: end; width: 64%; height: 1px; background: var(--dourado); position: relative; }
.hero__detalhe::after { content: ""; position: absolute; right: -4px; top: -4px; width: 8px; height: 8px; background: var(--dourado); transform: rotate(45deg); }
.sobretitulo--claro { color: var(--dourado-claro); }
.ornamento--claro { background:
  linear-gradient(var(--dourado), var(--dourado)) left center / 48px 1px no-repeat,
  linear-gradient(var(--dourado), var(--dourado)) right center / 48px 1px no-repeat; }
@media (max-width: 639px) {
  .hero__acoes .botao { width: 100%; }
}
@media (min-width: 1024px) {
  .hero { padding: calc(72px + var(--e-9)) 0 var(--e-9); }
  .hero__interno { grid-template-columns: 1fr 1fr; gap: var(--e-8); }
  .hero__mosaico { justify-self: end; }
}

/* Destaques */
.destaques { background: var(--fundo-escuro); color: var(--branco); border-top: 1px solid rgba(240, 211, 81, 0.25); }
.destaques__lista { list-style: none; margin: 0 auto; padding-block: var(--e-5); display: grid; grid-template-columns: 1fr 1fr; gap: var(--e-4); font-size: 0.875rem; font-weight: 500; }
.destaques__lista li { display: flex; align-items: center; gap: var(--e-3); }
.destaques__lista svg { width: 28px; height: 28px; color: var(--dourado-claro); flex: none; }
@media (min-width: 1024px) { .destaques__lista { grid-template-columns: repeat(4, 1fr); justify-items: center; } }

/* Seções */
.secao { padding-block: var(--secao); }
.secao--alternada { background: var(--cinza-50); }
.secao__intro { max-width: 680px; margin-bottom: var(--e-6); }
.ornamento { width: 120px; height: 12px; margin: 0 0 var(--e-5); background:
  linear-gradient(var(--dourado-escuro), var(--dourado-escuro)) left center / 48px 1px no-repeat,
  linear-gradient(var(--dourado-escuro), var(--dourado-escuro)) right center / 48px 1px no-repeat; position: relative; }
.ornamento::after { content: ""; position: absolute; left: 50%; top: 50%; width: 8px; height: 8px; background: var(--dourado); transform: translate(-50%, -50%) rotate(45deg); }

/* O espaço */
.espaco { display: grid; gap: var(--e-7); }
.espaco__texto { max-width: 680px; }
.cards { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e-4); }
.card { background: var(--branco); border: 1px solid var(--cinza-200); border-radius: var(--raio-m); padding: var(--e-5); transition: box-shadow var(--transicao); }
.card__icone { width: 36px; height: 36px; color: var(--dourado-escuro); margin-bottom: var(--e-3); }
.card p { margin: 0; }
@media (min-width: 640px) { .cards { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) {
  .espaco { grid-template-columns: 5fr 6fr; align-items: center; }
  .card:hover { box-shadow: 0 8px 24px rgba(5, 5, 3, 0.08); }
}

/* Galeria */
.galeria { list-style: none; margin: var(--e-6) 0 0; padding: 0 0 var(--e-2); display: grid; grid-auto-flow: column; grid-auto-columns: 85%; gap: var(--e-4); overflow-x: auto; scroll-snap-type: x mandatory; }
.galeria__item { scroll-snap-align: start; }
.galeria button { display: block; width: 100%; height: 100%; padding: 0; border: 0; border-radius: var(--raio-g); overflow: hidden; cursor: zoom-in; background: var(--cinza-200); }
.galeria img { width: 100%; height: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform 300ms ease; }
.galeria button:hover img { transform: scale(1.03); }
@media (min-width: 640px) {
  .galeria { grid-auto-flow: row; grid-template-columns: 1fr 1fr; overflow: visible; }
}
@media (min-width: 1024px) {
  .galeria { grid-template-columns: repeat(3, 1fr); grid-auto-rows: 280px; grid-auto-flow: dense; }
  .galeria img { aspect-ratio: auto; }
  .galeria__item--alto { grid-row: span 2; }
}

.lightbox { width: min(96vw, 1100px); max-height: 94vh; padding: 0; border: 0; background: transparent; overflow: visible; }
.lightbox::backdrop { background: rgba(5, 5, 3, 0.92); }
.lightbox img { max-width: 100%; max-height: 82vh; margin: 0 auto; border-radius: var(--raio-m); }
.lightbox__legenda { color: var(--branco); text-align: center; margin: var(--e-3) 0 0; font-size: 0.9375rem; }
.lightbox__fechar, .lightbox__nav { position: fixed; width: 48px; height: 48px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.4); background: rgba(5, 5, 3, 0.6); color: var(--branco); font-size: 1.5rem; cursor: pointer; display: grid; place-items: center; }
.lightbox__fechar { top: var(--e-4); right: var(--e-4); font-size: 1.125rem; }
.lightbox__nav { top: 50%; transform: translateY(-50%); }
.lightbox__nav--ant { left: var(--e-3); }
.lightbox__nav--prox { right: var(--e-3); }
.lightbox :focus-visible { outline-color: var(--dourado-claro); }

/* Eventos */
.eventos { text-align: center; }
.eventos .sobretitulo { text-align: center; }
.eventos__lista { list-style: none; margin: var(--e-5) 0 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: var(--e-3); }
.eventos__lista li { padding: var(--e-2) var(--e-5); border: 1px solid var(--dourado-escuro); border-radius: 999px; color: var(--preto); font-weight: 500; }

/* Consulta de disponibilidade (formulário que abre o WhatsApp) */
.painel { background: var(--branco); border: 1px solid var(--cinza-200); border-radius: var(--raio-g); padding: var(--e-5) var(--e-4); }
.consulta { display: grid; gap: var(--e-6); }
.consulta__texto { max-width: 560px; }
.consulta__aviso { padding: var(--e-3) var(--e-4); border-left: 3px solid var(--dourado); background: var(--branco); color: var(--preto); font-weight: 500; }
.consulta__direto { color: var(--cinza-600); }
.dica-envio { font-size: 0.875rem; color: var(--cinza-600); text-align: center; margin: var(--e-3) 0 0; }
@media (min-width: 640px) { .painel { padding: var(--e-6); } }
@media (min-width: 1024px) { .consulta { grid-template-columns: 5fr 6fr; gap: var(--e-8); align-items: start; } }

/* Como funciona */
.passos { list-style: none; margin: var(--e-6) 0 0; padding: 0; display: grid; gap: var(--e-5); }
.passos li { position: relative; padding-left: 64px; }
.passos__numero { position: absolute; left: 0; top: 0; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--dourado-escuro); display: grid; place-items: center; font-family: var(--fonte-titulo); font-weight: 600; color: var(--dourado-texto); }
.passos h3 { margin-bottom: var(--e-2); }
.passos p { margin: 0; }
@media (min-width: 640px) { .passos { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) {
  .passos { grid-template-columns: repeat(4, 1fr); }
  .passos li { padding-left: 0; padding-top: 64px; }
}

/* Faixa de CTA */
.faixa-cta { background: var(--fundo-escuro); color: var(--branco); padding-block: var(--e-8); border-top: 1px solid rgba(240, 211, 81, 0.25); border-bottom: 1px solid rgba(240, 211, 81, 0.25); }
.faixa-cta__interno { display: flex; flex-direction: column; align-items: center; gap: var(--e-5); text-align: center; }
.faixa-cta h2 { color: var(--branco); margin: 0; }

/* Dúvidas */
.duvidas { max-width: 800px; }
.duvidas details { border-bottom: 1px solid var(--cinza-200); }
.duvidas summary { display: flex; justify-content: space-between; align-items: center; gap: var(--e-4); padding: var(--e-5) 0; cursor: pointer; font-weight: 600; color: var(--preto); list-style: none; }
.duvidas summary::-webkit-details-marker { display: none; }
.duvidas summary::after { content: "+"; font-size: 1.5rem; font-weight: 400; color: var(--dourado-texto); flex: none; transition: transform var(--transicao); }
.duvidas details[open] summary::after { transform: rotate(45deg); }
.duvidas details p { padding-bottom: var(--e-5); margin: 0; }

/* Contato */
.contato { display: grid; gap: var(--e-6); }
.contato address { font-style: normal; }
.contato__acoes { display: flex; flex-direction: column; gap: var(--e-3); }
@media (min-width: 1024px) { .contato { grid-template-columns: 1fr 1fr; align-items: center; } .contato__acoes { max-width: 360px; justify-self: end; width: 100%; } }

/* Rodapé */
.rodape { background: var(--fundo-escuro); color: rgba(255, 255, 255, 0.8); padding-block: var(--e-7) calc(var(--e-7) + 64px); }
.rodape__interno { display: flex; flex-direction: column; align-items: center; gap: var(--e-5); text-align: center; }
.rodape__logo { width: 180px; height: auto; }
.rodape ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: var(--e-3) var(--e-5); }
.rodape a { color: var(--branco); text-decoration: none; font-size: 0.9375rem; }
.rodape a:hover { color: var(--dourado-claro); }
.rodape__copy { font-size: 0.875rem; margin: 0; }
@media (min-width: 640px) { .rodape { padding-bottom: var(--e-7); } }

/* WhatsApp flutuante (celular) */
.whats-flutuante { position: fixed; right: var(--e-4); bottom: var(--e-4); z-index: 40; width: 56px; height: 56px; border-radius: 50%; background: var(--whatsapp); color: var(--preto); display: grid; place-items: center; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3); }
.whats-flutuante svg { width: 28px; height: 28px; }
@media (min-width: 1024px) { .whats-flutuante { display: none; } }

/* Mapa (Google Maps incorporado) na seção Conheça o espaço */
.mapa { display: grid; gap: var(--e-5); margin-top: var(--e-7); align-items: center; }
.mapa__info h3 { margin-bottom: var(--e-2); }
.mapa__quadro { width: 100%; height: 320px; border: 1px solid var(--cinza-200); border-radius: var(--raio-g); background: var(--cinza-200); }
@media (min-width: 1024px) {
  .mapa { grid-template-columns: 1fr 2fr; gap: var(--e-7); }
  .mapa__quadro { height: 400px; }
}