/*! Paste your custom styles here */


img{
    aspect-ratio: attr(width) / attr(height);
}

.bg-pattern,
.bg-pattern.angle:before {
    background: #121111;
    border-top: 2px solid #fe5900;
    border-bottom: 0px solid;
}

.white {
    color: #fff !important;
}

.color {
    color: #fe5900 !important;
}

.logo {
    max-height: 50px !important;
}

.dark {
    color: #131313;
}

.text-justify {
    text-align: justify !important;
}

.invest-description {
    font-size: 1.1rem;
    line-height: 1.8;
    color: #1a1a1a;
    font-weight: 100;
}

.w-50 {
    width: 50% !important;
}

.w-75 {
    width: 75% !important;
}

.w-100 {
    width: 100% !important;
}

b,
strong,
ol b,
ul b,
ol strong,
ul strong {
    font-weight: 700 !important;
    color: black;
}

.invest-testimonial-1__text {
    font-size: 1.5rem;
}

.invest-list-dot {
    list-style-type: disc;
}



.pr-0 {
    padding-right: 0;
}

.pr-8 {
    padding-right: 8px;
}

.pr-16 {
    padding-right: 16px;
}

.pr-24 {
    padding-right: 24px;
}

.pr-32 {
    padding-right: 32px;
}

.pr-40 {
    padding-right: 40px;
}

.pr-48 {
    padding-right: 48px;
}

.pr-56 {
    padding-right: 56px;
}

.pr-64 {
    padding-right: 64px;
}

.pr-72 {
    padding-right: 72px;
}

.pr-80 {
    padding-right: 80px;
}

.pr-96 {
    padding-right: 96px;
}



.pl-0 {
    padding-left: 0;
}

.pl-8 {
    padding-left: 8px;
}

.pl-16 {
    padding-left: 16px;
}

.pl-24 {
    padding-left: 24px;
}

.pl-32 {
    padding-left: 32px;
}

.pl-40 {
    padding-left: 40px;
}

.pl-48 {
    padding-left: 48px;
}

.pl-56 {
    padding-left: 56px;
}

.pl-64 {
    padding-left: 64px;
}

.pl-72 {
    padding-left: 72px;
}

.pl-80 {
    padding-left: 80px;
}

.pl-96 {
    padding-left: 96px;
}

.project-section h1,
h3 {
    color: white;
}

.project-section .social {
    display: inline-block !important;
}

.project-section .scroll-down span {
    color: #fe5900;
    font-size: 1rem;
}

.project-section .scroll-down {
    width: 65px !important;
}

.project-section h1 {
    font-size: 100px;
}

.project-section .title-type {
    color: #fff;
    font-size: 20px;
}

.project-section .title-place {
    color: #fff;
    font-size: 20px;
}

.project__title a {
    color: #fe5900 !important;
}

.intro_text {
    max-width: 1133px;
    margin: 0 auto;
    color: #fff;
    /* Fluid, replacing 1.5rem plus overrides at 992/768/480 that stepped it between 24px and
       16px. 24px was oversized for a paragraph running three lines. */
    font-size: clamp(1rem, 1.5vw, 1.15rem);
    line-height: 1.7;
}

/* Scoped: h2 is 3rem site-wide and .section-title is shared with four other sections, so this
   only shrinks the intro heading. Same max-width as the paragraph below it so both share a
   left edge instead of the heading running wider. */
#intro .section-title {
    max-width: 1133px;
    margin-left: auto;
    margin-right: auto;
    font-size: clamp(1.5rem, 3.2vw, 2.3rem);
    line-height: 1.25;
    margin-bottom: 1.5rem;
}

/* Style for the overlay */
.overlay {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent black background */
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 1;
    transition: opacity 0.25s ease;
}

/* Style for the text inside the overlay */
.overlay-text {
    color: white;
    transition: opacity 0.25s ease;
    padding: 10px 20px;
    border-left: 3px solid #fe5900;
    font-weight: 400;
}

.project__img-holder {
    width: 100%; /* Sets the width to 100% of its parent */
    height: 500px; /* Fixed height, adjust as necessary */
    position: relative; /* Needed for absolute positioning of children */
    overflow: hidden; /* Ensures images larger than the holder are clipped */
}

.project__img {
    width: 100%; /* Makes the image fill the width */
    height: 100%; /* Makes the image fill the height */
    object-fit: cover; /* Ensures the image covers the area, may crop the image */
    transition: transform 0.3s ease-out; /* For a zoom effect on hover */
}

.project-filter a {
    font-size: 1em !important; /* Even smaller text on very small screens */
}

@media only screen and (min-width: 992px) {
    .section-testimonials--large-padding {
        padding: 100px 0 150px !important;
    }
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .overlay-text {
        font-size: 1em; /* Smaller text on smaller screens */
        text-align: center;
    }

    .project-filter a {
        font-size: 0.8em !important; /* Even smaller text on very small screens */
    }

    .project__img-holder {
        height: 200px;
    }
}

@media (max-width: 480px) {
    .overlay-text {
        font-size: 0.75em; /* Even smaller text on very small screens */
        text-align: center;
    }

    .project-filter a {
        font-size: 0.75em !important; /* Even smaller text on very small screens */
    }

    .project__img-holder {
        height: 200px;
    }

    .title-inicio{
        font-size: 30px !important;
    }

    .title-inicio-2 {
        font-size: 30px !important;
    }

    .hero-text-stroke {
        -webkit-text-stroke: 1px #fff !important;
    }

    .testimonial {
        position: relative;
        display: block;
    }

    .testimonial__img {
        margin-left: 10px;
    }

    .testimonial__body {
        padding-left: 10px;
    }

    /* text-align: justify !important lived here and, because text-align inherits, it reached
       every element without an alignment of its own -- including headings. A three-word title
       got stretched edge to edge ("Beneficios   Fiscales   (Ley 18.795)"), and body copy grew
       the same gaps: justification needs hyphenation and column width to work, and a 480px
       screen has neither.
       Removed rather than overridden per element. Setting headings to `left` would have
       fought the centred section titles in _works and _testimonial, which get their centring
       from a .text-center ancestor and would lose it to a direct declaration. Dropping the
       inherited value leaves every block with whatever alignment it actually declares. */
    body {
        font-size: 1rem;
    }

    .section-description {
        font-size: 1.2rem;
        line-height: 1.2;
    }

    /* Nothing stays justified on a phone. Justification distributes the slack across word
       spaces, and with a ~40 character line and no hyphenation that slack lands as gaps wide
       enough to read as a layout bug -- "Proyectos        estrategicamente ubicados en...".
       Desktop keeps whatever each block chose; this only overrides at 480px and below.
       !important is here to beat .text-justify, which carries its own. */
    .section-description,
    .hero-description,
    .invest-description,
    .text-justify {
        text-align: left !important;
    }

    .invest-testimonial-1__text {
        font-size: 1.2rem;
    }

    .entry__title {
        font-size: 1.2rem;
    }

    h1{
        font-size: 2.1rem !important;
    }

    .page-title__subtitle {
        font-size: 1.2rem;
    }
}

@media only screen and (min-width: 992px) {

    .results {
        min-height: 280px;
    }
}

@media only screen and (min-width: 992px) {
    .footer {
        position: unset !important;
        width: 100%;
    }
}

.section {
    text-align: center;
    padding: 2rem;
}

.contact-section {
    text-align: center;
    padding: 2rem;
}

.contact-info {
    display: flex;
    justify-content: space-around;
    margin-bottom: 2rem;
}

.address iframe {
    width: 100%;
    height: 300px;
    border: none;
    margin-top: 1rem;
    margin-bottom: 1rem;
}

.contact-section .wrapper {
    width: 75%;
    padding-top: 2rem;
}

.results__counter {
    font-size: 3.5rem !important;
}

.contact-form-modal__close {
    top: 17px;
    z-index: 2;
}

figcaption {
    font-size: 1.4rem;
}

.display-inline{
    display:inline !important;
}

.float {
    position: fixed;
    width: 60px;
    height: 60px;
    bottom: 40px;
    left: 16px;
    background-color: #25d366;
    color: #FFF;
    border-radius: 50px;
    text-align: center;
    font-size: 30px;
    box-shadow: 2px 2px 3px #999;
    z-index: 100;
}

.my-float {
    margin-top: 16px;
}

#back-to-top {
    right: 29px !important;
}

#back-to-top.show {
    bottom: 110px !important;
}

.video-background {
    background: #000;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: -99;
}

    .video-foreground,
    .video-background iframe {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        pointer-events: none;
    }

.overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5); /* Adjust opacity here */
}

.download-contact-form-container {
    max-width: 800px;
    border: 1px solid #fe5900;
    padding: 26px;
}

.download-contact-form input, .download-contact-form textarea {
    background-color: #f6f6f60f !important;
    color: white !important;
}

.download-contact-form input:focus, .download-contact-form textarea:focus {
    border-color: #fe5900;
    background-color: #1a1a1a;
    outline: none;
    box-shadow: none;
}

.download-contact-form label {
    color: hsla(0,0%,100%,.5);
}

.hero-section {
    position: relative;
    width: 100%;
    height: 100vh;
    overflow: hidden;
    padding: 15px !important;
}

.hero-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.68);
}

.hero-content {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: white;
    text-align: center;
    padding: 2rem;
}

.hero-title {
    font-size: 3rem;
    margin-bottom: 1rem;
    color: #ffff;
}

.hero-description {
    font-size: 1.1rem;
    margin-bottom: 2rem;
    max-width: 800px;
    color: #ffff;
    text-align: justify;
}

.hero-description strong,
.hero-description sup strong {
    color: #ffff;
}

.hero-actions {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.socials {
    margin-bottom: 1rem;
}

.social-link {
    color: white;
    font-size: 1rem;
    margin: 0 0.5rem;
    text-decoration: none;
}

.scroll-down {
    color: white;
    text-decoration: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    bottom: 50px !important;
}

.scroll-down span {
    font-size: 1rem !important;
    color: #fe5900 !important;
}

#custom-slider {
    position: relative;
    width: 100%;
    height: 100vh;
    overflow: hidden;
    z-index: -1000;
}

    #custom-slider .slide {
        position: absolute;
        width: 100%;
        height: 100%;
        background-size: cover;
        background-position: center;
        opacity: 0;
        transition: opacity 1s ease-in-out;
        z-index: 0;
    }

        #custom-slider .slide.active {
            opacity: 1;
            z-index: 1;
        }

    #custom-slider .overlay {
        position: absolute;
        width: 100%;
        height: 100%;
        background: rgba(0,0,0,0.4); /* Opacidad .40 */
        top: 0;
        left: 0;
        z-index: 1;
    }

    #custom-slider .slide-content {
        top: 50%;
        transform: translate(0%, -50%);
        z-index: 2;
        text-align: center;
    }

    #custom-slider .btn {
        padding: 15px 30px;
        font-size: 18px;
        background-color: #f26f21;
        color: white;
        border: none;
        border-radius: 3px;
        cursor: pointer;
        text-decoration: none;
    }

        #custom-slider .btn:hover {
            background-color: #d45e18;
        }

@media (max-width: 768px) {
    #custom-slider .slide-content {
        transform: translate(0%, 100%);
    }
    #custom-slider .slide-content {
         top: -5%;
    }
}

#custom-slider {
    position: relative;
    overflow: hidden;
}

.slide {
    opacity: 0;
    transition: opacity 1.5s ease-in-out;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

    .slide.active {
        opacity: 1;
        position: relative;
    }

.overlay {
    background: linear-gradient(135deg, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0.3) 100%);
}

.slide-content {
    position: relative;
    z-index: 2;
    max-width: 900px;
    text-align: center;
    margin: 0 auto;
    padding: 0 20px;
}

/* Hero Title
   Fluid rather than stepped: this replaced fixed sizes at 992/768/576, which jumped between
   sizes and still left the longest headline filling four lines on a laptop. The clamp scales
   it continuously, and the ceiling is well below the old 4.2rem so the headline stops
   crowding out the button under it. .slide-content already caps the line length at 900px. */
.hero-main-title {
    font-size: clamp(1.9rem, 5.2vw, 3.4rem);
    font-weight: 700;
    color: white;
    /* Was 1.2rem with a subtitle underneath carrying the rest of the gap. The subtitle is
       gone, so the title owns the space down to the button. */
    margin-bottom: clamp(1.6rem, 4vw, 2.6rem);
    line-height: 1.15;
    text-shadow: 0 4px 30px rgba(0,0,0,0.5);
    animation: titleSlide 0.8s ease-out;
}

.hero-subtitle {
    /* Fluid like the title above it. Carries the campaign line now, which runs longer than
       the claim, so it needs to shrink on narrow viewports rather than wrap to four lines. */
    font-size: clamp(0.95rem, 1.6vw, 1.2rem);
    color: rgb(255 255 255 / 92%);
    max-width: 46ch;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: clamp(1.8rem, 4vw, 2.8rem);
    letter-spacing: 1.3px;
    line-height: 1.5;
    animation: subtitleSlide 0.8s ease-out 0.2s both;
    background-color: #06060652;
    border-radius: 13px;
    padding: 7px 14px;
}

/* Hero Buttons Container */
.hero-buttons {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    justify-content: center;
    animation: buttonsSlide 0.8s ease-out 0.4s both;
}

/* Primary Button */
.btn-primary-hero {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 20px 38px;
    font-size: 1.1rem;
    font-weight: 600;
    text-decoration: none;
    border-radius: 12px;
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    background: linear-gradient(135deg, #ff8c42 0%, #ff7028 100%);
    color: white;
    box-shadow: 0 12px 35px rgba(255, 140, 66, 0.35);
    border: none;
    position: relative;
    overflow: hidden;
}

    .btn-primary-hero::before {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
        transition: left 0.5s;
    }

    .btn-primary-hero:hover::before {
        left: 100%;
    }

    .btn-primary-hero:hover {
        transform: translateY(-3px);
        box-shadow: 0 16px 45px rgba(255, 140, 66, 0.45);
        color: white;
    }

    .btn-primary-hero svg {
        transition: transform 0.3s ease;
        flex-shrink: 0;
    }

    .btn-primary-hero:hover svg {
        transform: scale(1.1);
    }

/* Secondary Button
   Filled, not a ghost button. It used to be a translucent white panel over the hero photo,
   which left it competing with whatever was behind it -- the brand orange was only applied on
   hover. Swapping the two makes the call to action readable against any slide. Colours are the
   ones already in use on the site (#fe5900 brand orange, #e04e00 its darker press state), not
   a new palette. */
.btn-secondary-hero {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 20px 36px;
    font-size: 1.1rem;
    font-weight: 600;
    text-decoration: none;
    border-radius: 12px;
    transition: all 0.35s ease;
    background: #fe5900;
    color: white;
    border: 2px solid #fe5900;
}

    .btn-secondary-hero:hover {
        background: #e04e00;
        border-color: #e04e00;
        transform: translateY(-2px);
        color: white;
    }

    .btn-secondary-hero svg {
        transition: transform 0.3s ease;
    }

    .btn-secondary-hero:hover svg {
        transform: translate(3px, -3px);
    }

/* Animations */
@keyframes titleSlide {
    from {
        opacity: 0;
        transform: translateY(-30px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes subtitleSlide {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes buttonsSlide {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Responsive Design */
@media (max-width: 768px) {
    .hero-buttons {
        flex-direction: column;
        width: 100%;
    }

    .btn-primary-hero,
    .btn-secondary-hero {
        width: 100%;
        justify-content: center;
        padding: 18px 32px;
        font-size: 1.05rem;
    }
}

@media (max-width: 576px) {
    .btn-primary-hero,
    .btn-secondary-hero {
        padding: 16px 28px;
        font-size: 1rem;
    }
}

.cookie-banner {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1500;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 16px 24px;
    background-color: #131313;
    color: #fff;
    box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.25);
}

.cookie-banner__text {
    margin: 0;
    font-size: 0.875rem;
    line-height: 1.5;
    max-width: 900px;
}

.cookie-banner__accept {
    flex-shrink: 0;
    padding: 10px 24px;
    background-color: #FE5900;
    color: #fff;
    border: none;
    font-weight: 600;
    font-size: 0.875rem;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.cookie-banner__accept:hover {
    background-color: #e04e00;
}

@media (max-width: 600px) {
    .cookie-banner {
        flex-direction: column;
        align-items: stretch;
        text-align: center;
    }
    .cookie-banner__accept {
        width: 100%;
    }
}

/* Posventa block in the footer contact column. The icon is decorative and inherits the
   label's colour and size, so it only needs separating from the text. */
.widget-posventa__icon {
    margin-right: 8px;
}

/* Projects carousel before Flickity has run.
   scripts.min.js is 399 KB and carries Flickity, so on a slow connection there is a real
   window where the slides are still plain block divs at 40% width -- they stack vertically and
   the home page renders about 16,000px tall, which reads as a broken layout rather than a
   loading one. Laying them in a single unwrapped row and clipping the overflow makes that
   window look like the carousel that is about to appear.
   Flickity adds .flickity-enabled to the container when it initialises, at which point this
   stops applying and its own positioning takes over. */
.projects-slider:not(.flickity-enabled) {
    display: flex;
    flex-wrap: nowrap;
    overflow: hidden;
}

    .projects-slider:not(.flickity-enabled) > .flickity-slide {
        flex: 0 0 auto;
    }

/* Testimonial headline.
   The quotes are split into a bold headline and the quote body, and custom.css sets
   `strong { color: black }` globally -- which turned the headline black on a dark photo
   background while the body around it stayed white. Brand orange rather than white so the
   headline reads as a separate tier from the body instead of blending into it.
   Only font-weight carries !important on the global rule, so plain specificity wins here. */
.testimonial__text strong {
    color: #fe5900;
}