/**
 * Página Anticorte. Los primitivos compartidos (.media-placeholder,
 * .showroom-*) viven en home.css y nosotros.css;
 * .eyebrow/.checklist/.section/.section-head/.linea-faq-* viven en
 * layout.css. El layout de hero/cta/catálogo (.linea-*) vive en
 * micrositio.css — ver inc/enqueue.php.
 * Este archivo solo tiene lo específico de esta página: color y las 3
 * grillas propias (técnicas, características, guantes+video).
 */

/* Barra de accesos rápidos: color propio de Anticorte. */
.anticorte-cta {
    background: var(--color-anticorte);
}

.anticorte-hero h1 strong {
    color: var(--color-anticorte);
}

/* Franja de marcas: solo los dos logos de la línea, sin encabezado. */
.ax-carrusel--marcas {
    box-shadow: none !important;
}

.anticorte-marcas {
    background: var(--color-white);
}

/* Nuestras cinco técnicas de seguridad */

/* Tarjeta horizontal (imagen izq. + tag/nombre/bajada der.), 5 por fila.
 * Flex (no grid): así, si el número de técnicas no es múltiplo de 5, la
 * fila sobrante queda centrada en vez de pegada a la izquierda. */
.anticorte-tecnicas-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1.5rem;
}

.anticorte-tecnica-card {
    flex: 0 0 100%;
    min-width: 0;
}

@media (min-width: 480px) {
    .anticorte-tecnica-card {
        flex-basis: calc(50% - 0.75rem);
    }
}

@media (min-width: 640px) {
    .anticorte-tecnica-card {
        flex-basis: calc(33.333% - 1rem);
    }
}

@media (min-width: 1025px) {
    .anticorte-tecnica-card {
        flex-basis: calc(20% - 1.2rem);
    }
}

.anticorte-tecnica-card {
    display: flex;
    gap: 0.75rem;
}

.anticorte-tecnica-media {
    flex: 0 0 auto;
}

.anticorte-tecnica-media img,
.anticorte-tecnica-media .media-placeholder {
    width: 55px;
    height: 55px;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    background: transparent;
    box-shadow: none;
}

.anticorte-tecnica-media .media-placeholder svg {
    width: 1.75rem;
    height: 1.75rem;
    color: var(--color-ink);
}

.anticorte-tecnica-body {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
}

.anticorte-tecnica-tag {
    font-size: var(--text-body-sm);
    font-weight: 400;
    color: var(--color-body);
}

.anticorte-tecnica-card h3 {
    font-size: var(--text-title-h5);
    font-weight: 700;
    line-height: 1.2;
    color: var(--color-ink);
}

.anticorte-tecnica-card p {
    color: var(--color-muted);
    font-size: var(--text-body-sm);
    font-weight: 400;
    line-height: 1.3;
}

@media (max-width: 639px) {
    .anticorte-tecnica-card {
        gap: 1rem;
    }
}

.anticorte-caracteristica-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.2rem;
    padding: 1.5rem 1rem;
    border-radius: var(--radius-large);
    background: var(--color-bg-muted);
    text-align: center;
}

.anticorte-caracteristica-icono {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 50%;
    background: var(--color-white);
    color: var(--color-anticorte);
}

.anticorte-caracteristica-icono svg {
    width: 1.75rem;
    height: 1.75rem;
}

.anticorte-caracteristica-icono--imagen {
    overflow: hidden;
}

.anticorte-caracteristica-icono--imagen img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.anticorte-caracteristica-card p {
    color: #000000;
    font-size: 16px;
}

/* Productos */
.productos {
    background-color: var(--color-white);
}

/* Características de guantes segumass */
.anticorte-caracteristicas {
    background-color: var(--color-bg-muted);
}

.anticorte-caracteristicas .anticorte-caracteristica-card {
    background: var(--color-white);
    box-shadow: 0 6px 24px 0 rgba(0, 0, 0, 0.08);
    text-align: center;
}

.anticorte-caracteristicas-grid {
    display: grid;
    grid-template-columns: repeat(1, minmax(0, 1fr));
    gap: 1.5rem;
}

.anticorte-caracteristica-card h3 {
    color: var(--color-anticorte);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
}

@media (min-width: 640px) {
    .anticorte-caracteristicas-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 1025px) {
    .anticorte-caracteristicas-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

/* Guantes certificados ISP */
.anticorte-guantes {
    background-color: var(--color-white);
}

/* Grilla normal de 2 partes: productos a la izquierda (45%), video a la
 * derecha (55%). Sin video, .anticorte-guantes-productos queda como único
 * hijo y ocupa el ancho completo en vez de dejar un hueco vacío al lado. */
.anticorte-guantes-grid {
    display: grid;
    grid-template-columns: repeat(1, minmax(0, 1fr));
    gap: 1.5rem;
    align-items: stretch;
}

@media (min-width: 768px) {
    .anticorte-guantes-grid {
        grid-template-columns: minmax(0, 45%) minmax(0, 55%);
    }
}

.anticorte-guantes-grid > .anticorte-guantes-productos:only-child,
.anticorte-guantes-grid > .anticorte-guantes-carrusel:only-child {
    grid-column: 1 / -1;
}

/* Con más de 2 productos la columna es un carrusel (motor de andexport-core/assets/carrusel.css): sin esto, como
   hijo de la grilla, la pista ensancharía la columna en vez de desplazarse. */
.anticorte-guantes-carrusel {
    min-width: 0;
}

.anticorte-guantes-productos {
    display: grid;
    grid-template-columns: repeat(1, minmax(0, 1fr));
    gap: 1.5rem;
}

@media (min-width: 480px) {
    .anticorte-guantes-productos {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Sin video: el grupo mide un 20 % del contenedor por producto (con un mínimo para que 1 sola ficha no quede
   diminuta), centrado, y las fichas en una fila. En pantallas chicas se mantiene la grilla de 1 o 2 columnas. */
@media (min-width: 768px) {
    .anticorte-guantes-productos.anticorte-guantes-productos--solos {
        grid-template-columns: repeat(var(--n, 2), minmax(0, 1fr));
        max-width: max(calc(var(--n, 2) * 20%), 15rem);
        margin-inline: auto;
    }
}

.anticorte-guante-video {
    aspect-ratio: 4 / 3;
    border-radius: var(--radius-large);
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.15);
    overflow: hidden;
}

@media (min-width: 768px) {
    /* Desde acá los productos y el video van en columnas lado a lado (ver
       .anticorte-guantes-grid arriba): el video suelta su aspect-ratio fijo
       y se estira a la misma altura que la columna de productos. */
    .anticorte-guante-video {
        aspect-ratio: auto;
        height: 100%;
    }
}

.anticorte-guante-video iframe {
    width: 100%;
    height: 100%;
    border: 0;
}

/* Botones en el color de Anticorte en vez del rojo de siempre —igual el
   rojo de marca ya combina, pero el hover se pisa con el tono oscuro propio
   de esta línea, mismo criterio que chiller.css/envasados.css. */
.anticorte-showroom .showroom-cta {
    background: var(--color-anticorte);
}

.anticorte-showroom .showroom-cta:hover {
    background: var(--color-anticorte-dark);
}

.anticorte-showroom .eyebrow,
.anticorte-showroom .checklist--outline svg {
    color: var(--color-anticorte);
}