/**
 * Página Chiller. 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,
 * todas se cargan también acá. Este archivo solo tiene lo específico de
 * esta página: colores, la grilla de industrias y el carrusel de
 * categorías.
 */

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

.chiller-hero h1 strong,
.industrias :where(h2, h1.ax-h1p) strong,
.chiller-categorias :where(h2, h1.ax-h1p) strong {
    color: var(--color-chiller);
}

/* Soluciones para toda la industria: grilla informativa, no un selector —
   la tarjeta no enlaza a ninguna parte, el hover destapa la información de
   esa industria encima de la misma imagen. CSS puro, sin JS: no hay nada
   que alternar, el mouse (o el foco, por teclado) ya decide el estado —
   ver template-parts/chiller/industrias.php. Mismo criterio que
   .tecserchile-industria-* (tecserchile.css); no se generalizó a shared/
   porque cada línea tiene su propio color de acento y su propio repeater
   de campos, no hay markup en común que valga la pena compartir todavía. */
.chiller-industrias-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

@media (min-width: 640px) {
    .chiller-industrias-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

.chiller-industria-card {
    position: relative;
    overflow: hidden;
    border-radius: var(--radius-large);
    height: 160px;
    cursor: pointer;
}

.chiller-industria-media,
.chiller-industria-media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.chiller-industria-media img {
    transition: transform 0.45s ease-out;
}

.chiller-industria-card:hover .chiller-industria-media img,
.chiller-industria-card:focus .chiller-industria-media img {
    transform: scale(1.06);
}

.chiller-industria-media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(18, 18, 18, 0.85), transparent 65%);
}

.chiller-industria-title {
    position: absolute;
    z-index: 1;
    left: var(--space-16);
    right: var(--space-16);
    bottom: var(--space-12);
    color: var(--color-white);
    font-size: var(--text-body);
    font-weight: 700;
    opacity: 1;
    visibility: visible;
    transition: opacity 0.45s ease-out, visibility 0s linear 0.45s;
}

.chiller-industria-card:hover .chiller-industria-title,
.chiller-industria-card:focus .chiller-industria-title,
.chiller-industria-card:focus-within .chiller-industria-title {
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.45s ease-out;
}

.chiller-industria-info {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: var(--space-4);
    padding: var(--space-16);
    background: rgb(18 18 18 / 83%);
    color: var(--color-white);
    opacity: 0;
    visibility: hidden;
    overflow-y: auto;
    transition: opacity 0.45s ease-out, visibility 0s linear 0.45s;
}

.chiller-industria-card:hover .chiller-industria-info,
.chiller-industria-card:focus .chiller-industria-info,
.chiller-industria-card:focus-within .chiller-industria-info {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.45s ease-out;
}

@media (prefers-reduced-motion: reduce) {
    .chiller-industria-info {
        transition: none;
    }
}

.chiller-industria-info-title {
    font-size: var(--text-body);
    font-weight: 700;
}

.chiller-industria-text {
    font-size: var(--text-body-sm);
    color: var(--color-gray-03);
    line-height: 1.4;
}

/* Franja de marcas: solo los cuatro logos de la línea, sin encabezado. */

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

.ax-carrusel--marcas {
    box-shadow: none !important;
}

/* Categorías destacadas */
.chiller-categorias {
    background-color: var(--color-white);
}

@media (min-width: 1024px) {
    .ax-carrusel__mando {
        position: absolute;
    }
}

/* La diapositiva se estira a lo alto de la más alta de la fila —mismo
   criterio que .ax-producto/.ax-catalogo en carrusel.css— para que el botón
   quede a la misma altura aunque el texto de cada tarjeta mida distinto. */
.ax-carrusel__diapo:has(.chiller-categoria-card) {
    display: flex;
}

.chiller-categoria-card {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    border-radius: var(--radius-large);
    background: var(--color-white);
    overflow: hidden;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.10), 0 1px 2px -1px rgba(0, 0, 0, 0.10);
    padding: 1.5rem;
}

/* Sin aspect-ratio en el contenedor: la altura real la manda el
   img/placeholder de abajo con su propio height:215px fijo. Dejar los dos
   compitiendo es lo que abría un hueco entre la foto y el título en mobile
   —el contenedor reservaba el alto de un 4/3 más alto que esos 215px fijos
   del hijo, y el resto quedaba en blanco antes del título. */
.chiller-categoria-media img,
.chiller-categoria-media .media-placeholder {
    width: 100%;
    height: 215px !important;
    aspect-ratio: auto;
    object-fit: cover;
    box-shadow: none;
    border-radius: var(--radius-large);
    border: 1px solid var(--color-border);
}

.chiller-categoria-copy {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 0.75rem;
    padding-top: 1.5rem;
}

.chiller-categoria-copy h3 {
    font-size: var(--text-title-h6);
}

.chiller-categoria-copy p {
    flex: 1;
    color: var(--color-gray-01);
    font-size: var(--text-body-sm);
}

.chiller-categoria-copy .btn {
    align-self: flex-start;
    width: 100%;
}

/* Botones azules solo en Chiller (el resto del sitio sigue en rojo): "Ver
   más" de las categorías y "Agenda asesoría técnica" del showroom, para que
   combinen con el logo y la barra de accesos rápidos de esta página. */
.chiller-categoria-copy .btn-primary,
.chiller-showroom .showroom-cta {
    background: var(--color-chiller);
}

.chiller-categoria-copy .btn-primary:hover,
.chiller-showroom .showroom-cta:hover {
    background: var(--color-chiller-dark);
}

.chiller-categoria-copy .btn-primary {
    margin-top: 1rem;
}

/* Mismo criterio que los botones de arriba: el eyebrow y los check del
   listado del showroom también van en azul acá, no en el rojo de siempre. */
.chiller-showroom .eyebrow,
.chiller-showroom .checklist--outline svg {
    color: var(--color-chiller);
}