:root {
    --color-melon: #FBEEC1;
    --color-rose-gold: #B76E79;
    --color-gold: #C5A059;
    --color-forest: #0A2903;
    --color-text-dark: #333;
    --font-titulo: 'Playfair Display', serif;
    --font-cuerpo: 'Lato', sans-serif;
}
body {
    font-family: var(--font-cuerpo);
    color: var(--color-text-dark);
    overflow-x: hidden;
    margin: 0;
    padding: 0;
}
#fondo-fijo {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: var(--color-forest);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    z-index: -2;
}
h1, h2, h3, h4 { font-family: var(--font-titulo); }
.hero {
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    background: rgba(0, 0, 0, 0.4);
    position: relative;
    z-index: 2;
}
.hero-content {
    padding: 40px;
    background: rgba(251, 238, 193, 0.1);
    border-radius: 15px;
    backdrop-filter: blur(8px);
    border: 1px solid rgba(197, 160, 89, 0.5);
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
}
.hero h1 {
    font-size: 4.5rem;
    color: var(--color-melon);
    text-shadow: 2px 2px 4px rgba(0,0,0,0.8);
}
.seccion-solida {
    background-color: rgba(253, 252, 249, 0.98);
    box-shadow: 0 -15px 40px rgba(0,0,0,0.4);
    position: relative;
    z-index: 2;
    border-top: 5px solid var(--color-gold);
}
.card-relieve {
    background: linear-gradient(145deg, var(--color-forest), #124006);
    color: var(--color-melon);
    border: 2px solid var(--color-gold);
    border-radius: 30px;
    padding: 40px 20px;
    box-shadow: 10px 10px 20px rgba(0,0,0,0.15), inset 2px 2px 5px rgba(255, 255, 255, 0.1);
    transition: all 0.4s ease;
}
.card-relieve:hover {
    transform: translateY(-5px);
    box-shadow: 0 0 20px var(--color-gold);
}
.btn-accion {
    background-color: transparent;
    color: var(--color-melon);
    border: 2px solid var(--color-gold);
    padding: 10px 25px;
    border-radius: 30px;
    font-weight: bold;
    transition: all 0.4s ease;
}
.btn-accion:hover {
    background-color: var(--color-gold);
    color: var(--color-forest);
    box-shadow: 0 0 20px var(--color-gold);
}
.contador-flotante {
    position: fixed;
    top: 25px;
    left: 0; right: 0; margin: 0 auto;
    width: max-content;
    background: rgba(10, 41, 3, 0.85);
    border: 2px solid var(--color-gold);
    padding: 10px 25px;
    border-radius: 50px;
    display: flex;
    gap: 20px;
    z-index: 1040;
    color: var(--color-melon);
}
.btn-flotante {
    position: fixed;
    top: 25px;
    right: 30px;
    background-color: var(--color-forest);
    color: var(--color-gold) !important;
    border: 2px solid var(--color-gold);
    padding: 10px 25px;
    border-radius: 50px;
    z-index: 1040;
    transition: 0.4s;
}
.slider-contenedor {
    border-radius: 20px;
    overflow: hidden;
    border: 4px solid var(--color-gold);
}
#sparks-container { position: fixed; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 999; }
.spark { position: absolute; background-color: var(--color-gold); border-radius: 50%; animation: floatUp 5s infinite ease-in; opacity: 0; }
@keyframes floatUp {
    0% { transform: translateY(100vh) scale(0); opacity: 0; }
    20% { opacity: 0.8; }
    100% { transform: translateY(-10vh) scale(1.5); opacity: 0; }
}
@media (max-width: 768px) {
    .hero h1 { font-size: 3rem; }
    .btn-flotante { top: 85px; right: 20px; }
}
.modal-title {
    color: var(--color-forest) !important;
    font-weight: bold;
}
.texto-invitacion-container {
    max-width: 800px;
    margin: 0 auto;
}

.texto-invitacion {
    font-size: 1.35rem; /* Tamaño un poco más ajustado para ser legible sin invadir */
    line-height: 1.8;
    color: var(--color-forest);
    font-weight: 350; /* Un poco más de peso para que no se vea "apagado" */
    margin-bottom: 1.5rem; /* Espaciado elegante entre párrafos */
}

    .texto-invitacion:last-child {
        margin-bottom: 0; /* Quita el margen del último párrafo para que el ícono quede bien centrado */
    }