/**
 * Página Tecserchile. Los primitivos compartidos (.media-placeholder,
 * .showroom-*) viven en home.css y nosotros.css;
 * .eyebrow/.checklist/.section/.section-head viven en layout.css. El layout
 * de hero/showroom
 * (.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: color y
 * las cuatro secciones propias (industrias, servicios, equipo,
 * recomendaciones) que no existen en las otras líneas.
 */

.tecserchile-hero h1 strong,
.tecserchile-industrias :where(h2, h1.ax-h1p) strong,
.tecserchile-servicios :where(h2, h1.ax-h1p) strong,
.tecserchile-equipo :where(h2, h1.ax-h1p) strong {
    color: var(--color-tecser);
}

/* Los botones de la portada toman el color de acento de la página desde micrositio.css (--acento). */

/* Industrias especializadas: 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/tecserchile/industrias.php. */
.tecserchile-industrias-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

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

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

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

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

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

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

.tecserchile-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;
}

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

.tecserchile-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;
}

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

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

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

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

/* Reseña bajo la grilla: foto + párrafos, mismo criterio de layout que
   .showroom-grid (nosotros.css) pero sin checklist ni CTA, con la foto a la
   izquierda (orden del markup) en vez de a la derecha. */
.tecserchile-resena {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-32);
    align-items: center;
    margin-top: var(--space-48);
}

@media (min-width: 1025px) {
    .tecserchile-resena {
        /* 55% la foto / 45% el texto: fr en vez de % para que el gap no se
           sume por encima del 100% del ancho disponible. stretch en vez de
           center: así la foto puede tomar el alto real del texto (ver
           .tecserchile-resena-media más abajo) en vez de quedar centrada
           con un alto fijo propio. */
        grid-template-columns: 11fr 9fr;
        gap: var(--space-64);
    }
}

.tecserchile-resena-copy p {
    margin-bottom: var(--space-16);
}

.tecserchile-resena-copy p:last-child {
    margin-bottom: 0;
}

.tecserchile-resena-media img,
.tecserchile-resena-media .media-placeholder {
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: var(--radius-large);
}

/* En desktop, en vez de un alto fijo o una proporción propia, la foto se
   estira a la altura real del párrafo de al lado (el más alto de los dos
   define el alto de la fila, ver align-items:stretch de arriba) — así queda
   proporcional al contenido en vez de un número fijo que puede quedar corto
   o largo según cuánto texto haya. Tiene que ir DESPUÉS de la regla de
   arriba: misma especificidad, así que el orden en el archivo decide cuál
   gana dentro del breakpoint de escritorio. wp_get_attachment_image()
   imprime los atributos width/height nativos del archivo en el <img>; sin
   este height explícito algunos motores usan esos atributos como alto en
   vez de recalcularlo. */
@media (min-width: 1025px) {
    .tecserchile-resena-media {
        height: 100%;
    }

    .tecserchile-resena-media img,
    .tecserchile-resena-media .media-placeholder {
        height: 100%;
        aspect-ratio: auto;
    }
}

/* Principales servicios: grilla de tarjetas foto + rótulo superpuesto.
   Flexbox en vez de grid: con flex-wrap + justify-content: center, la
   última fila incompleta queda centrada en vez de pegada a la izquierda
   con un hueco vacío (ver mismo criterio en .tecserchile-equipo-grid). */
.tecserchile-servicios {
    background-color: var(--color-white);
}

.tecserchile-servicios-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-16);
}

.tecserchile-servicio {
    position: relative;
    display: block;
    flex: 0 1 calc((100% - var(--space-16)) / 2);
    border-radius: var(--radius-large);
    overflow: hidden;
    height: 160px;
    background: var(--color-bg-muted);
    color: inherit;
    text-decoration: none;
}

@media (min-width: 640px) {
    .tecserchile-servicio {
        flex: 0 1 calc((100% - var(--space-16) * 3) / 4);
    }
}

.tecserchile-servicio-media {
    position: absolute;
    inset: 0;
}

.tecserchile-servicio-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.tecserchile-servicio:hover .tecserchile-servicio-media img {
    transform: scale(1.06);
}

.tecserchile-servicio::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(18, 18, 18, 0.85), transparent 65%);
    z-index: 1;
}

.tecserchile-servicio > span:last-child {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    padding: var(--space-12) var(--space-16);
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.65) 0%, rgba(0, 0, 0, 0) 100%);
    color: var(--color-white);
    font-weight: 600;
    font-size: var(--text-body);
}

/* Conoce nuestro equipo técnico */
.tecserchile-equipo-filas {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-32);
    margin-bottom: var(--space-48);
}

@media (min-width: 900px) {
    .tecserchile-equipo-filas {
        grid-template-columns: 1fr 1fr;
    }
}

.tecserchile-equipo-grupo {
    box-shadow: 0 4px 24px 0 rgba(0, 0, 0, 0.20);
    border-radius: var(--radius-large);
    overflow: hidden;
}

.tecserchile-equipo-grupo-titulo {
    font-weight: 700;
    color: var(--color-white);
    background: var(--color-tecser);
    padding: var(--space-12) var(--space-16);
    text-align: center;
}

.tecserchile-equipo-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-16);
    background: var(--color-bg-muted);
    border-radius: 0 0 var(--radius-standard) var(--radius-standard);
    padding: var(--space-24) var(--space-16);
}

.tecserchile-equipo-grid--grande {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* Gerencia o Equipo Administrativo con una sola persona (ej. hoy mismo
   "Equipo Administrativo"): que ocupe las dos columnas y quede centrada en
   vez de pegada a la izquierda con un hueco vacío al lado. */
.tecserchile-equipo-grid--grande .tecserchile-persona:only-child {
    grid-column: 1 / -1;
    justify-self: center;
}

.tecserchile-equipo-grupo--especialistas .tecserchile-equipo-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (min-width: 640px) {
    .tecserchile-equipo-grupo--especialistas .tecserchile-equipo-grid {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }
}

.tecserchile-persona {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--space-4);
}

.tecserchile-persona-foto {
    width: 96px;
    height: 96px;
    border-radius: var(--radius-full);
    overflow: hidden;
    background: var(--color-white);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-gray-01);
    margin-bottom: var(--space-8);
    border: 4px solid var(--color-fondo);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.10), 0 2px 4px -2px rgba(0, 0, 0, 0.10);
}

.tecserchile-persona--grande .tecserchile-persona-foto {
    width: 128px;
    height: 128px;
}

.tecserchile-persona-foto img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.tecserchile-persona-foto svg {
    width: 48px;
    height: 48px;
}

.tecserchile-persona-nombre {
    font-weight: 700;
    font-size: var(--text-body);
}

.tecserchile-persona-cargo,
.tecserchile-persona-contacto {
    font-size: var(--text-body-sm);
    color: var(--color-muted);
}

.tecserchile-persona-contacto {
    display: flex;
    flex-direction: column;
}

.tecserchile-persona-contacto a {
    color: var(--color-tecser);
}

.tecserchile-persona-certificado {
    display: inline-flex;
    align-items: center;
    gap: var(--space-4);
    color: var(--color-tecser);
    font-size: var(--text-body-sm);
    font-weight: 600;
    margin-top: var(--space-4);
}

.tecserchile-persona-certificado svg {
    width: 12px;
    height: 12px;
}

/* Recomendaciones */
.tecserchile-recomendaciones {
    background-color: var(--color-white);
}

.tecserchile-recomendaciones-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-16);
}

@media (min-width: 768px) {
    .tecserchile-recomendaciones-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.tecserchile-recomendacion {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-12);
    border-radius: var(--radius-large);
    padding: var(--space-32);
    box-shadow: 6px 6px 54px 0 rgba(0, 0, 0, 0.06);

}

.tecserchile-recomendacion-icono {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: var(--radius-standard);
    background: var(--color-bg-muted);
    color: var(--color-tecser);
}

.tecserchile-recomendacion-icono svg {
    width: 22px;
    height: 22px;
}

.tecserchile-recomendacion p {
    font-weight: 600;
    flex: 1;
}

.tecserchile-recomendacion a {
    color: var(--color-tecser);
    font-weight: 600;
    font-size: var(--text-body-sm);
    text-transform: uppercase;
    text-decoration: underline;
}

/* Servicios Tecser Chile: mismo criterio de color que .chiller-showroom. */
.tecserchile-showroom .showroom-cta {
    background: var(--color-tecser);
}

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

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