/* style.css */

:root {
    /* Colors derived from the brochure request: Green, Blue, White, Black */
    --color-primary-green: #74b02f; /* Updated Professional Green (Growth, Efficiency) */
    --color-accent-blue: #1e4187;   /* Updated Professional Accent Blue (Trust, Technology) */
    --color-background-light: #FFFFFF; /* White (Clarity, Transparency) */
    --color-text-dark: #333333;
    --color-text-inverse: #FFFFFF;
    --color-dark-base: #0a0a0a; /* Slightly softer black for modern feel */
    --color-light-gray: #f2f4f7; /* Lighter background for modern look */
    --color-medium-gray: #e9ecef; /* Shade for subtle contrast */
    
    /* Modern shadow variables for consistent design */
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.05), 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 5px 15px rgba(0, 0, 0, 0.08); /* Stronger but softer shadow */
    --shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.12); /* For prominent elements */
    --shadow-hover: 0 15px 40px rgba(30, 65, 135, 0.2); /* New shadow for hover effect, using blue accent */

    /* Spacing variable for consistent gaps in grids/sections */
    --gap-spacing: 20px;
    
    /* Modern typography settings */
    --font-primary: 'Inter', sans-serif;
}

/* Custom utility classes to use Bootstrap style with defined colors */
.text-casef-green { color: var(--color-primary-green) !important; }
.text-casef-blue { color: var(--color-accent-blue) !important; }
.bg-casef-green { background-color: var(--color-primary-green) !important; }
.bg-casef-blue { background-color: var(--color-accent-blue) !important; }
.bg-casef-gray { background-color: var(--color-light-gray) !important; }

/* Subtler utility colors for modern QSE section */
/* These custom variables were not fully utilized and should be simplified or removed if they conflict with utility classes */
.text-casef-green-subtle { color: color-mix(in srgb, var(--color-primary-green), white 30%) !important; }
.text-casef-blue-subtle { color: color-mix(in srgb, var(--color-accent-blue), white 30%) !important; }


/* Global Reset and Typography */
* {
    box-sizing: border-box;
}

body {
    font-family: var(--font-primary);
    line-height: 1.65;
    color: var(--color-text-dark);
    background-color: var(--color-background-light);
    scroll-behavior: smooth; 
}

a {
    text-decoration: none;
    color: var(--color-accent-blue); /* Default links use blue */
    transition: color 0.2s ease;
}

a:hover {
    color: var(--color-primary-green);
}

/* Custom Buttons using Bootstrap structure */
.btn {
    border-radius: 50px; /* Modern rounded buttons */
    padding: 0.75rem 1.75rem;
    font-weight: 600;
    letter-spacing: 0.5px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.btn-casef-primary {
    background-color: var(--color-primary-green);
    color: var(--color-text-inverse);
    border: 2px solid var(--color-primary-green);
}

.btn-casef-primary:hover {
    background-color: var(--color-accent-blue);
    border-color: var(--color-accent-blue);
    color: var(--color-text-inverse);
    transform: translateY(-3px); /* Slightly more prominent lift */
    box-shadow: var(--shadow-hover); /* Using new hover shadow */
}

.btn-casef-secondary {
    background-color: transparent;
    color: var(--color-primary-green);
    border: 2px solid var(--color-primary-green);
}

.btn-casef-secondary:hover {
    background-color: var(--color-primary-green);
    color: var(--color-text-inverse);
    transform: translateY(-3px); /* Slightly more prominent lift */
    box-shadow: var(--shadow-hover); /* Using new hover shadow */
}

/* WhatsApp button styling */
.whatsapp-btn {
    /* Using primary style and overriding necessary colors */
    border: none !important;
    background-color: var(--color-primary-green) !important; /* Changed to primary green for consistency */
    color: white !important;
}

.whatsapp-btn:hover {
    background-color: var(--color-accent-blue) !important; /* Changed to blue accent on hover */
}

/* Specific styling for the CTA WhatsApp button */
/* This button is explicitly designed to be dark on a green background */
.cta-whatsapp-btn {
    background-color: var(--color-dark-base) !important;
    color: var(--color-text-inverse) !important;
    border-color: var(--color-dark-base) !important;
}

.cta-whatsapp-btn:hover {
    background-color: #333333 !important;
    border-color: #333333 !important;
    transform: translateY(-3px); /* Slightly more prominent lift */
    box-shadow: var(--shadow-hover); /* Using new hover shadow */
}

/* --- Navigation --- */
.navbar {
    padding-top: 15px;
    padding-bottom: 15px;
}
.navbar-brand img {
    height: 50px !important; /* Slightly larger logo */
}

.navbar-nav .nav-link {
    color: var(--color-text-dark);
    font-weight: 600;
    transition: color 0.3s, border-bottom 0.3s, opacity 0.3s;
    border-bottom: 3px solid transparent;
    padding-bottom: 5px;
    padding-top: 5px;
    margin-right: 15px;
}

.navbar-nav .nav-link:hover {
    color: var(--color-accent-blue);
    border-bottom: 3px solid var(--color-primary-green);
}

.navbar-nav .nav-link.active {
    color: var(--color-accent-blue);
    border-bottom: 3px solid var(--color-primary-green);
}

/* Offcanvas Specific Styling for Mobile Menu */
.offcanvas {
    max-width: 300px; /* Limit width for standard mobile popup */
}
.offcanvas .nav-link {
    /* Custom styling for large links in the offcanvas */
    font-weight: 700;
    color: var(--color-accent-blue);
    border-left: 5px solid transparent;
    margin-right: 0;
    padding-left: 1rem;
    padding-right: 1rem;
}
.offcanvas .nav-link:hover {
    background-color: var(--color-light-gray);
    color: var(--color-primary-green);
    border-left: 5px solid var(--color-primary-green);
    border-bottom: none;
}
.offcanvas .whatsapp-btn {
    font-size: 1.25rem;
}


/* --- Floating WhatsApp Button --- */
.whatsapp-float {
    position: fixed;
    width: 60px;
    height: 60px;
    bottom: 40px;
    right: 40px;
    background-color: #25d366; /* Official WhatsApp Green */
    color: #FFF;
    border-radius: 50px;
    text-align: center;
    font-size: 30px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
    z-index: 1050; /* Above navbar and other content */
    display: flex;
    justify-content: center;
    align-items: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.whatsapp-float:hover {
    color: #FFF;
    background-color: #128c7e; /* Darker green on hover */
    transform: scale(1.1);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.35);
}

.whatsapp-icon-float {
    margin-top: 0; /* Ensures the icon is perfectly centered */
}

/* --- Hero Section --- */
#inicio {
    background-image: url('project2.jpg');
    background-size: cover;
    background-position: center 50%; /* Center the new industrial image */
    min-height: 85vh; /* Taller hero section */
    position: relative;
    display: flex; /* Ensure container is centered vertically */
    align-items: center; /* Center vertically */
}

#inicio::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7); /* Slightly reduced opacity from 0.75 to 0.7, still dark */
    backdrop-filter: blur(2px); /* Slightly less blur, 2px */
    z-index: 1; 
}

#inicio .container {
    /* Removed redundant padding, let the flex centering handle it */
    padding-top: 0;
    padding-bottom: 0;
}

.hero-title {
    font-size: 3.5rem;
    letter-spacing: -1px;
    font-weight: 900 !important;
    color: initial; /* Remove previous default color if any */
    position: relative;
}

.hero-subtitle {
    font-weight: 300 !important;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    font-size: 1.25rem;
}

/* --- Shared Section Styling --- */
.py-lg-6 {
    padding-top: 7rem !important;
    padding-bottom: 7rem !important;
}

/* Service Detail Page Specific Styling */
.service-visual-detail {
    max-height: 400px;
    width: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.service-category {
    margin-top: 5rem;
    margin-bottom: 5rem !important;
}

.service-category:nth-child(even) .service-visual-detail {
    transform: perspective(1000px) rotateY(-5deg) scale(1.02);
    box-shadow: 20px 20px 30px rgba(0, 0, 0, 0.1);
}

.service-category:nth-child(odd) .service-visual-detail {
    transform: perspective(1000px) rotateY(5deg) scale(1.02);
    box-shadow: -20px 20px 30px rgba(0, 0, 0, 0.1);
}

.service-category .modern-list .list-group-item {
    border: none;
    padding-left: 0;
    padding-right: 0;
    margin-bottom: 10px;
    border-radius: 0;
    font-size: 1.05rem;
}

/* Mobile adjustments for service detail visuals */
@media (max-width: 992px) {
    .service-category:nth-child(even) .service-visual-detail,
    .service-category:nth-child(odd) .service-visual-detail {
        transform: none;
        box-shadow: var(--shadow-md);
        margin-top: 2rem;
    }
}

.section-header {
    font-size: 2.5em;
    font-weight: 800;
    letter-spacing: -0.5px;
    position: relative;
    padding-bottom: 15px;
}

.section-header::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 4px;
    background-color: var(--color-accent-blue);
    border-radius: 2px;
}

.section-subtitle {
    font-size: 1.1em;
    color: #6c757d;
}

/* --- About Us Section (Nosotros) --- */
.about-visuals {
    transition: all 0.5s ease;
    border-radius: 12px !important;
    box-shadow: var(--shadow-md); /* Adding base shadow */
}
/* Subtle hover for the whole image block */
.about-visuals:hover {
    box-shadow: var(--shadow-lg);
    transform: scale(1.01);
}

.about-visuals img {
    border-radius: 8px !important; /* Refined radius for internal images */
}

.modern-list li span {
    font-weight: 500;
}

/* --- Card Styles (Services & QSE) --- */
.modern-card {
    background: var(--color-background-light);
    border-radius: 12px !important;
    box-shadow: var(--shadow-md);
    transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94), box-shadow 0.4s;
    overflow: hidden; 
    border: 1px solid var(--color-medium-gray) !important;
}

.modern-card:hover {
    transform: translateY(-10px); /* Increased lift */
    box-shadow: var(--shadow-hover); /* Using prominent hover shadow */
}

/* Service Card Specifics */
.service-card .card-body {
    padding: 30px;
}

.icon-circle {
    width: 65px;
    height: 65px;
    border-radius: 50%;
    box-shadow: 0 5px 10px rgba(116, 176, 47, 0.3);
    border: 3px solid var(--color-background-light);
}

.service-visual {
    height: 280px; /* Slightly taller images for better impact */
    object-fit: cover;
    transition: transform 0.5s ease, filter 0.5s ease; /* Ensure transition exists */
    filter: brightness(0.9); /* Slightly darken image for richness */
}

.modern-card:hover .service-visual { /* Apply to modern-card hover, not service-card hover */
    transform: scale(1.05);
    filter: brightness(1);
}

/* Capability Item Specifics */
.modern-capability {
    padding: 30px;
    border: 1px solid var(--color-medium-gray);
    border-radius: 12px !important;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    box-shadow: var(--shadow-sm); /* Add initial subtle shadow */
}

/* Visual strip for capabilities (new requirement) */
.capability-visual-strip {
    width: calc(100% + 60px); /* Span width of the card including padding */
    height: 100px; /* Fixed height for the rectangular strip */
    object-fit: cover;
    margin-left: -30px; /* Offset to cover left padding */
    margin-right: -30px; /* Offset to cover right padding */
    margin-top: -30px; /* Offset to cover top padding */
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
    filter: brightness(0.9);
    transition: filter 0.3s ease;
}

.modern-capability:hover .capability-visual-strip {
    filter: brightness(1.05);
}

.modern-capability::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 5px;
    background-color: var(--color-accent-blue);
    transform: translateY(-5px);
    transition: transform 0.3s ease;
    /* Hide the previous blue strip as the image now occupies the top */
    display: none; 
}

.modern-capability:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-md); /* Lift and slightly better shadow on hover */
}

.modern-capability:hover::before {
    transform: translateY(0);
}

.modern-capability i {
    color: var(--color-accent-blue);
    transition: color 0.3s ease;
}

.modern-capability:hover i {
    color: var(--color-primary-green);
}

/* Removing icon specific styles now that images are used */
.modern-capability i {
    display: none; /* Hide the icons if they somehow remain */
}

/* Re-adjusting modern-capability padding to account for the image taking up the top space, making the content section cleaner */
.modern-capability {
    padding: 1.5rem 1.5rem 1.5rem 1.5rem; /* Standard padding */
}

/* Ensure the image fills the space intended for the strip visually */
.modern-capability .mb-3 {
    margin-bottom: 1rem !important;
}

/* QSE Item Specifics */
.qse-item {
    padding: 20px;
}

.qse-icon {
    width: 75px;
    height: 75px;
    box-shadow: none; /* Removing redundant box-shadow here */
    border: none;
    transition: all 0.3s;
    /* Ensure icons are centered using flexbox or padding if needed */
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
    border-radius: 50%;
}
/* Consolidated styling for QSE text/background colors, leveraging Bootstrap utility classes in HTML */
/* Removed redundant custom definitions that interfered with standard Bootstrap color utilities */
.qse-item .bg-danger-subtle { /* Safety */
    color: #dc3545; 
    background-color: rgba(220, 53, 69, 0.1); 
}
.qse-item .bg-success-subtle { /* Quality */
    color: var(--color-primary-green); 
    background-color: rgba(116, 176, 47, 0.1); 
}
.qse-item .bg-info-subtle { /* Environment */
    color: var(--color-accent-blue); 
    background-color: rgba(30, 65, 135, 0.1); 
}


/* --- Projects/Portfolio Section (Proyectos) - Visual Gallery --- */

/* New Uniform Grid Styles */
.project-item-uniform {
    position: relative;
    aspect-ratio: 4/3; /* Consistent aspect ratio for uniformity */
    height: 100%;
    transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94), box-shadow 0.4s ease; /* Enhanced transition */
    box-shadow: var(--shadow-md);
}

.project-item-uniform:hover {
    transform: scale(1.02); /* Scale up slightly instead of just lifting */
    box-shadow: var(--shadow-hover) !important;
}

.project-item-uniform img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.project-item-uniform:hover img {
    transform: scale(1.08); /* Enhanced image zoom */
}

/* Reusing overlay styles */
.overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(30, 65, 135, 0.9); /* Increased opacity for text clarity */
    color: white;
    padding: 15px 10px;
    opacity: 0;
    transition: opacity 0.3s ease;
    font-size: 1.1em;
    letter-spacing: 0.5px;
    text-align: center;
    font-weight: 600;
}

.project-item-uniform:hover .overlay {
    opacity: 1;
}

/* Specific Project Table Styling (used in proyectos.html) */
/* Ensure table responsiveness on all devices */
.client-table th, .client-table td {
    padding: 1rem;
}

/* Ensure images within the table look good */
/* Note: Additional styling for .client-carousel and .client-img is added inline in proyectos.html <style> block 
   to ensure the table structure is maintained without modifying core global styles unnecessarily. */


/* --- Contact Map Section (Improved Design) --- */

/* Reusing one class for the container block styling, applying border, shadow, and radius */
.contact-info-block {
    border-radius: 12px !important;
    box-shadow: var(--shadow-lg) !important;
    padding: 3rem !important;
    border: 4px solid var(--color-primary-green); 
    /* The HTML structure already uses h-100 and bg-casef-gray/bg-casef-blue */
    /* Ensure the map container styling doesn't conflict with the new unified block styling */
}

.map-container {
    /* Removed redundant border-radius and shadow settings here as they are applied via contact-info-block */
    /* Only contain map specific styling */
    padding: 0 !important; /* Ensure no internal padding conflicts with iframe */
}

.map-container iframe {
    /* Ensures iframe fills the container and respects border radius */
    border-radius: 8px; 
    height: 450px; /* Reset default height to 450px for mobile/tablet */
    /* Remove redundant style: border:0; this is better handled in HTML or by ensuring iframe takes 100% of parent */
}

/* Specific adjustment for map block on large screens to ensure content alignment is inside the visual block */
@media (min-width: 992px) {
    /* Use align-items-stretch in the row to guarantee height symmetry */
    #contacto .row {
        align-items: stretch; 
    }
    
    /* We now apply contact-info-block directly to the parent div in index.html, so we only need to ensure the iframe grows */
    
    .col-lg-6.order-lg-2 .contact-info-block {
        height: 100%; /* Ensure map block takes full height */
        padding: 3rem !important; /* Match padding to the contact details block */
        display: flex; /* Make the container a flex container */
        flex-direction: column; /* Stack contents (Title, then Map) */
    }
    
    /* Ensure the iframe fills the available space within the contact-info-block */
    .col-lg-6.order-lg-2 .map-container {
        flex-grow: 1; /* Allows map container to take up remaining space */
    }

    .col-lg-6.order-lg-2 .map-container iframe {
        height: 100%; /* Allows iframe to fill the height provided by flexbox on desktop */
        min-height: 300px; /* Ensure minimum size */
    }
    
    /* Removing the now unnecessary wrapping div style */
    .col-lg-6.order-lg-2 > .d-flex {
        /* Since we moved .contact-info-block up, this flex container is gone or no longer necessary */
        /* Let's ensure no unintended styling remains */
    }

    /* Reset map container internal padding on desktop as it is now covered by .contact-info-block */
    .map-container {
        padding: 0 !important; /* Reset padding for the internal map container */
    }
}


.modern-contact-item {
    background-color: var(--color-background-light); /* Changed to white background for contrast inside the info block */
    border-radius: 8px; /* Slightly larger radius */
    transition: background-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease; 
    box-shadow: var(--shadow-sm); 
    padding-left: 15px !important; /* Ensure the border starts clearly */
}
.modern-contact-item:hover {
    background-color: var(--color-light-gray); /* Subtle change on hover */
    transform: translateX(0); /* Remove slide animation for a cleaner look */
    box-shadow: var(--shadow-md);
}

.modern-contact-item h5 {
    font-size: 1.15rem;
    margin-bottom: 0.5rem;
}

/* Fixing font awesome fixed width for better alignment in contact details */
.fa-fw {
    text-align: center;
    width: 1.25em; /* Standard fixed width */
}

/* --- Footer --- */
footer {
    background-color: var(--color-dark-base);
    color: #cccccc;
    font-size: 0.95em;
}

footer a {
    color: #cccccc;
}

footer a:hover {
    color: var(--color-primary-green) !important;
}


/* Responsiveness adjustments */
@media (max-width: 992px) {
    .hero-title {
        font-size: 2.5rem;
    }
}

@media (max-width: 768px) {
    #inicio {
        min-height: 50vh;
    }
    
    /* Ensure the last element in the project gallery (the 9th item) is hidden on smaller screens (below desktop) 
       if it was only intended for a 3x3 layout. We adjust the index.html col classes instead.
       The change in index.html (col-6 col-lg-4 col-md-6) handles this.

       We can adjust the margin/padding for mobile view to enhance appearance.
    */
    .py-lg-6 {
        padding-top: 5rem !important;
        padding-bottom: 5rem !important;
    }

    .section-header {
        font-size: 2rem;
    }
    
    /* Contact Section: Ensure map is visually appealing on mobile */
    .map-container iframe {
        height: 300px; /* Reduce map height on mobile */
    }
    
    .contact-info-block {
        padding: 2rem !important;
    }
    
    /* Adjust floating WhatsApp button position for mobile comfort */
    .whatsapp-float {
        bottom: 20px;
        right: 20px;
        width: 50px;
        height: 50px;
        font-size: 24px;
    }
}