.descripcion-wrap {
    position: relative;
    max-width: 100%;
}

/* Separación entre bullets en el contenido general */
.descripcion-wrap ul:not(.pagination) > li{
    margin-bottom: 8px;
}
.descripcion-wrap ul:not(.pagination) > li:last-child{
    margin-bottom: 0;
}

/* Más aire ARRIBA del H2 (separa el bloque anterior del H2) */
.descripcion-wrap h3 {
    margin-top: 1.75em;
}

.descripcion-wrap h2 + .table-responsive{
    margin-top: 18px !important;
  }

 /* Más espacio SOLO entre el párrafo y la grilla (container) dentro de la descripción */
.descripcion-wrap > p + .container-fluid {
    margin-top: 2em;  /* ajustá a gusto */
}

/* Aire entre la grilla (container-fluid) y el primer H2 que viene después */
.descripcion-wrap > .container-fluid + h2{
    margin-top: 1.5em;
  }

/* 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;
    display: inline-block;
    margin-top: 16px;
    margin-bottom: 10px;

    /* alto / proporción visual */
    padding: 5px 16px;          /* un toque más de aire horizontal */
    line-height: 1.4;
    font-weight: 500;

    background: #337AB7;        /* tu azul Bootstrap actual */
    color: #fff;
    border: 0;
    border-radius: 999px;       /* pastilla */
    cursor: pointer;

    /* ancho consistente en todas las orientaciones */
    white-space: nowrap;        /* evita salto de línea del texto */
    min-width: 170px;           /* era 140px: lo agrandamos un poco */
    max-width: none;
    text-align: center;
    box-sizing: border-box;
}

/* Aseguramos que el botón quede realmente centrado dentro del wrap */
.descripcion-wrap {
    display: block;
    max-width: 100%;
}

.descripcion-wrap .boton-ver-mas {
  align-self: center;      /* mantiene el botón centrado */
}

/* 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: 1px;
    width: 80px;          /* largo de cada línea horizontal */
    transform: translateY(-50%);
    pointer-events: none;
    border-radius: 1px;
}

/* 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: #286090;
}

/* Imágenes con aire y responsive */
.descripcion-wrap img{
    display: block;
    max-width: 100%;
    height: auto;
    margin: 1.2em auto 1.4em;
  }
  
/* Imágenes dentro de la descripción: responsive + look más pro (contenido) */
.descripcion-wrap img,
.descripcion-wrap p img{
  max-width: 100% !important;
  height: auto !important;
  display: block;

  margin: 1.4em 0 !important;       /* NO auto -> no centra */
  margin-left: 0 !important;
  margin-right: auto !important;     /* por si viene con ancho fijo */

  border-radius: 10px;
  border: 1px solid #ececec;
  box-shadow: 0 10px 22px rgba(0,0,0,0.10);
}

/* FIX: NO aplicar el look "tarjeta" a imágenes de productos (grillas / thumbnails) */
.descripcion-wrap .thumbnail img{
    display: block !important;
    margin: 0 auto !important;        /* centra la imagen dentro de la card */
    max-width: 100% !important;
    height: auto !important;
  
    border-radius: 0 !important;      /* sin bordes redondeados */
    border: 0 !important;
    box-shadow: none !important;
  }

/* Asegura que TODOS los iframes dentro de la descripción sean responsive */
.descripcion-wrap iframe,
.descripcion-wrap p iframe {
    max-width: 100% !important;
    aspect-ratio: 16 / 9;
    height: auto !important;
    display: block;
    margin: 1.4em 0;   /* arriba/abajo 1.4em, izquierda/derecha 0 */
}

/* Blockquote dentro del contenido */
.descripcion-wrap blockquote{
    margin: 18px 0;              /* solo arriba/abajo */
    margin-left: 0;
    margin-right: 0;
    width: 100%;
    max-width: none;
    box-sizing: border-box;

    padding: 12px 14px;
    border-left: 3px solid rgba(217, 37, 29, 0.28);
    background: rgba(217, 37, 29, 0.04);
    border-radius: 8px;
}

/* Evita márgenes raros adentro */
.descripcion-wrap blockquote p{
    margin: 0;
}

/* Aire en el interlineado de párrafos dentro de la descripción */
.descripcion-wrap p {
    line-height: 1.75;
}

/* Si viene justo después de un párrafo, más aire arriba */
.descripcion-wrap p + blockquote{
    margin-top: 22px;
}

.descripcion-wrap p + .table-responsive {
    margin-top: 24px;
}

.container .da-acordeon-container.container{
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

.descripcion-wrap .table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin: 12px 0 24px;
    border: 1px solid #e3e3e3;
    border-radius: 6px;
    position: relative;
    box-shadow: inset -12px 0 12px -12px rgba(0,0,0,0.18);
}

.descripcion-wrap .table-responsive:after {
    content: "";
    display: none;
}

/* La tabla: OJO que tenés style inline -> por eso el !important */
.descripcion-wrap .table-responsive > table {
    width: 100%;
    min-width: 720px;                 /* ajustá si querés: 650/720/800 */
    border-collapse: separate !important;
    border-spacing: 0 !important;
    border: 0;                        /* el borde lo maneja el wrapper */
    table-layout: auto;
}

/* Celdas */
.descripcion-wrap table th,
.descripcion-wrap table td {
    border: 0;
    border-bottom: 1px solid #e9e9e9;
    padding: 12px;
    vertical-align: top;
}

/* Encabezado */
.descripcion-wrap table thead th{
    background: #fdf1f1;
    border-bottom: 1px solid #f2c6c6;
    color: #222;
    padding: 10px 12px;     /* un poquito menos alto */
    font-weight: 600;       /* baja un toque el peso */
}

/* Zebra + hover */
.descripcion-wrap table tbody tr:nth-child(even) {
    background: #fafafa;
}

.descripcion-wrap table tbody tr:hover {
    background: #f3f3f3;
}

/* Limpieza: última fila sin línea abajo */
.descripcion-wrap table tbody tr:last-child td {
    border-bottom: 0;
}

/* Última columna puede wrappear (normalmente es la más larga) */
.descripcion-wrap table td:last-child {
    white-space: normal;
}

/* Más aire en listas (ol/ul) dentro de la descripción */
.descripcion-wrap ol,
.descripcion-wrap ul{
  margin: 1.1em 0 1.4em;
  padding-left: 1.35em;   /* sangría prolija */
}

/* Más aire entre ítems */
.descripcion-wrap li{
  margin: 0.55em 0;
  line-height: 1.65;
}

/* Si tenés listas anidadas (como tus circulitos), que respiren también */
.descripcion-wrap li > ul,
.descripcion-wrap li > ol{
  margin-top: 0.65em;
  margin-bottom: 0.65em;
}

/* Desktop: botón un poco más ancho y con líneas más largas */
@media (min-width: 992px) {
    .boton-ver-mas {
        min-width: 250px;      /* antes 170px */
        padding: 6px 20px;     /* un poquito más de aire, pero misma proporción */
    }
    .boton-ver-mas::before,
    .boton-ver-mas::after {
        width: 200px;          /* alargo las líneas para que acompañen el botón más ancho */
    }
}