@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,600;1,400&family=Montserrat:wght@300;400;500;600&display=swap');

        :root {
            --bg-base: #EAE2D6;
            --bg-card: #FAF6F0;
            --text-dark: #3A3229;
            --text-light: #61574A;
            --accent-green: #8A9A86;
            --accent-gold: #C4A587;
            --border-light: #D4CDBC;
            --font-serif: 'Cormorant Garamond', serif;
            --font-sans: 'Montserrat', sans-serif;
            --border-radius: 12px;
        }

        body {
            margin: 0;
            padding: 0;
            background-color: var(--bg-base);
            font-family: var(--font-sans);
            color: var(--text-dark);
            -webkit-font-smoothing: antialiased;
            display: flex;
            justify-content: center;
            overflow-x: hidden;
        }

        /* Abstract Background Blobs */
        body::before,
        body::after {
            content: '';
            position: fixed;
            border-radius: 50%;
            filter: blur(60px);
            z-index: -1;
            opacity: 0.7;
        }

        body::before {
            top: -100px;
            left: -150px;
            width: 400px;
            height: 400px;
            background: #D8CCB8;
        }

        body::after {
            bottom: 20%;
            right: -150px;
            width: 350px;
            height: 450px;
            background: #DFD4C0;
        }

        .invitation {
            max-width: 480px;
            width: 100%;
            position: relative;
            padding: 40px 20px;
            box-sizing: border-box;
            background-image:
                radial-gradient(circle at 10% 80%, #E3D9C6 0%, transparent 40%),
                radial-gradient(circle at 90% 40%, #DED2BD 0%, transparent 40%);
        }

        h1,
        h2,
        h3,
        h4 {
            font-family: var(--font-serif);
            margin: 0;
            font-weight: 600;
            text-align: center;
        }

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

        .title {
            font-size: 2.2rem;
            letter-spacing: 2px;
            margin-bottom: 10px;
        }

        .subtitle {
            font-size: 0.95rem;
            line-height: 1.4;
            font-weight: 400;
        }

        .names {
            font-size: 2.8rem;
            margin: 15px 0;
            letter-spacing: 1px;
        }

        .ampersand {
            font-style: italic;
            color: var(--accent-gold);
            font-weight: 400;
        }

        .hero-image {
            width: 100%;
            max-height: 380px;
            object-fit: contain;
            border-radius: 20px;
            margin-bottom: 10px;
            position: relative;
            z-index: 2;
        }



        .section-title {
            font-size: 1.5rem;
            margin-bottom: 15px;
            text-transform: uppercase;
            letter-spacing: 1px;
        }

        /* Map Card */
        .celebration-card {
            background: #FFFFFF;
            border-radius: var(--border-radius);
            border: 1px solid var(--border-light);
            padding: 12px;
            display: flex;
            gap: 12px;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03);
            margin-bottom: 40px;
            position: relative;
            z-index: 2;
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }

        .celebration-card:hover {
            transform: translateY(-3px);
            box-shadow: 0 8px 25px rgba(0, 0, 0, 0.06);
        }

        .map-placeholder {
            width: 100px;
            background: #F0E9DD;
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
            position: relative;
            overflow: hidden;
        }

        /* Simulating map with a subtle grid background */
        .map-placeholder::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-image: linear-gradient(#D8CCB8 1px, transparent 1px), linear-gradient(90deg, #D8CCB8 1px, transparent 1px);
            background-size: 20px 20px;
            opacity: 0.4;
        }

        .map-placeholder svg {
            width: 24px;
            height: 24px;
            fill: #C67868;
            /* map pin color */
            position: relative;
            z-index: 1;
        }

        .map-info {
            flex-grow: 1;
        }

        .map-info p {
            margin: 4px 0;
            font-size: 0.8rem;
            line-height: 1.3;
            color: var(--text-light);
        }

        .map-info p strong {
            color: var(--text-dark);
            font-weight: 500;
            font-size: 0.85rem;
            text-transform: uppercase;
        }

        .address {
            font-size: 0.7rem !important;
            opacity: 0.8;
            margin-bottom: 8px !important;
        }

        .btn {
            background: var(--accent-green);
            color: #FFF;
            border: none;
            padding: 8px 14px;
            border-radius: 15px;
            font-family: var(--font-sans);
            font-size: 0.7rem;
            font-weight: 500;
            text-decoration: none;
            display: inline-flex;
            align-items: center;
            gap: 4px;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            cursor: pointer;
            transition: background-color 0.3s ease, transform 0.2s ease;
        }

        .btn:hover {
            background-color: #7A8A76;
            transform: scale(1.02);
        }

        .btn svg {
            width: 12px;
            height: 12px;
            fill: currentColor;
        }

        /* Time Section */
        .time-section {
            background: rgba(255, 255, 255, 0.4);
            border-radius: 20px;
            padding: 30px 20px;
            border: 1px solid var(--border-light);
            text-align: center;
            margin-bottom: 40px;
            position: relative;
            z-index: 2;
        }

        .time-display {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 12px;
            margin: 15px 0;
            color: var(--text-dark);
        }

        .time-display .time {
            font-size: 2.8rem;
            font-family: var(--font-serif);
            color: var(--accent-gold);
            font-weight: 400;
        }

        .time-icon {
            width: 35px;
            height: 35px;
            fill: var(--accent-gold);
            stroke: var(--text-dark);
            stroke-width: 0.5;
        }

        .time-section p {
            font-size: 0.9rem;
            line-height: 1.4;
            max-width: 280px;
            margin: 0 auto;
            color: var(--text-light);
        }

        /* Dress Code */
        .dress-code-section {
            background: rgba(255, 255, 255, 0.4);
            border-radius: 20px;
            padding: 40px 20px;
            border: 1px solid var(--border-light);
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 20px;
            margin-bottom: 40px;
            position: relative;
            z-index: 2;
        }

        .dress-text {
            width: 100%;
            text-align: center;
        }

        .dress-text h3 {
            font-size: 2.2rem;
            font-family: var(--font-serif);
            color: var(--accent-gold);
            font-weight: 400;
            line-height: 0.9;
            text-align: center;
            margin-bottom: 15px;
        }

        .dress-text p {
            font-size: 0.95rem;
            margin: 0 0 12px 0;
            line-height: 1.4;
            color: var(--text-light);
            text-align: center;
        }

        .dress-text p strong {
            font-size: 1.1rem;
            color: var(--text-dark);
            text-transform: uppercase;
            letter-spacing: 1px;
            display: inline-block;
            margin-bottom: 4px;
        }

        .dress-note {
            font-size: 0.8rem;
            color: #C67868;
            /* Tono rojizo sutil de la paleta */
            font-style: italic;
            display: block;
            text-align: center;
        }

        .clothing-icons {
            display: flex;
            gap: 6px;
            flex-shrink: 0;
            justify-content: flex-end;
            margin-top: 10px;
        }

        .clothing-icons svg {
            width: 35px;
            height: 45px;
        }

        /* RSVP */
        .rsvp-section {
            background: rgba(255, 255, 255, 0.3);
            border-radius: 20px;
            padding: 30px 20px;
            text-align: center;
            border: 1px solid rgba(255, 255, 255, 0.5);
            margin-bottom: 40px;
            position: relative;
            z-index: 2;
        }

        .rsvp-section p {
            font-size: 0.9rem;
            line-height: 1.5;
            color: var(--text-light);
            margin: 15px 0 25px 0;
        }

        .rsvp-buttons {
            display: flex;
            flex-direction: column;
            gap: 10px;
            margin-bottom: 25px;
        }

        .btn-yes {
            width: 100%;
            box-sizing: border-box;
            padding: 12px;
            font-size: 0.85rem;
            border-radius: 25px;
            justify-content: center;
        }

        .btn-no {
            width: 100%;
            padding: 12px;
            font-size: 0.85rem;
            border-radius: 25px;
            justify-content: center;
            background: transparent;
            border: 1px solid var(--accent-gold);
            color: #796652;
        }

        .rsvp-form {
            display: flex;
            flex-direction: column;
            gap: 12px;
        }

        .rsvp-form input {
            padding: 14px 20px;
            border-radius: 30px;
            border: 1px solid var(--border-light);
            background: #FFF;
            font-family: var(--font-sans);
            font-size: 0.9rem;
            outline: none;
            transition: border-color 0.2s;
        }

        .rsvp-form input:focus {
            border-color: var(--accent-gold);
        }

        /* Footer */
        .footer {
            text-align: center;
            margin-top: 20px;
            position: relative;
            z-index: 2;
        }

        .dogs-image {
            max-width: 100%;
            height: auto;
            max-height: 140px;
            object-fit: contain;
            border-radius: 20px;
            margin: 0 auto 10px auto;
            display: block;
        }

        .dog-names {
            display: flex;
            justify-content: center;
            gap: 25px;
            font-weight: 500;
            font-size: 0.85rem;
            margin-bottom: 5px;
        }

        .footer p {
            font-size: 0.85rem;
            color: var(--text-light);
            line-height: 1.4;
        }

        /* Decorations (Garlands, Leaves, etc) */
        .decor {
            position: absolute;
            z-index: 1;
            pointer-events: none;
        }

        .garland-tr {
            top: 0;
            right: 0;
            width: 140px;
        }

        .garland-tl {
            top: 300px;
            left: 0;
            width: 100px;
            opacity: 0.5;
        }

        .leaf-bl {
            bottom: 50px;
            left: -10px;
            width: 80px;
        }

        .leaf-mr {
            top: 400px;
            right: -10px;
            width: 60px;
        }

        .paw-print {
            width: 15px;
            fill: #D6CAB5;
            position: absolute;
            opacity: 0.6;
        }

        .paw-1 {
            top: 150px;
            left: 20px;
        }

        .paw-2 {
            top: 180px;
            left: 40px;
        }

        .paw-3 {
            bottom: 120px;
            right: 20px;
        }

        .paw-4 {
            bottom: 90px;
            right: 40px;
        }

        /* --- Envelope Animation --- */
        .envelope-wrapper {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: var(--bg-base);
            z-index: 9999;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: opacity 0.8s ease-in-out, visibility 0.8s ease-in-out;
            visibility: visible;
        }

        .envelope-wrapper.fade-out {
            opacity: 0;
            visibility: hidden;
        }

        .envelope {
            position: relative;
            width: 320px;
            height: 220px;
            background-color: transparent;
            border-radius: 6px;
            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
            cursor: pointer;
            transition: transform 0.3s ease;
            perspective: 1200px;
        }

        .envelope:not(.open):hover {
            transform: translateY(-5px);
        }

        .envelope:not(.open):hover .flap {
            transform: rotateX(15deg);
        }

        .env-back {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: #C1AC94;
            border-radius: 6px;
            z-index: 0;
        }

        .envelope-inner {
            position: absolute;
            top: 3px;
            left: 3px;
            width: calc(100% - 6px);
            height: calc(100% - 6px);
            background-color: var(--bg-card);
            border-radius: 4px;
            z-index: 1;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        }

        .envelope-inner::after {
            content: attr(data-guest) '\A Nuestra Boda...';
            white-space: pre;
            position: absolute;
            top: 20px;
            left: 0;
            width: 100%;
            text-align: center;
            color: var(--accent-gold);
            font-family: var(--font-serif);
            font-size: 1.5rem;
            font-style: italic;
            line-height: 1.2;
        }

        .env-flaps {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 2;
            pointer-events: none;
        }

        .flap {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 160px;
            z-index: 3;
            transform-origin: top;
            transition: transform 0.6s cubic-bezier(0.3, 0.1, 0.2, 1), z-index 0.6s ease-in-out;
            pointer-events: none;
            transform-style: preserve-3d;
        }

        .seal {
            position: absolute;
            top: 120px;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 58px;
            height: 58px;
            background: radial-gradient(circle at 35% 35%, #8A9988 0%, #687A67 55%, #4B5A49 100%);
            border-radius: 47% 53% 51% 49% / 50% 48% 52% 50%;
            z-index: 5;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #F8EDDF;
            font-family: var(--font-serif);
            font-size: 1.5rem;
            box-shadow:
                inset 1px 1px 3px rgba(255, 255, 255, 0.35),
                inset -2px -2px 5px rgba(0, 0, 0, 0.45),
                0 4px 8px rgba(0, 0, 0, 0.3);
            pointer-events: none;
            transition: opacity 0.3s ease;
        }

        .seal-inner {
            text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5), -1px -1px 0 rgba(255, 255, 255, 0.15);
            font-weight: 500;
            display: flex;
            align-items: center;
            gap: 1px;
            letter-spacing: -1px;
        }

        .seal-amp {
            font-size: 0.95rem;
            font-style: italic;
            opacity: 0.85;
            margin: 0 1px;
        }

        .seal-paw {
            position: absolute;
            width: 8.5px;
            height: 8.5px;
            fill: #556653;
            filter: drop-shadow(0.5px 0.5px 0.5px rgba(255, 255, 255, 0.25)) drop-shadow(-0.5px -0.5px 0.5px rgba(0, 0, 0, 0.4));
        }

        .s-paw1 {
            top: 11px;
            left: 14px;
            transform: rotate(-25deg);
        }

        .s-paw2 {
            top: 14px;
            right: 10px;
            transform: rotate(35deg);
        }

        .s-paw3 {
            bottom: 10px;
            left: 25px;
            transform: rotate(-5deg);
        }

        .tap-text {
            position: absolute;
            bottom: -40px;
            width: 100%;
            text-align: center;
            color: var(--text-light);
            font-size: 0.85rem;
            letter-spacing: 1px;
            animation: pulseText 2s infinite;
        }

        @keyframes pulseText {
            0% {
                opacity: 0.5;
            }

            50% {
                opacity: 1;
            }

            100% {
                opacity: 0.5;
            }
        }

        .envelope.open .flap {
            transform: rotateX(180deg);
            z-index: 0;
        }

        .envelope.open .seal {
            opacity: 0;
            transition: opacity 0.2s ease;
        }

        .envelope.open {
            cursor: default;
        }

        /* --- End Envelope Animation --- */