/* ========================================
   FUENTES PERSONALIZADAS
   ======================================== */
@import url('https://fonts.googleapis.com/css2?family=Lato:wght@300;400;700&family=Playfair+Display:ital,wght@0,400;0,600;1,400&family=Ubuntu:wght@400;700&display=swap');

/* ========================================
   UTILIDADES DE FUENTES
   ======================================== */
.font-serif-custom { 
    font-family: 'Playfair Display', serif; 
}

.font-sans-custom { 
    font-family: 'Lato', sans-serif; 
}

.font-ubuntu { 
    font-family: 'Ubuntu', sans-serif; 
}

/* ========================================
   SCROLLBAR PERSONALIZADO
   ======================================== */
.no-scrollbar::-webkit-scrollbar { 
    display: none; 
}

.no-scrollbar { 
    -ms-overflow-style: none; 
    scrollbar-width: none; 
}

/* ========================================
   PANEL DE CRISTAL (GLASSMORPHISM)
   ======================================== */
.glass-panel {
    background: rgba(255, 255, 255, 0.90);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.7);
    box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.05);
}

/* ========================================
   ESTILO POLAROID
   ======================================== */
.polaroid {
    background: #FFFBF5; /* Blanco cálido tipo papel */
    padding: 10px 10px 35px 10px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.1);
    transition: transform 0.3s ease;
    border-radius: 2px;
    position: relative;
}

/* ========================================
   EFECTO DE NIEVE
   ======================================== */
.snowflake {
    position: fixed;
    top: -10px;
    color: #FFF;
    font-size: 1em;
    font-family: Arial, sans-serif;
    text-shadow: 0 0 5px #000;
    user-select: none;
    z-index: 50;
    pointer-events: none;
    animation-name: snowfall;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}

@keyframes snowfall {
    0% { 
        transform: translateY(0); 
        opacity: 0; 
    }
    20% { 
        opacity: 0.8; 
    }
    100% { 
        transform: translateY(100vh); 
        opacity: 0; 
    }
}

/* Variaciones de velocidad y tamaño de copos de nieve */
.snowflake:nth-child(2n) { 
    animation-duration: 7s; 
    font-size: 1.2em; 
    opacity: 0.6; 
}

.snowflake:nth-child(2n+1) { 
    animation-duration: 10s; 
    font-size: 0.8em; 
    opacity: 0.8; 
}

.snowflake:nth-child(3n) { 
    animation-duration: 12s; 
    font-size: 1em; 
    opacity: 0.5; 
    animation-delay: 2s; 
}

.snowflake:nth-child(5n) { 
    animation-delay: 5s; 
}

/* ========================================
   ANIMACIÓN DE FADE IN
   ======================================== */
@keyframes fade-in {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.animate-fade-in {
    animation: fade-in 0.6s ease-out;
}

/* ========================================
   PERSPECTIVA PARA EFECTOS 3D
   ======================================== */
.perspective-1000 {
    perspective: 1000px;
}

/* ========================================
   TRANSICIONES DE SLIDES
   ======================================== */
.slide-container {
    transition: all 0.7s ease-out;
}

.slide-active {
    opacity: 1;
    transform: translateX(0) rotate(0deg);
    z-index: 20;
}

.slide-prev {
    opacity: 0;
    transform: translateX(-3rem) rotate(-12deg);
    z-index: 0;
}

.slide-next {
    opacity: 0;
    transform: translateX(3rem) rotate(12deg);
    z-index: 0;
}

/* ========================================
   LOADER SPINNER
   ======================================== */
@keyframes spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

.animate-spin {
    animation: spin 1s linear infinite;
}

/* ========================================
   ANIMACIÓN DE PULSE
   ======================================== */
@keyframes pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.5;
    }
}

/* ========================================
   RESPONSIVIDAD
   ======================================== */
@media (max-width: 640px) {
    .polaroid {
        padding: 8px 8px 30px 8px;
    }
}

/* ========================================
   ESTADOS DE BOTONES
   ======================================== */
button {
    -webkit-tap-highlight-color: transparent;
}

button:active {
    transform: scale(0.95);
}

/* ========================================
   PREVENCIÓN DE SELECCIÓN EN MEDIOS
   ======================================== */
img, video {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-user-drag: none;
}

/* ========================================
   OCULTACIÓN DE ELEMENTOS
   ======================================== */
.hidden {
    display: none !important;
}

/* ========================================
   SCREEN READER ONLY
   ======================================== */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}