@font-face {
    font-family: 'Montserrat';
    src: url('/assets/web/fonts/Montserrat-VariableFont_wght.ttf') format('truetype');
    font-weight: 100 900;
    font-style: normal;
}

@font-face {
    font-family: 'Montserrat';
    src: url('/assets/web/fonts/Montserrat-Italic-VariableFont_wght.ttf') format('truetype');
    font-weight: 100 900;
    font-style: italic;
}

@font-face {
    font-family: 'Roboto';
    src: url('/assets/web/fonts/Roboto-VariableFont_wdth,wght.ttf') format('truetype');
    font-weight: 100 900;
    font-style: normal;
}

@font-face {
    font-family: 'Roboto';
    src: url('/assets/web/fonts/Roboto-Italic-VariableFont_wdth,wght.ttf') format('truetype');
    font-weight: 100 900;
    font-style: italic;
}

/* ==========================================================================
   DARK MODE TOKENS
   ========================================================================== */

body.theme--dark {
    --dark-bg-base: #232734;
    --dark-bg-surface: #1d212c;
    --dark-bg-navbar: #1d222f;
    --dark-bg-elevated: #2c3142;
    --dark-bg-input: #363f54;
    --dark-bg-input-focus: #505c77;
    --dark-border: #363f54;
    --dark-text: #ffffff;
    --dark-text-secondary: #b1b7cd;
    --dark-text-muted: #8b93ad;
    --dark-divider: #7a7d93;
    --dark-brand: #6d00de;
    --dark-brand-light: #a78bfa;
}

/* ==========================================================================
   DARK MODE — OPTIGROW COMPONENTS
   ========================================================================== */

.theme--dark .demo-gallery-hint {
    color: var(--dark-text-muted);
}

.theme--dark .demo-gallery-preview:hover img {
    box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.35) !important;
}

.theme--dark .btn--theme,
.theme--dark .hover--theme:hover {
    color: #000 !important;
    border-color: #f2cd30 !important;
    background-color: #f2cd30 !important;
}

.theme--dark .btn.btn--theme.btn-sm {
    background-color: transparent;
    color: var(--dark-brand-light);
    border: 1px solid var(--dark-brand);
    opacity: 0.85;
}

.theme--dark .btn.btn--theme.btn-sm.active,
.theme--dark .btn.btn--theme.btn-sm:hover {
    background-color: var(--dark-brand);
    color: var(--dark-text);
    opacity: 1;
}

.theme--dark .color--theme,
.theme--dark .color--theme h1,
.theme--dark .color--theme h2,
.theme--dark .color--theme h3,
.theme--dark .color--theme h4,
.theme--dark .color--theme h5,
.theme--dark .color--theme h6,
.theme--dark .color--theme p,
.theme--dark .color--theme a,
.theme--dark .color--theme li,
.theme--dark .color--theme i,
.theme--dark .color--theme span,
.theme--dark .color--white .color--theme {
    color: var(--dark-brand-light) !important;
}

/* Demo gallery — clickable screenshots (magnific popup) */
.demo-gallery-preview {
    cursor: zoom-in;
    display: inline-block;
    max-width: 100%;
}

.demo-gallery-preview img {
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.demo-gallery-preview:hover img {
    box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.15) !important;
}

.demo-gallery-hint {
    font-size: 0.8rem;
    color: #6c757d;
}

/* Hero layout — landings con .hero-3-txt */
@media (min-width: 992px) {
    #hero-3,
    #hero-aicontent,
    #hero-facturacion {
        padding-top: 120px;
    }

    #hero-3 .hero-3-txt,
    #hero-aicontent .hero-3-txt,
    #hero-facturacion .hero-3-txt {
        margin-top: -50px;
    }
}

@media (min-width: 768px) and (max-width: 991.98px) {
    #hero-3,
    #hero-aicontent,
    #hero-facturacion {
        padding-top: 120px;
    }
}

/* Blog — sin bloque título hero; evitar padding de .inner-page-hero */
#blog-page.blog-page-section {
    padding-top: 30px;
}

/* Inner pages sin .inner-page-title no necesitan padding hero */
@media (min-width: 992px) and (max-width: 1199.95px) {
    .inner-page-hero:not(:has(.inner-page-title)) {
        padding-top: 30px;
    }
}