/* =========================================================
   GRUPO DELMEX — Aceros Especiales
   Bloques que solo existen en acerosespeciales.html: los
   accesos directos, el marco de las fotos de cada material
   y la sección de barras a la medida.
   Requiere css/rediseno.css y css/tablas.css cargados antes
   (de ahí salen .prod-hero, .prod-tabla y los marcos .foto).
   ========================================================= */

/* ---------- Accesos directos a cada material ---------- */

.chips-materiales {
    display: flex;
    flex-wrap: wrap;
    gap: .6rem;
    justify-content: center;
}

.chip-material {
    position: relative;
    display: inline-flex;
    align-items: center;
    padding: .55rem 1.15rem;
    border-radius: 999px;
    border: 1px solid rgba(27, 78, 155, .22);
    background: rgba(238, 242, 247, .6);
    font-size: 13.5px;
    font-weight: 600;
    color: var(--navy);
    transition: color .25s ease, border-color .25s ease, background-color .25s ease, transform .25s ease;
}

.chip-material::after {
    content: "";
    position: absolute;
    left: 50%;
    right: 50%;
    bottom: -1px;
    height: 2px;
    background: var(--verde);
    transition: left .3s ease, right .3s ease;
}

.chip-material:hover {
    transform: translateY(-2px);
    color: var(--azul);
    border-color: rgba(27, 78, 155, .5);
    background: #fff;
}

.chip-material:hover::after {
    left: 22%;
    right: 22%;
}

/* ---------- Foto de cada material ----------
   La foto entra ligeramente girada y se endereza al aparecer; al pasar el
   mouse se acerca un poco dentro de su marco. Da movimiento a una página
   que, de otro modo, serían tres tablas seguidas. */

.marco-foto .foto {
    box-shadow: 0 26px 50px -30px rgba(22, 34, 63, .75);
    transition: transform .45s cubic-bezier(.2, .7, .3, 1), box-shadow .45s ease;
}

.marco-foto:hover .foto {
    transform: translateY(-4px);
    box-shadow: 0 32px 60px -30px rgba(22, 34, 63, .85);
}

.marco-foto:hover .foto img {
    transform: scale(1.06);
}

/* Filo de color en la esquina, como una etiqueta de identificación */
.marco-foto .foto::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    width: 0;
    height: 0;
    border-top: 46px solid var(--verde);
    border-right: 46px solid transparent;
    opacity: 0;
    transition: opacity .35s ease;
    pointer-events: none;
}

.marco-foto:hover .foto::before {
    opacity: .9;
}

/* ---------- Barras a la medida ---------- */

.barras-galeria {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
}

@media (min-width: 640px) {
    .barras-galeria {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (min-width: 1024px) {
    .barras-galeria {
        grid-template-columns: repeat(5, 1fr);
        gap: 1.25rem;
    }
}

.barra-foto .foto {
    border-radius: 16px;
    box-shadow: 0 18px 36px -26px rgba(22, 34, 63, .8);
    transition: transform .35s cubic-bezier(.2, .7, .3, 1), box-shadow .35s ease;
}

.barra-foto:hover .foto {
    transform: translateY(-6px);
    box-shadow: 0 26px 46px -24px rgba(22, 34, 63, .9);
}

.barra-foto:hover .foto img {
    transform: scale(1.07);
}

/* En pantallas chicas la quinta foto quedaría sola: se centra */
@media (max-width: 639px) {
    .barra-foto:last-child {
        grid-column: 1 / -1;
        max-width: 50%;
        justify-self: center;
    }
}

/* ---------- Los tres servicios ---------- */

.barras-servicios {
    display: grid;
    gap: 1rem;
}

@media (min-width: 640px) {
    .barras-servicios {
        grid-template-columns: repeat(3, 1fr);
        gap: 1.25rem;
    }
}

.barra-servicio {
    display: flex;
    align-items: center;
    gap: .9rem;
    padding: 1rem 1.25rem;
    border-radius: 16px;
    background: #fff;
    border: 1px solid rgba(22, 34, 63, .08);
    box-shadow: 0 14px 32px -28px rgba(22, 34, 63, .6);
    transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}

.barra-servicio:hover {
    transform: translateY(-4px);
    border-color: rgba(30, 122, 106, .35);
    box-shadow: 0 22px 40px -26px rgba(30, 122, 106, .55);
}

.barra-ico {
    width: 46px;
    height: 46px;
    flex-shrink: 0;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: #1E7A6A;
    color: #fff;
    font-size: 17px;
    transition: transform .4s ease, box-shadow .35s ease;
}

.barra-servicio:hover .barra-ico {
    transform: scale(1.08);
    box-shadow: 0 0 0 7px rgba(30, 122, 106, .15);
}

.barra-servicio h4 {
    font-family: 'Archivo', sans-serif;
    font-weight: 700;
    font-size: 15px;
    color: var(--navy);
    margin: 0;
    transition: color .3s ease;
}

.barra-servicio:hover h4 {
    color: #1E7A6A;
}

/* ---------- Anclas ----------
   El menú enlazará a acerosespeciales.html#acero-inoxidable y demás; sin
   este margen, la barra y el header fijos taparían el inicio. */

#acero-carbono,
#acero-inoxidable,
#aluminio,
#barras {
    scroll-margin-top: 130px;
}

@media (prefers-reduced-motion: reduce) {

    .chip-material:hover,
    .marco-foto:hover .foto,
    .barra-foto:hover .foto,
    .barra-servicio:hover,
    .barra-servicio:hover .barra-ico {
        transform: none !important;
    }
}