.descripcion-wrap {
    position: relative;
    max-width: 100%;
    font-size: 15px;
    line-height: 1.5;
    color: #333;
    margin-top: 1em;
}

/* Estado inicial: recortado */
.descripcion-recortada {
    max-height: 1500px;      /* Ajustá este número para decidir cuánta vista previa mostrás antes del botón */
    overflow: hidden;
    position: relative;
}

/* Degradado/fade al final cuando está recortado */
.descripcion-recortada::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 100px;
    background: linear-gradient(
        to bottom,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 0.4) 25%,
        rgba(255, 255, 255, 0.8) 70%,
        #fff 100%
    );
}

/* Estado expandido */
.descripcion-expandida {
    max-height: none;
    overflow: visible;
}

/* En expandido ocultamos el fade */
.descripcion-expandida::after {
    display: none;
}

/* Botón */
/* Botón "Ver más / Ver menos" con forma de pastilla + líneas laterales */
.boton-ver-mas {
    position: relative;
    padding: 8px 12px;
    font-size: 14px;
    line-height: 1.4;
    font-weight: 500;
    background: #000;         /* fondo negro */
    color: #fff;              /* texto blanco */
    border: 0;
    border-radius: 999px;     /* forma de pastilla */
    cursor: pointer;
    white-space: nowrap;
    min-width: 140px;
    max-width: 200px;
    text-align: center;
    box-sizing: border-box;

    /* centrado sin que el botón se estire a todo el ancho */
    display: inline-block;
    margin-top: 16px;
}

/* Aseguramos que el botón quede realmente centrado dentro del wrap */
.descripcion-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Líneas finitas a los costados que se desvanecen hacia afuera */
.boton-ver-mas::before,
.boton-ver-mas::after {
    content: "";
    position: absolute;
    top: 50%;
    height: 2px;
    width: 80px;          /* largo de cada línea horizontal */
    transform: translateY(-50%);
    pointer-events: none;
    border-radius: 2px;
}

/* Línea izquierda: nace fuerte en el botón y se desvanece hacia la izquierda */
.boton-ver-mas::before {
    right: 100%;
    margin-right: 12px;
    background: linear-gradient(
        to left,
        rgba(0,0,0,0.6) 0%,
        rgba(0,0,0,0.4) 40%,
        rgba(0,0,0,0) 100%
    );
}

/* Línea derecha: nace fuerte en el botón y se desvanece hacia la derecha */
.boton-ver-mas::after {
    left: 100%;
    margin-left: 12px;
    background: linear-gradient(
        to right,
        rgba(0,0,0,0.6) 0%,
        rgba(0,0,0,0.4) 40%,
        rgba(0,0,0,0) 100%
    );
}

/* Hover desktop opcional */
.boton-ver-mas:hover,
.boton-ver-mas:focus {
    background: #222;
    color: #fff;
}


@media (max-width: 576px) {
    .boton-ver-mas {
        width: 100%;
        text-align: center;
    }
}