/* bloque info */
.imagen-principal {
    width: 100%;
    height: 575px;
    border-radius: 10px;
    overflow: hidden;
}

.imagen-principal img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* Titulos */

.bold-title {
    color: var(--gris);
    font-size: 36px;
    font-style: normal;
    font-weight: 600;
    line-height: 150%; /* 54px */
    letter-spacing: -1.08px;
    text-transform: lowercase;
}

.bold-title::first-letter {
    text-transform: uppercase;
}

.light-title {
    color: var(--gris);
    font-size: 36px;
    font-style: normal;
    font-weight: 300;
    line-height: 150%; /* 54px */
    letter-spacing: -1.08px;
}

.product-atribute {
    color: var(--gris);
    font-size: 14px;
    font-style: normal;
    font-weight: 600;
    line-height: 150%; /* 21px */
    letter-spacing: -0.42px;
}
/* ========================= */

hr {
    background-color: var(--negro);
}

.columna-informacion {
    height: 575px;
}

.product-content {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.imagenes-secundarias {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    min-height: 115px;
    align-items: flex-start;
    gap: 8px;
    align-self: stretch;
}

.contenedor-imagen-secundaria a {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    color: var(--gris);
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 150%;
    letter-spacing: -0.42px;
    width: 175px;
}

.imagen-secundaria {
    box-sizing: border-box;
    padding: 8px;
    border-radius: var(--Border-radius, 10px);
    border: 1px solid var(--gris-20);
    width: 175px;
}

.imagen-secundaria-nombre {
    width: 100%;
    height: calc(3 * 1.5em);
    padding-right: 8px;
}

.ampliar-imagen {
    cursor: pointer;
}

.contenedor-imagen-secundaria img {
    width: 100%;
    height: 75px;
    object-fit: cover;
    border-radius: 6px;
}

.cta {
    display: flex;
    padding: 7px 20px;
    justify-content: center;
    align-items: center;
    gap: 10px;
    background-color: var(--principal);
    color: var(--gris);
    text-align: center;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 1.5;
    letter-spacing: -0.32px;
    border-radius: 1000px;
    width: fit-content;
    height: fit-content;
    transition: 0.3s;
}
.cta:hover {
    background-color: var(--gris);
    color: var(--blanco);
}

.enlace-flecha {
    text-decoration: none;
    color: inherit;
    display: flex;
    align-items: center;
}

/* breadcrum */
.breadcrum-link {
    color: var(--gris);
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 150%; /* 18px */
    letter-spacing: -0.36px;
    text-decoration: none;
    transition: 0.2s;
}

.breadcrum-link-actual {
    color: var(--gris);
    font-size: 14px;
    font-style: normal;
    font-weight: 600;
    line-height: 150%;
    letter-spacing: -0.36px;
    text-decoration: none;
    transition: 0.2s;
}

.breadcrum-link:hover,
.breadcrum-link-actual:hover {
    opacity: 0.6;
    color: var(--gris);
}

.imagen-ambiente,
.imagen-grafica {
    height: 575px;
    width: 100%;
    object-fit: cover;
    border-radius: 10px;
}

.enlace-producto {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: "Open Sans", sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.4;
    color: var(--gris);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
    transition: opacity 0.2s ease-in-out;
}

.enlace-producto:hover {
    opacity: 0.6;
    color: var(--gris);
}
.nombre-producto {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: "Open Sans", sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.4;
    color: #000;
    text-decoration: none;
}

.nombre-producto {
    color: var(--gris);
    font-size: 28px;
    font-style: normal;
    font-weight: 600;
    line-height: 150%; /* 42px */
    letter-spacing: -0.84px;
}

.icono-flecha {
    width: 24px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.texto-enlace,
.texto-nombre {
    display: flex;
    align-items: center;
}

@media (max-width: 991.98px) {
    .product-titles {
        padding-bottom: 32px;
    }

    .breadcrum-link {
        font-size: 12px;
    }

    .breadcrum-link-actual {
        font-size: 12px;
    }

    .columna-informacion {
        height: auto;
    }

    .cta {
        width: 100%;
    }

    .imagen-principal {
        height: 220px;
    }

    .imagenes-secundarias {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto; /* permite scroll horizontal */
        -webkit-overflow-scrolling: touch; /* smooth scroll en iOS */
        padding-bottom: 8px; /* opcional, para separarlo del borde */
        margin-right: -24px; /* sobresale del container si quieres */

        /* Ocultar scrollbar en todos los navegadores */
        scrollbar-width: none; /* Firefox */
        -ms-overflow-style: none; /* IE 10+ */
    }

    .imagenes-secundarias::-webkit-scrollbar {
        display: none; /* Chrome, Safari y Edge */
    }

    .contenedor-imagen-secundaria {
        flex: 0 0 auto; /* evita que se encojan las imágenes */
    }

    .product-titles {
        padding-bottom: 12px;
    }

    .bold-title {
        line-height: 1;
        padding-bottom: 1rem;
        margin-bottom: 0;
    }

    .light-title {
        line-height: 0.9;
    }
}

@media (max-width: 768.5px) {
    .imagen-ambiente,
    .imagen-grafica {
        height: 350px;
    }
}
@media (max-width: 500.5px) {
    .imagen-ambiente,
    .imagen-grafica {
        height: 250px;
    }
}