.material_hero {
    min-height: 24.5rem;
}

.material_hero::after {
    background: linear-gradient(90deg, rgb(0 0 0 / 68%), transparent 72%), linear-gradient(180deg, rgb(0 0 0 / 35%), transparent 40%);
}

.material_hero .hero_copy {
    padding-block-start: 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. */

.material_card {
    display: block;
    min-width: 0;
    background: #eee9e2;
}

.material_card > img {
    width: 100%;
    aspect-ratio: 523 / 276;
    object-fit: cover;
}

.card_label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    min-height: 6rem;
    padding: 1.75rem 1.375rem 1rem;
}

.card_label h3 {
    position: relative;
    font-size: 1.5rem;
}

.card_label h3::after {
    display: block;
    width: 3.375rem;
    height: 0.125rem;
    margin-top: 1rem;
    background: #da0032;
    content: "";
}

a.material_card:hover .card_label {
    background: #e4dcd2;
}

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

/* Aplicaciones y galerías del material seleccionado. */

.applications,
.finishes {
    width: calc(100% - 9rem);
    max-width: 71rem;
    margin-inline: auto;
}

.applications {
    padding-block: 6.4375rem 5.4375rem;
}

.applications h2,
.material_gallery h2,
.finishes h2 {
    position: relative;
    padding-bottom: 0.75rem;
    font-size: 2.5rem;
}

.applications h2::after,
.material_gallery h2::after,
.finishes h2::after {
    position: absolute;
    inset-inline-start: 0;
    inset-block-end: 0;
    width: min(100%, 32rem);
    height: 0.0625rem;
    background: #da0032;
    content: "";
}

.application_grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.6875rem;
    max-width: 67rem;
    margin-top: 4rem;
}

.quality_banner {
    margin-block: 0;
}

.material_gallery {
    width: calc(100% - 9rem);
    max-width: 71rem;
    margin: 6.6875rem auto 0;
    scroll-margin-top: 2rem;
}

.material_gallery p {
    margin: 1.875rem auto 0;
    font-size: 1rem;
    text-align: center;
    line-height: 1.5;
}

.portrait_grid {
    display: flex;
    align-items: start;
    justify-content: center;
    gap: 1.25rem;
    max-width: 55rem;
    margin: 2.625rem auto 0;
}

.portrait_grid img {
    min-width: 0;
    width: auto;
    max-width: calc(50% - 0.625rem);
    height: 35.5rem;
    object-fit: cover;
}

.material_gallery + .material_gallery {
    margin-top: 2.1875rem;
}

.finishes {
    padding-block: 4rem 5.625rem;
}

.finishes_grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.1875rem;
    max-width: 66.6875rem;
    margin-top: 5.0625rem;
}

.finishes .material_card > img {
    aspect-ratio: 343 / 276;
}

/* Las fotografías de tops sinterizados tienen menor altura que las de cuarzo. */

.island_portraits img {
    height: 33.375rem;
}

.material_gallery + .material_gallery {
    margin-top: 4.75rem;
}

/* Móviles: conservar la proporción original de cada fotografía. */

@media (max-width: 40rem) {
.island_portraits img {
            height: auto;
        }
}

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

@media (max-width: 64rem) {




.hero_copy,
.applications,
.finishes,
.material_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;
        }

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

.applications h2,
.material_gallery h2,
.finishes h2 {
            font-size: 1.875rem;
        }

.application_grid {
            grid-template-columns: minmax(0, 1fr);
            gap: 1.25rem;
        }

.card_label h3 {
            font-size: 1.25rem;
        }

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

.applications {
            padding-block: 3rem;
        }

.application_grid {
            margin-top: 2rem;
        }

.material_gallery {
            margin-top: 3rem;
        }

.material_gallery + .material_gallery {
            margin-top: 3rem;
        }

.portrait_grid {
            gap: 0.625rem;
            margin-top: 1.5rem;
        }

.portrait_grid img {
            width: calc(50% - 0.3125rem);
            max-width: calc(50% - 0.3125rem);
            height: auto;
        }

.finishes {
            padding-block: 3rem;
        }

.finishes_grid {
            grid-template-columns: minmax(0, 1fr);
            gap: 1.25rem;
            margin-top: 2rem;
        }

.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_stone_island {
    object-position: 50.000% 30.811%;
}

img.image_stone_wall {
    object-position: 50.000% 59.116%;
}

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

.portrait_grid img,
.island_portraits img,
.wall_portraits img {
    width: auto;
    height: auto;
    max-height: 36.5625rem;
    object-fit: contain;
}

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

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





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

.hero_copy h1 {
            line-height: 1.222222;
        }

.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) {
.finishes_grid {
            grid-template-columns: repeat(3, minmax(0, 1fr));
        }

.applications h2::after,
.material_gallery h2::after,
.finishes h2::after {
            height: 0.125rem;
            background: #da0032;
        }
}