/* ===========================
   READ MORE — CSS INDEPENDIENTE
   =========================== */

.read-more-wrapper {
    display: block;
}

.read-more {
    color: #0077cc !important;
    cursor: pointer;
    text-decoration: underline;
    font-size: 13px;
    display: inline-block;
    margin-top: 4px;
}

/* Truncado del texto */
.descripcion {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Texto expandido */
.descripcion.expanded {
    -webkit-line-clamp: unset;
    overflow: visible;
}

/* Evitar que palabras largas rompan el diseño en móvil */

.producto,
.producto p,
.producto h3 {
    overflow-wrap: break-word;
    word-wrap: break-word;
    word-break: normal;
}

.producto h3 {
    font-weight: 500;
}

@media (max-width: 600px) {
    .producto,
    .producto p,
    .producto h3,
    .descripcion {
        word-break: normal !important;
        overflow-wrap: break-word !important;
        word-wrap: break-word !important;
        white-space: normal !important;
    }
}

/* Ajuste real para PC */
@media (min-width: 1024px) {

    .grid-contenedor {
        gap: 12px;
    }

    .producto {
        width: 100%;
        max-width: 240px;
        margin: 0;
    }
}

.descripcion {
    display: -webkit-box;
    -webkit-line-clamp: 3; /* siempre 3 líneas */
    -webkit-box-orient: vertical;
    overflow: hidden;
    position: relative;
    min-height: 3.6em;
}

/* Cuando se expande, NO crece la tarjeta */
.descripcion.expanded {
    -webkit-line-clamp: unset;
    max-height: 120px; /* altura visible */
    overflow-y: auto;  /* scroll vertical */
    padding-right: 6px; /* espacio para el scroll */
}

/* Scroll fino y elegante */
.descripcion.expanded::-webkit-scrollbar {
    width: 6px;
}

.descripcion.expanded::-webkit-scrollbar-thumb {
    background: #ccc;
    border-radius: 3px;
}

.descripcion.expanded::-webkit-scrollbar-track {
    background: transparent;
}

/* En pantallas pequeñas, quitar scroll interno */
@media (max-width: 600px) {
    .descripcion.expanded {
        max-height: none;
        overflow: visible;
        -webkit-line-clamp: unset;
        padding-right: 0;
    }
}