/* --- Google Fonts Import --- */
@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@400;700&display=swap');

/* --- CSS Variables --- */
:root {
    --color-dark-blue: #111626;
    --color-orange: #F17D46;
    --color-grey: #E6E8EC;
    --color-white: #ffffff;
    --color-text-dark: #333333;
    --font-primary: 'Raleway', sans-serif;
    --section-padding-y: 5rem;
}

/* --- Global Styles --- */
body {
    font-family: var(--font-primary);
    color: var(--color-text-dark);
    line-height: 1.6;
    font-size: 16px;
    background-color: var(--color-white);
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-primary);
    font-weight: 700;
    color: var(--color-dark-blue);
    margin-bottom: 1rem;
}

h1 { font-size: 3rem; }
h2 { font-size: 2.25rem; }
h3 { font-size: 1.75rem; }
p { margin-bottom: 1rem; }
a { color: var(--color-orange); text-decoration: none; }
a:hover { color: #d96d3a; }

section {
    padding: var(--section-padding-y) 0;
    overflow: hidden;
}

/* --- Utility Classes --- */
.bg-dark-blue { background-color: var(--color-dark-blue) !important; }
.bg-grey { background-color: var(--color-grey) !important; }
.text-orange { color: var(--color-orange); }
.object-fit-cover { object-fit: cover; }

/* --- Bootstrap Component Overrides --- */
.btn {
    font-family: var(--font-primary);
    font-weight: 700;
    padding: 0.75rem 1.75rem;
    border-radius: 8px;
    transition: all 0.3s ease;
}
.btn-primary {
    background-color: var(--color-orange) !important;
    border-color: var(--color-orange) !important;
    color: var(--color-white) !important;
}
.btn-primary:hover,
.btn-primary:focus {
    background-color: #d96d3a !important;
    border-color: #d96d3a !important;
    color: var(--color-white) !important;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    transform: translateY(-2px);
}
.form-control {
    border-radius: 8px;
    padding: 0.75rem 1rem;
    border: 1px solid #ced4da;
}
.form-control:focus {
     border-color: var(--color-orange);
     box-shadow: 0 0 0 0.25rem rgba(241, 125, 70, 0.25);
}
.form-label {
    font-weight: 700;
    margin-bottom: 0.5rem;
    color: var(--color-dark-blue);
}

/* --- Header Styles --- */
header {
    background-color: var(--color-dark-blue);
}
header .navbar {
    padding-top: 1rem;
    padding-bottom: 1rem;
}
header .navbar-brand img {
    max-height: 68px;
}
header .navbar-nav .nav-link {
     font-weight: 700;
     color: var(--color-white);
     margin-left: 1.5rem;
     padding: 0.5rem 0;
     position: relative;
     transition: color 0.3s ease;
}
header .navbar-nav .nav-link::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 2px;
    background-color: var(--color-orange);
    transition: width 0.3s ease;
}
header .navbar-nav .nav-link.active,
header .navbar-nav .nav-link:hover {
    color: var(--color-orange);
}
header .navbar-nav .nav-link.active::after,
header .navbar-nav .nav-link:hover::after {
    width: 100%;
}
.navbar-toggler {
    border-color: rgba(255, 255, 255, 0.1);
}
.navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(255, 255, 255, 1)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}


/* --- Hero Section Styles --- */
.hero-section {
    padding: 0;
    position: relative;
    background-color: var(--color-dark-blue) !important;
}
.hero-text-col {
    min-height: 60vh;
    padding: 4rem 2rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    z-index: 2;
    color: var(--color-white);
    background-color: var(--color-dark-blue);
}
.hero-text-col h1 { color: var(--color-white); font-size: clamp(2.5rem, 6vw, 3.8rem); }
.hero-text-col .lead { font-size: 1.15rem; color: rgba(255, 255, 255, 0.85); }
.hero-image-col {
    min-height: 400px;
    position: relative;
    background-color: var(--color-dark-blue);
    overflow: hidden;
}
.hero-image-col img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: cover;
    max-height: 70vh;
     @media (max-width: 991.98px) {
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
     }
}
@media (min-width: 992px) {
    .hero-text-col {
        padding-left: 5%;
        padding-right: 5%;
    }
     .hero-image-col {
        position: static;
        min-height: auto;
        background-color: var(--color-dark-blue);
        display: flex;
        align-items: flex-end;
        justify-content: center;
    }
     .hero-image-col img {
         position: static;
         height: auto;
         max-width: 100%;
         max-height: 70vh;
         margin-top: auto;
         object-fit: cover;
     }
     .hero-section .row > div {
        display: flex;
        align-items: stretch;
    }
    .hero-text-col { align-items: center; }
}

/* --- General Company Section --- */
#general-company { background-color: var(--color-white); }
#general-company img { border-radius: 8px; max-width: 100%; height: auto; }
#general-company h2 { color: var(--color-dark-blue); margin-bottom: 1.5rem; }

/* --- Custom Tab Section Styles --- */
#servicios-tabs {
    background-color: var(--color-dark-blue) !important;
    color: var(--color-white);
    padding-top: var(--section-padding-y);
    padding-bottom: 0; /* Remove section bottom padding, content container will handle it */
}
#servicios-tabs h3 { color: var(--color-white); margin-bottom: 1.5rem; }
#servicios-tabs p, #servicios-tabs li { color: rgba(255, 255, 255, 0.85); }

/* Container for the tab buttons */
#servicios-tabs nav {
    border: none;
    margin-bottom: -4px; /* <<< Pull the divider UP by the active border height */
    position: relative; /* Keep for z-index context if needed */
    z-index: 2; /* Ensure tabs are clickable above the divider */
}
.custom-tabs {
    border-bottom: none !important; /* Remove bootstrap default */
    margin-bottom: 0 !important;
}

/* Individual tab button styling */
.custom-tabs .nav-link {
    font-family: var(--font-primary);
    font-weight: 700;
    font-size: 1.1rem;
    background-color: transparent !important;
    color: var(--color-white);
    /* Ensure NO side/top borders */
    border-top: none !important;
    border-left: none !important;
    border-right: none !important;
    /* Keep bottom border for spacing/active state */
    border-bottom: 4px solid transparent; /* Reserve space for border */
    padding: 0.75rem 1rem;
    margin: 0 1rem;
    transition: color 0.3s ease, opacity 0.3s ease, border-color 0.3s ease;
    opacity: 0.7;
    white-space: nowrap;
    outline: none !important; /* <<< ADDED: Remove default outline */
    box-shadow: none !important; /* <<< ADDED: Remove default box-shadow */
}

/* Also target the :focus state explicitly */
.custom-tabs .nav-link:focus {
    outline: none !important;
    box-shadow: none !important;
    /* You might optionally want to ensure the hover border applies on focus too */
    /* border-bottom-color: rgba(241, 125, 70, 0.5); */
}

/* Active tab button styling */
.custom-tabs .nav-link.active {
    color: var(--color-white);
    opacity: 1;
    border-bottom-color: var(--color-orange); /* Set active border */
    outline: none !important; /* Redundant but safe */
    box-shadow: none !important; /* Redundant but safe */
}


/* Hover effect */
.custom-tabs .nav-link:hover {
    color: var(--color-white);
    opacity: 1;
    border-bottom-color: rgba(241, 125, 70, 0.5); /* Fainter orange border on hover */
}

/* Full Width Line DIVIDER Styling */
.tab-divider-line {
    width: 100%;
    height: 0; /* No height needed, just border */
    border-bottom: 2px solid rgba(241, 125, 70, 0.2); /* Faint orange line */
    margin-top: 0; /* Adjusted by nav margin */
    margin-bottom: 2.5rem; /* Space below the line */
    position: relative; /* Keep in normal flow */
    z-index: 1; /* Below tabs */
}

/* Content area below tabs */
#servicios-tabs .tab-content {
    padding-top: 0; /* No extra padding needed */
    padding-bottom: var(--section-padding-y); /* Add section padding back here */
}
/* ...(rest of tab content list/image styles remain the same)... */
#servicios-tabs ul { list-style: none; padding-left: 1.2em; margin-top: 1rem; }
#servicios-tabs ul li { position: relative; margin-bottom: 0.5rem; }
#servicios-tabs ul li::before { content: "•"; color: var(--color-orange); font-weight: bold; position: absolute; left: -1.2em; font-size: 1.2em; }
#servicios-tabs img { border-radius: 8px; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); }
/* --- end tabs --- */


/* --- Check Final Section Styles --- */
#check-final { background-color: var(--color-white); }
#check-final h2 { color: var(--color-dark-blue); margin-bottom: 1.5rem; }
#check-final .lead { font-weight: 700; margin-bottom: 1.5rem; }

/* Juxtapose Slider Styling & Safety */
/* Default (Desktop & Mobile) Styles */
#check-final .juxtapose {
    max-width: 100%;
    width: 100% !important; /* Width always 100% via CSS */
    height: auto;
    min-height: 200px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    overflow: hidden;
    display: block;
    visibility: visible;
    opacity: 1;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    box-sizing: border-box;
}
.juxtapose img {
    display: block;
}
/* Handle styling for single 8px WHITE line */
.juxtapose .jx-handle {
    background: var(--color-white) !important;
    width: 8px !important;
    border-left: none !important;
    border-right: none !important;
    box-shadow: none !important;
    margin-left: -4px !important;
    opacity: 0.85 !important;
    cursor: ew-resize;
}
.juxtapose .jx-arrow {
    display: none !important;
}
 .juxtapose .jx-handle::before,
 .juxtapose .jx-handle::after {
     display: none !important;
 }
.juxtapose .jx-control { background: rgba(0, 0, 0, 0.6); color: white; }


/* --- Testimonials Section Styles --- */
/* Testimonials section appears to be missing from provided HTML, styles kept for reference */
#testimonials { background-color: #f8f9fa; }
#testimonials h2 { color: var(--color-dark-blue); margin-bottom: 3rem; }
.testimonial-slider { padding-bottom: 50px; }
.testimonial-card { border: none; background-color: var(--color-white); border-radius: 8px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); padding: 2rem; height: 100%; display: flex; flex-direction: column; align-items: center; }
.testimonial-img { width: 80px; height: 80px; margin-bottom: 1.5rem; border: 3px solid var(--color-orange); }
.testimonial-card blockquote p { font-size: 1rem; font-style: italic; color: var(--color-text-dark); margin-bottom: 1rem; }
.testimonial-card blockquote footer { font-size: 0.9rem; font-weight: 700; color: var(--color-dark-blue); }
.testimonial-card blockquote footer cite { display: block; font-weight: 400; font-style: normal; color: #6c757d; font-size: 0.85rem; margin-top: 0.25rem; }
.testimonial-pagination .swiper-pagination-bullet { background-color: var(--color-dark-blue); opacity: 0.3; width: 10px; height: 10px; transition: background-color 0.3s ease, opacity 0.3s ease; }
.testimonial-pagination .swiper-pagination-bullet-active { background-color: var(--color-orange); opacity: 1; }

/* --- Contact Section Styles --- */
#contacto { background-color: var(--color-grey) !important; }
#contacto h2 { color: var(--color-dark-blue); }
#contacto .lead { font-weight: normal; color: var(--color-text-dark); }
.contact-info { margin-top: 2rem; }
.contact-info p { margin-bottom: 1rem; font-size: 1rem; display: flex; align-items: center; }
.contact-info svg { color: var(--color-orange); margin-right: 0.8rem; flex-shrink: 0; width: 20px; height: 20px; }
.contact-info a { color: var(--color-dark-blue); font-weight: 700; }
.contact-info a:hover { color: var(--color-orange); }

/* --- Footer Styles --- */
footer { background-color: var(--color-grey) !important; padding: 2rem 0; }
/* Ensure footer row uses Flexbox */
footer .row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}
footer img {
    max-height: 50px; /* Increased footer logo size */
}
footer a { color: var(--color-dark-blue); transition: color 0.3s ease; }
footer a:hover { color: var(--color-orange); }
footer .bi-instagram { width: 28px; height: 28px; }

/* --- Responsive Adjustments --- */
@media (max-width: 991.98px) {
    .hero-text-col { text-align: center; min-height: auto; padding: 3rem 1rem; }
    .hero-image-col { min-height: 350px; position: relative; }
    .hero-image-col img { position: absolute; }
    #general-company .row .col-md-6:first-child { margin-bottom: 2rem; }
    .custom-tabs { justify-content: flex-start; flex-wrap: wrap; } /* Removed margin-bottom here */
     .custom-tabs .nav-link { margin: 0 0.5rem 0.5rem 0.5rem; font-size: 1rem; }
     #servicios-tabs .row .col-md-6:last-child { margin-top: 2rem; }
     #check-final .row .col-md-6:last-child { margin-top: 2rem; }
}
@media (max-width: 767.98px) {
     h1 { font-size: 2.2rem; }
     h2 { font-size: 1.8rem; }
     h3 { font-size: 1.5rem; }
     section { padding: 3rem 0; }
      header .navbar-nav { margin-top: 1rem; }
      header .navbar-nav .nav-link { margin-left: 0; padding: 0.5rem 0; width: fit-content; }
     .btn { padding: 0.6rem 1.2rem; font-size: 0.9rem; }
     #contacto .row .col-lg-7 { margin-top: 2rem; }

    /* Footer Mobile */
    footer .row { flex-wrap: wrap; } /* Allow wrapping if needed */
    footer .row > [class*="col-"] {
         flex-basis: 50%; /* Try to keep side-by-side */
         text-align: inherit !important;
         margin-bottom: 0 !important;
    }
     footer .row > div:first-child {
         text-align: left !important;
         order: 1;
     }
      footer .row > div:last-child {
         text-align: right !important;
         order: 2;
     }
     /* Ensure full width on very small screens if needed */
      @media (max-width: 480px) {
         footer .row > [class*="col-"] { flex-basis: 100%; text-align: center !important; }
         footer .row > div:first-child { margin-bottom: 1rem; order: 1; }
         footer .row > div:last-child { order: 2; }
      }

     /* Removed specific Juxtapose mobile width override */
}


/* --- SPACER: Adjust Margins Between Text/Image Columns --- */

@media (min-width: 768px) { /* Apply only when columns are side-by-side (md breakpoint) */

    /* General Company (Img Left, Text Right) */
    #general-company .row > .col-md-6:first-child { /* Image Column */
        padding-right: 3rem; /* Space to the right of the image */
    }
    #general-company .row > .col-md-6:last-child { /* Text Column */
        padding-left: 3rem; /* Space to the left of the text */
    }

    /* Tabs Content (Text Left, Img Right) */
    #servicios-tabs .tab-pane .row > .col-md-6:first-child { /* Text Column */
         padding-right: 3rem; /* Space to the right of the text */
    }
     #servicios-tabs .tab-pane .row > .col-md-6:last-child { /* Image Column */
         padding-left: 3rem; /* Space to the left of the image */
     }

     /* Check Final (Text Left, Slider Right) */
     #check-final .row > .col-md-6:first-child { /* Text Column */
         padding-right: 3rem; /* Space to the right of the text */
     }
     #check-final .row > .col-md-6:last-child { /* Slider Column */
          padding-left: 3rem; /* Space to the left of the slider */
     }
     
     /* Contact Section (Text Left, Form Right) */
     #contacto .row > .col-md-6:first-child { /* Text Column */
         padding-right: 3rem; /* Space to the right of the text */
     }
     #contacto .row > .col-md-6:last-child { /* Form Column */
          padding-left: 3rem; /* Space to the left of the form */
     }
}
}

/* Increase vertical spacing when stacked on mobile */
@media (max-width: 767.98px) {
     /* Reset Bootstrap's default mb-4 if present on columns */
     #general-company .col-md-6,
     #servicios-tabs .col-md-6,
     #check-final .col-md-6 {
         margin-bottom: 0 !important;
     }

    /* Add margin below the element that appears first visually */
     #general-company .row > .col-md-6:first-child, /* Image Column */
     #servicios-tabs .tab-pane .row > .col-md-6:first-child, /* Text Column */
     #check-final .row > .col-md-6:first-child /* Text Column */ {
         margin-bottom: 3rem !important; /* Increased vertical space below top element */
     }
     
     #contacto .col-md-6 { /* <<< Ensure contact columns are targeted */
        margin-bottom: 0 !important;
    }
     #contacto .row > .col-md-6:first-child /* Text Column */ {
         margin-bottom: 3rem !important; /* Increased vertical space */
     }
}


/* --- END SPACER --- */



/* --- Floating WhatsApp Button --- */
.whatsapp-float {
    position: fixed;
    width: 60px;
    height: 60px;
    bottom: 25px;
    right: 25px;
    background-color: #25D366; /* WhatsApp Green */
    color: #FFF;
    border-radius: 50%;
    text-align: center;
    font-size: 30px; /* Icon size - adjust if needed */
    box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.3);
    z-index: 1000; /* Ensure it's above other content */
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition: transform 0.2s ease-in-out, background-color 0.2s ease;
}

.whatsapp-float:hover {
    background-color: #128C7E; /* Darker green on hover */
    color: #FFF;
    transform: scale(1.1); /* Slightly enlarge on hover */
}

.whatsapp-float svg {
     /* SVG icon already sized in HTML, vertically align if needed */
     vertical-align: middle;
}
/* --- END Floating WhatsApp Button --- */