:root {
    --brand-red: #E53935;
    --brand-blue: #03A9F4;
}

html { 
    scroll-behavior: smooth; 
}

body { 
    font-family: 'Poppins', sans-serif; 
    -webkit-tap-highlight-color: transparent; 
}

h1, h2, h3 { 
    font-family: 'Lora', serif; 
}

.gradient-bg { 
    background: linear-gradient(135deg, var(--brand-blue), var(--brand-red)); 
}

.gradient-text { 
    background: linear-gradient(135deg, var(--brand-red), var(--brand-blue)); 
    -webkit-background-clip: text; 
    -webkit-text-fill-color: transparent; 
}

/* --- Animaciones y Transiciones --- */
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes fadeOut { from { opacity: 1; } to { opacity: 0; } }
@keyframes slideUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } }
@keyframes popIn { from { opacity: 0; transform: scale(0.95); } to { opacity: 1; transform: scale(1); } }
@keyframes popOut { from { opacity: 1; transform: scale(1); } to { opacity: 0; transform: scale(0.95); } }
@keyframes skeleton-loading {
    0% { background-position: -200px 0; }
    100% { background-position: calc(200px + 100%) 0; }
}

.fade-in { animation: fadeIn 0.5s ease-out forwards; }
.slide-up { animation: slideUp 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
.pop-in { animation: popIn 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards; }

.view { 
    display: none; 
}
.view.active { 
    display: block; 
    animation: fadeIn 0.4s ease-out; 
}

.nav-btn.active svg { 
    color: var(--brand-red); 
    transform: scale(1.2); 
}
.nav-btn.active span { 
    color: var(--brand-red); 
    font-weight: 600; 
}

.input-animated { 
    transition: all 0.3s ease; 
}
.input-animated:focus { 
    transform: translateY(-2px); 
    box-shadow: 0 4px 15px -5px rgba(3, 169, 244, 0.4); 
}

.btn-animated { 
    transition: all 0.3s ease; 
}
.btn-animated:hover { 
    transform: translateY(-3px) scale(1.03); 
    box-shadow: 0 7px 20px -5px rgba(0,0,0,0.2); 
}

/* Estilos para Modales Genéricos */
.modal-overlay {
    animation: fadeIn 0.3s ease forwards;
}
.modal-content {
    animation: popIn 0.3s ease forwards;
}
.modal-overlay.hiding {
    animation: fadeOut 0.3s ease forwards;
}
.modal-overlay.hiding .modal-content {
    animation: popOut 0.3s ease forwards;
}

/* Esqueleto de Carga (Skeleton Loader) */
.skeleton-loader {
    background-color: #e5e7eb;
    background-image: linear-gradient(90deg, #e5e7eb, #f9fafb, #e5e7eb);
    background-size: 200px 100%;
    background-repeat: no-repeat;
    animation: skeleton-loading 1.5s infinite;
}