/* ================================================================
   LARLO — LAYOUTS DOS SITES DE CASAMENTO
   Cada layout é uma skin sobre a MESMA estrutura do casamento.html.
   Nada de HTML paralelo: um site novo é CSS, não outro arquivo.

   Escopo: body[data-layout="nome"], setado pelo casamento.html a partir
   da coluna `weddings.layout`. Sem layout (ou layout inválido) cai em
   'padrao', que não tem regra nenhuma aqui e usa só o CSS base.

   Classes da estrutura, pra referência rápida:
     .hero > .hero-bg | .monograma-hero | .kicker | h1 | .subtitle | .countdown
     .page > .section-title > .eyebrow + h2
     .welcome
     .locais > .local-card > h3 | .endereco | .desc | .maps-iframe | .maps-btn
     .cronograma > .cron-item > .cron-horario | .cron-titulo | .cron-desc
     .galeria-grid > .foto
     .presentes > .presente-card > .img | .body > .nome | .valor | .btn-presentear
     .rsvp-form
     .faq-list > .faq-item > .faq-head > .faq-pergunta | .faq-resposta
     footer.site-foot > .foot-title | .foot-text | .foot-hash | .larlo-tag
     .divisor > .ornament

   O .hero é flex column, então dá pra reordenar os filhos com `order`
   sem tocar no HTML. É assim que a foto vira polaroid, banner ou arco.
   ================================================================ */


/* ================================================================
   0. PRIMITIVAS COMPARTILHADAS
   ================================================================ */

/* Fotos em preto e branco. A noiva liga/desliga (weddings.fotos_pb);
   quando ela não escolheu, vale o default do layout.
   Vale pra <img>, pra background-image e pro <iframe> do mapa. */
body[data-pb="true"] .galeria-grid .foto,
body[data-pb="true"] .swiper-slide,
body[data-pb="true"] .hero-bg,
body[data-pb="true"] .foto-separada,
body[data-pb="true"] .local-card .maps-iframe,
body[data-pb="true"] .presente-card .img,
body[data-pb="true"] .layout-art img {
  filter: grayscale(1);
}
body[data-pb="true"] .presente-card.unavailable .img { filter: grayscale(1) brightness(0.9); }

/* Blocos alternados. O casamento.html marca as seções visíveis com
   .bloco-a / .bloco-b depois de aplicar a ordem, porque nth-child não
   serve: seções escondidas continuam contando. */

/* Base "flat": tira card, borda e sombra. Quase todo layout novo quer
   isso, então fica aqui em vez de repetir onze vezes. */
body[data-layout]:not([data-layout="padrao"]) .local-card,
body[data-layout]:not([data-layout="padrao"]) .faq-item,
body[data-layout]:not([data-layout="padrao"]) .rsvp-form,
body[data-layout]:not([data-layout="padrao"]) .presente-info-box {
  background: transparent;
  border: none;
  box-shadow: none;
  border-radius: 0;
  padding-left: 0;
  padding-right: 0;
}
body[data-layout]:not([data-layout="padrao"]) .presente-card {
  border-radius: 0;
  box-shadow: none;
}
body[data-layout]:not([data-layout="padrao"]) .galeria-grid .foto,
body[data-layout]:not([data-layout="padrao"]) .presente-card .img,
body[data-layout]:not([data-layout="padrao"]) .local-card .maps-iframe,
body[data-layout]:not([data-layout="padrao"]) .rsvp-form input,
body[data-layout]:not([data-layout="padrao"]) .rsvp-form select,
body[data-layout]:not([data-layout="padrao"]) .rsvp-form textarea,
body[data-layout]:not([data-layout="padrao"]) .rsvp-form button[type="submit"],
body[data-layout]:not([data-layout="padrao"]) .presente-card .btn-presentear,
body[data-layout]:not([data-layout="padrao"]) .local-card .maps-btn {
  border-radius: 0;
}

/* Contagem regressiva: o CSS base deixa os números herdando `color`, o que
   em fundo claro os deixava quase invisíveis. Aqui volta a ter contraste,
   e cada layout ajusta a cor por cima se quiser. */
body[data-layout]:not([data-layout="padrao"]) .cd-num,
body[data-layout]:not([data-layout="padrao"]) .cd-hoje { opacity: 1; }
body[data-layout]:not([data-layout="padrao"]) .cd-label { opacity: 0.75; }
body[data-layout]:not([data-layout="padrao"]) .countdown { gap: 18px; }
body[data-layout]:not([data-layout="padrao"]) .cd-box { min-width: 64px; }

/* O nav do topo é fixo e sempre aparece. No layout padrão o hero é 100vh
   com tudo centralizado, então ele não atrapalha. Nos layouts novos o hero
   começa com texto colado no topo e o nav cobria o nome do casal. */
body[data-layout]:not([data-layout="padrao"]) .hero { padding-top: 96px; }
@media (max-width: 780px) {
  body[data-layout]:not([data-layout="padrao"]) .hero { padding-top: 84px; }
}
/* O renascentista é a exceção: hero de tela cheia com o texto embaixo,
   e a barra de 3 colunas ocupa o topo de propósito. */
body[data-layout="renascentista"] .hero { padding-top: 0; }

/* Elemento gráfico injetado pelo layout (polaroid, guirlanda, passarinho).
   Criado pelo casamento.html em aplicarLayout(). */
.layout-art { pointer-events: none; }
.layout-art img { display: block; width: 100%; height: auto; }


/* ================================================================
   1. EDITORIAL VINTAGE  (preview 01)
   Papel texturizado, foto em polaroid, carta escrita à mão.
   ================================================================ */
body[data-layout="editorial-vintage"] {
  --lay-papel: #f5f2ea;
  --lay-tinta: #14100c;
  --lay-sepia: #6b5642;
  --lay-corpo: #4a3f36;
  --lay-bege:  #ede6da;
  background: var(--lay-papel);
  color: var(--lay-corpo);
  font-family: 'Courier Prime', 'Courier New', monospace;
}
/* Papel de fundo no site inteiro. Antes ficava so nas secoes, e sobrava
   uma faixa clara nas laterais onde o papel nao alcancava. */
body[data-layout="editorial-vintage"],
body[data-layout="editorial-vintage"] .hero {
  background-image: url('/flores/01.png');
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
}
body[data-layout="editorial-vintage"] .page { background: transparent; padding: 90px 24px; }
body[data-layout="editorial-vintage"] .divisor { display: none; }

/* Hero: nome, polaroid, e data/cidade nas pontas */
body[data-layout="editorial-vintage"] .hero {
  min-height: auto;
  padding: 96px 24px 70px;
  gap: 0;
}
body[data-layout="editorial-vintage"] .hero h1,
body[data-layout="editorial-vintage"] .hero.has-image h1 {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic; font-weight: 300;
  font-size: clamp(3rem, 8vw, 5.5rem);
  line-height: 1.05; letter-spacing: 0;
  color: var(--lay-tinta);
  margin: 0;
}
body[data-layout="editorial-vintage"] .hero .kicker {
  font-family: 'Marcellus', serif;
  font-size: 11px; letter-spacing: 3.5px; color: var(--lay-sepia);
  opacity: 1; font-weight: 400;
}

/* Polaroid: as porcentagens vem do recorte do PNG da moldura. Mexer nelas
   desencaixa a foto do quadro desenhado. */
.lay-polaroid {
  position: relative;
  width: min(80%, 460px);
  aspect-ratio: 1 / 1;
  margin: 40px auto;
}
.lay-polaroid .lay-pol-foto {
  position: absolute;
  top: 6.2%; left: 6.5%;
  width: 87.3%; height: 86.6%;
  object-fit: cover; display: block;
}
.lay-polaroid .lay-pol-moldura {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  z-index: 2; pointer-events: none;
}

.lay-hero-rodape {
  display: flex; justify-content: space-between; align-items: center;
  width: min(80%, 460px); margin: 0 auto;
  font-family: 'Marcellus', serif;
  font-size: 13px; letter-spacing: 3.5px; text-transform: uppercase;
  color: var(--lay-tinta);
  gap: 16px;
}
.lay-hero-rodape .subtitle,
body[data-layout="editorial-vintage"] .hero .subtitle,
body[data-layout="editorial-vintage"] .hero.has-image .subtitle {
  font-family: 'Marcellus', serif;
  font-size: 13px; letter-spacing: 3.5px; text-transform: uppercase;
  color: var(--lay-tinta); opacity: 1; margin: 0; max-width: none;
}
body[data-layout="editorial-vintage"] .hero .countdown { margin-top: 34px; }

/* ---------- Welcome: envelope + carta lado a lado ---------- */
body[data-layout="editorial-vintage"] #welcomeSection {
  background-image: url('/flores/03-bg.jpg');
  background-size: cover; background-position: center;
  padding: 100px 40px;
  display: flex; align-items: center; justify-content: center;
}
/* O conjunto envelope + carta tem que ficar no meio do bloco. Antes o
   grid ocupava a largura toda e o par acabava encostado a esquerda. */
.lay-carta-wrap {
  max-width: 1000px; width: 100%;
  margin: 0 auto;
  display: grid; grid-template-columns: 1fr 1fr;
  align-items: center;
  justify-content: center;
}
/* Aspecto vem da arte do envelope; a foto encaixa na abertura dele */
.lay-envelope {
  position: relative; width: 100%;
  aspect-ratio: 471 / 544; max-width: 460px;
  justify-self: end; z-index: 2;
  transform: translateX(24px);
}
.lay-envelope .lay-env-foto {
  position: absolute;
  top: 11.76%; left: 16.99%;
  width: 76.22%; height: 45.04%;
  object-fit: cover; display: block;
}
.lay-envelope .lay-env-arte {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  z-index: 2; pointer-events: none;
}
.lay-papel {
  background: #ede6da;
  background-image:
    radial-gradient(circle at 20% 30%, rgba(180,150,100,0.05) 0%, transparent 40%),
    radial-gradient(circle at 80% 70%, rgba(180,150,100,0.06) 0%, transparent 40%);
  box-shadow: 0 20px 40px rgba(0,0,0,0.15), 0 4px 8px rgba(0,0,0,0.08);
  padding: 56px 44px; max-width: 360px; justify-self: start;
  aspect-ratio: 5 / 7;
  display: grid; grid-template-rows: auto 1fr auto;
  z-index: 1; transform: translateY(20px);
}
.lay-papel-data, .lay-papel-nomes {
  font-family: 'Marcellus', serif;
  font-size: 11px; letter-spacing: 3.5px; text-transform: uppercase;
  color: #6b5642; text-align: center;
}
.lay-papel-nomes { line-height: 1.6; white-space: pre-line; }
body[data-layout="editorial-vintage"] .hero.has-image .cd-num,
body[data-layout="editorial-vintage"] .hero.has-image .cd-hoje { color: var(--lay-tinta); }
body[data-layout="editorial-vintage"] .hero.has-image .cd-label,
body[data-layout="editorial-vintage"] .hero.has-image .cd-hoje small { color: var(--lay-sepia); }
body[data-layout="editorial-vintage"] .cd-num,
body[data-layout="editorial-vintage"] .cd-hoje {
  font-family: 'Cormorant Garamond', serif; font-style: italic; color: var(--lay-tinta);
}
body[data-layout="editorial-vintage"] .cd-label {
  font-family: 'Marcellus', serif; letter-spacing: 2.5px; color: var(--lay-sepia); opacity: 1;
}

/* Títulos de seção */
body[data-layout="editorial-vintage"] .section-title h2 {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic; font-weight: 300;
  font-size: clamp(2.4rem, 6vw, 3.6rem);
  color: var(--title-color, var(--lay-tinta));
}
body[data-layout="editorial-vintage"] .section-title .eyebrow {
  font-family: 'Marcellus', serif;
  font-size: 11px; letter-spacing: 3.5px; color: var(--lay-sepia); opacity: 1; font-weight: 400;
}

/* Welcome: papel bege com letra de carta */
body[data-layout="editorial-vintage"] .welcome {
  font-family: 'Homemade Apple', 'Cormorant Garamond', cursive;
  font-style: normal;
  font-size: clamp(1.1rem, 2vw, 1.5rem);
  line-height: 1.5;
  color: #2b2016;
  text-align: center;
  align-self: center;
  max-width: none; margin: 0; padding: 0;
  background: none; box-shadow: none;
}

body[data-layout="editorial-vintage"] .locais { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 40px; }
body[data-layout="editorial-vintage"] .local-card { text-align: left; padding: 0; gap: 14px; }
body[data-layout="editorial-vintage"] .local-card h3 {
  font-family: 'Cormorant Garamond', serif; font-style: italic; font-weight: 400;
  font-size: 2rem; color: var(--lay-tinta);
}
body[data-layout="editorial-vintage"] .local-card .endereco,
body[data-layout="editorial-vintage"] .local-card .desc {
  font-family: 'Courier Prime', monospace; letter-spacing: 0.5px; opacity: 1;
}
body[data-layout="editorial-vintage"] .local-card .endereco { color: var(--lay-sepia); font-size: 12px; letter-spacing: 1px; }
body[data-layout="editorial-vintage"] .local-card .desc { color: var(--lay-corpo); font-size: 13px; }
body[data-layout="editorial-vintage"] .local-card .maps-iframe { height: 300px; }
body[data-layout="editorial-vintage"] .local-card .maps-btn {
  align-self: flex-start; border: none; border-bottom: 1px solid var(--lay-tinta);
  color: var(--lay-tinta); font-family: 'Courier Prime', monospace;
  font-size: 11px; letter-spacing: 2px; padding: 0 0 3px;
}
body[data-layout="editorial-vintage"] .local-card .maps-btn:hover { background: transparent; opacity: 0.6; }

body[data-layout="editorial-vintage"] .cron-item { grid-template-columns: 1fr; gap: 6px; border-bottom: none; padding: 18px 0; }
body[data-layout="editorial-vintage"] .cron-horario {
  font-family: 'Courier Prime', monospace; font-size: 13px; letter-spacing: 2px;
  text-transform: uppercase; text-align: left; color: var(--lay-tinta); font-weight: 700;
}
body[data-layout="editorial-vintage"] .cron-titulo {
  font-family: 'Courier Prime', monospace; font-size: 14px; letter-spacing: 1px;
  font-weight: 700; color: var(--lay-tinta);
}
body[data-layout="editorial-vintage"] .cron-desc { font-family: 'Courier Prime', monospace; font-size: 13px; opacity: 1; color: var(--lay-corpo); }

body[data-layout="editorial-vintage"] .presente-card { background: #fff; border: 1px solid rgba(20,16,12,0.1); box-shadow: 0 8px 18px rgba(0,0,0,0.06); }
body[data-layout="editorial-vintage"] .presente-card .nome { font-family: 'Cormorant Garamond', serif; font-style: italic; }
body[data-layout="editorial-vintage"] .presente-card .valor,
body[data-layout="editorial-vintage"] .presente-card .btn-presentear { font-family: 'Courier Prime', monospace; letter-spacing: 1.5px; }
body[data-layout="editorial-vintage"] .presente-card .btn-presentear { background: var(--lay-tinta); }
/* Caixa do PIX sempre branca: em fundo de papel o texto sumia */
body[data-layout="editorial-vintage"] .presente-info-box { background: #fff; padding: 28px 24px; border: 1px solid rgba(20,16,12,0.1); max-width: 480px; margin: 0 auto 40px; }
body[data-layout="editorial-vintage"] .presente-info-box h3 { font-family: 'Cormorant Garamond', serif; font-style: italic; }

body[data-layout="editorial-vintage"] .rsvp-form { background: #fff; padding: 40px 34px; border: 1px solid rgba(20,16,12,0.1); }
body[data-layout="editorial-vintage"] .rsvp-form label { font-family: 'Courier Prime', monospace; letter-spacing: 2px; color: var(--lay-sepia); }
body[data-layout="editorial-vintage"] .rsvp-form input,
body[data-layout="editorial-vintage"] .rsvp-form select,
body[data-layout="editorial-vintage"] .rsvp-form textarea { font-family: 'Courier Prime', monospace; border-color: rgba(20,16,12,0.18); }
body[data-layout="editorial-vintage"] .rsvp-form button[type="submit"] { background: var(--lay-tinta); font-family: 'Courier Prime', monospace; letter-spacing: 2.5px; }

body[data-layout="editorial-vintage"] .faq-item { border-bottom: 1px solid rgba(20,16,12,0.12); padding: 22px 0; margin: 0; }
body[data-layout="editorial-vintage"] .faq-pergunta { font-family: 'Cormorant Garamond', serif; font-style: italic; font-weight: 400; font-size: 1.35rem; color: var(--lay-tinta); }
body[data-layout="editorial-vintage"] .faq-resposta { font-family: 'Courier Prime', monospace; font-size: 13px; opacity: 1; color: var(--lay-corpo); border-top: none; }

body[data-layout="editorial-vintage"] .site-foot { background: var(--lay-tinta); color: var(--lay-papel); background-image: none; }
body[data-layout="editorial-vintage"] .foot-title { font-family: 'Cormorant Garamond', serif; font-style: italic; }


/* ================================================================
   2. MODERNO  (preview 02)
   Nome gigante em sans-serif, blocos de cor, muito respiro.
   ================================================================ */
body[data-layout="moderno"] {
  --lay-cor: var(--primary, #c73118);
  background: #fff;
  color: #1a1a1a;
  font-family: 'Inter', system-ui, sans-serif;
}
body[data-layout="moderno"] .page { padding: 90px 24px; }

body[data-layout="moderno"] .hero { min-height: auto; padding: 80px 24px 0; gap: 0; }
body[data-layout="moderno"] .hero h1 {
  font-family: 'Inter', system-ui, sans-serif;
  font-weight: 800;
  font-size: clamp(2.6rem, 11vw, 7rem);
  line-height: 0.94; letter-spacing: -0.03em;
  text-transform: uppercase;
  color: #1a1a1a;
  margin: 0 0 40px;
}
body[data-layout="moderno"] .hero.has-image h1 { color: #1a1a1a; }
body[data-layout="moderno"] .hero .kicker { font-weight: 700; letter-spacing: 3px; color: var(--lay-cor); opacity: 1;
}
/* A foto sangra de ponta a ponta, com o nome ACIMA dela. O .hero-bg do
   sistema e um fundo absoluto e nao serve pra isso: o compositor cria
   .lay-faixa no fluxo e esconde o original. */
/* Sangra de ponta a ponta. O hero tem padding lateral, entao a faixa usa
   margem negativa igual ao padding pra encostar nas bordas sem depender
   de 100vw (que ignora a barra de rolagem e desalinha o resto). */
.lay-faixa {
  width: auto;
  margin-left: calc(-1 * max(24px, (100% - 1100px) / 2));
  margin-right: calc(-1 * max(24px, (100% - 1100px) / 2));
  align-self: stretch;
  aspect-ratio: 16 / 7;
  background-size: cover; background-position: center;
}
body[data-layout="moderno"] .hero .subtitle { font-weight: 600; letter-spacing: 2px; text-transform: uppercase;
  font-size: 14px; color: #1a1a1a; opacity: 1; margin: 40px auto 0;
}
body[data-layout="moderno"] .hero.has-image .subtitle { color: #1a1a1a; }
body[data-layout="moderno"] .hero .countdown { margin: 30px 0 60px; }
body[data-layout="moderno"] .cd-num { font-family: 'Inter', sans-serif; font-weight: 800; color: var(--lay-cor); }
body[data-layout="moderno"] .cd-label { font-weight: 700; letter-spacing: 2px; }

body[data-layout="moderno"] .section-title { text-align: left; max-width: 1100px; margin: 0 auto 44px; }
body[data-layout="moderno"] .section-title h2 {
  font-family: 'Inter', sans-serif; font-weight: 800;
  font-size: clamp(1.9rem, 5.5vw, 3.4rem);
  line-height: 1.02; letter-spacing: -0.02em; text-transform: uppercase;
  color: var(--title-color, #1a1a1a);
}
body[data-layout="moderno"] .section-title .eyebrow { font-weight: 700; letter-spacing: 3px; color: var(--lay-cor); opacity: 1; }

body[data-layout="moderno"] .welcome { font-family: 'Inter', sans-serif; font-style: normal; font-size: clamp(1rem, 2vw, 1.15rem); line-height: 1.75; text-align: left; color: #6b6b6b; }

body[data-layout="moderno"] .local-card { text-align: left; padding: 0; }
body[data-layout="moderno"] .local-card h3 { font-family: 'Inter', sans-serif; font-weight: 800; text-transform: uppercase; font-size: 1.15rem; letter-spacing: -0.01em; }
body[data-layout="moderno"] .local-card .maps-btn { align-self: flex-start; background: var(--lay-cor); color: #fff; border: none; font-weight: 700; padding: 12px 22px; }

body[data-layout="moderno"] .cron-item { grid-template-columns: 90px 1fr; gap: 20px; border-bottom: 1px solid #e5e5e5; }
body[data-layout="moderno"] .cron-horario { font-family: 'Inter', sans-serif; font-weight: 800; font-size: 1rem; text-align: left; color: var(--lay-cor); }
body[data-layout="moderno"] .cron-titulo { font-weight: 700; font-size: 15px; }

body[data-layout="moderno"] .presente-card { border: 1px solid #e5e5e5; }
body[data-layout="moderno"] .presente-card .nome { font-family: 'Inter', sans-serif; font-weight: 700; font-size: 1rem; }
body[data-layout="moderno"] .presente-card .btn-presentear { background: var(--lay-cor); font-weight: 700; letter-spacing: 2px; padding: 13px; }
body[data-layout="moderno"] .presente-info-box { max-width: 560px; margin: 0 auto 40px; background: #efefef; padding: 26px; }

body[data-layout="moderno"] .rsvp-form { background: transparent; padding: 0; }
body[data-layout="moderno"] .rsvp-form input,
body[data-layout="moderno"] .rsvp-form select,
body[data-layout="moderno"] .rsvp-form textarea { background: #efefef; border: none; padding: 15px 16px; }
body[data-layout="moderno"] .rsvp-form button[type="submit"] { background: var(--lay-cor); font-weight: 700; letter-spacing: 2.5px; padding: 17px; }

body[data-layout="moderno"] .faq-item { border-bottom: 1px solid #e5e5e5; padding: 22px 0; margin: 0; }
body[data-layout="moderno"] .faq-pergunta { font-family: 'Inter', sans-serif; font-weight: 700; font-size: 1.05rem; }

body[data-layout="moderno"] .site-foot { background: var(--lay-cor); color: #fff; }
body[data-layout="moderno"] .foot-title { font-family: 'Inter', sans-serif; font-weight: 800; text-transform: uppercase; letter-spacing: -0.01em; }
body[data-layout="moderno"] .site-foot .larlo-tag { opacity: 0.7; }


/* ================================================================
   3. AQUARELA  (preview 03)
   Pincelada de aquarela de verdade, tingida com a cor do casal.
   A cor entra por mask-image: a textura do pincel vira alfa e o
   fundo pinta. Trocar --primary troca a cor da pincelada.
   ================================================================ */
body[data-layout="aquarela-arte"] {
  --lay-cor: var(--primary, #7a8a5f);
  background: #fff;
  color: #2b2b2b;
  font-family: 'Inter', system-ui, sans-serif;
}
body[data-layout="aquarela-arte"] .page { padding: 90px 24px; }

body[data-layout="aquarela-arte"] .hero { min-height: auto; padding: 0 0 70px; gap: 0; background: #fff; }
/* Pincelada de aquarela de verdade: a textura do pincel vira mascara e a
   cor do casal pinta por baixo. Trocar --primary troca a cor da tinta.
   Ela e FUNDO: fica atras do nome, centralizada, com opacidade de aguada.
   O aspect-ratio e o do proprio desenho; mexer nele deforma a pincelada. */
body[data-layout="aquarela-arte"] .hero .lay-pincelada {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: min(90%, 1100px);
  aspect-ratio: 1082 / 719;
  background-color: var(--lay-cor);
  opacity: 0.45;
  z-index: 0;
  -webkit-mask-image: url('/flores/04-pincel-1-mask.png');
  mask-image: url('/flores/04-pincel-1-mask.png');
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  pointer-events: none;
}
/* (0,3,1) pra ganhar da regra base do hero. O texto e um bloco unico
   centralizado; antes cada linha se alinhava por conta e o conjunto
   ficava torto em relacao a pincelada. */
body[data-layout="aquarela-arte"] .hero .lay-aquarela-texto {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 780px;
  margin: 0 auto;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}
body[data-layout="aquarela-arte"] .hero .lay-aquarela-texto > * { margin: 0; }
body[data-layout="aquarela-arte"] .hero .countdown { justify-content: center; width: 100%; }
body[data-layout="aquarela-arte"] .hero {
  min-height: 90vh;
  justify-content: center;
  padding: 80px 30px;
  position: relative;
  overflow: hidden;
}
body[data-layout="aquarela-arte"] .hero .monograma-hero { margin-bottom: 18px; }
body[data-layout="aquarela-arte"] .hero .kicker { letter-spacing: 3px; color: #6a6a6a; opacity: 1; }
body[data-layout="aquarela-arte"] .hero h1 {
  
  font-family: 'Cormorant Garamond', serif; font-weight: 400;
  font-size: clamp(2.4rem, 7vw, 4.4rem);
  letter-spacing: 0.06em; text-transform: uppercase;
  color: #2b2b2b; margin: 20px 0 14px;
}
body[data-layout="aquarela-arte"] .hero.has-image h1 { color: #2b2b2b; }
body[data-layout="aquarela-arte"] .hero .subtitle {
  font-size: 13px; letter-spacing: 3px; text-transform: uppercase;
  color: #6a6a6a; opacity: 1; margin: 0;
}
body[data-layout="aquarela-arte"] .hero.has-image .subtitle { color: #6a6a6a; }

body[data-layout="aquarela-arte"] .cd-num { font-family: 'Cormorant Garamond', serif; color: var(--lay-cor); }

/* Blocos alternados: um claro, um na cor do casal */
body[data-layout="aquarela-arte"] .page.bloco-b { background: color-mix(in srgb, var(--lay-cor) 16%, #fff); }

body[data-layout="aquarela-arte"] .section-title h2 {
  font-family: 'Cormorant Garamond', serif; font-weight: 400;
  font-size: clamp(1.6rem, 4vw, 2.2rem);
  letter-spacing: 0.34em; text-transform: uppercase;
  color: var(--title-color, #2b2b2b);
}
body[data-layout="aquarela-arte"] .section-title .eyebrow { letter-spacing: 3px; color: var(--lay-cor); opacity: 1; }

body[data-layout="aquarela-arte"] .welcome { font-family: 'Cormorant Garamond', serif; font-style: normal; font-size: clamp(1.15rem, 2.3vw, 1.45rem); line-height: 1.9; }

body[data-layout="aquarela-arte"] .local-card { padding: 0; }
body[data-layout="aquarela-arte"] .local-card h3 { font-family: 'Cormorant Garamond', serif; font-size: 1.5rem; }
body[data-layout="aquarela-arte"] .local-card .maps-btn { border-color: var(--lay-cor); color: var(--lay-cor); }
body[data-layout="aquarela-arte"] .local-card .maps-btn:hover { background: var(--lay-cor); color: #fff; }

body[data-layout="aquarela-arte"] .cron-item { grid-template-columns: 80px 1fr; gap: 24px; border-bottom: 1px solid #e5e5e5; }
body[data-layout="aquarela-arte"] .cron-horario { font-family: 'Cormorant Garamond', serif; font-size: 1.35rem; text-align: left; color: var(--lay-cor); }

body[data-layout="aquarela-arte"] .presente-card { border: 1px solid #e5e5e5; }
body[data-layout="aquarela-arte"] .presente-card .btn-presentear { background: var(--lay-cor); }
body[data-layout="aquarela-arte"] .presente-info-box { background: #fff; border: 1px solid #e5e5e5; padding: 26px; max-width: 480px; margin: 0 auto 40px; }

body[data-layout="aquarela-arte"] .rsvp-form input,
body[data-layout="aquarela-arte"] .rsvp-form select,
body[data-layout="aquarela-arte"] .rsvp-form textarea { background: #fff; border: 1px solid #e5e5e5; }
body[data-layout="aquarela-arte"] .rsvp-form button[type="submit"] { background: var(--lay-cor); letter-spacing: 2.5px; }

body[data-layout="aquarela-arte"] .faq-item { border-bottom: 1px solid #e5e5e5; padding: 20px 0; margin: 0; }
body[data-layout="aquarela-arte"] .faq-pergunta { font-family: 'Cormorant Garamond', serif; font-size: 1.3rem; }

body[data-layout="aquarela-arte"] .site-foot { background: var(--lay-cor); color: #fff; }
body[data-layout="aquarela-arte"] .foot-title { font-family: 'Cormorant Garamond', serif; letter-spacing: 2px; text-transform: uppercase; }


/* ================================================================
   4. SERENO  (preview 04)
   Blocos de cor alternados em tons suaves, leitura calma.
   ================================================================ */
body[data-layout="sereno"] {
  --lay-accent: var(--primary, #2b3a2a);
  /* Tres tons: o hero no verde acinzentado, os blocos alternando bege e
     creme. Era o verde do hero que dava identidade e tinha sumido. */
  --lay-tom1: color-mix(in srgb, var(--primary, #2b3a2a) 22%, #eef0ea);
  --lay-tom2: var(--bg, #e8dfc9);
  --lay-tom3: color-mix(in srgb, var(--bg, #e8dfc9) 38%, #fff);
  background: var(--lay-tom2);
  color: var(--body-color, #6b6f5c);
  font-family: 'Inter', system-ui, sans-serif;
}
body[data-layout="sereno"] .page { padding: 90px 24px; }
body[data-layout="sereno"] .page.bloco-a { background: var(--lay-tom2); }
body[data-layout="sereno"] .page.bloco-b { background: var(--lay-tom3); }

body[data-layout="sereno"] .hero { min-height: auto; padding: 80px 24px 70px; background: var(--lay-tom1); gap: 0; }
body[data-layout="sereno"] .hero h1 {
  font-family: 'Cormorant Garamond', serif; font-weight: 400;
  font-size: clamp(2.6rem, 8vw, 5rem);
  letter-spacing: 0.05em; text-transform: uppercase; line-height: 1.1;
  color: var(--lay-accent); margin: 0 0 34px;
}
body[data-layout="sereno"] .hero.has-image h1 { color: var(--lay-accent); }
body[data-layout="sereno"] .hero .kicker { letter-spacing: 3.5px; color: var(--lay-accent); opacity: 0.75; }
body[data-layout="sereno"] .hero.has-image .hero-bg,
body[data-layout="sereno"] .hero .hero-bg {
  position: relative; inset: auto; width: min(88vw, 720px); aspect-ratio: 16 / 9; margin: 0 auto;
}
body[data-layout="sereno"] .hero.has-image .hero-bg::after { content: none !important; }
body[data-layout="sereno"] .hero .subtitle {
  font-size: 13px; letter-spacing: 3.5px; text-transform: uppercase;
  color: var(--lay-accent); opacity: 1; margin: 34px auto 0;
}
body[data-layout="sereno"] .hero.has-image .subtitle { color: var(--lay-accent); }
body[data-layout="sereno"] .hero .countdown { }
body[data-layout="sereno"] .cd-num, body[data-layout="sereno"] .cd-hoje { font-family: 'Cormorant Garamond', serif; color: var(--lay-accent); }
body[data-layout="sereno"] .cd-label { letter-spacing: 2.5px; color: var(--lay-accent); opacity: 0.7; }
body[data-layout="sereno"] .hero.has-image .cd-num,
body[data-layout="sereno"] .hero.has-image .cd-hoje { color: var(--lay-accent); }
body[data-layout="sereno"] .hero.has-image .cd-label,
body[data-layout="sereno"] .hero.has-image .cd-hoje small { color: var(--lay-accent); opacity: 0.7; }

body[data-layout="sereno"] .section-title { text-align: center; max-width: 1000px; margin: 0 auto 44px; }
body[data-layout="sereno"] .section-title h2 {
  font-family: 'Cormorant Garamond', serif; font-weight: 400;
  font-size: clamp(2rem, 5vw, 3rem);
  letter-spacing: 0.05em; text-transform: uppercase; line-height: 1.15;
  color: var(--title-color, var(--lay-accent));
}
body[data-layout="sereno"] .section-title .eyebrow { letter-spacing: 3px; color: var(--lay-accent); opacity: 0.65; }

body[data-layout="sereno"] .welcome { text-align: center; font-style: normal; font-family: 'Inter', sans-serif; font-size: clamp(1rem, 2vw, 1.1rem); line-height: 1.8; max-width: 640px; margin: 0 auto; }

body[data-layout="sereno"] .locais { gap: 40px; }
body[data-layout="sereno"] .local-card { text-align: center; padding: 0; }
body[data-layout="sereno"] .local-card h3 { font-family: 'Cormorant Garamond', serif; font-size: 1.7rem; color: var(--lay-accent); }
body[data-layout="sereno"] .local-card .maps-btn { align-self: center; border-color: var(--lay-accent); color: var(--lay-accent); }
body[data-layout="sereno"] .local-card .maps-btn:hover { background: var(--lay-accent); color: #fff; }

body[data-layout="sereno"] .cronograma { max-width: 720px; margin: 0 auto; }
body[data-layout="sereno"] .cron-item { grid-template-columns: 90px 1fr; gap: 26px; border-bottom: 1px solid rgba(43,58,42,0.15); }
body[data-layout="sereno"] .cron-horario { font-family: 'Cormorant Garamond', serif; font-size: 1.3rem; text-align: left; color: var(--lay-accent); }
body[data-layout="sereno"] .cron-titulo { font-family: 'Cormorant Garamond', serif; font-size: 1.25rem; font-weight: 400; color: var(--lay-accent); }

body[data-layout="sereno"] .presente-card { background: #fff; }
body[data-layout="sereno"] .presente-card .nome { font-family: 'Cormorant Garamond', serif; }
body[data-layout="sereno"] .presente-card .btn-presentear { background: var(--lay-accent); letter-spacing: 2px; }
body[data-layout="sereno"] .presente-info-box { background: #fff; padding: 26px; max-width: 460px; margin: 0 auto 40px; }

body[data-layout="sereno"] .rsvp-form { max-width: 560px; margin: 0 auto; }
body[data-layout="sereno"] .rsvp-form label { letter-spacing: 2.5px; color: var(--lay-accent); opacity: 0.75; }
body[data-layout="sereno"] .rsvp-form input,
body[data-layout="sereno"] .rsvp-form select,
body[data-layout="sereno"] .rsvp-form textarea { background: transparent; border: none; border-bottom: 1px solid rgba(43,58,42,0.3); padding: 10px 0; }
body[data-layout="sereno"] .rsvp-form button[type="submit"] { background: var(--lay-accent); letter-spacing: 2.5px; }

body[data-layout="sereno"] .faq-list { max-width: 760px; margin: 0 auto; }
body[data-layout="sereno"] .faq-item { border-bottom: 1px solid rgba(43,58,42,0.15); padding: 22px 0; margin: 0; }
body[data-layout="sereno"] .faq-pergunta { font-family: 'Cormorant Garamond', serif; font-weight: 400; font-size: 1.3rem; color: var(--lay-accent); }

body[data-layout="sereno"] .site-foot { background: var(--lay-tom1); color: var(--lay-accent); }
body[data-layout="sereno"] .foot-title { font-family: 'Cormorant Garamond', serif; text-transform: uppercase; letter-spacing: 3px; }


/* ================================================================
   5. GUIRLANDA  (preview 05)
   Guirlanda de flores em aquarela abraçando o nome do casal.
   O vazio do "C" da arte fica em 62% X / 55% Y — daí os números
   do posicionamento do nome. Mexer neles desalinha o nome.
   ================================================================ */
body[data-layout="guirlanda"] {
  --lay-verde: var(--primary, #a3b58a);
  --lay-escuro: color-mix(in srgb, var(--primary, #a3b58a) 70%, #1a2110);
  --lay-suave: color-mix(in srgb, var(--primary, #a3b58a) 30%, #fff);
  background: #fff;
  color: #2b2b2b;
  font-family: 'Inter', system-ui, sans-serif;
}
body[data-layout="guirlanda"] .page { padding: 84px 24px; }
body[data-layout="guirlanda"] .page.bloco-b { background: var(--lay-suave); }

body[data-layout="guirlanda"] .hero {
  min-height: auto;
  padding: 30px 20px 40px;
  background: #fff;
  overflow: hidden;
}
body[data-layout="guirlanda"] .hero .hero-bg { display: none; }
body[data-layout="guirlanda"] .hero .monograma-hero { display: none; }
/* A guirlanda é o herói: entra como arte no fluxo, com o nome no vazio */
body[data-layout="guirlanda"] .hero .lay-guirlanda {
  position: relative;
  z-index: 0;
  width: min(680px, 100%);
  margin: 0 auto;
}
.lay-guirlanda > img { display: block; width: 100%; height: auto; }
body[data-layout="guirlanda"] .hero .kicker,
body[data-layout="guirlanda"] .hero h1 {
  position: absolute;
  left: 62%; top: 57%;
  transform: translate(-50%, -50%);
  width: 44%;
  margin: 0; z-index: 2;
}
body[data-layout="guirlanda"] .hero .kicker { top: 40%; font-size: 10px; letter-spacing: 2.5px; color: var(--lay-escuro); opacity: 0.8; }
body[data-layout="guirlanda"] .hero h1 {
  font-family: 'Cormorant Garamond', serif; font-weight: 400;
  font-size: clamp(1rem, 2.6vw, 1.9rem);
  letter-spacing: 0.12em; text-transform: uppercase; line-height: 1.45;
  color: var(--lay-escuro);
}
body[data-layout="guirlanda"] .hero.has-image h1 { color: var(--lay-escuro); }
/* Data e local não cabem dentro da guirlanda: descem pro bloco seguinte */
body[data-layout="guirlanda"] .hero .subtitle,
body[data-layout="guirlanda"] .hero .countdown { display: none; }
body[data-layout="guirlanda"] #welcomeSection .subtitle-guirlanda {
  font-family: 'Cormorant Garamond', serif;
  font-size: 14px; letter-spacing: 3px; text-transform: uppercase;
  color: #6a6a6a; text-align: center; margin-bottom: 26px;
}

body[data-layout="guirlanda"] .section-title h2 {
  font-family: 'Cormorant Garamond', serif; font-weight: 400;
  font-size: clamp(1.4rem, 3.4vw, 1.9rem);
  letter-spacing: 0.4em; text-transform: uppercase;
  color: var(--title-color, var(--lay-escuro));
}
body[data-layout="guirlanda"] .section-title .eyebrow { letter-spacing: 3px; color: var(--lay-escuro); opacity: 0.6; }

body[data-layout="guirlanda"] .welcome { font-family: 'Cormorant Garamond', serif; font-style: normal; font-size: clamp(1.1rem, 2.2vw, 1.35rem); line-height: 1.9; }

body[data-layout="guirlanda"] .local-card { padding: 0; }
body[data-layout="guirlanda"] .local-card h3 { font-family: 'Cormorant Garamond', serif; font-size: 1.5rem; color: var(--lay-escuro); }
body[data-layout="guirlanda"] .local-card .maps-btn { border-color: var(--lay-escuro); color: var(--lay-escuro); }
body[data-layout="guirlanda"] .local-card .maps-btn:hover { background: var(--lay-escuro); color: #fff; }

body[data-layout="guirlanda"] .cron-item { grid-template-columns: 90px 1fr; gap: 24px; border-bottom: 1px solid #e5e5e5; }
body[data-layout="guirlanda"] .cron-horario { font-family: 'Cormorant Garamond', serif; font-size: 1.3rem; text-align: left; color: var(--lay-escuro); }
body[data-layout="guirlanda"] .cron-titulo { font-family: 'Cormorant Garamond', serif; font-size: 1.2rem; font-weight: 400; }

body[data-layout="guirlanda"] .presente-card { border: 1px solid #e5e5e5; }
body[data-layout="guirlanda"] .presente-card .nome { font-family: 'Cormorant Garamond', serif; }
body[data-layout="guirlanda"] .presente-card .btn-presentear { background: var(--lay-escuro); }
body[data-layout="guirlanda"] .presente-info-box { background: #fff; border: 1px solid #e5e5e5; padding: 26px; max-width: 460px; margin: 0 auto 40px; }

body[data-layout="guirlanda"] .rsvp-form input,
body[data-layout="guirlanda"] .rsvp-form select,
body[data-layout="guirlanda"] .rsvp-form textarea { background: #fff; border: 1px solid #e5e5e5; }
body[data-layout="guirlanda"] .rsvp-form button[type="submit"] { background: var(--lay-escuro); letter-spacing: 2.5px; }

body[data-layout="guirlanda"] .faq-item { border-bottom: 1px solid #e5e5e5; padding: 20px 0; margin: 0; }
body[data-layout="guirlanda"] .faq-pergunta { font-family: 'Cormorant Garamond', serif; font-size: 1.3rem; color: var(--lay-escuro); }

body[data-layout="guirlanda"] .site-foot { background: var(--lay-escuro); color: #fff; }
body[data-layout="guirlanda"] .foot-title { font-family: 'Cormorant Garamond', serif; text-transform: uppercase; letter-spacing: 2px; }


/* ================================================================
   6. RENASCENTISTA  (preview 06)
   Pintura floral escura ocupando a tela, letras capitulares.
   ================================================================ */
body[data-layout="renascentista"] {
  --lay-preto: var(--bg, #0e0e0c);
  --lay-verde: color-mix(in srgb, var(--bg, #0e0e0c) 78%, #2d5a35);
  --lay-creme: var(--banner-text, #f4efe5);
  --lay-suave: color-mix(in srgb, var(--banner-text, #f4efe5) 78%, #6b6455);
  --lay-dourado: var(--primary, #b8946a);
  background: var(--lay-preto);
  color: var(--lay-suave);
  font-family: 'Cormorant Garamond', serif;
}
body[data-layout="renascentista"] .page { padding: 90px 24px; }
body[data-layout="renascentista"] .page.bloco-a { background: var(--lay-preto); }
body[data-layout="renascentista"] .page.bloco-b { background: var(--lay-verde); }

body[data-layout="renascentista"] .hero { min-height: 100vh; padding: 0; justify-content: flex-end; text-align: left; }
body[data-layout="renascentista"] .hero.has-image .hero-bg::after {
  background: linear-gradient(180deg, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.15) 34%, rgba(0,0,0,0.78) 100%) !important;
}
/* Barra do topo: Save the date · Cerimônia · Nos vemos em */
body[data-layout="renascentista"] .hero .hero-topbar {
  position: absolute; top: 0; left: 0; right: 0; z-index: 2;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px;
  /* 62px em cima: o nav fixo do site mora aí e estava cortando os rótulos */
  padding: 78px 60px 34px; text-align: center;
  border-bottom: 1px solid rgba(244,239,229,0.15);
}
body[data-layout="renascentista"] .hero .hero-topbar .lbl { font-style: italic; font-size: 14px; color: var(--lay-suave); margin-bottom: 4px; }
body[data-layout="renascentista"] .hero .hero-topbar .val { font-weight: 500; font-size: 20px; color: var(--lay-creme); }
body[data-layout="renascentista"] .hero .kicker {
  align-self: flex-start; padding: 0 60px; font-family: 'Cormorant Garamond', serif;
  font-style: italic; text-transform: none; letter-spacing: 1px; font-size: 15px;
  color: var(--lay-suave); opacity: 1; font-weight: 400; margin-bottom: 10px;
}
body[data-layout="renascentista"] .hero h1,
body[data-layout="renascentista"] .hero.has-image h1 {
  align-self: flex-start; padding: 0 60px;
  font-family: 'Cinzel', serif; font-weight: 400;
  font-size: clamp(2.2rem, 7vw, 5rem); line-height: 1.05; letter-spacing: 0.02em;
  color: var(--lay-creme); margin: 0 0 18px;
}
body[data-layout="renascentista"] .hero .subtitle,
body[data-layout="renascentista"] .hero.has-image .subtitle {
  align-self: flex-start; padding: 0 60px; text-align: left;
  font-style: italic; font-size: clamp(1rem, 2vw, 1.25rem);
  color: var(--lay-creme); opacity: 0.92; margin: 0 0 24px; max-width: 640px;
}
body[data-layout="renascentista"] .hero .countdown { align-self: flex-start; padding: 0 60px; margin-bottom: 60px; justify-content: flex-start; }
body[data-layout="renascentista"] .cd-num, body[data-layout="renascentista"] .cd-hoje { font-family: 'Cinzel', serif; color: var(--lay-dourado); }
body[data-layout="renascentista"] .cd-label { color: var(--lay-creme); opacity: 0.8; letter-spacing: 2.5px; }

body[data-layout="renascentista"] .section-title h2 {
  font-family: 'Cinzel', serif; font-weight: 400;
  font-size: clamp(1.8rem, 4.5vw, 2.8rem); letter-spacing: 0.06em;
  color: var(--title-color, var(--lay-creme));
}
body[data-layout="renascentista"] .section-title .eyebrow { font-style: italic; text-transform: none; letter-spacing: 1px; font-size: 14px; font-weight: 400; color: var(--lay-suave); opacity: 1; }

body[data-layout="renascentista"] .welcome { font-style: italic; font-size: clamp(1.15rem, 2.3vw, 1.5rem); line-height: 1.9; color: var(--lay-creme); }

body[data-layout="renascentista"] .local-card { padding: 0; color: var(--lay-suave); }
body[data-layout="renascentista"] .local-card h3 { font-family: 'Cinzel', serif; font-size: 1.35rem; color: var(--lay-creme); }
body[data-layout="renascentista"] .local-card .endereco, body[data-layout="renascentista"] .local-card .desc { font-style: italic; opacity: 1; color: var(--lay-suave); }
body[data-layout="renascentista"] .local-card .maps-btn { border-color: var(--lay-dourado); color: var(--lay-dourado); }
body[data-layout="renascentista"] .local-card .maps-btn:hover { background: var(--lay-dourado); color: var(--lay-preto); }

body[data-layout="renascentista"] .cron-item { grid-template-columns: 120px 1fr; gap: 26px; border-bottom: 1px solid rgba(244,239,229,0.15); }
body[data-layout="renascentista"] .cron-horario { font-family: 'Cinzel', serif; font-size: 1.15rem; text-align: left; color: var(--lay-dourado); }
body[data-layout="renascentista"] .cron-titulo { font-family: 'Cinzel', serif; font-size: 1.1rem; font-weight: 400; color: var(--lay-creme); }
body[data-layout="renascentista"] .cron-desc { font-style: italic; opacity: 1; color: var(--lay-suave); }

body[data-layout="renascentista"] .presente-card { background: rgba(244,239,229,0.05); border: 1px solid rgba(244,239,229,0.15); }
body[data-layout="renascentista"] .presente-card .nome { font-family: 'Cinzel', serif; font-size: 1rem; color: var(--lay-creme); }
body[data-layout="renascentista"] .presente-card .valor { color: var(--lay-dourado); }
body[data-layout="renascentista"] .presente-card .btn-presentear { background: var(--lay-dourado); color: var(--lay-preto); letter-spacing: 2px; }
/* Caixa do PIX branca: a chave precisa ser legível e copiável no escuro */
body[data-layout="renascentista"] .presente-info-box { background: #fff; color: #1f2937; padding: 26px; max-width: 460px; margin: 0 auto 40px; }
body[data-layout="renascentista"] .presente-info-box h3 { font-family: 'Cinzel', serif; color: #1f2937; }
body[data-layout="renascentista"] .presente-info-box p { color: #4b5563; }

body[data-layout="renascentista"] .rsvp-form label { color: var(--lay-suave); letter-spacing: 2.5px; }
body[data-layout="renascentista"] .rsvp-form input,
body[data-layout="renascentista"] .rsvp-form select,
body[data-layout="renascentista"] .rsvp-form textarea { background: #fff; border: none; color: #1f2937; }
body[data-layout="renascentista"] .rsvp-form button[type="submit"] { background: var(--lay-dourado); color: var(--lay-preto); letter-spacing: 2.5px; }

body[data-layout="renascentista"] .faq-item { border-bottom: 1px solid rgba(244,239,229,0.15); padding: 22px 0; margin: 0; }
body[data-layout="renascentista"] .faq-pergunta { font-family: 'Cinzel', serif; font-weight: 400; font-size: 1.1rem; color: var(--lay-creme); }
body[data-layout="renascentista"] .faq-resposta { font-style: italic; color: var(--lay-suave); opacity: 1; border-top-color: rgba(244,239,229,0.15); }
body[data-layout="renascentista"] .faq-chevron { color: var(--lay-dourado); }

body[data-layout="renascentista"] .site-foot { background: var(--lay-preto); color: var(--lay-creme); }
body[data-layout="renascentista"] .foot-title { font-family: 'Cinzel', serif; letter-spacing: 2px; }


/* ================================================================
   7. PRETO E BRANCO FLORAL  (preview 07)
   Ilustração botânica a nanquim, blocos alternando preto e branco.
   ================================================================ */
body[data-layout="pb-floral"] {
  --lay-preto: var(--primary, #14100c);
  --lay-branco: #ffffff;
  --lay-creme: #f8f5ee;
  --lay-muted: #6a6a6a;
  background: var(--lay-branco);
  color: #2b2b2b;
  font-family: 'Inter', system-ui, sans-serif;
}
body[data-layout="pb-floral"] .page { padding: 84px 24px; }
body[data-layout="pb-floral"] .page.bloco-b { background: var(--lay-preto); color: rgba(255,255,255,0.75); }
body[data-layout="pb-floral"] .page.bloco-b .section-title h2,
body[data-layout="pb-floral"] .page.bloco-b .local-card h3,
body[data-layout="pb-floral"] .page.bloco-b .cron-titulo,
body[data-layout="pb-floral"] .page.bloco-b .faq-pergunta,
body[data-layout="pb-floral"] .page.bloco-b .welcome { color: #fff; }
body[data-layout="pb-floral"] .page.bloco-b .cron-item,
body[data-layout="pb-floral"] .page.bloco-b .faq-item { border-bottom-color: rgba(255,255,255,0.15); }
body[data-layout="pb-floral"] .page.bloco-b .cron-horario { color: rgba(255,255,255,0.85); }

/* Hero: nome em cima, herbário como banner com degradê pro branco */
body[data-layout="pb-floral"] .hero { min-height: auto; padding: 108px 24px 50px; background: var(--lay-branco); gap: 0; }
body[data-layout="pb-floral"] .hero .hero-bg { display: none; }
body[data-layout="pb-floral"] .hero .monograma-hero { display: none; }
body[data-layout="pb-floral"] .hero h1,
body[data-layout="pb-floral"] .hero.has-image h1 {
  font-family: 'Cormorant Garamond', serif; font-style: italic; font-weight: 300;
  font-size: clamp(2rem, 6vw, 5rem); line-height: 1.05; letter-spacing: 0.01em;
  color: var(--lay-preto);
  /* Margem negativa: o nome pousa POR CIMA da ilustracao. Modesta de
     proposito: nome de 2 linhas ainda tem que ficar legivel.
     Quem garante que ele fica na frente e o z-index: 0 da arte: o CSS
     base forca z-index: 1 em todo filho do hero com um seletor mais
     especifico do que este, entao subir o do titulo aqui nao adianta. */
  margin: 0 0 -44px;
  width: 100%;
}
body[data-layout="pb-floral"] .hero .kicker { letter-spacing: 3px; color: var(--lay-muted); opacity: 1; }
/* Herbario largo como banner, sangrando pros lados. O degrade apaga a base
   da ilustracao pra ela nascer do papel em vez de terminar num corte seco. */
/* Banner de largura inteira. As margens negativas anulam o padding
   lateral do hero, entao a arte encosta nas bordas sem depender de 100vw
   (que ignora a barra de rolagem e desalinha o resto da pagina). */
body[data-layout="pb-floral"] .hero .lay-herbario {
  position: relative;
  align-self: stretch;
  overflow: hidden;
  z-index: 0;
}
.lay-herbario img {
  display: block; width: 100%; height: auto;
  max-height: 90vh; object-fit: cover;
}
/* Degrade branco NO TOPO: e ele que deixa o nome pousar sobre o desenho
   em vez de brigar com as folhas. Sem isso o titulo fica ilegivel. */
.lay-herbario::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 62%;
  background: linear-gradient(180deg,
    var(--lay-branco) 0%,
    var(--lay-branco) 22%,
    color-mix(in srgb, var(--lay-branco) 85%, transparent) 48%,
    transparent 100%);
  pointer-events: none;
  z-index: 1;
}
body[data-layout="pb-floral"] .hero .subtitle,
body[data-layout="pb-floral"] .hero.has-image .subtitle {
  font-size: 12px; letter-spacing: 3.5px; text-transform: uppercase;
  color: var(--lay-preto); opacity: 1; margin: 0;
}

body[data-layout="pb-floral"] .cd-num { font-family: 'Cormorant Garamond', serif; font-style: italic; color: var(--lay-preto); }

body[data-layout="pb-floral"] .section-title h2 {
  font-family: 'Cormorant Garamond', serif; font-weight: 400;
  font-size: clamp(1.4rem, 3.4vw, 2rem);
  letter-spacing: 0.34em; text-transform: uppercase;
  color: var(--title-color, var(--lay-preto));
}
body[data-layout="pb-floral"] .section-title .eyebrow { letter-spacing: 3px; opacity: 0.6; }

body[data-layout="pb-floral"] .welcome { font-family: 'Cormorant Garamond', serif; font-style: italic; font-size: clamp(1.1rem, 2.2vw, 1.4rem); line-height: 1.9; }

body[data-layout="pb-floral"] .local-card { padding: 0; }
body[data-layout="pb-floral"] .local-card h3 { font-family: 'Cormorant Garamond', serif; font-style: italic; font-size: 1.6rem; }
body[data-layout="pb-floral"] .local-card .endereco { letter-spacing: 1.5px; text-transform: uppercase; font-size: 11px; }
body[data-layout="pb-floral"] .local-card .maps-btn { border: none; border-bottom: 1px solid currentColor; color: inherit; letter-spacing: 2px; padding: 0 0 3px; align-self: center; }
body[data-layout="pb-floral"] .local-card .maps-btn:hover { background: transparent; opacity: 0.6; }

/* Cronograma com o passarinho ao lado (some no celular, vira embaixo) */
/* Duas celulas: a lista inteira de um lado, o ornamento do outro.
   O grid vai no container, mas quem ocupa a primeira celula e a coluna
   com todos os itens, nao cada item solto. */
body[data-layout="pb-floral"] .cronograma {
  max-width: 1000px; display: grid;
  grid-template-columns: 1.4fr 1fr; gap: 60px; align-items: center;
}
body[data-layout="pb-floral"] .crono-coluna { display: block; }
body[data-layout="pb-floral"] .cronograma .layout-art { max-width: 320px; justify-self: center; }
body[data-layout="pb-floral"] .cron-item { grid-template-columns: 100px 1fr; gap: 26px; border-bottom: 1px solid #e5e5e5; }
body[data-layout="pb-floral"] .cron-horario { font-family: 'Cormorant Garamond', serif; font-style: italic; font-size: 1.4rem; text-align: left; color: inherit; }
body[data-layout="pb-floral"] .cron-titulo { font-family: 'Cormorant Garamond', serif; font-size: 1.2rem; font-weight: 400; }

body[data-layout="pb-floral"] .presente-card { border: 1px solid #e5e5e5; }
body[data-layout="pb-floral"] .presente-card .nome { font-family: 'Cormorant Garamond', serif; font-style: italic; }
body[data-layout="pb-floral"] .presente-card .btn-presentear { background: var(--lay-preto); letter-spacing: 2px; }
body[data-layout="pb-floral"] .presente-info-box { background: #fff; border: 1px solid #e5e5e5; color: #1f2937; padding: 26px; max-width: 460px; margin: 0 auto 40px; }

body[data-layout="pb-floral"] .rsvp-form input,
body[data-layout="pb-floral"] .rsvp-form select,
body[data-layout="pb-floral"] .rsvp-form textarea { background: #fff; border: 1px solid #e5e5e5; color: #1f2937; }
body[data-layout="pb-floral"] .rsvp-form button[type="submit"] { background: var(--lay-preto); letter-spacing: 2.5px; }
body[data-layout="pb-floral"] .page.bloco-b .rsvp-form button[type="submit"] { background: #fff; color: var(--lay-preto); }

body[data-layout="pb-floral"] .faq-item { border-bottom: 1px solid #e5e5e5; padding: 20px 0; margin: 0; }
body[data-layout="pb-floral"] .faq-pergunta { font-family: 'Cormorant Garamond', serif; font-style: italic; font-size: 1.3rem; }

body[data-layout="pb-floral"] .site-foot { background: var(--lay-preto); color: #fff; }
body[data-layout="pb-floral"] .foot-title { font-family: 'Cormorant Garamond', serif; font-style: italic; }


/* ================================================================
   8. SPLIT ESCURO  —  o hero já vem de estilo_topo="split-escuro".
   Aqui só o resto do site acompanha o clima escuro.
   ================================================================ */
body[data-layout="split-escuro"] {
  --lay-fundo: var(--bg, #16130f);
  --lay-claro: var(--banner-text, #f4efe6);
  --lay-suave: color-mix(in srgb, var(--banner-text, #f4efe6) 72%, #6b6455);
  --lay-accent: var(--primary, #c9a227);
  background: var(--lay-fundo);
  color: var(--lay-suave);
  font-family: 'Inter', system-ui, sans-serif;
}
body[data-layout="split-escuro"] .page { padding: 90px 24px; }
body[data-layout="split-escuro"] .page.bloco-b { background: color-mix(in srgb, var(--bg, #16130f) 88%, #fff); }

body[data-layout="split-escuro"] .section-title h2 {
  font-family: 'Cormorant Garamond', serif; font-weight: 400;
  letter-spacing: 0.06em; color: var(--title-color, var(--lay-claro));
}
body[data-layout="split-escuro"] .section-title .eyebrow { letter-spacing: 3px; color: var(--lay-accent); opacity: 1; }
body[data-layout="split-escuro"] .welcome { font-family: 'Cormorant Garamond', serif; color: var(--lay-claro); }

body[data-layout="split-escuro"] .local-card { padding: 0; }
body[data-layout="split-escuro"] .local-card h3 { font-family: 'Cormorant Garamond', serif; color: var(--lay-claro); }
body[data-layout="split-escuro"] .local-card .maps-btn { border-color: var(--lay-accent); color: var(--lay-accent); }
body[data-layout="split-escuro"] .local-card .maps-btn:hover { background: var(--lay-accent); color: var(--lay-fundo); }

body[data-layout="split-escuro"] .cron-item { grid-template-columns: 100px 1fr; gap: 24px; border-bottom: 1px solid rgba(244,239,230,0.15); }
body[data-layout="split-escuro"] .cron-horario { font-family: 'Cormorant Garamond', serif; text-align: left; color: var(--lay-accent); }
body[data-layout="split-escuro"] .cron-titulo { color: var(--lay-claro); }

body[data-layout="split-escuro"] .presente-card { background: rgba(244,239,230,0.05); border: 1px solid rgba(244,239,230,0.15); }
body[data-layout="split-escuro"] .presente-card .nome { color: var(--lay-claro); font-family: 'Cormorant Garamond', serif; }
body[data-layout="split-escuro"] .presente-card .valor { color: var(--lay-accent); }
body[data-layout="split-escuro"] .presente-card .btn-presentear { background: var(--lay-accent); color: var(--lay-fundo); }
body[data-layout="split-escuro"] .presente-info-box { background: #fff; color: #1f2937; padding: 26px; max-width: 460px; margin: 0 auto 40px; }
body[data-layout="split-escuro"] .presente-info-box h3 { color: #1f2937; }
body[data-layout="split-escuro"] .presente-info-box p { color: #4b5563; }

body[data-layout="split-escuro"] .rsvp-form label { color: var(--lay-suave); }
body[data-layout="split-escuro"] .rsvp-form input,
body[data-layout="split-escuro"] .rsvp-form select,
body[data-layout="split-escuro"] .rsvp-form textarea { background: #fff; border: none; color: #1f2937; }
body[data-layout="split-escuro"] .rsvp-form button[type="submit"] { background: var(--lay-accent); color: var(--lay-fundo); }

body[data-layout="split-escuro"] .faq-item { border-bottom: 1px solid rgba(244,239,230,0.15); padding: 22px 0; margin: 0; }
body[data-layout="split-escuro"] .faq-pergunta { font-family: 'Cormorant Garamond', serif; color: var(--lay-claro); }
body[data-layout="split-escuro"] .faq-resposta { border-top-color: rgba(244,239,230,0.15); }
body[data-layout="split-escuro"] .faq-chevron { color: var(--lay-accent); }

body[data-layout="split-escuro"] .site-foot { background: var(--lay-fundo); color: var(--lay-claro); }
body[data-layout="split-escuro"] .foot-title { font-family: 'Cormorant Garamond', serif; }


/* ================================================================
   9. NOME DIVIDIDO  —  hero de estilo_topo="nome-dividido".
   Editorial claro, tipografia serifada de peso.
   ================================================================ */
body[data-layout="nome-dividido"] {
  --lay-tinta: var(--primary, #14100c);
  /* Off-white frio, quase papel de galeria: contraste alto com a tinta
     preta. E o oposto do bege quente do Arco, e os dois param de se
     parecer no catalogo. */
  --lay-fundo: color-mix(in srgb, var(--bg, #f5efe6) 34%, #fbfaf8);
  background: var(--lay-fundo);
  color: #56504a;
  font-family: 'Inter', system-ui, sans-serif;
}
body[data-layout="nome-dividido"] .page { padding: 90px 24px; }
body[data-layout="nome-dividido"] .page.bloco-b { background: color-mix(in srgb, var(--primary, #14100c) 5%, #fbfaf8); }

body[data-layout="nome-dividido"] .section-title h2 {
  font-family: 'Playfair Display', 'Cormorant Garamond', serif; font-weight: 400;
  font-size: clamp(1.9rem, 5vw, 2.9rem); letter-spacing: 0;
  color: var(--title-color, var(--lay-tinta));
}
body[data-layout="nome-dividido"] .hero h1,
body[data-layout="nome-dividido"] .hero.has-image h1 { font-family: 'Playfair Display', 'Cormorant Garamond', serif; }
body[data-layout="nome-dividido"] .section-title .eyebrow { letter-spacing: 3px; opacity: 0.6; }
body[data-layout="nome-dividido"] .welcome { font-family: 'Playfair Display', serif; font-style: italic; }

body[data-layout="nome-dividido"] .local-card { padding: 0; }
body[data-layout="nome-dividido"] .local-card h3 { font-family: 'Playfair Display', serif; font-size: 1.5rem; color: var(--lay-tinta); }
body[data-layout="nome-dividido"] .local-card .maps-btn { border-color: var(--lay-tinta); color: var(--lay-tinta); }
body[data-layout="nome-dividido"] .local-card .maps-btn:hover { background: var(--lay-tinta); color: var(--lay-fundo); }

body[data-layout="nome-dividido"] .cron-item { grid-template-columns: 100px 1fr; gap: 24px; border-bottom: 1px solid rgba(20,16,12,0.14); }
body[data-layout="nome-dividido"] .cron-horario { font-family: 'Playfair Display', serif; font-size: 1.3rem; text-align: left; color: var(--lay-tinta); }
body[data-layout="nome-dividido"] .cron-titulo { font-family: 'Playfair Display', serif; font-size: 1.15rem; font-weight: 400; }

body[data-layout="nome-dividido"] .presente-card { background: #fff; border: 1px solid rgba(20,16,12,0.1); }
body[data-layout="nome-dividido"] .presente-card .nome { font-family: 'Playfair Display', serif; }
body[data-layout="nome-dividido"] .presente-card .btn-presentear { background: var(--lay-tinta); }
body[data-layout="nome-dividido"] .presente-info-box { background: #fff; padding: 26px; max-width: 460px; margin: 0 auto 40px; }

body[data-layout="nome-dividido"] .rsvp-form input,
body[data-layout="nome-dividido"] .rsvp-form select,
body[data-layout="nome-dividido"] .rsvp-form textarea { background: #fff; border: 1px solid rgba(20,16,12,0.14); }
body[data-layout="nome-dividido"] .rsvp-form button[type="submit"] { background: var(--lay-tinta); letter-spacing: 2.5px; }

body[data-layout="nome-dividido"] .faq-item { border-bottom: 1px solid rgba(20,16,12,0.14); padding: 22px 0; margin: 0; }
body[data-layout="nome-dividido"] .faq-pergunta { font-family: 'Playfair Display', serif; font-weight: 400; font-size: 1.25rem; color: var(--lay-tinta); }

body[data-layout="nome-dividido"] .site-foot { background: var(--lay-tinta); color: var(--lay-fundo); }
body[data-layout="nome-dividido"] .foot-title { font-family: 'Playfair Display', serif; }


/* ================================================================
   10. ARCO  —  hero de estilo_topo="arco".
   Bege, marrom e dourado. A galeria repete o arco do altar.
   ================================================================ */
body[data-layout="arco"] {
  --lay-marrom: var(--primary, #6b4a2a);
  /* Terroso quente, nao bege neutro: puxa o fundo pro tom de areia
     morna pra nao virar irmao gemeo do Editorial no catalogo. */
  --lay-bege: color-mix(in srgb, var(--bg, #f0e7d8) 82%, #d9a86a);
  --lay-dourado: color-mix(in srgb, var(--primary, #6b4a2a) 45%, #d9b779);
  background: var(--lay-bege);
  color: #6b5a48;
  font-family: 'Inter', system-ui, sans-serif;
}
body[data-layout="arco"] .page { padding: 90px 24px; }
body[data-layout="arco"] .page.bloco-b { background: color-mix(in srgb, var(--bg, #f0e7d8) 50%, #fff); }

/* O arco vira assinatura do site: volta na galeria */
body[data-layout="arco"] .galeria-grid .foto { border-radius: 50% 50% 0 0 / 32% 32% 0 0; }

body[data-layout="arco"] .section-title h2 {
  font-family: 'Cormorant Garamond', serif; font-weight: 400;
  letter-spacing: 0.16em; text-transform: uppercase;
  font-size: clamp(1.5rem, 4vw, 2.2rem);
  color: var(--title-color, var(--lay-marrom));
}
body[data-layout="arco"] .section-title .eyebrow { letter-spacing: 3px; color: var(--lay-marrom); opacity: 0.6; }
body[data-layout="arco"] .welcome { font-family: 'Cormorant Garamond', serif; color: var(--lay-marrom); }

body[data-layout="arco"] .local-card { padding: 0; }
body[data-layout="arco"] .local-card h3 { font-family: 'Cormorant Garamond', serif; font-size: 1.5rem; color: var(--lay-marrom); }
body[data-layout="arco"] .local-card .maps-btn { border-color: var(--lay-marrom); color: var(--lay-marrom); }
body[data-layout="arco"] .local-card .maps-btn:hover { background: var(--lay-marrom); color: var(--lay-bege); }

body[data-layout="arco"] .cron-item { grid-template-columns: 100px 1fr; gap: 24px; border-bottom: 1px solid rgba(107,74,42,0.18); }
body[data-layout="arco"] .cron-horario { font-family: 'Cormorant Garamond', serif; font-size: 1.35rem; text-align: left; color: var(--lay-dourado); }
body[data-layout="arco"] .cron-titulo { font-family: 'Cormorant Garamond', serif; font-size: 1.2rem; font-weight: 400; color: var(--lay-marrom); }

body[data-layout="arco"] .presente-card { background: #fff; border: 1px solid rgba(107,74,42,0.14); }
body[data-layout="arco"] .presente-card .img { border-radius: 50% 50% 0 0 / 22% 22% 0 0; }
body[data-layout="arco"] .presente-card .nome { font-family: 'Cormorant Garamond', serif; color: var(--lay-marrom); }
body[data-layout="arco"] .presente-card .valor { color: var(--lay-dourado); }
body[data-layout="arco"] .presente-card .btn-presentear { background: var(--lay-marrom); letter-spacing: 2px; }
body[data-layout="arco"] .presente-info-box { background: #fff; padding: 26px; max-width: 460px; margin: 0 auto 40px; }

body[data-layout="arco"] .rsvp-form input,
body[data-layout="arco"] .rsvp-form select,
body[data-layout="arco"] .rsvp-form textarea { background: #fff; border: 1px solid rgba(107,74,42,0.18); }
body[data-layout="arco"] .rsvp-form button[type="submit"] { background: var(--lay-marrom); letter-spacing: 2.5px; }

body[data-layout="arco"] .faq-item { border-bottom: 1px solid rgba(107,74,42,0.18); padding: 22px 0; margin: 0; }
body[data-layout="arco"] .faq-pergunta { font-family: 'Cormorant Garamond', serif; font-weight: 400; font-size: 1.3rem; color: var(--lay-marrom); }
body[data-layout="arco"] .faq-chevron { color: var(--lay-dourado); }

body[data-layout="arco"] .site-foot { background: var(--lay-marrom); color: var(--lay-bege); }
body[data-layout="arco"] .foot-title { font-family: 'Cormorant Garamond', serif; letter-spacing: 3px; text-transform: uppercase; }




/* A ultima secao encostava no rodape e os dois blocos de cor viravam um
   so. Um respiro no fim separa o conteudo do fecho do site. */
body[data-layout]:not([data-layout="padrao"]) #site > section.page:last-of-type {
  padding-bottom: 110px;
}
body[data-layout]:not([data-layout="padrao"]) .site-foot {
  margin-top: 0;
  padding-top: 70px;
}

/* Galeria: foto sozinha numa linha fica orfa e feia. Com 3 colunas isso
   acontece sempre que o total nao e multiplo de 3 (4 fotos = 3 + 1).
   As regras abaixo mandam a ultima foto ESTICAR pra ocupar o que sobrou,
   pra qualquer quantidade que a noiva subir. */
body[data-layout]:not([data-layout="padrao"]) .galeria-grid {
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
@media (min-width: 1100px) {
  body[data-layout]:not([data-layout="padrao"]) .galeria-grid {
    grid-template-columns: repeat(3, 1fr);
  }
  /* sobrou 1 na ultima linha: ocupa as 3 colunas */
  body[data-layout]:not([data-layout="padrao"]) .galeria-grid .foto:last-child:nth-child(3n + 1) {
    grid-column: span 3;
    aspect-ratio: 21 / 9;
  }
  /* sobraram 2: cada uma pega metade */
  body[data-layout]:not([data-layout="padrao"]) .galeria-grid .foto:nth-last-child(2):nth-child(3n + 1) {
    grid-column: span 2;
    aspect-ratio: 16 / 10;
  }
}
@media (max-width: 1099px) and (min-width: 781px) {
  /* 2 colunas: sobrou 1, estica nas duas */
  body[data-layout]:not([data-layout="padrao"]) .galeria-grid .foto:last-child:nth-child(odd) {
    grid-column: span 2;
    aspect-ratio: 21 / 9;
  }
}
@media (max-width: 780px) {
  body[data-layout]:not([data-layout="padrao"]) .galeria-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  body[data-layout]:not([data-layout="padrao"]) #site > section.page:last-of-type {
    padding-bottom: 80px;
  }
}


/* ================================================================
   BLOCOS DE LARGURA INTEIRA
   Fundo de bloco (cor ou foto) tem que sangrar de ponta a ponta.
   O limite de leitura vira padding, nao max-width no bloco.
   ================================================================ */
body[data-layout]:not([data-layout="padrao"]) section.page {
  max-width: none;
  width: 100%;
  margin: 0;
  padding-left: max(24px, calc((100% - 1100px) / 2));
  padding-right: max(24px, calc((100% - 1100px) / 2));
}
body[data-layout]:not([data-layout="padrao"]) .hero {
  max-width: none;
  width: 100%;
}
@media (max-width: 780px) {
  body[data-layout]:not([data-layout="padrao"]) section.page {
    padding-left: 20px;
    padding-right: 20px;
  }
}


/* O hero acompanha o padding lateral dos blocos, senao a faixa do Moderno
   e o banner do Floral nao encontram a borda certa pra sangrar. */
body[data-layout="moderno"] .hero {
  padding-left: max(24px, calc((100% - 1100px) / 2));
  padding-right: max(24px, calc((100% - 1100px) / 2));
}
/* O Floral usa margem lateral menor: o nome precisa de largura pra caber
   numa linha so, e a arte sangra ate a borda de qualquer jeito. */
body[data-layout="pb-floral"] .hero { padding-left: 24px; padding-right: 24px; }
.lay-herbario { margin-left: -24px; margin-right: -24px; }
@media (max-width: 780px) {
  body[data-layout="moderno"] .hero { padding-left: 20px; padding-right: 20px; }
  body[data-layout="pb-floral"] .hero { padding-left: 16px; padding-right: 16px; }
  .lay-herbario { margin-left: -16px; margin-right: -16px; }
}


/* O hero do Lateral Escuro e uma grade que ocupa a tela inteira, e o nav
   fixo (73px) ficava POR CIMA do topo da foto, cortando ela. Um respiro
   no topo devolve a foto inteira. */
body[data-layout="split-escuro"] .hero,
body[data-layout="nome-dividido"] .hero,
body[data-layout="arco"] .hero {
  padding-top: 73px;
}
@media (max-width: 780px) {
  body[data-layout="split-escuro"] .hero,
  body[data-layout="nome-dividido"] .hero,
  body[data-layout="arco"] .hero { padding-top: 66px; }
}
/* A foto da lateral acompanha o respiro, senao ela sozinha subiria */
body[data-layout="split-escuro"] .hero.has-image .hero-bg {
  border-top: 0;
}

/* ================================================================
   MENU DO TOPO
   O CSS base ja le --nav-bg e --nav-fg, entao cada visual so precisa
   dizer as duas cores. Antes o menu ficava sempre branco e destoava
   por cima de todo visual escuro.
   ================================================================ */
body[data-layout="editorial-vintage"] { --nav-bg: #f2eee3; --nav-fg: #14100c; }
body[data-layout="pb-floral"]         { --nav-bg: #ffffff; --nav-fg: #14100c; }
body[data-layout="split-escuro"]      { --nav-bg: var(--bg, #16130f); --nav-fg: #f4efe6; }
body[data-layout="renascentista"]     { --nav-bg: var(--bg, #0e0e0c); --nav-fg: #f4efe5; }
body[data-layout="moderno"]           { --nav-bg: #ffffff; --nav-fg: #1a1a1a; }
body[data-layout="aquarela-arte"]     { --nav-bg: #ffffff; --nav-fg: #2b2b2b; }
body[data-layout="guirlanda"]         { --nav-bg: #ffffff; --nav-fg: #4d5a3d; }
body[data-layout="sereno"]            { --nav-bg: color-mix(in srgb, var(--primary, #2b3a2a) 22%, #eef0ea); --nav-fg: #2b3a2a; }
body[data-layout="nome-dividido"]     { --nav-bg: color-mix(in srgb, var(--bg, #f5efe6) 34%, #fbfaf8); --nav-fg: #14100c; }
body[data-layout="arco"]              { --nav-bg: color-mix(in srgb, var(--bg, #f0e7d8) 82%, #d9a86a); --nav-fg: #6b4a2a; }

/* A barra fica opaca nos visuais escuros: com o fundo translucido do
   base o texto do site aparecia por tras das letras do menu. */
body[data-layout]:not([data-layout="padrao"]) nav.top {
  backdrop-filter: none;
  border-bottom: 1px solid color-mix(in srgb, var(--nav-fg) 16%, transparent);
}
/* Vintage: o menu ganha a mesma textura de papel do site, senao vira uma
   tarja lisa por cima de um fundo texturizado. */
body[data-layout="editorial-vintage"] nav.top {
  background-image: url('/flores/01.png');
  background-size: cover;
  background-position: top center;
}

body[data-layout] nav.top .menu a.rsvp-btn:hover {
  background: var(--nav-fg);
  color: var(--nav-bg);
}

/* ---------- Menu oculto (renascentista) ----------
   A barra fixa cortava a arte do topo. Aqui ela some e vira um botao
   discreto no canto, que abre um painel inteiro. */
body.nav-oculto nav.top {
  transform: translateY(-100%);
  transition: transform .28s ease;
}
body.nav-oculto.nav-aberto nav.top {
  transform: translateY(0);
  height: 100vh;
  flex-direction: column;
  justify-content: center;
  gap: 34px;
  padding: 40px 24px;
  background: var(--nav-bg);
  border-bottom: none;
}
body.nav-oculto.nav-aberto nav.top .brand {
  font-size: 30px;
  margin-bottom: 6px;
}
body.nav-oculto.nav-aberto nav.top .menu {
  flex-direction: column;
  align-items: center;
  gap: 22px;
}
/* No menu aberto TODOS os links aparecem, inclusive no celular, onde
   o base esconde os que nao sao o RSVP. */
body.nav-oculto.nav-aberto nav.top .menu a {
  display: block !important;
  font-size: 17px;
  letter-spacing: 1px;
}

.nav-toggle {
  position: fixed; top: 22px; right: 22px; z-index: 120;
  width: 46px; height: 46px; padding: 12px 11px;
  display: none; flex-direction: column; justify-content: space-between;
  background: rgba(0,0,0,0.35);
  border: 1px solid rgba(255,255,255,0.22);
  border-radius: 50%;
  cursor: pointer;
  backdrop-filter: blur(6px);
}
body.nav-oculto .nav-toggle { display: flex; }
.nav-toggle span {
  display: block; height: 1.5px; width: 100%;
  background: var(--nav-fg, #fff);
  transition: transform .25s ease, opacity .2s ease;
}
body.nav-aberto .nav-toggle { background: transparent; border-color: rgba(255,255,255,0.4); }
body.nav-aberto .nav-toggle span:nth-child(1) { transform: translateY(9px) rotate(45deg); }
body.nav-aberto .nav-toggle span:nth-child(2) { opacity: 0; }
body.nav-aberto .nav-toggle span:nth-child(3) { transform: translateY(-9px) rotate(-45deg); }

/* Com o menu escondido o hero recupera o topo inteiro pra arte */
body[data-layout="renascentista"] .hero .hero-topbar { padding-top: 40px; }
@media (max-width: 780px) {
  body[data-layout="renascentista"] .hero .hero-topbar { padding-top: 34px; }
  .nav-toggle { top: 16px; right: 16px; width: 42px; height: 42px; }
}

/* ================================================================
   CELULAR  (375px é o alvo de teste)
   ================================================================ */
@media (max-width: 780px) {
  body[data-layout]:not([data-layout="padrao"]) .page { padding: 60px 20px; }
  body[data-layout]:not([data-layout="padrao"]) .locais { grid-template-columns: 1fr; gap: 30px; }
  body[data-layout]:not([data-layout="padrao"]) .section-title { margin-bottom: 34px; }

  /* Cronograma: a coluna da hora não pode espremer a descrição */
  body[data-layout]:not([data-layout="padrao"]) .cron-item { grid-template-columns: 78px 1fr; gap: 14px; }
  body[data-layout]:not([data-layout="padrao"]) .cron-horario { font-size: 1.1rem; }

  body[data-layout="editorial-vintage"] .hero { padding: 84px 20px 50px; }
  body[data-layout="editorial-vintage"] { background-attachment: scroll; }
  .lay-polaroid { width: 86%; margin: 30px auto; }
  .lay-hero-rodape { width: 86%; font-size: 10px; letter-spacing: 2px; flex-direction: column; gap: 8px; }
  body[data-layout="editorial-vintage"] .hero .subtitle { font-size: 10px; letter-spacing: 2px; }
  body[data-layout="editorial-vintage"] #welcomeSection { padding: 60px 20px; }
  /* Envelope e carta empilham: lado a lado nao cabe em 375px */
  .lay-carta-wrap { grid-template-columns: 1fr; gap: 30px; }
  .lay-envelope { justify-self: center; transform: none; max-width: 340px; }
  .lay-papel { justify-self: center; transform: none; padding: 44px 30px; max-width: 100%; }
  body[data-layout="editorial-vintage"] .cron-item { grid-template-columns: 1fr; gap: 6px; }

  body[data-layout="moderno"] .hero { padding: 60px 20px 0; }
  body[data-layout="moderno"] .hero h1 { margin-bottom: 28px; }
  .lay-faixa { aspect-ratio: 4 / 3; }
  body[data-layout="moderno"] .hero .subtitle { margin-top: 28px; }

  body[data-layout="aquarela-arte"] .hero .lay-pincelada { width: 132%; }
  body[data-layout="aquarela-arte"] .hero { min-height: 74vh; padding: 84px 20px 50px; }
  body[data-layout="aquarela-arte"] .hero .monograma-hero { margin-top: -24px; }

  body[data-layout="sereno"] .hero { padding: 60px 20px 50px; }
  body[data-layout="sereno"] .hero.has-image .hero-bg,
  body[data-layout="sereno"] .hero .hero-bg { width: 100%; aspect-ratio: 4 / 3; }

  /* Guirlanda: a arte sangra um pouco pros lados pra ganhar presença */
  body[data-layout="guirlanda"] .hero { padding: 24px 16px 30px; }
  .lay-guirlanda { width: 108%; margin-left: -4%; }
  body[data-layout="guirlanda"] .hero h1 { font-size: 0.95rem; letter-spacing: 0.06em; }
  body[data-layout="guirlanda"] .hero .kicker { font-size: 9px; letter-spacing: 1.5px; }

  /* Renascentista: a barra de 3 colunas não cabe, empilha */
  body[data-layout="renascentista"] .hero .hero-topbar { grid-template-columns: 1fr; gap: 14px; padding: 74px 20px 22px; }
  body[data-layout="renascentista"] .hero .hero-topbar .val { font-size: 17px; }
  body[data-layout="renascentista"] .hero .kicker,
  body[data-layout="renascentista"] .hero h1,
  body[data-layout="renascentista"] .hero .subtitle,
  body[data-layout="renascentista"] .hero .countdown { padding: 0 24px; }
  body[data-layout="renascentista"] .hero .countdown { margin-bottom: 40px; }
  body[data-layout="renascentista"] .cron-item { grid-template-columns: 86px 1fr; }

  /* P&B floral: o passarinho desce pra debaixo da lista */
  body[data-layout="pb-floral"] .cronograma { grid-template-columns: 1fr; gap: 30px; }
  body[data-layout="pb-floral"] .crono-coluna { width: 100%; }
  body[data-layout="pb-floral"] .cronograma .layout-art { max-width: 200px; }
  body[data-layout="pb-floral"] .hero { padding-top: 84px; padding-bottom: 40px; }
  body[data-layout="pb-floral"] .hero h1,
  body[data-layout="pb-floral"] .hero.has-image h1 { margin-bottom: -26px; }
}