/* wedding.css v3 — tokens + P&B */

@import url("https://fonts.googleapis.com/css2?family=Abel:wght@300;400;500;600&family=Poppins:wght@200;300;400;500;600&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600&family=Poppins:wght@200;300;400;500;600&display=swap");
:root{
    /* Cores */
    --bg:#ffffff;
    --bg-alt:#fafafa;
    --ink:#111111;
    --muted:#6b6b6b;
    --line:#e9e9e9;

    /* Layout */
    --nav-h:64px;
    --radius:10px;
    --shadow:0 10px 30px rgba(0,0,0,.08);
    --section-py:80px;

    /* Hero */
    --hero-mask: rgba(255,255,255,.75);
    --hero-img: url('/images/IMG-20250820-WA0028.jpg');
    --hero-pos-y: 30%; /* ajuste fino do enquadramento */

    --color-count: #000;
    --background-count: #fafbe9;
    --border-color: #83753e;
    --script-font: 'Parisienne', 'Playfair Display', serif;

}

body{ background:var(--bg); color:var(--ink); font-family:Inter, system-ui, -apple-system, 'Segoe UI', Roboto, Arial; }
.brand-serif, .title-serif{ font-family:'Playfair Display', serif; letter-spacing:.2px; }
.img-cover{ width:100%; height:100%; object-fit:cover; }

/* Aplica a fonte cursiva com ajustes delicados */
.title-script{
    font-family: var(--script-font);
    font-weight: 400;
    letter-spacing: .02em;       /* cursivas precisam de menos tracking */
    line-height: 1.15;
}

/* opcional: títulos um pouquinho maiores quando em script */
.title-serif.title-soft.title-script{
    font-size: clamp(24px, 3vw, 32px);
}

/* NÃO aplique nos números do countdown */
.cd .title-script{ font-family: inherit; }

/* Navbar fina */
.nav-slim{ height:var(--nav-h); }
.navbar-brand{ font-size:24px; color:var(--ink)!important; }
.navbar .nav-link{
    color:var(--ink); font-weight:600; text-transform:uppercase; font-size:13px; letter-spacing:.06em;
    padding:10px 12px; border-radius:999px;
}
.navbar .nav-link:hover{ background:var(--line); }
.navbar .nav-link.active{ background:var(--ink); color:#fff; }

/* Mobile menu: fundo branco + sombra + ocupar largura inteira */
@media (max-width: 991.98px){
    .navbar.nav-slim .navbar-collapse{
        position:fixed;
        top:var(--nav-h);
        left:0; right:0;
        background:var(--bg);
        border-top:1px solid var(--line);
        border-bottom:1px solid var(--line);
        box-shadow:var(--shadow);
        padding:8px 12px 16px;
        z-index:1060; /* acima do conteúdo */
    }
    .navbar.nav-slim .navbar-nav .nav-link{
        display:block; padding:12px 14px; margin:2px 0;
    }
    /* evita que a página role por trás quando o menu está aberto */
    body.nav-open{ overflow:hidden; }
}

/* Hero */
.hero-minimal{
    position:relative; min-height:68vh; display:grid; place-items:center; text-align:center;
    background: var(--hero-img) center var(--hero-pos-y) / cover no-repeat;
    margin-top:var(--nav-h); /* compensa header fixo */
}
.hero-minimal .hero-mask{ position:absolute; inset:0; background:var(--hero-mask); }
.hero-minimal .container{ position:relative; z-index:2; }

@media (max-width:576px){
    .hero-minimal{ background-position: center 60%; }
}

/* Estrutura de seções */
.section{ padding:var(--section-py) 0; }
.section.alt{ background:var(--bg-alt); }
.container.narrow{ max-width:860px; }
.separator{ margin:0; border:0; height:1px; background:var(--line); }

/* Cards */
.card-flat{ border:1px solid var(--line); border-radius:var(--radius); background:#fff; }

/* Footer */
.footer-minimal{ padding:40px 0; border-top:1px solid var(--line); color:var(--muted); }

/* Lightbox P&B minimal */
.lb{ position:fixed; inset:0; background:rgba(0,0,0,.9); display:flex; align-items:center; justify-content:center; z-index:1050; }
.lb.hidden{ display:none; }
.lb img{ max-width:90vw; max-height:90vh; border-radius:6px; box-shadow:var(--shadow); }
.lb-close, .lb-prev, .lb-next{ position:absolute; background:transparent; color:#fff; border:0; font-size:32px; line-height:1; cursor:pointer; }
.lb-close{ top:18px; right:22px; }
.lb-prev{ left:24px; font-size:40px; }
.lb-next{ right:24px; font-size:40px; }

/* destaque suave ao voltar do POST */
.rsvp-highlight { animation: rsvpPulse 1.2s ease-out; }
@keyframes rsvpPulse { 0% { box-shadow:0 0 0 0 rgba(0,0,0,.18); } 100% { box-shadow:0 0 0 18px rgba(0,0,0,0); } }

/* PIX */
.qr-box{ background:#fff; border:1px dashed var(--line); border-radius:8px; padding:16px; }

/* Versículo */
.verse-block{ position:relative; overflow:hidden; }
.verse-block::before{
    content:"“"; position:absolute; left:12px; top:-12px;
    font-family:'Playfair Display', serif; font-size:120px; line-height:1; color:var(--line);
    opacity:.6; pointer-events:none;
}
.verse-text{ font-family:'Playfair Display', serif; font-size:clamp(18px, 3.2vw, 28px); line-height:1.6; margin:0; color:var(--ink); }
.verse-ref{ color:var(--muted); text-transform:uppercase; letter-spacing:.08em; font-weight:600; font-size:12px; }
@media (min-width:992px){ .verse-block::before{ left:24px; top:-18px; font-size:160px; } }

/* Versículo (delicado) */
.verse-card.delicate{
    padding: 32px 28px;
    border-radius: var(--radius);
    background:#fff; /* garante contraste sobre a seção alt */
    box-shadow: 0 2px 16px rgba(0,0,0,.04);
}

.verse-text{
    font-family:'Playfair Display', serif;
    font-size: clamp(18px, 2.2vw, 26px);
    line-height: 1.7;
    color: var(--ink);
    margin: 0;
    font-style: italic; /* dá o toque suave */
}

.verse-ornament{
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 12px;
    max-width: 360px;
    margin: 12px auto 6px;
}
.verse-ornament::before,
.verse-ornament::after{
    content: "";
    height: 1px;
    background: var(--line);
}
.verse-ornament .glyph{
    font-size: 14px; /* troque para 12–16 se quiser menor/maior */
    line-height: 1;
    color: var(--muted);
    transform: translateY(-1px);
}

.verse-ref{
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: .08em;
    font-weight: 600;
    font-size: 12px;
}


/* Pais */
.parents-grid{ display:grid; gap:16px; }
@media (min-width:992px){ .parents-grid{ grid-template-columns:1fr 1fr; } }
.parent-card img{ width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:var(--radius); }
.parent-card .parent-text{ margin-top:12px; }
.parent-names{ font-weight:600; margin-bottom:.35rem; }
.parent-quote{ color:var(--muted); line-height:1.6; font-style:italic; }
/* Pais — estilo delicado */
.parent-card.delicate{
    border:1px solid var(--line);
    border-radius: var(--radius);
    background:#fff;
    box-shadow: 0 2px 16px rgba(0,0,0,.04);
    transition: transform .2s ease, box-shadow .2s ease;
}
.parent-card.delicate:hover{
    transform: translateY(-2px);
    box-shadow: 0 6px 24px rgba(0,0,0,.06);
}

/* foto com “moldura” suave */
.parent-card.delicate img{
    width:100%;
    aspect-ratio: 4/3;
    object-fit: cover;
    border-radius: calc(var(--radius) + 2px);
    display:block;
    border: 1px solid var(--line);
    background:#fff;
}

/* opção: retrato circular (adicione .round no card) */
.parent-card.delicate.round img{
    aspect-ratio: 1/1;
    border-radius: 999px;
}

/* texto */
.parent-card .parent-text{ margin-top:12px; }
.parent-card .parent-text h5{
    font-family:'Playfair Display', serif;
    font-weight:600;
    letter-spacing:.2px;
}

/* ornamento fininho (combina com o do versículo) */
.parent-ornament{
    display:grid; grid-template-columns:1fr auto 1fr;
    align-items:center; gap:12px;
    max-width:280px; margin:8px auto 6px;
}
.parent-ornament::before, .parent-ornament::after{
    content:""; height:1px; background:var(--line);
}
.parent-ornament .glyph{
    font-size:13px; line-height:1; color:var(--muted); transform: translateY(-1px);
}

/* nomes e frase */
.parent-names{
    font-weight:600;
    margin-bottom:.35rem;
}
.parent-quote{
    color: var(--muted);
    line-height: 1.7;
    font-style: italic;
    font-size: 0.975rem;
}

/* responsivo */
@media (min-width: 992px){
    .parents-grid{ grid-template-columns: 1fr 1fr; gap:16px; }
}

/* Padrinhos */
.padrinhos-grid{ display:grid; grid-template-columns: repeat(2, 1fr); gap:12px; }
@media (min-width:576px){ .padrinhos-grid{ grid-template-columns: repeat(3, 1fr); } }
@media (min-width:992px){ .padrinhos-grid{ grid-template-columns: repeat(4, 1fr); gap:16px; } }
.padrinho-card .padrinho-name{ margin-top:.5rem; font-weight:600; }
.padrinho-card .padrinho-role{ font-size:.875rem; color:var(--muted); }

/* Countdown “plaquinhas” */
.cd{ margin-bottom: 6px; }
.cd-grid{
    display:flex; gap:10px; justify-content:center; flex-wrap:wrap;
}

.cd-box{
    position:relative;
    min-width:80px; /* cresce se o número de dias ficar com 3 dígitos */
    perspective:600px; /* para animação suave */
}
.cd-top, .cd-bottom{
    background:#fff;
    border:1px solid var(--line);
    text-align:center;
    padding:10px 12px;
    line-height:1;
}
.cd-top{
    border-radius:8px 8px 0 0;
    border-bottom: none;
}
.cd-bottom{
    border-radius:0 0 8px 8px;
    border-top: none;
    box-shadow: inset 0 6px 10px rgba(0,0,0,.03);
}
.cd-hinge{
    position:absolute; left:6px; right:6px; top:50%;
    height:1px; background:var(--line);
    transform: translateY(-.5px);
}
.cd-num{
    font-feature-settings: "tnum"; /* números tabulares */
    font-variant-numeric: tabular-nums;
    font-family:'Playfair Display', serif;
    font-size: clamp(26px, 5vw, 36px);
}
.cd-label{
    margin-top:6px; font-size:12px; text-transform:uppercase; letter-spacing:.08em;
    color:var(--muted); font-weight:600; text-align:center;
}

/* “tick” sutil quando muda */
.cd-box.tick .cd-top{ animation: cdTop .3s ease; }
.cd-box.tick .cd-bottom{ animation: cdBottom .3s ease; }
@keyframes cdTop{ 0%{ transform: rotateX(0deg); } 100%{ transform: rotateX(-8deg); } }
@keyframes cdBottom{ 0%{ transform: rotateX(0deg); } 100%{ transform: rotateX(8deg); } }

/* Quando zera, esconde grid e mostra mensagem */
.cd.done .cd-grid{ display:none; }

/* Modo single-plate (sem corte visual) */
.cd[data-style="single"] .cd-top{ border-radius: 8px; border-bottom: 1px solid var(--line); }
.cd[data-style="single"] .cd-bottom{ display:none; }
.cd[data-style="single"] .cd-hinge{
    background: linear-gradient(to right, transparent, var(--line), transparent);
    opacity:.6;
}

#countdown {
    position: relative;
    display: flex;
    pointer-events: none;
    user-select: none;
    color: var(--color-1);
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

#countdown > h1 {
    font-size: 1.5em;
    letter-spacing: -0.05em;
    color: #2a2a2a;
}
#countdown > p {
    color: #8a8a8a;
}

#countdown > p {
    font-size: 1em;
    font-weight: normal;
    letter-spacing: 0;
    margin-top: 2em;
}

#countdown > time {
    font-family: Abel;
    font-size: 1em;
    font-weight: bold;
    letter-spacing: 0;
    margin-top: 2em;
}

.countdown__container {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1em;
    align-items: center;
    justify-content: center;
    margin-top: 3em;
}
.countdown__el {
    display: flex;
    justify-content: center;
    text-align: center;
    flex-direction: column;
    align-self: flex-start;
    align-items: center;
    position: relative;
}
.countdown__time {
    border-radius: 5px;
    box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    text-align: center;
    position: relative;
    height: 95px;
    max-width: 70px;
    width: 100%;
    border-radius: 5px;

    -webkit-perspective: 479px;
    -moz-perspective: 479px;
    -ms-perspective: 479px;
    -o-perspective: 479px;
    perspective: 479px;

    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
    -o-backface-visibility: hidden;
    backface-visibility: hidden;

    -webkit-transform: translateZ(0);
    -moz-transform: translateZ(0);
    -ms-transform: translateZ(0);
    -o-transform: translateZ(0);
    transform: translateZ(0);

    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    -o-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}

.countdown__time .count {
    background: var(--background-count);
    color: var(--color-count);
    display: block;
    font-family: "Montserrat", sans-serif;
    font-size: 40px;
    height: 95px;
    line-height: 2.4em;
    overflow: hidden;
    position: absolute;
    text-align: center;
    width: 100%;

    -webkit-transform: translateZ(0);
    -moz-transform: translateZ(0);
    -ms-transform: translateZ(0);
    -o-transform: translateZ(0);
    transform: translateZ(0);

    -webkit-transform-style: flat;
    -moz-transform-style: flat;
    -ms-transform-style: flat;
    -o-transform-style: flat;
    transform-style: flat;
}

.countdown__time .count.top {
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    border-bottom: 1px solid var(--border-color);
    border-radius: 5px 5px 0 0;
    height: 50%;

    -webkit-transform-origin: 50% 100%;
    -moz-transform-origin: 50% 100%;
    -ms-transform-origin: 50% 100%;
    -o-transform-origin: 50% 100%;
    transform-origin: 50% 100%;
}

.countdown__time .count.bottom {
    background-image: linear-gradient(rgba(255, 255, 255, 0.1), transparent);
    background-image: -webkit-linear-gradient(
        rgba(255, 255, 255, 0.1),
        transparent
    );
    background-image: -moz-linear-gradient(rgba(255, 255, 255, 0.1), transparent);
    background-image: -ms-linear-gradient(rgba(255, 255, 255, 0.1), transparent);
    background-image: -o-linear-gradient(rgba(255, 255, 255, 0.1), transparent);
    border-top: 1px solid var(--border-color);
    /*border-bottom: 1px solid #000;*/
    border-radius: 0 0 5px 5px;
    line-height: 0;
    height: 50%;
    top: 50%;

    -webkit-transform-origin: 50% 0;
    -moz-transform-origin: 50% 0;
    -ms-transform-origin: 50% 0;
    -o-transform-origin: 50% 0;
    transform-origin: 50% 0;
}
.countdown__el .countdown__label {
    font-size: normal;
    margin-top: 15px;
    display: flex;
    justify-content: center;
    top: 95px;
    width: 100%;
}

/* Animation start */
.count.curr.top {
    -webkit-transform: rotateX(0deg);
    -moz-transform: rotateX(0deg);
    -ms-transform: rotateX(0deg);
    -o-transform: rotateX(0deg);
    transform: rotateX(0deg);
    z-index: 3;
}
.count.next.bottom {
    -webkit-transform: rotateX(90deg);
    -moz-transform: rotateX(90deg);
    -ms-transform: rotateX(90deg);
    -o-transform: rotateX(90deg);
    transform: rotateX(90deg);
    z-index: 2;
}
.flip .count.curr.top {
    -webkit-transition: all 250ms ease-in-out;
    -moz-transition: all 250ms ease-in-out;
    -ms-transition: all 250ms ease-in-out;
    -o-transition: all 250ms ease-in-out;
    transition: all 250ms ease-in-out;
    -webkit-transform: rotateX(-90deg);
    -moz-transform: rotateX(-90deg);
    -ms-transform: rotateX(-90deg);
    -o-transform: rotateX(-90deg);
    transform: rotateX(-90deg);
}
.flip .count.next.bottom {
    -webkit-transition: all 250ms ease-in-out 250ms;
    -moz-transition: all 250ms ease-in-out 250ms;
    -ms-transition: all 250ms ease-in-out 250ms;
    -o-transition: all 250ms ease-in-out 250ms;
    transition: all 250ms ease-in-out 250ms;

    -webkit-transform: rotateX(0deg);
    -moz-transform: rotateX(0deg);
    -ms-transform: rotateX(0deg);
    -o-transform: rotateX(0deg);
    transform: rotateX(0deg);
}

@media screen and (max-width: 600px) {
    .countdown__container {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* História — versão delicada do card */
.card-flat.story-soft{
    border-color: #f2f2f2;                 /* borda bem suave */
    background:#fff;
    border-radius: var(--radius);
    box-shadow: 0 2px 14px rgba(0,0,0,.035); /* sombra leve */
    position: relative;
}

/* tipografia mais macia */
.card-flat.story-soft p{
    line-height: 1.8;
    font-size: 1.02rem;
    color: var(--ink);
}

/* se o parágrafo vier com .text-secondary, garante nosso tom */
.card-flat.story-soft .text-secondary{ color: var(--muted) !important; }

@media (max-width:576px){
    .card-flat.story-soft{ padding: 20px !important; }
    .card-flat.story-soft::before{ margin-bottom:12px; }
}

/* Títulos delicados */
.title-serif.title-soft{
    font-weight:600;                         /* Playfair 600 já está carregada */
    letter-spacing: .2px;
    font-size: clamp(22px, 2.6vw, 28px);     /* um pouco menor e elegante */
    line-height: 1.25;
    position: relative;
}

/* filete fininho abaixo (delicado) */
.title-serif.title-soft::after{
    content:"";
    display:block;
    width:56px; height:1px;
    background: var(--line);
    margin:10px auto 0;                      /* centralizado */
}

/* subtítulo opcional (small) */
.title-sub{
    display:block;
    margin-top:6px;
    font-size: .95rem;
    color: var(--muted);
    letter-spacing: .02em;
    font-weight: 500;                         /* Inter 500 */
}

/* ajuste de espaçamento em telas pequenas */
@media (max-width:576px){
    .title-serif.title-soft{ font-size: clamp(20px, 5.3vw, 24px); }
    .title-serif.title-soft::after{ margin-top:8px; }
}