/* ===== Site de casamento Carlos & Jhennifer ===== */

@font-face { font-family: 'HighSpirited'; src: url('../fonts/HighSpirited.woff') format('woff'), url('../fonts/HighSpirited.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'Castoro-Regular'; src: url('../fonts/Castoro-Regular.woff') format('woff'), url('../fonts/Castoro-Regular.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'Montserrat'; font-weight: 400; src: url('../fonts/Montserrat-Regular.woff') format('woff'), url('../fonts/Montserrat-Regular.ttf') format('truetype'); font-display: swap; }

:root {
  --coupleName: #333333; --menu: #333333; --content: #333333; --title-text-color: #333333;
  --main: #bfa9a9; --body: #f5f4f3; --formBorder: #d0cfc9; --lightBackground: #f5f4f3;
  --darkBackground: #a29090; --card: #eae5e4;
  --base-font-family: 'Castoro-Regular'; --menu-font-family: 'Montserrat';
  --title-font-family: 'HighSpirited'; --name-font-family: 'HighSpirited';
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 100%; }
html, body { min-height: 100%; overflow-x: hidden; font-weight: 300; }
body { -webkit-font-smoothing: antialiased; font-family: var(--base-font-family), sans-serif; background: var(--body); color: #222; line-height: 1; }
body.no-scroll { height: 100%; overflow: hidden; }
ul, ol { list-style: none; }
a { color: inherit; text-decoration: none; }
button { border: 0; background: none; cursor: pointer; font: inherit; color: #222; }
input, textarea { font: inherit; color: #222; }
img { max-width: 100%; }
[hidden] { display: none !important; }
main.inner { margin-top: 100px; }

/* ===== Tela de carregamento (corações) ===== */
.loading-screen { position: fixed; inset: 0; background: var(--body); display: flex; align-items: center; justify-content: center; z-index: 1000; opacity: 1; transition: opacity 1s ease-out .3s, z-index 1.3s step-end; }
.loading-screen.hide { opacity: 0; z-index: -1; }
.loading-screen__hearts { position: relative; width: 4rem; height: 4rem; }
.loading-screen__heart { position: absolute; }
.loading-screen__heart svg { fill: var(--main); opacity: 0; animation: heartUp 1.4s ease-in infinite; }
.loading-screen__heart:nth-child(2) svg { position: absolute; left: 1rem; animation-delay: .3s; }
.loading-screen__heart:nth-child(3) svg { position: absolute; left: .5rem; animation-delay: .6s; }
@keyframes heartUp {
  0% { opacity: 0; transform: translate3d(0,0,0) rotate(10deg); }
  50%, 65% { opacity: 1; }
  90% { opacity: 0; transform: translate3d(0,-117px,0) scale(1.2) rotate(-10deg); }
  100% { opacity: 0; }
}

/* ===== Cabeçalho ===== */
.header { width: 100%; position: fixed; top: 0; left: 0; padding: 0 15px; min-height: 99px; z-index: 100; display: flex; align-items: center; justify-content: center; background: var(--body); border-bottom: 1px solid rgba(51,51,51,.2); transition: background .5s; }
.header--hero { background: rgba(0,0,0,0); border-bottom-color: rgba(51,51,51,0); }
.header__inner { width: 100%; max-width: 1110px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; }
.header__couple-name { font-family: var(--name-font-family); font-size: 46px; font-weight: 300; color: var(--coupleName); text-align: center; line-height: normal; }
.menu__icon { display: none; height: 24px; color: #333; align-items: center; }
.menu__icon span, .menu__icon span::before, .menu__icon span::after { display: block; width: 24px; height: 1px; background: currentColor; transition: transform .3s ease-in-out; }
.menu__icon span { position: relative; }
.menu__icon span::before, .menu__icon span::after { content: ""; position: absolute; }
.menu__icon span::before { top: -10px; }
.menu__icon span::after { bottom: -10px; }
.menu-open .menu__icon span { transform: rotate(45deg); }
.menu-open .menu__icon span::before { transform: translateY(10px) rotate(90deg); }
.menu-open .menu__icon span::after { opacity: 0; }

.menu__list { display: flex; position: relative; }
.menu__item:not(:last-child) { margin-right: 20px; }
.dropdown { display: inline-block; position: relative; width: 100%; }
.dropdown__title { font-family: var(--menu-font-family); font-size: 12px; text-transform: uppercase; letter-spacing: 1px; color: #333; cursor: pointer; display: flex; align-items: center; min-height: 48px; user-select: none; }
.dropdown__arrow { margin-left: 6px; transition: .3s; transform: rotate(180deg); }
.dropdown__arrow path { fill: var(--main); }
.dropdown.open .dropdown__arrow { transform: rotate(0deg); }
.dropdown__list { position: absolute; display: none; top: 73px; right: 32px; width: 254px; max-height: calc(100vh - 100px); border: 1px solid rgba(51,51,51,.2); overflow: hidden auto; background: var(--body); animation: menuIn .3s ease forwards; }
.dropdown.open .dropdown__list { display: block; }
.dropdown__list a { font-family: var(--base-font-family); font-size: 12px; color: #333; padding: 8px 15px; min-height: 48px; display: flex; align-items: center; background: var(--body); line-height: normal; }
.dropdown__list a:hover { filter: brightness(97%); }
.dropdown__list a.active { font-weight: bold; }
@keyframes menuIn { from { opacity: 0; transform: translate3d(0,30px,0); } to { opacity: 1; transform: none; } }

/* ===== Hero ===== */
.hero { background: var(--lightBackground); position: relative; height: 59.0625vw; max-height: 756px; display: flex; flex-direction: column; align-items: center; justify-content: center; margin-top: 100px; }
.hero::before, .hero::after { content: ""; position: absolute; bottom: 0; pointer-events: none; z-index: 5; }
.hero::before { left: 0; height: 100%; width: 43.5%; background: url('../img/flores-esquerda.png') left bottom / contain no-repeat; }
.hero::after { right: 0; height: 77.2%; width: 37.5%; background: url('../img/flores-direita.png') right bottom / contain no-repeat; }
.hero__couple-name { font-family: var(--name-font-family); color: var(--coupleName); position: relative; font-size: min(128px, 10vw); font-weight: normal; line-height: .69; text-align: center; z-index: 10; }
.hero__date { margin-top: 48px; font-family: var(--base-font-family); font-size: 13px; font-weight: normal; line-height: 2.15; letter-spacing: 4px; text-align: center; color: var(--content); display: flex; align-items: center; z-index: 10; }
.hero__date span { margin: 0 16px; }
.hero__date svg { color: var(--main); }

/* ===== Contagem regressiva ===== */
.countdown { position: relative; padding: 80px 0; background: var(--body); z-index: 1; }
.countdown__title { font-family: var(--base-font-family); font-size: 13px; font-weight: normal; line-height: 2; margin-bottom: 40px; text-transform: uppercase; color: #333; text-align: center; }
.countdown__flipper { text-align: center; perspective: 800px; margin: 0 auto; display: flex; align-items: center; justify-content: center; flex-wrap: wrap; }
.flipper { display: flex; flex-direction: column; align-items: center; }
.flipper__card { min-width: 84px; height: 56px; position: relative; margin: 0 12px; }
.flipper__half { position: absolute; left: 0; width: 100%; height: 50%; background: var(--card); overflow: hidden; }
.flipper__half--top { top: 0; border-radius: 2px 2px 0 0; transform-origin: center bottom; }
.flipper__half--bottom { bottom: 0; border-radius: 0 0 2px 2px; transform-origin: center top; }
.flipper__half--bottom::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 1px; background: var(--body); z-index: 2; }
.flipper__num { position: absolute; left: 0; width: 100%; height: 56px; display: flex; justify-content: center; align-items: center; padding: 0 24px; font-family: var(--title-font-family); font-size: 46px; color: #333; line-height: normal; }
.flipper__half--top .flipper__num { top: 0; }
.flipper__half--bottom .flipper__num { bottom: 0; }
.flipper__leaf { z-index: 3; backface-visibility: hidden; }
.flipper__leaf.flip-top { animation: flipTop .3s cubic-bezier(.37,.01,.94,.35) forwards; }
.flipper__leaf.flip-bottom { transform: rotateX(90deg); animation: flipBottom .3s cubic-bezier(.15,.45,.28,1) .3s forwards; }
@keyframes flipTop { from { transform: rotateX(0); } to { transform: rotateX(-90deg); } }
@keyframes flipBottom { from { transform: rotateX(90deg); } to { transform: rotateX(0); } }
.flipper__label { font-family: var(--base-font-family); font-size: 10px; line-height: 2; color: var(--content); text-transform: capitalize; margin-top: 4px; }

/* ===== Títulos de página ===== */
.page-title { width: 100%; display: flex; flex-direction: column; align-items: center; }
.spacer { width: 100%; height: 40px; }
.spacer--medium { height: 80px; }
.title { width: 100%; padding: 20px 15px; }
.title h2, .title h1 { font-family: var(--title-font-family); font-size: 46px; font-weight: normal; line-height: 46px; text-align: center; color: var(--title-text-color); }
.subtitle { width: 100%; min-height: 70px; padding: 20px 15px; }
.subtitle h2 { font-family: var(--base-font-family); font-size: 13px; font-weight: normal; letter-spacing: 2px; line-height: 28px; text-align: center; color: #333; text-transform: uppercase; max-width: 1110px; margin: 0 auto; }
.decorative-divider { width: 100%; padding: 40px 0; display: flex; justify-content: center; align-items: center; }
.decorative-divider svg { display: block; }

/* ===== Blocos de texto / foto ===== */
.text-section { width: 100%; background: var(--body); }
.text-wrapper { max-width: 1110px; margin: 0 auto; padding: 40px 15px; font-family: var(--base-font-family); font-size: 14px; font-weight: normal; line-height: 2; color: var(--content); text-align: left; overflow-wrap: break-word; }
.text-wrapper p { padding: 10px 0; }
.text-wrapper a { color: var(--main); font-weight: 500; }
.text-wrapper a:hover { text-decoration: underline; }
.text-wrapper .lucida { font-family: 'Lucida Sans Unicode', 'Lucida Grande', sans-serif; }
.photo { padding: 40px 15px; width: 100%; display: flex; justify-content: center; }
.photo__inner { max-width: 1110px; width: 100%; }
.photo__img { padding-top: 56.25%; background-position: center; background-repeat: no-repeat; background-size: cover; }

/* ===== Álbum (mosaico) ===== */
.album { background: var(--body); padding: 40px 0; }
.mosaic { margin: 0 auto; max-width: 1110px; position: relative; }
.mosaic__item { position: absolute; width: 25%; padding: 9.2px; cursor: pointer; }
.mosaic__item img { display: block; width: 100%; height: auto; }

/* ===== Carrossel (Nossa história) ===== */
.carousel { position: relative; max-width: 1110px; margin: 0 auto; height: min(600px, 56vw); overflow: hidden; }
.carousel__slide { position: absolute; inset: 0; background: center / contain no-repeat; opacity: 0; transition: opacity .8s ease; }
.carousel__slide.active { opacity: 1; }
.carousel__arrow { position: absolute; top: 50%; transform: translateY(-50%); width: 40px; height: 40px; border-radius: 50%; background: rgba(0,0,0,.25); color: #fff; font-size: 22px; line-height: 40px; text-align: center; z-index: 5; opacity: 0; transition: opacity .3s; }
.carousel:hover .carousel__arrow { opacity: 1; }
.carousel__arrow--prev { left: 20px; }
.carousel__arrow--next { right: 20px; }

/* ===== Lightbox ===== */
.lightbox { position: fixed; inset: 0; background: rgba(0,0,0,.9); z-index: 500; display: none; align-items: center; justify-content: center; }
.lightbox.open { display: flex; }
.lightbox img { max-width: 92vw; max-height: 88vh; }
.lightbox button { position: absolute; color: #fff; font-size: 34px; padding: 16px; }
.lightbox__close { top: 8px; right: 12px; }
.lightbox__prev { left: 8px; top: 50%; transform: translateY(-50%); }
.lightbox__next { right: 8px; top: 50%; transform: translateY(-50%); }

/* ===== Botões ===== */
.button { font-family: var(--base-font-family); font-weight: normal; line-height: 2; text-align: center; font-size: 14px; text-transform: uppercase; padding: 12px 36px; width: fit-content; transition: .3s ease-in-out; border-radius: 0; }
.button--primary { background: var(--main); color: #fff; }
.button--primary:hover:not(:disabled), .button--primary:focus { background: rgba(191,169,169,.8); color: #fff; }
.button--secondary { background: transparent; color: #333; border: 1px solid var(--main); }
.button--secondary:hover:not(:disabled) { background: var(--main); color: #fff; border-color: transparent; }
.button:disabled { opacity: .3; cursor: not-allowed; }

/* ===== Rodapé ===== */
.whatsapp { display: none; }
.whatsapp__button { display: flex; gap: 16px; align-items: center; justify-content: center; margin: 0 15px; border: 1px solid var(--main); padding: 14px 18px; width: calc(100% - 30px); font-family: var(--base-font-family); font-size: 12px; line-height: 2; color: #333; }
.whatsapp__button svg { width: 13.333px; height: 13.333px; margin-bottom: 1px; }
.whatsapp__button svg path { fill: var(--main); }
.back-to-top { padding: 40px; cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.back-to-top svg path { fill: var(--main); }
.back-to-top p { font-family: var(--base-font-family); color: #333; font-size: 11px; text-transform: uppercase; margin-top: 12px; line-height: 18px; letter-spacing: 2px; }
.footer { padding: 40px 15px; border-top: 1px solid rgba(51,51,51,.2); }
.footer__inner { max-width: 1110px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; position: relative; }
.footer__social { display: flex; min-width: 80px; }
.footer__social li:not(:last-child) { margin-right: 8px; }
.social__icon { width: 42px; height: 42px; display: block; border: 1px solid var(--main); transition: .3s ease-in-out; background: transparent; }
.social__icon svg { display: block; }
.social__icon svg rect { fill: transparent; }
.social__icon svg path { fill: var(--main); }
.social__icon:hover, .social__icon:focus { background: var(--main); }
.social__icon:hover svg path, .social__icon:focus svg path { fill: var(--body); }
.footer__text { font-family: var(--base-font-family); font-size: 14px; line-height: 2; text-align: center; color: var(--content); position: absolute; left: 50%; transform: translateX(-50%); }

/* ===== Formulários ===== */
.field { position: relative; margin-bottom: 16px; }
.field input { font-family: var(--base-font-family); font-size: 12px; line-height: 2; color: #333; width: 100%; height: 56px; border: 1px solid var(--formBorder); background: transparent; padding: 22px 16px 0; transition: .1s ease-in-out; }
.field input:focus { outline: none; border-color: var(--main); }
.field label { font-family: var(--base-font-family); font-size: 12px; line-height: 2; color: var(--content); position: absolute; top: 28px; left: 16px; transform: translateY(-50%); transition: .1s ease-in-out; letter-spacing: 1px; pointer-events: none; }
.field input:focus ~ label, .field input:not(:placeholder-shown) ~ label { top: 6px; font-size: 10px; text-transform: uppercase; transform: none; }
.textarea-box { border: 1px solid var(--formBorder); transition: .1s ease-in-out; }
.textarea-box:focus-within { border-color: var(--main); }
.textarea-box__head { display: flex; align-items: center; justify-content: space-between; padding: 8px 8px 8px 16px; border-bottom: 1px solid var(--formBorder); font-family: var(--base-font-family); font-size: 12px; line-height: 2; color: #333; min-height: 49px; }
.textarea-box textarea { display: block; font-family: var(--base-font-family); font-size: 12px; line-height: 2; color: #333; resize: none; border: 0; background: transparent; width: 100%; height: 210px; padding: 8px 16px 6px; }
.textarea-box textarea:focus { outline: none; }
.hint { font-family: var(--base-font-family); font-size: 10px; line-height: 2; margin-top: 8px; color: var(--content); }
.form-feedback { font-family: var(--base-font-family); font-size: 12px; line-height: 2; text-align: center; color: var(--content); margin-top: 24px; }

/* ===== Mensagens ===== */
.message-form { width: 100%; display: flex; flex-direction: column; align-items: center; padding: 80px 0; background: var(--body); }
.message-form form { width: 100%; max-width: 350px; }
.message-form form > button { margin: 40px auto 0; display: block; }
.messages { padding: 80px 85px; }
.messages__title { font-family: var(--title-font-family); font-size: 46px; line-height: normal; color: var(--title-text-color); text-align: center; margin-bottom: 10px; }
.messages__container { max-width: 730px; width: 100%; padding-top: 40px; margin: auto; }
.message-card { margin-bottom: 40px; padding-bottom: 40px; border-bottom: 1px solid rgba(208,207,201,.6); font-family: var(--base-font-family); color: var(--content); }
.message-card__text { font-size: 14px; line-height: 2; white-space: pre-wrap; }
.message-card__author { margin-top: 16px; font-size: 12px; line-height: 2; font-weight: bold; }
.message-card__date { font-size: 10px; line-height: 2; opacity: .7; }

/* ===== Cerimônia ===== */
.place { background: var(--body); }
.place__container { max-width: 1110px; margin: 0 auto; padding: 40px; }
.place__top { display: flex; align-items: center; }
.place__image { width: 270px; margin-right: 40px; margin-bottom: auto; overflow: hidden; }
.place__image .photo__img { padding-top: 100%; }
.place__info { flex: 1; display: flex; flex-direction: column; overflow: hidden; }
.place__info h3 { font-family: var(--title-font-family); font-size: 46px; font-weight: normal; line-height: normal; color: var(--title-text-color); margin-bottom: 20px; }
.place__info p { font-family: var(--base-font-family); font-size: 14px; line-height: 2; color: var(--content); }
.place__map { position: relative; display: block; max-width: 1110px; width: 100%; }
.place__map-overlay { position: absolute; inset: 0; background: rgba(0,0,0,.4); font-family: var(--base-font-family); font-size: 14px; line-height: 2; color: #fff; display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity .3s ease-in-out; z-index: 2; }
.place__map:hover .place__map-overlay { opacity: 1; }
.place__route-title { font-family: var(--base-font-family); font-size: 14px; font-weight: normal; line-height: 2; text-align: center; color: var(--content); margin-bottom: 24px; }
.place__route { display: flex; flex-direction: column; align-items: center; }
.place__route .field { width: 350px; max-width: 100%; margin-bottom: 24px; }

.forecast { padding: 40px 15px; max-width: 722px; margin: 0 auto; }
.forecast__list { margin-top: 40px; padding: 40px; display: flex; justify-content: space-between; border: 1px solid var(--formBorder); background: var(--lightBackground); min-height: 164px; font-family: var(--base-font-family); }
.forecast__list i { color: #607d8b; }
.forecast__list i.hot { color: #ffc107; }
.forecast__list i.cold { color: #64b5f6; }
.forecast__today { display: flex; flex-direction: column; }
.forecast__day { display: block; text-align: center; font-size: 10px; color: var(--darkBackground); line-height: 1.8; min-width: max-content; }
.forecast__now { display: flex; margin-left: 14px; }
.forecast__now i { font-size: 30px; line-height: normal; }
.forecast__temp { font-family: var(--title-font-family); color: var(--content); font-size: 32px; padding-left: 8px; margin-top: 8px; }
.forecast__temp::after { content: "C"; font-family: var(--base-font-family); font-size: 14px; position: relative; top: -2px; vertical-align: super; }
.forecast__minmax { font-size: 10px; color: var(--content); text-align: center; margin-top: 4px; line-height: 1.8; }
.forecast__sep { border-left: 1px solid var(--formBorder); }
.forecast__item { display: flex; flex-direction: column; align-items: center; justify-content: space-between; gap: 14px; }
.forecast__item i { font-size: 20px; width: 24px; text-align: center; }
.forecast__item .forecast__minmax { margin-top: 2px; }

.video-widget { padding: 40px 15px; background: var(--body); }
.video { width: 100%; max-width: 1110px; margin: 0 auto; }
.video__frame { width: 100%; padding-top: 56.25%; background: var(--lightBackground); position: relative; overflow: hidden; }
.video__player { position: absolute; inset: 0; background: center / cover no-repeat; }
.video__player iframe { width: 100%; height: 100%; border: 0; }
.video__thumb { width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; background-image: linear-gradient(transparent, rgba(0,0,0,.5)); cursor: pointer; }
.video__thumb svg { width: 10%; max-width: 77px; }

/* ===== Loja / presentes ===== */
.store { width: 100%; max-width: 1280px; padding: 0 15px; margin: auto; display: flex; flex-direction: column; align-items: center; }
.store__filters-box { width: 100%; max-width: 1110px; padding: 40px 30px; display: flex; justify-content: center; align-items: center; background: var(--body); }
.store__filters { padding: 0 15px; width: 100%; max-width: 920px; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; }
.store__filters p { font-family: var(--base-font-family); font-size: 14px; line-height: 2; text-align: center; color: var(--content); min-width: fit-content; font-weight: bold; }
.store__filters > div { flex: 1; margin-left: 24px; }
.store__filters > div > button { width: 100%; }
.store__products { display: grid; gap: 30px; grid-template-columns: repeat(auto-fit, 255px); justify-content: center; width: 100%; max-width: 1110px; }
.product { position: relative; height: 515px; background: var(--body); padding: 40px 19px; display: flex; flex-direction: column; justify-content: space-between; align-items: center; }
.product__photo { width: 100%; max-width: 217px; margin-bottom: 24px; }
.product__photo .photo__img { padding-top: 100%; }
.product__info { width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: space-between; align-items: center; flex: 1; }
.product__name { font-family: var(--base-font-family); font-size: 12px; line-height: 2; text-align: center; color: var(--content); width: 100%; overflow-wrap: break-word; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.product__price { font-family: var(--base-font-family); font-size: 12px; line-height: 2; text-align: center; color: var(--content); font-weight: bold; }
.store__more { margin: 40px auto 0; }

/* ===== Modal ===== */
.modal { position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 400; display: none; align-items: center; justify-content: center; padding: 15px; }
.modal.open { display: flex; }
.modal__box { background: var(--body); max-width: 440px; width: 100%; padding: 40px 30px; text-align: center; position: relative; font-family: var(--base-font-family); color: var(--content); animation: menuIn .3s ease forwards; }
.modal__close { position: absolute; top: 10px; right: 14px; font-size: 26px; color: #333; }
.modal__img { width: 160px; height: 160px; margin: 0 auto 20px; background: center / cover no-repeat; }
.modal__title { font-family: var(--title-font-family); font-size: 38px; font-weight: normal; line-height: 1.1; margin-bottom: 12px; }
.modal__text { font-size: 13px; line-height: 2; }
.modal__price { font-size: 14px; font-weight: bold; line-height: 2; margin: 6px 0 18px; }
.modal__box { max-height: calc(100vh - 30px); overflow-y: auto; }
.modal__buttons { display: flex; flex-direction: column; gap: 12px; align-items: stretch; }
.modal__buttons .button { width: 100%; }
.modal__valor { text-align: left; margin-bottom: 20px; }
.modal__erro { margin-top: 16px; font-size: 12px; line-height: 1.8; color: #ef5350; }
.modal__qr { width: 220px; max-width: 100%; margin: 0 auto 16px; background: #fff; }
.modal__qr svg { display: block; width: 100%; height: auto; }
.modal__code { width: 100%; margin: 12px 0 16px; padding: 10px; font-family: monospace; font-size: 11px; line-height: 1.5; border: 1px solid var(--formBorder); background: #fff; color: #333; resize: none; word-break: break-all; }
.modal__copy { width: 100%; }
.modal__back { margin-top: 16px; font-family: var(--base-font-family); font-size: 12px; color: #333; text-decoration: underline; }

/* ===== Confirmação de presença ===== */
.rsvp-title { font-family: var(--title-font-family); font-size: 46px; font-weight: normal; line-height: normal; text-align: center; color: var(--title-text-color); width: 100%; padding: 0 0 40px 15px; }
.rsvp { width: 100%; padding: 80px 15px; display: flex; flex-direction: column; align-items: center; background: var(--body); }
.rsvp form { width: 100%; max-width: 350px; }
.rsvp form > button { display: block; margin: 40px auto 0; }
.rsvp__step { width: 100%; display: flex; flex-direction: column; align-items: center; animation: menuIn .5s ease forwards; }
.rsvp__question { font-family: var(--base-font-family); font-size: 14px; line-height: 2; text-align: center; color: var(--content); margin-bottom: 24px; }
.rsvp__buttons { display: flex; gap: 16px; flex-wrap: wrap; justify-content: center; }
.rsvp__info { font-family: var(--base-font-family); font-size: 13px; line-height: 2; text-align: center; color: var(--content); margin: 8px 0 20px; }
.rsvp__resultados { width: 100%; max-width: 350px; margin: 32px auto 0; display: flex; flex-direction: column; gap: 10px; }
.rsvp__opcao { width: 100%; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 14px 16px; border: 1px solid var(--formBorder); background: #fff; text-align: left; font-family: var(--base-font-family); font-size: 14px; color: #333; transition: border-color .2s; }
.rsvp__opcao:hover, .rsvp__opcao:focus { border-color: var(--main); outline: none; }
.rsvp__opcao small { font-size: 11px; color: var(--darkBackground); }
.rsvp form .rsvp__question { margin-bottom: 24px; }
.rsvp__label { display: block; font-family: var(--base-font-family); font-size: 12px; line-height: 2; color: var(--content); margin-bottom: 6px; }
.field select { width: 100%; height: 48px; border: 1px solid var(--formBorder); background: transparent; padding: 0 12px; font-family: var(--base-font-family); font-size: 14px; color: #333; }
.field select:focus { outline: none; border-color: var(--main); }

/* ===== Mobile ===== */
@media (max-width: 768px) {
  .header { min-height: 64px; }
  .header__couple-name { font-size: 34px; font-weight: normal; }
  .menu__icon { display: flex; }
  .menu__list { display: none; flex-direction: column; position: absolute; top: 64px; left: 0; width: 100%; height: calc(100vh - 63px); overflow-y: auto; padding: 8px 0 20px; background: var(--body); animation: menuIn .3s ease forwards; }
  .menu-open .menu__list { display: flex; }
  .menu-open.header--hero { background: var(--body); }
  .menu__item:not(:last-child) { margin-right: 0; }
  .dropdown__title { padding: 15px; }
  .dropdown__arrow { transform: rotate(0deg); }
  .dropdown__list { display: block; position: static; border: none; width: 100%; max-height: none; overflow: visible; animation: none; }
  .dropdown__list a { padding-left: 24px; font-size: 12px; letter-spacing: 1px; }

  main.inner { margin-top: 64px; }
  .hero { height: 70.625vw; margin-top: 64px; }
  .hero::before { width: 45.3%; height: 86.7%; }
  .hero::after { width: 35%; height: 60.2%; }
  .hero__couple-name { font-size: 52px; line-height: .92; }
  .hero__date { display: none; }

  .countdown { padding: 40px 0; }
  .countdown__title { font-size: 12px; padding: 0 40px; }
  .flipper__card { width: 100px; height: 53px; }
  .flipper__num { height: 53px; font-size: 34px; }
  .flipper__half--bottom::before { display: none; }

  .title h2, .title h1 { font-size: 34px; line-height: 34px; }
  .subtitle { min-height: 64px; }
  .subtitle h2 { font-size: 12px; letter-spacing: 1px; line-height: 20px; }
  .text-wrapper { font-size: 12px; }

  .mosaic { padding: 0 15px; }
  .mosaic__item { width: 42%; }
  .carousel { height: calc(100vw - 30px); margin: 0 15px; }
  .carousel__arrow { opacity: 1; }

  .button { font-size: 14px; width: 100%; }
  .whatsapp { display: block; }
  .footer__inner { flex-direction: column; }
  .footer__social { margin-bottom: 40px; }
  .footer__text { font-size: 12px; position: static; transform: none; margin-bottom: 32px; }
  .back-to-top p { font-size: 11px; }

  .messages { padding: 80px 15px; }
  .messages__title { font-size: 34px; }
  .message-form { padding: 80px 15px; }

  .place__container { padding: 40px 15px; }
  .place__top { flex-direction: column; }
  .place__image { width: 100%; margin: 0 0 24px; }
  .place__info h3 { font-size: 34px; text-align: center; }
  .place__info p, .place__route-title { font-size: 12px; text-align: center; }
  .forecast__list { padding: 24px 12px; overflow-x: auto; gap: 14px; }
  .forecast__item:nth-child(n+6) { display: none; }

  .store__filters-box { padding: 40px 0; }
  .store__filters > div { flex-basis: 100%; margin: 16px 0 0; }
  .store__filters p { width: 100%; }
  .rsvp-title { font-size: 34px; padding-left: 0; }
}
@media (max-width: 520px) {
  .countdown__flipper { width: 248px; }
}

/* Loja conectada ao banco */
.store__loading { grid-column: 1 / -1; font-family: var(--base-font-family); font-size: 13px; line-height: 2; text-align: center; color: var(--content); }
.modal__campo { text-align: left; }
.modal__feito { width: 100%; margin-top: 12px; }