/**
 * Layout compartido entre las páginas de línea (Chiller, Envasados,
 * Anticorte, Automatización, Tecserchile): hero, barra de accesos rápidos y
 * catálogo descargable — el markup vive en template-parts/shared/*.php, acá
 * solo el CSS bajo el prefijo .linea-*. Cada página pisa color u otros
 * detalles propios en su CSS (chiller.css, envasados.css, ...) apuntando a
 * su clase modificadora ({pagina}-hero, {pagina}-cta, etc.) que el parcial
 * compartido ya agrega junto a .linea-*.
 *
 * El primitivo .showroom-* sigue viviendo en home.css/nosotros.css, y
 * .eyebrow/.checklist/.section/.section-head/.linea-faq-* en layout.css
 * (ver inc/enqueue.php) — este archivo no los repite. .linea-faq-* se movió
 * de acá a layout.css porque "Preguntas frecuentes" es activable en
 * cualquier página, no solo las de línea.
 */

/* Hero */
.linea-hero {
    padding-block: 6rem 4rem;
    background: var(--color-white);
    text-align: center;
}

@media (max-width: 479px) {
    /* En celulares angostos, con el padding-top de siempre, el párrafo de
       intro (largo variable según la página) o el botón de Tecserchile caen
       justo en la franja donde flotan los floating-buttons (WhatsApp/volver
       arriba, fixed abajo a la derecha) y quedan tapados. Se achica el
       padding de arriba para subir todo el bloque de texto por encima de
       esa franja — más simple y prolijo que empujar cada elemento hacia
       abajo (eso los hace *cruzar por el medio* de los botones en vez de
       despejarlos). */
    .linea-hero {
        padding-top: 1rem;
    }
}

.linea-hero-logo {
    height: 120px;
    width: auto;
    margin: 0 auto 2.5rem;
}

.linea-hero h1 {
    max-width: 70rem;
    margin-inline: auto;
    font-size: var(--text-header-h3);
    font-weight: 400;
}

.linea-hero p {
    max-width: 70rem;
    margin: 2.5rem auto 0;
    color: var(--color-body);
}

@media (min-width: 640px) {
    .linea-hero h1 {
        font-size: var(--text-header-h2);
    }
}

.linea-hero-botones {
    display: flex;
    flex-wrap: wrap;
    justify-content: center; /* la portada va centrada */
    gap: 0.75rem;
    margin-top: 2rem;
}

.linea-hero-cta {
    margin-top: 0;
}

/* Color de acento de cada página de línea (campo «Color de acento» de la página → --color-{línea}): los botones de la
   portada con estilo «Relleno» o «Con borde» lo toman. El botón «WhatsApp» queda en su verde. */
.chiller-hero { --acento: var(--color-chiller); --acento-oscuro: var(--color-chiller-dark); }
.envasados-hero { --acento: var(--color-envasados); --acento-oscuro: var(--color-envasados-dark); }
.anticorte-hero { --acento: var(--color-anticorte); --acento-oscuro: var(--color-anticorte-dark); }
.automatizacion-hero { --acento: var(--color-automatizacion); --acento-oscuro: var(--color-automatizacion-dark); }
.tecserchile-hero { --acento: var(--color-tecser); --acento-oscuro: var(--color-tecser-dark); }

.linea-hero .linea-hero-cta.btn-primary {
    border-color: var(--acento, var(--color-brand-red));
    background: var(--acento, var(--color-brand-red));
}

.linea-hero .linea-hero-cta.btn-primary:hover {
    border-color: var(--acento-oscuro, var(--color-brand-red-dark));
    background: var(--acento-oscuro, var(--color-brand-red-dark));
}

.linea-hero .linea-hero-cta.btn-secondary {
    border-color: var(--acento, var(--color-brand-red));
    color: var(--acento, var(--color-brand-red));
}

.linea-hero .linea-hero-cta.btn-secondary:hover:not(:disabled):not([aria-disabled="true"]) {
    border-color: var(--acento, var(--color-brand-red));
    background: var(--acento, var(--color-brand-red));
    color: var(--color-white);
}

.linea-hero-media {
    margin-top: 2.5rem;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
}

.linea-hero-media img {
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: var(--radius-large);
    max-height: 286px;
}

/* La cantidad de fotos varía por página (1 a 4): el grid se acomoda solo
   según la clase modificadora que agrega el template part. */
.linea-hero-media--1 {
    grid-template-columns: minmax(0, 1fr);
}

.linea-hero-media--2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.linea-hero-media--4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

@media (max-width: 639px) {
    .linea-hero-media {
        grid-template-columns: 1fr;
    }

    /* Con todas las fotos apiladas la sección queda larguísima en mobile:
       acá se muestra solo la primera, sea cual sea el total. */
    .linea-hero-media img:nth-child(n + 2) {
        display: none;
    }
}

/* Barra de accesos rápidos */
.linea-cta-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.5rem 0;
    padding-block: 0.85rem;
}

.linea-cta a {
    display: inline-block;
    padding-inline: 1.25rem;
    font-weight: 600;
    font-size: var(--text-label-sm);
    color: var(--color-white);
    transition: all .4s;
}

.linea-cta a:hover {
    opacity: 0.6;
}

.linea-cta-separador {
    width: 1px;
    height: 1rem;
    background: rgba(255, 255, 255, 0.35);
}

/* Catálogo único: con un solo PDF la tarjeta angosta del carrusel queda con
   mucho aire vacío, así que se pinta como franja horizontal —foto a un lado,
   texto al otro— en vez de carrusel. Con dos o más sigue siendo el carrusel
   de siempre (ver template-parts/shared/catalogos.php). */
.linea-catalogo-unico {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 4rem;
    border-radius: var(--radius-large);
    background: var(--color-white);
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.10), 0 1px 2px -1px rgba(0, 0, 0, 0.10);
    padding: 2rem;
    max-width: 900px;
    margin: auto;
}

.linea-catalogo-unico-media {
    flex: 0 0 min(320px, 40%);
}

.linea-catalogo-unico-media img,
.linea-catalogo-unico-media .media-placeholder {
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: contain;
    max-height: 250px;
    box-shadow: none;
    border-radius: var(--radius-large);
    border: 1px solid var(--color-border);
}

/* Sin flex:1: el texto no se estira a llenar la tarjeta, así que el grupo
   completo (foto + texto) queda corrido hacia la derecha por el
   justify-content de arriba en vez de pegado a la izquierda con un vacío
   enorme del otro lado. */
.linea-catalogo-unico-copy {
    display: flex;
    flex: 0 1 32rem;
    flex-direction: column;
    gap: 1rem;
}

.linea-catalogo-unico-copy h3 {
    font-size: var(--text-title-h5);
}

.linea-catalogo-unico-lista {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    color: var(--color-gray-01);
    font-size: var(--text-body-sm);
}

.linea-catalogo-unico-lista li {
    padding-left: 1.1rem;
    position: relative;
}

.linea-catalogo-unico-lista li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.55em;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: currentColor;
}

.linea-catalogo-unico .btn {
    align-self: flex-start;
}

@media (max-width: 767px) {
    .linea-catalogo-unico {
        flex-direction: column;
        align-items: stretch;
        gap: 1.5rem;
    }

    .linea-catalogo-unico-media {
        flex-basis: auto;
    }

    /* En columna el `flex: 0 1 32rem` de arriba pasa a ser la altura, no el
       ancho, y deja un vacío enorme bajo el botón: acá vuelve a su alto
       natural. */
    .linea-catalogo-unico-copy {
        flex: auto;
    }
}

/* Casos de éxito: mismo fondo blanco en todas las páginas de línea. */
#casos-exito {
    background: var(--color-white);
}