/* =========================================================
   GRUPO DELMEX — Tablas de especificaciones y dibujos
   Lo cargan solo las páginas de producto que tienen tabla,
   dibujo técnico o referencia de medidas.
   Requiere css/rediseno.css cargado antes.
   ========================================================= */

/* ---------- Portada de página interior ---------- */

.prod-hero {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 46vh;
    background-color: var(--ink);
}

.prod-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg,
            rgba(10, 20, 36, .55) 0%,
            rgba(10, 20, 36, .80) 100%);
}

.prod-hero-inner {
    position: relative;
    text-align: center;
    padding: 0 1.25rem;
}

.prod-hero-titulo {
    font-family: 'Archivo', sans-serif;
    font-variation-settings: "wdth" 112;
    letter-spacing: -.02em;
    font-weight: 800;
    font-size: clamp(2rem, 5vw, 3.4rem);
    line-height: 1.05;
    color: #fff;
    margin: 0;
}

/* ---------- Portada en mosaico ----------
   Las fotos van una junto a otra, cada una con los bordes laterales
   desvanecidos y encimada un poco con su vecina: donde una se apaga la
   otra ya está encendida, así que la unión no se nota.
   El contenedor se sale un poco de la sección y esta recorta lo que
   sobra, de modo que el desvanecido de los extremos queda fuera de
   cuadro y no se ve el fondo asomándose por los lados. */

.prod-hero--mosaico {
    overflow: hidden;
}

.prod-hero--mosaico::before {
    z-index: 1;
}

.prod-hero--mosaico .prod-hero-inner {
    position: relative;
    z-index: 2;
}

.hero-mosaico {
    position: absolute;
    top: 0;
    bottom: 0;
    left: -6%;
    right: -6%;
    z-index: 0;
    display: flex;
    background-color: var(--ink);
}

.hero-tira {
    flex: 1 1 0;
    min-width: 0;
    margin-left: -4%;
    margin-right: -4%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    -webkit-mask-image: linear-gradient(90deg,
            transparent 0%, #000 15%, #000 85%, transparent 100%);
    mask-image: linear-gradient(90deg,
            transparent 0%, #000 15%, #000 85%, transparent 100%);
}

/* En pantallas chicas cada foto sería una rebanada ilegible: se van
   quitando las de más para que las que quedan se vean completas. */
@media (max-width: 1024px) {
    .hero-tira:nth-child(n+4) { display: none; }
}

@media (max-width: 640px) {
    .hero-tira:nth-child(n+3) { display: none; }
}

/* Con solo dos o tres fotos, en el celular conviene dejar dos:
   una sola se ve muy recortada y tres quedan en rebanadas. */

/* ---------- Portada con video ----------
   El video cubre la sección como lo haría una imagen de fondo. El velo
   oscuro de .prod-hero::before queda por encima, así que el título se lee
   igual sin importar qué esté pasando en el cuadro. */

.prod-hero--video {
    overflow: hidden;
}

.prod-hero--video::before {
    z-index: 1;
}

.prod-hero--video .prod-hero-inner {
    position: relative;
    z-index: 2;
}

.hero-video {
    position: absolute;
    inset: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
}

/* En celular el video se cambia por su poster: pesa menos y muchos equipos
   ni siquiera lo reproducen en segundo plano. */
@media (max-width: 767px) {
    .hero-video {
        display: none;
    }

    .prod-hero--video {
        background-image: var(--poster-movil);
        background-size: cover;
        background-position: center;
    }
}

/* ---------- Tabla de especificaciones ---------- */

.prod-tabla-wrap {
    position: relative;
    overflow-x: auto;
    border-radius: 20px;
    border: 1px solid rgba(22, 34, 63, .10);
    box-shadow: 0 22px 45px -24px rgba(22, 34, 63, .5);
    background: rgba(255, 255, 255, .8);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    padding: .5rem;
    /* La barra de scroll horizontal se nota menos */
    scrollbar-width: thin;
}

/* Sombra al borde derecho mientras haya tabla que recorrer: avisa que la
   tabla sigue, que en móvil no es evidente. */
.prod-tabla-wrap::after {
    content: "";
    position: sticky;
    top: 0;
    right: 0;
    float: right;
    width: 26px;
    height: 100%;
    pointer-events: none;
    background: linear-gradient(90deg, transparent, rgba(22, 34, 63, .08));
}

.prod-tabla {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 12.5px;
}

.prod-tabla thead th {
    background: linear-gradient(180deg, var(--azul), var(--navy));
    border-bottom: 2px solid rgba(111, 180, 228, .5);
    color: #fff;
    font-weight: 600;
    font-size: 10.5px;
    letter-spacing: .05em;
    text-transform: uppercase;
    padding: .65rem .45rem;
    text-align: center;
    vertical-align: middle;
    position: sticky;
    top: 0;
    z-index: 2;
}

.prod-tabla tbody td {
    padding: .6rem .5rem;
    text-align: center;
    color: var(--navy);
    vertical-align: middle;
    border-bottom: 1px solid rgba(22, 34, 63, .06);
}

/* La primera columna, la del nombre, alineada a la izquierda y con más
   peso: es la que se busca al recorrer la tabla con la vista. */
.prod-tabla .td-nombre {
    text-align: left;
    font-weight: 600;
    padding-left: .9rem;
}

/* Esquinas redondeadas sin romper el border-collapse */
.prod-tabla tbody tr:first-child td:first-child { border-top-left-radius: 12px; }
.prod-tabla tbody tr:first-child td:last-child { border-top-right-radius: 12px; }
.prod-tabla tbody tr:last-child td:first-child { border-bottom-left-radius: 12px; }
.prod-tabla tbody tr:last-child td:last-child { border-bottom-right-radius: 12px; }

.prod-tabla tbody tr {
    transition: background-color .2s ease;
}

/* El color de fila viene inline en cada <tr>; el hover lo matiza sin taparlo */
.prod-tabla tbody tr:hover td {
    background-color: rgba(27, 78, 155, .12);
}

/* Renglones alternados, para las tablas que no traen color propio. Se pide
   con la clase para no alterar las que ya pintan sus filas. */
.prod-tabla--zebra tbody tr:nth-child(even) td {
    background-color: rgba(238, 242, 247, .75);
}

.prod-tabla--zebra tbody tr:hover td {
    background-color: rgba(27, 78, 155, .12);
}

/* Barra azul en el renglón que se está leyendo: en una tabla ancha ayuda a
   no perder el renglón al mirar la última columna. */
.prod-tabla--zebra tbody tr td:first-child {
    box-shadow: inset 3px 0 0 transparent;
    transition: box-shadow .2s ease;
}

.prod-tabla--zebra tbody tr:hover td:first-child {
    box-shadow: inset 3px 0 0 var(--azul);
}

/* Muestra de color en las tablas de aceros.
   Se aceptan los dos nombres: el canónico del rediseño es
   .prod-color-swatch, y .color-swatch es el que traen las tablas
   heredadas (acerogradomaquinaria, acerogradoherramienta,
   aceroinoxidable...). Así el círculo se ve igual sin tocar esos HTML. */
.prod-color-swatch,
.prod-tabla .color-swatch {
    display: inline-block;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: 1px solid rgba(22, 34, 63, .3);
    vertical-align: middle;
}

/* ---------- Perfiles disponibles ---------- */

.perfiles-row {
    display: flex;
    align-items: center;
    gap: .6rem;
    flex-wrap: wrap;
    margin-top: 1.5rem;
}

.perfil-label {
    font-weight: 600;
    color: var(--navy);
    font-size: 14px;
    margin-right: .25rem;
}

.perfil-icon {
    display: inline-block;
}

.perfil-icon.circle {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 2px solid var(--azul);
    background: #fff;
}

.perfil-icon.square {
    width: 20px;
    height: 20px;
    border: 2px solid var(--azul);
    background: #fff;
}

.perfil-icon.bar {
    width: 28px;
    height: 10px;
    border: 2px solid var(--azul);
    border-radius: 2px;
    background: #fff;
}

/* El hexágono va en dos capas: fondo azul + máscara blanca 2 px adentro */
.perfil-icon.hexagon {
    position: relative;
    width: 22px;
    height: 22px;
    background: var(--azul);
    clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
}

.perfil-icon.hexagon::before {
    content: "";
    position: absolute;
    top: 2px;
    right: 2px;
    bottom: 2px;
    left: 2px;
    background: #fff;
    clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
}

/* ---------- Marco de foto ----------
   Hueco para una imagen que todavía no existe.
   Mientras no haya imagen se ve un recuadro punteado con un ícono.
   Al pegar el <img> dentro, la foto lo tapa y el borde se vuelve sólido. */

.foto {
    position: relative;
    display: block;
    overflow: hidden;
    margin: 0;
    border-radius: 18px;
    border: 1px dashed rgba(27, 78, 155, .35);
    background: rgba(238, 242, 247, .9);
    color: rgba(27, 78, 155, .35);
    display: grid;
    place-items: center;
    font-size: 22px;
}

.foto img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .55s cubic-bezier(.2, .7, .3, 1);
}

.foto:has(img) {
    border-style: solid;
    border-color: rgba(22, 34, 63, .10);
}

.foto-4x3 { aspect-ratio: 4 / 3; }
/* Banda ancha, para fotos de línea de producción */
.foto-16x7 { aspect-ratio: 16 / 7; }
.foto-3x4 { aspect-ratio: 3 / 4; }
.foto-1x1 { aspect-ratio: 1 / 1; }

.foto-circ {
    border-radius: 50%;
    aspect-ratio: 1 / 1;
}

/* ---------- Dibujo técnico y referencia de medidas ---------- */

.dibujo-banner {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--verde);
    text-align: center;
    margin: 0 0 1rem;
}

.dibujo-banner::after {
    content: "";
    display: block;
    width: 42px;
    height: 2px;
    background: var(--verde);
    border-radius: 2px;
    margin: .75rem auto 0;
}

.dibujo-caja {
    border-radius: 20px;
    border: 1px solid rgba(22, 34, 63, .10);
    box-shadow: 0 18px 40px -24px rgba(22, 34, 63, .4);
    background: rgba(255, 255, 255, .75);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    padding: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.dibujo-caja img {
    max-width: 100%;
    height: auto;
    display: block;
}