:root {
            --primary-color: #f8f0e5;
            --secondary-color: #eaddd0;
            --accent-color: #d2b48c;
            --dark-color: #5d4037;
            --text-color: #4e342e;
        }

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

        body {
            font-family: 'Montserrat', sans-serif;
            color: var(--text-color);
            line-height: 1.6;
            background-color: var(--primary-color);
            overflow-x: hidden;
            position: relative;
        }

        body::before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(135deg, #f8e3c5 0%, #e6c9a8 100%);
            z-index: -1;
        }

        h1,
        h2,
        h3,
        h4 {
            font-family: 'Playfair Display', serif;
            font-weight: 600;
            color: var(--dark-color);
            letter-spacing: 0.5px;
        }

        .container {
            width: 90%;
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px;
        }

        /************  Fuentes *********************/
        .fleur-de-leah-regular {
            font-family: "Fleur De Leah", cursive;
            font-weight: 400;
            font-style: normal;
        }

        .kings-regular {
            font-family: "Kings", cursive;
            font-weight: 400;
            font-style: normal;
        }

        /********* Decoración otoñal para boda *************/
        .falling-background {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
            z-index: -1;
            overflow: hidden;
        }

        .falling-item {
            position: absolute;
            font-size: 1.8rem;
            opacity: 0.6;
            animation: fall linear infinite;
            text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
            pointer-events: none;
        }

        @keyframes fall {
            to {
                transform: translateY(200vh) rotate(360deg);
                opacity: 0;
            }
        }

        /* Hero Section con imagen centrada */
        .hero {
            width: 100%;
            height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        /* Contenedor centrado con tamaño fijo */
        .hero-image-container {
            position: relative;
            width: 500px;
            height: 499px;
        }

        /* Imagen de fondo con efecto blur */
        .hero-image {
            width: 100%;
            height: 100%;
            background-image: url('../img/couple.png');
            background-size: cover;
            background-position: center;
            border-radius: 24px;
            transition: filter 1.5s ease;
            filter: blur(0);
            z-index: 1;
        }

        .hero-image.blur {
            filter: blur(3px);
        }

        /* Texto centrado encima de la imagen */
        .hero-content {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            text-align: center;
            opacity: 0;
            transition: opacity 1s ease;
            z-index: 2;
        }

        .hero-content.visible {
            opacity: 1;
        }

        .hero-title {
            font-size: 3.2rem;
            margin-bottom: 10px;
            color: white;
            text-shadow: 0 0 8px #d4af37, 0 0 12px #d4af37, 0 0 16px #fff;
        }

        .amp {
            padding: 0 15px;
            color: var(--text-color, white);
        }

        .hero-date {
            font-size: 2rem;
            letter-spacing: 4px;
            color: #d4af37;
            text-transform: uppercase;
            padding: 5px 20px;
            text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.7);
        }
        .hero-date::before,
        .hero-date::after {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            color: #fff;
            font-size: 1.5rem;
        }

        .hero-date::before {
            left: -30px;
        }

        .hero-date::after {
            right: -30px;
        }
        /* Centra el título y los textos */
        .music-button-section {
            text-align: center;
        }

        .buttons-container {
            display: flex;
            justify-content: center;
            align-items: flex-end;
            gap: 32px;
            flex-wrap: wrap;
            margin-top: 24px;
        }

        .music-option {
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        .music-label {
            margin-top: 12px;
            margin-bottom: 0;
            font-size: 1.5rem;
            color: #d4af37;
            text-align: center;
            letter-spacing: 1px;
        }

        /* Opciones debajo de cada botón */
        .buttons-container p.kings-regular {
            margin-top: 12px;
            margin-bottom: 0;
            text-align: center;
        }


        /* Button de musica Styles */
        .botón {
            align-items: center;
            display: flex;
            justify-content: center;
        }

        .fondo {
            background: #d4af37;
            border-radius: 50%;
            box-shadow: 0 1px 2.2px rgba(0, 0, 0, 0.051),
                0 2.3px 5.3px rgba(0, 0, 0, 0.059), 0 4.4px 10px rgba(0, 0, 0, 0.06),
                0 7.8px 17.9px rgba(0, 0, 0, 0.059), 0 14.6px 33.4px rgba(0, 0, 0, 0.059),
                0 35px 80px rgba(0, 0, 0, 0.07);
            cursor: pointer;
            height: 100px;
            position: absolute;
            width: 100px;
        }

        .parte izquierda{
            width: 200px;
            height: 200px;
        }

        .parte derecha{
            width: 200px;
            height: 200px;
        }


        .botón:active .fondo {
            background: #d4af37;
        }

        .icono {
            height: 200px;
            transform: rotate(-120deg);
            transition: transform 500ms;
            width: 200px;
        }

        .parte {
            background: #fff;
            height: 200px;
            position: absolute;
            width: 200px;
        }

        .izquierda {
            clip-path: polygon(43.77666% 55.85251%,
                    43.77874% 55.46331%,
                    43.7795% 55.09177%,
                    43.77934% 54.74844%,
                    43.77855% 54.44389%,
                    43.77741% 54.18863%,
                    43.77625% 53.99325%,
                    43.77533% 53.86828%,
                    43.77495% 53.82429%,
                    43.77518% 53.55329%,
                    43.7754% 53.2823%,
                    43.77563% 53.01131%,
                    43.77585% 52.74031%,
                    43.77608% 52.46932%,
                    43.7763% 52.19832%,
                    43.77653% 51.92733%,
                    43.77675% 51.65633%,
                    43.77653% 51.38533%,
                    43.7763% 51.11434%,
                    43.77608% 50.84334%,
                    43.77585% 50.57235%,
                    43.77563% 50.30136%,
                    43.7754% 50.03036%,
                    43.77518% 49.75936%,
                    43.77495% 49.48837%,
                    44.48391% 49.4885%,
                    45.19287% 49.48865%,
                    45.90183% 49.48878%,
                    46.61079% 49.48892%,
                    47.31975% 49.48906%,
                    48.0287% 49.4892%,
                    48.73766% 49.48934%,
                    49.44662% 49.48948%,
                    50.72252% 49.48934%,
                    51.99842% 49.4892%,
                    53.27432% 49.48906%,
                    54.55022% 49.48892%,
                    55.82611% 49.48878%,
                    57.10201% 49.48865%,
                    58.3779% 49.4885%,
                    59.6538% 49.48837%,
                    59.57598% 49.89151%,
                    59.31883% 50.28598%,
                    58.84686% 50.70884%,
                    58.12456% 51.19714%,
                    57.11643% 51.78793%,
                    55.78697% 52.51828%,
                    54.10066% 53.42522%,
                    52.02202% 54.54581%,
                    49.96525% 55.66916%,
                    48.3319% 56.57212%,
                    47.06745% 57.27347%,
                    46.11739% 57.79191%,
                    45.42719% 58.14619%,
                    44.94235% 58.35507%,
                    44.60834% 58.43725%,
                    44.37066% 58.41149%,
                    44.15383% 58.27711%,
                    43.99617% 58.0603%,
                    43.88847% 57.77578%,
                    43.82151% 57.43825%,
                    43.78608% 57.06245%,
                    43.77304% 56.66309%,
                    43.773% 56.25486%);
            transition: clip-path 500ms;
        }

        .derecha {
            clip-path: polygon(43.77666% 43.83035%,
                    43.77874% 44.21955%,
                    43.7795% 44.59109%,
                    43.77934% 44.93442%,
                    43.77855% 45.23898%,
                    43.77741% 45.49423%,
                    43.77625% 45.68961%,
                    43.77533% 45.81458%,
                    43.77495% 45.85858%,
                    43.77518% 46.12957%,
                    43.7754% 46.40056%,
                    43.77563% 46.67156%,
                    43.77585% 46.94255%,
                    43.77608% 47.21355%,
                    43.7763% 47.48454%,
                    43.77653% 47.75554%,
                    43.77675% 48.02654%,
                    43.77653% 48.29753%,
                    43.7763% 48.56852%,
                    43.77608% 48.83952%,
                    43.77585% 49.11051%,
                    43.77563% 49.38151%,
                    43.7754% 49.65251%,
                    43.77518% 49.9235%,
                    43.77495% 50.1945%,
                    44.48391% 50.19436%,
                    45.19287% 50.19422%,
                    45.90183% 50.19408%,
                    46.61079% 50.19394%,
                    47.31975% 50.1938%,
                    48.0287% 50.19366%,
                    48.73766% 50.19353%,
                    49.44662% 50.19338%,
                    50.72252% 50.19353%,
                    51.99842% 50.19366%,
                    53.27432% 50.1938%,
                    54.55022% 50.19394%,
                    55.82611% 50.19408%,
                    57.10201% 50.19422%,
                    58.3779% 50.19436%,
                    59.6538% 50.1945%,
                    59.57598% 49.79136%,
                    59.31883% 49.39688%,
                    58.84686% 48.97402%,
                    58.12456% 48.48572%,
                    57.11643% 47.89493%,
                    55.78697% 47.16458%,
                    54.10066% 46.25764%,
                    52.02202% 45.13705%,
                    49.96525% 44.01371%,
                    48.3319% 43.11074%,
                    47.06745% 42.4094%,
                    46.11739% 41.89096%,
                    45.42719% 41.53667%,
                    44.94235% 41.3278%,
                    44.60834% 41.24561%,
                    44.37066% 41.27137%,
                    44.15383% 41.40575%,
                    43.99617% 41.62256%,
                    43.88847% 41.90709%,
                    43.82151% 42.24461%,
                    43.78608% 42.62041%,
                    43.77304% 43.01978%,
                    43.773% 43.428%);
            transition: clip-path 500ms;
        }

        .puntero {
            border-radius: 50%;
            cursor: pointer;
            height: 100px;
            position: absolute;
            -webkit-tap-highlight-color: transparent;
            width: 100px;
        }

        .active .icono {
            transform: rotate(-90deg);
        }

        .active .izquierda {
            clip-path: polygon(56.42249% 57.01763%,
                    54.93283% 57.0175%,
                    53.00511% 57.01738%,
                    50.83554% 57.01727%,
                    48.62036% 57.01718%,
                    46.55585% 57.01709%,
                    44.83822% 57.01702%,
                    43.66373% 57.01698%,
                    43.22863% 57.01696%,
                    42.86372% 57.01904%,
                    42.56988% 57.01621%,
                    42.3402% 56.99486%,
                    42.16778% 56.94152%,
                    42.0457% 56.84267%,
                    41.96705% 56.68478%,
                    41.92493% 56.45432%,
                    41.91246% 56.13777%,
                    41.91258% 55.76282%,
                    41.9129% 55.37058%,
                    41.91335% 54.96757%,
                    41.91387% 54.56032%,
                    41.91439% 54.15537%,
                    41.91485% 53.75926%,
                    41.91517% 53.3785%,
                    41.91529% 53.01965%,
                    41.94275% 52.72355%,
                    42.02117% 52.51653%,
                    42.14465% 52.38328%,
                    42.30727% 52.30854%,
                    42.50308% 52.27699%,
                    42.72619% 52.27341%,
                    42.97065% 52.28248%,
                    43.23056% 52.2889%,
                    43.94949% 52.28896%,
                    45.45083% 52.28912%,
                    47.47445% 52.28932%,
                    49.76027% 52.28957%,
                    52.04818% 52.28981%,
                    54.07805% 52.29003%,
                    55.5898% 52.29019%,
                    56.32332% 52.29024%,
                    56.58221% 52.28816%,
                    56.83726% 52.28948%,
                    57.07897% 52.30593%,
                    57.29794% 52.34898%,
                    57.48468% 52.43029%,
                    57.62978% 52.56146%,
                    57.72375% 52.7541%,
                    57.75718% 53.01981%,
                    57.75713% 53.37763%,
                    57.75699% 53.81831%,
                    57.75679% 54.31106%,
                    57.75657% 54.82507%,
                    57.75635% 55.32958%,
                    57.75615% 55.79377%,
                    57.75601% 56.18684%,
                    57.75596% 56.47801%,
                    57.7549% 56.50122%,
                    57.74034% 56.5624%,
                    57.6955% 56.64887%,
                    57.60334% 56.748%,
                    57.44691% 56.84712%,
                    57.20925% 56.93358%,
                    56.87342% 56.99471%);
        }

        .active .derecha {
            clip-path: polygon(56.42249% 42.44625%,
                    54.93283% 42.44637%,
                    53.00511% 42.44649%,
                    50.83554% 42.4466%,
                    48.62036% 42.4467%,
                    46.55585% 42.44679%,
                    44.83822% 42.44685%,
                    43.66373% 42.4469%,
                    43.22863% 42.44691%,
                    42.86372% 42.44483%,
                    42.56988% 42.44767%,
                    42.3402% 42.46902%,
                    42.16778% 42.52235%,
                    42.0457% 42.6212%,
                    41.96705% 42.77909%,
                    41.92493% 43.00956%,
                    41.91246% 43.32611%,
                    41.91258% 43.70105%,
                    41.9129% 44.0933%,
                    41.91335% 44.49631%,
                    41.91387% 44.90355%,
                    41.91439% 45.3085%,
                    41.91485% 45.70462%,
                    41.91517% 46.08537%,
                    41.91529% 46.44422%,
                    41.94275% 46.74032%,
                    42.02117% 46.94735%,
                    42.14465% 47.0806%,
                    42.30727% 47.15534%,
                    42.50308% 47.18688%,
                    42.72619% 47.19047%,
                    42.97065% 47.1814%,
                    43.23056% 47.17497%,
                    43.94949% 47.17491%,
                    45.45083% 47.17476%,
                    47.47445% 47.17455%,
                    49.76027% 47.1743%,
                    52.04818% 47.17406%,
                    54.07805% 47.17384%,
                    55.5898% 47.17369%,
                    56.32332% 47.17363%,
                    56.58221% 47.17571%,
                    56.83726% 47.17439%,
                    57.07897% 47.15795%,
                    57.29794% 47.1149%,
                    57.48468% 47.03359%,
                    57.62978% 46.90242%,
                    57.72375% 46.70977%,
                    57.75718% 46.44406%,
                    57.75713% 46.08625%,
                    57.75699% 45.64557%,
                    57.75679% 45.15282%,
                    57.75657% 44.6388%,
                    57.75635% 44.1343%,
                    57.75615% 43.6701%,
                    57.75601% 43.27703%,
                    57.75596% 42.98586%,
                    57.7549% 42.96265%,
                    57.74034% 42.90148%,
                    57.6955% 42.815%,
                    57.60334% 42.71587%,
                    57.44691% 42.61675%,
                    57.20925% 42.53029%,
                    56.87342% 42.46916%);
        }

        /* Navbar - CORRECCIÓN PRINCIPAL */
        .navbar {
            background: #fff;
            position: fixed;
            width: 100%;
            top: 0;
            z-index: 100;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
        }

        .nav-container {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 1rem 2rem;
        }

        .navbar-logo {
            font-weight: bold;
            font-size: 1.5rem;
            color: #d4af37;
            text-decoration: none;
            font-family: 'Playfair Display', serif;
        }

        .navbar-toggle {
            display: none;
            font-size: 2rem;
            background: none;
            border: none;
            cursor: pointer;
            color: var(--dark-color);
        }

        .nav-menu {
            list-style: none;
            display: flex;
            gap: 1.5rem;
        }

        .nav-menu li a {
            text-decoration: none;
            color: var(--dark-color);
            font-weight: 500;
            font-size: 1rem;
            transition: all 0.3s ease;
            padding: 8px 15px;
            position: relative;
            border-radius: 20px;
        }

        .nav-menu li a:hover,
        .nav-menu li a.active {
            background: var(--accent-color);
            color: white;
        }

        .nav-menu li a::after {
            content: "";
            position: absolute;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
            width: 0;
            height: 2px;
            background: var(--accent-color);
            transition: all 0.3s ease;
        }

        .nav-menu li a:hover::after {
            width: 70%;
        }

        /* Section Styles */
        .section {
            padding: 50px 0;
            scroll-margin-top: 80px;
        }

        .section-title {
            text-align: center;
            margin-bottom: 60px;
            position: relative;
        }

        .section-title h2 {
            font-size: 2.8rem;
            margin-bottom: 15px;
            color: var(--dark-color);
            display: inline-block;
        }

        .section-title::after {
            content: "";
            display: block;
            width: 100px;
            height: 3px;
            background: var(--accent-color);
            margin: 15px auto;
        }

        .section-subtitle {
            text-align: center;
            font-size: 1.2rem;
            max-width: 700px;
            margin: 0 auto 50px;
            color: var(--dark-color);
        }
        /* image styles */
        /* Estilos para la sección de imagen decorativa - CORREGIDOS */
        .imagen-section {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            padding: 40px 0;
            min-height: 400px;
            text-align: center;
        }

        /* Contenedor de la imagen */
        .imagen-section .image-container {
            max-width: 700px;
            width: 90%;
            padding: 20px;
        }

        /* Imagen */
        .imagen-section .section-image {
            width: 100%;
            height: auto;
            max-width: 700px;
            border-radius: 12px;
            box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
            display: block;
            margin: 0 auto;
        }
        
        /* Estilo para el texto debajo de la imagen */
        .image-caption {
            font-family: "Kings", cursive;
            font-size: 2.2rem;
            color: var(--dark-color);
            margin-top: 30px;
            line-height: 1.4;
            text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
            max-width: 700px;
            padding: 0 20px;
            text-align: center;
        }
        
        .image-caption::before,
        .image-caption::after {
            content: "❧";
            color: #d4af37;
            font-size: 1.8rem;
            margin: 0 15px;
            position: relative;
            top: -5px;
        }

        /* Gallery */
        .gallery {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
            gap: 20px;
            padding: 20px;
        }

        /* Gallery Item */
        .gallery-item {
            position: relative;
            overflow: hidden;
            border-radius: 10px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
        }

        .gallery-item img {
            width: 100%;
            height: auto;
            display: block;
            transition: transform 0.3s ease;
        }

        .gallery-item:hover img {
            transform: scale(1.05);
        }

        .gallery-item .overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.5);
            display: flex;
            align-items: center;
            justify-content: center;
            opacity: 0;
            transition: opacity 0.3s ease;
        }

        .gallery-item:hover .overlay {
            opacity: 1;
        }

        /* leaf divider */
        .leaf-divider {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 1rem;
            margin: 2rem auto;
            color: #d4af37;
        }

        .leaf-divider hr {
            flex: 1;
            height: 1px;
            border: none;
            background-color: #d4af37;
        }

        .leaves {
            font-size: 1.5rem;
            color: #d4af37;
            letter-spacing: 0.2rem;
        }


        /* Countdown */
        .countdown {
            display: flex;
            justify-content: center;
            gap: 20px;
            margin-top: 30px;
            flex-wrap: wrap;
        }

        .countdown-item {
            text-align: center;
            background: var(--dark-color);
            color: white;
            padding: 20px 15px;
            border-radius: 10px;
            min-width: 100px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
            transition: transform 0.3s ease;
        }

        .countdown-item:hover {
            transform: translateY(-10px);
        }

        .countdown-number {
            font-size: 2.5rem;
            font-weight: 700;
            margin-bottom: 5px;
        }

        .countdown-label {
            font-size: 1rem;
            text-transform: uppercase;
            letter-spacing: 1px;
        }

        /* Our Story */
        .story-content {
            max-width: 800px;
            margin: 0 auto;
            text-align: center;
            font-size: 1.2rem;
            line-height: 1.8;
            background: white;
            padding: 40px;
            border-radius: 10px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
        }

        .story-content p {
            margin-bottom: 25px;
        }

        /* Poema Section */
        .poema-section .container {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 40px;
            flex-wrap: wrap;
            padding: 32px 0;
        }

        .img-poem img {
            max-width: 320px;
            width: 100%;
            border-radius: 16px;
            box-shadow: 0 4px 16px rgba(0,0,0,0.08);
            display: block;
        }

        .poema-text {
            max-width: 420px;
            font-size: 1.6rem;
            color: #5D6532;
            line-height: 1.7;
            background: #fff;
            border-radius: 16px;
            box-shadow: 0 4px 16px rgba(0,0,0,0.08);
            padding: 24px 28px;
            margin: 0;
        }

        /* Responsive para móvil */
        @media (max-width: 768px) {
            .poema-section .container {
                flex-direction: column;
                gap: 24px;
                padding: 18px 0;
            }
            .poema-text {
                padding: 16px 12px;
                font-size: 1rem;
            }
            .img-poem img {
                max-width: 90vw;
            }
        }

        /* Reception */
        .reception-container {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 40px;
            align-items: center;
        }

        .reception-image {
            height: 400px;
            border-radius: 10px;
            overflow: hidden;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
        }

        .reception-image img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .reception-details {
            text-align: center;
            background: white;
            padding: 30px;
            border-radius: 10px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
        }

        .reception-details h3 {
            font-size: 2.5rem;
            margin-bottom: 20px;
            color: var(--accent-color);
        }

        .reception-details p {
            margin-bottom: 15px;
            font-size: 1.1rem;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .reception-icon {
            font-size: 1.5rem;
            margin-right: 10px;
            color: var(--accent-color);
        }

        .map-btn {
            display: inline-block;
            margin-top: 30px;
            padding: 12px 30px;
            background: var(--dark-color);
            color: white;
            text-decoration: none;
            border-radius: 30px;
            font-weight: 500;
            transition: all 0.3s ease;
        }

        .map-btn:hover {
            background: var(--accent-color);
            transform: translateY(-5px);
        }

        /* Dress Code */
        .dress-code {
            background: rgba(234, 221, 208, 0.5);
            padding: 80px 0;
        }

        .colors-container {
            display: flex;
            justify-content: center;
            gap: 30px;
            margin-top: 40px;
            flex-wrap: wrap;
        }

        .color-card {
            text-align: center;
            width: 150px;
        }

        .color-sample {
            width: 100px;
            height: 100px;
            border-radius: 50%;
            margin: 0 auto 15px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
            transition: transform 0.3s ease;
        }

        .color-sample:hover {
            transform: scale(1.1);
        }

        .color-name {
            font-weight: 500;
            font-size: 1.1rem;
        }

        .dress-code-note {
            text-align: center;
            max-width: 800px;
            margin: 40px auto 0;
            font-size: 1.1rem;
            background: white;
            padding: 20px;
            border-radius: 10px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
        }

        /* Itinerary */
        .timeline {
            position: relative;
            max-width: 800px;
            margin: 50px auto;
        }

        .timeline::after {
            content: '';
            position: absolute;
            width: 3px;
            background-color: var(--accent-color);
            top: 0;
            bottom: 0;
            left: 50%;
            margin-left: -1.5px;
        }

        .timeline-item {
            padding: 10px 40px;
            position: relative;
            width: 50%;
            box-sizing: border-box;
        }

        .timeline-item:nth-child(odd) {
            left: 0;
        }

        .timeline-item:nth-child(even) {
            left: 50%;
        }

        .timeline-content {
            padding: 20px;
            background-color: white;
            position: relative;
            border-radius: 10px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
            transition: transform 0.3s ease;
        }

        .timeline-content:hover {
            transform: translateY(-5px);
        }

        .timeline-content h4 {
            margin-bottom: 10px;
            color: var(--accent-color);
        }

        .timeline-content p {
            margin-bottom: 5px;
        }

        .timeline-time {
            font-weight: 600;
            font-size: 1.2rem;
            color: var(--dark-color);
            margin-bottom: 10px;
        }

        /* Gallery */
        .gallery-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 20px;
            margin-top: 40px;
        }

        .gallery-item {
            height: 250px;
            border-radius: 10px;
            overflow: hidden;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
            transition: all 0.3s ease;
        }

        .gallery-item:hover {
            transform: translateY(-10px);
            box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
        }

        .gallery-item img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.5s ease;
        }

        .gallery-item:hover img {
            transform: scale(1.1);
        }

        /* Form */
        .form-container {
            max-width: 600px;
            margin: 0 auto;
            background: white;
            padding: 40px;
            border-radius: 10px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
        }

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

        .form-group label {
            display: block;
            margin-bottom: 8px;
            font-weight: 500;
        }

        .form-group input {
            width: 100%;
            padding: 12px 15px;
            border: 1px solid #ddd;
            border-radius: 5px;
            font-family: 'Montserrat', sans-serif;
            font-size: 1rem;
        }

        .form-group input:focus {
            outline: none;
            border-color: var(--accent-color);
        }

        .form-submit {
            display: block;
            width: 100%;
            padding: 15px;
            background-color: var(--dark-color);
            color: white;
            border: none;
            border-radius: 5px;
            font-family: 'Montserrat', sans-serif;
            font-size: 1.1rem;
            font-weight: 500;
            cursor: pointer;
            transition: background-color 0.3s ease;
        }

        .form-submit:hover {
            background-color: var(--accent-color);
        }

        .optional {
            font-size: 0.9rem;
            color: #777;
            font-style: italic;
        }

        /* Footer */
        footer {
            background: var(--dark-color);
            color: white;
            text-align: center;
            padding: 50px 0 20px;
            margin-top: 50px;
        }

        .footer-hearts {
            font-size: 2rem;
            color: var(--accent-color);
            margin: 20px 0;
        }

        .footer-text {
            font-size: 1.2rem;
            margin-bottom: 30px;
        }

        .copyright {
            padding-top: 20px;
            border-top: 1px solid rgba(255, 255, 255, 0.1);
            font-size: 0.9rem;
            color: #aaa;
        }

        /* Responsive */
        @media (max-width: 992px) {
            .hero-title {
                font-size: 3.5rem;
            }

            .hero-date {
                font-size: 2rem;
                letter-spacing: 5px;
            }

            .reception-container {
                grid-template-columns: 1fr;
            }

            .reception-image {
                height: 300px;
            }

            .gallery-grid {
                grid-template-columns: repeat(2, 1fr);
            }
        }

        @media (max-width: 768px) {
            .hero-title {
                font-size: 2.5rem;
            }

            .hero-date {
                font-size: 1.7em;
                letter-spacing: 4px;
                padding: 8px 20px;
            }

            .hero-date::before,
            .hero-date::after {
                font-size: 1rem;
                left: -20px;
                right: -20px;
            }

            .navbar-toggle {
                display: block;
            }

            .nav-menu {
                display: none;
                flex-direction: column;
                position: absolute;
                top: 100%;
                left: 0;
                background: #fff;
                width: 100%;
                padding: 1rem 2rem;
                gap: 0.5rem;
            }

            .nav-menu.active {
                display: flex;
            }

            .timeline::after {
                left: 31px;
            }

            .timeline-item {
                width: 100%;
                padding-left: 70px;
                padding-right: 25px;
            }

            .timeline-item:nth-child(even) {
                left: 0;
            }

            /* Mejoras para botones de música en móvil */
            .buttons-container {
                flex-direction: column;
                align-items: center;
                gap: 24px;
            }
            .music-option {
                width: 100%;
                max-width: 300px;
            }
            .botón {
                width: 100%;
                min-width: 180px;
                max-width: 250px;
                margin: 0 auto;
            }
            .music-label {
                font-size: 1.2rem;
                margin-top: 10px;
            }

            .image-caption {
                font-size: 1.5rem;
            }
        }

        @media (max-width: 576px) {
            .hero-title {
                font-size: 2.3rem;
            }

            .hero-date {
                font-size: 1.3rem;
                letter-spacing: 2px;
                padding: 6px 15px;
            }

            .hero-content {
                padding: 0 10px;
            }

            .section-title h2 {
                font-size: 2.2rem;
            }

            .countdown-item {
                min-width: 80px;
                padding: 15px 10px;
            }

            .countdown-number {
                font-size: 2rem;
            }

            .gallery-grid {
                grid-template-columns: 1fr;
            }

            .form-container {
                padding: 30px 20px;
            }

            .image-caption {
                font-size: 1.2rem;
            }
        }