/* Importa las fuentes de Google Fonts */
    @import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,700;1,400;1,700&family=Cormorant+Garamond:ital,wght@0,400;0,700;1,400;1,700&family=Great+Vibes&display=swap');


    
    /* Estilos Generalses */
    body {
        margin: 0; /* Elimina el margen predeterminado del body */
        font-family: 'Cormorant Garamond', serif; /* Fuente base para todo el texto */
        color: #F2E5D7; /* Color de texto Ivory como base */
        background-color: #3f5e49; /* Fondo azul marino para el body */
        display: flex; /* Para centrar el contenedor de la invitación */
        justify-content: center; /* Centra horizontalmente */
        min-height: 100vh; /* Asegura que el body ocupe al menos el alto de la ventana */
        overflow-x: hidden; /* Evita scroll horizontal */
    }

    .invitation-container {
        width: 100%; /* Ocupa todo el ancho disponible */
        max-width: 450px; /* Ancho máximo para simular un diseño de invitación vertical */
        background-color: #3f5e49; /* Un verde oscuro similar al de tu imagen original para el fondo principal */
        background-image: linear-gradient(to bottom, #3f5e49, #3f5e49); /* Degradado sutil */
        box-shadow: 0 0 20px rgba(0, 0, 0, 0.5); /* Sombra para dar profundidad */
        position: relative; /* Para posicionar elementos internos */
        overflow: hidden; /* Asegura que el contenido no se desborde del contenedor */
    }

    /* Estilos para cada sección */
    .section {
        padding: 30px 20px; /* Espaciado interno para las secciones */
        text-align: center; /* Centra el texto en todas las secciones */
        position: relative;
        z-index: 1; /* Asegura que el texto y las imágenes de las secciones estén por encima del fondo */
    }


    /* ======================================================= */
    /* === PANTALLA DE BIENVENIDA (SPLASH SCREEN) - DISEÑO FINAL === */
    /* ======================================================= */

    .splash-screen {
        /* Posicionamiento y Caja */
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        z-index: 2000;
        
        /* Fondo y Efectos */
        background-color: #3f5e49; /* Sage Green */
        opacity: 1;
        transition: opacity 1s ease-out, visibility 1s;
    }

    .splash-screen.hidden {
        /* Efectos */
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
    }

    /* ------------------------------------------------------- */
    /* === Estilo de la Flor (Movida a la derecha) === */
    /* ------------------------------------------------------- */
    .splash-floral-detail-center {
        /* Posicionamiento */
        position: absolute;
        top: 50%; /* Inicio en el 50% vertical */
        right: 0; /* Pegado al borde derecho */
        z-index: 0;
        
        /* Caja y Dimensiones */
        width: 300px; /* Tamaño de la flor, ajusta si es necesario */
        height: auto; /* Mantiene la proporción */
        object-fit: contain;
        object-position: center right; /* Centra la imagen dentro de su contenedor */
        
        /* Efectos */
        transform: translateY(-50%) translateX(-100px); /* Centra verticalmente y mueve hacia afuera */
        opacity: 1;
    }

    /* ------------------------------------------------------- */
    /* === Contenido (Nombres y Botón) === */
    /* ------------------------------------------------------- */
    .splash-content-center {
        /* Posicionamiento y Caja */
        z-index: 10;
        display: flex;
        flex-direction: column;
        margin-right: 50px; /* Mueve el contenedor completo 50px a la izquierda */
        align-items: flex-start; /* Alinea los elementos a la izquierda del contenedor */
        
        /* Tipografía y Color */
        text-align: left;
        color: #F2E5D7;
    }

    /* Estilo de los nombres individuales */
    .splash-name-vertical {
        /* Tipografía */
        font-family: 'Great Vibes', cursive;
        font-size: 7.5em; 
        font-weight: 400;
        line-height: 1.4; /* Junta las líneas */
        
        /* Caja */
        margin: 0; /* Elimina márgenes predeterminados */
        padding: 0;
        
        /* Color */
        color: #F2E5D7; /* Nombres en Ivory */
        
        /* Transformaciones */
        transform: translateX(50px);
    }

    /* Estilo del Ampersand */
    .splash-ampersand {
        /* Tipografía */
        font-family: 'Great Vibes', cursive;
        font-size: 5em;
        line-height: 1;
        
        /* Caja */
        margin: 10px 0; /* Espaciado entre nombres */
        
        /* Color */
        color: #F2E5D7; /* Ampersand en Ivory (anteriormente Rust) */
        
        /* Transformaciones */
        transform: translateX(180px);
    }

    /* Estilo del Botón */
    .splash-button {
        /* Caja y Dimensiones */
        padding: 8px 20px; 
        margin-top: 30px; /* Espacio debajo de los nombres */
        border: none;
        border-radius: 5px;
        
        /* Interacción */
        cursor: pointer;
        
        /* Tipografía */
        font-family: 'Cormorant Garamond', serif;
        font-size: 0.9em;
        font-weight: 500;
        letter-spacing: 1px;
        
        /* Fondo y Color */
        background-color: #B86141; 
        color: #fff;
        
        /* Transformaciones y Efectos */
        transform: translateX(160px);
        transition: background-color 0.3s;
    }

    .splash-button:hover {
        background-color: #a35339;
    }

   
    /* ======================================================= */
    /* === SECCIÓN SUPERIOR (Nombres y frase inicial) === */
    /* ======================================================= */
    .top-section {

        /* Caja y Dimensiones */
        padding-top: 130px;
        padding-bottom: 80px;
        padding-left: 30px;
        padding-right: 100px; /* Carril de seguridad para el texto */
        
        /* Posicionamiento */
        position: relative; 
        
        /* Fondo y Color */
        background-color: #3f5e49;
    }

    /* ------------------------------------------------------- */
    /* Modificación: Fondo de flores */
    /* ------------------------------------------------------- */
    .floral-detail-top {
        /* Posicionamiento */
        position: absolute;
        top: 0;
        right: 0;
        z-index: 0;
        
        /* Caja y Dimensiones */
        width: 250px; 
        height: 75%;
        object-fit: contain;
        object-position: top right;
        
        /* Efectos */
        transform: none;
        opacity: 1;
    }

    /* ------------------------------------------------------- */
    /* Clase: Acompañados */
    /* ------------------------------------------------------- */
    .acompaniados {
        /* Caja y Dimensiones */
        margin-bottom: 25px;
        padding-left: 0; 
        
        /* Tipografía */
        font-size: 1.1em; 
        font-style: italic;
        text-align: left;
        
        /* Color */
        color: #F2E5D7;
    }

    /* ------------------------------------------------------- */
    /* Clases: Nombres (Contenedores Flex) */
    /* ------------------------------------------------------- */
    .groom-name,
    .bride-name {
        /* Caja y Dimensiones */
        width: 100%; /* Ocupa el 100% del carril seguro */
        margin: 0;
        padding-left: 0;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        
        /* Tipografía */
        font-family: 'Great Vibes', cursive;
        
        /* Color */
        color: #F2E5D7;
    }

    /* Clases: Nombres de pila (Ricardo, Andrea) */
    .groom-name .first-name,
    .bride-name .first-name {
        /* Tipografía */
        font-size: 1.5em; 
        line-height: 1.3;
        
        /* Caja y Dimensiones */
        margin-bottom: -15px;
        margin-left: 20px; 
    }

    /* Clases: Apellidos (Ricardo) */
    .groom-name .last-name{
        /* Tipografía */
        font-size: 1.5em; 
        line-height: 1.3;
        
        /* Caja y Dimensiones */
        margin-top: 0; 
        margin-left: 85px; 
    }

    /* Clases: Apellidos (Andrea) */
    .bride-name .last-name {
        /* Tipografía */
        font-size: 1.5em; 
        line-height: 1.3;
        
        /* Caja y Dimensiones */
        margin-top: 0; 
        margin-left: 70px; 
    }

    /* ------------------------------------------------------- */
    /* Clase: Ampersand (&) */
    /* ------------------------------------------------------- */
    .ampersand {
        /* Tipografía */
        font-family: 'Great Vibes', cursive;
        font-size: 2.5em;
        line-height: 1;
        
        /* Caja y Dimensiones */
        margin: 10px 0 -20px 125px; /* Top 10px, Bottom -20px, Left 125px */
        padding-left: 0; 
        text-align: left;
        
        /* Color */
        color: #F2E5D7;
    }

    /* ------------------------------------------------------- */
    /* Clase: Solicitan */
    /* ------------------------------------------------------- */
    .solicitan {
        /* Caja y Dimensiones */
        width: 100%; /* Ocupa el 100% del carril seguro */
        margin: 40px 0 0 0; /* Margen superior 40px, el resto 0 */
        padding: 0; 
        box-sizing: border-box; 
        
        /* Tipografía */
        font-size: 1.2em;
        line-height: 1.1;
        font-style: italic;
        text-align: left;
        
        /* Color */
        color: #F2E5D7;
    }

    /* ------------------------------------------------------- */
    /* Clase: Versículo Bíblico */
    /* ------------------------------------------------------- */
    .bible-verse {
        /* Tipografía */
        font-family: 'Cormorant Garamond', serif; 
        font-size: 1.2em;
        font-style: italic;
        line-height: 1.1;
        text-align: center; 
        
        /* Color */
        color: #F2E5D7;
        
        /* Posicionamiento */
        position: static; /* Regresamos al flujo normal */
        
        /* Caja y Dimensiones (Truco para ignorar padding-right) */
        width: calc(100% + 90px); /* 1. Extiende el ancho */
        margin-top: 50px; 
        margin-right: -100px;/* 2. Tira del elemento hacia la derecha */
        margin-left: 0;
        padding: 0;
    }
   /* ======================================================= */
/* === SECCIÓN DEL MEDIO (Fecha y lugar) === */
/* ======================================================= */

.middle-section {
    /* Caja y Dimensiones */
    padding-top: 50px;
    padding-bottom: 50px;
    
    /* Fondo y Color */
    background-image: url('flores4.png'); /* Ruta local directa */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    
    position: relative; 
    color: #F2E5D7; /* Color Ivory */      
    
    /* **CORRECCIÓN CLAVE DE CENTRADO:** Asegura que el texto dentro del contenedor se centre. */
    text-align: center;
}

/* Capa de superposición para legibilidad */
.middle-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    /* Fondo oscuro semi-transparente para que el texto resalte */
    background: rgba(63, 94, 73, 0.9); 
    z-index: 1; 
}

/* Asegura que todos los elementos internos estén por encima del overlay */
.middle-section > * {
    position: relative;
    z-index: 2;
}


/* ------------------------------------------------------- */
/* Clases: Marco Decorativo */
/* ------------------------------------------------------- */
.decorative-frame {
    /* Caja y Dimensiones */
    width: 80%;
    max-width: 300px;
    margin: 20px auto;
    display: block;
    position: relative; 
    z-index: 3;
}

.decorative-frame.top {
    /* Caja y Dimensiones */
    margin-bottom: 30px;
    transform: translateX(-1px);
}

.decorative-frame.bottom {
    /* Caja y Dimensiones */
    margin-top: 30px;
    
    /* Transformaciones */
    transform: translateX(-1px);
    transform: rotate(180deg);
    
}

/* ------------------------------------------------------- */
/* Clase: Mes */
/* ------------------------------------------------------- */
.month {
    /* Tipografía */
    font-family: 'Cormorant Garamond', serif; 
    font-size: 2.2em;
    font-weight: 700;
    text-transform: uppercase;
    
    /* Caja y Dimensiones */
    margin-bottom: 7px;
}

/* ------------------------------------------------------- */
/* Clase: Contenedor de Fecha y Hora */
/* ------------------------------------------------------- */
.date-time {
    /* Caja y Dimensiones */
    margin-bottom: 7px;
    /* **CORRECCIÓN CLAVE:** Mantener el flexbox para centrar la hora, la línea y la fecha */
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Modificación: Línea separadora */
.date-time .separator {
    /* Tipografía */
    font-size: 3em; 
    
    /* Caja y Dimensiones */
    margin: 0 5px; 
    
    /* Color */
    color: #F2E5D7; 
}

/* Párrafos dentro de Fecha y Hora */
.date-time p {
    /* Tipografía */
    font-family: 'great vibes', serif; 
    font-size: 1.8em;
    font-weight: 400;
    
    /* Caja y Dimensiones */
    margin: 0 10px; 
}

/* ------------------------------------------------------- */
/* Clases: Lugar/Ciudad */
/* ------------------------------------------------------- */
.location-city-name {
    /* Tipografía */
    font-family: 'Cormorant Garamond', serif;
    font-size: 1em; 
    font-weight: 700;
    text-transform: uppercase;
    
    /* **CORRECCIÓN CLAVE:** Asegura que los nombres de lugar y año estén en línea */
    display: inline-block; 
    margin-top: 0px; 
    margin-bottom: 30px; 
    
    /* Color */
    color: #F2E5D7;
}

.location-city-year {
    /* Tipografía */
    font-family: 'great vibes', serif;
    font-size: 1.5em; 
    font-weight: 400;
    
    /* **CORRECCIÓN CLAVE:** Asegura que los nombres de lugar y año estén en línea */
    display: inline-block; 
    margin-top: 0px;
    margin-bottom: 30px; 
    margin-left: 5px; 
    
    /* Color */
    color: #F2E5D7;
}

/* ------------------------------------------------------- */
/* Clases: Información de Recepción */
/* ------------------------------------------------------- */
.reception-info {
    /* Tipografía */
    font-size: 1.2em;
    
    /* Caja y Dimensiones */
    margin-bottom: 0px;
}

.reception-address {
    /* Tipografía */
    font-size: 1.2em;
    line-height: 1;
    font-weight: 400;
    
    /* Caja y Dimensiones */
    padding: 0 5px;
}
.btn-ubication {
    /* Caja y Dimensiones */
    display: block;
    width: 45%;
    padding: 12px;
    border: none;
    border-radius: 4px;
    transform: translateX(60%);
    
    /* Interacción */
    cursor: pointer;
    
    /* Fondo y Color */
    background-color: #B86141; /* Color Rust */
    color: #fff;
    
    /* Tipografía */
    font-family: 'Playfair Display', serif;
    font-weight: 700;
    font-size: 1.1em;
    text-transform: uppercase;
    margin-top: 10px;
    transition: background-color 0.3s ease;
}

.btn-ubication:hover {
    background-color: #d17551; /* Ligeramente más claro al pasar el ratón */
}
    /* ======================================================= */
    /* === SECCIÓN INFERIOR (Contador Regresivo) === */
    /* ======================================================= */

    .bottom-section {
        /* Caja y Dimensiones */
        padding-top: 10px;
        padding-bottom: 40px;
        margin-top: -20px; /* AJUSTE CLAVE: Subimos la sección 20px */
        margin-bottom: 0;
        
        /* Fondo y Color */
        background-color: rgba(242, 229, 215, 0.85); /* Ivory con 70% de opacidad */
        color: #3f5e49; 
        background-image: url('Marco2.png');
        background-size: contain;
        background-position: center;
        background-repeat: no-repeat;
        
        /* Bordes y Efectos */
        box-shadow: 
            inset 0 20px 15px -15px rgba(63, 94, 73, 0.6), 
            inset 0 -15px 15px -15px rgba(63, 94, 73, 0.6); 
    }

    /* ------------------------------------------------------- */
    /* Clase: Etiqueta del Contador (General) */
    /* ------------------------------------------------------- */
    .countdown-label {
        /* Tipografía */
        font-size: 1.5em;
        font-style: italic;
        
        /* Caja y Dimensiones */
        margin-bottom: 0px;
    }

    /* ------------------------------------------------------- */
    /* Clase: Contenedor Principal del Temporizador */
    /* ------------------------------------------------------- */
    .countdown-timer {
        /* Flexbox */
        display: flex;
        justify-content: center;
        align-items: flex-start; /* Alinea los números arriba */
        gap: 5px; /* Espacio entre los bloques del contador */
    }

    /* ------------------------------------------------------- */
    /* Clase: Caja Individual de Tiempo (Días, Horas, etc.) */
    /* ------------------------------------------------------- */
    .timer-box {
        /* Flexbox */
        display: flex;
        flex-direction: column;
        align-items: center;
        
        /* Caja y Dimensiones */
        min-width: 60px; /* Ancho mínimo para cada caja de tiempo */
    }

    /* Selector: Los números del contador (Primer span en .timer-box) */
    .timer-box span:first-child { 
        /* Tipografía */
        font-family: 'Great Vibes', serif;
        font-size: 2.5em; /* Tamaño grande para los números */
        font-weight: 700;
        line-height: 1; /* Ajusta la altura de línea */
        
        /* Color */
        color: #B86141; /* Color Rust para los números */
        
        /* Caja y Dimensiones */
        margin-bottom: 5px;
    }

    /* Selector: Las etiquetas (DÍAS, HORAS, etc.) */
    .timer-box .label { 
        /* Tipografía */
        font-size: 0.8em;
        text-transform: uppercase;
        
        /* Color */
        color: #3f5e49; /* Color Sage Green (Ivory se puso en el comentario original) */
    }

    /* ------------------------------------------------------- */
    /* Clase: Separadores de Dos Puntos (:) */
    /* ------------------------------------------------------- */
    .countdown-timer .colon {
        /* Tipografía */
        font-family: 'Cormorant Garamond', serif;
        font-size: 2.8em;
        font-weight: 700;
        line-height: 1;
        
        /* Color */
        color: #B86141; /* Color Rust para los dos puntos */
        
        /* Flexbox */
        align-self: flex-start; 
        
        /* Caja y Dimensiones (Ajuste fino de posición) */
        padding-top: 0px; 
        margin-top: -4px; /* AJUSTE CLAVE: Mueve los dos puntos hacia abajo 4px */
    }
    /* ======================================================= */
    /* === NUEVA SECCIÓN: CÓDIGO DE ETIQUETA (UNIFICADO) === */
    /* ======================================================= */

    .etiqueta-section {
        /* Caja y Dimensiones */
        padding: 35px 15px 20px 15px; /* Mantenemos el padding ajustado */
        margin-bottom: 0; 
        
        /* Fondo y Color */
        background-color: rgba(242, 229, 215, 0.85); /* Ivory con 70% de opacidad */
        color: #3f5e49;
        
        /* Alineación */
        text-align: center;
        box-shadow: 
            inset 0 15px 15px -15px rgba(63, 94, 73, 0.6), 
            inset 0 -20px 15px -15px rgba(63, 94, 73, 3); 
    }

    /* ------------------------------------------------------- */
    /* Clase: Título de la Sección */
    /* ------------------------------------------------------- */
    .etiqueta-titulo {
        /* Tipografía */
        font-family: 'Cormorant Garamond', serif;
        font-size: 1.55em; 
        font-weight: 700;
        text-transform: uppercase;
        
        /* Caja y Dimensiones */
        margin-bottom: 17px; 
    }

    /* ------------------------------------------------------- */
    /* Clase: Contenedor Principal de Vestimenta */
    /* ------------------------------------------------------- */
    .vestimenta-container-unificada {
        /* Flexbox y Alineación */
        display: flex;
        flex-direction: column;
        align-items: center;
        
        /* Caja y Dimensiones */
        max-width: 400px; /* Limita el ancho total del par de GIFs + texto */
        margin: 0 auto; /* Centra el contenedor principal de vestimenta */
    }

    /* ------------------------------------------------------- */
    /* Clase: Contenedor de las dos imágenes */
    /* ------------------------------------------------------- */
    .vestimenta-imagenes {
        /* Flexbox y Alineación */
        display: flex;
        justify-content: center;
        align-items: flex-end; /* Alinea los GIFs por abajo */
        gap: 10px; /* Espacio entre los dos GIFs */
        
        /* Caja y Dimensiones */
        margin-bottom: 10px; /* Espacio antes del texto de descripción */
    }

    /* ------------------------------------------------------- */
    /* Clase: GIF Individual de Vestimenta */
    /* ------------------------------------------------------- */
    .vestimenta-gif-unificada {
        /* Caja y Dimensiones */
        width: 70px; 
        height: auto;
        object-fit: contain;
    }

    /* ------------------------------------------------------- */
    /* Clase: Descripción de la vestimenta (unificada) */
    /* ------------------------------------------------------- */
    .vestimenta-descripcion-unificada {
        /* Tipografía */
        font-family: 'Cormorant Garamond', serif;
        font-size: 0.84em; 
        font-weight: 600;
        text-transform: uppercase;
        
        /* Color */
        color: #3f5e49;
        
        /* Caja y Dimensiones */
        margin: 0; /* Eliminamos el margen para que esté justo debajo de las imágenes */
    }

    /* ======================================================= */
    /* === CUARTA SECCIÓN: PROGRAMA/CRONOGRAMA (CORRECCIÓN FINAL) === */
    /* ======================================================= */

    /* ------------------------------------------------------- */
    /* --- Contenedor Principal de la Sección --- */
    /* ------------------------------------------------------- */
    .programa-seccion {
        /* Posicionamiento */
        position: relative; /* Clave para que ::before se posicione correctamente */
        z-index: 0; 
        
        /* Caja y Dimensiones */
        width: 100%;
        min-height: 100vh;
        padding: 30px 20px 60px 20px;
        padding-bottom: 20px;
        box-sizing: border-box;
        
        /* Fondo y Color */
        background-color: #3f5e49; /* Fondo verde oscuro */
        color: #fff;
        
        /* Flexbox */
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    /* ------------------------------------------------------- */
    /* --- PSEUDO-ELEMENTO PARA LA IMAGEN DE FONDO Y SU TRANSFORMACIÓN --- */
    /* ------------------------------------------------------- */
    .programa-seccion::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1; /* Capa más baja, detrás del contenido (z-index: 1) */
        
        /* Fondo de la Imagen */
        background-image: url('flores52.png'); /* 1. Incluir la imagen */
        background-repeat: no-repeat;
        background-position: left top; /* 2. Posicionar en la esquina superior izquierda */
        background-size: 60%; /* 3. Ajustar el tamaño (130%) */
        
        /* Opacidad y Transformaciones */
        opacity: 0.2; /* 4. Opacidad deseada */
        /*transform: rotate(180deg) scaleX(-1); /* 5. Transformación: Girar y Espejear */
        transform-origin: top left; /* 6. Punto de origen para la transformación */
        transform: translateX(0px);
    }

    /* ------------------------------------------------------- */
    /* --- Contenido del Programa (Timeline) - Aseguramos visibilidad --- */
    /* ------------------------------------------------------- */
    .cabecera-programa,
    .contenido-programa {
        position: relative;
        z-index: 1; /* Aseguramos que el contenido esté por encima del ::before (z-index: 0) */
    }

    /* ------------------------------------------------------- */
    /* --- Cabecera: R|A Programa (Ajuste de posición) --- */
    /* ------------------------------------------------------- */
    .cabecera-programa {
        /* Alineación */
        text-align: center;
        
        /* Caja y Dimensiones */
        margin-bottom: 20px; /* Reducimos el margen inferior */
    }

    .iniciales {
        /* Tipografía */
        font-size: 1.5em; 
        font-weight: 400;
        letter-spacing: 5px;
        line-height: 1;
        
        /* Caja y Dimensiones */
        margin: 0;
        margin-bottom: 30px; /* Margen negativo para subir las iniciales (R|A) */
    }

    .titulo-programa {
        /* Tipografía */
        font-family: 'Great Vibes', cursive; 
        font-size: 5em; 
        font-weight: 400;
        
        /* Caja y Dimensiones */
        margin: 0;
        margin-top: -10px;
    }

    /* ------------------------------------------------------- */
    /* --- Contenido del Programa (Timeline) --- */
    /* ------------------------------------------------------- */
    .contenido-programa {
        /* Posicionamiento */
        position: relative;
        
        /* Caja y Dimensiones */
        width: 80%; 
        max-width: 600px;
    }

    /* Línea divisoria central */
    .contenido-programa::before {
        /* Posicionamiento */
        content: '';
        position: absolute;
        top: 0;
        left: 50%;
        bottom: 0; 
        
        /* Caja y Dimensiones */
        width: 2px;
        height: 100%;
        
        /* Fondo y Efectos */
        background-color: #9cb5a8;
        transform: translateX(-50%);
        z-index: 2;
    }

    .evento-linea {
        /* Posicionamiento */
        position: relative;
        
        /* Caja y Dimensiones */
        padding-top: 10px; 
        padding-bottom: 10px;
        margin-bottom: 25px; /* Margen inferior entre eventos reducido */
        
        /* Flexbox */
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    /* Puntos en la línea de tiempo */
    .evento-linea::after {
        /* Posicionamiento */
        content: '';
        position: absolute;
        left: 50%;
        z-index: 10;
        
        /* Caja y Dimensiones */
        width: 10px;
        height: 10px;
        border-radius: 50%;
        
        /* Fondo y Efectos */
        background-color: #e6e6e6; 
        transform: translateX(-50%);
    }

    /* ------------------------------------------------------- */
    /* Contenido de Texto (Izquierda y Derecha) */
    /* ------------------------------------------------------- */
    .tiempo-izquierda {
        /* Caja y Dimensiones */
        width: 45%;
        padding-right: 20px;
        
        /* Alineación */
        
        text-align: right;
    }

    .tiempo-derecha {
        /* Caja y Dimensiones */
        width: 45%;
        padding-left: 20px;
        
        /* Alineación */
        text-align: left;
    }

    .hora {
        /* Tipografía */
        font-family: 'Great Vibes'; 
        font-size: 2em;
        font-weight: 700;
        line-height: 1;
        
        /* Caja */
        display: block;
    }

    .descripcion {
        /* Tipografía */
        font-size: 1.2em;
        
        /* Caja */
        margin: 5px 0 0;
    }

    /* ------------------------------------------------------- */
    /* --- Estilos para los GIFs y Posicionamiento de Iconos --- */
    /* ------------------------------------------------------- */
    .icono-programa {
        /* Caja y Dimensiones */
        width: 60px;
        height: 60px;
        display: block;
        object-fit: contain;
    }

    .iconos-izquierda, .iconos-derecha {
        /* Posicionamiento */
        position: absolute; 
        top: 50%;
        
        /* Caja y Dimensiones */
        width: 45%; 
        
        /* Flexbox */
        display: flex;
        justify-content: center;
        align-items: center;
        
        /* Efectos */
        transform: translateY(-50%);
    }

    .iconos-derecha {
        /* Posicionamiento */
        right: 0;
        
        /* Flexbox */
        justify-content: flex-start;
    }

    .iconos-izquierda {
        /* Posicionamiento */
        left: 0;
        
        /* Flexbox */
        justify-content: flex-end;
    }

    /* ------------------------------------------------------- */
    /* --- Estilos para Eventos que van a la Derecha (Invertidos) --- */
    /* ------------------------------------------------------- */
    .ceremonia-linea {
        /* Flexbox (Invierte el orden de los elementos) */
        flex-direction: row-reverse;
    }

    .ceremonia-linea .tiempo-derecha {
        /* Alineación de texto */
        text-align: left;
        
        /* Caja */
        padding-left: 20px;
        padding-right: 0;
    }

    /* Posicionamiento de los iconos en los eventos invertidos (visualizado a la izquierda) */
    .ceremonia-linea .iconos-izquierda {
        /* Posicionamiento */
        left: 0;
        right: auto;
    }

    /* ------------------------------------------------------- */
    /* --- Lógica de Visibilidad (Mostrar/Ocultar Iconos) --- */
    /* ------------------------------------------------------- */

    /* Ocultar iconos izquierdos en líneas no invertidas */
    .evento-linea .iconos-izquierda { 
        display: none; 
    }

    /* Ocultar iconos derechos en líneas invertidas */
    .ceremonia-linea .iconos-derecha { 
        display: none; 
    }

    /* Mostrar iconos derechos en líneas no invertidas */
    .evento-linea:not(.ceremonia-linea) .iconos-derecha {
        display: flex; 
    }

    /* Mostrar iconos izquierdos en líneas invertidas */
    .ceremonia-linea .iconos-izquierda {
        display: flex;
    }

    /* ------------------------------------------------------- */
    /* --- Estilo especial para el último evento --- */
    /* ------------------------------------------------------- */
    .ultimo-evento {
        /* Caja y Dimensiones */
        margin-bottom: 0;
    }

    .ultimo-evento::after {
        /* Fondo y Color */
        background-color: #e6e6e6; 
        
        /* Caja y Dimensiones */
        width: 15px;
        height: 15px;
    }
    /* ======================================================= */
    /* === QUINTA SECCIÓN: SUGERENCIA DE REGALO (CÓDIGO COMPLETO Y CORREGIDO) === */
    /* ======================================================= */

    .regalo-section {
        /* Posicionamiento */
        position: relative; /* Clave para que ::before se posicione correctamente */
        z-index: 0;
        /* Caja y Dimensiones */
        min-height: 20vh;
        padding: 30px 20px;
        padding-top: 40px;
        
        /* Fondo y Color */
        background-color: #6e8059; /* Fondo verde oscuro */
        color: #F2E5D7; /* Color Ivory para el texto */
        
        /* Flexbox y Alineación */
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
    }

    .regalo-section::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1; /* Capa más baja, detrás del contenido (z-index: 1) */
        
        /* Fondo de la Imagen */
        background-image: url('flores51.png'); /* 1. Incluir la imagen */
        background-repeat: no-repeat;
        background-position: right bottom; /* 2. Posicionar en la esquina superior izquierda */
        background-size: 100%; /* 3. Ajustar el tamaño (130%) */
        
        /* Opacidad y Transformaciones */
        opacity: 0.15; /* 4. Opacidad deseada */
        /*transform: rotate(180deg) scaleX(-1); /* 5. Transformación: Girar y Espejear */
        transform-origin: top left; /* 6. Punto de origen para la transformación */
        transform: translateX(0px);
    }

    /* ------------------------------------------------------- */
    /* GIF en la parte superior de la sección */
    /* ------------------------------------------------------- */
    .regalo-gif-top {
        position: relative; /* Clave para que ::before se posicione correctamente */
        z-index: 0;
        /* Caja y Dimensiones */
        width: 80px; 
        height: 80px;
        margin-bottom: 20px;
        object-fit: contain;
    }

    /* ------------------------------------------------------- */
    /* Clase: Título */
    /* ------------------------------------------------------- */
    .regalo-titulo {
        position: relative; /* Clave para que ::before se posicione correctamente */
        z-index: 0;
        /* Tipografía */
        font-family: 'Great Vibes', cursive;
        font-size: 4em;
        font-weight: 400;
        line-height: 1.2;
        
        /* Caja y Dimensiones */
        margin: 0 0 30px 0;
    }

    /* ------------------------------------------------------- */
    /* Clase: Contenedor del QR (Recuadro Principal) */
    /* ------------------------------------------------------- */
    .qr-container {
        position: relative; /* Clave para que ::before se posicione correctamente */
        z-index: 0;
        /* Caja y Dimensiones */
        max-width: 700px; /* Aumentado para el diseño de dos columnas */
        width: 90%; 
        padding: 30px 20px; /* Ajuste del padding */
        margin-bottom: 40px; 
        
        /* Fondo y Bordes */
        background-color: rgba(255, 255, 255, 0.05);
        border: 1px solid #9cb5a8;
        border-radius: 8px;
        
        /* Flexbox y Alineación */
        display: flex;
        flex-direction: column; /* Apila el texto principal y las columnas */
        align-items: center;
    }

    /* ------------------------------------------------------- */
    /* Clases: Elementos dentro del QR */
    /* ------------------------------------------------------- */
    .qr-label {
        position: relative; /* Clave para que ::before se posicione correctamente */
        z-index: 0;
        /* Tipografía para el texto largo */
        font-family: 'Cormorant Garamond', serif;
        font-size: 1em;
        font-weight: 400;
        line-height: 1.4;
        
        /* Caja y Dimensiones */
        margin: 0 0 30px 0; /* Margen inferior para separarlo de las columnas */
        max-width: 90%; 
        
        /* Alineación */
        text-align: center; 
        
        /* Color */
        color: #F2E5D7; 
    }

    /* NOTA: Se elimina .qr-line ya que no se usa en el nuevo diseño de dos columnas */


    /* ------------------------------------------------------- */
    /* --- Contenedor de las Dos Columnas (Direcciones & QR) --- */
    /* ------------------------------------------------------- */
    .qr-columnas-detalle {
        position: relative; /* Clave para que ::before se posicione correctamente */
        z-index: 0;
        display: flex;
        flex-direction: row; 
        justify-content: space-around; 
        align-items: flex-start; 
        width: 100%;
        gap: 20px;
    }

    /* ------------------------------------------------------- */
    /* --- Estilos Comunes de Columnas (Izquierda: Direcciones) --- */
    /* ------------------------------------------------------- */
    .detalle-columna-izquierda,
    .detalle-columna-derecha {
        flex: 1; 
        padding: 10px;
        display: flex;
        flex-direction: column;
        align-items: center; 
        text-align: center;
    }

    .detalle-columna-izquierda {
        border-right: 1px solid rgba(156, 181, 168, 0.5); /* Línea divisoria semi-transparente */
    }

    /* ------------------------------------------------------- */
    /* --- Estilos de Texto y QR --- */
    /* ------------------------------------------------------- */
    .detalle-opciones-titulo {
        font-family: 'Playfair Display', serif;
        font-size: 1.1em;
        font-weight: 700;
        margin-bottom: 10px;
        color: #F2E5D7; /* Color Ivory */
        margin-top: 0;
    }

    .detalle-direccion-1,
    .detalle-direccion-2 {
        font-family: 'Cormorant Garamond', serif;
        font-size: 1em;
        line-height: 1.4;
        margin-bottom: 10px;
        color: #F2E5D7; /* Color Ivory */
    }

    .detalle-banco-nro {
        font-family: 'Cormorant Garamond bold', serif;
        font-size: 1em;
        color: #F2E5D7; /* Color Ivory */
        margin-top: 0px;
    }

    .detalle-banco-nro2 {
        font-family: 'Cormorant Garamond', serif;
        font-size: 0.1em;
        margin-bottom: 0px;
        color: #F2E5D7; /* Color Ivory */
    }

    .detalle-banco-nombre {
        font-family: 'Cormorant Garamond', serif;
        font-size: 1em;
        margin-bottom: 0px;
        color: #F2E5D7; /* Color Ivory */
        transform: translateY(-27px);
    }

    .qr-imagen {
        width: 100px; 
        height: 100px;
        padding: 5px;
        border-radius: 5px;
        object-fit: contain;
        background-color: #fff; /* Fondo blanco para el QR */
        margin-top: 0px;
    }

    /* ------------------------------------------------------- */
    /* Clase: Agradecimiento Final */
    /* ------------------------------------------------------- */
    .regalo-agradecimiento {
        /* Tipografía */
        font-family: 'Great Vibes', cursive; 
        font-size: 2.2em;
        font-weight: 400;
        
        /* Color */
        color: #F2E5D7; 
        
        /* Caja y Dimensiones */
        margin-top: 30px; 
    }


    /* ======================================================= */
/* === SEXTA SECCIÓN: RSVP / CONFIRMACIÓN (COLORES CORREGIDOS) === */
/* ======================================================= */

.rsvp-section {
    /* Caja y Dimensiones */
    min-height: 100vh;
    padding-top: 0px; 
    padding-bottom: 60px; /* Dejamos un padding inferior para que la sección respire */
    
    /* Fondo y Color */
    background-color: #3f5e49; /* FONDO CORRECTO: Sage Green */
    color: #F2E5D7; /* TEXTO BASE CORRECTO: Ivory */
    
    /* Flexbox y Alineación */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    text-align: center;
}

/* ------------------------------------------------------- */
/* Clases: Título y Subtítulo */
/* ------------------------------------------------------- */
.rsvp-titulo {
    /* Tipografía */
    font-family: 'Playfair Display', serif;
    font-size: 2.2em;
    font-weight: 700;
    text-transform: uppercase;
    
    /* Color */
    color: #F2E5D7; /* Título en Ivory */
    
    /* Caja y Dimensiones */
    margin-bottom: 5px;
    margin-top: 40px; /* Agregamos margen superior para compensar el padding 0 */
}

.rsvp-subtitulo {
    /* Tipografía */
    font-family: 'Cormorant Garamond', serif;
    font-size: 0.9em;
    font-style: normal;
    
    /* Color */
    color: #F2E5D7; /* Subtítulo en Ivory */
    
    /* Caja y Dimensiones */
    margin-bottom: 30px;
}

/* ------------------------------------------------------- */
/* Estilos del Formulario */
/* ------------------------------------------------------- */
.rsvp-form {
    /* Caja y Dimensiones */
    max-width: 450px;
    width: 90%;
    margin: 0 auto;
    padding: 0;
    
    /* Fondo y Efectos */
    background-color: transparent;
    box-shadow: none;
    
    /* Alineación */
    text-align: center;
    /* Añadido para espaciar elementos del formulario */
    display: flex;
    flex-direction: column;
    gap: 15px;
}

/* Campos de entrada */
.rsvp-form input[type="text"],
.rsvp-form input[type="number"],
.rsvp-form select,
.rsvp-form textarea {
    /* Caja y Dimensiones */
    width: 100%;
    padding: 12px 15px;
    border: 1px solid #9cb5a8; /* Borde más claro */
    border-radius: 4px;
    box-sizing: border-box;
    
    /* Tipografía */
    font-family: 'Cormorant Garamond', serif;
    font-size: 1em;
    
    /* Fondo y Color */
    background-color: #fff; /* Fondo blanco para los campos (legible) */
    color: #3f5e49; /* Texto escrito en verde oscuro (legible) */
}

/* Placeholder text color */
.rsvp-form input::placeholder,
.rsvp-form textarea::placeholder,
.rsvp-form select option[disabled] {
    color: #a0a0a0;
}

/* Opciones de select */
.rsvp-form select option {
    background-color: #f2f2f2; /* Fondo de opciones claro */
    color: #3f5e49; /* Texto de opciones oscuro */
}


/* ------------------------------------------------------- */
/* Estilos del botón de envío */
/* ------------------------------------------------------- */
.btn-submit {
    /* Caja y Dimensiones */
    display: block;
    width: 100%;
    padding: 12px;
    border: none;
    border-radius: 4px;
    
    /* Interacción */
    cursor: pointer;
    
    /* Fondo y Color */
    background-color: #B86141; /* Color Rust */
    color: #fff;
    
    /* Tipografía */
    font-family: 'Playfair Display', serif;
    font-weight: 700;
    font-size: 1.1em;
    text-transform: uppercase;
    margin-top: 10px;
    transition: background-color 0.3s ease;
}

.btn-submit:hover {
    background-color: #d17551; /* Ligeramente más claro al pasar el ratón */
}

/* ------------------------------------------------------- */
/* Mensaje final */
/* ------------------------------------------------------- */
.rsvp-final-mensaje {
    /* Tipografía */
    font-family: 'Great Vibes', cursive;
    font-size: 3.5em;
    font-weight: 400;
    line-height: 1.2;
    
    /* Color */
    color: #B86141; /* "Te esperamos" en Rust */
    
    /* Caja y Dimensiones */
    margin-top: 60px;
}

.rsvp-final-mensaje span {
    /* Tipografía */
    display: block;
    font-size: 0.7em;
    
    /* Color */
    color: #F2E5D7; /* Nombres en Ivory */
}
    /* ======================================================= */
    /* === BOTÓN DE CONTROL DE MÚSICA (FLOTANTE CON GIF) === */
    /* ======================================================= */
    .music-toggle-btn {
        /* Posicionamiento Fijo */
        position: fixed;
        bottom: 20px; 
        right: 20px; 
        z-index: 1000; 
        
        /* Forma y Dimensiones del Botón Circular */
        width: 60px; /* Tamaño del botón */
        height: 60px;
        border-radius: 50%; /* CLAVE: Para hacerlo circular */
        border: none;
        
        /* Fondo del Botón (Color Naranja) */
        background-color: #B86141; /* Color Rust/Naranja para el botón */
        
        /* Configuración del GIF como fondo del botón */
        background-image: url('claveSOL.gif'); /* Carga tu GIF */
        background-size: 60%; /* Tamaño del GIF dentro del botón (ajusta si es necesario) */
        background-repeat: no-repeat;
        background-position: center; /* Centra el GIF */
        
        /* Interacción y Efectos */
        cursor: pointer;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
        transition: background-color 0.3s ease-in-out, opacity 0.3s ease-in-out;
        
        /* Estado inicial: Opacidad completa */
        opacity: 1; 
    }

    /* Efecto Hover */
    .music-toggle-btn:hover {
        background-color: #a35339; /* Naranja un poco más oscuro al pasar el ratón */
    }

    /* Estado MUTE: Bajar la opacidad del botón completo para indicar silencio */
    .music-toggle-btn.is-muted {
        opacity: 0.4; /* El botón entero se atenúa al silenciar */
    }

    /* ======================================================= */
/* === AJUSTE DE MEDIOS PARA PANTALLAS MÁS PEQUEÑAS (320px) === */
/* Reducimos el tamaño de la flor y el desplazamiento del texto y el botón. */
/* ======================================================= */
/* ======================================================= */
/* === AJUSTE FINO PARA PANTALLAS EXTREMADAMENTE PEQUEÑAS (320px) === */
/* ======================================================= */
@media (max-width: 320px) {
    /* AJUSTE DE LA FLOR CENTRAL (Splash) */
    .splash-floral-detail-center {
        width: 130px; 
        transform: translateY(-50%) translateX(35px); 
    }

    /* AJUSTE DEL BOTÓN */
    .splash-button {
        max-width: 150px; 
        font-size: 0.9em; 
        transform: translateX(-40px); 
    }

    /* AJUSTE DEL TEXTO (reduciendo el desplazamiento para alinearlo) */
    .splash-name-vertical,
    .splash-ampersand {
        transform: translateX(-40px); 
        font-size: 2.5em; 
    }
}


/* ------------------------------------------------------- */
/* === SECCIÓN SUPERIOR (Nombres y Flor Superior) BASE === */
/* ------------------------------------------------------- */
.top-section {
    /* Caja y Dimensiones */
    padding-right: 110px; 
    padding-left: 30px;
}

.floral-detail-top {
    /* Caja y Dimensiones */
    width: 150px; /* Tamaño base reducido */
    height: 70%;
    
    /* Posicionamiento */
    top: 105px;
}

/* AJUSTE DE TAMAÑO ÓPTIMO para los nombres */
.groom-name .first-name,
.bride-name .first-name,
.groom-name .last-name,
.bride-name .last-name {
    /* Tipografía */
    font-size: 1.2em; 
    line-height: 1;
    
    /* Caja y Dimensiones */
    margin-bottom: 0px; 
}

/* Ajuste del desplazamiento del apellido y el ampersand */
.groom-name .last-name {
    margin-left: 75px; 
}

.bride-name .last-name {
    margin-left: 60px; 
}

.ampersand {
    /* Tipografía */
    font-size: 1.5em; 
    
    /* Caja y Dimensiones */
    margin-left: 100px; 
    margin-top: 10px; 
    margin-bottom: 10px;
}

/* REGLA ORIGINAL PARA ACOMPAÑADOS (FUERA DEL MEDIA QUERY) */
.acompaniados {
    top: 50%;
}

.bible-verse {
    /* Posicionamiento */
    position: static; 
    
    /* TRUCO PARA IGNORAR EL PADDING DERECHO y centrarlo */
    width: calc(100% + 90px); 
    margin-right: -80px;
    margin-left: 0;
}

@media (prefers-color-scheme: dark) {
    /* 1. Global: Establece el esquema de color primario a claro y fija los colores */
    :root, body, .invitation-container {
        color-scheme: light !important; 
        background-color: #3f5e49 !important; 
        color: #F2E5D7 !important; 
    }

    /* 2. Elementos de formulario: Fija colores claros para inputs, select y textarea */
    input, select, textarea {
        background-color: #f7f7f7 !important; 
        color: #3f5e49 !important; 
        border: 1px solid #9cb5a8 !important; 
    }
    
    /* 3. Botones y Enlaces: Fija colores claros */
    button, .btn-submit, .splash-button {
        background-color: #b86141 !important; 
        color: #F2E5D7 !important; 
    }
    
    a {
        color: #b86141 !important; 
    }
}

/* ======================================================= */
/* === AJUSTES RESPONSIVOS UNIFICADOS (max-width: 480px) === */
/* ======================================================= */
@media (max-width: 480px) {
    /* ------------------------------------------------------- */
    /* === BASE / CONTENEDORES GENERALES === */
    /* ------------------------------------------------------- */
    body {
        margin: 0;
        padding: 0;
    }

    .invitation-container { /* Contenedor principal */
        width: 100%;
        margin: 0 auto; 
        padding: 0;
    }

    /* ------------------------------------------------------- */
    /* === SECCIÓN: SPLASH SCREEN (Pantalla de Carga) === */
    /* ------------------------------------------------------- */
    .splash-screen {
        /* Flexbox */
        justify-content: center;
        align-items: center;
    }
    
    /* Estilo de la Flor */
    .splash-floral-detail-center {
        /* Posicionamiento */
        position: absolute;
        top: 50%; 
        right: 0; 
        z-index: 0;
        
        /* Caja y Dimensiones */
        width: 250px; 
        height: auto;
        
        /* Transformación */
        transform: translateY(-50%) translateX(35px); 
    }

    /* Contenido (Nombres y Botón) */
    .splash-content-center {
        /* Caja y Dimensiones */
        margin-right: 0; 
        
        /* Alineación */
        align-items: center; 
        text-align: center; 
    }
    
    /* Nombres individuales */
    .splash-name-vertical {
        /* Tipografía */
        font-size: 2.8em; 
        
        /* Transformación */
        transform: translateX(-80px); 
    }

    /* Ampersand */
    .splash-ampersand {
        /* Tipografía */
        font-size: 2.5em;
        
        /* Caja y Dimensiones */
        margin: 5px 0;
        
        /* Transformación */
        transform: translateX(-80px); 
    }

    .splash-button {
        /* Caja y Dimensiones */
        max-width: 200px; 
        width: 100%; 
        padding: 8px 10px; 
        margin-top: 25px;
        
        /* Tipografía */
        text-align: center; 
        white-space: normal; 
        
        /* Transformación */
        transform: translateX(-80px); 
    }

    /* ------------------------------------------------------- */
    /* === SECCIÓN SUPERIOR (Nombres y Flor Superior) === */
    /* ------------------------------------------------------- */
    .top-section {
        /* Caja y Dimensiones */
        padding-right: 110px; 
        padding-left: 30px;
    }

    .floral-detail-top {
        /* Caja y Dimensiones */
        width: 190px; /* Manteniendo el valor que definiste para 480px */
        height: 90%;
        
        /* Posicionamiento */
        top: 105px;
    }

    /* AJUSTE DE TAMAÑO ÓPTIMO para los nombres */
    .groom-name .first-name,
    .bride-name .first-name,
    .groom-name .last-name,
    .bride-name .last-name {
        /* Tipografía */
        font-size: 1.2em; 
        line-height: 1;
        
        /* Caja y Dimensiones */
        margin-bottom: 0px; 
    }

    /* Ajuste del desplazamiento del apellido y el ampersand */
    .groom-name .last-name {
        margin-left: 75px; 
    }

    .bride-name .last-name {
        margin-left: 60px; 
    }
    
    .ampersand {
        /* Tipografía */
        font-size: 1.5em; 
        
        /* Caja y Dimensiones */
        margin-left: 100px; 
        margin-top: 10px; 
        margin-bottom: 10px;
    }

    .bible-verse {
        /* Posicionamiento */
        transform: translateY(50%); 
        
        /* TRUCO PARA IGNORAR EL PADDING DERECHO y centrarlo */
        width: calc(100% + 90px); 
        margin-right: -80px;
        margin-left: 0;
    }

    /* ------------------------------------------------------- */
    /* === SECCIÓN MEDIA (Fecha y Lugar) === */
    /* ------------------------------------------------------- */
    .middle-section {
        /* Caja y Dimensiones */
        width: 100%;
        padding-left: 0;
        padding-right: 0;
        padding-bottom: 25px;
    }

    .month {
        font-size: 2em;
    }

    .date-time {
        flex-wrap: nowrap; 
    }

    /* Reducción del texto (Miércoles, Hrs) */
    .date-time p {
        font-size: 1.6em; 
        margin: 0 5px;
    }

    /* REDUCCIÓN FINAL DE LOS NÚMEROS (CLAVE PARA EL CENTRADO HORIZONTAL) */
    .date-time .date,
    .date-time .time {
        font-size: 1.6em; 
        margin: 0 5px; 
    }
    
    .date-time .separator {
        font-size: 2.0em; 
        margin: 0 2px; 
    }

    /* ------------------------------------------------------- */
    /* === SECCIÓN INFERIOR (Contador) === */
    /* ------------------------------------------------------- */
    .bottom-section {
        /* Caja y Dimensiones */
        padding-top: 10px; 
        
        /* Fondo */
        background-size: 105% auto;
    }

    /* ------------------------------------------------------- */
    /* --- SECCIÓN ETIQUETA --- */
    /* ------------------------------------------------------- */
    .etiqueta-section {
        padding-top: 25px; 
    }
    
    .etiqueta-titulo {
        font-size: 1.4em; 
    }
    
    .vestimenta-gif-unificada {
        width: 60px; 
    }
    
    .vestimenta-imagenes {
        gap: 5px; 
    }

    /* ------------------------------------------------------- */
    /* --- SECCIÓN CRONOGRAMA --- */
    /* ------------------------------------------------------- */
    .programa-seccion {
        padding-bottom: 0px !important; 
    }
    
    .programa-seccion::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1; 
        
        /* Fondo de la Imagen */
        background-image: url('flores52.png'); 
        background-repeat: no-repeat;
        background-position: left top; 
        background-size: 80%; 
        
        /* Opacidad y Transformaciones */
        opacity: 0.2; 
        transform-origin: top left; 
        transform: translateX(0px);
    }

    /* ELIMINACIÓN TOTAL DE MARGEN INFERIOR DEL ÚLTIMO EVENTO */
    .ultimo-evento {
        margin-bottom: 0px !important; 
    }
    
    /* Ajuste fino del texto si el line-height sigue empujando */
    .ultimo-evento .descripcion {
        line-height: 1 !important;
        margin-bottom: 0 !important;
    }

    /* ------------------------------------------------------- */
    /* --- SECCIÓN REGALO --- */
    /* ------------------------------------------------------- */
    
    .regalo-titulo {
        position: relative; 
        z-index: 0;
        font-size: 3em; 
    }

    .qr-columnas-detalle {
        position: relative; 
        z-index: 0;
        flex-direction: row; 
        justify-content: space-around;
        align-items: flex-start;
        gap: 10px; 
    }
    
    .detalle-columna-izquierda,
    .detalle-columna-derecha {
        position: relative; 
        z-index: 0;
        flex: 1 1 50%; 
        padding: 5px;
    }
    
    .detalle-columna-izquierda {
        position: relative; 
        z-index: 0;
        border-right: 1px solid rgba(156, 181, 168, 0.5); 
        border-bottom: none; 
    }
    
    .qr-imagen {
        position: relative; 
        z-index: 0;
        width: 130px; 
        height: 130px;
    }
    
    .detalle-opciones-titulo,
    .detalle-banco-nro {
        position: relative; 
        z-index: 0;
        font-size: 1em; 
    }
    
    .detalle-direccion-1,
    .detalle-direccion-2,
    .detalle-banco-nombre {
        position: relative; 
        z-index: 0;
        font-size: 0.9em;
        line-height: 1.2;
    }

    /* ------------------------------------------------------- */
    /* --- SECCIÓN RSVP --- */
    /* ------------------------------------------------------- */
    .rsvp-section {
        padding: 40px 15px;
        padding-top: 60px !important;
        min-height: auto; 
    }
    
    .rsvp-titulo {
        font-size: 1.8em;
        margin-top: 0px !important;
    }
    
    .rsvp-subtitulo {
        font-size: 0.9em;
    }
    
    .rsvp-form {
        width: 100%;
    }
    
    .rsvp-final-mensaje {
        font-size: 4em;
        margin-top: 40px;
    }
    
    .rsvp-final-mensaje span {
        font-size: 0.6em;
    }
    
}