/* =====================================================
   INVITATION.CSS — Digital Invitation Styles
   Max-width 480px (mobile-first)
   ===================================================== */

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

html { scroll-behavior: smooth; }

body {
    font-family: var(--font-body, 'Lato', sans-serif);
    background-color: var(--bg, #f5f5f0);
    color: var(--text, #2c2c2c);
    overflow-x: hidden;
    max-width: 480px;
    margin: 0 auto;
    -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a { text-decoration: none; color: inherit; }
button { cursor: pointer; font-family: inherit; }

/* ─── PORTADA ─────────────────────────────────── */
.invitation-cover {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    padding: 50px 24px 40px;
    background-color: var(--bg);
}

.floral-top-left {
    position: absolute;
    top: -15px;
    left: -15px;
    width: 60%;
    pointer-events: none;
    z-index: 1;
    opacity: 0.9;
}

.floral-bottom-right {
    position: absolute;
    bottom: -15px;
    right: -15px;
    width: 55%;
    pointer-events: none;
    z-index: 1;
    opacity: 0.9;
}

.cover-text {
    position: relative;
    z-index: 3;
    text-align: center;
    margin-bottom: 20px;
}

.invitation-label {
    font-size: 1rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    opacity: 0.7;
    line-height: 1.5;
    font-weight: 300;
}

.couple-name {
    font-size: 2.8rem;
    color: var(--primary);
    text-align: center;
    margin-top: 6px;
    margin-bottom: 28px;
    line-height: 1.1;
    position: relative;
    z-index: 3;
}

.ampersand-cover {
    font-size: 2rem;
    opacity: 0.7;
}

/* ─── ENVELOPE ────────────────────────────────── */
.envelope-container {
    position: relative;
    width: 94%;
    max-width: 390px;
    cursor: pointer;
    z-index: 3;
    margin-bottom: 28px;
    -webkit-tap-highlight-color: transparent;
}

.envelope-container:focus { outline: none; }
.envelope-container:focus-visible { outline: 2px solid var(--accent); border-radius: 4px; }

.envelope {
    width: 100%;
    border-radius: 6px;
    box-shadow: 0 12px 40px rgba(0,0,0,0.3);
    position: relative;
    padding-top: 62%;
    overflow: visible;
    transition: transform 0.2s ease;
}

.envelope-container:hover .envelope {
    transform: translateY(-3px);
    box-shadow: 0 16px 48px rgba(0,0,0,0.35);
}

.envelope-flap {
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 52%;
    clip-path: polygon(0 0, 100% 0, 50% 100%);
    transform-origin: top center;
    transition: transform 0.9s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 2;
}

.envelope.open .envelope-flap {
    transform: perspective(600px) rotateX(-180deg);
}

.envelope-body {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    z-index: 1;
}

.click-label {
    font-size: 0.6rem;
    letter-spacing: 0.18em;
    color: rgba(255,255,255,0.75);
    text-transform: uppercase;
    font-weight: 500;
}

.wax-seal {
    width: 58px;
    height: 58px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 14px rgba(0,0,0,0.35), inset 0 -3px 6px rgba(0,0,0,0.2);
    animation: sealPulse 2.5s ease-in-out infinite;
}

@keyframes sealPulse {
    0%, 100% { box-shadow: 0 4px 14px rgba(0,0,0,0.35), inset 0 -3px 6px rgba(0,0,0,0.2); }
    50% { box-shadow: 0 6px 20px rgba(0,0,0,0.4), inset 0 -3px 6px rgba(0,0,0,0.2), 0 0 0 6px rgba(201,168,76,0.15); }
}

.seal-inner {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 1.5px solid rgba(255,255,255,0.35);
    display: flex;
    align-items: center;
    justify-content: center;
}

.envelope-flowers-overlay {
    position: absolute;
    left: -25%;
    top: -20%;
    width: 70%;
    pointer-events: none;
    z-index: 4;
    opacity: 0.95;
}

/* ─── GUEST INFO ──────────────────────────────── */
.guest-info {
    text-align: center;
    position: relative;
    z-index: 3;
    margin-top: 8px;
}

.guest-name-label {
    font-size: 1rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    opacity: 0.6;
    margin-bottom: 4px;
}

.guest-name-display {
    font-size: 2rem;
    color: var(--primary);
    line-height: 1.2;
    margin-bottom: 6px;
}

.seats-reserved-text {
    font-size: 1rem;
    opacity: 0.75;
    line-height: 1.4;
}

/* ─── REVEAL / ANIMATION ─────────────────────── */
.hidden-initially {
    display: none;
    opacity: 0;
}

.revealed {
    display: block !important;
    animation: fadeInContent 0.9s ease forwards;
}

@keyframes fadeInContent {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ─── SCROLL REVEAL ───────────────────────────── */
.scroll-reveal {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 0.75s ease, transform 0.75s ease;
}

.scroll-reveal.visible {
    opacity: 1;
    transform: translateY(0);
}

/* ─── OPEN ENVELOPE ─────────────────────────── */
.open-envelope-section { position: relative; }

/* Wrapper con perspectiva 3D y espacio extra para que la foto emerja */
.opened-envelope {
    position: relative;
    width: 94%;
    max-width: 390px;
    margin: 0 auto;
    height: 470px;
    display: flex;
    align-items: flex-end;
    perspective: 1000px;
}

/* Cuerpo interior del sobre */
.opened-env-body {
    position: relative;
    width: 100%;
    height: 350px;
    border-radius: 0 0 8px 8px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.22);
    overflow: visible;
}

/* Solapa abierta: 90px de alto, triángulo con punta ARRIBA */
.opened-flap {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 90px;
    clip-path: polygon(0% 100%, 50% 0%, 100% 100%);
    transform-origin: top center;
    transform: translateY(-100%) rotateX(25deg);
    z-index: 1;
}

/* Sombras diagonales interiores (esquinas del sobre vistas desde adentro) */
.inner-corner-l,
.inner-corner-r {
    position: absolute;
    top: 0;
    width: 50%;
    height: 100%;
    background: rgba(0,0,0,0.18);
    pointer-events: none;
    z-index: 2;
}
.inner-corner-l {
    left: 0;
    clip-path: polygon(0% 0%, 100% 100%, 0% 100%);
}
.inner-corner-r {
    right: 0;
    clip-path: polygon(100% 0%, 100% 100%, 0% 100%);
}

/* Foto dentro del sobre — 15px menor que el sobre, centrada */
.photo-in-env {
    position: absolute;
    bottom: 20px;
    left: 8px;
    width: calc(100% - 16px);
    z-index: 3;
    animation: photoRevealFromEnvelope 1.2s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}

/* Flores decorativas dentro del sobre abierto (misma imagen que el sobre cerrado) */
.open-env-flowers {
    position: absolute;
    left: -25%;
    top: -18%;
    width: 68%;
    pointer-events: none;
    z-index: 5;
    opacity: 0.95;
}

@keyframes photoRevealFromEnvelope {
    0%   { transform: translateY(60px);  opacity: 0; }
    100% { transform: translateY(-50px); opacity: 1; }
}

/* Cara frontal del sobre — cubre solo el 75% inferior, dejando
   la foto visible en la parte superior                             */
.front-flaps {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 75%;
    z-index: 4;
    pointer-events: none;
    border-radius: 0 0 8px 8px;
}

/* V-notch en la parte superior de la cara frontal */
.front-flaps::before {
    content: '';
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 100%;
    background-color: var(--envelope);
    clip-path: polygon(0% 0%, 50% 55%, 100% 0%, 100% 100%, 0% 100%);
    border-radius: 0 0 8px 8px;
}

/* Sombra del pliegue inferior */
.front-flaps::after {
    content: '';
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 55%;
    background-color: rgba(0,0,0,0.13);
    clip-path: polygon(0% 100%, 50% 0%, 100% 100%);
}

/* ─── POLAROID ──────────────────────────────── */
.polaroid-photo {
    background: white;
    padding: 12px 12px 44px;
    box-shadow: 0 8px 28px rgba(0,0,0,0.25);
    transform: rotate(-1.5deg);
    width: 100%;
    box-sizing: border-box;
    position: relative;
    z-index: 2;
    transition: transform 0.3s ease;
}

.polaroid-photo img,
.polaroid-photo video {
    width: 100%;
    aspect-ratio: 4/3;
    object-fit: cover;
    display: block;
}

.polaroid-placeholder {
    width: 100%;
}

.photo-placeholder-inner {
    width: 100%;
    aspect-ratio: 4/3;
    display: flex;
    align-items: center;
    justify-content: center;
}

.polaroid-caption {
    text-align: center;
    font-size: 1.6rem;
    margin-top: 10px;
    line-height: 1;
}

/* ─── OVAL CARD ───────────────────────────────── */
.oval-card {
    background: white;
    border-radius: 45%;
    width: calc(55% + 2rem);
    max-width: calc(55% + 2rem);
    margin: -55px auto 0;
    padding: 46px 28px 64px; /* top: 2rem(sello-mitad=32px) + 14px gap */
    overflow: visible;       /* permite que el sello absoluto sobresalga */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    box-shadow: 0 8px 28px rgba(0,0,0,0.1);
    position: relative;
    z-index: 3;
    background-image: radial-gradient(circle at 50% 50%, rgba(255,255,255,1) 60%, rgba(245,245,240,1) 100%);
}

.oval-seal-decoration {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 12px;
    box-shadow: 0 3px 10px rgba(0,0,0,0.25);
}

.oval-seal-inner {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,0.35);
    display: flex;
    align-items: center;
    justify-content: center;
}

.honor-text {
    font-size: 0.75rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    opacity: 0.65;
    margin-bottom: 20px;
}

.honor-type {
    font-size: 0.79rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--primary);
    margin-bottom: 10px;
}

.name-script {
    font-size: 2.6rem;
    line-height: 1.0;
    margin: 4px 0;
}

.ampersand {
    font-size: 1.6rem;
    margin: 2px 0;
    display: block;
}

.bible-verse {
    font-style: italic;
    font-size: 0.95rem;
    line-height: 1.6;
    margin-top: 14px;
    color: rgba(0,0,0,0.65);
    font-family: var(--font-display);
    max-width: 240px;
}

.bible-verse cite {
    display: block;
    margin-top: 4px;
    font-style: normal;
    font-size: 0.85rem;
    opacity: 0.75;
    font-weight: 600;
}

/* Encabezado (honor + tipo + nombre) cuando se muestra debajo de la tarjeta oval */
.below-oval-header {
    text-align: center;
    margin: 48px auto 4px;
    padding: 0 16px;
}

/* Padres y padrinos (XV Años) — debajo de la tarjeta oval */
.parents-godparents {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 28px 48px;
    margin: 22px auto 4px;
    padding: 0 16px;
    text-align: center;
}

.parents-godparents .pg-group {
    min-width: 130px;
}

.parents-godparents .pg-label {
    font-size: 0.72rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    font-weight: 700;
    margin-bottom: 8px;
    opacity: 0.9;
}

.parents-godparents .pg-name {
    font-family: var(--font-display);
    font-size: 1.02rem;
    line-height: 1.5;
    color: var(--text);
}

.section-floral-divider {
    width: 90%;
    max-width: 380px;
    margin: 0 auto;
    padding: 10px 0;
}

/* ─── MUSIC SECTION ───────────────────────────── */
.music-section {
    padding: 44px 24px 30px;
    text-align: center;
    background: var(--bg);
}

.music-label {
    font-size: 0.65rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    opacity: 0.7;
    margin-bottom: 22px;
    line-height: 1.6;
}

.music-player {
    display: inline-block;
    background: white;
    border-radius: 50px;
    padding: 12px 24px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.1);
    margin-bottom: 20px;
}

.player-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
}

.ctrl-btn {
    background: none;
    border: none;
    -webkit-appearance: none;
    appearance: none;
    font-size: 1.3rem;
    color: var(--primary);
    opacity: 0.65;
    transition: opacity 0.2s;
    padding: 4px;
    line-height: 1;
    cursor: pointer;
}

.ctrl-btn.active { opacity: 1; }
.ctrl-btn.disabled-btn { opacity: 0.25; cursor: default; }
.ctrl-btn:hover:not(.disabled-btn) { opacity: 1; }

.play-btn {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    border: 2.5px solid;
    -webkit-appearance: none;
    appearance: none;
    background: white;
    font-size: 1.2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    padding-left: 3px;
    flex-shrink: 0;
    cursor: pointer;
}

.play-btn:hover {
    background: var(--primary);
    color: white !important;
    border-color: var(--primary) !important;
}

.song-info {
    font-size: 0.78rem;
    margin-top: 10px;
    opacity: 0.75;
    text-align: center;
    line-height: 1.4;
}

.song-title-text { font-weight: 600; }
.song-separator { opacity: 0.5; }
.song-artist-text { font-style: italic; }

.love-message-container {
    max-width: 380px;
    margin: 0 auto;
    padding: 0 8px;
}

.love-message {
    font-size: 0.92rem;
    line-height: 1.8;
    color: var(--text);
    text-align: center;
    font-style: italic;
    opacity: 0.85;
    font-family: var(--font-display);
}

/* ─── PHOTO SECTIONS ──────────────────────────── */
.photo-section {
    padding: 0 16px;
    margin: 30px 0;
}

.photo-frame.gold-border {
    border: 2.5px solid var(--accent);
    padding: 5px;
    box-shadow: 0 6px 20px rgba(0,0,0,0.1);
}

.photo-frame img {
    width: 100%;
    aspect-ratio: 3/4;
    object-fit: cover;
    display: block;
}

/* ─── CALENDAR SECTION ────────────────────────── */
.calendar-section {
    padding: 44px 24px;
    position: relative;
    text-align: center;
    background: var(--bg);
}

.floral-cal-tl {
    position: absolute;
    top: -5px; left: -1px;
    width: 35%;
    pointer-events: none;
    opacity: 0.8;
}

.floral-cal-br {
    position: absolute;
    bottom: -1px; right: -1px;
    width: 30%;
    pointer-events: none;
    opacity: 0.8;
    transform: scale(1, 1);
}

.section-title-script {
    font-size: 2.2rem;
    line-height: 1.1;
    margin-bottom: 16px;
    position: relative;
    z-index: 2;
}

.event-date-display {
    font-size: 1rem;
    letter-spacing: 0.08em;
    text-transform: capitalize;
    opacity: 0.75;
    margin-bottom: 20px;
    font-family: var(--font-display);
    font-style: italic;
    position: relative;
    z-index: 2;
}

.calendar-widget {
    background: white;
    border-radius: 14px;
    padding: 20px 16px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.08);
    margin: 0 auto;
    max-width: 340px;
    position: relative;
    z-index: 2;
}

.cal-header {
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin-bottom: 14px;
    color: var(--text);
    font-family: var(--font-display);
}

.cal-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 3px;
}

.cal-day-name {
    font-size: 0.9rem;
    text-align: center;
    opacity: 0.6;
    padding: 4px 0 8px;
    font-style: italic;
    font-family: var(--font-display);
}

.cal-day {
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.82rem;
    border-radius: 6px;
    color: var(--text);
    opacity: 0.6;
}

.cal-day.event-day {
    position: relative;
    opacity: 1;
}

.cal-day.event-day::before {
    content: '\2665\FE0E';
    position: absolute;
    font-size: 3.5rem;
    color: var(--primary);
    z-index: 0;
    line-height: 1;
}

.cal-day.event-day span {
    position: relative;
    z-index: 1;
    color: white;
    font-weight: 800;
    font-size: 1rem;
}

/* ─── COUNTDOWN ───────────────────────────────── */
.countdown-section {
    padding: 40px 20px;
    text-align: center;
}

.countdown-title {
    font-size: 2.2rem;
    color: rgba(255,255,255,0.88);
    margin-bottom: 18px;
}

.countdown-display {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 2px;
    flex-wrap: nowrap;
}

.time-unit {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 58px;
}

.time-number {
    font-size: 2.4rem;
    font-weight: 800;
    color: white;
    line-height: 1;
    letter-spacing: -0.02em;
    font-family: var(--font-display);
}

.time-label {
    font-size: 0.5rem;
    letter-spacing: 0.1em;
    color: rgba(255,255,255,0.65);
    text-transform: uppercase;
    margin-top: 5px;
    font-weight: 600;
}

.time-separator {
    font-size: 2.4rem;
    font-weight: 800;
    color: rgba(255,255,255,0.6);
    line-height: 1;
    padding-top: 0;
    align-self: flex-start;
}

.countdown-for {
    margin-top: 14px;
    font-size: 0.72rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.55);
}

/* ─── ITINERARY ───────────────────────────────── */
.itinerary-section {
    padding: 44px 20px;
    text-align: center;
    background: var(--bg);
}

.timeline {
    position: relative;
    margin: 30px 8px 0;
}

.timeline-line {
    position: absolute;
    left: 50%;
    top: 10px;
    bottom: 10px;
    width: 2px;
    transform: translateX(-50%);
}

.timeline-item {
    position: relative;
    width: 44%;
    margin-bottom: 32px;
}

.timeline-item.right-side {
    margin-left: 56%;
    text-align: left;
}

.timeline-item.left-side {
    margin-right: 56%;
    text-align: right;
}

.timeline-content {
    background: white;
    border-radius: 10px;
    padding: 12px 14px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.08);
}

.timeline-dot {
    position: absolute;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 2px solid;
    top: 50%;
    transform: translateY(-50%);
    background: white;
}

.timeline-item.right-side .timeline-dot { left: -32px; }
.timeline-item.left-side .timeline-dot { right: -32px; }

.timeline-icon {
    margin-bottom: 4px;
}

.timeline-item.left-side .timeline-icon {
    display: flex;
    justify-content: flex-end;
}

.timeline-time {
    display: block;
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    margin-bottom: 2px;
    font-family: var(--font-display);
}

.timeline-activity {
    display: block;
    font-size: 0.62rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    opacity: 0.7;
    font-weight: 600;
}

/* ─── LOCATION ────────────────────────────────── */
.location-section {
    padding: 44px 24px;
    text-align: center;
    background: var(--bg);
}

.location-pin-icon {
    margin-bottom: 8px;
}

.location-card {
    text-align: left;
    border-left: 3px solid;
    padding: 14px 18px;
    margin: 18px 0;
    background: white;
    border-radius: 0 10px 10px 0;
    box-shadow: 0 2px 12px rgba(0,0,0,0.07);
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.location-card .location-info {
    width: 100%;
}

.location-map-row {
    width: 100%;
    display: flex;
    justify-content: flex-end;
}

.location-map-row .location-map-btn {
    white-space: nowrap;
    padding: 9px 20px;
    font-size: 0.72rem;
    margin: 0;
}

.location-type {
    font-size: 0.62rem;
    letter-spacing: 0.14em;
    font-weight: 700;
    text-transform: uppercase;
    margin-bottom: 5px;
}

.venue-name {
    font-size: 1rem;
    font-weight: 700;
}

.address-text {
    font-size: 0.88rem;
    line-height: 1.5;
    opacity: 0.8;
}

.location-time {
    font-size: 1.4rem;
    font-weight: 800;
    margin-top: 6px;
    font-family: var(--font-display);
}

/* ─── BUTTONS ─────────────────────────────────── */
.btn-primary {
    display: inline-block;
    padding: 14px 38px;
    border-radius: 50px;
    color: white;
    font-size: 0.72rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    font-weight: 700;
    text-decoration: none;
    border: none;
    cursor: pointer;
    margin: 18px auto;
    transition: opacity 0.2s, transform 0.15s;
    font-family: inherit;
    box-shadow: 0 4px 16px rgba(0,0,0,0.2);
}

.btn-primary:hover { opacity: 0.88; transform: translateY(-2px); }
.btn-primary:active { transform: translateY(0); opacity: 0.95; }

.whatsapp-btn { box-shadow: 0 4px 16px rgb(53 53 53 / 77%); }
.whatsapp-btn-gris { box-shadow: 0 4px 16px rgb(53 53 53 / 77%); }

/* ─── DRESS CODE ──────────────────────────────── */
.dresscode-section {
    padding: 44px 24px;
    text-align: center;
    background: var(--bg);
}

.dresscode-icon {
    margin-bottom: 8px;
}

.dress-badge {
    display: inline-block;
    padding: 6px 22px;
    border-radius: 50px;
    font-size: 0.72rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    font-weight: 700;
    margin: 8px auto 16px;
}

.dress-details {
    text-align: left;
    max-width: 340px;
    margin: 0 auto;
}

.dress-item {
    background: white;
    border-radius: 10px;
    padding: 14px 18px;
    margin-bottom: 10px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.07);
    font-size: 0.88rem;
    line-height: 1.6;
}

.dress-gender {
    display: flex;
    align-items: center;
    font-size: 0.7rem;
    letter-spacing: 0.08em;
    font-weight: 700;
    text-transform: uppercase;
    margin-bottom: 6px;
}

/* ─── GIFT SECTION ────────────────────────────── */
.gift-section {
    padding: 44px 24px;
    text-align: center;
}

.gift-icon { margin-bottom: 12px; }

.gift-section .section-title-script { color: white !important; }

.gift-text {
    font-size: 0.9rem;
    line-height: 1.75;
    max-width: 340px;
    margin: 0 auto;
    color: rgba(255,255,255,0.88);
    font-family: var(--font-display);
    font-style: italic;
    white-space: pre-line;
}

/* ─── RECOMMENDATIONS ─────────────────────────── */
.recommendations-section {
    padding: 44px 24px;
    text-align: center;
    background: var(--bg);
}

.recommendations-grid {
    display: grid;
    gap: 24px;
    max-width: 380px;
    margin: 0 auto;
}

.recommendation-item {
    background: white;
    border-radius: 14px;
    padding: 24px 20px 20px;
    box-shadow: 0 2px 14px rgba(0,0,0,0.07);
}

.rec-icon {
    margin-bottom: 10px;
    display: flex;
    justify-content: center;
}

.rec-text {
    font-size: 0.88rem;
    line-height: 1.7;
    opacity: 0.8;
}

/* ─── TORN PHOTO ──────────────────────────────── */
.torn-photo-section {
    line-height: 0;
    margin: 10px 0;
}

/* Contenedor principal de la foto — los bordes se anclan a sus edges */
.torn-photo-frame {
    position: relative;
    line-height: 0;
    overflow: visible;
}

/* Franja centrada exactamente sobre el borde SUPERIOR del foto-frame:
   transform: translateY(-50%) lo centra entre dentro y fuera         */
.torn-top {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2.5rem;
    transform: translateY(-50%);
    z-index: 2;
    pointer-events: none;
}

/* Franja centrada exactamente sobre el borde INFERIOR del foto-frame */
.torn-bottom {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 2.5rem;
    transform: translateY(50%);
    z-index: 2;
    pointer-events: none;
}

.torn-top svg, .torn-top img,
.torn-bottom svg, .torn-bottom img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: fill;
}

.torn-photo {
    width: 100%;
    display: block;
    aspect-ratio: 3/4;
    object-fit: cover;
}

/* Slideshow contenedor (cuando hay 2-4 fotos en la sección rasgada) */
.torn-slideshow {
    position: relative;
    width: 100%;
    aspect-ratio: 3/4;
    overflow: hidden;
    display: block;
}

.torn-photo-slide {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 1.4s ease-in-out;
    display: block;
}

.torn-photo-slide.active {
    opacity: 1;
}

/* ─── RSVP ────────────────────────────────────── */
.rsvp-section {
    padding: 44px 20px;
    text-align: center;
    position: relative;
    background: var(--bg);
}

.rsvp-envelope-deco {
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 80px;
    opacity: 0.12;
}

.rsvp-card {
    background: white;
    border-radius: 16px;
    padding: 32px 24px 28px;
    box-shadow: 0 10px 35px rgba(0,0,0,0.12);
    max-width: 360px;
    margin: 0 auto;
    position: relative;
    z-index: 2;
}

.rsvp-seal {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 16px;
    box-shadow: 0 3px 10px rgba(0,0,0,0.25);
}

.rsvp-seal-inner {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,0.35);
    display: flex;
    align-items: center;
    justify-content: center;
}

.rsvp-title { margin-bottom: 10px; }

.rsvp-description {
    font-size: 0.88rem;
    line-height: 1.6;
    opacity: 0.7;
    margin-bottom: 22px;
}

.form-group { margin-bottom: 14px; }

.rsvp-input {
    width: 100%;
    padding: 12px 16px;
    border: 1.5px solid #e0e0e0;
    border-radius: 10px;
    font-size: 0.92rem;
    font-family: inherit;
    background: #fafafa;
    transition: border-color 0.2s;
    color: var(--text);
}

.rsvp-input:focus { outline: none; border-color: var(--primary); background: white; }

.rsvp-textarea {
    resize: none;
    min-height: 80px;
}

.attendance-options {
    display: flex;
    flex-direction: column;
    gap: 10px;
    text-align: left;
}

.attendance-option {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    padding: 10px 14px;
    border-radius: 8px;
    border: 1.5px solid #e0e0e0;
    transition: border-color 0.2s, background 0.2s;
}

.attendance-option:hover { border-color: var(--primary); background: rgba(0,0,0,0.02); }

.attendance-option input[type="radio"] {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

.option-text {
    font-size: 0.9rem;
    font-weight: 500;
}

.rsvp-submit {
    width: 100%;
    padding: 16px;
    font-size: 0.78rem;
    border-radius: 10px;
    margin: 8px 0 0;
}

/* Mensaje personal del organizador */
.rsvp-personal-message {
    border-left: 3px solid var(--accent);
    border-radius: 0 8px 8px 0;
    padding: 11px 14px;
    margin-bottom: 16px;
    text-align: left;
    background: rgba(0,0,0,0.03);
}

.rsvp-personal-text {
    font-size: 0.875rem;
    line-height: 1.6;
    color: var(--text);
    opacity: 0.85;
    font-style: italic;
    margin: 0;
}

/* Nombre del invitado como label (invitación personalizada) */
.rsvp-guest-name-display {
    text-align: center;
    padding: 4px 0 8px;
}

.rsvp-guest-label {
    display: block;
    font-size: 0.68rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--text);
    opacity: 0.5;
    margin-bottom: 3px;
}

.rsvp-guest-name {
    font-size: 1.75rem;
    line-height: 1.2;
    margin: 0;
    color: var(--primary);
}

/* Opción seleccionada en asistencia */
.attendance-option.is-selected {
    border-color: var(--primary);
    background: rgba(0,0,0,0.03);
}

/* Sección de acompañantes */
.rsvp-companions {
    background: rgba(0,0,0,0.025);
    border: 1.5px solid #e8e8e8;
    border-radius: 10px;
    padding: 14px 16px;
    text-align: center;
}

.rsvp-companions-label {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text);
    margin: 0 0 12px;
    line-height: 1.45;
}

.rsvp-companions-sub {
    font-weight: 400;
    opacity: 0.65;
}

.companions-counter {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    margin-bottom: 8px;
}

.companions-btn {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 2px solid currentColor;
    background: white;
    font-size: 1.35rem;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s, color 0.15s;
    font-weight: 700;
    padding: 0;
}

.companions-btn:hover:not(:disabled) {
    background: var(--primary);
    color: white !important;
}

.companions-btn:disabled {
    opacity: 0.25;
    cursor: default;
}

.companions-count {
    font-size: 2.25rem;
    font-weight: 700;
    min-width: 44px;
    text-align: center;
    display: inline-block;
    line-height: 1;
}

.companions-hint {
    font-size: 0.78rem;
    opacity: 0.55;
    color: var(--text);
    margin: 0;
}

/* ─── CONTACT ─────────────────────────────────── */
.contact-section {
    padding: 44px 24px;
    text-align: center;
    background: var(--bg);
}

.contact-desc {
    font-size: 0.9rem;
    opacity: 0.7;
    margin-bottom: 4px;
    line-height: 1.5;
}

.contact-name {
    font-size: 0.85rem;
}

/* ─── GALERÍA DE INVITADOS ────────────────────── */
.gallery-section {
    padding: 44px 24px;
    text-align: center;
    background: var(--bg);
}

.gallery-desc {
    font-size: 0.9rem;
    opacity: 0.75;
    line-height: 1.55;
    max-width: 360px;
    margin: 0 auto 22px;
}

.gallery-dropzone {
    max-width: 420px;
    margin: 0 auto 16px;
    padding: 28px 20px;
    border: 2px dashed;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.45);
    cursor: pointer;
    transition: background 0.2s ease, transform 0.15s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}

.gallery-dropzone.is-dragover {
    background: rgba(255, 255, 255, 0.85);
    transform: scale(1.01);
}

.gallery-dz-main {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text);
}

.gallery-dz-sub {
    font-size: 0.78rem;
    opacity: 0.6;
}

.gallery-actions {
    display: flex;
    gap: 10px;
    justify-content: center;
    flex-wrap: wrap;
    max-width: 420px;
    margin: 0 auto;
}

.gallery-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 11px 20px;
    border-radius: 999px;
    font-size: 0.88rem;
    font-weight: 600;
    color: white;
    cursor: pointer;
    border: 2px solid transparent;
    user-select: none;
    transition: opacity 0.15s ease;
    flex: 1 1 auto;
    min-width: 140px;
}

.gallery-btn:active { opacity: 0.8; }

.gallery-btn-outline {
    background: transparent !important;
}

.gallery-status {
    min-height: 1.2em;
    font-size: 0.82rem;
    margin: 14px auto 0;
    font-weight: 500;
}

.gallery-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    max-width: 460px;
    margin: 18px auto 0;
}

.gallery-item {
    display: block;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    border-radius: 10px;
    background: rgba(0, 0, 0, 0.05);
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.12);
}

.gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.gallery-item-new {
    animation: galleryPop 0.4s ease;
}

/* Galería habilitada pero aún no disponible (antes del día D) */
.gallery-locked-card {
    max-width: 420px;
    margin: 8px auto 0;
    padding: 30px 24px;
    border: 2px dashed;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.45);
    opacity: 0.92;
}

.gallery-locked-icon {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 14px;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
}

.gallery-locked-title {
    font-size: 0.98rem;
    font-weight: 600;
    color: var(--text);
    line-height: 1.4;
    margin-bottom: 8px;
}

.gallery-locked-date {
    font-size: 0.9rem;
    font-weight: 600;
    text-transform: capitalize;
    margin-bottom: 10px;
}

.gallery-locked-sub {
    font-size: 0.82rem;
    opacity: 0.65;
    line-height: 1.5;
    max-width: 320px;
    margin: 0 auto;
}

@keyframes galleryPop {
    from { transform: scale(0.6); opacity: 0; }
    to   { transform: scale(1);   opacity: 1; }
}

/* ─── FOOTER ──────────────────────────────────── */
.invitation-footer {
    padding: 36px 24px;
    text-align: center;
}

.footer-floral {
    font-size: 1rem;
    margin-bottom: 8px;
}

.footer-name {
    font-size: 2.4rem;
    color: white;
    line-height: 1.1;
    margin-bottom: 8px;
}

.footer-date {
    font-size: 0.75rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

/* ─── RESPONSIVE (desktop centering) ─────────── */
@media (min-width: 480px) {
    body { box-shadow: 0 0 60px rgba(0,0,0,0.1); }
}