/* --- IMPORTAR FUENTE MANUSCRITA (Great Vibes) --- */
@import url('https://fonts.googleapis.com/css2?family=Great+Vibes&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Bangers&family=Quicksand:wght@300;400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Luckiest+Guy&family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap');


/* --- ESTILOS VISUALES (TEMA BALLET - ELEGANCIA PASTEL & DORADO) --- */
:root {
    /* PALETA "GALA DE BALLET" (Pasteles + Oro) */
    
    --spidey-red: #e78ea9;   /* Rosa Empolvado */
    --spidey-blue: #e7d391;  /* Azul Cielo Pastel */
    --gold-accent: #D4AF37;  /* Oro Metálico Suave */
    --gold-light: #F4E0A8;   /* Oro claro */
    --gold-ochre: #b59b50;   /* Nuevo: Dorado Ocre (para subtítulos de la imagen) */
    --rose-old: #d68fa8;     /* Nuevo: Rosa Viejo (para el Nombre Dannaé) */
    
    --miles-black: #6D5D5D;  /* Gris Topo Cálido */
    
    --gwen-pink: #FFF5F8;    /* Fondo blanco rosado */
    --gwen-purple: #E0C6D6;  /* Lila suave */
    --gwen-cyan: #FFFFFF;    
    
    --bg-color: #FFFAF0;     /* Fondo crema marfil */

    /* FUENTES */
    --font-title: 'Luckiest Guy', cursive; /* Se mantiene para botones divertidos */
    --font-script: 'Great Vibes', cursive; /* NUEVA: Para el nombre principal */
    --font-body: 'Quicksand', sans-serif;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
}

body {
    font-family: var(--font-body);
    background-color: var(--bg-color);
    color: var(--miles-black);
    overflow-x: hidden;
    font-size: 18px;
    background-image: url('../img/portada.png');
    background-blend-mode: soft-light;
    background-attachment: fixed;
}


/* Animación de latido suave para llamar la atención */
@keyframes pulse-btn {
    0% { box-shadow: 0 0 0 0 rgba(255, 105, 180, 0.4); transform: scale(1); }
    70% { box-shadow: 0 0 0 10px rgba(255, 105, 180, 0); transform: scale(1.02); }
    100% { box-shadow: 0 0 0 0 rgba(255, 105, 180, 0); transform: scale(1); }
}

.btn-map {
    /* Nueva Tipografía */
    font-family: 'Verdana', sans-serif; 
    font-weight: bold;
    font-size: 0.9rem;
    letter-spacing: 1px; /* Espaciado entre letras para toque premium */
    color: #ffffff; /* Color de texto elegante */
    
    /* Estilo del botón */
    background: #fff;
    padding: 12px 25px;
    border-radius: 50px; /* Bordes totalmente redondos */
    border: 2px solid #D4AF37; /* Borde rosado delgado */
    text-decoration: none;
    display: inline-flex; 
    align-items: center; 
    gap: 10px;
    
    /* Animaciones */
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    animation: pulse-btn 2s infinite; /* El botón "latirá" infinitamente */
}

/* Efecto al pasar el mouse (Hover) */
.btn-map:hover {
    background: #D4AF37; /* Se llena de color rosado */
    color: white; /* Texto cambia a blanco */
    transform: translateY(-5px); /* Se eleva */
    box-shadow: 0 10px 20px rgba(255, 105, 180, 0.3); /* Sombra suave */
}

/* Para que el icono cambie de color a blanco al hacer hover */
.btn-map:hover svg {
    fill: white !important;
    transition: fill 0.3s ease;
}

/* --- ANIMACIONES (Suavizadas) --- */
@keyframes float-swing {
    0%, 100% { transform: translateY(0) rotate(0.5deg); }
    50% { transform: translateY(-6px) rotate(-0.5deg); }
}

@keyframes comic-pop {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.03); }
}

@keyframes web-bounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
}

@keyframes gold-shine {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

.anim-float { animation: float-swing 4s infinite ease-in-out; }
.anim-pop { animation: comic-pop 3s infinite ease-in-out; }
.anim-bounce { animation: web-bounce 3s infinite ease-in-out; }

/* --- Utilidades de Patrón --- */
.comic-pattern-bg {
    background-color: #fff;
    background-image: radial-gradient(rgba(212, 175, 55, 0.15) 10%, transparent 11%), radial-gradient(rgba(255, 196, 214, 0.15) 10%, transparent 11%);
    background-size: 24px 24px;
    background-position: 0 0, 12px 12px;
}

/* --- SOBRE (Intro) --- */
#envelope-container {
    position: fixed;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background: linear-gradient(135deg, var(--spidey-red) 0%, var(--spidey-blue) 100%);
    z-index: 9999;
    transition: opacity 0.6s ease;
    padding: 15px;
}

.intro-text {
    font-family: var(--font-title);
    font-size: 2.2rem;
    color: var(--gold-accent);
    text-shadow: 2px 2px 4px rgba(0,0,0,0.1);
    text-align: center;
    margin-bottom: 30px;
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(10px);
    padding: 20px 35px;
    border-radius: 30px;
    border: 3px solid var(--gold-accent);
    transform: rotate(-1deg);
    z-index: 2;
    letter-spacing: 1px;
    box-shadow: 0 10px 30px rgba(212, 175, 55, 0.2);
}

.envelope-wrapper {
    position: relative;
    width: 100%;
    max-width: 320px;
    aspect-ratio: 4/3;
    margin-bottom: 20px;
    perspective: 1000px;
    z-index: 20;
}

.envelope {
    position: relative;
    width: 100%;
    height: 100%;
    background: #fff;
    border-radius: 20px;
    box-shadow: 0 20px 50px rgba(212, 175, 55, 0.3);
    border: 4px solid var(--gold-accent);
    z-index: 5;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: transform 0.3s;
}

.envelope:hover {
    transform: scale(1.02);
}

.card-preview {
    position: absolute;
    top: 15px;
    left: 15px;
    right: 15px;
    bottom: 15px;
    background: white;
    border-radius: 15px;
    border: 2px dashed var(--spidey-blue);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    z-index: 2;
    transition: transform 0.9s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.envelope-wrapper.open .card-preview {
    transform: translateY(-60%) scale(1.1) rotate(1deg);
    z-index: 20;
    box-shadow: 0 20px 40px rgba(180, 224, 232, 0.4);
    border: 3px solid var(--spidey-blue);
}

.seal-btn {
    position: absolute;
    bottom: 20%;
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(to right, var(--gold-accent), var(--gold-light));
    color: white;
    font-family: var(--font-title);
    font-size: 1.4rem;
    padding: 12px 40px;
    border-radius: 50px;
    border: 3px solid white;
    box-shadow: 0 8px 20px rgba(212, 175, 55, 0.5);
    z-index: 10;
    cursor: pointer;
    text-transform: uppercase;
    transition: all 0.3s;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.2);
}

.seal-btn:hover {
    transform: translateX(-50%) scale(1.05);
    box-shadow: 0 12px 25px rgba(212, 175, 55, 0.7);
}

/* --- HERO --- */
#main-content {
    opacity: 0;
    visibility: hidden;
    transition: opacity 1s ease;
}

.hero {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    text-align: center;
    padding: 20px;
    position: relative;
    overflow: hidden;
    background: linear-gradient(to bottom, #FFFAF0 0%, #FFF5F8 100%);
    z-index: 1;
}

.hero-bg-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 60%;
    background-image: url('../img/portada.png');
    background-size: cover;
    background-position: top center;
    z-index: -1;
    -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,0.8) 40%, transparent 100%);
    mask-image: linear-gradient(to bottom, rgba(0,0,0,0.8) 40%, transparent 100%);
    opacity: 0.8;
}

.hero-top-group {
    position: relative;
    z-index: 10;
    width: 100%;
    margin-top: 30vh;
}

/* --- ACTUALIZADO: SUBTÍTULO SUPERIOR (Estilo Imagen) --- */
.hero .subtitle-top {
    font-weight: 400;
    font-size: 1.8rem;
    color: var(--gold-ochre); /* Color ocre de la imagen */
    background: transparent;
    padding: 0;
    border: none;
    box-shadow: none;
    display: block;
    transform: none;
    margin-bottom: 48px; /* Pegadito al nombre */
    text-transform: none;
    letter-spacing: 1px;
}

/* --- ACTUALIZADO: NOMBRE "DANNAÉ" (ESTILO CALIGRAFÍA) --- */
.hero h1 {
    font-family: var(--font-script); /* Fuente Great Vibes */
    font-size: 6.5rem; /* Tamaño muy grande */
    line-height: 1.1;
    margin: 10px 0;
    
    /* Color Rosa Viejo Solido */
    color: var(--rose-old); 
    background: none;
    -webkit-text-fill-color: initial;
    -webkit-background-clip: initial;
    
    /* Sin bordes gruesos ni efectos comic */
    -webkit-text-stroke: 0;
    font-weight: 400;
    text-transform: none; /* Respetar mayúsculas y minúsculas */
    
    /* Sombra muy suave y elegante */
    filter: drop-shadow(2px 2px 2px rgba(0, 0, 0, 0.1));
    text-shadow: none;
    
    transform: rotate(-5deg); /* Ligera inclinación elegante */
    animation: float-swing 6s infinite ease-in-out; /* Animación suave de flotación */
}

/* --- ACTUALIZADO: AGE BADGE (ESTILO CUMPLE 6 AÑOS) --- */
.hero .age-badge {
    display: inline-block;
    background: transparent;
    color: var(--gold-ochre); /* Mismo color que el subtítulo */
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 1.2rem;
    padding: 5px 20px;
    border-radius: 0;
    border: none;
    border-top: 1px solid var(--gold-light);
    border-bottom: 1px solid var(--gold-light);
    box-shadow: none;
    margin-top: 5px;
    animation: none;
    text-transform: uppercase;
    letter-spacing: 2px;
}

/* --- CONTADOR --- */
.countdown-container {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    padding: 25px 15px;
    border-radius: 35px;
    border: 3px solid var(--gold-accent);
    margin-top: 20px;
    width: 100%;
    max-width: 95%;
    margin-left: auto;
    margin-right: auto;
    box-shadow: 0 15px 40px rgba(212, 175, 55, 0.25);
    position: relative;
    transition: transform 0.3s;
}

.countdown-container:hover {
    transform: translateY(-3px);
}

.countdown-container::before {
    content: 'FALTAN';
    position: absolute;
    top: -18px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--gold-accent);
    color: white;
    font-family: var(--font-body);
    font-weight: 700;
    padding: 6px 25px;
    border-radius: 20px;
    font-size: 1rem;
    white-space: nowrap;
    border: 2px solid white;
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
    letter-spacing: 2px;
}

.countdown {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-top: 12px;
}

.countdown-box {
    background: linear-gradient(135deg, var(--spidey-red), var(--gwen-purple));
    color: white;
    width: 70px;
    height: 80px;
    border-radius: 20px;
    text-align: center;
    border: 2px solid white;
    box-shadow: 0 8px 20px rgba(255, 196, 214, 0.4);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.countdown-box span {
    font-family: var(--font-title);
    font-size: 2.2rem;
    color: white;
    line-height: 1;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.1);
}

.countdown-box small {
    font-size: 0.8rem;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.9);
    font-weight: bold;
    letter-spacing: 1px;
}

/* --- SECCIONES --- */
.section-wrapper {
    padding: 20px 15px;
    max-width: 680px;
    margin: 0 auto;
    position: relative;
    z-index: 5;
    margin-top: -40px;
}

section {
    background: white;
    border-radius: 40px;
    padding: 40px 30px;
    margin-bottom: 50px;
    position: relative;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

section:hover {
    transform: scale(1.03) rotate(0deg) !important;
    box-shadow: 0 30px 60px rgba(212, 175, 55, 0.2) !important;
    z-index: 10;
}

section:nth-child(odd) {
    transform: rotate(-0.5deg);
    border: 3px solid var(--spidey-red);
    box-shadow: 0 20px 40px rgba(255, 196, 214, 0.2);
}

section:nth-child(even) {
    transform: rotate(0.5deg);
    border: 3px solid var(--spidey-blue);
    box-shadow: 0 20px 40px rgba(180, 224, 232, 0.25);
}

section > * { transform: rotate(0.5deg); }
section:nth-child(even) > * { transform: rotate(-0.5deg); }

h2 {
    font-family: "Meow Script";
    font-size: 1.8rem;
    color: var(--gold-accent);
    text-align: center;
    margin-bottom: 30px;
    text-transform: uppercase;
    text-shadow: 2px 2px 0 rgba(0,0,0,0.05);
    position: relative;
    display: inline-block;
    left: 50%;
    transform: translateX(-50%);
    background: #fff;
    padding: 10px 35px;
    border-radius: 35px;
    z-index: 2;
    
    /* --- CAMBIO AQUÍ --- */
    /* Antes era: border: 3px dashed var(--spidey-red); */
    border: 3px solid var(--spidey-red); /* Ahora es una línea sólida y limpia */
    /* ------------------- */

    white-space: nowrap;
    letter-spacing: 1px;
}

.info-card {
    background: var(--gwen-pink);
    padding: 25px;
    border-radius: 25px;
    border: 2px solid white;
    margin-bottom: 20px;
    text-align: center;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.03);
    transition: transform 0.3s, border-color 0.3s;
    cursor: default;
}

.info-card:hover {
    transform: translateY(-5px);
    border-color: var(--gold-light);
}

.icon-large {
    font-size: 4rem;
    display: block;
    margin-bottom: 15px;
    animation: float-swing 3s infinite ease-in-out;
    filter: drop-shadow(0 5px 5px rgba(212, 175, 55, 0.3));
}

/* BOTONES GLAMOUR */
.btn {
    display: block;
    width: 100%;
    padding: 18px;
    font-family: var(--font-title);
    font-size: 1.4rem;
    text-align: center;
    color: white;
    background: linear-gradient(45deg, var(--spidey-red), var(--gold-accent), var(--spidey-red));
    background-size: 200% 200%;
    border-radius: 50px;
    border: 3px solid white;
    box-shadow: 0 10px 30px rgba(255, 196, 214, 0.5);
    text-decoration: none;
    cursor: pointer;
    transition: all 0.3s;
    text-transform: uppercase;
    letter-spacing: 1px;
    position: relative;
    top: 0;
    animation: gold-shine 3s infinite linear;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.1);
}

.btn:hover {
    transform: scale(1.05);
    box-shadow: 0 15px 40px rgba(255, 196, 214, 0.7);
}

.btn:active {
    top: 2px;
    transform: scale(0.98);
}

.btn-map {
    background: linear-gradient(45deg, var(--spidey-blue), var(--gold-accent), var(--spidey-blue));
    background-size: 200% 200%;
    box-shadow: 0 10px 30px rgba(180, 224, 232, 0.6);
}

/* Timeline */
.timeline {
    border-left: 4px dotted var(--gold-accent);
    margin-left: 25px;
    padding-left: 30px;
}

.event {
    position: relative;
    margin-bottom: 45px;
    transition: transform 0.3s;
}

.event:hover {
    transform: translateX(5px);
}

.timeline-icon-box {
    position: absolute;
    left: -53px;
    top: -5px;
    width: 55px;
    height: 55px;
    background: white;
    border-radius: 50%;
    border: 3px solid var(--spidey-red);
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 2rem;
    z-index: 2;
    box-shadow: 0 8px 20px rgba(255, 196, 214, 0.3);
}

.time {
    font-family: var(--font-body);
    font-weight: 700;
    color: var(--gold-accent);
    font-size: 1.1rem;
    background: white;
    display: inline-block;
    padding: 6px 20px;
    border-radius: 20px;
    margin-bottom: 10px;
    box-shadow: 0 3px 10px rgba(0,0,0,0.05);
    border: 1px solid var(--gold-light);
    letter-spacing: 1px;
}

/* Gifts */
.gift-options-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 25px;
    width: 100%;
}

.gift-card {
    flex: 1 1 200px;
    max-width: 300px;
    background: white;
    border-radius: 30px;
    border: 3px solid #eee;
    padding: 35px 20px;
    text-align: center;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.05);
    position: relative;
    transition: all 0.3s;
    cursor: pointer;
}

.gift-card:hover {
    transform: translateY(-10px) rotate(1deg);
    border-color: var(--gold-accent);
    box-shadow: 0 20px 50px rgba(212, 175, 55, 0.25);
}

.gift-card.envelope { border-top: 5px solid var(--spidey-blue); }
.gift-card.present { border-top: 5px solid var(--spidey-red); }

.clothing-sizes {
    margin-top: 40px;
    background: linear-gradient(135deg, var(--spidey-blue), #C4E9F2);
    color: white;
    padding: 30px;
    border-radius: 35px;
    text-align: center;
    box-shadow: 0 20px 40px rgba(180, 224, 232, 0.4);
    border: 4px dashed white;
    transform: rotate(-0.5deg);
    transition: transform 0.3s;
}

.clothing-sizes:hover {
    transform: rotate(0deg) scale(1.02);
}

.size-tag {
    display: inline-block;
    background: white;
    color: var(--miles-black);
    font-family: var(--font-body);
    font-weight: 700;
    padding: 10px 25px;
    margin: 8px;
    border-radius: 25px;
    font-size: 1.1rem;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
    border: 2px solid var(--gold-light);
    transition: all 0.2s;
}

.size-tag:hover {
    border-color: var(--gold-accent);
    color: var(--gold-accent);
    transform: scale(1.05);
}

/* Polaroid */
.polaroid {
    background: white;
    padding: 15px 15px 50px 15px;
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.08);
    transform: rotate(-2deg) scale(0.98);
    border-radius: 4px;
    border: 1px solid #f0f0f0;
    margin-bottom: 35px;
    min-width: 200px;
    transition: all 0.5s ease;
}

.polaroid:hover {
    transform: rotate(0deg) scale(1.05);
    z-index: 20;
    box-shadow: 0 35px 70px rgba(212, 175, 55, 0.2);
}

.polaroid img {
    width: 100%;
    border-radius: 2px;
}

/* RSVP Styled */
.rsvp-card-styled {
    background: #ffffff;
    border: 4px solid var(--gold-accent);
    border-radius: 40px;
    box-shadow: 0 30px 60px rgba(212, 175, 55, 0.25);
    padding: 40px 25px;
    position: relative;
    transform: rotate(0.5deg) !important;
}

.rsvp-card-styled::before {
    content: '';
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    width: 100px;
    height: 8px;
    background: var(--gold-accent);
    border-radius: 10px;
}

.coco-input {
    width: 100%;
    padding: 18px;
    border: 3px solid var(--gwen-purple);
    border-radius: 20px;
    font-family: var(--font-body);
    font-size: 1.2rem;
    background: #FDFAFD;
    text-align: center;
    outline: none;
    transition: all 0.3s;
    color: var(--miles-black);
}

.coco-input:focus {
    background: #fff;
    border-color: var(--gold-accent);
    box-shadow: 0 0 0 6px rgba(212, 175, 55, 0.15);
    transform: scale(1.02);
}

.step-btn {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border: 2px solid #eee;
    font-family: var(--font-title);
    font-size: 1.8rem;
    cursor: pointer;
    background: white;
    color: var(--miles-black);
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 0.2s;
    box-shadow: 0 5px 10px rgba(0,0,0,0.05);
}

.step-btn:hover {
    border-color: var(--gold-accent);
    color: var(--gold-accent);
    transform: scale(1.1);
}

.btn-plus.blue { background: var(--spidey-blue); color: white; border: none; }
.btn-plus.blue:hover { background: #A0D8E2; }
.btn-plus.red { background: var(--spidey-red); color: white; border: none; }
.btn-plus.red:hover { background: #FFB0C8; }

.btn-submit-rsvp {
    background: linear-gradient(45deg, var(--spidey-red), var(--gold-accent));
    background-size: 200% 200%;
    color: white;
    border: none;
    border-radius: 50px;
    font-size: 1.5rem;
    padding: 18px;
    width: 100%;
    font-family: var(--font-title);
    cursor: pointer;
    box-shadow: 0 15px 35px rgba(212, 175, 55, 0.3);
    margin-top: 20px;
    text-transform: uppercase;
    animation: gold-shine 3s infinite linear;
    transition: transform 0.2s;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.1);
}

.btn-submit-rsvp:hover { transform: scale(1.03); }

/* --- SPIDER (Ajustado para no desentonar tanto o quitar si no se usa) --- */
.hanging-spider {
    position: absolute;
    top: -50px;
    right: 20px;
    width: 80px;
    z-index: 20;
    animation: float-swing 4s infinite ease-in-out;
    opacity: 0.8; /* Se hizo un poco más transparente para ser sutil */
}

.hanging-spider::before {
    content: '';
    position: absolute;
    top: -100px;
    left: 50%;
    width: 3px;
    height: 120px;
    background: rgba(212, 175, 55, 0.3);
    z-index: -1;
}

footer {
    text-align: center;
    padding: 80px 20px 50px;
    background: var(--spidey-blue);
    color: white;
    margin-top: 80px;
    border-top-left-radius: 50% 40px;
    border-top-right-radius: 50% 40px;
    position: relative;
    box-shadow: 0 -20px 40px rgba(180, 224, 232, 0.3);
}

.music-fab {
    position: fixed;
    bottom: 25px;
    right: 25px;
    width: 65px;
    height: 65px;
    background: var(--gold-accent);
    border: 4px solid white;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 2rem;
    z-index: 100;
    cursor: pointer;
    box-shadow: 0 15px 30px rgba(212, 175, 55, 0.5);
    animation: web-bounce 3s infinite;
    transition: transform 0.3s;
}

.music-fab:hover { transform: scale(1.1) rotate(10deg); }

/* --- ESTILOS SWEETALERT --- */
div:where(.swal2-container) .swal2-title {
    font-family: var(--font-title) !important;
    font-size: 1.4rem !important;
    color: var(--gold-accent) !important;
    text-transform: uppercase !important;
    text-shadow: 2px 2px 0 white !important;
    -webkit-text-stroke: 0 !important;
    background: white !important;
    position: relative !important;
    left: auto !important;
    right: auto !important;
    transform: rotate(-1deg) !important;
    display: inline-block !important;
    width: auto !important;
    max-width: 90% !important;
    margin: 0 auto 25px auto !important;
    padding: 10px 35px !important;
    border: 3px solid var(--spidey-red) !important;
    border-radius: 25px !important;
    box-shadow: 0 15px 30px rgba(212, 175, 55, 0.2) !important;
    text-align: center !important;
}

div:where(.swal2-container) .swal2-html-container {
    font-family: var(--font-body) !important;
    font-weight: 600 !important;
    color: var(--miles-black) !important;
    font-size: 1.2rem !important;
    background: white !important;
    padding: 20px !important;
    border: none !important;
    text-align: center !important;
    margin: 0 auto !important;
}

div:where(.swal2-popup) {
    border-radius: 35px !important;
    border: 4px solid var(--gold-light) !important;
    background: #fff !important;
    box-shadow: 0 30px 60px rgba(212, 175, 55, 0.2) !important;
}

div:where(.swal2-container) .swal2-confirm {
    background: linear-gradient(135deg, var(--gold-accent), var(--spidey-red)) !important;
    color: white !important;
    font-family: var(--font-title) !important;
    font-size: 1.4rem !important;
    text-transform: uppercase !important;
    border: 3px solid white !important;
    border-radius: 50px !important;
    box-shadow: 0 15px 25px rgba(212, 175, 55, 0.3) !important;
    padding: 15px 45px !important;
    transition: transform 0.2s !important;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.1) !important;
}

div:where(.swal2-container) .swal2-confirm:hover { transform: scale(1.05) !important; }

div:where(.swal2-container) .swal2-cancel {
    background: #f4f4f4 !important;
    color: #999 !important;
    font-family: var(--font-body) !important;
    font-weight: 700 !important;
    border-radius: 50px !important;
    padding: 12px 30px !important;
    border: 2px solid #eee !important;
}

.swal2-icon {
    border-color: var(--gold-accent) !important;
    color: var(--gold-accent) !important;
}






/* Contenedor de las tarjetas de regalo */
                .gift-grid {
                    display: flex;
                    flex-wrap: wrap;
                    gap: 20px;
                    justify-content: center;
                    width: 100%;
                    max-width: 900px;
                }

                /* Diseño de cada tarjeta */
                .gift-card-item {
                    background: #fff;
                    border: 2px solid #FFE4E1;
                    /* Borde rosa muy pálido */
                    border-radius: 20px;
                    padding: 25px;
                    flex: 1;
                    min-width: 280px;
                    /* Para que se vean bien en celular */
                    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.03);
                    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
                    /* Efecto rebote suave */
                    position: relative;
                    overflow: hidden;
                }

                /* Efecto Hover: La tarjeta se eleva y el borde se pone rosa intenso */
                .gift-card-item:hover {
                    transform: translateY(-10px) scale(1.02);
                    border-color: #FF69B4;
                    box-shadow: 0 20px 40px rgba(255, 105, 180, 0.2);
                }

                /* Títulos dentro de las tarjetas */
                .gift-card-title {
                    font-family: var(--font-title, sans-serif);
                    /* Usa tu fuente de títulos */
                    color: #FF69B4;
                    font-size: 1.4rem;
                    margin-bottom: 15px;
                    text-align: center;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    gap: 10px;
                }

                /* Listas de regalos */
                .gift-list {
                    list-style: none;
                    padding: 0;
                    margin: 0;
                    text-align: left;
                }

                .gift-list li {
                    margin-bottom: 10px;
                    display: flex;
                    align-items: start;
                    gap: 10px;
                    color: #555;
                    font-size: 0.95rem;
                    line-height: 1.4;
                }

                /* Pequeño punto rosado para las listas */
                .gift-bullet {
                    min-width: 8px;
                    height: 8px;
                    background: #FF69B4;
                    border-radius: 50%;
                    margin-top: 6px;
                }

                /* Estilo especial para la sección de Alcancía */
                .piggy-bank-box {
                    background: linear-gradient(135deg, #FFF0F5, #fff);
                    text-align: center;
                    border: 2px dashed #FF69B4;
                }

                /* Animación del sobrecito */
                @keyframes float-envelope {

                    0%,
                    100% {
                        transform: translateY(0);
                    }

                    50% {
                        transform: translateY(-10px);
                    }
                }

                .anim-envelope {
                    animation: float-envelope 3s ease-in-out infinite;
                    display: inline-block;
                }







                /* Contenedor de la galería */
.gallery-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 40px; /* Espacio para que las fotos respiren */
    padding: 30px 10px;
    width: 100%;
    perspective: 1000px; /* Prepara el escenario para 3D */
}

/* Estilo Base de la Polaroid */
.polaroid-magic {
    background: white;
    padding: 15px 15px 40px 15px; /* Más espacio abajo para el texto */
    box-shadow: 0 10px 20px rgba(0,0,0,0.1);
    border-radius: 4px; /* Bordes ligeramente redondeados */
    width: 100%;
    max-width: 300px; /* Ancho máximo de la foto */
    position: relative;
    transition: all 0.5s cubic-bezier(0.25, 0.8, 0.25, 1);
    cursor: pointer;
    z-index: 1;
}

/* --- INTERACTIVIDAD Y MOVIMIENTO --- */

/* Foto 1 (Impar): Se inclina a la izquierda */
.polaroid-magic:nth-child(odd) {
    transform: rotate(-3deg);
}

/* Foto 2 (Par): Se inclina a la derecha */
.polaroid-magic:nth-child(even) {
    transform: rotate(3deg) translateY(10px);
}

/* HOVER: La foto "flota" hacia el usuario */
.polaroid-magic:hover {
    transform: rotate(0deg) scale(1.1) translateY(-10px); /* Se endereza y crece */
    z-index: 10; /* Se pone encima de todo */
    box-shadow: 0 25px 50px rgba(255, 105, 180, 0.3); /* Sombra rosada intensa */
}

/* La imagen dentro de la polaroid */
.polaroid-magic img {
    width: 100%;
    height: auto;
    border-radius: 2px;
    display: block;
    filter: sepia(10%); /* Un toque vintage sutil */
    transition: filter 0.3s;
}

.polaroid-magic:hover img {
    filter: sepia(0%); /* Vuelve a color completo al hover */
}

/* --- DETALLE: CINTA ADHESIVA (Washi Tape) --- */
.polaroid-magic::before {
    content: '';
    position: absolute;
    top: -15px;
    left: 50%;
    transform: translateX(-50%);
    width: 100px;
    height: 30px;
    background-color: rgba(232, 184, 238, 0.4); /* Cinta rosada semitransparente */
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    z-index: 2;
    clip-path: polygon(0% 5%, 100% 0%, 98% 95%, 2% 100%); /* Bordes irregulares como cinta rota */
}

/* Texto de pie de foto */
.polaroid-caption {
    font-family: 'Verdana', sans-serif; /* O tu variable --font-title */
    color: #555;
    text-align: center;
    margin-top: 15px;
    font-size: 1rem;
    font-weight: bold;
    letter-spacing: 1px;
}


/* Tarjeta Principal del RSVP */
.rsvp-card-styled {
    background: white;
    border-radius: 30px;
    padding: 40px 20px;
    box-shadow: 0 20px 60px rgba(255, 105, 180, 0.15);
    border: 1px solid rgba(255, 192, 203, 0.3);
    max-width: 600px;
    width: 90%;
    margin: 0 auto;
    position: relative;
    overflow: hidden;
}

/* Decoración superior (barra de color) */
.rsvp-card-styled::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 8px;
    background: linear-gradient(90deg, #FF69B4, #FFD700);
}

/* Estilos de los Inputs (Campos de texto) */
.coco-input {
    width: 100%;
    padding: 15px;
    border: 2px solid #FFE4E1; /* Rosa muy pálido */
    border-radius: 15px;
    font-family: inherit;
    font-size: 1rem;
    outline: none;
    transition: all 0.3s ease;
    background: #FFFDFD;
    color: #555;
    text-align: center; /* Texto centrado se ve más elegante */
}

/* Al tocar el input, se pone rosa */
.coco-input:focus {
    border-color: #FF69B4;
    box-shadow: 0 0 15px rgba(255, 105, 180, 0.1);
    transform: translateY(-2px);
}

/* Estilos de los Contadores (Adultos/Niños) */
.counter-item {
    background: white;
    border: 1px solid #FFE4E1;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.counter-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(255, 105, 180, 0.1);
    border-color: #FF69B4;
}

/* Botones de + y - */
.step-btn {
    width: 35px;
    height: 35px;
    border-radius: 50%;
    border: none;
    font-weight: bold;
    font-size: 1.2rem;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Botón Menos */
.step-btn:first-child {
    background: #f0f0f0;
    color: #888;
}

/* Botón Más (Rosado) */
.btn-plus {
    background: #FF69B4;
    color: white;
    box-shadow: 0 4px 10px rgba(255, 105, 180, 0.3);
}

.step-btn:active {
    transform: scale(0.9);
}

/* Botón Principal de Enviar */
.btn-submit-rsvp {
    background: linear-gradient(135deg, #FF69B4, #FF1493);
    color: white;
    border: none;
    padding: 18px;
    border-radius: 50px;
    width: 100%;
    font-size: 1.1rem;
    font-weight: bold;
    letter-spacing: 1px;
    cursor: pointer;
    box-shadow: 0 10px 25px rgba(255, 20, 147, 0.3);
    transition: all 0.3s ease;
    margin-top: 20px;
    text-transform: uppercase;
}

.btn-submit-rsvp:hover {
    transform: translateY(-3px);
    box-shadow: 0 15px 35px rgba(255, 20, 147, 0.4);
}

/* Botón de rechazar (sutil) */
.btn-deny {
    background: transparent;
    border: 2px solid #eee;
    color: #999;
    border-radius: 50px;
    width: 100%;
    padding: 12px;
    margin-top: 15px;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.3s;
}
.btn-deny:hover {
    border-color: #bbb;
    color: #666;
    background: #f9f9f9;
}




:root {
                    --ballet-pink: #e692bc;
                    --ballet-light: #FFF0F5;
                }

                /* Estructura básica de la línea de tiempo (asumiendo que ya tienes algo similar) */
                .timeline {
                    position: relative;
                    max-width: 800px;
                    margin: 0 auto;
                    padding: 20px;
                }

                /* Línea central vertical */
                .timeline::before {
                    content: '';
                    position: absolute;
                    left: 50px;
                    /* Ajusta según tu diseño */
                    top: 0;
                    bottom: 0;
                    width: 4px;
                    background: rgba(255, 105, 180, 0.3);
                    border-radius: 4px;
                }

                /* --- ESTILOS DEL EVENTO Y ANIMACIONES --- */

                .event {
                    display: flex;
                    margin-bottom: 40px;
                    position: relative;
                    cursor: default;
                    /* Para indicar que no es un enlace clickeable */

                    /* Preparación para la animación de entrada (Scroll Reveal) */
                    opacity: 0;
                    transform: translateY(50px) scale(0.9);
                    /* Empieza más abajo y pequeño */
                    transition: all 0.8s cubic-bezier(0.25, 0.8, 0.25, 1);
                    /* Curva de animación suave tipo ballet */
                }

                /* Esta clase se añade con JS cuando el elemento es visible en pantalla */
                .event.is-visible {
                    opacity: 1;
                    transform: translateY(0) scale(1);
                }

                /* --- Animaciones Hover (Interacción) --- */

                /* Cuando el mouse pasa sobre TODO el evento */
                .event:hover .details-box {
                    transform: translateY(-8px);
                    /* Se eleva elegantemente */
                    box-shadow: 0 15px 30px rgba(255, 105, 180, 0.3);
                    /* Sombra rosada intensa */
                    border-color: var(--ballet-pink);
                    /* Borde se vuelve rosa sólido */
                    background: white;
                }

                /* Animación del contenedor del icono */
                .timeline-icon-box {
                    width: 60px;
                    height: 60px;
                    min-width: 60px;
                    background: white;
                    border: 3px solid var(--ballet-pink);
                    border-radius: 50%;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    z-index: 2;
                    margin-right: 25px;
                    /* Transición suave para el cambio de color */
                    transition: all 0.4s ease;
                    box-shadow: 0 5px 15px rgba(255, 105, 180, 0.2);
                }

                /* Al hacer hover, el círculo se llena de rosa */
                .event:hover .timeline-icon-box {
                    background: var(--ballet-pink);
                    box-shadow: 0 0 20px var(--ballet-pink);
                    /* Efecto de resplandor */
                    transform: scale(1.1);
                    /* Crece ligeramente */
                }

                /* Animación del SVG dentro del icono */
                .timeline-icon-box svg {
                    fill: var(--ballet-pink);
                    /* Color inicial */
                    transition: all 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
                    /* Animación con rebote al final */
                }

                /* Al hacer hover, el SVG gira (pirueta) y se vuelve blanco */
                .event:hover .timeline-icon-box svg {
                    fill: white;
                    transform: rotate(360deg) scale(1.2);
                }


                /* --- Estilos del contenido --- */
                .timeline-content {
                    flex: 1;
                }

                .badge {
                    display: inline-block;
                    background: var(--ballet-pink);
                    color: white;
                    padding: 5px 15px;
                    border-radius: 20px;
                    font-weight: bold;
                    font-size: 0.9rem;
                    margin-bottom: 10px;
                    box-shadow: 0 3px 10px rgba(255, 105, 180, 0.4);
                }

                .details-box {
                    background: var(--ballet-light);
                    padding: 20px;
                    border-radius: 15px;
                    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
                    border: 2px solid transparent;
                    /* Borde invisible inicialmente */
                    transition: all 0.4s ease;
                }

                .details-box strong {
                    color: var(--ballet-pink);
                    font-size: 1.2rem;
                    font-family: var(--font-title);
                    /* Asumiendo que tienes esta variable */
                }



                /* --- ESTILOS TARJETAS INTERACTIVAS --- */
    .info-row {
        display: flex; gap: 25px; flex-wrap: wrap; justify-content: center;
        perspective: 1000px; /* Para efecto 3D sutil */
    }

    .info-card {
        flex: 1; 
        min-width: 280px; 
        max-width: 450px;
        background: white;
        padding: 30px 20px;
        border-radius: 25px;
        text-align: center;
        box-shadow: 0 10px 20px rgba(0,0,0,0.05);
        border: 2px solid white;
        transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); /* Efecto rebote */
        position: relative;
        overflow: hidden;
    }

    /* Efecto al pasar el mouse */
    .info-card:hover {
        transform: translateY(-10px); /* Sube */
        box-shadow: 0 20px 40px rgba(255, 105, 180, 0.2);
        border-color: #FFB6C1;
    }

    /* Iconos SVG animados */
    .icon-large svg {
        transition: transform 0.5s ease;
    }
    .info-card:hover .icon-large svg {
        transform: rotate(15deg) scale(1.1);
    }

    /* --- BOTONES INTERACTIVOS --- */
    .btn-interactive {
        display: inline-block;
        margin-top: 15px;
        padding: 10px 25px;
        background: linear-gradient(45deg, var(--ballet-pink), #ff8da1);
        color: white;
        text-decoration: none;
        border-radius: 50px;
        font-weight: bold;
        font-size: 0.9rem;
        box-shadow: 0 5px 15px rgba(255, 105, 180, 0.3);
        transition: transform 0.2s, box-shadow 0.2s;
        border: none;
        cursor: pointer;
    }

    .btn-interactive:hover {
        transform: scale(1.05);
        box-shadow: 0 8px 20px rgba(255, 105, 180, 0.5);
    }

    .btn-outline {
        background: transparent;
        border: 2px solid var(--ballet-pink);
        color: var(--ballet-pink);
    }
    .btn-outline:hover {
        background: var(--ballet-pink);
        color: white;
    }

    /* --- CUENTA REGRESIVA --- */
    .countdown-timer {
        display: flex;
        justify-content: center;
        gap: 10px;
        margin: 15px 0;
    }
    .cd-item {
        background: #FFF0F5;
        padding: 5px 10px;
        border-radius: 10px;
        min-width: 50px;
    }
    .cd-num {
        display: block;
        font-family: var(--font-title);
        font-size: 1.5rem;
        color: var(--ballet-pink);
        line-height: 1;
    }
    .cd-label {
        font-size: 0.6rem;
        text-transform: uppercase;
        color: #888;
        font-weight: bold;
    }