/* =========================================================
   GRUPO DELMEX — Perfil Estructural
   Un bloque por perfil, con el mismo criterio de reparto que
   css/aceros.css: nombre a la izquierda, descripción a la
   derecha. Aquí no hay tablas ni fotos de producto, así que
   el ritmo lo dan el fondo alternado y el filo verde.
   Requiere css/rediseno.css y css/tablas.css cargados antes
   (de ahí sale .prod-hero y .dibujo-banner).
   ========================================================= */

/* ---------- Bloque de cada perfil ---------- */

.perfil-bloque {
    padding: 2.2rem 0;
    /* El ancla del menú no debe quedar bajo el header fijo */
    scroll-margin-top: 130px;
    transition: background-color .3s ease;
}

@media (min-width: 1024px) {
    .perfil-bloque {
        padding: 2.6rem 0;
    }
}

/* El filo verde crece al pasar por el bloque: es la única señal de que el
   renglón responde, ahora que no hay foto que animar. */
.perfil-bloque span[class*="bg-verde"] {
    transition: width .35s cubic-bezier(.2, .7, .3, 1);
}

.perfil-bloque:hover span[class*="bg-verde"] {
    width: 5.5rem;
}

.perfil-bloque h2 {
    transition: color .25s ease;
}

.perfil-bloque:hover h2 {
    color: var(--azul);
}

/* ---------- Accesos directos ----------
   Se conservan por si se vuelven a activar en el HTML. */

.chips-perfiles {
    display: flex;
    flex-wrap: wrap;
    gap: .55rem;
    justify-content: center;
}

.chip-perfil {
    position: relative;
    display: inline-flex;
    align-items: center;
    padding: .5rem 1.05rem;
    border-radius: 999px;
    border: 1px solid rgba(44, 108, 176, .22);
    background: rgba(238, 242, 247, .6);
    font-size: 13px;
    font-weight: 600;
    color: var(--navy);
    transition: color .25s ease, border-color .25s ease, background-color .25s ease, transform .25s ease;
}

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

.chip-perfil:hover {
    transform: translateY(-2px);
    color: var(--azul);
    border-color: rgba(44, 108, 176, .5);
    background: #fff;
}

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

/* ---------- Slitter ----------
   Esta página comparte el reparto de dos columnas y el cierre con Perfil
   Estructural, así que reutiliza este mismo archivo. */

/* ---------- Portada con corte (Servicios de Corte) ----------
   El disco recorre el contorno completo de la portada: baja, sube por el
   costado derecho, cruza arriba y regresa por la izquierda. Va centrado en
   el borde, así que el overflow de la sección le recorta la mitad de afuera
   y solo asoman los dientes mordiendo, como si cortara el marco.
   El trazo se dibuja por tramos, uno por lado, cada uno en su cuarto de
   vuelta; los cuatro comparten el mismo reloj que el disco. */

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

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

/* El corte pasa por detrás del título */
.prod-hero--corte .prod-hero-inner {
    position: relative;
    z-index: 3;
}

.corte-cinta {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
}

/* ---------- Los cuatro tramos del corte ---------- */

.corte-borde {
    position: absolute;
    border-radius: 3px;
    background: linear-gradient(90deg,
            rgba(255, 255, 255, .25) 0%,
            rgba(200, 232, 255, .75) 60%,
            rgba(255, 255, 255, 1) 100%);
    box-shadow: 0 0 14px rgba(160, 215, 255, .6);
    animation-duration: 16s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}

.corte-borde--abajo {
    left: 0;
    bottom: 0;
    height: 3px;
    width: 0;
    animation-name: corte-lado-h;
}

.corte-borde--der {
    right: 0;
    bottom: 0;
    width: 3px;
    height: 0;
    background: linear-gradient(0deg,
            rgba(255, 255, 255, .25) 0%,
            rgba(200, 232, 255, .75) 60%,
            rgba(255, 255, 255, 1) 100%);
    animation-name: corte-lado-v;
    animation-delay: -12s;
}

.corte-borde--arriba {
    right: 0;
    top: 0;
    height: 3px;
    width: 0;
    background: linear-gradient(-90deg,
            rgba(255, 255, 255, .25) 0%,
            rgba(200, 232, 255, .75) 60%,
            rgba(255, 255, 255, 1) 100%);
    animation-name: corte-lado-h;
    animation-delay: -8s;
}

.corte-borde--izq {
    left: 0;
    top: 0;
    width: 3px;
    height: 0;
    background: linear-gradient(180deg,
            rgba(255, 255, 255, .25) 0%,
            rgba(200, 232, 255, .75) 60%,
            rgba(255, 255, 255, 1) 100%);
    animation-name: corte-lado-v;
    animation-delay: -4s;
}

/* Cada tramo crece durante su cuarto de vuelta y se mantiene el resto del
   ciclo; el retraso negativo de cada lado es lo que los encadena. */
@keyframes corte-lado-h {
    0% { width: 0; opacity: 1; }
    25%, 92% { width: 100%; opacity: 1; }
    100% { width: 100%; opacity: 0; }
}

@keyframes corte-lado-v {
    0% { height: 0; opacity: 1; }
    25%, 92% { height: 100%; opacity: 1; }
    100% { height: 100%; opacity: 0; }
}

/* ---------- El disco ---------- */

.corte-hoja {
    position: absolute;
    top: 0;
    left: 0;
    width: 110px;
    height: 110px;
    margin: -55px 0 0 -55px;
    color: rgba(255, 255, 255, .92);
    filter: drop-shadow(0 0 10px rgba(160, 215, 255, .7));
    /* La vuelta mueve top y left; la vibración usa transform y el giro va en
       el SVG: tres animaciones que no se pisan entre sí. */
    animation: corte-vuelta 16s linear infinite,
        corte-vibra .09s linear infinite;
}

@media (min-width: 1024px) {
    .corte-hoja {
        width: 170px;
        height: 170px;
        margin: -85px 0 0 -85px;
    }
}

.corte-hoja svg {
    width: 100%;
    height: 100%;
    animation: corte-gira .9s linear infinite;
}

/* Abajo de izquierda a derecha, sube por la derecha, cruza arriba de
   derecha a izquierda y baja por la izquierda. */
@keyframes corte-vuelta {
    0% { left: 0; top: 100%; }
    25% { left: 100%; top: 100%; }
    50% { left: 100%; top: 0; }
    75% { left: 0; top: 0; }
    100% { left: 0; top: 100%; }
}

@keyframes corte-gira {
    to { transform: rotate(360deg); }
}

@keyframes corte-vibra {
    0%, 100% { transform: translateY(-.6px); }
    50% { transform: translateY(.6px); }
}

/* ---------- Chispas y humo ----------
   Cuelgan del disco, así que lo acompañan toda la vuelta. La capa gira un
   cuarto en cada tramo para que siempre salgan hacia atrás. */

.corte-chispas {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    animation: corte-orienta 16s steps(1, end) infinite;
}

@keyframes corte-orienta {
    0%, 24.99% { transform: rotate(0deg); }
    25%, 49.99% { transform: rotate(-90deg); }
    50%, 74.99% { transform: rotate(180deg); }
    75%, 100% { transform: rotate(90deg); }
}

.corte-chispa {
    position: absolute;
    top: 0;
    left: 0;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: #EAF6FF;
    box-shadow: 0 0 8px rgba(190, 230, 255, .95);
    opacity: 0;
    animation: corte-chispa .55s linear infinite;
    animation-delay: calc(var(--i, 0) * .11s);
}

@keyframes corte-chispa {
    0% { transform: translate(0, 0) scale(1); opacity: 1; }
    60% { opacity: .9; }
    100% { transform: translate(-58px, var(--dy, -26px)) scale(.2); opacity: 0; }
}

.corte-humo {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 78px;
    height: 78px;
    margin: -62px 0 0 -52px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(210, 232, 255, .3) 0%, transparent 68%);
    filter: blur(9px);
    opacity: 0;
    animation: corte-humo 1.6s ease-out infinite;
}

@keyframes corte-humo {
    0% { transform: translate(0, 0) scale(.5); opacity: .75; }
    100% { transform: translate(-30px, -34px) scale(1.9); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .corte-cinta {
        display: none;
    }
}

/* ---------- Los cuatro mecanismos de corte ----------
   Cada tarjeta muestra su proceso en una escena bajo el texto: la banda que
   corre, el disco que avanza girando, la cuchilla que golpea y la punta que
   traza un contorno. En reposo van despacio; al pasar el cursor se avivan,
   para que las cuatro juntas no se sientan un tablero de luces.
   Las clases de las piezas llevan mec- y las de los contenedores esc-: si
   se repite un nombre entre el div y el grupo del SVG, la regla alcanza a
   los dos y termina girando la tarjeta entera. */

.corte-escena {
    grid-column: 1 / -1;
    margin-top: 1.2rem;
    padding: .5rem .75rem;
    border-radius: 12px;
    background: rgba(238, 242, 247, .7);
    border: 1px solid rgba(21, 34, 58, .06);
    overflow: hidden;
    transition: background-color .3s ease, border-color .3s ease;
}

.corte-card:hover .corte-escena {
    background: rgba(44, 108, 176, .07);
    border-color: rgba(44, 108, 176, .18);
}

.corte-escena svg {
    display: block;
    width: 100%;
    height: 74px;
}

/* Piezas comunes de las cuatro escenas */
.corte-escena .mec-pieza,
.corte-escena .mec-placa {
    fill: rgba(21, 34, 58, .16);
}

/* La barra va más oscura que el resto: es contra ella que se lee la ranura */
.corte-escena .mec-barra {
    fill: rgba(21, 34, 58, .3);
}

.corte-escena .mec-mordaza {
    fill: rgba(21, 34, 58, .28);
}

/* La ranura del corte: va del color del fondo de la escena, así que abre un
   hueco real en la barra en vez de dibujar una línea encima. Lleva contorno
   para que el filo del corte se distinga del resto del material. */
.corte-escena .mec-kerf {
    fill: #FFFFFF;
    stroke: rgba(21, 34, 58, .45);
    stroke-width: 1.2;
}

/* El material que la hoja ya dejó atrás: más claro, para que se vea qué
   parte ya está cortada y cuál no. */
.corte-escena .mec-cortado {
    fill: rgba(255, 255, 255, .55);
}

/* ---------- Chispas del corte ----------
   Cuelgan de la hoja, así que bajan con ella y saltan desde el punto de
   contacto. Cada una con su dirección, su tamaño y su retraso. */

.mec-chispas {
    transform: translate(100px, 5px);
}

.mec-chispas--pan {
    transform: none;
}

.esc-disco .mec-chispas {
    transform: translate(0, 19px);
}

.mec-chispa {
    fill: #FFC64B;
    filter: drop-shadow(0 0 3px rgba(255, 170, 40, .95));
    opacity: 0;
    animation: mec-chispa .5s linear infinite;
    animation-delay: calc(var(--i, 0) * .1s);
}

/* Solo saltan mientras la hoja está dentro de la barra. Se usa visibility y
   no opacity: la opacidad del grupo se multiplicaría con la de cada chispa
   y las dejaría casi invisibles. */
.esc-cinta .mec-chispas,
.esc-disco .mec-chispas {
    visibility: hidden;
    animation: mec-chispea 6s steps(1, end) infinite;
}

.esc-disco .mec-chispas {
    animation-duration: 5.5s;
}

.corte-card:hover .esc-cinta .mec-chispas {
    animation-duration: 3s;
}

.corte-card:hover .esc-disco .mec-chispas {
    animation-duration: 2.8s;
}

@keyframes mec-chispa {
    0% { transform: translate(0, 0) scale(1); opacity: 1; }
    100% { transform: translate(var(--dx, -20px), var(--dy, -16px)) scale(.2); opacity: 0; }
}

@keyframes mec-chispea {
    0%, 26% { visibility: hidden; }
    30%, 62% { visibility: visible; }
    68%, 100% { visibility: hidden; }
}

.corte-escena .mec-base {
    fill: rgba(21, 34, 58, .3);
}

.corte-escena .mec-hoja,
.corte-escena .mec-dientes,
.corte-escena .mec-cuchilla path {
    fill: var(--azul);
}

/* --- Sierra cinta: la hoja baja sobre la barra mientras la banda corre ---
   Dos movimientos a la vez: los dientes recorren la hoja a lo largo y el
   conjunto desciende hasta atravesar la barra. Los dientes se dibujan
   también fuera de cuadro y el ciclo se desplaza justo lo que mide uno, así
   el bucle no tiene costura. */
.esc-cinta .mec-dientes {
    animation: mec-corre 1.1s linear infinite;
}

.mec-sierra {
    transform: translateY(8px);
    animation: mec-baja-cinta 6s ease-in-out infinite;
}

.corte-card:hover .esc-cinta .mec-dientes {
    animation-duration: .45s;
}

.corte-card:hover .mec-sierra {
    animation-duration: 3s;
}

@keyframes mec-corre {
    to { transform: translateX(16px); }
}

@keyframes mec-baja-cinta {
    0%, 8% { transform: translateY(10px); }
    /* Baja hasta salir por debajo de la barra: el corte queda completo */
    55%, 68% { transform: translateY(58px); }
    92%, 100% { transform: translateY(10px); }
}

/* --- Sierra de disco: gira mientras avanza sobre la barra --- */
.mec-disco .mec-borde {
    fill: var(--azul);
}

.mec-disco .mec-dientes-disco path {
    fill: var(--azul);
}

/* El buje va del color del fondo para que se vea el agujero de la hoja */
.mec-disco .mec-centro {
    fill: #F1F4F9;
}

/* El brazo entra por arriba: el disco no recorre la barra a lo largo, baja
   sobre ella, la corta y vuelve a subir. */
.mec-brazo {
    transform: translate(100px, -4px);
    animation: mec-baja-disco 5.5s ease-in-out infinite;
}

/* El selector va con g. a propósito, y en SVG el origen se calcula contra el
   viewBox: sin transform-box: fill-box el disco gira alrededor de la escena
   en vez de sobre su eje. */
g.mec-disco {
    transform-box: fill-box;
    transform-origin: center;
    animation: mec-gira 2.2s linear infinite;
}

.corte-card:hover .mec-brazo {
    animation-duration: 2.8s;
}

.corte-card:hover g.mec-disco {
    animation-duration: .7s;
}

@keyframes mec-baja-disco {
    /* El filo va 19 abajo del centro: arriba queda fuera de la barra y abajo
       la atraviesa por completo, igual que la hoja de la cinta. */
    0%, 10% { transform: translate(100px, 6px); }
    52%, 64% { transform: translate(100px, 48px); }
    92%, 100% { transform: translate(100px, 6px); }
}

@keyframes mec-gira {
    to { transform: rotate(360deg); }
}

/* --- Guillotina: baja, golpea y sube, con pausa entre golpes --- */
.esc-guillotina .mec-cuchilla {
    animation: mec-golpea 3.2s cubic-bezier(.5, 0, .75, 0) infinite;
}

.corte-card:hover .esc-guillotina .mec-cuchilla {
    animation-duration: 1.5s;
}

@keyframes mec-golpea {
    0%, 40% { transform: translateY(0); }
    55% { transform: translateY(26px); }
    62% { transform: translateY(26px); }
    82%, 100% { transform: translateY(0); }
}

/* --- Pantógrafo: la punta recorre el contorno y lo va trazando ---
   El trazo se revela con dash-offset y la punta lo sigue con offset-path:
   los dos avanzan por la misma ruta y llegan juntos. */
.mec-trazo {
    stroke: var(--azul);
    stroke-width: 3;
    stroke-linejoin: round;
    stroke-linecap: round;
    stroke-dasharray: 260;
    stroke-dashoffset: 260;
    animation: mec-traza 6s linear infinite;
}

.mec-punta {
    fill: var(--azul);
    offset-path: path("M46 52 L46 26 L78 12 L122 12 L154 26 L154 52 Z");
    offset-distance: 0%;
    animation: mec-recorre 6s linear infinite;
}

/* Las chispas del pantógrafo recorren la misma ruta que la punta: van
   dentro de un grupo con el mismo offset-path, así no hay que sincronizar
   dos animaciones distintas. Aquí sí saltan hacia abajo, que es como cae la
   escoria al cortar placa en horizontal. */
.mec-chispas--pan {
    offset-path: path("M46 52 L46 26 L78 12 L122 12 L154 26 L154 52 Z");
    offset-distance: 0%;
    offset-rotate: 0deg;
    animation: mec-recorre 6s linear infinite;
}

.corte-card:hover .mec-trazo,
.corte-card:hover .mec-punta,
.corte-card:hover .mec-chispas--pan {
    animation-duration: 2.8s;
}

@keyframes mec-traza {
    0% { stroke-dashoffset: 260; }
    78%, 100% { stroke-dashoffset: 0; }
}

@keyframes mec-recorre {
    0% { offset-distance: 0%; opacity: 0; }
    4% { opacity: 1; }
    78% { offset-distance: 100%; opacity: 1; }
    86%, 100% { offset-distance: 100%; opacity: 0; }
}

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

    .mec-dientes,
    .mec-sierra,
    .mec-brazo,
    g.mec-disco,
    .mec-cuchilla,
    .mec-trazo,
    .mec-punta {
        animation: none;
    }

    .mec-trazo {
        stroke-dashoffset: 0;
    }
}

/* ---------- Descripción general de Slitter ----------
   Texto dentro del margen del sitio y foto sangrando hasta el borde de la
   pantalla. El truco del sangrado es el margen negativo de media ventana
   menos media caja: lleva el borde de la foto justo al filo del viewport,
   sin importar el ancho del contenedor. */

.slitter-intro {
    display: grid;
    gap: 2rem;
    max-width: 1400px;
    margin-inline: auto;
    padding-inline: 1rem;
    align-items: center;
}

@media (min-width: 640px) {
    .slitter-intro {
        padding-inline: 1.5rem;
    }
}

@media (min-width: 1024px) {
    .slitter-intro {
        grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
        gap: 3.5rem;
    }

    /* La foto a la izquierda y el texto a la derecha. El orden del HTML no
       cambia: en móvil el texto debe ir primero. */
    .slitter-intro-texto {
        order: 2;
    }

    .slitter-banda {
        order: 1;
    }
}

.slitter-intro-texto {
    max-width: 42rem;
}

.slitter-banda {
    border-radius: 22px;
    aspect-ratio: 4 / 3;
    box-shadow: 0 30px 55px -34px rgba(21, 34, 58, .85);
    transition: transform .4s cubic-bezier(.2, .7, .3, 1);
}

@media (min-width: 1024px) {
    .slitter-banda {
        /* Altura fija en vez de proporción: al ocupar media pantalla, un
           16:11 se iba a más de 800 px de alto y aplastaba al texto. */
        aspect-ratio: auto;
        height: 430px;
        /* Sale del contenedor y llega al filo izquierdo de la pantalla */
        margin-left: calc(50% - 50vw);
        border-radius: 0 22px 22px 0;
    }
}

@media (min-width: 1400px) {
    .slitter-banda {
        height: 470px;
    }
}

.slitter-banda:hover {
    transform: translateY(-4px);
}

.slitter-banda:hover img {
    transform: scale(1.04);
}

/* ---------- Características ----------
   Un panel blanco con el texto a la izquierda y la foto vertical recortada
   a la derecha, de arriba abajo. Al ir dentro del panel, la 3:4 deja de
   leerse como una imagen suelta y se vuelve parte del bloque. */

.slitter-panel {
    display: grid;
    grid-template-columns: 1fr;
    overflow: hidden;
    border-radius: 24px;
    background: #fff;
    border: 1px solid rgba(21, 34, 58, .08);
    box-shadow: 0 24px 50px -34px rgba(21, 34, 58, .75);
}

@media (min-width: 900px) {
    .slitter-panel {
        grid-template-columns: minmax(0, 1fr) 300px;
    }
}

@media (min-width: 1200px) {
    .slitter-panel {
        grid-template-columns: minmax(0, 1fr) 360px;
    }
}

.slitter-panel-texto {
    padding: 2rem 1.6rem;
}

@media (min-width: 900px) {
    .slitter-panel-texto {
        padding: 3rem 3.2rem;
    }
}

/* La foto va como fondo del bloque, no dentro de un marco: así llena su
   parte del panel sin bordes ni esquinas propias. */
.slitter-panel-foto {
    position: relative;
    overflow: hidden;
    min-height: 260px;
    order: -1;
}

@media (min-width: 900px) {
    .slitter-panel-foto {
        min-height: 100%;
        order: 0;
    }
}

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

.slitter-panel:hover .slitter-panel-foto img {
    transform: scale(1.05);
}

/* ---------- Servicios de corte ----------
   Tres tarjetas conceptuales: ícono, nombre y una línea. La idea es que se
   entienda de un vistazo qué hay, no explicar el proceso. */

/* Dos por renglón, no tres: con cuatro tarjetas, una rejilla de tres deja
   la última sola al final. En dos columnas quedan 2 y 2, parejas. */
.cortes-tipos {
    display: grid;
    gap: 1.25rem;
    grid-template-columns: 1fr;
}

@media (min-width: 800px) {
    .cortes-tipos {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.5rem;
    }
}

.corte-card {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 0 1.2rem;
    align-items: start;
    padding: 1.9rem 1.8rem;
    border-radius: 20px;
    background: #fff;
    border: 1px solid rgba(21, 34, 58, .09);
    box-shadow: 0 18px 40px -32px rgba(21, 34, 58, .7);
    transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}

.corte-card:hover {
    transform: translateY(-6px);
    border-color: rgba(44, 108, 176, .28);
    box-shadow: 0 28px 50px -30px rgba(44, 108, 176, .5);
}

.corte-ico {
    grid-row: span 2;
    width: 52px;
    height: 52px;
    border-radius: 15px;
    display: grid;
    place-items: center;
    font-size: 19px;
    color: var(--azul);
    background: rgba(44, 108, 176, .1);
    transition: background-color .3s ease, color .3s ease, transform .35s ease;
}

.corte-card:hover .corte-ico {
    background: var(--azul);
    color: #fff;
    transform: rotate(-6deg);
}

.corte-card h3 {
    font-family: 'Archivo', sans-serif;
    font-variation-settings: "wdth" 106;
    font-weight: 800;
    font-size: 18px;
    color: var(--navy);
    margin: .35rem 0 .5rem;
    transition: color .25s ease;
}

.corte-card:hover h3 {
    color: var(--azul);
}

.corte-card p {
    font-size: 14.5px;
    line-height: 1.65;
    color: rgba(21, 34, 58, .75);
    margin: 0;
}

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

    .corte-card:hover,
    .corte-card:hover .corte-ico {
        transform: none !important;
    }
}

/* ---------- Cierre ---------- */

.perfiles-nota {
    font-size: 14px;
    color: rgba(21, 34, 58, .6);
    margin: 0 0 1.2rem;
}

.perfiles-cta {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    padding: .8rem 1.8rem;
    border-radius: 999px;
    background: var(--azul);
    color: #fff;
    font-size: 14.5px;
    font-weight: 600;
    box-shadow: 0 16px 34px -20px rgba(44, 108, 176, .9);
    transition: background-color .25s ease, transform .25s ease;
}

.perfiles-cta:hover {
    background: var(--navy);
    transform: translateY(-2px);
}

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

    .chip-perfil:hover,
    .perfiles-cta:hover {
        transform: none !important;
    }
}