/* Custom styles for MC Consulting website */

/* Aplicar tipografía Montserrat según manual MCC */
body, html {
    font-family: 'Montserrat', sans-serif !important;
}

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 600 !important;
}

.btn, button {
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 600 !important;
}

.nav-link, .navbar-nav .nav-link {
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 500 !important;
}

/* Modal article content styling */
.article-content {
    line-height: 1.8;
    color: #333;
    font-size: 1.1rem;
}

.article-content h1, 
.article-content h2, 
.article-content h3, 
.article-content h4 {
    color: #624C93;
    margin-top: 2rem;
    margin-bottom: 1.2rem;
    font-weight: 600;
}

.article-content h1 {
    font-size: 1.8rem;
    border-bottom: 2px solid #624C93;
    padding-bottom: 0.5rem;
}

.article-content h2 {
    font-size: 1.5rem;
}

.article-content h4 {
    font-size: 1.2rem;
    color: #666;
    font-weight: 500;
}

.article-content p {
    margin-bottom: 1.2rem;
    text-align: justify;
}

.article-content ul, 
.article-content ol {
    margin-bottom: 1.5rem;
    padding-left: 2rem;
}

.article-content li {
    margin-bottom: 0.8rem;
    line-height: 1.6;
}

.article-content em {
    color: #624C93;
    font-style: italic;
    font-weight: 500;
}

/* Hide unwanted elements that might slip through JS cleaning */
.article-content .date,
.article-content .post-meta,
.article-content .share-box,
.article-content .social,
.article-content .border-bottom,
.article-content .clearfix {
    display: none !important;
}

/* Featured articles styling */
.card[style*="border-left"] {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card[style*="border-left"]:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(98, 76, 147, 0.15) !important;
}

.badge.bg-primary {
    background-color: #624C93 !important;
}

/* WhatsApp chat button */
.whatsapp-chat {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    background: #25D366;
    border-radius: 50%;
    box-shadow: 0 4px 12px rgba(37, 211, 102, 0.3);
    text-decoration: none !important;
    transition: all 0.3s ease;
}

.whatsapp-chat:hover {
    transform: scale(1.1);
    box-shadow: 0 6px 20px rgba(37, 211, 102, 0.5);
}

.whatsapp-chat i {
    font-size: 32px;
    color: #fff;
}

/* Estilos para fechas de artículos */
.article-date {
    font-size: 0.85rem;
    font-weight: 500;
}

.article-date i {
    margin-right: 5px;
}

/* Estilos mejorados para cards de artículos */
.card.shadow-sm {
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}

.card.shadow-sm:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(0,0,0,0.12) !important;
}

/* =================================================================
   MOBILE RESPONSIVE STYLES 
   ================================================================= */

/* Desktop - Hide hamburger button */
@media (min-width: 992px) {
    .btn.header-btn-collapse-nav {
        display: none !important;
    }
}

/* Tablet and Mobile Devices */
@media (max-width: 991px) {
    /* Show hamburger button */
    .btn.header-btn-collapse-nav {
        display: inline-block !important;
        position: relative !important;
        z-index: 1001 !important;
    }
    
    /* Header column layout for mobile */
    .header-column .header-row {
        flex-wrap: wrap !important;
    }
    
    /* Move quote button below hamburger in mobile */
    .btn-modern.btn-primary {
        order: 2 !important;
        margin-top: 1rem !important;
        width: 100% !important;
        text-align: center !important;
    }
    
    .btn.header-btn-collapse-nav {
        order: 1 !important;
        margin-left: auto !important;
    }
    
    /* Reduce hero section title size */
    .text-14 {
        font-size: 2.5rem !important;
        line-height: 1.2 !important;
    }
    
    /* Better spacing for mobile */
    .negative-ls-05 {
        letter-spacing: normal !important;
    }
    
    /* Adjust lead text */
    .lead {
        font-size: 1.1rem !important;
        line-height: 1.5 !important;
    }
    
    /* Hero image responsive */
    .hero .col-lg-6 div[style*="max-width:400px"] {
        max-width: 300px !important;
        margin: 0 auto;
    }
    
    /* Service cards spacing */
    .card-body {
        padding: 1.5rem !important;
    }
    
    .card-body h4 {
        font-size: 1.3rem !important;
        margin-bottom: 1rem !important;
    }
    
    .card-body p {
        font-size: 0.95rem !important;
        line-height: 1.5 !important;
    }
}

/* Mobile Phones */
@media (max-width: 767px) {
    /* Hero section adjustments */
    .text-14 {
        font-size: 2rem !important;
        text-align: center !important;
    }
    
    .hero .lead {
        text-align: center !important;
        font-size: 1rem !important;
        padding: 0 1rem;
    }
    
    /* WhatsApp button mobile position */
    .whatsapp-chat {
        bottom: 15px;
        right: 15px;
        width: 55px;
        height: 55px;
    }
    
    .whatsapp-chat i {
        font-size: 28px !important;
    }
    
    /* Hero image mobile */
    .hero .col-lg-6 div[style*="max-width:400px"] {
        max-width: 280px !important;
        margin: 2rem auto 0 auto !important;
    }
    
    /* Hero image specific mobile styles */
    img[src*="banner-hero.jpg"] {
        height: 250px !important;
        border-radius: 20px !important;
        object-position: center center !important;
    }
    
    /* Button responsive */
    .btn-arrow-effect-1 {
        font-size: 0.9rem !important;
        padding: 0.6rem 1.2rem !important;
    }
    
    /* Quote button mobile optimization */
    .btn-modern.btn-primary {
        font-size: 0.9rem !important;
        padding: 0.8rem 1.5rem !important;
        white-space: nowrap !important;
        margin-top: 1rem !important;
        min-width: 280px !important;
        border-radius: 25px !important;
    }
    
    /* Cards mobile optimization */
    .card-body {
        padding: 1.25rem !important;
        text-align: center !important;
    }
    
    .card-body h4 {
        font-size: 1.2rem !important;
        line-height: 1.3 !important;
    }
    
    .card-body p {
        font-size: 0.9rem !important;
        margin-bottom: 1rem !important;
    }
    
    /* Service icons */
    .card-body img[height="70"] {
        height: 50px !important;
        width: auto !important;
    }
    
    /* Section spacing mobile */
    .section {
        padding: 3rem 0 !important;
    }
    
    /* Container padding */
    .container-xl-custom {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }
    
    /* Header mobile improvements */
    .header-row {
        padding: 0.5rem 0 !important;
        position: relative !important;
    }
    
    .header-logo img {
        max-height: 45px !important;
    }
    
    /* Header column layout adjustments */
    .header-column:last-child {
        width: 100% !important;
        margin-top: 1rem !important;
    }
    
    .header-column:last-child .header-row {
        flex-direction: column !important;
        align-items: flex-end !important;
    }
    
    /* Header nav positioning */
    .header-nav {
        position: relative !important;
    }
    
    /* Header nav main container */
    .header-nav-main {
        position: relative !important;
        width: 100% !important;
    }
    
    /* Ensure collapsed menu is visible */
    .header-nav-main .collapse:not(.show) {
        display: none !important;
    }
    
    .header-nav-main .collapse.show {
        display: block !important;
    }
    
    /* Navigation mobile */
    #mobileNavMenu {
        background: white !important;
        border: 1px solid #ddd !important;
        border-radius: 8px !important;
        margin-top: 1rem !important;
        box-shadow: 0 4px 12px rgba(0,0,0,0.15) !important;
        position: relative !important;
        z-index: 1000 !important;
        width: 100% !important;
    }
    
    #mobileNavMenu ul {
        flex-direction: column !important;
        width: 100% !important;
        text-align: center !important;
        margin: 0 !important;
        padding: 1rem 0 !important;
        list-style: none !important;
    }
    
    #mobileNavMenu ul li {
        width: 100% !important;
        margin: 0 !important;
        border-bottom: 1px solid #f0f0f0 !important;
    }
    
    #mobileNavMenu ul li:last-child {
        border-bottom: none !important;
    }
    
    #mobileNavMenu ul li a {
        padding: 1rem 1.5rem !important;
        font-size: 1.1rem !important;
        font-weight: 500 !important;
        display: block !important;
        color: #333 !important;
        text-decoration: none !important;
        transition: all 0.3s ease !important;
    }
    
    #mobileNavMenu ul li a:hover,
    #mobileNavMenu ul li a.active {
        background: #f8f9fa !important;
        color: #624C93 !important;
        transform: translateX(5px) !important;
    }
    
    /* Collapse button mobile */
    .btn.header-btn-collapse-nav {
        display: block !important;
        border: none !important;
        background: #624C93 !important;
        color: white !important;
        font-size: 1.5rem !important;
        padding: 0.5rem 0.8rem !important;
        border-radius: 6px !important;
        float: none !important;
        margin: 0 !important;
    }
    
    .btn.header-btn-collapse-nav:hover {
        background: #4A7DBB !important;
        color: white !important;
    }
    
    /* Modal content mobile */
    .article-content {
        font-size: 1rem !important;
        line-height: 1.6 !important;
    }
    
    .article-content h1 {
        font-size: 1.5rem !important;
    }
    
    .article-content h2 {
        font-size: 1.3rem !important;
    }
    
    .article-content h4 {
        font-size: 1.1rem !important;
    }
}

/* Small Mobile Phones */
@media (max-width: 575px) {
    /* Extra small adjustments */
    .text-14 {
        font-size: 1.8rem !important;
    }
    
    /* Hero section full mobile */
    .hero .container-fluid {
        padding: 2rem 1rem !important;
    }
    
    /* Buttons full width on very small screens */
    .btn-arrow-effect-1.ws-nowrap {
        white-space: normal !important;
        width: 100% !important;
        text-align: center !important;
    }
    
    /* Card spacing */
    .row [class*="col-"] {
        margin-bottom: 1.5rem;
    }
    
    /* Typography mobile */
    .text-10 {
        font-size: 1.8rem !important;
    }
    
    /* Service cards full width */
    .card {
        margin-bottom: 1.5rem;
    }
    
    /* Hero image extra small mobile */
    img[src*="banner-hero.jpg"] {
        height: 220px !important;
        border-radius: 15px !important;
    }
    
    .hero .col-lg-6 div[style*="max-width:400px"] {
        max-width: 240px !important;
        margin: 1.5rem auto 0 auto !important;
    }
    
    /* WhatsApp smaller on tiny screens */
    .whatsapp-chat {
        width: 50px;
        height: 50px;
        bottom: 10px;
        right: 10px;
    }
    
    .whatsapp-chat i {
        font-size: 24px !important;
    }
    
    /* Header layout for very small screens */
    .header-column:last-child .header-row {
        gap: 0.5rem !important;
    }
    
    .btn-modern.btn-primary {
        min-width: 250px !important;
        font-size: 0.85rem !important;
        padding: 0.7rem 1.2rem !important;
    }
    
    /* Form elements mobile */
    .form-control {
        font-size: 16px !important; /* Prevents zoom on iOS */
        padding: 0.75rem !important;
    }
    
    /* Modal mobile */
    .modal-dialog {
        margin: 1rem !important;
        max-width: calc(100vw - 2rem) !important;
    }
    
    /* Text content spacing */
    p {
        line-height: 1.6 !important;
        margin-bottom: 1rem !important;
    }
    
    h1, h2, h3, h4, h5, h6 {
        line-height: 1.3 !important;
        margin-bottom: 1rem !important;
    }
}

/* Landscape mobile phones */
@media (max-width: 767px) and (orientation: landscape) {
    .text-14 {
        font-size: 1.5rem !important;
    }
    
    .hero .container-fluid {
        padding: 1rem !important;
    }
    
    .section {
        padding: 2rem 0 !important;
    }
}

/* Fix for images that break responsive */
@media (max-width: 991px) {
    /* Hero image mobile fixes */
    img[src*="banner-hero.jpg"] {
        clip-path: none !important;
        border-radius: 25px !important;
        object-fit: cover !important;
        width: 100% !important;
        height: 280px !important;
    }
    
    /* Container for hero image */
    .hero .col-lg-6 div[style*="max-width:400px"] {
        max-width: 320px !important;
        margin: 1rem auto !important;
    }
    
    /* General image responsive fix */
    img[style*="clip-path"]:not([src*="banner-hero.jpg"]) {
        clip-path: none !important;
        border-radius: 20px !important;
    }
    
    /* Ensure all images are responsive */
    img:not(.logo):not([class*="icon"]) {
        max-width: 100% !important;
        height: auto !important;
    }
}

/* Index.html - Mobile fixes for images */
@media (max-width: 991px) {
    /* Fix icon images with fixed height="280" */
    img[height="280"] {
        height: auto !important;
        max-height: 200px !important;
        width: auto !important;
        max-width: 100% !important;
    }
    
    .card-body img[height="280"] {
        max-height: 180px !important;
        object-fit: contain !important;
    }
    
    /* Background images with fixed heights - Tablet responsive */
    .parallax[style*="min-height: 600px"] {
        min-height: 400px !important;
        height: 400px !important;
    }
    
    .bg-size-cover[style*="height: 300px"] {
        min-height: 250px !important;
        height: 250px !important;
    }
    
    /* Específico para Back03-480x300.jpg que se recorta en móviles */
    .bg-size-cover[style*="Back03-480x300.jpg"] {
        background-position: center top !important;
        min-height: 220px !important;
        height: 220px !important;
        height: 250px !important;
    }
}

@media (max-width: 767px) {
    /* Icon images mobile */
    img[height="280"] {
        max-height: 150px !important;
    }
    
    .card-body img[height="280"] {
        max-height: 120px !important;
    }
    
    /* Background images mobile */
    .parallax[style*="min-height: 600px"] {
        min-height: 300px !important;
        height: 300px !important;
    }
    
    .bg-size-cover[style*="height: 300px"] {
        min-height: 200px !important;
        height: 200px !important;
    }
    
    /* Card layout improvements for mobile */
    .card-body.text-center.text-lg-start {
        text-align: center !important;
    }
    
    .card-body h4 {
        font-size: 1.2rem !important;
        margin-top: 1rem !important;
    }
}

@media (max-width: 575px) {
    /* Very small mobile adjustments */
    img[height="280"] {
        max-height: 100px !important;
    }
    
    .card-body img[height="280"] {
        max-height: 80px !important;
    }
    
    /* Background images very small mobile */
    .parallax[style*="min-height: 600px"] {
        min-height: 250px !important;
        height: 250px !important;
    }
    
    .bg-size-cover[style*="height: 300px"] {
        min-height: 150px !important;
        height: 150px !important;
    }
    
    /* Section titles mobile */
    .text-10 {
        font-size: 1.6rem !important;
        line-height: 1.3 !important;
    }
    
    /* Impulsa Transformación section mobile */
    .section.bg-color-primary .container-xl-custom {
        padding: 2rem 1rem !important;
    }
    
    .section.bg-color-primary .row {
        flex-direction: column !important;
        text-align: center !important;
    }
    
    .section.bg-color-primary .col-lg-4,
    .section.bg-color-primary .col-lg-5,
    .section.bg-color-primary .col-lg-3 {
        margin-bottom: 1.5rem !important;
    }
}

/* Background images - Additional responsive fixes */
@media (max-width: 991px) {
    /* Ensure background images are responsive and not cropped */
    [style*="background-image"] {
        background-position: center center !important;
        background-size: cover !important;
    }
    
    /* Parallax sections mobile */
    .parallax.section-background {
        background-attachment: scroll !important;
    }
    
    /* Cover background sections */
    .cover-background {
        background-position: center center !important;
    }
    
    /* Parallax background with min-height 520px - Tablet */
    .parallax-background[style*="min-height: 520px"] {
        min-height: 350px !important;
        height: 350px !important;
    }
}

@media (max-width: 767px) {
    /* Parallax background mobile */
    .parallax-background[style*="min-height: 520px"] {
        min-height: 280px !important;  
        height: 280px !important;
        background-position: center center !important;
        background-size: cover !important;
    }
}

@media (max-width: 575px) {
    /* Parallax background very small mobile */
    .parallax-background[style*="min-height: 520px"] {
        min-height: 220px !important;
        height: 220px !important;
    }
}

/* Alternative selector for mission-vision background image */
@media (max-width: 991px) {
    [style*="mc-mision-vision-1.jpg"] {
        min-height: 350px !important;
        height: 350px !important;
        background-position: center center !important;
        background-size: cover !important;
    }
}

@media (max-width: 767px) {
    [style*="mc-mision-vision-1.jpg"] {
        min-height: 280px !important;
        height: 280px !important;
    }
}

@media (max-width: 575px) {
    [style*="mc-mision-vision-1.jpg"] {
        min-height: 220px !important;
        height: 220px !important;
    }
}

/* Second mission-vision background image */
@media (max-width: 991px) {
    [style*="mc-mision-vision-2.jpg"] {
        min-height: 350px !important;
        height: 350px !important;
        background-position: center center !important;
        background-size: cover !important;
    }
}

@media (max-width: 767px) {
    [style*="mc-mision-vision-2.jpg"] {
        min-height: 280px !important;
        height: 280px !important;
    }
}

@media (max-width: 575px) {
    [style*="mc-mision-vision-2.jpg"] {
        min-height: 220px !important;
        height: 220px !important;
    }
}

/* Acerca.html - Mission and Vision sections mobile improvements */
@media (max-width: 991px) {
    /* Mission and Vision content padding */
    .col-half-section {
        padding: 3rem 2rem !important;
    }
    
    .col-half-section .px-3 {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }
    
    /* Mission and Vision titles */
    .col-half-section h3 {
        font-size: 1.8rem !important;
        text-align: center !important;
    }
    
    /* Mission and Vision text */
    .col-half-section p {
        font-size: 1rem !important;
        line-height: 1.6 !important;
        text-align: justify !important;
    }
}

@media (max-width: 767px) {
    /* Smaller mobile adjustments */
    .col-half-section {
        padding: 2rem 1rem !important;
    }
    
    .col-half-section h3 {
        font-size: 1.5rem !important;
        margin-bottom: 1.5rem !important;
    }
    
    .col-half-section p {
        font-size: 0.9rem !important;
    }
}

/* Acerca.html - Mobile fixes for images */
@media (max-width: 991px) {
    /* Cascading images mobile fix - reorganize layout */
    .cascading-images-wrapper {
        overflow: hidden !important;
        padding: 1rem !important;
    }
    
    .cascading-images {
        position: relative !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 1rem !important;
        align-items: center !important;
    }
    
    .cascading-images > div,
    .cascading-images .position-absolute {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        width: 100% !important;
        max-width: 300px !important;
        margin: 0 auto !important;
    }
    
    .cascading-images img {
        width: 100% !important;
        height: auto !important;
        max-width: 300px !important;
        border-radius: 15px !important;
        box-shadow: 0 4px 12px rgba(0,0,0,0.1) !important;
    }
    
    /* Team member profile images mobile */
    .team-member img[style*="max-width: 200px"] {
        max-width: 150px !important;
        height: 150px !important;
        object-fit: cover !important;
    }
}

@media (max-width: 767px) {
    /* Cascading images mobile smaller */
    .cascading-images img {
        max-width: 280px !important;
        border-radius: 12px !important;
    }
    
    /* Team member profile images smaller mobile */
    .team-member img[style*="max-width: 200px"] {
        max-width: 120px !important;
        height: 120px !important;
    }
    
    /* Team member sections mobile padding */
    .team-member {
        padding: 2rem 1rem !important;
    }
    
    /* Background images in parallax sections responsive fix */
    .parallax-background {
        background-position: center top !important;
        background-size: cover !important;
        min-height: 300px !important;
    }
    
    /* Specific positioning for mission and vision images */
    section[data-image-src*="mc-mision-vision-1.jpg"] .parallax-background {
        background-position: center 20% !important;
    }
    
    section[data-image-src*="mc-mision-vision-2.jpg"] .parallax-background {
        background-position: center 15% !important;
    }
    
    /* Mission and Vision sections responsive */
    .container-fluid .row .col-lg-6 {
        min-height: 300px !important;
    }
    
    .col-half-section {
        padding: 30px 20px !important;
    }
    
    /* Impulsa la Transformación section responsive */
    .section.bg-color-primary .container-xl-custom .row.align-items-center {
        text-align: center !important;
    }
    
    .section.bg-color-primary .col-lg-3 {
        text-align: center !important;
        margin-bottom: 20px;
    }
    
    .section.bg-color-primary .col-lg-6 {
        margin-bottom: 20px;
    }
    
    .section.bg-color-primary .col-lg-3:last-child {
        text-align: center !important;
    }
}

@media (max-width: 575px) {
    /* Extra small mobile adjustments for acerca page */
    .cascading-images img {
        max-width: 250px !important;
        border-radius: 10px !important;
    }
    
    .cascading-images {
        gap: 0.8rem !important;
        padding: 0.5rem !important;
    }
    
    /* Team member profile images extra small */
    .team-member img[style*="max-width: 200px"] {
        max-width: 100px !important;
        height: 100px !important;
    }
    
    .team-member {
        padding: 1.5rem 0.8rem !important;
    }
    
    /* Ajuste específico para Back03-480x300.jpg en pantallas muy pequeñas */
    .bg-size-cover[style*="Back03-480x300.jpg"] {
        background-position: center 15% !important;
        min-height: 180px !important;
        height: 180px !important;
    }
    
    /* Better positioning for parallax images on very small screens */
    .parallax-background {
        background-position: center 10% !important;
        min-height: 250px !important;
    }
    
    section[data-image-src*="mc-mision-vision-1.jpg"] .parallax-background {
        background-position: center 15% !important;
    }
    
    section[data-image-src*="mc-mision-vision-2.jpg"] .parallax-background {
        background-position: center 10% !important;
    }
}

/* Print styles */
@media print {
    .whatsapp-chat {
        display: none !important;
    }
    
    .hero {
        background: white !important;
        color: black !important;
    }
}