.screen_reader {
    position: absolute;
    width: 0.0625rem;
    height: 0.0625rem;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

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

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

/* Catálogo con filtros y tarjetas de materiales. */

.catalog {
    width: calc(100% - 9rem);
    max-width: 71rem;
    min-height: 43.8125rem;
    margin-inline: auto;
    padding-block: 2.8125rem 6.5rem;
}

.catalog h2 {
    font-size: 2.25rem;
}

.catalog_filters {
    display: flex;
    flex-wrap: wrap;
    gap: 1.625rem;
    margin-block: 4.25rem 1.8125rem;
}

.catalog_filters button {
    min-height: 2.75rem;
    padding: 0.375rem 0.625rem;
    border: 0;
    background: transparent;
    color: #080808;
    font-size: 1.25rem;
}

.catalog_filters button[aria-pressed="true"] {
    background: #080808;
    color: #fff;
}

.catalog_grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.1875rem;
}

.catalog .material_card > img {
    aspect-ratio: 366 / 276;
}

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

@media (max-width: 64rem) {




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

.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,
.material_hero .hero_copy {
            padding-block: 3.75rem 2rem;
        }

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

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

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

.catalog {
            min-height: 0;
            padding-block: 2.5rem 3rem;
        }

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

.catalog_filters {
            gap: 0.25rem;
            margin-top: 2rem;
        }

.catalog_filters button {
            font-size: 1rem;
        }

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

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

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

img.image_tops_contact {
    object-position: center;
}

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


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

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





.hero_copy h1 {
            line-height: 1.222222;
        }

.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) {
.catalog_grid {
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 1.1875rem;
            max-width: 46.875rem;
        }

.catalog .material_card > img {
            aspect-ratio: 366 / 276;
            height: auto;
        }
}