/* ================= GENERAL ================= */

body {
    margin: 0;
    font-family: Arial, Helvetica, sans-serif;
    color: white;
    line-height: 1.6;
}

/* Larger laptop / 1440x900 specific adjustments: ensure caption fully fits inside the banner
   and there is visible space below the text before the next section. Targets common
   laptop widths between 1400px and 1600px (includes 1440px). */
@media (min-width: 1400px) and (max-width: 1600px) {
    .hero-wrapper {
        height: 600px !important; /* increase container so caption doesn't overflow */
        margin: 0 60px !important; /* slightly larger side gutters on wide laptops */
        overflow: hidden !important;
    }

    .hero-img {
        height: 600px !important;
        width: 100% !important;
        object-fit: cover !important;
        display: block !important;
        opacity: 0.86 !important;
    }

    /* Center caption and force it to remain inside the banner area */
    .hero .banner-caption,
    .hero .banner-caption .for-two-ling-title,
    .container.banner-caption {
        position: absolute !important;
        top: 60% !important; /* moved lower so caption sits further down on 1440x900 */
        left: 50% !important;
        transform: translate(-50%, -50%) !important;
        width: calc(100% - 120px) !important;
        max-width: 1180px !important;
        padding: 0 24px !important;
        text-align: center !important;
        z-index: 6 !important;
        pointer-events: none !important;
    }

    .hero .for-two-ling-title h1 {
        font-size: 3.6rem !important; /* increased 20% for 1440x900 */
        line-height: 1.08 !important;
    }

    /* Ensure the title is centered in the banner for 1440x900 range */
    .hero .for-two-ling-title {
        width: 100% !important;
        display: block !important;
        text-align: center !important;
        pointer-events: none !important;
    }

    .hero .for-two-ling-title h1 {
        white-space: normal !important; /* allow wrapping so centering works */
        margin: 0 auto !important;
        text-align: center !important;
    }

    .hero .for-two-ling-title p {
        font-size: 2rem !important; /* increased 20% for 1440x900 */
        line-height: 1.35 !important;
    }

    /* Ensure the following section sits below the hero without overlap */
    .hero + section {
        margin-top: 24px !important;
    }
}

section {
    padding: 60px 20px;
}

.contenido {
    max-width: 1100px;
    margin: auto;
}

.contenido.alt {
    background: #f5f5f5;
}


/* ===== HERO GENERAL ===== */

.hero {
    position: relative;
    width: 100%;
    overflow: hidden;
}

/* Margen lateral para TODAS las pantallas */
.hero-wrapper {
    margin: 0 10px;
}

/* Imagen sin recortes en escritorio */
.hero-img {
    width: 100%;
    height: auto;
    display: block;
    opacity: 0.7;
}

/* ===== MOBILE: mostrar la imagen completa, sin recorte ===== */
@media (max-width: 768px) {

    .hero-img {
        width: 100%;
        height: auto;
        object-fit: contain !important;
		opacity: 0.5 !important;
    }

    .hero {
        height: auto;
    }
}

/* --- En móviles NO SE CORTA --- */
@media (max-width: 768px) {
    .hero-img {
        width: 110%;
        height: auto;
        object-fit: contain !important;   /* Imagen completa */
        background: #000;                 /* Fondo opcional */
    }

    .hero {
        height: auto;  /* Altura natural */
    }
}

/* ================= RESPONSIVE ================= */

@media (max-width: 768px) {

    .hero {
        height: 40vh;
    }

    .hero-text h1 {
        font-size: 26px;
        padding: 0 10px;
    }

    .footer-grid {
        flex-direction: column;
        gap: 10px;
    }

}
/* ================= HEADER ================= */

.deco-header {
    padding: 10px 0;
    border-bottom: 1px solid #e5e5e5;
}

/* header logo default (desktop larger) */
.header-logo {
    width: 320px; /* increased size for desktop */
    height: auto;
}

/* Slightly larger on large desktops */
@media (min-width: 992px) {
    .header-logo {
        width: 380px;
    }
}

@media (min-width: 1400px) {
    .header-logo {
        width: 420px;
    }
}

/* Espaciado con el hero */
body > header {
    margin-bottom: 10px;
}

/* Navbar */
.nav-link {
    font-size: 17px;
    color: #003261 !important;
    font-weight: 600;
}


/* Mobile */
@media(max-width: 768px) {
    .header-logo {
        width: 220px;
    }
}

/* Eliminar espacio blanco en móviles */
@media (max-width: 768px) {

    .hero {
        margin: 100px !important;
        margin-left: 5px !important;
        padding: 30px !important;
        height: 150px !important;
    }

    .hero-wrapper {
        margin: 0 10px !important; /* tus márgenes laterales */
        padding: 0 !important;
    }

    .hero-img {
        display: block !important;
        width: 100% !important;
        height: auto !important;
        object-fit: contain !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* Evitar que el texto del hero empuje el contenedor */
    .hero-text {
        margin: 0 !important;
        padding: 0 !important;
        bottom: 10px !important; /* opcional */
    }
}

/* Mobile adjustment: make Parque SJB_2.jpg smaller and centered on phones */
@media (max-width: 767.98px) {
    /* Target the img with that filename and the shared .img-aporte class */
    .img-aporte[src*="Parque SJB_2.jpg"] {
        width: 100% !important;       /* responsive width on small screens */
        max-width: 460px !important; /* cap the maximum display size */
        height: auto !important;
        display: block !important;
        margin: 18px auto !important; /* center horizontally and give vertical spacing */
        object-fit: cover !important;
    }
}

/* Ajuste móvil específico de la página para el título del hero de inicio: centrar y aumentar el tamaño del texto al 150 % y centrar vertical/horizontalmente */
@media (max-width: 767.98px) {
    /* Ensure the hero container is positioned to allow absolute centering */
    .hero { position: relative !important; }

    /* Center the banner-caption absolutely over the hero image */
    .hero .banner-caption {
        position: absolute !important;
        top: 50% !important;
        left: 50% !important;
        transform: translate(-50%, -50%) !important;
        text-align: center !important;
        width: 100% !important;
        max-width: 92% !important;
        padding: 0 12px !important;
        box-sizing: border-box !important;
        z-index: 5 !important; /* ensure caption sits above the image */
    }

    .hero-img { z-index: 1 !important; }

    .hero .banner-caption .for-two-ling-title,
    .hero .for-two-ling-title {
        display: block !important;
        margin: 0 auto !important;
        width: 100% !important;
    }

    /* Make title and subtitle readable on mobile */
        .hero .for-two-ling-title h1,
        .hero .banner-caption .for-two-ling-title h1 {
            font-size: 120% !important;
            line-height: 1.5 !important; /* allow normal spacing so lines don't overlap */
            color: midnightblue !important; /* mobile: midnightblue */
            text-shadow: 0 2px 6px rgba(0,0,0,0.6) !important;
            margin: 0.15em 0 0.25em 0 !important;
            word-break: break-word !important;
            white-space: normal !important; /* allow wrapping */
        }

        .hero .for-two-ling-title p,
        .hero .banner-caption .for-two-ling-title p {
            font-size: 90% !important;
            line-height: 1.2 !important; /* readable paragraph spacing */
            margin: 0 !important;
            color: midnightblue !important; /* mobile: midnightblue */
            text-shadow: 0 1px 4px rgba(0,0,0,0.5) !important;
            padding: 0 !important;
        }
}

/* Responsive hero title adjustments for Deco Construcciones page */
.for-two-ling-title {
  text-align: center;
  padding: 0 12px;
}

.for-two-ling-title h1 {
  /* default desktop behaviour: keep in one line when possible */
  white-space: nowrap;
  overflow: visible;
  text-overflow: clip;
  margin-bottom: 10px;
  /* color removed here so desktop uses default (white or other global rules) */
}

.for-two-ling-title p {
  margin: 0;
  /* color removed here so desktop uses default (white or other global rules) */
}

/* Adjustments for tablets and smaller screens */
@media (max-width: 991.98px) {
  .for-two-ling-title h1 {
    /* allow wrapping and reduce size so it fits inside the banner image */
    white-space: normal;
    font-size: 1.8rem !important;
    line-height: 1.15 !important;
    word-break: break-word;
    /* keep color only for tablets and smaller via mobile queries below */
  }

  .for-two-ling-title p {
    font-size: 1rem !important;
    line-height: 1.15 !important;
  }

  /* Move the caption slightly higher on smaller screens so text stays inside the image */
  .banner-caption {
    top: 60% !important;
    padding: 0 18px;
  }
}

/* Mobile-specific tweaks */
@media (max-width: 575.98px) {
  .for-two-ling-title h1 {
    font-size: 1.4rem !important;
    line-height: 1.1 !important;
    color: midnightblue !important; /* mobile h1 color */
  }

  .for-two-ling-title p {
    font-size: 0.95rem !important;
    line-height: 1.1 !important;
    color: midnightblue !important; /* mobile p color */
  }

  .banner-caption {
    top: 55% !important;
    padding: 0 14px;
  }
}

/* Ensure project title visible on mobile */
@media (max-width: 767.98px) {
    .vj-title {
        display: block !important;
        color: brown !important;
        font-size: 1.5rem !important; /* adjust as needed */
        line-height: 1.3 !important;
        text-align: center !important;
        margin-top: 18px !important; /* reduced from 1000px to allow following blocks to appear */
        margin-left: 12px !important;
        margin-right: 12px !important;
        padding: 4px 0 !important;
        visibility: visible !important;
    }
}

/* Fix: Ensure the Villa Javier title (.vj-title) is visible and properly spaced on very narrow phones (~360px)
   This targets only devices between 320px and 360px and won't affect other breakpoints/pages. */
@media (min-width: 320px) and (max-width: 360px) {
    .vj-title {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        position: -webkit-sticky !important; /* fallback */
        position: sticky !important;
        top: 88px !important; /* push below header */
        z-index: 9999 !important; /* ensure it's above header */
        text-align: center !important;
        margin-top: 0 !important; /* remove previous offsets */
        margin-bottom: 8px !important;
        font-size: 2rem !important; /* slightly smaller to fit */
        line-height: 1.25 !important;
        padding: 0 12px !important; /* allow wrapping with side padding */
        color: brown !important; /* force visible color */
        transform: none !important;
        -webkit-transform: none !important;
        width: calc(100% - 24px) !important;
        box-sizing: border-box !important;
    }
}

/* Responsive rule for generated graphic on DecoCons page */
.deco-graphic {
    width: 100%;
    max-width: 600px; /* original intended width */
    height: auto;
    margin-top: 0; /* remove negative margin that broke layout on mobile */
    display: block;
    margin-left: auto;
    margin-right: auto;
}

@media (max-width: 768px) {
    .deco-graphic {
        max-width: 320px; /* smaller on phones */
        width: 90%;
        margin-top: 12px;
    }
}
@media (max-width: 768px) {
    .deco-cons-h3 {
        font-size: 1.5rem !important;
    }
}

/* Projects logos grid: two per row on mobile */
.projects-logos .row {
    --bs-gutter-x: 0.5rem;
}

@media (max-width: 767.98px) {
    .projects-logos .col-6 {
        flex: 0 0 50% !important;
        max-width: 50% !important;
        padding-left: 8px !important;
        padding-right: 8px !important;
        box-sizing: border-box;
        display: flex !important;
        align-items: center !important; /* vertical centering so logos align by row */
        justify-content: center !important;
        min-height: 110px !important; /* consistent row height */
    }

    /* Reduce logos ~20% from previous 90% (->72%) and enforce uniform height */
    .projects-logos img {
        max-width: 72% !important; /* ~20% smaller */
        width: auto !important;
        max-height: 200px !important; /* unify visual height */
        height: auto !important;
        margin: 6px auto !important;
        display: block !important;
        object-fit: contain !important;
    }

    .projects-logos .row {
        margin-left: -8px !important;
        margin-right: -8px !important;
    }
    /* Ensure no negative margins/offsets from inline styles break layout */
    .projects-logos img[style] {
        /* neutralize problematic inline vertical offsets on logos */
        margin-top: 0 !important;
    }

/* Laptop-specific adjustments: target typical laptop screen widths so banner image and text
   are displayed correctly (vertical centering, no excessive crop). This overrides the
   inline `top:75%` used in the view for desktop-only sizes in the laptop range. */
@media (min-width: 1024px) and (max-width: 1400px) {
    .hero-wrapper {
        /* give slightly larger horizontal breathing room on laptops */
        margin: 0 40px !important;
    }

    .hero-img {
        /* keep a reasonable visible height on laptops and cover the area */
        width: 100% !important;
        height: 520px !important;
        object-fit: cover !important;
        display: block !important;
        opacity: 0.85 !important;
    }

    /* Force the banner caption to be vertically centered over the image on laptops
       and override any inline top values */
    .hero .banner-caption,
    .hero .banner-caption .for-two-ling-title {
        position: absolute !important;
        top: 50% !important;
        left: 50% !important;
        transform: translate(-50%, -50%) !important;
        width: calc(100% - 80px) !important;
        max-width: 1200px !important;
        text-align: center !important;
        padding: 0 18px !important;
        z-index: 5 !important;
        pointer-events: none !important;
    }

    .hero .for-two-ling-title h1 {
        font-size: 2.6rem !important;
        line-height: 1.12 !important;
        white-space: normal !important;
        text-shadow: 2px 2px 8px rgba(0,0,0,0.7) !important;
    }

    .hero .for-two-ling-title p {
        font-size: 1.15rem !important;
        line-height: 1.35 !important;
    }
}
}
/* Target common 1366x768 laptop resolution: slightly larger text (+20%), caption lower and centered */
@media (min-width: 1350px) and (max-width: 1380px) and (min-height: 700px) and (max-height: 800px) {
    .hero-wrapper {
        height: 520px !important; /* keep reasonable visible height for 768px tall screens */
        margin: 0 40px !important;
        overflow: hidden !important;
    }

    .hero-img {
        width: 100% !important;
        height: 520px !important;
        object-fit: cover !important;
        display: block !important;
        opacity: 0.86 !important;
    }

    .hero .banner-caption,
    .hero .banner-caption .for-two-ling-title,
    .container.banner-caption {
        position: absolute !important;
        top: 60% !important; /* move caption lower so it sits visually lower on 1366x768 */
        left: 50% !important;
        transform: translate(-50%, -50%) !important;
        width: calc(100% - 80px) !important;
        max-width: 1100px !important;
        padding: 0 18px !important;
        text-align: center !important;
        z-index: 6 !important;
        pointer-events: none !important;
    }

    .hero .for-two-ling-title {
        width: 100% !important;
        display: block !important;
        text-align: center !important;
    }

    .hero .for-two-ling-title h1 {
        font-size: 3.12rem !important; /* 2.6rem * 1.2 */
        line-height: 1.08 !important;
        white-space: normal !important;
        margin: 0 auto !important;
        text-align: center !important;
    }

    .hero .for-two-ling-title p {
        font-size: 1.38rem !important; /* 1.15rem * 1.2 */
        line-height: 1.35 !important;
    }

    /* Ensure next section doesn't overlap */
    .hero + section {
        margin-top: 20px !important;
    }
}

/* Specific mobile overrides for non-uniform logos */
@media (max-width: 767.98px) {
    /* Palmeras logo appears too large; reduce it on mobile */
    .projects-logos .logo-palmeras {
        max-width: 160% !important; /* adjust this value to taste (default 60%) */
        max-height: 200px !important;
        margin-top: 0 !important; /* neutralize original negative margin */
    }

    /* LK-187 logo needs smaller size on mobile */
    .projects-logos .logo-lk187 {
        max-width: 165% !important; /* adjust this value to taste (default 65%) */
        max-height: 90px !important;
        margin-top: 0 !important;
    }
}

/* Manual vertical adjustments for specific logos on mobile */
@media (max-width: 767.98px) {
    /* move logo-luna up 20px on mobile */
    .projects-logos .logo-luna {
        margin-top: -20px !important; /* move up 20px on mobile */
        transition: margin-top 0.15s ease-in-out;
    }

    /* move logo-estancia up 20px on mobile */
    .projects-logos .logo-estancia {
        margin-top: -20px !important; /* move up 20px on mobile */
        transition: margin-top 0.15s ease-in-out;
    }
}

/* Force vertical shift using transform to avoid being neutralized by other rules */
@media (max-width: 767.98px) {
    .projects-logos .logo-luna,
    .projects-logos .logo-estancia {
        transform: translateY(-20px) !important;
        -webkit-transform: translateY(-20px) !important;
        transition: transform 0.15s ease-in-out !important;
    }
}

/* helper classes: e.g., add .mt-mobile-10 to shift 10px down on mobile */
@media (max-width: 767.98px) {
    .projects-logos .mt-mobile-10 { margin-top: 10px !important; }
    .projects-logos .mt-mobile-20 { margin-top: 20px !important; }
    .projects-logos .mt-mobile--10 { margin-top: -10px !important; }
    .projects-logos .mt-mobile--20 { margin-top: -20px !important; }
}

/* ========== Carousel móvil para DecoInver (moved from inline) ========== */
.mobile-h3-carousel { display: none; }
.hidden-by-carousel { display: none !important; }

@media (max-width: 767.98px) {
    .mobile-h3-carousel { display: block; margin: 0 16px 18px 16px; }
    /* ensure original block can be hidden when carousel active */
    .js-hide-with-carousel { display: block; }
    .mobile-h3-carousel .item h3 { font-size: 1.25rem; color: brown; text-align: center; margin: 12px 0; }
    /* make paragraph visible and readable on mobile (override global white color) */
    .mobile-h3-carousel .item p { color: #31416B !important; font-size: 1rem; line-height: 1.5; margin: 6px 0 0; text-align: justify; }
    .mobile-h3-carousel .item { padding: 12px 8px; background: transparent; }
}

/* Carousel: make same mobile carousel 20% smaller on desktop */
@media (min-width: 768px) {
    /* Limit carousel container to 80% width of its parent and center it */
    #mobileTimelineCarousel {
        max-width: 50% !important;
        margin: 20px auto !important;
    }

    /* Ensure carousel items/images fill container width */
    #mobileTimelineCarousel .item img {
        width: 100% !important;
        height: auto !important;
        display: block !important;
        object-fit: cover !important;
    }
}

/* Estilos para el footer */
.site-footer .footer-top {
}

.site-footer .footer-col {
    padding-right: 20px;
    padding-left: 20px;
}

.site-footer .footer-top .footer-col h5 {
    margin-bottom: 0.8rem;
}

.site-footer .footer-top ul li a {
    font-size: 0.98rem;
}

.site-footer .footer-bottom {
    font-size: 0.95rem;
}

@media (max-width: 767.98px) {
    .site-footer .footer-col {
        padding-left: 10px;
        padding-right: 10px;
    }
}

/* Ajustes específicos para el footer spacing */
@media (min-width: 768px) {
    /* clase añadida en el HTML para empujar la columna hacia la derecha */
    .space-md-gap {
        margin-right: 6rem !important; /* aumentado para más separación entre columnas */
    }

    /* aumentar padding interno de columnas del footer para dar más espacio visual */
    .site-footer .footer-col {
        padding-left: 2.25rem;
        padding-right: 2.25rem;
    }
}


/* Mobile fix: ensure the "Cumanday 1.jpg" image is shown fully on phones without affecting other images */
@media (max-width: 768px) {
    /* Target only the specific image file used in the Palmaras project page */
    .img-aporte[src*="Cumanday 1.jpg"] {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        max-height: none !important;
        display: block !important;
        margin: 12px auto !important;
        object-fit: contain !important; /* keep full image visible */
    }

    /* If the image is inside a fixed-height container, let the image scale to that container without being cropped */
    .img-aporte[src*="Cumanday 1.jpg"] {
        align-self: center !important;
    }
}

/* Mobile fix: reduce height of the specific mobile carousel image "Autoservicio 3.png" so it matches the other slides */
@media (max-width: 768px) {
    /* Prevent carousel overflow from overlapping following content */
    .vjMobileCarousel {
        overflow: hidden !important; /* clip any horizontal overflow instead of using negative margins */
    }

    /* Use transform scaleX to make the image appear wider while keeping it inside the layout (no negative margins) */
    .vjMobileCarousel .item img[src*="Autoservicio 3.png"] {
        height: 320px !important;
        max-height: 320px !important;
        width: 100% !important;        /* keep inside container to avoid layout overlap */
        max-width: 100% !important;
        display: block !important;
        margin: 12px auto !important;  /* center with vertical spacing */
        object-fit: cover !important;   /* fill without changing aspect ratio */
        transform: scaleX(var(--vj-autoservicio-scale, 1.02)) !important; /* adjust width visually */
        transform-origin: center !important;
    }
}

/* Top intro carousel: make images larger on small screens without affecting the bottom timeline carousel */
@media (max-width: 768px) {
    /* expand the carousel container to full width on phones and prevent overflow */
    #introCarousel {
        max-width: 100% !important;
        margin: 8px auto !important;
        margin-top: -20px !important; /* slight upward shift to match design */
        overflow: hidden !important; /* avoid adjacent slides showing */
    }

    /* ensure each carousel item clips its content */
    #introCarousel .item {
        overflow: hidden !important;
    }

    /* make images fill the slide but not overflow the container */
    #introCarousel .item img {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        display: block !important;
        object-fit: cover !important;
        object-position: center center !important;
        margin: 0 auto !important;
        transform: none !important; /* remove extra scaling that caused overlap */
    }

    /* ensure owl stage also hides overflow */
    #introCarousel .owl-stage-outer,
    #introCarousel .owl-stage {
        overflow: hidden !important;
    }
}

/* Mobile accordion fixes: ensure content text is visible on white background and not clipped */
@media (max-width: 767.98px) {
    .acordeon-container2 {
        background: #fff; /* white box */
        color: #31416B;   /* primary text color */
        border: 1px solid #e6e6e6;
        border-radius: 6px;
        overflow: visible; /* allow slide animation */
    }

    .acordeon-container2 .acordeon-titulo2 {
        background: #fff;
        color: brown;
        cursor: pointer;
        padding: 12px 14px;
        font-weight: 700;
        position: relative;
        font-size: 1.5rem !important;
    }

    .acordeon-container2 .acordeon-icono {
        color: #b22222; /* keep the red icon */
        font-weight: 700;
    }

    .acordeon-container2 .acordeon-contenido2 {
        background: #fff;
        color: #31416B !important; /* override global white text */
        padding: 12px 14px;
        line-height: 1.6;
        font-size: 1rem;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }

    .acordeon-container2 .acordeon-contenido2 p,
    .acordeon-container2 .acordeon-contenido2 h4 {
        color: #31416B !important;
        margin: 0 0 0.75rem 0;
    }
}

@media (max-width: 767.98px) {
    /* Ensure accordion open state forces visibility and sits above nearby content */
    .acordeon-container2 {
        position: relative;
        z-index: 60; /* above typical content but below modals */
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
    }

    /* Hide content by default (JS will add .open to reveal and animate) */
    .acordeon-container2 .acordeon-contenido2 {
        display: none !important;
        visibility: hidden !important;
        opacity: 0;
        max-height: 0;
        transition: max-height 0.25s ease, opacity 0.25s ease;
        overflow: hidden;
    }

    /* When open, make it fully visible and allow its height to expand */
    .acordeon-container2.open .acordeon-contenido2 {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        max-height: 2000px !important; /* large enough to show content */
    }

    /* Slight drop shadow to ensure separation over other layers */
    .acordeon-container2.open {
        box-shadow: 0 6px 18px rgba(0,0,0,0.08);
    }
}


/* Ensure the 'Dos instrumentos para un propósito' title is centered on small mobile devices (360px and below) */
@media (max-width: 360px) {
    .dos-instrumentos-title {
        text-align: center !important;
        display: block !important;
        width: auto !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        line-height: 1.15;
        font-size: 1.6rem !important;
        color: brown !important;
    }

    /* Target ONLY the DECO Construcciones heading on the DecoCons page */
    .deco-cons-title {
        margin-top: 4px !important; /* small push down only */
        margin-bottom: 6px !important;
        position: relative !important;
        display: block !important;
        width: auto !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        line-height: 1.15 !important;
        font-size: 1.45rem !important; /* slight reduction to improve fit */
        color: brown !important;
    }

    /* Center and neutralize inline offsets of the summary h1 only on very narrow phones */
    .deco-cons-summary {
        text-align: center !important;
        display: block !important;
        width: auto !important;
        margin-left: 0 !important;   /* override inline negative left */
        margin-right: 0 !important;
        margin-top: 6px !important;  /* small spacing from previous paragraph/image */
        margin-bottom: 8px !important;
        padding: 0 8px !important;   /* small horizontal padding so long text wraps nicely */
        font-size: 1.5rem !important; /* slightly smaller on very narrow screens */
        line-height: 1.25 !important;
        color: brown !important;
    }
}

/* Reduce los tamaños de los h1 en dispositivos móviles */
@media (max-width: 767.98px) {
    /* Ajuste general para h1 dentro de esta vista */
    .hero .for-two-ling-title h1,
    .banner-caption h1,
    main h1 {
        font-size: 1.8rem !important;
        line-height: 1.2 !important;
    }

    /* Ajuste general para h4 dentro de esta vista (móviles) */
    main h4,
    .contenido h4,
    .acordeon-container .acordeon-titulo,
    .acordeon-container .acordeon-contenido h4 {
        font-size: 1.4rem !important;
        line-height: 1.25 !important;
        margin-top: 0.6rem !important;
        margin-bottom: 0.45rem !important;
        font-weight: 700 !important;
        
    }

    /* Si hay h1 más grandes en otras secciones, reducir un poco más */
    main h1.large-mobile {
        font-size: 1.8rem !important;
    }
}

/* Aumenta ligeramente esta imagen solo en pantallas pequeñas (móvil) */
@media (max-width: 767.98px) {
    .dji-0946-mobile {
        max-width: 100% !important;
    }
}


/* Reducir espacio arriba/abajo solo para la imagen Cumanday en dispositivos móviles */
@media (max-width: 767.98px) {
    .cumanday-container {
        margin-top: 20px !important;
        margin-bottom: 20px !important;
        height: auto !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }

        .cumanday-container img {
            max-width: 100% !important;
            height: auto !important;
            display: block;
            margin: 0 auto;
        }
}

/* Mobile adjustment for the autoservicio carousel only: enlarge images without overlapping */
@media (max-width: 767.98px) {
    /* Make the carousel container use full width on small screens */
    #autoservicioCarousel, .autoservicio-carousel {
        max-width: 100% !important;
        width: 100% !important;
        margin: 10px auto !important;
    }

        /* Ensure each item is block-level and uses box-sizing to avoid overflow */
        #autoservicioCarousel .item,
        .autoservicio-carousel .item {
            display: block;
            padding: 0;
            box-sizing: border-box;
        }

            /* Increase image size but keep them centered and prevent overlap */
            #autoservicioCarousel .item img,
            .autoservicio-carousel .item img {
                width: 90% !important;
                max-width: 95% !important;
                height: auto !important;
                display: block !important;
                margin: 0 auto !important;
                position: relative !important;
            }
}

/* ===== Ajustes específicos para móviles muy pequeños (≈360px) =====
   Estos estilos corrigen el layout del `Home/Index` en pantallas angostas
   sin modificar comportamiento en otros tamaños. Se usan reglas con
   !important para sobreescribir estilos inline presentes en la vista.
==================================================================== */
@media (max-width: 380px) {
    /* Corrige la altura del hero (el HTML usa .hero-wrapper) */
    .hero-wrapper {
        height: 360px !important;
        overflow: hidden !important;
    }

    .hero-img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        object-position: center center !important;
        display: block !important;
    }

    /* Reposicionar y reducir tamaños del texto del banner para que no se solape */
    .container.banner-caption {
        top: 60% !important; /* override del inline style top:75% */
        left: 8px !important;
        right: 8px !important;
        padding: 6px !important;
    }

    .banner-caption .for-two-ling-title {
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 !important;
    }

    .banner-caption h1 {
        font-size: 1.6rem !important;
        line-height: 1.15 !important;
        text-shadow: 1px 1px 6px rgba(0,0,0,0.45) !important;
        margin: 0 !important;
    }

    .banner-caption p {
        font-size: 0.95rem !important;
        line-height: 1.25 !important;
        text-shadow: none !important;
        margin: 0 !important;
    }

    /* Anula los márgenes inline del segundo <section> para que el contenido no se salga */
    .hero + section {
        margin-left: 0 !important;
        margin-right: 0 !important;
        margin-top: -30px !important; /* menos negativo para no empujar tanto */
        padding-left: 10px !important;
        padding-right: 10px !important;
    }

    /* Asegura que el título de sección no sea demasiado grande */
    .qs-section-title,
    .vj-title {
        font-size: 1.5rem !important;
        margin-left: 8px !important;
        margin-right: 8px !important;
    }

    /* Evitar que logos o imágenes empujen el layout en pantallas muy angostas */
    .main-logo img,
    .logo-foundation,
    .logo-vertical {
        max-width: 65% !important;
        height: auto !important;
    }

    /* Carrusel / captions: asegurar ancho y legibilidad */
    .carousel-caption.position-static.bg-white {
        width: calc(100% - 20px) !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding: 10px !important;
        box-sizing: border-box !important;
    }

    /* Ajustes puntuales para párrafos largos dentro del contenido principal */
    section p {
        font-size: 18px !important;
        line-height: 22px !important;
    }

    /* ===== Ajuste: aumentar logo un 50% (solo pantallas muy pequeñas) ===== */
    header .navbar-brand,
    header.fixed-header .navbar-brand {
        width: 275px !important; /* 90px * 1.5 = 135px */
        max-width: 275px !important;
        display: inline-block !important;
    }

    header .navbar-brand img,
    header.fixed-header .navbar-brand img {
        max-width: 275px !important;
        width: 100% !important;
        height: auto !important;
        display: block !important;
    }
}


/* ===== Ajustes muy pequeños: pantallas <= 380px ===== */
@media (max-width: 380px) {
    /* Reduce altura del contenedor del hero para evitar solapamientos */
    .hero-wrapper {
        height: 220px !important;
        max-height: 220px !important;
        margin: 0 6px !important;
        /* permitir que la imagen se desborde a los lados */
        overflow: visible !important;
    }

    /* Hacer la imagen más ancha que el contenedor y centrarla
       para que 'crezca' por los lados en móviles muy angostos */
    .hero-img {
        width: 120% !important; /* 20% más ancha */
        max-width: none !important;
        height: 220px !important;
        max-height: 220px !important;
        object-fit: cover !important;
        object-position: center top !important;
        display: block !important;
        opacity: 0.95 !important;
        margin-left: -10% !important; /* centrar el desborde */
        margin-right: -10% !important;
        opacity: 0.6 !important;
    }

    /* Colocar la caption sobre la imagen y reducir tipografía para que no se superponga */
    .hero .banner-caption,
    .banner-caption {
        position: absolute !important;
        top: 50% !important;
        left: 8px !important;
        right: 8px !important;
        transform: translateY(-50%) !important;
        width: calc(100% - 16px) !important;
        max-width: calc(100% - 16px) !important;
        padding: 4px 6px !important;
        box-sizing: border-box !important;
        text-align: center !important;
        z-index: 10 !important;
        pointer-events: none !important;
    }

    .hero .for-two-ling-title,
    .banner-caption .for-two-ling-title {
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 !important;
    }

    /* Texto más pequeño para evitar solapamientos */
    .hero .for-two-ling-title h1,
    .banner-caption h1 {
        font-size: 0.95rem !important; /* aún más pequeño */
        line-height: 1.12 !important;
        color: midnightblue !important;
        margin: 0 !important;
        padding: 0 !important;
        white-space: normal !important;
        word-break: break-word !important;
        text-shadow: 0 2px 6px rgba(0,0,0,0.45) !important;
    }

    .hero .for-two-ling-title p,
    .banner-caption p {
        font-size: 0.72rem !important; /* párrafos más pequeños */
        line-height: 1.1 !important;
        margin: 0 !important;
        padding: 0 !important;
        color: midnightblue !important;
        text-shadow: 0 1px 4px rgba(0,0,0,0.35) !important;
    }

    /* Evitar que el siguiente section suba demasiado */
    .hero + section {
        margin-top: -12px !important;
        padding-left: 8px !important;
        padding-right: 8px !important;
    }

    /* Mantener logo en un tamaño razonable (coincide con cambios previos) */
    header .navbar-brand img,
    header.fixed-header .navbar-brand img {
        max-width: 135px !important;
        width: 100% !important;
        height: auto !important;
        display: block !important;
    }
}

@media (max-width: 380px) {
    /* Corrige la altura del hero */
    .hero-wrapper {
        height: 220px !important;
        max-height: 220px !important;
        margin: 0 6px !important;
        overflow: visible !important;
    }

    /* Imagen más ancha que el contenedor */
    .hero-img {
        width: 120% !important;
        max-width: none !important;
        height: 220px !important;
        max-height: 220px !important;
        object-fit: cover !important;
        object-position: center top !important;
        display: block !important;
        opacity: 0.95 !important;
        margin-left: -10% !important;
        margin-right: -10% !important;
        opacity: 0.6 !important;
    }

    /* Caption sobre la imagen */
    .hero .banner-caption,
    .banner-caption {
        position: absolute !important;
        top: 50% !important;
        left: 8px !important;
        right: 8px !important;
        transform: translateY(-50%) !important;
        width: calc(100% - 16px) !important;
        max-width: calc(100% - 16px) !important;
        padding: 4px 6px !important;
        box-sizing: border-box !important;
        text-align: center !important;
        z-index: 10 !important;
        pointer-events: none !important;
    }

    .hero .for-two-ling-title,
    .banner-caption .for-two-ling-title {
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 !important;
        display: inline-block !important; /* allow background to wrap content */
    }

    /* Reduce aún más el texto y añade fondo semitransparente para legibilidad */
    .hero .for-two-ling-title h1,
    .banner-caption h1 {
        font-size: 0.85rem !important; /* más pequeño para pantallas muy angostas */
        line-height: 1.08 !important;
        color: #072143 !important; /* color oscuro para contraste */
        margin: 0 !important;
        padding: 6px 8px !important;
        white-space: normal !important;
        word-break: break-word !important;
        text-shadow: none !important;
        
        border-radius: 6px !important;
        display: inline-block !important;
    }

    .hero .for-two-ling-title p,
    .banner-caption p {
        font-size: 0.68rem !important; /* párrafos más pequeños */
        line-height: 1.1 !important;
        margin: 6px 0 0 0 !important;
        padding: 4px 8px !important;
        color: #072143 !important;
        text-shadow: none !important;
        
        border-radius: 6px !important;
        display: inline-block !important;
    }

    /* Evitar que el siguiente section suba demasiado */
    .hero + section {
        margin-top: -12px !important;
        padding-left: 8px !important;
        padding-right: 8px !important;
    }

    /* Mantener logo en tamaño razonable */
    header .navbar-brand img,
    header.fixed-header .navbar-brand img {
        max-width: 135px !important;
        width: 100% !important;
        height: auto !important;
        display: block !important;
    }
}

/* Aumento específico del logo SOLO para móviles ~360px (no tocar otros breakpoints) */
@media (min-width: 320px) and (max-width: 380px) {
    /* Aplica únicamente al logo dentro del header */
    header .navbar-brand img,
    header.fixed-header .navbar-brand img {
        width: 160px !important; /* nuevo tamaño para dispositivos ~360px */
        max-width: 160px !important;
        height: auto !important;
        display: block !important;
    }

    /* permitir que el contenedor del brand se ajuste */
    header .navbar-brand,
    header.fixed-header .navbar-brand {
        width: auto !important;
        max-width: none !important;
    }
}

/* Small-targeted tweaks for very narrow phones (~320–380px) to remove extra gap below the hero */
@media (min-width: 320px) and (max-width: 380px) {
    /* Remove large margins/padding that created the white gap and shorten hero height */
    .hero {
        margin: 0 !important;
        padding: 0 !important;
        height: auto !important;
    }

    .hero-wrapper {
        height: 180px !important; /* smaller hero to avoid pushing content down */
        max-height: 180px !important;
        margin: 0 6px !important;
        overflow: hidden !important;
    }

    .hero-img {
        height: 180px !important;
        max-height: 180px !important;
        width: 120% !important; /* keep the same visual crop used elsewhere */
        margin-left: -10% !important;
        margin-right: -10% !important;
        object-fit: cover !important;
    }

    /* Pull the following section up so it sits closer to the image */
    .hero + section {
        margin-top: -40px !important;
        padding-left: 8px !important;
        padding-right: 8px !important;
    }

    /* Ensure the banner caption remains visible above the image */
    .hero .banner-caption {
        top: 50% !important;
        transform: translateY(-50%) !important;
    }
}

/* Increase hero height and make caption text smaller with semi-transparent background for readability on very small phones (320-380px) */
@media (min-width: 320px) and (max-width: 380px) {
    /* Increase hero height so caption fits and remains readable */
    .hero-wrapper {
        height: 240px !important;
        max-height: 240px !important;
    }

    .hero-img {
        height: 240px !important;
        max-height: 240px !important;
    }

    /* Make caption text smaller and add a subtle semi-transparent background for contrast */
    .hero .banner-caption,
    .banner-caption {
        
        padding: 6px 8px !important;
        border-radius: 6px !important;
        color: #072143 !important;
        z-index: 12 !important;
    }

    .hero .banner-caption h1,
    .banner-caption h1 {
        font-size: 0.95rem !important;
        line-height: 1.05 !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .hero .banner-caption p,
    .banner-caption p {
        font-size: 0.72rem !important;
        line-height: 1.1 !important;
        margin: 4px 0 0 0 !important;
        padding: 0 !important;
    }
}

/* Ensure header logo does not shrink on scroll for very small phones (~320–380px) */
@media (min-width: 320px) and (max-width: 380px) {
    /* Common classes added/used by JS when header becomes fixed or scrolled */
    header.fixed-header .navbar-brand img,
    header.fixed-header .navbar-brand,
    header.fixed .navbar-brand img,
    header.sticky .navbar-brand img,
    .navbar.fixed-top .navbar-brand img,
    .scrolled .navbar-brand img {
        width: 160px !important;     /* same size as initial view */
        max-width: 160px !important;
        height: auto !important;
        transition: none !important; /* prevent animated shrink */
    }

    /* If the script alters the container size, keep the container big as well */
    header.fixed-header .navbar-brand,
    header.fixed .navbar-brand,
    header.sticky .navbar-brand,
    .navbar.fixed-top .navbar-brand {
        width: auto !important;
        max-width: none !important;
    }
}

/* Mobile tweaks: fix Palmeras and LK-187 logos only for very narrow phones (~360px)
   Do not change other logos or breakpoints. */
@media (min-width: 320px) and (max-width: 360px) {
    .projects-logos .logo-palmeras {
        max-width: 130% !important; /* reduce oversized Palmeras on narrow phones */
        max-height: 200px !important; /* cap height to avoid overflow */
        margin-top: 0 !important; /* neutralize previous negative/positive offsets */
        display: block !important;
        margin-left: auto !important;
        margin-right: auto !important;
        object-fit: contain !important;
    }

    .projects-logos .logo-lk187 {
        max-width: 120% !important; /* same scale as Palmeras for visual balance */
        max-height: 150px !important;
        margin-top: 0 !important; /* remove large top offset */
        display: block !important;
        margin-left: auto !important;
        margin-right: auto !important;
        object-fit: contain !important;
        transform: none !important; /* cancel any transforms applied elsewhere */
    }
}

/* Ensure wrapper pushes content below the fixed header on very narrow phones */
@media (min-width: 320px) and (max-width: 360px) {
    .vj-wrapper {
        padding-top: 100px !important; /* room for header + some breathing space */
        box-sizing: border-box !important;
    }

    /* Reset previous sticky/positioning so the title participates in flow and is visible */
    .vj-title {
        position: static !important;
        top: auto !important;
        margin-top: 8px !important;
        z-index: 1 !important;
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
}

/* Center the "Características del proyecto" title ONLY on very narrow phones (~360px)
   and only for the Villa Javier page. This will not affect other breakpoints or pages. */
@media (min-width: 352px) and (max-width: 368px) {
    .pj-villajavier .acordeon-container .acordeon-titulo {
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        text-align: center !important;
        width: 100% !important;
        box-sizing: border-box !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    /* keep the chevron/icon visually aligned when centered */
    .pj-villajavier .acordeon-container .acordeon-titulo .acordeon-icono {
        margin-left: 8px !important;
        position: relative !important;
        left: auto !important;
        transform: none !important;
    }

    .pj-juanbosco .acordeon-container .acordeon-titulo {
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        text-align: center !important;
        width: 100% !important;
        box-sizing: border-box !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

        /* keep the chevron/icon visually aligned when centered */
        .pj-juanbosco .acordeon-container .acordeon-titulo .acordeon-icono {
            margin-left: 8px !important;
            position: relative !important;
            left: auto !important;
            transform: none !important;
        }

}
/* Center and resize the main project title on JuanBosco page only for very narrow phones (~360px).
   This rule targets .pj-juanbosco and will not affect other pages or breakpoints. */
@media (min-width: 352px) and (max-width: 368px) {
    .pj-juanbosco .vj-title {
        display: block !important;
        text-align: center !important;
        font-size: 1.45rem !important; /* slightly smaller to ensure it fits */
        line-height: 1.2 !important;
        margin-top: 6px !important; /* small visible gap */
        margin-bottom: 10px !important;
        padding: 0 12px !important;
        width: calc(100% - 24px) !important;
        box-sizing: border-box !important;
        position: relative !important; /* normal flow but above header due to padding */
        z-index: 2 !important;
        white-space: normal !important;
        word-break: break-word !important;
    }
}

/* Further tweak for JuanBosco title visibility on very narrow phones (~360px) */
@media (min-width: 350px) and (max-width: 370px) {
    /* Ensure the page content is pushed below the fixed header so the title is not covered */
    .pj-juanbosco main > div {
        padding-top: 100px !important; /* room for header */
        box-sizing: border-box !important;
    }

    .pj-juanbosco .vj-title {
        display: block !important;
        text-align: center !important;
        font-size: 1.8rem !important; /* slightly smaller to ensure it fits */
        line-height: 1.2 !important;
        margin-top: 20px !important; /* small visible gap */
        margin-bottom: 10px !important;
        padding: 0 12px !important;
        width: calc(100% - 24px) !important;
        box-sizing: border-box !important;
        position: relative !important; /* normal flow but above header due to padding */
        z-index: 2 !important;
        white-space: normal !important;
        word-break: break-word !important;
    }

    .pj-lunachia main > div {
        padding-top: 100px !important; /* room for header */
        box-sizing: border-box !important;
    }

    .pj-lunachia .vj-title {
        display: block !important;
        text-align: center !important;
        font-size: 1.8rem !important; /* slightly smaller to ensure it fits */
        line-height: 1.2 !important;
        margin-top: 50px !important; /* small visible gap */
        margin-bottom: 10px !important;
        padding: 0 12px !important;
        width: calc(100% - 24px) !important;
        box-sizing: border-box !important;
        position: relative !important; /* normal flow but above header due to padding */
        z-index: 2 !important;
        white-space: normal !important;
        word-break: break-word !important;
    }
}