/* =========================================
   1. FUENTES Y TIPOGRAFÍA
   ========================================= */
.mea-culpa-regular {
    font-family: "Mea Culpa", cursive;
    font-weight: 400;
    font-style: normal;
}

.poiret-one-regular {
    font-family: "Poiret One", sans-serif;
    font-weight: 400;
    font-style: normal;
}

.quicksand-regular {
    font-family: "Quicksand", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
}

.quicksand-light {
    font-family: "Quicksand", sans-serif;
    font-optical-sizing: auto;
    font-weight: 300;
    font-style: normal;
}

.eb-garamond-regular {
    font-family: "EB Garamond", serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
}

/* Tamaños de fuentes globales */
h1, .h1 { font-size: 6.5em; }
h2, .h2 { font-size: 1.5em; }
.portrait .upper-title { font-size: 1.4em; }
.wdate { font-size: 1.7em; }
.ls-1 { letter-spacing: 1px; }

/* =========================================
   2. VARIABLES (ROOT)
   ========================================= */
:root {
    --web-color-2: #cbbfb1;
    --web-color-2-rgb: 203, 191, 177;
    --web-color-3: #b79169;
    --web-color-3-rgb: 183, 145, 105;
    --web-color-4: #67482e;
    --web-color-4-rgb: 103, 72, 46;
    --web-color-dark: #101113;
    --web-color-dark-rgb: 16, 17, 19;
}

/* =========================================
   3. BASE Y RESET
   ========================================= */
html {
    scroll-behavior: smooth;
}

body {
    transition: opacity 0.5s ease-in; /* Efecto suave de aparición */
    opacity: 1;
    font-family: "Quicksand", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    color: var(--web-color-dark);
}

/* Estado de carga inicial */
body.loading {
    opacity: 0;
    pointer-events: none;
}

section {
    padding-top: 3rem;
    padding-bottom: 3rem;
}

/* =========================================
   4. UTILIDADES Y HELPERS
   ========================================= */
/* Fondos */
.bg-green-cream { background-color: #BDD3B9; }
.bg-yellow-cream { background-color: #FFD700; }
.bg-one   { background-color: #e8e5e1; }
.bg-two   { background-color: #cbbfb1; }
.bg-three { background-color: #b79169; }
.bg-four  { background-color: #67482e; }

/* Textos */
.text-four { color: var(--web-color-4); }

/* Lógica de Idiomas (Ocultar botones según lang) */
html[lang="es"] .btn-es { display: none; }
html[lang="en"] .btn-en { display: none; }

/* =========================================
   5. COMPONENTES UI
   ========================================= */
/* --- Botones --- */
.btn-primary {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--web-color-3);
    --bs-btn-border-color: var(--web-color-3);
    --bs-btn-hover-color: var(--web-color-4);
    --bs-btn-hover-bg: transparent;
    --bs-btn-hover-border-color: var(--web-color-4);
    --bs-btn-focus-shadow-rgb: 73, 85, 242;
    --bs-btn-active-color: var(--web-color-4);
    --bs-btn-active-bg: transparent;
    --bs-btn-active-border-color: var(--web-color-4);
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
}
.btn-outline-dark {
    --bs-btn-color: var(--web-color-4);
    --bs-btn-border-color: var(--web-color-4);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--web-color-3);
    --bs-btn-hover-border-color: var(--web-color-3);
    --bs-btn-focus-shadow-rgb: 33, 37, 41;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--web-color-3);
    --bs-btn-active-border-color: var(--web-color-3);
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #212529;
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: #212529;
    --bs-gradient: none;
}

/* --- Iconos Flotantes (Audio / Idioma) --- */
.icons-container {
    position: fixed;
    right: 0;
    margin-top: 1rem;
    margin-right: 1rem;
    z-index: 2;
}

.icon {
    width: 3rem;
    height: 3rem;
    border-radius: 100%;
    background-color: rgba(255, 255, 255, .6);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.icon svg {
    transition: all 0.3s ease;
}

/* --- Icono Scroll Down (Flecha animada) --- */
.scroll-down-icon {
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    color: #fff;
    z-index: 10;
    opacity: 0.8;
    transition: opacity 0.3s;
    animation: bounce 2s infinite;
}

.scroll-down-icon:hover {
    opacity: 1;
    color: #fff;
}

.scroll-down-icon svg {
    filter: drop-shadow(0px 2px 3px rgba(var(--web-color-dark-rgb),0.5));
}

/* --- Countdown (Cuenta Regresiva) --- */
#countdown .display-4,
#countdown .number {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum";
}

#countdown .number {
    text-shadow: 1px 1px 5px #333;
}

/* --- Confeti --- */
.confetti-particle {
    position: absolute;
    width: 10px;
    height: 10px;
    top: -10px;
    opacity: 0;
}

/* =========================================
   6. SECCIONES ESPECÍFICAS
   ========================================= */
/* --- Header / Portada (Parallax) --- */
.parallax-section {
    position: relative;
    overflow: hidden;
    z-index: 1;
}

.parallax-img {
    position: absolute;
    top: -20%;
    left: 0;
    width: 100%;
    height: 140%;
    object-fit: cover;
    object-position: center;
    z-index: -1;
    pointer-events: none;
    transition: transform 0.1s cubic-bezier(0,0,0,1);
}

.portrait {
    height: 100vh;
}

/* --- Información --- */
.info img {
    width: 18em;
}

/* =========================================
   7. ANIMACIONES
   ========================================= */

/* A. Animación de Portada (Hero Fade Up) */
@keyframes heroFadeInUp {
    from { opacity: 0; transform: translateY(30px); }
    to { opacity: 1; transform: translateY(0); }
}

.hero-animate {
    opacity: 0;
    animation: heroFadeInUp 1.2s ease-out forwards;
}

.hero-delay-1 { animation-delay: 0.2s; }
.hero-delay-2 { animation-delay: 0.5s; }
.hero-delay-3 { animation-delay: 0.8s; }


/* B. Animaciones Scroll Reveal */
.reveal {
    opacity: 0;
    transform: translateY(50px);
    transition: all 0.8s ease-out;
    will-change: opacity, transform;
}

.reveal.active-animation {
    opacity: 1;
    transform: translateY(0);
}

/* Zoom In Effect */
.reveal.zoom-in {
    transform: scale(0.9);
    transition: transform 0.8s ease-out, opacity 0.8s ease-out;
}

.reveal.zoom-in.active-animation {
    opacity: 1;
    transform: scale(1);
}

/* Fade In Effect (Solo opacidad) */
.reveal.fade-in {
    transform: translateY(0);
}

.reveal.fade-in.active-animation {
    opacity: 1;
}


/* C. Animación de Rebote (Scroll Down) */
@keyframes bounce {
    0%, 20%, 50%, 80%, 100% { transform: translate(-50%, 0); }
    40% { transform: translate(-50%, -10px); }
    60% { transform: translate(-50%, -5px); }
}


/* D. Animación de Audio (Pulso y Latido) */
@keyframes pulse-audio {
    0%   { box-shadow: 0 0 0 0 rgba(183, 145, 105, 0.7); }
    70%  { box-shadow: 0 0 0 10px rgba(183, 145, 105, 0); }
    100% { box-shadow: 0 0 0 0 rgba(183, 145, 105, 0); }
}

@keyframes icon-blink-beat {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%      { opacity: 0.6; transform: scale(0.9); }
}

.pulse-animation {
    animation: pulse-audio 2s infinite;
    background-color: #fff;
    color: var(--web-color-3);
    border: 1px solid var(--web-color-3);
}

.pulse-animation #icon-playing {
    animation: icon-blink-beat 1.5s infinite ease-in-out;
    color: var(--web-color-4);
}


/* E. Animación Confeti (Caída) */
@keyframes confetti-fall {
    0% {
        opacity: 1;
        top: -10px;
        transform: translateX(0) rotate(0deg);
    }
    20% {
        opacity: 1;
        top: -20px;
    }
    100% {
        opacity: 0;
        top: 100vh;
        transform: translateX(var(--translateX-end)) rotate(var(--rotate-end));
    }
}

/* =========================================
   8. RESPONSIVE (MEDIA QUERIES)
   ========================================= */
@media screen and (max-width: 992px) {
    h1, .h1 {
        font-size: 3em;
    }
    .info .btn {
        font-size: .9em;
    }
}

/* =========================================
   9. ESTILOS DE IMPRESIÓN (PRINT / PDF)
   ========================================= */
@media print {
    /* FORZAR VISIBILIDAD EN MÓVILES */
    html, body {
        height: auto !important;
        overflow: visible !important;
        position: static !important;
    }
    
    /* Asegurar que el contenedor principal se expanda */
    #wedding-info, .container {
        width: 100% !important;
        height: auto !important;
        overflow: visible !important;
        display: block !important;
    }
    /* Limpieza General */
    body {
        background-color: white !important;
        color: black !important;
        font-family: "Garamond", serif !important;
        font-size: 14pt;
        border: 2px solid #000;
        margin: 10mm; 
        padding: .5mm;
    }

    /* Ocultar elementos innecesarios */
    .parallax-img,
    .scroll-down-icon,
    .icons-container,
    .gallery,
    .btn,
    .no-print,
    #confetti-container,
    footer,
    iframe {
        display: none !important;
    }

    /* Ajustar Portada */
    header.portrait {
        height: auto !important;
        padding: 20px 0 !important;
        background: none !important;
        font-size: 2;
    }
    
    /* Tipografía en impresión */
    .upper-title { font-size: 14pt !important; margin-bottom: 15px !important; }
    .main-title { font-size: 32pt !important; }
    .wdate { font-size: 20pt !important; }
    
    .upper-title, .main-title, .wdate {
        color: black !important;
        text-shadow: none !important;
    }

    p { margin-bottom: 0px !important; }
    
    /* Asegurar color negro */
    p, h1, h2, h3, span, strong {
        color: #000 !important;
    }

    /* Layout en columnas para Info */
    .info .col-12 {
        width: 100% !important;
        margin-bottom: 15px !important;
    }
    
    .info .chapel-title,
    .info .party-title {
        float: left !important;
        font-size: 20pt !important;
    }
    
    .info .dresscode-title {
        float: left !important;
        font-size: 18pt !important;
    }
    
    /* Mapa Estático */
    .print-only-map {
        display: block !important;
        page-break-inside: avoid;
        clear: both;
        margin-top: 15px !important;
    }
    
    .print-only { display: block !important; }
    .print-separator { width: 100% !important; }
}