/* ==========================================
   CD-SYSTEM BASE - CUSTOM STYLES
   ========================================== */

/* Typography - Apply theme fonts globally - MAXIMUM SPECIFICITY */
html body,
html .body,
body,
.body {
    font-family: var(--font-family-primary, 'Montserrat', sans-serif) !important;
}

html body h1, html body h2, html body h3, html body h4, html body h5, html body h6,
html .body h1, html .body h2, html .body h3, html .body h4, html .body h5, html .body h6,
body h1, body h2, body h3, body h4, body h5, body h6,
.body h1, .body h2, .body h3, .body h4, .body h5, .body h6,
h1, h2, h3, h4, h5, h6,
.heading-font,
.font-weight-bold,
.font-weight-black,
.font-weight-semibold,
.font-weight-extra-bold,
.btn {
    font-family: var(--font-family-secondary, var(--font-family-primary, 'Montserrat'), sans-serif) !important;
}

.body-font, p, .text, .content, .lead {
    font-family: var(--font-family-tertiary, var(--font-family-primary, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif));
}

/* Back to Top Button - Porto Plugin Override */
html .scroll-to-top {
	position: fixed;
	bottom: 100px;
	right: 30px;
	width: 50px;
	height: 50px;
	background: var(--primary);
	color: #fff;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	z-index: 9999;
	box-shadow: 0 4px 15px rgba(0,136,204,0.3);
	transition: all 0.3s ease;
	opacity: 0;
	visibility: hidden;
	transform: translateY(20px);
	min-width: 50px;
	padding: 0;
	text-decoration: none;
}

/* Forzar visibilidad en mobile incluso si tiene hidden-mobile */
@media (max-width: 991px) {
	html .scroll-to-top.hidden-mobile {
		display: flex !important;
	}
}

html .scroll-to-top:hover {
	background: var(--primary-dark);
	transform: translateY(-2px);
	box-shadow: 0 6px 20px rgba(0,136,204,0.4);
	color: #fff;
	opacity: 1;
}

html .scroll-to-top.visible {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

html .scroll-to-top i {
	font-size: 1.2rem;
	line-height: 1;
}

/* Header Semi-transparent - Removed override that was interfering with demo transparency */

/* Loading Overlay Improvements */
.loading-overlay {
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
}

.custom-loader {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100vh;
}

.logo-loader {
    animation: scaleBounce 0.8s infinite ease-in-out;
    margin-bottom: 2rem;
}

.loading-text {
    color: #fff;
    font-size: 1.2em;
    font-weight: 500;
    margin-top: 1rem;
}

@keyframes scaleBounce {
    0%, 100% {
        transform: scale(1);
        opacity: 0.8;
    }
    50% {
        transform: scale(1.1);
        opacity: 1;
    }
}

/* Mobile Navigation Improvements */
@media (max-width: 991px) {
    .mobile-nav-active {
        overflow: hidden;
    }

    .mobile-nav-active #header .header-nav-main nav {
        transform: translateX(0);
    }


}

/* Newsletter Form Improvements */
.newsletter-form .input-group {
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    border-radius: 8px;
    overflow: hidden;
}

.newsletter-form .form-control {
    border: none;
    padding: 1rem 1.5rem;
    font-size: 1.1em;
}

.newsletter-form .btn {
    border: none;
    padding: 1rem 2rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Alert Improvements */
.alert {
    border: none;
    border-radius: 8px;
    padding: 1rem 1.5rem;
    margin-bottom: 1rem;
}

.alert-success {
    background: linear-gradient(135deg, #28A745 0%, #20C997 100%);
    color: #fff;
}

.alert-danger {
    background: linear-gradient(135deg, #DC3545 0%, #FD7E14 100%);
    color: #fff;
}

/* Card Hover Effects */
.card {
    transition: all 0.3s ease;
}

.card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 40px rgba(0,0,0,0.15);
}

/* Button Improvements */
.btn {
    position: relative;
    overflow: hidden;
}

.btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
    transition: left 0.5s;
}

.btn:hover::before {
    left: 100%;
}

/* Progress Bar Improvements */
.progress {
    background: rgba(255,255,255,0.2);
    border-radius: 10px;
    overflow: hidden;
    height: 10px;
}

.progress-bar {
    background: linear-gradient(90deg, var(--primary) 0%, var(--primary-dark) 100%);
    border-radius: 10px;
    position: relative;
}

.progress-bar::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
    animation: shimmer 2s infinite;
}

@keyframes shimmer {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

/* Social Icons Improvements */
.social-icons a {
    position: relative;
    overflow: hidden;
}

.social-icons a::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--primary);
    transform: scale(0);
    border-radius: 50%;
    transition: transform 0.3s ease;
}

.social-icons a:hover::before {
    transform: scale(1);
}

.social-icons a i {
    position: relative;
    z-index: 1;
    transition: color 0.3s ease;
}

.social-icons a:hover i {
    color: #fff;
}

/* Typography Improvements */
.text-gradient {
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Section Improvements */
.section-with-bg {
    position: relative;
    overflow: hidden;
}

.section-with-bg::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="dots" width="20" height="20" patternUnits="userSpaceOnUse"><circle cx="10" cy="10" r="1" fill="rgba(255,255,255,0.1)"/></pattern></defs><rect width="100" height="100" fill="url(%23dots)"/></svg>');
    opacity: 0.3;
}

/* Animation Classes */
.fade-in-up {
    animation: fadeInUp 0.8s ease-out;
}

.fade-in-down {
    animation: fadeInDown 0.8s ease-out;
}

.fade-in-left {
    animation: fadeInLeft 0.8s ease-out;
}

.fade-in-right {
    animation: fadeInRight 0.8s ease-out;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeInDown {
    from {
        opacity: 0;
        transform: translateY(-30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeInLeft {
    from {
        opacity: 0;
        transform: translateX(-30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes fadeInRight {
    from {
        opacity: 0;
        transform: translateX(30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Responsive Improvements */
@media (max-width: 767px) {
	html .scroll-to-top {
		bottom: 90px;
		right: 20px;
		width: 45px;
		height: 45px;
	}

	html .scroll-to-top i {
		font-size: 1.1rem;
	}
}

@media (max-width: 575px) {
	html .scroll-to-top {
		bottom: 80px;
		right: 15px;
		width: 42px;
		height: 42px;
	}

	html .scroll-to-top i {
		font-size: 1rem;
	}
}

@media (max-width: 575px) {
	.newsletter-form .btn {
		padding: 0.8rem 1.5rem;
		font-size: 1em;
	}
}

/* Print Styles */
@media print {
    .back-to-top,
    .style-switcher-open-loader,
    .loading-overlay {
        display: none !important;
    }
}

/* ═══════════════════════════════════════════════════════════════════════
   PAGE HEADER COMPACT
   El template Porto define padding 130px 0 para .page-header-modern.page-header-background.
   Para landings tipo /contact, /blog, /products-catalogue ese alto es excesivo.
   La clase .page-header-compact reduce el padding y unifica tipografía.
   Aplica en cualquier demo que la incluya en el markup.
   ═══════════════════════════════════════════════════════════════════════ */
section.page-header.page-header-compact {
    padding: 56px 0 48px 0 !important;
}
section.page-header.page-header-compact .page-header-title {
    font-size: 32px;
    line-height: 1.15;
}
section.page-header.page-header-compact .page-header-subtitle {
    font-size: 16px;
    line-height: 1.5;
    max-width: 720px;
}
section.page-header.page-header-compact .breadcrumb {
    font-size: 12px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    opacity: 0.7;
}
@media (max-width: 575px) {
    section.page-header.page-header-compact {
        padding: 40px 0 32px 0 !important;
    }
    section.page-header.page-header-compact .page-header-title {
        font-size: 26px;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   ENSAMBLE DE MÓDULOS EN EL DEMO — global, todas las páginas front (2026-07-27)
   Los módulos genéricos (services/blog/gallery/faqs/projects/products/…) traen
   markup con utilities de Bootstrap hardcodeadas (rounded-0, rounded-pill) y
   colores fuera de marca (btn-outline-success, btn-success) que "pelean" con el
   lenguaje del demo. Estas reglas hacen que TODO módulo adopte el demo:
     · radio = --border-radius del skin del demo (vence a los utilities)
     · outline/success = --primary del demo (la skin solo tiñe el sólido)
   Scope [role="main"] → no toca el CTA del header ni el footer.
   Excepciones (demos con CTA propio redondeado, ej. medical/shop con
   .custom-button) las resuelve su demo-{name}.css con mayor especificidad.
   ═══════════════════════════════════════════════════════════════════════════ */
[role="main"] .btn:not(.rounded-circle):not(.btn-close):not(.header-btn-collapse-nav):not(.hamburguer-btn) {
    border-radius: var(--border-radius, 0.375rem) !important;
}
[role="main"] .btn-outline-primary {
    color: var(--primary) !important;
    border-color: var(--primary) !important;
}
[role="main"] .btn-outline-primary:hover,
[role="main"] .btn-outline-primary:focus,
[role="main"] .btn-outline-primary:active {
    background-color: var(--primary) !important;
    border-color: var(--primary) !important;
    color: var(--light, #fff) !important;
}
[role="main"] .btn-outline-success {
    color: var(--primary) !important;
    border-color: var(--primary) !important;
}
[role="main"] .btn-outline-success:hover,
[role="main"] .btn-outline-success:focus,
[role="main"] .btn-outline-success:active {
    background-color: var(--primary) !important;
    border-color: var(--primary) !important;
    color: var(--light, #fff) !important;
}
[role="main"] .btn-success {
    background-color: var(--primary) !important;
    border-color: var(--primary) !important;
}
[role="main"] .badge { border-radius: var(--border-radius, 0.375rem) !important; }
[role="main"] .pagination .page-link {
    border-radius: var(--border-radius, 0.375rem) !important;
    border: 0;
    margin: 0 3px;
}