/* ==========================================================================
   TEMAS VISUALES INDEPENDIENTES PARA CADA TIPO DE EVENTO (7 PERSONALIDADES)
   ========================================================================== */

/* --------------------------------------------------------------------------
   IMPORTACIÓN DE TIPOGRAFÍAS DE GOOGLE FONTS (CURADAS POR OCASIÓN)
   -------------------------------------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Alex+Brush&family=Bodoni+Moda:ital,opsz,wght@0,6..96,400..900;1,6..96,400..900&family=Caveat:wght@400..700&family=Cinzel+Decorative:wght@700&family=Cinzel:wght@400;600;700&family=Cormorant+Garamond:ital,wght@0,400;0,600;1,400&family=DM+Sans:wght@400;500;700&family=Fredoka:wght@400;600;700&family=Great+Vibes&family=Inter:wght@400;500;600;700&family=Montserrat:wght@400;500;600;700&family=Nunito+Sans:ital,wght@0,400;0,600;0,700;1,400&family=Pacifico&family=Pinyon+Script&family=Playfair+Display:ital,wght@0,400;0,700;1,400;1,700&family=Plus+Jakarta+Sans:wght@400;600;700;800&family=Poppins:wght@300;400;500;600;700&family=Quicksand:wght@500;600;700&family=Righteous&family=Syne:wght@700;800&display=swap');

/* ==========================================================================
   1. TEMA BODA (ROMANCE, LUJO CLÁSICO & CHAMPAGNE)
   ========================================================================== */
body.theme-boda {
    --primary-color: #b8935f;
    --primary-hover: #9c7a4a;
    --accent-color: #dfba73;
    --bg-color: #fdfbf7;
    --card-bg: rgba(255, 255, 255, 0.96);
    --border-soft: rgba(184, 147, 95, 0.28);
    --text-color: #231e1a;
    --text-muted: #786b62;
    --shadow-soft: 0 10px 30px rgba(45, 38, 32, 0.07);
    --font-heading: 'Playfair Display', serif;
    --font-script: 'Great Vibes', cursive;
    --font-body: 'Montserrat', sans-serif;
    font-family: var(--font-body);
    background-color: var(--bg-color);
    background-image: 
        radial-gradient(circle at 50% 0%, rgba(184, 147, 95, 0.22) 0%, transparent 60%),
        radial-gradient(circle at 100% 40%, rgba(223, 186, 115, 0.08) 0%, transparent 45%),
        url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M30 0c1.5 8.5 8.5 15.5 17 17-8.5 1.5-15.5 8.5-17 17-1.5-8.5-8.5-15.5-17-17 8.5-1.5 15.5-8.5 17-17z' fill='%23b8935f' fill-opacity='0.03' fill-rule='evenodd'/%3E%3C/svg%3E");
    color: var(--text-color);
}

body.theme-boda .event-title {
    font-family: 'Great Vibes', cursive;
    font-size: 5.2rem;
    font-weight: 400;
    color: #946e37;
    text-shadow: 0 2px 8px rgba(184, 147, 95, 0.2);
    letter-spacing: 1px;
}

body.theme-boda .date-location {
    font-family: 'Cormorant Garamond', serif;
    letter-spacing: 6px;
    font-weight: 600;
}

body.theme-boda .hero-photo-frame {
    border: 3px double var(--primary-color);
    border-radius: 28px;
    box-shadow: 0 15px 35px rgba(184, 147, 95, 0.2);
}

body.theme-boda .hero-photo-frame::before {
    border-color: rgba(184, 147, 95, 0.4);
    border-radius: 34px;
}

body.theme-boda .section-title,
body.theme-boda .section-subtitle-title,
body.theme-boda h2, 
body.theme-boda h3 {
    font-family: 'Playfair Display', serif;
}

body.theme-boda .time-box span {
    font-family: 'Playfair Display', serif;
    color: var(--primary-color);
}

body.theme-boda .btn-primary {
    background: linear-gradient(135deg, #c5a059 0%, #9e793e 100%);
    box-shadow: 0 6px 20px rgba(184, 147, 95, 0.35);
    border-radius: 50px;
}

/* ==========================================================================
   HERO CINEMATOGRÁFICO DE BODA (EXPERIENCIA HERO UNIFICADA)
   ========================================================================== */
.hero-boda-cinematic {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 7.5rem 1.5rem 4rem;
    overflow: hidden;
    background: transparent;
    color: var(--text-color);
}

/* Contenido frontal */
.hero-boda-content {
    position: relative;
    z-index: 5;
    max-width: 820px;
    width: 100%;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* ==========================================================================
   ELEMENTOS FLORALES Y BOTÁNICOS DECORATIVOS (HERO BODA)
   ========================================================================== */
/* Esquinas Florales y Botánicas Superiores */
.hero-floral-corner {
    position: absolute;
    width: clamp(140px, 20vw, 220px);
    height: auto;
    pointer-events: none;
    z-index: 2;
    opacity: 0.88;
    filter: drop-shadow(0 6px 16px rgba(184, 147, 95, 0.25));
    transition: transform 0.6s ease;
}

.hero-floral-corner-tl {
    top: 0;
    left: 0;
    animation: gentleBreezeTL 7s infinite ease-in-out;
}

.hero-floral-corner-tr {
    top: 0;
    right: 0;
    transform: scaleX(-1);
    animation: gentleBreezeTR 7s infinite ease-in-out;
}

@keyframes gentleBreezeTL {
    0%, 100% { transform: rotate(0deg) scale(1); }
    50% { transform: rotate(1.8deg) scale(1.03); }
}

@keyframes gentleBreezeTR {
    0%, 100% { transform: scaleX(-1) rotate(0deg) scale(1); }
    50% { transform: scaleX(-1) rotate(1.8deg) scale(1.03); }
}

/* Adornos de Ramos Florales para el Arco de la Foto */
.hero-floral-arch-accent {
    position: absolute;
    width: clamp(95px, 14vw, 135px);
    height: auto;
    pointer-events: none;
    z-index: 6;
    filter: drop-shadow(0 8px 16px rgba(184, 147, 95, 0.35));
}

.hero-floral-arch-left {
    bottom: -18px;
    left: -32px;
    animation: floralSwayLeft 6s infinite ease-in-out;
}

.hero-floral-arch-right {
    top: 30px;
    right: -28px;
    transform: scaleX(-1) rotate(12deg);
    animation: floralSwayRight 6.5s infinite ease-in-out;
}

@keyframes floralSwayLeft {
    0%, 100% { transform: rotate(0deg); }
    50% { transform: rotate(-3deg) translateY(-3px); }
}

@keyframes floralSwayRight {
    0%, 100% { transform: scaleX(-1) rotate(12deg); }
    50% { transform: scaleX(-1) rotate(15deg) translateY(-3px); }
}

/* Pétalos de flores flotantes en el fondo */
.hero-petals-container {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 1;
}

.floating-petal {
    position: absolute;
    border-radius: 60% 0 60% 60%;
    background: radial-gradient(circle at 35% 35%, rgba(255, 245, 240, 0.9), rgba(223, 186, 115, 0.6));
    box-shadow: 0 4px 10px rgba(184, 147, 95, 0.22);
    opacity: 0;
    will-change: transform, opacity;
}

.petal-1 {
    width: 16px;
    height: 22px;
    top: -25px;
    left: 10%;
    animation: petalFalling 11s infinite linear;
    animation-delay: 0s;
}

.petal-2 {
    width: 20px;
    height: 26px;
    top: -25px;
    left: 26%;
    animation: petalFalling 13s infinite linear;
    animation-delay: 2.8s;
}

.petal-3 {
    width: 14px;
    height: 19px;
    top: -25px;
    left: 45%;
    animation: petalFalling 10s infinite linear;
    animation-delay: 5s;
}

.petal-4 {
    width: 18px;
    height: 24px;
    top: -25px;
    left: 65%;
    animation: petalFalling 12s infinite linear;
    animation-delay: 1.5s;
}

.petal-5 {
    width: 15px;
    height: 21px;
    top: -25px;
    left: 82%;
    animation: petalFalling 14s infinite linear;
    animation-delay: 4.2s;
}

.petal-6 {
    width: 21px;
    height: 27px;
    top: -25px;
    left: 92%;
    animation: petalFalling 11.5s infinite linear;
    animation-delay: 6.5s;
}

.petal-7 {
    width: 13px;
    height: 18px;
    top: -25px;
    left: 5%;
    animation: petalFalling 15s infinite linear;
    animation-delay: 7s;
}

.petal-8 {
    width: 17px;
    height: 23px;
    top: -25px;
    left: 36%;
    animation: petalFalling 12.5s infinite linear;
    animation-delay: 8.5s;
}

@keyframes petalFalling {
    0% {
        opacity: 0;
        transform: translate3d(0, 0, 0) rotate(0deg) rotateY(0deg);
    }
    12% {
        opacity: 0.88;
    }
    50% {
        opacity: 0.75;
        transform: translate3d(35px, 50vh, 0) rotate(160deg) rotateY(180deg);
    }
    88% {
        opacity: 0.8;
    }
    100% {
        opacity: 0;
        transform: translate3d(-25px, 105vh, 0) rotate(360deg) rotateY(360deg);
    }
}

/* Emblema / Monograma de los novios */
.hero-boda-monogram-emblem {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    padding: 0.5rem 1.5rem;
    border-radius: 50px;
    background: rgba(255, 255, 255, 0.94);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1.5px solid rgba(184, 147, 95, 0.38);
    box-shadow: 0 8px 25px rgba(184, 147, 95, 0.16), 0 2px 8px rgba(45, 38, 32, 0.04);
    margin-bottom: 1.2rem;
}
.hero-boda-monogram-emblem .monogram-letter {
    font-family: 'Playfair Display', serif;
    font-size: 1.4rem;
    font-weight: 700;
    color: #946e37;
    letter-spacing: 2px;
}
.hero-boda-monogram-emblem .monogram-rings {
    color: var(--primary-color);
    font-size: 0.95rem;
    animation: pulseRing 2.5s infinite ease-in-out;
}

/* Overline */
.hero-boda-overline {
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.2rem;
    text-transform: uppercase;
    letter-spacing: 6px;
    color: var(--primary-color);
    font-weight: 600;
    margin-bottom: 0.3rem;
}

/* Título con nombres de los novios */
.hero-boda-title {
    font-family: 'Great Vibes', cursive;
    font-size: clamp(4rem, 8.5vw, 6.4rem);
    line-height: 1.08;
    color: #946e37;
    text-shadow: 0 3px 12px rgba(184, 147, 95, 0.22);
    margin: 0.2rem 0 1.5rem;
}

/* Showcase fotográfico del Hero con marco catedralicio de lujo */
.hero-boda-photo-showcase {
    position: relative;
    margin: 0.5rem auto 1.8rem;
    display: flex;
    justify-content: center;
}
.hero-boda-arch-frame {
    width: min(370px, 84vw);
    aspect-ratio: 4 / 5;
    position: relative;
    border-radius: 185px 185px 24px 24px;
    padding: 10px;
    background: linear-gradient(145deg, #e4c78d 0%, #b8935f 50%, #e4c78d 100%);
    box-shadow: 0 18px 45px rgba(184, 147, 95, 0.25), 0 8px 20px rgba(45, 38, 32, 0.08);
}
.hero-boda-arch-frame::before {
    content: '';
    position: absolute;
    inset: -9px;
    border: 1.5px dashed rgba(184, 147, 95, 0.55);
    border-radius: 194px 194px 32px 32px;
    pointer-events: none;
}
.hero-boda-arch-frame img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 20%;
    border-radius: 177px 177px 16px 16px;
    display: block;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
}

/* Frase o cita romántica */
.hero-boda-quote {
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.35rem;
    line-height: 1.65;
    color: var(--text-muted);
    font-style: italic;
    max-width: 680px;
    margin: 0 auto 1.6rem;
}

/* Cápsula de Fecha y Ubicación */
.hero-boda-meta-pill {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.8rem;
    background: rgba(255, 255, 255, 0.94);
    border: 1px solid rgba(184, 147, 95, 0.35);
    box-shadow: 0 8px 25px rgba(45, 38, 32, 0.06);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    padding: 0.75rem 1.7rem;
    border-radius: 50px;
    margin-bottom: 2rem;
}
.hero-boda-meta-pill .meta-item {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--text-color);
    display: flex;
    align-items: center;
    gap: 0.45rem;
}
.hero-boda-meta-pill .meta-item i {
    color: var(--primary-color);
}
.hero-boda-meta-pill .meta-dot {
    color: var(--primary-color);
    font-size: 0.75rem;
}

/* Botones de acción */
.hero-boda-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    justify-content: center;
    margin-bottom: 2.5rem;
}
.btn-boda-action {
    background: linear-gradient(135deg, #c5a059 0%, #9e793e 100%) !important;
    color: #ffffff !important;
    font-weight: 600 !important;
    padding: 0.9rem 2.2rem !important;
    border-radius: 50px !important;
    box-shadow: 0 8px 22px rgba(184, 147, 95, 0.35) !important;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    transition: all 0.3s ease !important;
}
.btn-boda-action:hover {
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 12px 28px rgba(184, 147, 95, 0.5) !important;
    color: #ffffff !important;
}
.btn-secondary-boda {
    background: #ffffff;
    color: var(--primary-color);
    border: 2px solid var(--primary-color);
    padding: 0.9rem 2rem;
    border-radius: 50px;
    font-weight: 600;
    font-size: 1rem;
    box-shadow: 0 4px 15px rgba(184, 147, 95, 0.12);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    transition: all 0.3s ease;
}
.btn-secondary-boda:hover {
    background: var(--primary-color);
    color: #ffffff;
    transform: translateY(-3px);
    box-shadow: 0 8px 22px rgba(184, 147, 95, 0.35);
}

/* Indicador de desplazamiento inferior */
.hero-boda-scroll-down {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
    color: var(--text-muted);
    text-decoration: none;
    font-size: 0.85rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    font-weight: 600;
    transition: all 0.3s ease;
    animation: floatBounce 2.5s infinite ease-in-out;
}
.hero-boda-scroll-down i {
    font-size: 1.1rem;
    color: var(--primary-color);
}
.hero-boda-scroll-down:hover {
    color: var(--primary-color);
    transform: translateY(3px);
}

@keyframes pulseRing {
    0%, 100% { transform: scale(1); opacity: 0.9; }
    50% { transform: scale(1.15); opacity: 1; filter: drop-shadow(0 0 6px rgba(184, 147, 95, 0.5)); }
}

@keyframes floatBounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(6px); }
}

@media (max-width: 768px) {
    .hero-boda-cinematic {
        padding: 6rem 1rem 3.5rem;
    }
    .hero-boda-arch-frame {
        width: min(290px, 78vw);
        border-radius: 145px 145px 20px 20px;
    }
    .hero-boda-arch-frame img {
        border-radius: 138px 138px 14px 14px;
    }
    .hero-boda-arch-frame::before {
        border-radius: 153px 153px 25px 25px;
    }
    .hero-boda-meta-pill {
        flex-direction: column;
        gap: 0.4rem;
        border-radius: 20px;
        padding: 0.8rem 1.2rem;
    }
    .hero-boda-meta-pill .meta-dot {
        display: none;
    }
    .hero-boda-actions {
        flex-direction: column;
        width: 100%;
        max-width: 320px;
    }
    .btn-boda-action, .btn-secondary-boda {
        width: 100%;
        justify-content: center;
    }
}

/* ==========================================================================
   2. TEMA XV AÑOS (PALETA GUINDA REAL, BORGOÑA & DORADO IMPERIAL)
   ========================================================================== */
body.theme-xv_anos {
    --primary-color: #801336;
    --primary-hover: #5c0b24;
    --accent-color: #c99e52;
    --accent-soft: #f2e2be;
    --bg-color: #fbf7f8;
    --card-bg: rgba(255, 255, 255, 0.95);
    --border-soft: rgba(128, 19, 54, 0.2);
    --text-color: #2c0e18;
    --text-muted: #794e5d;
    --shadow-soft: 0 14px 36px rgba(128, 19, 54, 0.11);
    --font-heading: 'Playfair Display', serif;
    --font-script: 'Great Vibes', cursive;
    --font-body: 'Poppins', sans-serif;
    font-family: var(--font-body);
    background-color: var(--bg-color);
    background-image: 
        radial-gradient(circle at 50% 0%, rgba(201, 158, 82, 0.22) 0%, transparent 65%),
        radial-gradient(circle at 15% 25%, rgba(128, 19, 54, 0.08) 0%, transparent 40%),
        radial-gradient(circle at 85% 70%, rgba(128, 19, 54, 0.08) 0%, transparent 45%),
        url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23801336' fill-opacity='0.032' fill-rule='evenodd'%3E%3Cpath d='M20 0l2.5 12.5L35 15l-12.5 2.5L20 30l-2.5-12.5L5 15l12.5-2.5z'/%3E%3C/g%3E%3C/svg%3E");
    color: var(--text-color);
}

body.theme-xv_anos .event-title,
body.theme-xv_anos .hero-boda-title {
    font-family: 'Great Vibes', cursive;
    font-size: clamp(3.8rem, 8vw, 6.2rem);
    font-weight: 400;
    color: #801336;
    text-shadow: 0 3px 14px rgba(128, 19, 54, 0.22);
    line-height: 1.1;
}

body.theme-xv_anos .date-location,
body.theme-xv_anos .hero-boda-overline {
    font-family: 'Cormorant Garamond', serif;
    letter-spacing: 5px;
    font-weight: 700;
    color: #c99e52;
    text-transform: uppercase;
}

body.theme-xv_anos .hero-photo-frame,
body.theme-xv_anos .hero-boda-arch-frame {
    border: 3px solid #c99e52;
    border-radius: 185px 185px 24px 24px;
    box-shadow: 0 18px 45px rgba(128, 19, 54, 0.24), 0 6px 18px rgba(201, 158, 82, 0.15);
    background: linear-gradient(145deg, #dfba73 0%, #801336 50%, #c99e52 100%);
    padding: 10px;
}

body.theme-xv_anos .hero-boda-arch-frame::before {
    border-color: rgba(201, 158, 82, 0.55);
}

body.theme-xv_anos .hero-boda-monogram-emblem {
    border: 1.5px solid rgba(201, 158, 82, 0.4);
    box-shadow: 0 8px 25px rgba(128, 19, 54, 0.14);
}
body.theme-xv_anos .hero-boda-monogram-emblem .monogram-letter {
    color: #801336;
}
body.theme-xv_anos .hero-boda-monogram-emblem .monogram-rings {
    color: #c99e52;
}

body.theme-xv_anos .section-title,
body.theme-xv_anos h2,
body.theme-xv_anos h3 {
    font-family: 'Playfair Display', serif;
    font-weight: 700;
    color: #801336;
}

body.theme-xv_anos .divider i {
    color: #c99e52;
    text-shadow: 0 0 10px rgba(201, 158, 82, 0.5);
}

body.theme-xv_anos .time-box {
    border-radius: 22px;
    border-color: rgba(128, 19, 54, 0.22);
    background: linear-gradient(180deg, #ffffff 0%, #fcf7f8 100%);
    box-shadow: 0 10px 25px rgba(128, 19, 54, 0.08);
}

body.theme-xv_anos .time-box span {
    font-family: 'Playfair Display', serif;
    font-weight: 700;
    color: #801336;
}

body.theme-xv_anos .btn-primary,
body.theme-xv_anos .btn-boda-action {
    background: linear-gradient(135deg, #9b1c44 0%, #6f0e2d 100%);
    box-shadow: 0 6px 22px rgba(128, 19, 54, 0.35);
    border-radius: 50px;
    color: #ffffff;
}

body.theme-xv_anos .btn-primary:hover,
body.theme-xv_anos .btn-boda-action:hover {
    background: linear-gradient(135deg, #aa224d 0%, #560a22 100%);
    box-shadow: 0 10px 28px rgba(128, 19, 54, 0.45);
    color: #ffffff;
}

body.theme-xv_anos .btn-secondary-boda {
    border: 1.5px solid #c99e52;
    color: #801336;
    background: rgba(255, 255, 255, 0.95);
}

body.theme-xv_anos .btn-secondary-boda:hover {
    background: #801336;
    border-color: #801336;
    color: #ffffff;
}

body.theme-xv_anos .badge-elite,
body.theme-xv_anos .gallery-badge {
    background: rgba(128, 19, 54, 0.1) !important;
    color: #801336 !important;
    border: 1px solid rgba(128, 19, 54, 0.25) !important;
}

body.theme-xv_anos .polaroid-pin-tape {
    background: rgba(201, 158, 82, 0.7);
    border-top: 1px solid rgba(255, 255, 255, 0.6);
    border-bottom: 1px solid rgba(128, 19, 54, 0.2);
}

body.theme-xv_anos .carousel-dot.active {
    background: #801336;
}

body.theme-xv_anos .album-banner-icon {
    background: linear-gradient(135deg, #9b1c44 0%, #6f0e2d 100%);
    color: #ffffff;
}

body.theme-xv_anos .album-upload-btn {
    background: linear-gradient(135deg, #9b1c44 0%, #6f0e2d 100%);
    box-shadow: 0 6px 20px rgba(128, 19, 54, 0.35);
}

/* ==========================================================================
   3. TEMA BAUTIZO (PUREZA CELESTIAL, LUZ & SERENIDAD)
   ========================================================================== */
body.theme-bautizo {
    --primary-color: #4a88be;
    --primary-hover: #366f9f;
    --accent-color: #d6ab5b;
    --bg-color: #f4f8fb;
    --card-bg: rgba(255, 255, 255, 0.96);
    --border-soft: rgba(74, 136, 190, 0.2);
    --text-color: #1a2c3d;
    --text-muted: #5e7488;
    --shadow-soft: 0 10px 28px rgba(74, 136, 190, 0.08);
    --font-heading: 'Cinzel', serif;
    --font-script: 'Pinyon Script', cursive;
    --font-body: 'Nunito Sans', sans-serif;
    font-family: var(--font-body);
    background-color: var(--bg-color);
    background-image: 
        radial-gradient(circle at 50% 0%, rgba(74, 136, 190, 0.22) 0%, transparent 60%),
        radial-gradient(circle at 90% 20%, rgba(214, 171, 91, 0.12) 0%, transparent 40%),
        url("data:image/svg+xml,%3Csvg width='52' height='52' viewBox='0 0 52 52' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%234a88be' fill-opacity='0.035' fill-rule='evenodd'%3E%3Ccircle cx='26' cy='26' r='3'/%3E%3Ccircle cx='0' cy='26' r='2'/%3E%3Ccircle cx='52' cy='26' r='2'/%3E%3C/g%3E%3C/svg%3E");
    color: var(--text-color);
}

body.theme-bautizo .event-title {
    font-family: 'Cinzel', serif;
    font-size: 3.6rem;
    font-weight: 700;
    color: #275782;
    letter-spacing: 2px;
}

body.theme-bautizo .date-location {
    font-family: 'Cinzel', serif;
    letter-spacing: 4px;
    font-weight: 600;
    color: #c49642;
}

body.theme-bautizo .intro-text {
    font-family: 'Pinyon Script', cursive;
    font-size: 2rem;
    color: #3b5b77;
    font-style: normal;
    line-height: 1.4;
}

body.theme-bautizo .hero-photo-frame {
    border: 3px solid rgba(74, 136, 190, 0.4);
    border-radius: 30px;
    background: #ffffff;
    box-shadow: 0 15px 35px rgba(74, 136, 190, 0.15);
}

body.theme-bautizo .hero-photo-frame::before {
    border-color: rgba(214, 171, 91, 0.35);
    border-radius: 36px;
}

body.theme-bautizo .section-title,
body.theme-bautizo h2,
body.theme-bautizo h3 {
    font-family: 'Cinzel', serif;
}

body.theme-bautizo .time-box {
    border-radius: 20px;
    background: #ffffff;
}

body.theme-bautizo .time-box span {
    font-family: 'Cinzel', serif;
    color: var(--primary-color);
}

body.theme-bautizo .btn-primary {
    background: linear-gradient(135deg, #5b96c8 0%, #3a75a7 100%);
    box-shadow: 0 6px 20px rgba(74, 136, 190, 0.3);
    border-radius: 50px;
}

/* ==========================================================================
   4. TEMA GRADUACIÓN (PRESTIGIO ACADÉMICO, MIDNIGHT NAVY & GOLD)
   ========================================================================== */
body.theme-graduacion {
    --primary-color: #eab308;
    --primary-hover: #ca8a04;
    --accent-color: #facc15;
    --bg-color: #0c1222;
    --card-bg: rgba(20, 29, 49, 0.88);
    --border-soft: rgba(234, 179, 8, 0.28);
    --text-color: #f8fafc;
    --text-muted: #94a3b8;
    --shadow-soft: 0 15px 35px rgba(0, 0, 0, 0.35);
    --font-heading: 'Bodoni Moda', serif;
    --font-sub: 'Cinzel', serif;
    --font-body: 'Plus Jakarta Sans', sans-serif;
    font-family: var(--font-body);
    background-color: var(--bg-color);
    background-image: 
        radial-gradient(circle at 50% 0%, rgba(234, 179, 8, 0.2) 0%, transparent 60%),
        radial-gradient(circle at 80% 40%, rgba(30, 58, 138, 0.25) 0%, transparent 50%),
        radial-gradient(circle at 20% 80%, rgba(234, 179, 8, 0.1) 0%, transparent 45%),
        url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 20 L20 0 L40 20 L20 40 Z' fill='none' stroke='%23eab308' stroke-width='0.4' stroke-opacity='0.08'/%3E%3C/svg%3E");
    color: var(--text-color);
}

body.theme-graduacion .hero-invitation {
    background: radial-gradient(circle at 50% 10%, rgba(234, 179, 8, 0.22) 0%, #0c1222 70%);
}

body.theme-graduacion .event-title {
    font-family: 'Bodoni Moda', serif;
    font-size: 4rem;
    font-weight: 800;
    color: #ffffff;
    letter-spacing: -0.5px;
    text-shadow: 0 4px 16px rgba(0, 0, 0, 0.6);
}

body.theme-graduacion .date-location {
    font-family: 'Cinzel', serif;
    letter-spacing: 5px;
    font-weight: 700;
    color: #eab308;
}

body.theme-graduacion .hero-photo-frame {
    border: 2px solid #eab308;
    background: #141d31;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.5), 0 0 20px rgba(234, 179, 8, 0.2);
}

body.theme-graduacion .hero-photo-frame::before {
    border-color: rgba(234, 179, 8, 0.4);
}

body.theme-graduacion .section-title,
body.theme-graduacion h2,
body.theme-graduacion h3 {
    font-family: 'Bodoni Moda', serif;
    color: #ffffff;
}

body.theme-graduacion .time-box {
    background: rgba(26, 38, 64, 0.9);
    border-color: rgba(234, 179, 8, 0.3);
    backdrop-filter: blur(10px);
}

body.theme-graduacion .time-box span {
    font-family: 'Bodoni Moda', serif;
    color: #eab308;
}

body.theme-graduacion .time-box small {
    color: #cbd5e1;
}

body.theme-graduacion .corte-card,
body.theme-graduacion .story-card,
body.theme-graduacion .place-card,
body.theme-graduacion .itinerary-card,
body.theme-graduacion .dress-card,
body.theme-graduacion .gift-item-card,
body.theme-graduacion .calendar-callout-card,
body.theme-graduacion .organizer-card,
body.theme-graduacion .rsvp-form-container {
    background: rgba(20, 29, 49, 0.92);
    border-color: rgba(234, 179, 8, 0.25);
    color: #f8fafc;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.4);
}

body.theme-graduacion .gift-item-card h3 {
    color: #ffffff;
}

body.theme-graduacion .gift-item-card p {
    color: #94a3b8;
}

body.theme-graduacion .clabe-box {
    background: rgba(234, 179, 8, 0.08);
    border-color: #eab308;
    color: #facc15;
}

body.theme-graduacion .gift-badge-envelope {
    background: rgba(234, 179, 8, 0.12);
    color: #eab308;
    border-color: rgba(234, 179, 8, 0.3);
}

body.theme-graduacion input[type="text"],
body.theme-graduacion input[type="tel"],
body.theme-graduacion select,
body.theme-graduacion textarea {
    background: rgba(12, 18, 34, 0.85);
    border-color: rgba(234, 179, 8, 0.3);
    color: #ffffff;
}

body.theme-graduacion .btn-primary {
    background: linear-gradient(135deg, #facc15 0%, #ca8a04 100%);
    color: #0f172a;
    font-weight: 700;
    box-shadow: 0 6px 20px rgba(234, 179, 8, 0.35);
    border-radius: 50px;
}

body.theme-graduacion .btn-outline-hero {
    border-color: #eab308;
    color: #eab308;
}

body.theme-graduacion .btn-outline-hero:hover {
    background: #eab308;
    color: #0f172a;
}

/* ==========================================================================
   5. TEMA REVELACIÓN DE GÉNERO (DUAL PASTEL COTTON CANDY & SKY DANCE)
   ========================================================================== */
body.theme-revelacion_genero {
    --primary-color: #ec4899;
    --primary-hover: #db2777;
    --accent-color: #0ea5e9;
    --bg-color: #fef8fa;
    --card-bg: rgba(255, 255, 255, 0.96);
    --border-soft: rgba(236, 72, 153, 0.22);
    --text-color: #2d1e2f;
    --text-muted: #7d687f;
    --shadow-soft: 0 12px 32px rgba(236, 72, 153, 0.08);
    --font-heading: 'Fredoka', cursive, sans-serif;
    --font-script: 'Pacifico', cursive;
    --font-body: 'Quicksand', sans-serif;
    font-family: var(--font-body);
    background-color: var(--bg-color);
    background-image: 
        radial-gradient(circle at 20% 0%, rgba(236, 72, 153, 0.2) 0%, transparent 50%),
        radial-gradient(circle at 80% 0%, rgba(14, 165, 233, 0.2) 0%, transparent 50%),
        radial-gradient(circle at 50% 60%, rgba(250, 204, 21, 0.12) 0%, transparent 45%),
        url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='15' cy='15' r='4' fill='%23ec4899' fill-opacity='0.04'/%3E%3Ccircle cx='45' cy='45' r='4' fill='%230ea5e9' fill-opacity='0.04'/%3E%3C/svg%3E");
    color: var(--text-color);
}

body.theme-revelacion_genero .event-title {
    font-family: 'Pacifico', cursive;
    font-size: 3.8rem;
    color: #d92672;
    text-shadow: 0 3px 10px rgba(236, 72, 153, 0.2);
}

body.theme-revelacion_genero .date-location {
    font-family: 'Fredoka', cursive;
    letter-spacing: 2px;
    font-weight: 600;
    color: #0284c7;
}

body.theme-revelacion_genero .hero-photo-frame {
    border: 4px solid;
    border-image: linear-gradient(135deg, #ec4899, #0ea5e9) 1;
    border-radius: 28px;
    box-shadow: 0 15px 35px rgba(236, 72, 153, 0.15);
}

body.theme-revelacion_genero .section-title,
body.theme-revelacion_genero h2,
body.theme-revelacion_genero h3 {
    font-family: 'Fredoka', cursive, sans-serif;
    font-weight: 600;
}

body.theme-revelacion_genero .time-box {
    border-radius: 24px;
    background: linear-gradient(180deg, #ffffff 0%, #fff7fb 100%);
    border-color: rgba(236, 72, 153, 0.25);
}

body.theme-revelacion_genero .time-box span {
    font-family: 'Fredoka', cursive;
    color: #ec4899;
}

body.theme-revelacion_genero .btn-primary {
    background: linear-gradient(135deg, #ec4899 0%, #0ea5e9 100%);
    box-shadow: 0 6px 20px rgba(236, 72, 153, 0.35);
    border-radius: 50px;
    font-family: 'Quicksand', sans-serif;
    font-weight: 700;
}

/* ==========================================================================
   6. TEMA BABY SHOWER (BOTÁNICO SAGE, DULZURA & MIEL)
   ========================================================================== */
body.theme-baby_shower {
    --primary-color: #4d7c67;
    --primary-hover: #3b6250;
    --accent-color: #d97736;
    --bg-color: #f5f8f5;
    --card-bg: rgba(255, 255, 255, 0.96);
    --border-soft: rgba(77, 124, 103, 0.22);
    --text-color: #1f2e26;
    --text-muted: #5e6f66;
    --shadow-soft: 0 10px 28px rgba(77, 124, 103, 0.08);
    --font-heading: 'Playfair Display', serif;
    --font-script: 'Caveat', cursive;
    --font-body: 'Inter', sans-serif;
    font-family: var(--font-body);
    background-color: var(--bg-color);
    background-image: 
        radial-gradient(circle at 50% 0%, rgba(77, 124, 103, 0.2) 0%, transparent 60%),
        radial-gradient(circle at 85% 35%, rgba(217, 119, 54, 0.12) 0%, transparent 45%),
        url("data:image/svg+xml,%3Csvg width='48' height='48' viewBox='0 0 48 48' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M24 8c-4 8-12 12-16 16 8 0 12 4 16 16 4-12 8-16 16-16-4-4-12-8-16-16z' fill='%234d7c67' fill-opacity='0.035'/%3E%3C/svg%3E");
    color: var(--text-color);
}

body.theme-baby_shower .event-title {
    font-family: 'Playfair Display', serif;
    font-size: 3.8rem;
    color: #2f5644;
}

body.theme-baby_shower .intro-text {
    font-family: 'Caveat', cursive;
    font-size: 2.1rem;
    color: #4a6657;
    font-style: normal;
    line-height: 1.35;
}

body.theme-baby_shower .date-location {
    font-family: 'Playfair Display', serif;
    letter-spacing: 3px;
    font-weight: 600;
    color: #d97736;
}

body.theme-baby_shower .hero-photo-frame {
    border: 3px solid rgba(77, 124, 103, 0.35);
    border-radius: 30px;
    background: #ffffff;
    box-shadow: 0 15px 35px rgba(77, 124, 103, 0.14);
}

body.theme-baby_shower .section-title,
body.theme-baby_shower h2,
body.theme-baby_shower h3 {
    font-family: 'Playfair Display', serif;
}

body.theme-baby_shower .time-box {
    border-radius: 20px;
    background: #ffffff;
    border-color: rgba(77, 124, 103, 0.22);
}

body.theme-baby_shower .time-box span {
    font-family: 'Playfair Display', serif;
    color: var(--primary-color);
}

body.theme-baby_shower .btn-primary {
    background: linear-gradient(135deg, #5b8e77 0%, #3e6855 100%);
    box-shadow: 0 6px 20px rgba(77, 124, 103, 0.3);
    border-radius: 50px;
}

/* ==========================================================================
   7. TEMA FIESTA & CUMPLEAÑOS (NIGHTCLUB OBSIDIAN, NEON GLOW & VIBES)
   ========================================================================== */
body.theme-fiesta {
    --primary-color: #ff007f;
    --primary-hover: #d6006b;
    --accent-color: #00f2fe;
    --bg-color: #090714;
    --card-bg: rgba(22, 17, 39, 0.88);
    --border-soft: rgba(255, 0, 127, 0.3);
    --text-color: #ffffff;
    --text-muted: #a19cb8;
    --shadow-soft: 0 15px 35px rgba(0, 0, 0, 0.45);
    --font-heading: 'Righteous', cursive;
    --font-sub: 'Syne', sans-serif;
    --font-body: 'DM Sans', sans-serif;
    font-family: var(--font-body);
    background-color: var(--bg-color);
    background-image: 
        radial-gradient(circle at 20% 0%, rgba(255, 0, 127, 0.28) 0%, transparent 55%),
        radial-gradient(circle at 80% 20%, rgba(0, 242, 254, 0.2) 0%, transparent 50%),
        radial-gradient(circle at 50% 80%, rgba(121, 40, 202, 0.25) 0%, transparent 60%),
        url("data:image/svg+xml,%3Csvg width='32' height='32' viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='16' cy='16' r='1.5' fill='%23ff007f' fill-opacity='0.08'/%3E%3C/svg%3E");
    color: var(--text-color);
}

body.theme-fiesta .hero-invitation {
    background: radial-gradient(circle at 50% 15%, rgba(255, 0, 127, 0.25) 0%, #090714 75%);
}

body.theme-fiesta .event-title {
    font-family: 'Righteous', cursive;
    font-size: 4.2rem;
    color: #ffffff;
    letter-spacing: 1px;
    text-shadow: 0 0 20px rgba(255, 0, 127, 0.6), 0 0 40px rgba(121, 40, 202, 0.4);
}

body.theme-fiesta .date-location {
    font-family: 'Syne', sans-serif;
    letter-spacing: 4px;
    font-weight: 800;
    color: #00f2fe;
    text-shadow: 0 0 10px rgba(0, 242, 254, 0.5);
}

body.theme-fiesta .hero-photo-frame {
    border: 2px solid #ff007f;
    background: #161127;
    box-shadow: 0 0 30px rgba(255, 0, 127, 0.35), 0 0 15px rgba(0, 242, 254, 0.2);
}

body.theme-fiesta .hero-photo-frame::before {
    border-color: rgba(0, 242, 254, 0.4);
}

body.theme-fiesta .section-title,
body.theme-fiesta h2,
body.theme-fiesta h3 {
    font-family: 'Syne', sans-serif;
    font-weight: 800;
    color: #ffffff;
}

body.theme-fiesta .divider i {
    color: #ff007f;
    text-shadow: 0 0 12px rgba(255, 0, 127, 0.8);
}

body.theme-fiesta .time-box {
    background: rgba(28, 22, 50, 0.9);
    border-color: rgba(255, 0, 127, 0.35);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3), 0 0 12px rgba(255, 0, 127, 0.15);
}

body.theme-fiesta .time-box span {
    font-family: 'Righteous', cursive;
    color: #ff007f;
    text-shadow: 0 0 10px rgba(255, 0, 127, 0.5);
}

body.theme-fiesta .time-box small {
    color: #a19cb8;
}

body.theme-fiesta .corte-card,
body.theme-fiesta .story-card,
body.theme-fiesta .place-card,
body.theme-fiesta .itinerary-card,
body.theme-fiesta .dress-card,
body.theme-fiesta .gift-item-card,
body.theme-fiesta .calendar-callout-card,
body.theme-fiesta .organizer-card,
body.theme-fiesta .rsvp-form-container {
    background: rgba(22, 17, 39, 0.92);
    border-color: rgba(255, 0, 127, 0.25);
    color: #ffffff;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4), 0 0 1px rgba(255, 0, 127, 0.5);
}

body.theme-fiesta .gift-item-card h3 {
    color: #ffffff;
}

body.theme-fiesta .gift-item-card p {
    color: #a19cb8;
}

body.theme-fiesta .clabe-box {
    background: rgba(255, 0, 127, 0.1);
    border-color: #ff007f;
    color: #00f2fe;
}

body.theme-fiesta .gift-badge-envelope {
    background: rgba(255, 0, 127, 0.15);
    color: #00f2fe;
    border-color: rgba(0, 242, 254, 0.4);
}

body.theme-fiesta input[type="text"],
body.theme-fiesta input[type="tel"],
body.theme-fiesta select,
body.theme-fiesta textarea {
    background: rgba(14, 10, 26, 0.9);
    border-color: rgba(255, 0, 127, 0.35);
    color: #ffffff;
}

body.theme-fiesta .btn-primary {
    background: linear-gradient(135deg, #ff007f 0%, #7928ca 50%, #00f2fe 100%);
    box-shadow: 0 6px 25px rgba(255, 0, 127, 0.45);
    border-radius: 50px;
    font-weight: 700;
}

body.theme-fiesta .btn-outline-hero {
    border-color: #00f2fe;
    color: #00f2fe;
    text-shadow: 0 0 8px rgba(0, 242, 254, 0.5);
}

body.theme-fiesta .btn-outline-hero:hover {
    background: #00f2fe;
    color: #090714;
}

/* ==========================================================================
   GALERÍA ESTILO IMPRESIÓN INSTANTÁNEA / POLAROID (DESORDENADA & ELEGANTE)
   ========================================================================== */
.gallery-instant-grid {
    display: flex !important;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 2.5rem 2rem;
    margin: 3.5rem auto 1.5rem;
    padding: 1.5rem 0.5rem;
    max-width: 1050px;
}

.polaroid-item {
    background: #ffffff !important;
    padding: 12px 12px 22px 12px !important;
    border-radius: 4px !important;
    box-shadow: 0 12px 28px rgba(45, 38, 32, 0.12), 0 3px 8px rgba(0, 0, 0, 0.05) !important;
    border: 1px solid rgba(215, 195, 165, 0.45) !important;
    position: relative;
    cursor: pointer;
    width: clamp(250px, 30vw, 295px);
    aspect-ratio: auto !important;
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.35s ease, border-color 0.3s ease !important;
    overflow: visible !important;
    text-align: center;
}

/* Efecto de fotos desordenadas / rotaciones aleatorias */
.polaroid-item:nth-child(6n+1) {
    transform: rotate(-3.5deg) translateY(6px);
}
.polaroid-item:nth-child(6n+2) {
    transform: rotate(2.8deg) translateY(-8px);
}
.polaroid-item:nth-child(6n+3) {
    transform: rotate(-1.8deg) translateY(4px);
}
.polaroid-item:nth-child(6n+4) {
    transform: rotate(3.6deg) translateY(-4px);
}
.polaroid-item:nth-child(6n+5) {
    transform: rotate(-2.8deg) translateY(8px);
}
.polaroid-item:nth-child(6n+6) {
    transform: rotate(1.8deg) translateY(-2px);
}

/* Efecto al pasar el cursor: se endereza, levanta suavemente y destaca con sombra dorada */
.polaroid-item:hover {
    transform: rotate(0deg) translateY(-14px) scale(1.06) !important;
    z-index: 25 !important;
    box-shadow: 0 24px 50px rgba(184, 147, 95, 0.35), 0 8px 20px rgba(45, 38, 32, 0.15) !important;
    border-color: rgba(184, 147, 95, 0.7) !important;
}

/* Cinta adhesiva / Washi tape decorativo superior */
.polaroid-pin-tape {
    position: absolute;
    top: -11px;
    left: 50%;
    transform: translateX(-50%) rotate(-1deg);
    width: 68px;
    height: 22px;
    background: rgba(223, 186, 115, 0.45);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    border-radius: 2px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.08);
    z-index: 4;
    pointer-events: none;
    transition: transform 0.3s ease;
}

.polaroid-item:nth-child(even) .polaroid-pin-tape {
    background: rgba(184, 147, 95, 0.38);
    transform: translateX(-50%) rotate(2.5deg);
}

.polaroid-item:hover .polaroid-pin-tape {
    transform: translateX(-50%) rotate(0deg);
}

/* Contenedor cuadrado de la fotografía instantánea */
.polaroid-photo-wrap {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    border-radius: 2px;
    background: #f0eae0;
    box-shadow: inset 0 0 12px rgba(0, 0, 0, 0.08);
}

.polaroid-photo-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.5s ease;
}

.polaroid-item:hover .polaroid-photo-wrap img {
    transform: scale(1.08);
}

/* Overlay al hacer hover */
.polaroid-photo-wrap .overlay-zoom {
    position: absolute;
    inset: 0;
    background: rgba(35, 30, 26, 0.45);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    color: #ffffff;
    opacity: 0;
    transition: opacity 0.3s ease;
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}

.polaroid-photo-wrap .overlay-zoom i {
    font-size: 1.8rem;
    color: #dfba73;
}

.polaroid-photo-wrap .overlay-zoom .zoom-text {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.8rem;
    letter-spacing: 1px;
    text-transform: uppercase;
    font-weight: 600;
}

.polaroid-item:hover .polaroid-photo-wrap .overlay-zoom {
    opacity: 1;
}

/* Pie de foto / Letra manuscrita estilo recuerdo */
.polaroid-caption {
    margin-top: 14px;
    padding: 0 4px;
    font-family: 'Great Vibes', cursive;
    font-size: 1.55rem;
    color: #6b5c52;
    line-height: 1.2;
    transition: color 0.3s ease;
}

.polaroid-item:hover .polaroid-caption {
    color: #946e37;
}

@media (max-width: 768px) {
    .gallery-instant-grid {
        gap: 2rem 1.2rem;
    }
    .polaroid-item {
        width: min(300px, 86vw);
    }
    .polaroid-item:nth-child(even) {
        transform: rotate(2deg) translateY(-2px);
    }
    .polaroid-item:nth-child(odd) {
        transform: rotate(-2deg) translateY(2px);
    }
}

/* ==========================================================================
   CARRUSEL 3D COVERFLOW INTERACTIVO DE FOTOS INSTANTÁNEAS
   ========================================================================== */
.carousel-gallery-section {
    position: relative;
    overflow: hidden;
    padding: 2.5rem 0 3.5rem;
}

.carousel-3d-wrapper {
    position: relative;
    width: 100%;
    max-width: 960px;
    margin: 2.8rem auto 1.2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    perspective: 1200px;
    touch-action: pan-y;
    user-select: none;
    -webkit-user-select: none;
}

.carousel-3d-stage {
    position: relative;
    width: 100%;
    height: 460px;
    transform-style: preserve-3d;
    display: flex;
    align-items: center;
    justify-content: center;
}

.carousel-3d-card {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -210px;
    margin-left: -140px;
    width: 280px;
    cursor: pointer;
    transition: transform 0.55s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.55s ease, filter 0.55s ease, box-shadow 0.55s ease;
    will-change: transform, opacity;
}

/* Tarjeta Activa Central */
.carousel-3d-card.card-active {
    transform: translate3d(0, 0, 90px) rotateY(0deg) scale(1.06);
    z-index: 25;
    opacity: 1;
    filter: drop-shadow(0 20px 35px rgba(184, 147, 95, 0.38));
    pointer-events: auto;
}

.carousel-3d-card.card-active:hover {
    transform: translate3d(0, -10px, 100px) rotateY(0deg) scale(1.09) !important;
}

/* Tarjeta Inmediata Izquierda */
.carousel-3d-card.card-prev-1 {
    transform: translate3d(-195px, 0, -45px) rotateY(30deg) scale(0.88);
    z-index: 18;
    opacity: 0.85;
    filter: brightness(0.92) contrast(0.95);
}

/* Tarjeta Inmediata Derecha */
.carousel-3d-card.card-next-1 {
    transform: translate3d(195px, 0, -45px) rotateY(-30deg) scale(0.88);
    z-index: 18;
    opacity: 0.85;
    filter: brightness(0.92) contrast(0.95);
}

/* Tarjetas Lejanas Izquierda */
.carousel-3d-card.card-prev-2 {
    transform: translate3d(-330px, 0, -160px) rotateY(45deg) scale(0.74);
    z-index: 12;
    opacity: 0.45;
    filter: brightness(0.8);
}

/* Tarjetas Lejanas Derecha */
.carousel-3d-card.card-next-2 {
    transform: translate3d(330px, 0, -160px) rotateY(-45deg) scale(0.74);
    z-index: 12;
    opacity: 0.45;
    filter: brightness(0.8);
}

/* Tarjetas Ocultas */
.carousel-3d-card.card-hidden {
    transform: translate3d(0, 0, -320px) scale(0.5);
    opacity: 0;
    pointer-events: none;
    z-index: 1;
}

/* Botones de navegación lateral */
.carousel-3d-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1.5px solid rgba(184, 147, 95, 0.5);
    color: #946e37;
    font-size: 1.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 30;
    box-shadow: 0 8px 24px rgba(45, 38, 32, 0.14);
    transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1);
}

.carousel-3d-nav:hover {
    background: #946e37;
    color: #ffffff;
    transform: translateY(-50%) scale(1.1);
    box-shadow: 0 12px 30px rgba(184, 147, 95, 0.5);
}

.carousel-3d-prev {
    left: 8px;
}

.carousel-3d-next {
    right: 8px;
}

/* Dots / Indicadores de Puntos */
.carousel-3d-dots {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.7rem;
    margin-top: 1.2rem;
}

.carousel-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 1.5px solid #946e37;
    background: rgba(184, 147, 95, 0.2);
    cursor: pointer;
    padding: 0;
    transition: all 0.35s ease;
}

.carousel-dot.active {
    background: #946e37;
    width: 32px;
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(184, 147, 95, 0.55);
}

@media (max-width: 768px) {
    .carousel-3d-stage {
        height: 400px;
    }
    .carousel-3d-card {
        width: 240px;
        margin-top: -185px;
        margin-left: -120px;
    }
    .carousel-3d-card.card-active {
        transform: translate3d(0, 0, 70px) scale(1.04);
    }
    .carousel-3d-card.card-prev-1 {
        transform: translate3d(-115px, 0, -40px) rotateY(26deg) scale(0.82);
        opacity: 0.65;
    }
    .carousel-3d-card.card-next-1 {
        transform: translate3d(115px, 0, -40px) rotateY(-26deg) scale(0.82);
        opacity: 0.65;
    }
    .carousel-3d-card.card-prev-2,
    .carousel-3d-card.card-next-2 {
        opacity: 0;
        pointer-events: none;
    }
    .carousel-3d-nav {
        width: 44px;
        height: 44px;
        font-size: 1.05rem;
        background: rgba(255, 255, 255, 0.95);
    }
    .carousel-3d-prev { left: 4px; }
    .carousel-3d-next { right: 4px; }
}