/* Ajustes compartidos para las vistas de app/Views/servicios. */

/* Los títulos con gradiente necesitan espacio de pintura para letras como g, p, y. */
.commercial-title,
.commercial-solutions-title,
.commercial-uses-title,
.commercial-showcase-title,
.construction-title,
.construction-operations-title,
.construction-showcase-title,
.industrial-title,
.industrial-operations-title,
.industrial-showcase-title,
.projects-title,
.projects-process-title,
.projects-video-title,
.contact-hero-title,
.contact-form-title,
.rent-title,
.rent-use-title,
.rent-evidence-title,
.containers-hero .section-title {
    line-height: 1.08;
    padding-bottom: .12em;
    overflow: visible;
}

.commercial-title span,
.commercial-solutions-title span,
.commercial-uses-title span,
.commercial-showcase-title span,
.construction-title span,
.construction-operations-title span,
.construction-showcase-title span,
.industrial-title span,
.industrial-operations-title span,
.industrial-showcase-title span,
.projects-title span,
.projects-process-title span,
.projects-video-title span,
.contact-hero-title span,
.contact-form-title span,
.containers-hero .section-title span {
    padding-bottom: .12em;
}

.rent-title span {
    display: block;
}

.rent-title-line {
    color: #fff;
}

.rent-title-accent {
    color: #f59e0b;
}

/* En tablet horizontal y portátil pequeño, dos columnas no dan ancho suficiente. */
@media (min-width: 992px) and (max-width: 1199.98px) {
    .commercial-hero .row > .col-lg-7,
    .commercial-hero .row > .col-lg-5,
    .construction-hero .row > .col-lg-7,
    .construction-hero .row > .col-lg-5,
    .industrial-hero .row > .col-lg-7,
    .industrial-hero .row > .col-lg-5,
    .rent-hero-section .row > .col-lg-7,
    .rent-hero-section .row > .col-lg-5,
    .rent-use-section .row > .col-lg-7,
    .rent-use-section .row > .col-lg-5,
    .contact-hero-section .row > [class*="col-lg-"] {
        flex: 0 0 100%;
        width: 100%;
        max-width: 100%;
    }

    .commercial-title,
    .construction-title,
    .industrial-title,
    .rent-title,
    .contact-hero-title {
        max-width: 760px;
        font-size: clamp(3rem, 6vw, 4.25rem);
        line-height: 1.1;
    }

    .commercial-image,
    .construction-image,
    .industrial-image,
    .rent-image,
    .rent-use-image {
        height: clamp(400px, 55vw, 560px);
    }
}

@media (min-width: 1200px) and (max-width: 1399.98px) {
    .commercial-title,
    .construction-title,
    .industrial-title,
    .rent-title,
    .contact-hero-title {
        font-size: clamp(3rem, 4.6vw, 4rem);
        line-height: 1.08;
    }
}

@media (max-width: 991.98px) {
    .commercial-title,
    .commercial-solutions-title,
    .commercial-uses-title,
    .commercial-showcase-title,
    .commercial-video-header h3,
    .construction-title,
    .construction-operations-title,
    .construction-showcase-title,
    .construction-video-header h3,
    .industrial-title,
    .industrial-operations-title,
    .industrial-showcase-title,
    .industrial-video-header h3,
    .projects-title,
    .projects-process-title,
    .projects-video-title,
    .contact-hero-title,
    .contact-form-title,
    .rent-title,
    .rent-use-title,
    .rent-evidence-title,
    .containers-hero .section-title {
        width: 100%;
        max-width: 100%;
        font-size: clamp(2.35rem, 7vw, 3.5rem);
        line-height: 1.1;
        letter-spacing: -.035em;
        overflow-wrap: break-word;
        hyphens: auto;
        text-wrap: balance;
    }

    .commercial-solutions-header,
    .commercial-uses-header,
    .commercial-showcase-header,
    .commercial-video-header,
    .construction-operations-header,
    .construction-showcase-header,
    .construction-video-header,
    .industrial-operations-header,
    .industrial-showcase-header,
    .industrial-video-header,
    .projects-process-header,
    .projects-video-header,
    .contact-form-header,
    .rent-evidence-header {
        position: relative;
        z-index: 4;
        width: 100%;
        max-width: 100%;
        margin-bottom: clamp(32px, 6vw, 52px);
    }

    .commercial-content,
    .construction-content,
    .industrial-content,
    .projects-hero-content,
    .contact-hero-content,
    .rent-hero-content,
    .projects-process-content {
        width: 100%;
        min-width: 0;
        max-width: 100%;
    }

    .commercial-hero .row > [class*="col-"],
    .construction-hero .row > [class*="col-"],
    .industrial-hero .row > [class*="col-"],
    .rent-hero-section .row > [class*="col-"] {
        min-width: 0;
        max-width: 100%;
    }

    .proyecto-title,
    .solution-overlay h3,
    .commercial-solution-card h4,
    .commercial-use-card h4,
    .construction-operation-card h4,
    .industrial-operation-card h4 {
        max-width: 100%;
        overflow-wrap: break-word;
        hyphens: auto;
    }
}

@media (max-width: 767.98px) {
    .commercial-title,
    .commercial-solutions-title,
    .commercial-uses-title,
    .commercial-showcase-title,
    .commercial-video-header h3,
    .construction-title,
    .construction-operations-title,
    .construction-showcase-title,
    .construction-video-header h3,
    .industrial-title,
    .industrial-operations-title,
    .industrial-showcase-title,
    .industrial-video-header h3,
    .projects-title,
    .projects-process-title,
    .projects-video-title,
    .contact-hero-title,
    .contact-form-title,
    .rent-title,
    .rent-use-title,
    .rent-evidence-title,
    .containers-hero .section-title {
        font-size: clamp(2rem, 9.5vw, 2.75rem);
        line-height: 1.14;
        letter-spacing: -.025em;
        margin-bottom: 22px;
    }

    .commercial-hero,
    .construction-hero,
    .industrial-hero,
    .projects-hero,
    .contact-hero-section,
    .rent-hero-section {
        height: auto;
        min-height: 0;
        padding-top: 48px;
        padding-bottom: 64px;
    }

    .commercial-solutions-section,
    .commercial-uses-section,
    .commercial-showcase-section,
    .construction-operations-section,
    .construction-showcase-section,
    .industrial-operations-section,
    .industrial-showcase-section,
    .projects-process-section,
    .projects-video-section,
    .contact-form-section,
    .rent-use-section,
    .rent-evidence-section {
        height: auto;
        min-height: 0;
        padding-top: 64px;
        padding-bottom: 64px;
    }

    .commercial-solutions-header,
    .commercial-uses-header,
    .commercial-showcase-header,
    .construction-operations-header,
    .construction-showcase-header,
    .industrial-operations-header,
    .industrial-showcase-header,
    .projects-process-header,
    .projects-video-header,
    .contact-form-header,
    .rent-evidence-header {
        margin-bottom: 32px;
    }

    .contact-form-card {
        padding: 30px 20px;
    }

    .containers-hero {
        margin-bottom: 48px;
        padding: 52px 20px;
    }

    .proyecto-item {
        padding: 24px 18px;
    }

    .proyecto-title {
        font-size: clamp(1.45rem, 7vw, 2rem);
        line-height: 1.2;
    }

    .solutions-ca .section-title,
    .branches-title,
    .services-header .section-title {
        max-width: calc(100% - 32px);
        margin-right: auto;
        margin-left: auto;
        font-size: clamp(1.8rem, 8vw, 2.4rem);
        line-height: 1.15;
        overflow-wrap: break-word;
        text-wrap: balance;
    }

    .solution-overlay {
        padding: 22px 18px;
    }

    .solution-overlay h3 {
        font-size: clamp(1.2rem, 6vw, 1.55rem);
        line-height: 1.2;
    }
}

@media (max-width: 399.98px) {
    .commercial-title,
    .commercial-solutions-title,
    .commercial-uses-title,
    .commercial-showcase-title,
    .construction-title,
    .construction-operations-title,
    .construction-showcase-title,
    .industrial-title,
    .industrial-operations-title,
    .industrial-showcase-title,
    .projects-title,
    .projects-process-title,
    .projects-video-title,
    .contact-hero-title,
    .contact-form-title,
    .rent-title,
    .rent-use-title,
    .rent-evidence-title,
    .containers-hero .section-title {
        font-size: clamp(1.8rem, 9vw, 2.2rem);
    }
}

/* Conserva texto e imagen lado a lado desde tablet vertical. */
@media (min-width: 768px) and (max-width: 1199.98px) {
    .commercial-hero .row,
    .construction-hero .row,
    .industrial-hero .row,
    .rent-hero-section .row,
    .rent-use-section .row,
    .contact-hero-section .row {
        align-items: center;
    }

    .commercial-hero .row > .col-lg-7,
    .construction-hero .row > .col-lg-7,
    .industrial-hero .row > .col-lg-7,
    .rent-hero-section .row > .col-lg-7,
    .rent-use-section .row > .col-lg-7 {
        flex: 0 0 56%;
        width: 56%;
        max-width: 56%;
    }

    .commercial-hero .row > .col-lg-5,
    .construction-hero .row > .col-lg-5,
    .industrial-hero .row > .col-lg-5,
    .rent-hero-section .row > .col-lg-5,
    .rent-use-section .row > .col-lg-5 {
        flex: 0 0 44%;
        width: 44%;
        max-width: 44%;
    }

    .contact-hero-section .row > [class*="col-lg-"] {
        flex: 0 0 50%;
        width: 50%;
        max-width: 50%;
    }

    .commercial-title,
    .construction-title,
    .industrial-title,
    .rent-title,
    .contact-hero-title {
        width: 100%;
        max-width: 100%;
        font-size: clamp(2.45rem, 4.5vw, 3.15rem);
        line-height: 1.12;
    }

    .commercial-image,
    .construction-image,
    .industrial-image,
    .rent-image,
    .rent-use-image {
        height: clamp(360px, 45vw, 500px);
    }

    .contact-map-wrapper,
    .contact-map-wrapper iframe {
        min-height: 480px;
        height: 480px;
    }
}