.projects_hero .hero_copy {
    padding-block-start: 6.5rem;
}

.eyebrow {
    display: block;
    margin-bottom: 0.375rem;
    font-size: 0.875rem;
    line-height: 1.2;
}

.hero_copy .eyebrow {
    font-size: 0.9375rem;
    font-weight: 400;
}

/* Introducción con el separador rojo del diseño original. */

.intro {
    display: grid;
    grid-template-columns: minmax(0, 449fr) minmax(0, 402fr);
    align-items: center;
    gap: 3.8125rem;
    width: calc(100% - 12rem);
    max-width: 57rem;
    margin: 4.625rem auto 0;
}

.intro h2 {
    font-size: 1.5rem;
    line-height: 1.3;
}

.intro p {
    position: relative;
    font-size: 1rem;
    line-height: 1.45;
}

.intro p::before {
    position: absolute;
    inset-block: 0;
    inset-inline-start: -2.875rem;
    width: 0.0625rem;
    min-height: 5rem;
    background: #da0032;
    content: "";
}

/* Tarjetas con una proporción reservada para evitar saltos de contenido. */

/* Sello y promesa de calidad. */

/* Proyectos realizados y etiquetas sobre las fotografías. */

.projects_gallery {
    width: calc(100% - 12rem);
    max-width: 65.1875rem;
    margin: 4.625rem auto;
}

.project_card + .project_card {
    margin-top: 5.8125rem;
}

.project_card h2 {
    position: relative;
    padding-inline-start: 0.625rem;
    margin-bottom: 1.4375rem;
    font-size: 2.25rem;
}

.project_card h2::before {
    position: absolute;
    inset-inline-start: 0;
    inset-block: 0;
    width: 0.0625rem;
    background: #da0032;
    content: "";
}

.project_card > a,
.project_card > div {
    position: relative;
    display: block;
}

.project_card img {
    width: 100%;
    aspect-ratio: 1030 / 252;
    object-fit: cover;
}

.project_card:nth-child(2) img {
    aspect-ratio: 1032 / 225;
}

.project_label {
    position: absolute;
    inset-inline: 0;
    inset-block-end: 0;
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.875rem 1.75rem;
    background: rgb(238 233 226 / 80%);
    font-size: 1.6875rem;
    line-height: 1.25;
}

.project_card a:hover .project_label {
    background: #eee9e2;
}

.contact_banner {
    min-height: 21.5rem;
}

.contact_banner::after {
    background: linear-gradient(180deg, transparent 50%, rgb(0 0 0 / 65%) 50%);
}

.contact_content {
    width: calc(100% - 23rem);
    max-width: 57rem;
    align-items: center;
    padding-block: 12.1rem 3rem;
}

.contact_content h2 {
    font-size: 1.6875rem;
}

.contact_content .button {
    font-size: 1.6875rem;
    font-weight: 800;
    min-height: 5.375rem;
}

/* Tabletas: columnas flexibles y navegación que permite saltos de línea. */

@media (max-width: 64rem) {




.hero_copy,
.projects_gallery {
            width: 88%;
        }

.intro {
            width: 80%;
            gap: 3.5rem;
        }

.intro p::before {
            inset-inline-start: -1.75rem;
        }

.contact_content {
            width: 86%;
            gap: 2rem;
        }

.button {
            font-size: 1.25rem;
        }

.footer {
            padding-inline: 6%;
        }

.footer_grid {
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 1.5rem 3rem;
            padding-bottom: 2rem;
        }

.footer_brand {
            max-width: 15rem;
        }
}

/* Móviles: imágenes proporcionales y contenido en una columna. */

@media (max-width: 40rem) {
.hero {
            min-height: 22rem;
        }











.hero_copy,
.projects_hero .hero_copy {
            padding-block: 3.75rem 2rem;
        }

.hero_copy h1 {
            font-size: 1.875rem;
        }

.hero_copy p {
            font-size: 0.9375rem;
        }

.intro {
            grid-template-columns: minmax(0, 1fr);
            width: 86%;
            gap: 1.5rem;
            margin-top: 2.5rem;
        }

.intro p {
            padding-inline-start: 1rem;
        }

.intro p::before {
            inset-inline-start: 0;
            min-height: 0;
        }

.contact_content {
            grid-template-columns: minmax(0, 1fr);
            gap: 1.75rem;
            padding-block: 3rem;
        }

.contact_content h2 {
            font-size: 1.75rem;
        }

.contact_content p {
            font-size: 1rem;
        }

.contact_banner::after {
            background: rgb(0 0 0 / 60%);
        }

.projects_gallery {
            margin-block: 3rem;
        }

.project_card + .project_card {
            margin-top: 2.5rem;
        }

.project_card h2 {
            font-size: 1.875rem;
        }

.project_card img,
.project_card:nth-child(2) img {
            aspect-ratio: 2 / 1;
        }

.project_label {
            position: static;
            padding: 1rem;
            font-size: 1rem;
        }

.footer_grid {
            grid-template-columns: minmax(0, 1fr);
            gap: 2rem;
            font-size: 1rem;
        }

.footer_brand {
            width: 14rem;
            justify-self: center;
        }

.footer_links a,
.footer_contact a {
            padding-block: 0.625rem;
        }

.social_links a {
            min-width: 2.75rem;
        }

.footer_credit {
            font-size: 0.875rem;
            text-align: center;
        }
}

/* Recortes originales de Figma mediante la posición de la imagen, sin deformarla. */

img.image_projects_contact {
    object-position: 50.000% 55.732%;
}

/* Distribución adaptable: el contenido permanece en el flujo al cambiar el zoom. */

.project_label {
    background: rgb(0 0 0 / 45%);
    color: #fff;
}

.project_card a:hover .project_label {
    background: rgb(0 0 0 / 60%);
}

.project_card h2::before {
    width: 0.1875rem;
    background: #da0032;
}

/* Columnas flexibles para tabletas y escritorio, sin desplazamientos ligados al viewport. */

@media (min-width: 40.0625rem) {
.hero_copy,
.projects_gallery,
.contact_content {
            width: min(90%, 71rem);
            margin-inline: auto;
        }





.hero_copy .eyebrow {
            margin-bottom: 0;
        }

.hero_copy h1 {
            line-height: 1.222222;
        }

.projects_hero .hero_copy {
            padding-bottom: 1.625rem;
        }

.intro {
            width: min(90%, 57rem);
            grid-template-columns: minmax(0, 449fr) minmax(0, 402fr);
            gap: clamp(2rem, 5%, 3.8125rem);
            margin-inline: auto;
        }

.intro p::before {
            inset-inline-start: -1.5rem;
            width: 0.375rem;
            min-height: 0;
            height: 5.0625rem;
            inset-block-start: 50%;
            inset-block-end: auto;
            transform: translateY(-50%);
            background: #da0032;
        }

.contact_content {
            grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
            gap: 2rem;
        }

.contact_content h2 {
            line-height: 1.222222;
        }

.contact_content p {
            font-size: 1.5rem;
            line-height: 1.208333;
        }

.contact_content .button {
            min-width: 0;
            width: 100%;
            height: auto;
        }

.footer_grid,
.footer_credit {
            max-width: 74rem;
            margin-inline: auto;
        }

.footer_grid {
            grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1.55fr) minmax(0, 0.65fr);
            gap: 1.5rem;
        }

.footer_links,
.footer_contact,
.footer_social {
            min-width: 0;
        }
}

/* En tabletas el pie crece en filas para evitar superposiciones. */

@media (min-width: 40.0625rem) and (max-width: 64rem) {
.footer_grid {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }
}

/* Las imágenes y los textos se adaptan al ancho efectivo del navegador. */

@media (min-width: 40.0625rem) {
.projects_gallery {
            max-width: 65.1875rem;
        }

.project_card img,
.project_card:nth-child(2) img {
            height: auto;
        }

.contact_content {
            max-width: 57rem;
        }
}