:root {
    --pink: #e0218a;
    --pink-dark: #b5126c;
    --pink-light: #ffd6ec;
    --bg: #fff0f7;
}
* { box-sizing: border-box; }
body {
    margin: 0;
    font-family: Montserrat, system-ui, sans-serif;
    background: var(--bg);
    color: #4a2338;
    text-align: center;
}
.hero {
    padding: 40px 16px 32px;
    color: #fff;
    background: radial-gradient(circle at 20% 20%, #ff9ad5, transparent 50%),
                linear-gradient(135deg, #ff5fb4, var(--pink) 60%, var(--pink-dark));
}
.hero h1 {
    margin: 0;
    font-family: 'Dancing Script', cursive;
    font-size: clamp(2.6rem, 10vw, 4.5rem);
    text-shadow: 0 3px 0 var(--pink-dark), 0 6px 18px rgba(0,0,0,.25);
}
.hero h1 img { display: block; width: 100%; max-width: 420px; height: auto; margin: 0 auto; }
.sub { margin: 4px 0 0; font-weight: 800; letter-spacing: .15em; text-transform: uppercase; }
.count { margin: 12px 0 0; font-weight: 600; }
h2 { font-family: 'Dancing Script', cursive; color: var(--pink); font-size: 2.4rem; margin: 0 0 12px; }

.card {
    max-width: 480px;
    margin: -16px auto 0;
    margin-inline: 16px;
    padding: 28px 20px;
    background: #fff;
    border: 2px solid var(--pink-light);
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(224,33,138,.15);
    position: relative;
}
@media (min-width: 512px) { .card { margin-inline: auto; } }
.label { margin: 0; font-weight: 800; color: var(--pink); text-transform: uppercase; letter-spacing: .1em; font-size: .85rem; }
.mission { font-family: 'Dancing Script', cursive; font-size: 2rem; line-height: 1.2; color: var(--pink-dark); margin: 8px 0 24px; }

.btn {
    display: block;
    width: 100%;
    margin: 12px 0 0;
    padding: 16px;
    border: 0;
    border-radius: 999px;
    background: var(--pink);
    color: #fff;
    font: 800 1rem Montserrat, sans-serif;
    letter-spacing: .08em;
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
    box-shadow: 0 6px 16px rgba(224,33,138,.35);
}
.btn:disabled { opacity: .6; }
.btn.ghost { background: #fff; color: var(--pink); border: 2px solid var(--pink); box-shadow: none; }
#preview { width: 100%; margin-top: 16px; border-radius: 12px; }
form { margin-top: 20px; text-align: left; }
form label { font-weight: 600; }
form input {
    width: 100%;
    margin-top: 6px;
    padding: 14px;
    font: inherit;
    font-size: 16px; /* evita lo zoom automatico su iOS */
    border: 2px solid var(--pink-light);
    border-radius: 12px;
}
form input:focus { outline: none; border-color: var(--pink); }
.error { color: #c0003c; font-weight: 600; text-align: center; }
footer { padding: 32px 16px; color: var(--pink-dark); font-size: .9rem; }

.gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 32px;
    max-width: 1200px;
    margin: 0 auto;
    padding: 40px 16px;
}
.empty { grid-column: 1 / -1; }
.postcard {
    margin: 0;
    padding: 12px 12px 18px;
    background: #fff;
    border-radius: 4px;
    box-shadow: 0 8px 24px rgba(74,35,56,.18);
    transform: rotate(-2deg);
    transition: transform .2s;
}
.postcard:nth-child(even) { transform: rotate(1.5deg); }
.postcard:nth-child(3n) { transform: rotate(-1deg); }
.postcard:hover { transform: rotate(0) scale(1.03); }
.postcard img { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 2px; }
.postcard figcaption { display: flex; flex-direction: column; gap: 6px; padding-top: 12px; }
.phrase { font-family: 'Dancing Script', cursive; font-size: 1.35rem; line-height: 1.2; color: var(--pink-dark); }
.by { font-weight: 600; font-size: .9rem; }