.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. */

.quality_banner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: center;
    gap: 4rem;
    min-height: 20.75rem;
    padding-inline: max(5%, calc((100% - 66rem) / 2));
    background: #000;
    color: #fff;
}

.quality_banner > img {
    justify-self: center;
    width: 16.6rem;
    max-height: 20.75rem;
    object-fit: contain;
}

.quality_banner > div {
    position: relative;
    padding-block: 2.5rem;
}

.quality_banner > div::before {
    position: absolute;
    inset-inline-start: -2.75rem;
    inset-block: 1.25rem;
    width: 0.0625rem;
    background: #da0032;
    content: "";
}

.quality_banner h2 {
    font-size: 2.5rem;
}

.quality_banner p {
    max-width: 33rem;
    margin-top: 0.5rem;
    font-size: 1.2rem;
    line-height: 1.3;
}

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

.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;
}

/* Fotografía principal y composición de detalles de Torreliana. */

.intro p {
    line-height: 1.25;
}

.project_main {
    margin-top: 1.25rem;
}

.project_main img {
    width: 100%;
    aspect-ratio: 1280 / 484;
    object-fit: cover;
}

.project_details {
    margin-top: 4.5625rem;
}

.project_details h2 {
    width: calc(100% - 12rem);
    max-width: 57rem;
    margin: 0 auto 2.5625rem;
    font-size: 1.5rem;
}

.detail_grid {
    display: grid;
    grid-template-columns: minmax(0, 931fr) minmax(0, 340fr);
    gap: 0.625rem;
}

.detail_grid img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.detail_grid img:first-child {
    aspect-ratio: 931 / 276;
}

.detail_grid img:nth-child(2) {
    grid-column: 2;
    grid-row: 1 / 3;
}

.detail_grid img:nth-child(3) {
    aspect-ratio: 931 / 313;
}

.project_details + .quality_banner {
    margin-top: 0;
}

.quality_banner {
    min-height: 20.75rem;
}

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

@media (max-width: 64rem) {




.hero_copy {
            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;
        }

.quality_banner {
            gap: 2rem;
        }

.quality_banner > div::before {
            inset-inline-start: -1rem;
        }

.quality_banner h2 {
            font-size: 2rem;
        }
}

/* 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%);
        }

.project_main {
            margin-top: 2.5rem;
        }

.project_main img {
            aspect-ratio: 2 / 1;
        }

.project_details {
            margin-top: 2.5rem;
        }

.project_details h2 {
            width: 86%;
            margin-bottom: 1.5rem;
        }

.detail_grid {
            grid-template-columns: minmax(0, 1fr);
        }

.detail_grid img:nth-child(2) {
            grid-column: auto;
            grid-row: 3;
            max-height: 28rem;
            object-fit: contain;
        }

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

.quality_banner > img {
            width: 13rem;
        }

.quality_banner > div {
            padding-block: 0;
            text-align: center;
        }

.quality_banner > div::before {
            content: none;
        }

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

.quality_banner p {
            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_main,
.detail_grid {
    max-width: 80rem;
    margin-inline: auto;
}

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

@media (min-width: 40.0625rem) {
.hero_copy,
.contact_content,
.project_details h2 {
            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;
        }

.quality_banner {
            grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        }

.quality_banner > img {
            width: 19.25rem;
            max-height: 24.0625rem;
        }

.quality_banner h2 {
            line-height: 1.1125;
        }

.quality_banner p {
            font-size: 1.25rem;
            font-weight: 300;
        }

.quality_banner > div::before {
            width: 0.125rem;
            background: #f00;
        }

.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));
        }

.quality_banner {
            gap: 2rem;
        }
}

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

@media (min-width: 40.0625rem) {
.project_details h2 {
            max-width: 57rem;
        }

.detail_grid {
            grid-template-columns: minmax(0, 931fr) minmax(0, 340fr);
        }

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