:root {
    /* Paleta Dia dos Namorados: blush + rosé + dourado das alianças */
    --bg-top: #fff7f4;
    --bg-bottom: #fbe3e7;
    --rose: #c14a63;
    --rose-deep: #9c2f4a;
    --gold: #c8a45c;
    --gold-light: #e3c98a;
    --ink: #4a3540;
    --frame: #ffffff;
    --back-bg: #fff9f8;

    --frame-pad: 14px;          /* moldura do porta-retrato */
    --card-aspect: 1.25;        /* 1 = quadrado; 1.25 = retrato 4:5 */
    --gap: 26px;
    --radius: 8px;
    --flip-speed: 0.6s;

    --font-title: "Playfair Display", Georgia, serif;
    --font-script: "Dancing Script", cursive;
    --font-body: "Cormorant Garamond", Georgia, serif;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    min-height: 100vh;
    color: var(--ink);
    font-family: var(--font-body);
    background: linear-gradient(160deg, var(--bg-top) 0%, var(--bg-bottom) 100%);
    background-attachment: fixed;
}

/* ---- Corações decorativos no fundo ---- */
.bg-deco {
    position: fixed;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
    z-index: 0;
}
.bg-deco .heart {
    position: absolute;
    color: var(--rose);
    opacity: 0.16;
    animation: float 16s ease-in-out infinite;
}
.bg-deco .heart:nth-child(1) { left: 6%;  top: 18%; font-size: 2.4rem; animation-delay: 0s; }
.bg-deco .heart:nth-child(2) { left: 22%; top: 70%; font-size: 1.4rem; animation-delay: -2s; color: var(--gold); opacity: 0.20; }
.bg-deco .heart:nth-child(3) { left: 38%; top: 30%; font-size: 1.1rem; animation-delay: -5s; }
.bg-deco .heart:nth-child(4) { left: 51%; top: 82%; font-size: 2rem;   animation-delay: -7s; opacity: 0.13; }
.bg-deco .heart:nth-child(5) { left: 67%; top: 22%; font-size: 1.6rem; animation-delay: -3s; color: var(--gold); opacity: 0.19; }
.bg-deco .heart:nth-child(6) { left: 80%; top: 60%; font-size: 2.6rem; animation-delay: -9s; }
.bg-deco .heart:nth-child(7) { left: 90%; top: 35%; font-size: 1.2rem; animation-delay: -4s; }
.bg-deco .heart:nth-child(8) { left: 14%; top: 45%; font-size: 1rem;   animation-delay: -11s; opacity: 0.14; }
.bg-deco .heart:nth-child(9) { left: 73%; top: 88%; font-size: 1.3rem; animation-delay: -6s; color: var(--gold); opacity: 0.18; }

@keyframes float {
    0%, 100% { transform: translateY(0) rotate(-6deg); }
    50%      { transform: translateY(-22px) rotate(6deg); }
}

/* ---- Cabeçalho ---- */
.mural-header {
    position: relative;
    z-index: 1;
    text-align: center;
    padding: 3.5rem 1rem 1rem;
}
.mural-title {
    margin: 0;
    font-family: var(--font-title);
    font-weight: 700;
    color: var(--rose-deep);
    font-size: clamp(2.2rem, 5vw, 3.6rem);
    letter-spacing: 0.5px;
}
.mural-subtitle {
    margin: 0.4rem 0 0;
    font-family: var(--font-script);
    font-weight: 600;
    color: var(--rose);
    font-size: clamp(1.4rem, 3vw, 2rem);
}

/* Ornamento: linhas finas + alianças entrelaçadas */
.ornament {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin: 0.6rem auto 0.2rem;
}
.ornament .rule {
    height: 1px;
    width: clamp(40px, 12vw, 110px);
    background: linear-gradient(90deg, transparent, var(--gold) 60%, var(--gold));
}
.ornament .rule:last-child {
    background: linear-gradient(90deg, var(--gold), var(--gold) 40%, transparent);
}
.ornament .rings {
    display: block;
    width: clamp(82px, 12vw, 96px);
    height: auto;
    filter: drop-shadow(0 1px 3px rgba(184, 137, 63, 0.45));
}

/* ---- Grade 4 x N (desktop) ---- */
.grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--gap);
    max-width: 1180px;
    margin: 0 auto;
    padding: 1.5rem clamp(1rem, 4vw, 2.5rem) 4rem;
}
@media (max-width: 1024px) {
    .grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 600px) {
    .grid { grid-template-columns: repeat(2, 1fr); }
}

.empty {
    grid-column: 1 / -1;
    text-align: center;
    color: var(--rose);
    font-size: 1.4rem;
    padding: 3rem 0;
}

/* ---- Card / porta-retrato com flip 3D ---- */
.card {
    aspect-ratio: 1 / var(--card-aspect);
    perspective: 1100px;
    cursor: pointer;
    outline: none;
}

.card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    transition: transform var(--flip-speed) cubic-bezier(0.4, 0.2, 0.2, 1);
}
.card.flipped .card-inner {
    transform: rotateY(180deg);
}

.card-face {
    position: absolute;
    inset: 0;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    background: var(--frame);
    border-radius: var(--radius);
    padding: var(--frame-pad);
    box-shadow: 0 8px 22px rgba(156, 47, 74, 0.16);
    transition: box-shadow 0.3s ease;
}
.card:hover .card-face,
.card:focus-visible .card-face {
    box-shadow: 0 14px 34px rgba(156, 47, 74, 0.28);
}
.card:focus-visible .card-front {
    outline: 2px solid var(--gold);
    outline-offset: 2px;
}

/* Frente: a foto, encaixada na moldura sem distorcer (recorta sobras). */
.card-front img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    border-radius: 3px;
    box-shadow: inset 0 0 0 1px rgba(200, 164, 92, 0.35);
}

/* Verso: o texto (prévia truncada), num tom blush. */
.card-back {
    transform: rotateY(180deg);
    background: var(--back-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(200, 164, 92, 0.4);
}
.back-text {
    margin: 0;
    text-align: center;
    color: var(--ink);
    font-size: clamp(1.15rem, 1.9vw, 1.5rem);
    line-height: 1.35;
    word-break: break-word;
}
.back-text::before {
    content: "♥";
    display: block;
    color: var(--rose);
    font-size: 0.95rem;
    margin-bottom: 0.5rem;
    opacity: 0.85;
}

/* ---- Pop-up ---- */
.modal {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(74, 53, 64, 0.55);
    backdrop-filter: blur(2px);
    padding: 1.5rem;
    z-index: 100;
}
.modal[hidden] { display: none; }

.modal-box {
    position: relative;
    background: #fff;
    border-radius: 14px;
    max-width: 540px;
    width: 100%;
    max-height: 80vh;
    padding: 2.75rem 1.9rem 2rem;
    box-shadow: 0 24px 70px rgba(74, 53, 64, 0.4);
    border-top: 4px solid var(--gold);
}
.modal-box::before {
    content: "♥";
    position: absolute;
    top: -0.9rem;
    left: 50%;
    transform: translateX(-50%);
    background: #fff;
    color: var(--rose);
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    display: grid;
    place-items: center;
    box-shadow: 0 2px 8px rgba(74, 53, 64, 0.2);
    font-size: 1rem;
}
.modal-close {
    position: absolute;
    top: 0.6rem;
    right: 0.8rem;
    border: none;
    background: none;
    font-size: 1.9rem;
    line-height: 1;
    cursor: pointer;
    color: var(--rose);
    transition: color 0.2s, transform 0.2s;
}
.modal-close:hover { color: var(--rose-deep); transform: scale(1.15); }

.modal-content {
    overflow-y: auto;
    max-height: calc(80vh - 4.75rem);
    white-space: pre-wrap;
    word-break: break-word;
    font-size: 1.3rem;
    line-height: 1.6;
    color: var(--ink);
    margin-top: 0.4rem;
}

/* ---- Acessibilidade: respeita quem prefere menos movimento ---- */
@media (prefers-reduced-motion: reduce) {
    .bg-deco .heart { animation: none; }
    .card-inner { transition: none; }
}