/**
 * PROJECT CUSTOM CSS - LaCompany
 * Personalizaciones usando variables CSS centralizadas
 * ====================================================
 */

/* ==========================================
 * OVERRIDE PORTO FONTS CON GOTHAM
 * Usando variables centralizadas
 * ========================================== */

/* Override body font from Porto theme.css */
body {
    font-family: var(--cd-font-primary) !important;
    font-weight: var(--cd-font-weight-normal);
    color: var(--cd-dark);
}

/* Override headings */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--cd-font-headings) !important;
}

/* Override navigation fonts */
.header-nav-main nav > ul > li > a,
.nav-link,
.navbar-nav .nav-link,
.dropdown-item {
    font-family: var(--cd-font-primary) !important;
}

/* Override button fonts */
.btn,
button,
input[type="button"],
input[type="submit"] {
    font-family: var(--cd-font-primary) !important;
    font-weight: var(--cd-font-weight-medium);
}

/* Override form fonts */
input,
textarea,
select,
.form-control {
    font-family: var(--cd-font-primary) !important;
}

/* ==========================================
 * LAYOUT SPECIFIC OVERRIDES
 * ========================================== */

/* Welcome page specific */
.welcome-page .hero-welcome__title {
    font-family: var(--cd-font-headings) !important;
    font-weight: var(--cd-font-weight-bold);
}

.welcome-page .hero-welcome__subtitle {
    font-family: var(--cd-font-primary) !important;
    font-weight: var(--cd-font-weight-normal);
}

/* Landing pages */
.landing-page .feature-box h3 {
    font-family: var(--cd-font-headings) !important;
    font-weight: var(--cd-font-weight-medium);
}

/* Blog sections */
.blog-section .post-title {
    font-family: var(--cd-font-headings) !important;
    font-weight: var(--cd-font-weight-semibold);
}

/* ==========================================
 * COMPONENT SPECIFIC FONTS
 * ========================================== */

/* Cards */
.card-title {
    font-family: var(--cd-font-headings) !important;
    font-weight: var(--cd-font-weight-medium);
}

.card-text {
    font-family: var(--cd-font-primary) !important;
    font-weight: var(--cd-font-weight-normal);
}

/* Features */
.feature-box-icon + h4,
.feature-box h4 {
    font-family: var(--cd-font-headings) !important;
    font-weight: var(--cd-font-weight-medium);
}

/* Testimonials */
.testimonial blockquote {
    font-family: var(--cd-font-primary) !important;
    font-weight: var(--cd-font-weight-normal);
    font-style: normal;
}

.testimonial-author {
    font-family: var(--cd-font-headings) !important;
    font-weight: var(--cd-font-weight-medium);
}

/* ==========================================
 * UTILITY CLASSES
 * ========================================== */

/* Font weight utilities usando variables */
.font-light { font-weight: var(--cd-font-weight-light) !important; }
.font-book { font-weight: var(--cd-font-weight-normal) !important; }
.font-medium { font-weight: var(--cd-font-weight-medium) !important; }
.font-semibold { font-weight: var(--cd-font-weight-semibold) !important; }
.font-bold { font-weight: var(--cd-font-weight-bold) !important; }

/* Family utilities */
.font-primary { font-family: var(--cd-font-primary) !important; }
.font-secondary { font-family: var(--cd-font-secondary) !important; }
.font-headings { font-family: var(--cd-font-headings) !important; }

/* ==========================================
 * MOBILE RESPONSIVE FONTS
 * ========================================== */

@media (max-width: 767px) {
    body {
        font-size: 14px;
    }

    h1 { font-size: 1.75rem; }
    h2 { font-size: 1.5rem; }
    h3 { font-size: 1.25rem; }
    h4 { font-size: 1.125rem; }

    .btn {
        font-size: 0.875rem;
    }
}

/* ==========================================
 * PORTO THEME SPECIFIC OVERRIDES
 * ========================================== */

/* Override Porto's default Poppins */
.text-1, .text-2, .text-3, .text-4, .text-5, .text-6, .text-7, .text-8, .text-9, .text-10,
.text-11, .text-12, .text-13, .text-14, .text-15, .text-16, .text-17, .text-18 {
    font-family: var(--cd-font-primary) !important;
}

/* Override heading classes */
.heading-primary,
.heading-secondary,
.heading-tertiary {
    font-family: var(--cd-font-headings) !important;
}

/* Override Porto navigation */
.header-nav-main nav > ul > li > a {
    font-family: var(--cd-font-primary) !important;
    font-weight: var(--cd-font-weight-medium);
}

/* Override Porto buttons */
.btn-primary,
.btn-secondary,
.btn-outline-primary,
.btn-outline-secondary {
    font-family: var(--cd-font-primary) !important;
    font-weight: var(--cd-font-weight-medium);
}

/* ==========================================
 * HEADER COMPENSATION
 * Solución para header-transparent que se superpone
 *
 * PROBLEMA: El header usa position:absolute con header-transparent,
 * esto hace que no ocupe espacio en el flujo del documento y se
 * superponga al contenido en páginas que no sean Welcome.
 *
 * SOLUCIÓN: Agregar padding-top al .main en páginas no-Welcome
 * para compensar la altura del header (aprox. 80-90px).
 * ========================================== */

/* Compensar altura del header en páginas no-Welcome */
.main.header-compensate {
    padding-top: 90px !important;
}

/* Ajuste responsive para móviles */
@media (max-width: 991px) {
    .main.header-compensate {
        padding-top: 80px !important;
    }
}

/* Ajuste para tablets */
@media (max-width: 767px) {
    .main.header-compensate {
        padding-top: 75px !important;
    }
}

/* ==========================================
 * PERFORMANCE OPTIMIZATIONS
 * ========================================== */

/* Prevent font flashing during load */
.fonts-loading * {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif !important;
}

/* Font rendering optimizations */
* {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

/* ================================================
 * PORTO-COMPATIBLE CUSTOM STYLES
 * Siguiendo metodología oficial de Porto Template
 * Simple, Económico, Directo y Efectivo
 * ================================================ */

/* ================================================
 * PROJECT NAVIGATION OPTIMIZATION
 * Siguiendo exactamente el estilo de Porto demos
 * ================================================ */

/* Navegación de proyectos - compacta como Porto */
#proyectos .nav-pills .nav-link {
    font-size: 0.875rem !important; /* 14px - más pequeño que default */
    padding: 0.5rem 0.75rem !important; /* Padding reducido */
    margin-right: 0.25rem !important; /* Margen reducido entre elementos */
    white-space: nowrap !important; /* Evitar wrap de texto */
    font-weight: var(--cd-font-weight-medium) !important;
    letter-spacing: 0.02em !important; /* Espaciado optimizado */
}

/* Responsive para móviles */
@media (max-width: 1199.98px) {
    #proyectos .nav-pills .nav-link {
        font-size: 0.8rem !important; /* Aún más pequeño en tablets */
        padding: 0.4rem 0.6rem !important;
    }
}

@media (max-width: 991.98px) {
    #proyectos .nav-pills {
        flex-wrap: wrap !important; /* Permitir wrap solo en móviles */
    }

    #proyectos .nav-pills .nav-link {
        font-size: 0.75rem !important; /* Muy pequeño en móviles */
        padding: 0.3rem 0.5rem !important;
        margin-bottom: 0.25rem !important;
    }
}

/* Contenedor de filtros más compacto */
#proyectos .filter-wrapper {
    padding-top: 1rem !important;
    padding-bottom: 1rem !important;
}

/* Search form optimization */
#proyectos .search-form input {
    font-size: 0.875rem !important;
    padding: 0.5rem 0.75rem !important;
}

/* ================================================
 * PERFORMANCE SECTION OPTIMIZATIONS
 * ================================================ */
.section-performance-dark {
    background: linear-gradient(135deg, var(--dark) 0%, var(--dark-200) 100%) !important;
}

.section-performance-dark .section-angled-layer-top {
    background-color: var(--dark-200) !important;
}

/* ================================================
 * TYPOGRAPHY SYSTEM - USANDO VARIABLES PORTO
 * ================================================ */

/* Text hierarchy for dark sections */
.text-hierarchy-1 {
    color: var(--light);
    font-weight: var(--cd-font-weight-bold);
    font-family: var(--cd-font-headings);
}

.text-hierarchy-2 {
    color: rgba(255, 255, 255, 0.9);
    font-weight: var(--cd-font-weight-medium);
    font-family: var(--cd-font-primary);
}

.text-hierarchy-3 {
    color: rgba(255, 255, 255, 0.8);
    font-weight: var(--cd-font-weight-normal);
    font-family: var(--cd-font-primary);
}

/* ================================================
 * GOTHAM FONT APPLICATIONS
 * Overrides específicos para elementos Porto
 * ================================================ */

/* Global Porto font overrides - APLICAR GOTHAM EVERYWHERE */
body,
.body {
    font-family: var(--cd-font-primary) !important;
    font-weight: var(--cd-font-weight-normal);
}

/* Headings - Forzar Gotham en todos los headings */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: var(--cd-font-headings) !important;
    font-weight: var(--cd-font-weight-bold);
}

/* Navigation - Todos los elementos de navegación */
.header-nav-main nav > ul > li > a,
.nav-link,
.navbar-nav .nav-link,
.dropdown-item,
.navbar-nav .dropdown-item {
    font-family: var(--cd-font-primary) !important;
    font-weight: var(--cd-font-weight-medium);
}

/* Buttons - Todos los botones */
.btn,
button,
input[type="button"],
input[type="submit"],
.button {
    font-family: var(--cd-font-primary) !important;
    font-weight: var(--cd-font-weight-medium);
}

/* Forms - Elementos de formulario */
input,
textarea,
select,
.form-control,
.form-select {
    font-family: var(--cd-font-primary) !important;
    font-weight: var(--cd-font-weight-normal);
}

/* Porto specific elements - Elementos específicos de Porto */
.section-concept h1,
.section-concept h2,
.feature-box h3,
.feature-box h4,
.page-header h1,
.page-header h2 {
    font-family: var(--cd-font-headings) !important;
    font-weight: var(--cd-font-weight-bold);
}

.highlighted-word,
.text-accent,
.color-accent {
    font-family: var(--cd-font-headings) !important;
    font-weight: var(--cd-font-weight-bold);
}

/* Text elements */
p,
.text,
.description,
span {
    font-family: var(--cd-font-primary) !important;
}

/* Override any Porto defaults */
* {
    -webkit-font-feature-settings: "kern", "liga", "clig", "calt";
    font-feature-settings: "kern", "liga", "clig", "calt";
}

/* ================================================
 * RESPONSIVE IMPROVEMENTS
 * ================================================ */
@media (max-width: 768px) {
    .section-dark .text-9 {
        font-size: 2.5rem !important;
        line-height: 1.2 !important;
    }

    .text-hierarchy-2 {
        font-size: 1rem !important;
        line-height: 1.6 !important;
    }

    /* Mobile font weights optimization */
    h1, h2, h3 {
        font-weight: var(--cd-font-weight-bold) !important;
    }
}

/* ================================================
 * ACCESSIBILITY IMPROVEMENTS
 * ================================================ */

/* Better focus states */
.btn:focus,
.form-control:focus {
    box-shadow: 0 0 0 3px var(--tertiary-rgba-30);
    outline: none;
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .text-hierarchy-2,
    .text-hierarchy-3 {
        color: var(--light) !important;
    }
}

/* =====================================================
   CUSTOM STYLES - MÍNIMOS NECESARIOS
   ===================================================== */

/* Color personalizado purple para iconos */
.text-purple {
    color: #6f42c1 !important;
}