/* ===== FUENTE ===== */
@font-face {
    font-family: 'Eternal Blossom';
    src: url('fonts/eternalblossomalt.woff2') format('woff2'),
         url('fonts/eternalblossomalt.woff') format('woff');
    font-weight: normal; font-style: normal; font-display: swap;
}

/* ===== VARIABLES ===== */
:root {
    --wine:      #671529;
    --text:      #4a2028;
    --text-soft: #9a7080;
    --bg:        #f0e5e6;
}

/* ===== RESET ===== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

/* ===== BODY ===== */
body {
    font-family: 'Montserrat', sans-serif;
    color: var(--text);
    background-color: var(--bg);
    min-height: 100vh;
    overflow-x: hidden;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: flex-start;
}

body::before {
    content: "";
    position: fixed; inset: 0; z-index: 0;
    background-image: url('assets/BGregina.png');
    background-size: cover; background-position: center;
    opacity: 0.20; pointer-events: none;
}

/* ===== DECORACIONES ===== */
.deco {
    position: fixed;
    pointer-events: none;
    z-index: 1;
}

.deco-orchidsota-main {
    left: -5vw; bottom: -3vh;
    width: clamp(300px, 40vw, 600px);
    opacity: 0.88;
    animation: drift 10s ease-in-out infinite;
    transform-origin: bottom center;
    z-index: 2;
}

.deco-orchid-main {
    right: -3vw; bottom: -2vh;
    width: clamp(240px, 30vw, 460px);
    opacity: 0.92;
    animation: drift 10s ease-in-out infinite;
    transform-origin: bottom center;
}
.deco-orchid-solo {
    right: 10vw; top: -3vh;
    width: clamp(140px, 18vw, 280px);
    opacity: 0.85;
    animation: drift 12s ease-in-out infinite 1.4s;
}
.deco-ramita {
    right: -2vw; top: -1vh;
    width: clamp(100px, 15vw, 210px);
    opacity: 0.82;
    animation: drift 11s ease-in-out infinite 2.2s;
}
.deco-plantita {
    left: 0.5vw; top: 36vh;
    width: clamp(44px, 7vw, 100px);
    opacity: 0.70;
    animation: drift 13s ease-in-out infinite 0.8s;
}
.deco-bolitas {
    right: -1vw; bottom: -1vh;
    width: clamp(80px, 13vw, 190px);
    opacity: 0.78;
    animation: drift 11s ease-in-out infinite 3.1s;
    display: none;  /* ocultas en móvil, no quedan bien con el espacio reducido */  
}
.deco-star {
    right: 20vw; top: 30vh;
    width: clamp(70px, 10vw, 150px);
    opacity: 0.76;
    animation: starFloat 8s ease-in-out infinite;
}

@keyframes drift {
    0%, 100% { transform: translateY(0px); }
    50%       { transform: translateY(-7px); }
}
@keyframes starFloat {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50%       { transform: translateY(-11px) rotate(4deg); }
}

/* ===== CONTENEDOR ===== */
.container {
    position: relative;
    z-index: 10;
    width: 100%;
    max-width: 400px;
    margin: 0 auto;
    padding: 4rem 2rem 3rem;
    text-align: center;
}

/* ===== ETERNAL BLOSSOM — adelgazada ===== */
/* Todas las piezas script comparten estos estilos base */
.main-title,
.sub-title,
.info-line,
.countdown-item span,
.script-heading {
    font-family: 'Eternal Blossom', cursive;
    font-weight: lighter;
    color: var(--wine);
}

/* ===== HERO ===== */
.hero { margin-bottom: 2.8rem; }  /* aire generoso debajo del título */

.main-title {
    /* Tamaño fijo que cabe en una línea sin quebrarse */
    font-size: 3rem;
    line-height: 1.0;
    white-space: nowrap;   /* "Regina's" nunca se parte */
    padding-bottom: 2rem;
}

.sub-title {
    font-size: 2.6rem;
    line-height: 1.0;
    white-space: nowrap;   /* "26th birthday" junto, sin salto */
}

/* ===== COUNTDOWN ===== */
.countdown-section { margin: 0 0 2.8rem; }  /* mismo aire que hero */

.countdown-label {
    font-size: 0.55rem;
    font-weight: 700;
    letter-spacing: 4px;
    color: var(--text-soft);
    margin-bottom: 0.5rem;
    text-transform: uppercase;
}

.countdown-container { display: flex; justify-content: center; }

.countdown-item {
    display: flex; flex-direction: column; align-items: center;
    min-width: 52px; position: relative;
}

.countdown-item:not(:last-child)::after {
    content: "·";
    position: absolute; right: -3px; top: 3px;
    font-size: 1.3rem; color: var(--wine); opacity: 0.22;
    line-height: 1;
}

.countdown-item span {
    font-size: 1.9rem;
    line-height: 1;
}

.countdown-item small {
    font-size: 0.46rem; font-weight: 600;
    letter-spacing: 2px; text-transform: uppercase;
    color: var(--text-soft); margin-top: 2px;
    /* small no es Eternal Blossom, no hereda el stroke */
    -webkit-text-stroke: 0; text-shadow: none;
}

/* ===== SEPARADOR ===== */
.soft-divider {
    font-size: 0.7rem;
    letter-spacing: 6px;
    color: var(--wine);
    opacity: 0.22;
    margin: 0 auto 2.8rem;  /* mucho aire abajo */
    user-select: none;
}

/* ===== INFO EVENTO ===== */
.event-info {
    display: flex;
    flex-direction: column;
    align-items: center;
    /* gap entre líneas del mismo bloque: mínimo */
    gap: 0;
    margin-bottom: 2.8rem;   /* aire antes del siguiente divider */
}

.info-line {
    font-size: clamp(1.35rem, 4.2vw, 1.9rem);
    line-height: 1.3;
    white-space: nowrap;
}

/* "Domingo · 17 de mayo" van muy juntos, misma línea visual */
.info-date { margin-bottom: 0.8rem; }   /* pequeño respiro antes de hora */

.info-time {
    font-size: clamp(1.2rem, 3.8vw, 1.75rem);
    opacity: 0.88;
    margin-bottom: 0.8rem;
}

.info-place { line-height: 1.3; }

/* ===== BOTONES ===== */
.btn-ghost {
    display: inline-block;
    margin-top: 1.1rem;
    color: var(--wine);
    text-decoration: none;
    font-weight: 600;
    font-size: 0.56rem;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    border: 1px solid rgba(103,21,41,0.4);
    padding: 7px 18px;
    border-radius: 30px;
    transition: all 0.3s;
    opacity: 0.72;
}
.btn-ghost:hover { opacity: 1; background: rgba(103,21,41,0.05); }

.btn-rsvp {
    display: inline-block;
    background: transparent;
    color: var(--wine);
    border: 1.5px solid var(--wine);
    padding: 11px 26px;
    border-radius: 30px;
    font-weight: 700;
    font-size: 0.58rem;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    cursor: pointer;
    text-decoration: none;
    transition: background 0.25s, color 0.25s, box-shadow 0.25s;
    box-shadow: 0 3px 12px rgba(103,21,41,0.10);
}
.btn-rsvp:hover {
    background: var(--wine);
    color: #fff;
    box-shadow: 0 6px 20px rgba(103,21,41,0.26);
}

/* ===== RSVP ===== */
.script-heading {
    font-size: clamp(1.8rem, 5.2vw, 2.8rem);
    line-height: 1;
    margin: 0 0 0.3rem;
}

.instruction-text {
    font-size: 0.65rem;
    line-height: 1.7;
    color: var(--text-soft);
    max-width: 230px;
    margin: 0 auto;
    /* Montserrat, sin stroke */
    -webkit-text-stroke: 0; text-shadow: none;
}

.rsvp-simple {
    display: flex; flex-direction: column;
    align-items: center; gap: 0.6rem;
}

/* ===== FOOTER ===== */
footer { margin-top: 2.2rem; padding-bottom: 1rem; }
footer a {
    font-size: 0.5rem; letter-spacing: 3px;
    color: var(--text-soft); text-decoration: none;
    opacity: 0.38; transition: opacity 0.2s;
    -webkit-text-stroke: 0; text-shadow: none;
}
footer a:hover { opacity: 1; }

/* ===== ENTRADA ===== */
.fade-in > * {
    opacity: 0;
    animation: riseIn 0.9s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.fade-in > *:nth-child(1) { animation-delay: 0.08s; }
.fade-in > *:nth-child(2) { animation-delay: 0.20s; }
.fade-in > *:nth-child(3) { animation-delay: 0.32s; }
.fade-in > *:nth-child(4) { animation-delay: 0.44s; }
.fade-in > *:nth-child(5) { animation-delay: 0.56s; }
.fade-in > *:nth-child(6) { animation-delay: 0.68s; }
.fade-in > *:nth-child(7) { animation-delay: 0.80s; }

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

/* ===== MÓVIL ===== */
@media (max-width: 600px) {
    .container {
        max-width: 100%;
        padding: 3rem 3.5rem 2.5rem;
    }

    /* "Regina's" y "26th birthday" pueden necesitar wrappear en móvil chico */
    .main-title, .sub-title, .info-line { white-space: normal; }

    .deco-orchidsota-main { width: 100vw; left: -40vw; }
    .deco-orchid-main { width: 40vw; right: 5vw; }
    .deco-orchid-solo { width: 30vw; left: 0vw; top: 18vh; }
    .deco-ramita      { width: 24vw; right: -3vw; }
    .deco-plantita    { width: 13vw; left: 0vw;}
    .deco-bolitas     { width: 22vw; right: -10vw; bottom: 25vh; display: block; transform: rotateX(180deg); -webkit-transform: rotateX(180deg); -moz-transform: rotateX(180deg); -ms-transform: rotateX(180deg); -o-transform: rotateX(180deg); }
    .deco-star        { width: 25vw; right: -5vw; }
}