/**
 * Página Nosotros. El primitivo .stats-card/.stats-item/.stats-icon vive en
 * home.css; .section/.section-head, .eyebrow y .checklist viven en
 * layout.css (ver los comentarios ahí) porque cada uno tiene un selector
 * "Mostrar en esta página" que lo activa desde cualquier página, no solo
 * esta. Este archivo solo tiene lo que es específico de esta página.
 */

/* Placeholder de foto: se pinta mientras no haya una imagen real cargada
   (ver el comentario en andexport_nosotros_historia()/andexport_nosotros_showroom()). */
.media-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    width: 100%;
    aspect-ratio: 4 / 3;
    border-radius: var(--radius-large);
    background: var(--color-bg-muted);
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    color: var(--color-gray-02);
}

.media-placeholder svg {
    width: 2.5rem;
    height: 2.5rem;
}

.media-placeholder span {
    font-size: var(--text-body-sm);
    font-weight: 600;
}

/* Nuestra historia */
.historia-grid {
    display: grid;
    gap: 2.5rem;
}

.historia-copy p {
    margin-top: 1rem;
    color: var(--color-body);
}

.historia-media {
    position: relative;
    /* Ítem de grid: sin esto, min-width:auto deja que el contenido interno
       (la fila de miniaturas) empuje esta columna más ancha que su pista y
       desborda .historia-grid entero en mobile. */
    min-width: 0;
}

.historia-foto {
    width: 100%;
    height: auto;
    aspect-ratio: 3 / 3;
    object-fit: cover;
    border-radius: var(--radius-large);
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    max-height: 520px;
}

.historia-galeria {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

/* Overflow horizontal a propósito: puede haber más de 5 miniaturas y no
   queremos que salten a una segunda fila y descuadren la sección. */
.historia-thumbs {
    display: flex;
    justify-content: space-between;
    gap: 0.75rem;
    overflow-x: auto;
    padding-bottom: 1rem;
    min-width: 0;
}

.historia-thumbs li {
    display: flex;
    flex: 1 1 0;
    min-width: 4.5rem;
}

.historia-thumb {
    flex: 1 1 0;
    width: 100%;
    min-width: 4.5rem;
    height: 94px;
    padding: 0;
    border: 2px solid var(--color-white);
    border-radius: var(--radius);
    overflow: hidden;
    background: none;
    cursor: pointer;
    transition: border-color 0.15s ease;
    box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.25);
}

.historia-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.historia-thumb:hover {
    border-color: var(--color-border);
}

.historia-thumb.is-active {
    border-color: var(--color-brand-red);
}

.historia-badge {
    position: absolute;
    top: -1.25rem;
    /* Adentro de la imagen en mobile: el overhang de -1.5rem (abajo, desde
       640px) suma al ancho de .historia-media y en pantallas angostas
       empuja la badge fuera del viewport. */
    right: 1rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.5rem;
    border-radius: var(--radius-medium);
    background: var(--color-white);
    box-shadow: 12px 12px 39px 0 rgba(158, 158, 158, 0.22), 5px 10px 10px 0 rgba(233, 233, 233, 0.25) inset, -6px -8px 10px 0 rgba(248, 248, 248, 0.25) inset;
}

@media (min-width: 640px) {
    .historia-badge {
        right: -1.5rem;
    }
}

.historia-badge-icono {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 4rem;
    height: 4rem;
    border-radius: 50%;
    background: rgba(222, 26, 28, 0.1);
}

.historia-badge-icono svg {
    width: 1.75rem;
    height: 1.75rem;
}

.historia-badge-copy {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.historia-badge-numero {
    color: var(--color-ink);
    font-size: var(--text-title-h5);
    font-weight: 700;
}

.historia-badge-texto {
    font-size: var(--text-body-sm);
    color: var(--color-muted);
}

@media (min-width: 1024px) {
    .historia-grid {
        grid-template-columns: 1.1fr 1fr;
        align-items: center;
    }
}

/* Presencia internacional */
.paises-lista {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1.5rem 2rem;
}

.paises-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    min-width: 4rem;
}

.paises-bandera {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 4rem;
    height: 4rem;
    border-radius: 50%;
    overflow: hidden;
    background: var(--color-bg-muted);
    box-shadow: inset 0 0 0 1px var(--color-border);
}

.paises-bandera svg,
.paises-bandera img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.paises-item .text-caption {
    color: var(--color-muted);
}

/* Ventajas */
.ventajas-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.25rem;
}

.ventaja-card {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1.75rem 1.25rem;
    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);
}

.ventaja-icono {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    border-radius: var(--radius-large);
    background: rgba(222, 26, 28, 0.1);
    color: var(--color-brand-red);
}

.ventaja-icono img,
.ventaja-icono svg {
    width: 1.75rem;
    height: 1.75rem;
    object-fit: contain;
}

.ventaja-card h3 {
    font-size: var(--text-title-h6);
}

.ventaja-card p {
    color: var(--color-gray-01);
    font-size: var(--text-body-sm);
}

@media (max-width: 350px) {
    .ventajas-grid {
        grid-template-columns: 1fr;
    }
}

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

/* Conócenos: pestañas de .division-tab/.division-panel (home.css) con solo
   3 ítems — ver el comentario en template-parts/nosotros/conocenos.php. */
.conocenos .division-tabs {
    margin-top: 2.5rem;
}

/* Botón "Explorar página" (Tecserchile/ItalZip, si tienen URL cargada).
   Scoped a .conocenos para no tocar .division-copy del home, que comparte
   la misma clase pero nunca tiene este botón. */
.conocenos .division-copy {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
}

.conocenos .division-copy-text {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    flex: 1 1 280px;
}

.conocenos .division-copy-cta {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.75rem 1.5rem;
    border-radius: var(--radius-pill);
    background: var(--tab-color, var(--color-brand-red));
    color: var(--color-white);
    font-weight: 600;
    white-space: nowrap;
    transition: opacity 0.15s ease;
}

.conocenos .division-copy-cta:hover {
    opacity: 0.85;
}

/* Respaldo en texto cuando el ítem no tiene logo (hoy, ItalZip) — mismo
   criterio que andexport_marcas_logo() del plugin: un nombre en vez de un
   hueco en blanco. */
.division-tab-nombre {
    padding-inline: 0.5rem;
    font-weight: 700;
    color: var(--color-ink);
}

.division-tab-nombre--panel {
    font-size: var(--text-title-h4);
}

.conocenos-stats {
    margin-top: 4rem;
}

.conocenos-stats[hidden] {
    display: none;
}

/* Nuestro showroom */
#showroom {
    background-color: var(--color-white);
}

.showroom-grid {
    display: grid;
    gap: 2.5rem;
}

.showroom-copy p {
    margin-top: 0.75rem;
    color: var(--color-body);
}

.showroom-cta {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    margin-top: 2rem;
}

.showroom-cta svg {
    flex-shrink: 0;
}

.showroom-media {
    margin: 0;
    position: relative;
}

.showroom-media img {
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: var(--radius-large);
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    filter: brightness(0.65);
    max-height: 480px;
}

.showroom-media figcaption {
    font-size: var(--text-body-sm);
    color: var(--color-white);
    position: absolute;
    bottom: 1rem;
    left: 1rem;
    z-index: 999;
    background: rgba(255, 255, 255, 0.10);
    border-radius: var(--radius-pill);
    padding: 0.5rem 1rem;
}

.showroom-mapa {
    margin-top: 3rem;
    border-radius: var(--radius-large);
    overflow: hidden;
}

.showroom-mapa iframe {
    display: block;
    width: 100%;
    height: 400px;
    border: 0;
}

@media (min-width: 1024px) {
    .showroom-grid {
        grid-template-columns: 1.1fr 1fr;
        align-items: center;
    }
}