/* ───────────────────────────────
   0. VARIÁVEIS / RESET BÁSICO
   ─────────────────────────────── */
:root {
    --hero-height: 80vh;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

body {
    margin: 0;
    padding-bottom: 40px;
    /* espaço p/ rodapé fixo */
    font-family: "Poppins", sans-serif;
    color: #f5f5f5;
    line-height: 1.5;
    background: linear-gradient(135deg, #1f1f1f 0%, #1f1f1f 100%);
}

section {
    border-radius: 15px;
}

/* remova se não quiser radius global */



.rifa {
    display: none;
}

/* link futuro */

/* ───────────────────────────────
      2. HERO
      ─────────────────────────────── */
.hero-home {
    position: relative;
    height: var(--hero-height);
    display: flex;
    align-items: center;
    justify-content: flex-start;
    color: #fff;
    overflow: hidden;
    text-align: center;
    border-radius: 0 0 20px 20px;
    background:
        linear-gradient(rgba(12, 74, 142, .4), rgba(0, 0, 0, .7)),
        url("../assets/images/20221217_180007.jpg") center/cover no-repeat;
}

.hero-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, .4);
}

.hero-content {
    position: relative;
    z-index: 1;
    margin-left: 10em;
    animation: fadeInUp .8s ease;
}

.couple-names {
    font-family: "Great Vibes", cursive;
    font-size: 3.2rem;
    margin: 0 0 .25em;
}

.couple-decor {
    font-size: 1.5rem;
    margin: 0 0 .5em;
}

.countdown {
    display: inline-block;
    padding: .4rem .8rem;
    font-size: 1.3rem;
    background: rgba(0, 0, 0, .35);
    border-radius: 8px;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ───────────────────────────────
      3. CITAÇÕES BÍBLICAS
      ─────────────────────────────── */
.bible-verse {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 0 16px 0px;
}

.bible-verse blockquote {
    margin: 0;
    max-width: 700px;
    font: italic 1.4rem/1.5 "Playfair Display", serif;
    color: #f5f5f5;
    text-shadow: 0 1px 3px rgba(0, 0, 0, .45);
}

.bible-verse footer {
    display: block;
    margin-top: 12px;
    font-size: .9rem;
    color: #d0d0d0;
    padding-bottom: 25px;
}

/* ───────────────────────────────
      4. BOAS-VINDAS
      ─────────────────────────────── */
.welcome-message {
    margin: 0 auto 32px;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 56px 0;
    background: linear-gradient(90deg, rgba(31, 31, 31, .5) 0%, #1f1f1f 5%, #0b1736 50%, #1f1f1f 95%, rgba(31, 31, 31, .5) 100%);
}

.welcome-message h2,
.welcome-message p {
    max-width: 810px;
    color: #f5f5f5;
}

/* ───────────────────────────────
      5. MÁSCARA NAV + SCROLL LOCK
      ─────────────────────────────── */
.menu-overlay {
    position: fixed;
    inset: 0;
    opacity: 0;
    pointer-events: none;
    transition: opacity .35s ease;
    z-index: 900;
}

.menu-overlay.show {
    opacity: 1;
    pointer-events: auto;
}

body.no-scroll {
    overflow: hidden;
    touch-action: none;
}

/* ───────────────────────────────
      6. NOSSA HISTÓRIA (polaroids)
      ─────────────────────────────── */
.polaroid {
    position: relative;
    width: 260px;
    padding: 12px 12px 46px;
    background: #fff;
    border-radius: 6px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, .35);
    transform: rotate(-2deg);
}

.polaroid img {
    width: 100%;
    border-radius: 3px;
    display: block;
}

.polaroid figcaption {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 12px;
    font: .95rem 700/1 "Poppins", sans-serif;
    color: #333;
    text-align: center;
}

.story {
    position: relative;
    padding: 60px 0;
    background:
        radial-gradient(circle at 50% 0%, rgba(255, 255, 255, .05) 0%, transparent 60%) no-repeat,
        linear-gradient(180deg, #0b1736 0%, #061129 100%);
    text-align: center;
    margin-bottom: 60px;
}

.story-title {
    font: 2.1rem "Poppins", sans-serif;
    color: #fdfdfd;
    margin: 0 0 26px;
    text-shadow: 0 1px 4px rgba(0, 0, 0, .6);
}

.step-title {
    font: 1.6rem "Great Vibes", cursive;
    color: #ffd1dc;
    margin: 0 0 12px;
    text-shadow: 0 1px 3px rgba(0, 0, 0, .5);
}

.story-timeline {
    display: flex;
    flex-wrap: wrap;
    gap: 96px;
    justify-content: center;
    max-width: 1600px;
    margin: 0 auto;
    padding: 0;
    list-style: none;
}

.story-timeline li {
    width: 260px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    color: #e9e9e9;
    line-height: 1.45;
    margin: 0;
}

.story-timeline li p {
    margin: 18px 0 0;
}

/* ───────────────────────────────
      7. CRONOGRAMA
      ─────────────────────────────── */
.schedule {
    padding: 96px 16px 46px;
    text-align: center;
    color: #f5f5f5;
    background: linear-gradient(180deg, #061129 0%, #0b1736 80%, #0b1736 100%);
}

.schedule-title {
    margin: 0 0 64px;
    font-size: 2rem;
    text-shadow: 0 1px 4px rgba(0, 0, 0, .5);
}

.schedule-subtitle {
    margin-bottom: 32px;
    font-size: 1.2rem;
    color: #dfe8ff;
    text-shadow: 0 1px 4px rgba(0, 0, 0, .5);
}

.schedule-list {
    margin: 0 auto;
    max-width: 900px;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 64px 56px;
    list-style: none;
}

.schedule-list li {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

.schedule-list .time {
    font: 700 1.8rem/1 "Playfair Display", serif;
    color: #90ee90;
}

.schedule-list .event {
    width: 100%;
    padding: 20px 18px;
    border-radius: 12px;
    background: rgba(255, 255, 255, .07);
    border: 1px solid rgba(255, 255, 255, .15);
    backdrop-filter: blur(3px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, .25);
}

.schedule-list .event i {
    font-size: 1.4rem;
    margin-bottom: 8px;
    color: #ffd1dc;
}

.schedule-list .event p {
    margin: 0;
    line-height: 1.45;
}

.schedule-list .event small {
    font-size: .85rem;
    color: #d0d0d0;
}

/* ───────────────────────────────
      8. LOCAL / MAPA
      ─────────────────────────────── */
.venue {
    padding: 56px 16px 120px;
    text-align: center;
    color: #f5f5f5;
    background: linear-gradient(180deg, #0b1736 0%, #0b1736 80%, #061129 100%);
}

.section-heading {
    font-size: 2rem;
    margin-bottom: 18px;
    text-shadow: 0 1px 4px rgba(0, 0, 0, .55);
}

.venue-name {
    font: 2.2rem "Great Vibes", cursive;
    color: #ffd1dc;
    margin: 0 0 8px;
    text-shadow: 0 1px 4px rgba(0, 0, 0, .6);
}

.venue-address {
    font-size: 1.1rem;
    margin-bottom: 56px;
    line-height: 1.45;
    color: #dfe8ff;
}

.venue-address .cep {
    font-size: .95rem;
    color: #b7c5ff;
}

.map-wrap {
    max-width: 900px;
    margin: 0 auto;
    border-radius: 18px;
    overflow: hidden;
    position: relative;
    box-shadow: 0 10px 32px rgba(0, 0, 0, .45);
}

.map-wrap::before {
    content: '';
    position: absolute;
    inset: 0;
    padding: 2px;
    border-radius: inherit;
    background: linear-gradient(135deg, #384c9f 0%, #5c6df5 50%, #384c9f 100%);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
}

.map-wrap iframe {
    width: 100%;
    aspect-ratio: 16/9;
    border: 0;
    height: 450px;
}

/* ───────────────────────────────
      9. DICAS DE TRAJE
      ─────────────────────────────── */
.dress-code {
    padding: 96px 16px;
    text-align: center;
    background: linear-gradient(180deg, #061129 0%, #0b1736 100%);
}

.dress-code .section-title {
    font-size: 2rem;
    margin: 0 0 6px;
}

.dress-code .section-sub {
    opacity: .85;
    margin: 0 0 48px;
}

.dress-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
    gap: 48px 56px;
    max-width: 1000px;
    margin: 0 auto 64px;
}

.dress-card {
    position: relative;
    padding: 28px 24px 32px;
    border-radius: 16px;
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .18);
    backdrop-filter: blur(8px);
    box-shadow: 0 6px 18px rgba(0, 0, 0, .35);
    transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease;
}

.dress-card:hover {
    transform: translateY(-6px) scale(1.03);
    box-shadow: 0 12px 36px rgba(0, 0, 0, .45);
    border-color: rgba(255, 255, 255, .35);
}

.dress-card.ok {
    background: rgba(40, 120, 70, .10);
}

.dress-card.ok h3 i {
    color: #34c759;
}

.dress-card.avoid {
    background: rgba(120, 40, 40, .10);
}

.dress-card.avoid h3 i {
    color: #ff4c4c;
}

.dress-card h3 {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 1.15rem;
    margin: 0 0 18px;
}

.dress-card ul {
    margin: 0;
    padding-left: 18px;
    text-align: left;
}

.dress-card li {
    margin-bottom: 8px;
}

.palette-title {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 28px;
    font-size: 1.15rem;
}

.color-palette {
    display: flex;
    flex-wrap: wrap;
    gap: 24px 60px;
    justify-content: center;
    margin: 0 auto 48px;
    padding: 0;
    list-style: none;
}

.color-palette li {
    --s: 64px;
    width: var(--s);
    height: var(--s);
    border-radius: 50%;
    background: var(--clr);
    box-shadow: 0 2px 8px rgba(0, 0, 0, .35);
    position: relative;
}

.color-palette li span {
    position: absolute;
    left: 50%;
    bottom: -26px;
    transform: translateX(-50%);
    font-size: .78rem;
    white-space: nowrap;
}

.dress-note {
    max-width: 640px;
    margin: 0 auto;
    font-size: .9rem;
    opacity: .85;
}

/* ───────────────────────────────
      10. FORMULÁRIO DE MENSAGENS
      ─────────────────────────────── */
.guest-message {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 90px 16px 120px;
    background: #061129;
    text-align: center;
    min-height: 680px;
}

.guest-message h2 {
    font-size: 2rem;
    margin: 0 0 36px;
    letter-spacing: .5px;
}

.guest-form {
    position: relative;
    max-width: 460px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 38px 32px 46px;
    border-radius: 20px;
    background: rgba(255, 255, 255, .05);
    border: 1px solid rgba(255, 255, 255, .12);
    backdrop-filter: blur(8px) saturate(160%);
    box-shadow: 0 10px 32px rgba(0, 0, 0, .35);
}

.guest-form input,
.guest-form textarea {
    width: 100%;
    padding: 14px 18px;
    font-size: .95rem;
    color: #f1f1f1;
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 12px;
    transition: border-color .25s, box-shadow .25s;
}

.guest-form textarea {
    min-height: 120px;
}

/* ───────── PLACEHOLDERS DOS CAMPOS DO FORM ───────── */
.guest-form input::placeholder,
.guest-form textarea::placeholder,
.guest-form input::-webkit-input-placeholder,
.guest-form textarea::-webkit-input-placeholder,
.guest-form input::-moz-placeholder,
.guest-form textarea::-moz-placeholder,
.guest-form input:-ms-input-placeholder,
.guest-form textarea:-ms-input-placeholder,
.guest-form input::-ms-input-placeholder,
.guest-form textarea::-ms-input-placeholder {
    font-family: "Poppins", sans-serif;
    /* mesma família do formulário */
    font-size: .95rem;
    /* opcional: igual ao dos inputs */
    color: #9aa0b0;
    /* mesma cor que usa nos outros */
    font-weight: 400;
    /* idem */
}

.guest-form input:focus,
.guest-form textarea:focus {
    border-color: #ffd1dc;
    outline: 0;
    box-shadow: 0 0 0 3px rgba(255, 209, 220, .35);
}

.two-cols {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
}

.file-label,
.file-name {
    display: inline-flex;
    align-items: center;
    font-size: .9rem;
}

.file-label {
    color: #ffd1dc;
    gap: 6px;
    margin-right: 10px;
    cursor: pointer;
}

.file-label:hover {
    opacity: .8;
}

.file-name {
    opacity: .6;
}

.consent {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: .85rem;
    line-height: 1.4;
    text-align: left;
}

.consent input {
    width: 18px;
    height: 18px;
    margin: 4px 0 0;
    accent-color: #ffd1dc;
}

.send-btn {
    position: relative;
    overflow: hidden;
    align-self: center;
    padding: 12px 42px;
    border: none;
    border-radius: 40px;
    cursor: pointer;
    background: #ffd1dc;
    color: #0b1736;
    font: 700 1rem/1 "Poppins", sans-serif;
    transition: transform .25s ease, box-shadow .25s ease;
}

.send-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(0, 0, 0, .35);
}

.send-btn::before {
    content: "\f004";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
    color: #ff7aa8;
    opacity: 0;
    transform: scale(.4);
    transition: opacity .35s ease, transform .35s ease;
    pointer-events: none;
}

.send-btn:hover::before,
.send-btn.play::before {
    opacity: 1;
    transform: scale(1.4);
    animation: heart-beat .8s ease-out forwards;
}

.send-status {
    min-height: 22px;
    margin: 0;
    font-size: .9rem;
    color: #90ee90;
}

/* transição pós-envio */
.form-content,
.thank-you {
    transition: opacity .6s ease, transform .6s ease;
}

.thank-you {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 24px 32px;
    text-align: center;
    opacity: 0;
    transform: scale(.9);
    pointer-events: none;
}

.guest-form.sent .form-content {
    opacity: 0;
    transform: scale(.9) translateY(-20px);
}

.guest-form.sent .thank-you {
    opacity: 1;
    transform: scale(1);
    pointer-events: auto;
}

/* 1) faz o wrapper interno funcionar como antes            */
.guest-form .form-content {
    display: flex;
    /* empilha os campos verticalmente  */
    flex-direction: column;
    /* (equivale ao antigo layout)       */
    gap: 20px;
    /* mesmo “gap” que havia na .guest-form */
}

/* 2) garante que o cartão mantenha o padding externo
      mesmo com a animação de esconder/mostrar               */
.guest-form {
    position: relative;
    /* precisa p/ .thank-you ficar over­lay */
    padding: 38px 32px 46px;
    /* (reafirma) – caso tenha sido resetado */
}

.wall-btn {
    margin-top: 24px;
    padding: 12px 28px;
    border-radius: 40px;
    text-decoration: none;
    background: #ffd1dc;
    color: #0b1736;
    font-weight: 600;
}

.wall-btn:hover {
    filter: brightness(.9);
}

/* heart-beat */
@keyframes heart-beat {
    0% {
        transform: scale(.6);
        opacity: .9;
    }

    30% {
        transform: scale(1.8);
        opacity: 1;
    }

    60% {
        transform: scale(1.25);
        opacity: .7;
    }

    100% {
        transform: scale(1.4);
        opacity: 0;
    }
}

/* ───────────────────────────────
      10. LISTA DE PRESENTES
      ─────────────────────────────── */
/* Preview Lista de presentes */
#featured-cta {
    background: #0b1736;
    /* escuro, em sintonia com o site */
    color: #f5f5f5;
    /* texto claro */
    text-align: center;
    padding: 80px 16px 60px;
}

#featured-cta h2 {
    text-align: center;
    font-size: 2rem;
    margin-bottom: 2px;
    letter-spacing: .5px;
}

#featured-cta p {
    text-align: center;
    max-width: 700px;
    margin: 0 auto 26px;
    line-height: 1.5;
    opacity: .85;
}

/* ─────────── PREVIEW “MAIS DESEJADOS” ─────────── */
#featured-cta .items-grid {
    display: grid;
    grid-gap: 20px;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    align-items: stretch;
    margin: 0 auto 28px;
    /* centraliza o grid dentro da seção */
    max-width: 1100px;
    /* opcional: limita a largura total como na lista */
}


#featured-cta .item-card {
    width: 100%;
    /* ocupa toda a coluna */
    max-width: 260px;
    /* mesmo width dos cards em gifts.html */
}

#featured-cta .item-card p {
    text-align: left;
    max-width: 700px;
    margin: 0;
    line-height: 1.5;
    opacity: .85;
}

#featured-cta .item-card h3 {
    text-align: left;
}

#featured-cta .item-link {
    text-align: left;
}

/* botão “Ver Lista Completa” */
#featured-cta .gifts-btn {
    padding: 12px 32px;
    background: #ffd1dc;
    color: #0b1736;
    border-radius: 40px;
    font: 700 1rem/1 "Poppins", sans-serif;
    text-decoration: none;
    transition: filter .3s;
}

#featured-cta .gifts-btn:hover {
    filter: brightness(.9);
}

/* ───────────────────────────────
   RODAPÉ FIXO
   ─────────────────────────────── */



/* ───────────────────────────────
      11. BREAKPOINTS
      ─────────────────────────────── */
@media (max-width: 768px) {

    /* Seção hero (cabeçalho com nome do casal e data) centralizada no mobile */
    .hero-home {
        justify-content: center;
        align-items: center;
        text-align: center;
    }

    .hero-content {
        margin: 0;
        padding: 0 16px;
        /* espaço lateral para não colar no viewport */
    }

    .couple-names span {
        display: block;
        font-size: 1.3em;
        /* cada nome em sua linha e tamanho levemente menor */
    }

    .couple-names .amp {
        font-size: 0.9em;
        margin: .15em 0;
    }

    /* Citações bíblicas com fonte um pouco menor para caber bem */
    .bible-verse blockquote {
        font-size: 1.2rem;
        /* Podemos adicionar padding lateral se necessário */
    }

    /* Mensagem de boas-vindas com padding lateral e cores preservadas */
    .welcome-message {
        padding: 32px 16px;
        background: linear-gradient(90deg, #081229 0%, #0b1736 50%, #081229 100%);
    }

    .welcome-message h2,
    .welcome-message p {
        color: #f5f5f5;
        margin: 10px;
    }

    /* Nossa História – timeline em coluna, centralizada */
    .story-timeline {
        flex-direction: column;
        /* empilha os itens verticalmente */
    }

    .story-timeline li,
    .story-timeline li:nth-child(even) {
        width: 100%;
        align-items: center;
        text-align: center;
    }

    .story-timeline li {
        width: 90%;
        /* ocupa 90% da largura do container do pai */
        max-width: 320px;
        /* largura máxima para não ficar muito grande */
        margin: 0 auto;
        /* centraliza o li dentro da seção */
    }

    .story-timeline li p {
        max-width: 480px;
        /* limite de largura para os textos, melhora leitura */
    }

    .polaroid {
        width: 100%;
        max-width: 260px;
        /* limita tamanho da imagem */
        transform: none;
        /* remove qualquer rotação em mobile (se houver) */
    }

    .story-timeline li::before {
        /* (opcional) ajustar posição da linha/elemento decorativo da timeline se necessário */
        top: calc(48px + 130px);
    }

    .step-title {
        font-size: 1.4rem;
        /* títulos das etapas um pouco menores */
    }

    .story-title {
        font-size: 1.8rem;
        /* título "Nossa História" menor para caber */
    }

    /* Cronograma do Grande Dia – ajustado para uma coluna e centralizado */
    .schedule {
        padding: 64px 12px 64px;
        text-align: center;
    }

    .schedule-title {
        font-size: 1.6rem;
        margin-bottom: 48px;
    }

    .schedule-list {
        grid-template-columns: 1fr;
        /* apenas uma coluna no mobile */
        gap: 40px;
        /* espaçamento vertical entre os itens */
        padding: 0 16px;
        /* espaçamento lateral dentro da seção */
        max-width: 100%;
        /* garante que a grade não exceda a largura do contêiner */
        margin: 0 auto;
    }

    .schedule-list li {
        /* Cada item do cronograma vira um “card” de largura limitada e centralizado */
        background: rgba(255, 255, 255, .04);
        border: 1px solid rgba(255, 255, 255, .08);
        border-radius: 14px;
        padding: 20px 14px;
        box-shadow: 0 4px 14px rgba(0, 0, 0, .25);
        width: 100%;
        max-width: 340px;
        box-sizing: border-box;
        margin-inline: auto;
        /* centraliza o card horizontalmente */
    }

    .schedule-list .time {
        font-size: 1.5rem;
        margin-bottom: 12px;
        display: block;
    }

    .schedule-list .event {
        /* Remove o fundo e bordas internas do evento para usar só o card externo */
        background: none;
        border: none;
        box-shadow: none;
        width: 100%;
        box-sizing: border-box;
        padding: 20px 14px;
        /* mantém espaçamento interno igual ao card */
    }

    .schedule-list .event p {
        font-size: .95rem;
        line-height: 1.4;
    }

    /* Seção Local (Mapa) – ajustes de espaçamento e fontes */
    .venue {
        padding: 56px 12px 96px;
        margin-top: -32px;
        /* sobrepõe levemente no cronograma para continuidade visual */
        text-align: center;
    }

    .section-heading {
        font-size: 1.6rem;
        margin-bottom: 14px;
    }

    .venue-name {
        font-size: 1.8rem;
        margin-bottom: 6px;
    }

    .venue-address {
        font-size: .95rem;
        margin-bottom: 40px;
    }

    .map-wrap {
        border-radius: 12px;
        box-shadow: 0 6px 20px rgba(0, 0, 0, .35);
        overflow: hidden;
        /* garante que o mapa não vaze para fora no mobile */
    }

    .map-wrap::before {
        padding: 1px;
        background: linear-gradient(135deg, #4659b5 0%, #6f79ff 50%, #4659b5 100%);
    }

    .map-wrap iframe {
        aspect-ratio: 1/1;
        height: auto;
        min-height: 280px;
        width: 100%;
        /* o mapa ocupa toda a largura disponível do container */
    }

    /* Dicas de Traje – mantém cartões em uma coluna no mobile (via grid auto-fit) */
    /* (Observação: o grid auto-fit já se adapta, mas poderíamos forçar uma coluna para telas bem pequenas se necessário) */
    /* .dress-grid { grid-template-columns: 1fr; }   exemplo se quisermos apenas 1 coluna */
    .dress-card {
        box-shadow: 0 4px 14px rgba(0, 0, 0, .28);
    }

    .dress-card:hover {
        transform: none;
        box-shadow: 0 6px 20px rgba(0, 0, 0, .35);
    }

    .dress-card ul {
        text-align: left;
        /* listas dentro dos cartões de traje alinhadas à esquerda para leitura */
    }

    /* Formulário de mensagem – impede redimensionamento do textarea */
    .guest-form textarea {
        resize: none;
    }

    #featured-cta .items-grid {
        display: grid;
        grid-gap: 20px;
        grid-template-columns: repeat(auto-fill, minmax(30%, 2fr));
        align-items: stretch;
        margin: 0 auto 28px;
        /* centraliza o grid dentro da seção */
        max-width: 1100px;
        /* opcional: limita a largura total como na lista */
    }
}

/* fecha @media */

@media (max-width:480px) {
    .hero-home .couple-names {
        font-size: 2.4rem;
    }

    .countdown {
        font-size: 1.1rem;
    }
}