/* Villa Hora (04/11/2026). Ideia: o nome Hora e o slogan "Eventos que marcam" viram o salão que acende e o relógio da noite.
   Cores do lugar e do logo: madeira à noite, vinho das artes deles, âmbar dos lustres, marfim do gesso em ondas. */
@font-face { font-family: Italiana; src: url(fontes/italiana.woff2) format('woff2'); font-display: swap; }
@font-face { font-family: Jost; src: url(fontes/jost.woff2) format('woff2'); font-weight: 300 600; font-display: swap; }
@font-face { font-family: Allura; src: url(fontes/allura.woff2) format('woff2'); font-display: swap; }
:root {
  --noite: #1C0E0B; --noite2: #2A1510; --vinho: #5E1220; --vinho2: #340A13; --ambar: #E9A94B; --ouro: #F2CE8B; --champ: #F6E8D3; --marfim: #FBF6EE;
  --tinta: #2A1510; --suave: #6B5446; --claro: #E9DAC5; --vinho-txt: #8A1C30;
  --m: max(clamp(20px, 6vw, 104px), env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px)); --sec: clamp(72px, 10vw, 136px);
  --tit: Italiana, 'Times New Roman', serif; --txt: Jost, 'Segoe UI', Arial, sans-serif; --scr: Allura, cursive;
  --gesso: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='90'%3E%3Cpath d='M0 45c37-30 73-30 110 0s73 30 110 0' fill='none' stroke='%23A9835A' stroke-opacity='.07' stroke-width='12'/%3E%3C/svg%3E");
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; background: var(--noite); }
body { margin: 0; font: 400 18px/1.62 var(--txt); color: var(--tinta); background: var(--marfim); overflow-x: hidden; overflow-x: clip; -webkit-font-smoothing: antialiased; }
img, video { display: block; max-width: 100%; height: auto; }
a, button, label, summary { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
h1, h2, h3, p, figure, blockquote, ol, ul { margin: 0; padding: 0; } ol, ul { list-style: none; }
h1, h2 { font-family: var(--tit); font-weight: 400; letter-spacing: .005em; line-height: 1.08; text-wrap: balance; }
h2 { font-size: clamp(38px, 5.2vw, 72px); }
h2 em, h1 em { font-family: var(--scr); font-style: normal; font-size: 1.3em; line-height: .8; color: var(--vinho-txt); padding: 0 .08em; }
h3 { font-family: var(--tit); font-weight: 400; font-size: clamp(26px, 2.3vw, 32px); line-height: 1.15; }
:focus-visible { outline: 3px solid var(--ambar); outline-offset: 3px; border-radius: 4px; }
.pular { position: fixed; left: 12px; top: -80px; z-index: 90; padding: 12px 18px; background: var(--ouro); color: var(--tinta); border-radius: 8px; }
.pular:focus { top: 12px; }
.ic { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ic-w { fill: currentColor; stroke: none; width: 22px; height: 22px; }

.bt { display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-height: 54px; padding: 0 28px; border-radius: 3px; border: 1px solid transparent; font: 500 16.5px/1.1 var(--txt); letter-spacing: .02em; text-decoration: none; cursor: pointer; transition: background-color .3s, color .3s, border-color .3s, transform .3s; }
.bt .ic { transition: transform .3s; }
.bt-ouro { background: linear-gradient(180deg, #F7D99C, var(--ambar)); color: #2A1208; box-shadow: 0 10px 24px -14px rgb(233 169 75 / .9); }
.bt-linha { border-color: rgb(246 232 211 / .55); color: var(--champ); }
.bt-vinho { background: var(--vinho); color: var(--champ); }
@media (hover: hover) { .bt:hover { transform: translateY(-2px); } .bt:hover .ic { transform: translateX(4px); } .bt-linha:hover { background: rgb(246 232 211 / .1); border-color: var(--champ); } .bt-vinho:hover { background: #761A2B; } }

.rot { font: 500 14px/1.2 var(--txt); letter-spacing: .24em; text-transform: uppercase; color: var(--vinho-txt); margin-bottom: 16px; }
.rot-claro { color: var(--ouro); }
.cb { padding-inline: var(--m); margin-bottom: clamp(36px, 5vw, 60px); }
.cb-lado { display: grid; gap: 20px; align-items: end; }
@media (min-width: 900px) { .cb-lado { grid-template-columns: 1.3fr 1fr; gap: 48px; } }
.cb-txt { color: var(--suave); max-width: 52ch; }
.cb-txt-c { color: var(--claro); margin-top: 20px; }
.js .sobe { opacity: 0; transform: translateY(26px); }

/* menu */
.mn { position: fixed; inset: 0 0 auto; z-index: 50; display: flex; align-items: center; gap: 28px; padding: 12px var(--m); transition: background-color .35s, padding .35s, box-shadow .35s; }
.mn.rolou { background: rgb(28 14 11 / .97); box-shadow: 0 8px 24px -16px #000; padding-block: 8px; }
.mn-logo { display: block; position: relative; }
.mn-logo img { width: 112px; height: auto; }
.mn-links { display: flex; gap: 30px; margin-left: auto; }
.mn-links a { position: relative; padding: 8px 0; color: var(--champ); text-decoration: none; font-size: 15.5px; letter-spacing: .03em; text-shadow: 0 1px 10px rgb(0 0 0 / .55); }
.mn-links a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 2px; height: 1px; background: var(--ambar); transform: scaleX(0); transform-origin: left; transition: transform .3s; }
@media (hover: hover) { .mn-links a:hover::after { transform: scaleX(1); } }
.mn-bt { min-height: 42px; padding: 0 18px; font-size: 14.5px; opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity .3s, visibility .3s, transform .3s; }
.mn.rolou .mn-bt { opacity: 1; visibility: visible; transform: none; }
@media (max-width: 960px) { .mn-links { display: none; } .mn-bt { margin-left: auto; } }
@media (max-width: 560px) { .mn-bt { display: none; } .mn-logo img { width: 96px; } }

/* topo: o salão que acende */
.tp { position: relative; min-height: 100vh; min-height: 100svh; overflow: hidden; background: #0C0605; color: var(--champ); display: flex; align-items: flex-end; isolation: isolate; }
.tp-palco { position: absolute; left: 50%; top: 50%; width: max(100%, calc(var(--tp-alt, 100svh) * 1.34)); aspect-ratio: 4 / 3; transform: translate(-50%, -50%); z-index: -3; }
.tp-palco img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.tp-base { filter: brightness(.17) saturate(.5); }
.tp-acesa { position: absolute; inset: 0; }
.js .tp-acesa:not(.ligada) { visibility: hidden; } /* o salão não aparece aceso antes de a animação começar */
.js .tp-acesa.vai { --t: 0; --a: 0; --b: 0; --c: 0; --d: 0; --e: 0; --f: 0; --g: 0;
  -webkit-mask-image: radial-gradient(circle at 45% 21%, #000 calc(var(--a) * .35vmax), transparent calc(var(--a) * 1vmax)), radial-gradient(circle at 30% 28.5%, #000 calc(var(--b) * .35vmax), transparent calc(var(--b) * 1vmax)), radial-gradient(circle at 91% 43%, #000 calc(var(--c) * .35vmax), transparent calc(var(--c) * 1vmax)), radial-gradient(circle at 53% 47.5%, #000 calc(var(--d) * .35vmax), transparent calc(var(--d) * 1vmax)), radial-gradient(circle at 73% 45.5%, #000 calc(var(--e) * .35vmax), transparent calc(var(--e) * 1vmax)), radial-gradient(circle at 20% 64%, #000 calc(var(--f) * .35vmax), transparent calc(var(--f) * 1vmax)), radial-gradient(circle at 62% 68%, #000 calc(var(--g) * .35vmax), transparent calc(var(--g) * 1vmax)), linear-gradient(rgb(0 0 0 / var(--t)), rgb(0 0 0 / var(--t)));
  mask-image: radial-gradient(circle at 45% 21%, #000 calc(var(--a) * .35vmax), transparent calc(var(--a) * 1vmax)), radial-gradient(circle at 30% 28.5%, #000 calc(var(--b) * .35vmax), transparent calc(var(--b) * 1vmax)), radial-gradient(circle at 91% 43%, #000 calc(var(--c) * .35vmax), transparent calc(var(--c) * 1vmax)), radial-gradient(circle at 53% 47.5%, #000 calc(var(--d) * .35vmax), transparent calc(var(--d) * 1vmax)), radial-gradient(circle at 73% 45.5%, #000 calc(var(--e) * .35vmax), transparent calc(var(--e) * 1vmax)), radial-gradient(circle at 20% 64%, #000 calc(var(--f) * .35vmax), transparent calc(var(--f) * 1vmax)), radial-gradient(circle at 62% 68%, #000 calc(var(--g) * .35vmax), transparent calc(var(--g) * 1vmax)), linear-gradient(rgb(0 0 0 / var(--t)), rgb(0 0 0 / var(--t))); }
.tp-luz { position: absolute; left: var(--x); top: var(--y); width: 15vmax; height: 15vmax; margin: -7.5vmax 0 0 -7.5vmax; border-radius: 50%; background: radial-gradient(circle, rgb(255 214 140 / .5), rgb(255 180 90 / .1) 38%, transparent 68%); mix-blend-mode: screen; pointer-events: none; }
.tp-luz.g { width: 22vmax; height: 22vmax; margin: -11vmax 0 0 -11vmax; }
.js .tp-luz { opacity: 0; }
.tp-fogos { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; }
.tp-veu { position: absolute; inset: 0; z-index: -2; background: linear-gradient(0deg, rgb(12 6 5 / .98) 0%, rgb(12 6 5 / .86) 30%, rgb(12 6 5 / .3) 58%, rgb(12 6 5 / .5) 100%); }
@media (max-width: 700px) { .tp-veu { background: linear-gradient(0deg, rgb(12 6 5 / .98) 0%, rgb(12 6 5 / .92) 48%, rgb(12 6 5 / .35) 68%, rgb(12 6 5 / .5) 100%); } }
.tp-miolo { width: 100%; padding: 120px var(--m) clamp(28px, 4vh, 52px); display: grid; gap: 24px; align-items: end; }
@media (min-width: 960px) { .tp-miolo { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 48px; } }
.tp-onde { font-size: 15px; letter-spacing: .14em; text-transform: uppercase; color: var(--ouro); margin-bottom: 10px; text-shadow: 0 1px 10px #000; }
h1 { font-size: clamp(58px, 7.4vw, 124px); line-height: .98; }
h1 .ln { display: block; overflow: hidden; padding: .06em .1em .2em 0; margin-bottom: -.2em; }
h1 .ln > span { display: block; }
h1 em { color: var(--ouro); font-size: 1.22em; line-height: .7; text-shadow: 0 2px 26px rgb(233 169 75 / .45); }
.tp-dir { max-width: 520px; text-shadow: 0 1px 12px rgb(0 0 0 / .8); font-size: 17.5px; line-height: 1.5; }
.tp-bts { display: flex; flex-wrap: wrap; gap: 12px; margin: 18px 0 18px; }
.tp-bts .bt { text-shadow: none; }
.tp-trilha { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; font: 400 22px/1.1 var(--tit); letter-spacing: .02em; }
.tp-trilha li { position: relative; color: rgb(246 232 211 / .5); transition: color .6s, text-shadow .6s; }
.tp-trilha li + li::before { content: ""; display: inline-block; width: 22px; height: 1px; margin-right: 10px; vertical-align: middle; background: rgb(246 232 211 / .4); }
.tp-trilha li.on { color: var(--ouro); text-shadow: 0 0 16px rgb(233 169 75 / .8); }
.tp-nota { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 8px; padding: 10px 0; color: var(--claro); text-decoration: none; font-size: 15px; }
.tp-nota b { color: var(--ouro); font-weight: 500; } .tp-nota span { color: var(--ambar); letter-spacing: .08em; font-size: 13px; }
@media (max-width: 700px) { .tp-miolo { padding-bottom: calc(84px + env(safe-area-inset-bottom, 0px)); } .tp-trilha { font-size: 20px; } .tp-bts .bt { flex: 1 1 100%; } .tp-nota { display: none; } .tp-onde { font-size: 13.5px; letter-spacing: .1em; line-height: 1.35; } }
/* celular de tela curta (iPhone SE, iPhone com a barra do Safari): tudo o que importa aparece acima da barra de atalhos */
@media (max-width: 700px) and (max-height: 760px) { .tp-trilha { display: none; } .tp-miolo { padding-top: 84px; gap: 12px; } h1 { font-size: clamp(44px, 14.6vw, 58px); } .tp-onde { margin-bottom: 4px; } .tp-dir { font-size: 16.5px; line-height: 1.42; } .tp-bts { margin: 12px 0 0; gap: 8px; } .tp-bts .bt { min-height: 46px; } }
@media (max-width: 700px) and (max-height: 600px) { .tp-miolo { padding-top: 72px; } .tp-onde { font-size: 12px; } h1 { font-size: clamp(42px, 13.4vw, 50px); } .tp-dir { font-size: 15.5px; line-height: 1.36; } }
/* celular deitado */
@media (max-height: 480px) and (orientation: landscape) { .tp-miolo { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; padding-top: 72px; padding-bottom: 16px; } h1 { font-size: clamp(40px, 7vw, 56px); } .tp-trilha, .tp-nota { display: none; } .tp-dir { font-size: 15px; line-height: 1.36; } .tp-bts { margin: 10px 0 0; gap: 8px; } .tp-bts .bt { flex: 1 1 auto; min-height: 44px; } .tp-onde { font-size: 12px; } }
@media (max-height: 780px) and (min-width: 960px) { h1 { font-size: clamp(60px, 7.8vw, 112px); } .tp-miolo { padding-top: 90px; } }

/* frase: a luz passa por cima */
.fr { padding: var(--sec) var(--m); background: var(--marfim) var(--gesso); text-align: left; }
.fr-frase { max-width: 1120px; font: 400 clamp(34px, 5.1vw, 74px)/1.14 var(--tit); color: var(--tinta); }
.fr-frase strong { font-weight: 400; color: var(--vinho-txt); }
.js .fr-frase, .js .fr-frase strong { background: linear-gradient(105deg, var(--cor, var(--tinta)) 0 45%, #C69A68 55%, #DCC7AB 62%) 0 0 / 280% 100% no-repeat; -webkit-background-clip: text; background-clip: text; color: transparent; background-position-x: var(--luz, 100%); }
.js .fr-frase strong { --cor: var(--vinho-txt); background-attachment: scroll; }

/* festas */
.fs { padding: 0 0 var(--sec); background: var(--marfim); }
.fs-grade { display: grid; gap: 20px; padding-inline: var(--m); grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); }
.fs-c { display: flex; flex-direction: column; padding: 8px 8px 22px; background: #fff; border: 1px solid #E8DAC4; border-radius: 4px; outline: 1px solid #E8DAC4; outline-offset: 4px; transition: transform .4s, box-shadow .4s; }
.fs-foto { position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: var(--noite2); }
.fs-foto img, .fs-foto video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s cubic-bezier(.2, .7, .2, 1), opacity .5s; }
.fs-foto video { opacity: 0; } .fs-foto video.on { opacity: 1; }
.fs-fato { display: flex; align-items: center; gap: 8px; margin: 16px 12px 0; color: var(--vinho-txt); font-size: 15px; line-height: 1.25; }
.fs-c h3 { margin: 8px 12px 6px; }
.fs-c > p:not(.fs-fato) { margin: 0 12px 12px; font-size: 16.5px; line-height: 1.5; color: var(--suave); }
.fs-link { display: flex; align-items: center; gap: 8px; margin: auto 12px 0; padding: 10px 0; color: var(--tinta); font-weight: 500; font-size: 15.5px; line-height: 1.25; text-decoration: underline; text-decoration-color: var(--ambar); text-underline-offset: 5px; }
.fs-link .ic { transition: transform .3s; }
@media (hover: hover) { .fs-c:hover { transform: translateY(-6px); box-shadow: 0 26px 40px -30px rgb(42 21 16 / .6); } .fs-c:hover .fs-foto img { transform: scale(1.05); } .fs-link:hover .ic { transform: translateX(4px); } }

/* cortina de luzes do teto */
.tem-cortina { position: relative; isolation: isolate; }
.ct { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; }

/* a noite: o relógio */
.nt { padding: var(--sec) var(--m); background: var(--noite); color: var(--claro); overflow: hidden; }
.nt h2 { color: var(--champ); } .nt h2 em, .pc h2 em, .cv h2 em, .lc h2 em { color: var(--ouro); }
.nt-grade { display: grid; gap: clamp(40px, 6vw, 96px); align-items: center; }
@media (min-width: 960px) { .nt-grade { grid-template-columns: minmax(0, 620px) 1fr; } }
.nt-relogio { --lado: min(100%, 620px); position: relative; width: var(--lado); aspect-ratio: 1; margin-inline: auto; container-type: inline-size; }
.nt-marcas { position: absolute; inset: 9.5%; border-radius: 50%; background: repeating-conic-gradient(rgb(242 206 139 / .75) 0 .5deg, transparent .5deg 6deg); -webkit-mask: radial-gradient(closest-side, transparent 95.5%, #000 96%); mask: radial-gradient(closest-side, transparent 95.5%, #000 96%); }
.nt-janela { position: absolute; inset: 14%; border-radius: 50%; overflow: hidden; background: var(--noite2); box-shadow: 0 0 0 1px rgb(242 206 139 / .6), 0 0 70px -6px rgb(233 169 75 / .4); }
.nt-janela img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.nt-janela::after { content: ""; position: absolute; inset: 0; border-radius: 50%; box-shadow: inset 0 0 44px rgb(0 0 0 / .55); pointer-events: none; }
.nt-ponteiro { position: absolute; left: 50%; bottom: 50%; width: 2px; height: 36%; margin-left: -1px; background: linear-gradient(0deg, var(--ouro), #fff0cf); transform-origin: 50% 100%; box-shadow: 0 0 8px rgb(0 0 0 / .7); pointer-events: none; }
.nt-ponteiro::after { content: ""; position: absolute; left: 50%; bottom: -6px; width: 12px; height: 12px; margin-left: -6px; border-radius: 50%; background: var(--ouro); box-shadow: 0 0 10px rgb(0 0 0 / .6); }
.nt-hora { position: absolute; left: 50%; top: 50%; width: 52px; height: 52px; margin: -26px 0 0 -26px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--claro); font: 400 20px/1 var(--tit); cursor: pointer; transform: rotate(var(--a)) translateY(-45.6cqw) rotate(calc(var(--a) * -1)); transition: color .3s, background-color .3s; }
@supports not (width: 1cqw) { .nt-hora { transform: rotate(var(--a)) translateY(calc(min(100vw - 2 * var(--m), 620px) * -.45)) rotate(calc(var(--a) * -1)) !important; } }
.nt-hora[aria-pressed="true"] { background: var(--ouro); color: #2A1208; box-shadow: 0 0 22px rgb(233 169 75 / .7); }
@media (hover: hover) { .nt-hora:hover:not([aria-pressed="true"]) { color: var(--ouro); background: rgb(242 206 139 / .12); } }
.nt-pausa { position: absolute; right: 0; bottom: 0; min-height: 44px; padding: 0 16px; border: 1px solid rgb(246 232 211 / .3); border-radius: 3px; background: rgb(28 14 11 / .7); color: var(--claro); font: 400 14px var(--txt); cursor: pointer; }
.nt-texto { min-width: 0; }
.nt-cena { margin-top: clamp(24px, 3vw, 40px); min-height: 230px; }
.nt-h { font: 400 clamp(64px, 8vw, 112px)/1 var(--tit); color: var(--ouro); }
.nt-cena h3 { color: var(--champ); margin: 4px 0 10px; font-size: clamp(30px, 3vw, 40px); }
.nt-cena p:last-child { max-width: 44ch; font-size: 18.5px; }
.nt-nota { margin-top: 18px; font-size: 14.5px; color: #B8A48D; }
.nt-lista { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-top: 30px; }
@media (max-width: 500px) { .nt-hora { width: 44px; height: 44px; margin: -22px 0 0 -22px; font-size: 16px; transform: rotate(var(--a)) translateY(-44cqw) rotate(calc(var(--a) * -1)); } .nt-cena { min-height: 250px; } .nt-pausa { min-height: 44px; padding: 0 12px; font-size: 13px; } }

/* o salão */
.sl { padding: var(--sec) 0; background: var(--marfim) var(--gesso); }
.sl-grade { display: grid; gap: 18px; padding-inline: var(--m); grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sl figure { min-width: 0; }
.sl figcaption { padding-top: 8px; font-size: 15px; line-height: 1.3; color: var(--suave); }
.sl-i img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.sl-i.a { grid-column: 1 / -1; } .sl-i.a img { aspect-ratio: 16 / 10; }
.sl-tour { grid-column: 1 / -1; }
.sl-video { position: relative; aspect-ratio: 9 / 15; max-height: 80svh; margin-inline: auto; overflow: hidden; background: var(--noite2); }
.sl-video video { width: 100%; height: 100%; object-fit: cover; }
.sl-pausa { position: absolute; left: 12px; bottom: 12px; min-height: 44px; padding: 0 14px; border: 1px solid rgb(246 232 211 / .4); border-radius: 3px; background: rgb(28 14 11 / .72); color: var(--champ); font: 400 14px var(--txt); cursor: pointer; }
@media (min-width: 900px) {
  .sl-grade { grid-template-columns: 1.15fr repeat(4, minmax(0, 1fr)); grid-auto-rows: auto; }
  .sl-tour { grid-column: 1; grid-row: 1 / span 2; display: flex; flex-direction: column; }
  .sl-video { width: 100%; max-height: none; flex: 1; aspect-ratio: auto; min-height: 420px; } .sl-video video { position: absolute; inset: 0; }
  .sl-i.a { grid-column: 2 / span 2; } .sl-i.a img { aspect-ratio: auto; height: calc(100% - 32px); }
  .sl-i.b { grid-column: 4; } .sl-i.c { grid-column: 5; }
  .sl-i.d { grid-column: 2; } .sl-i.e { grid-column: 3; } .sl-i.f { grid-column: 4; } .sl-i.g { grid-column: 5; }
}

/* buffet */
.bf { display: grid; gap: clamp(32px, 5vw, 72px); padding: 0 var(--m) var(--sec); background: var(--marfim) var(--gesso); align-items: center; }
@media (min-width: 960px) { .bf { grid-template-columns: 1.08fr 1fr; } }
.bf-fotos { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.bf-f1 { grid-column: 1 / -1; } .bf-fotos img { width: 100%; height: 100%; object-fit: cover; }
.bf-f1 img { aspect-ratio: 3 / 2; } .bf-f2 img, .bf-f3 img { aspect-ratio: 5 / 4; }
.bf-txt > p:not(.rot) { margin-top: 20px; color: var(--suave); max-width: 54ch; }
.bf-av { margin: 28px 0 28px; padding: 4px 0 4px 22px; border-left: 2px solid var(--ambar); }
.bf-av p { font-size: 19px; line-height: 1.45; color: var(--tinta); } .bf-av cite { display: block; margin-top: 8px; font-style: normal; font-size: 15px; color: var(--suave); }

/* pacote */
.pc { padding: var(--sec) var(--m); background: linear-gradient(160deg, var(--vinho2), #240811); color: var(--claro); }
.pc-grade { display: grid; gap: clamp(32px, 5vw, 64px); align-items: center; max-width: 1240px; margin-inline: auto; }
@media (min-width: 900px) { .pc-grade { grid-template-columns: .85fr 1.15fr; } }
.pc h2 { color: var(--champ); }
.pc-foto { position: relative; }
.pc-foto img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 50% 50% 4px 4px / 34% 34% 4px 4px; }
.pc-selo { position: absolute; right: 2%; bottom: -14px; display: grid; place-items: center; width: 122px; height: 122px; align-content: center; border-radius: 50%; background: linear-gradient(145deg, #F7D99C, var(--ambar)); color: #3A1608; }
.pc-selo small { font-size: 14px; line-height: 1; } .pc-selo b { font: 400 46px/1 var(--tit); }
.pc-preco { margin-top: 16px; font-size: 18px; color: var(--claro); display: flex; flex-wrap: wrap; gap: 2px 10px; align-items: baseline; }
.pc-preco b { font: 400 clamp(40px, 5vw, 62px)/1.1 var(--tit); color: var(--ouro); }
.pc-itens { display: grid; gap: 4px 28px; margin: 24px 0 18px; }
@media (min-width: 560px) { .pc-itens { grid-template-columns: 1fr 1fr; } }
.pc-itens li { position: relative; padding: 8px 0 8px 28px; border-bottom: 1px solid rgb(246 232 211 / .13); line-height: 1.3; }
.pc-itens li::before { content: ""; position: absolute; left: 3px; top: 13px; width: 11px; height: 11px; border-radius: 50%; background: rgb(246 232 211 / .2); transition: background-color .5s, box-shadow .5s; }
.pc-itens li.on::before, html:not(.js) .pc-itens li::before { background: var(--ouro); box-shadow: 0 0 12px 2px rgb(242 206 139 / .85); }
.pc-brinde { margin-bottom: 22px; font: 400 clamp(25px, 2.4vw, 31px)/1.2 var(--scr); color: var(--ouro); }
.pc-nota { margin-top: 14px; font-size: 14px; color: #C3A99A; }

/* como funciona */
.cf { padding: var(--sec) 0; background: var(--marfim) var(--gesso); }
.cf-fio { position: relative; height: 1px; margin: 0 var(--m); background: #D9C7AC; display: none; }
.cf-fio i { position: absolute; inset: 0; background: var(--ambar); transform: scaleX(var(--fio, 0)); transform-origin: left; box-shadow: 0 0 8px var(--ambar); }
.cf-lista { display: grid; gap: 30px; padding-inline: var(--m); }
.cf-p { position: relative; padding-left: 44px; }
.cf-lamp { position: absolute; left: 0; top: 4px; width: 22px; height: 22px; border-radius: 50%; background: #E2D3BA; transition: background-color .5s, box-shadow .5s; }
.cf-lamp::before { content: ""; position: absolute; left: 50%; top: -9px; width: 2px; height: 9px; margin-left: -1px; background: #A9835A; }
.cf-p.on .cf-lamp, html:not(.js) .cf-lamp { background: var(--ambar); box-shadow: 0 0 22px 7px rgb(233 169 75 / .6); }
.cf-p p { margin-top: 8px; color: var(--suave); font-size: 17px; line-height: 1.5; max-width: 34ch; }
@media (min-width: 900px) { .cf-fio { display: block; } .cf-lista { grid-template-columns: repeat(4, 1fr); gap: 32px; } .cf-p { padding: 28px 0 0; } .cf-lamp { left: 0; top: -2px; } .cf-lamp::before { top: -9px; } }
@media (max-width: 899px) { .cf-lista::before { content: ""; position: absolute; } }

/* avaliações */
.av { display: grid; gap: clamp(32px, 5vw, 72px); padding: 0 var(--m) var(--sec); background: var(--marfim) var(--gesso); }
@media (min-width: 960px) { .av { grid-template-columns: 300px 1fr; align-items: start; } }
.av-nota { padding: 28px; background: var(--vinho); color: var(--champ); text-align: center; border-radius: 150px 150px 4px 4px; max-width: 300px; }
.av-num { font: 400 96px/1.1 var(--tit); padding-top: 22px; } .av-est { color: var(--ouro); letter-spacing: .14em; margin-bottom: 8px; }
.av-lista { display: grid; gap: 14px; margin-top: 28px; }
@media (min-width: 760px) { .av-lista { grid-template-columns: repeat(3, 1fr); } }
.av-lista blockquote { padding: 20px 22px; background: #fff; border: 1px solid #E8DAC4; }
.av-lista p { font-size: 18px; line-height: 1.42; } .av-lista cite { display: block; margin-top: 12px; font-style: normal; font-size: 15px; color: var(--suave); }
.av-link { display: inline-block; margin-top: 16px; padding: 10px 0; color: var(--vinho-txt); text-underline-offset: 5px; }

/* convite */
.cv { padding: var(--sec) 0; background: var(--noite); color: var(--claro); overflow: hidden; }
.cv h2 { color: var(--champ); }
.cv-fogos { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 3; pointer-events: none; }
.cv-grade { display: grid; gap: clamp(32px, 5vw, 64px); padding-inline: var(--m); align-items: center; }
@media (min-width: 960px) { .cv-grade { grid-template-columns: 1.1fr .9fr; } }
.cv-form { min-width: 0; padding: clamp(20px, 3vw, 36px); background: rgb(42 21 16 / .82); border: 1px solid rgb(242 206 139 / .24); }
.cv-op { border: 0; margin: 0 0 20px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.cv-op legend { padding: 0; margin-bottom: 10px; color: var(--champ); font-size: 16.5px; }
.cv-op label { cursor: pointer; }
.cv-op input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.cv-op span { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border: 1px solid rgb(246 232 211 / .32); color: var(--claro); font-size: 16px; transition: background-color .25s, color .25s, border-color .25s; }
.cv-op input:checked + span { background: var(--ouro); border-color: var(--ouro); color: #2A1208; }
.cv-op input:focus-visible + span { outline: 3px solid var(--ambar); outline-offset: 3px; }
.cv-campos { display: grid; gap: 14px; margin-bottom: 20px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); }
.cv-largo { grid-column: 1 / -1; }
.cv-c { min-width: 0; }
.cv-c label { display: block; margin-bottom: 6px; color: var(--champ); font-size: 16px; }
.cv-c input, .cv-c select { width: 100%; min-height: 50px; padding: 0 14px; border: 1px solid rgb(246 232 211 / .32); border-radius: 2px; background: rgb(12 6 5 / .55); color: var(--marfim); font: 400 17px var(--txt); color-scheme: dark; }
.cv-c input, .cv-c select { -webkit-appearance: none; appearance: none; line-height: normal; }
.cv-c input[type="date"] { display: block; min-width: 0; text-align: left; }
.cv-c input[type="date"]::-webkit-date-and-time-value { text-align: left; min-height: 1.4em; }
.cv-c select { padding-right: 40px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%23F2CE8B' stroke-width='1.6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; }
.cv-c input::placeholder { color: #A8927C; }
.cv-c input:focus, .cv-c select:focus { outline: 2px solid var(--ambar); outline-offset: 1px; }
.cv-c select option { background: #2A1510; color: #FBF6EE; }
.cv-erro { color: #FFB8A8; min-height: 0; margin-bottom: 8px; font-size: 16px; } .cv-erro:empty { margin: 0; }
.cv-enviar { width: 100%; }
.cv-priv { margin-top: 12px; font-size: 14.5px; color: #B8A48D; text-align: center; }
.cv-papel { position: relative; padding: 10px; background: var(--marfim) var(--gesso); color: var(--tinta); box-shadow: 0 40px 70px -40px #000; rotate: -1.4deg; max-width: 520px; width: 100%; margin-inline: auto; }
.cv-moldura { padding: clamp(24px, 3.4vw, 42px) clamp(18px, 3vw, 36px); border: 1px solid #B99468; outline: 1px solid #B99468; outline-offset: -6px; text-align: center; }
.cv-p1 { font-size: 15px; letter-spacing: .14em; text-transform: uppercase; color: var(--suave); }
.cv-festa { font: 400 clamp(46px, 5vw, 68px)/1.1 var(--scr); color: var(--vinho-txt); margin-top: 10px; overflow-wrap: anywhere; }
.cv-de { font: 400 clamp(22px, 2.2vw, 28px)/1.2 var(--tit); overflow-wrap: anywhere; }
.cv-moldura hr { border: 0; height: 1px; margin: 20px auto; background: #CDB392; width: 60%; }
.cv-linha { display: flex; justify-content: space-between; gap: 16px; padding: 3px 0; font-size: 16px; text-align: right; } .cv-linha span { color: var(--suave); text-align: left; } .cv-linha b { font-weight: 500; }
.cv-lugar { font: 400 18px/1.3 var(--tit); }

/* perguntas */
.pg { padding: var(--sec) 0; background: var(--marfim) var(--gesso); }
.pg-lista { max-width: 900px; padding-inline: var(--m); box-sizing: content-box; }
.pg-lista details { border-bottom: 1px solid #D9C7AC; }
.pg-lista summary { position: relative; display: block; padding: 20px 44px 20px 0; font: 400 clamp(23px, 2.2vw, 28px)/1.2 var(--tit); cursor: pointer; list-style: none; }
.pg-lista summary::-webkit-details-marker { display: none; }
.pg-lista summary::after { content: ""; position: absolute; right: 8px; top: 50%; width: 14px; height: 14px; margin-top: -9px; border-right: 1.5px solid var(--vinho-txt); border-bottom: 1.5px solid var(--vinho-txt); transform: rotate(45deg); transition: transform .3s; }
.pg-lista details[open] summary::after { transform: rotate(225deg); margin-top: -2px; }
.pg-lista details p { padding: 0 44px 22px 0; color: var(--suave); max-width: 66ch; }

/* local e rodapé */
.lc { display: grid; gap: clamp(28px, 5vw, 64px); align-items: center; padding: var(--sec) var(--m); background: var(--vinho2); color: var(--claro); }
@media (min-width: 900px) { .lc { grid-template-columns: 1fr 1fr; } }
.lc-foto img { width: 100%; aspect-ratio: 5 / 4; object-fit: cover; }
.lc h2 { color: var(--champ); margin-bottom: 18px; }
.lc address { font-style: normal; font-size: 20px; line-height: 1.4; margin-bottom: 8px; }
.lc-bts { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
.rd { display: flex; flex-wrap: wrap; gap: 24px 56px; align-items: center; padding: 44px var(--m) max(44px, env(safe-area-inset-bottom)); background: var(--noite); color: var(--claro); font-size: 16px; }
.rd img { width: 130px; height: auto; }
.rd a { color: var(--ouro); text-underline-offset: 4px; padding: 11px 0; margin-block: -5px; display: inline-block; }
.rd-peq a { padding-inline: 4px; margin-inline: -4px; }
.rd-peq { font-size: 14px; color: #B8A48D; margin-left: auto; text-align: right; }
@media (max-width: 760px) { .rd-peq { margin-left: 0; text-align: left; } .rd { padding-bottom: 104px; } }

/* barra fixa do celular */
.br { display: none; }
@media (max-width: 760px) {
  .br { position: fixed; inset: auto 0 0; z-index: 60; display: grid; grid-template-columns: repeat(4, 1fr); padding: 6px 4px max(6px, env(safe-area-inset-bottom)); background: rgb(28 14 11 / .96); border-top: 1px solid rgb(242 206 139 / .28); }
  .br a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-height: 52px; color: var(--champ); text-decoration: none; font-size: 12.5px; }
  .br svg { width: 22px; height: 22px; }
  .br a:first-child { color: var(--ouro); }
}
@media (max-height: 480px) and (orientation: landscape) { .br { display: none; } .rd { padding-bottom: 28px; } }
/* em tela de toque: a mistura de luz pesa e não muda o resultado sobre o fundo escuro */
@media (hover: none) { .tp-luz { mix-blend-mode: normal; } }