.elementor .e-d599a2c{margin-block-end:20px;flex-direction:column;}.elementor .e-8ec04f1{max-width:1140px;margin-block-end:40px;flex-direction:row;justify-content:center;/* ------------------------------------------------------------------
 Reseñas de Doctoralia (DP Import 2.1.2) · Layout de dos columnas
 Izquierda: resumen del doctor · Derecha: carrusel de reseñas

 DÓNDE: contenedor padre (Flexbox, dirección FILA) que envuelve los
 dos widgets de Shortcode > pestaña Avanzado > CSS personalizado.

 IMPORTANTE · EDITOR V4 DE ELEMENTOR:
 NO se usa la palabra "selector". El editor nuevo anida este CSS bajo
 el elemento automáticamente, así que los selectores se escriben tal
 cual. (En el editor clásico sí hacía falta "selector" como prefijo.)

 Las columnas se identifican por su contenido con :has(), no por el
 orden, así que da igual cuál de los dos shortcodes pongas primero.
 ------------------------------------------------------------------ */

/* 1. Paleta y tipografía de la web */
.dp-import-reviews,
.dp-import-doctor {
--primary-accent: #00658D;
--primary-accent-rgb: 0, 101, 141;
--text-dark: #191C1E;
--text-gray: #3E4850;
--border-gray: #ECEEF0;
--background-light-gray: #F7F9FB;
font-family: inherit;
}

/* 2. Anchos de las dos columnas.
    min-width:0 es imprescindible: sin él, un elemento flex no se
    encoge por debajo de su contenido y el carrusel se desborda
    en vez de hacer scroll. */
.elementor-widget:has(.dp-import-doctor) {
flex: 0 0 260px;
align-self: center;
}
.elementor-widget:has(.dp-import-reviews) {
flex: 1 1 auto;
min-width: 0;
}

/* 3. Columna izquierda: se quita la tarjeta del plugin (borde, sombra,
    fondo) para que quede un bloque limpio. */
.dp-import-doctor {
max-width: none;
margin: 0;
padding: 0;
background: transparent;
border: none;
box-shadow: none;
}
.dp-import-doctor:hover {
border: none;
box-shadow: none;
}

/* El avatar va en position:absolute con top:-70px. Se pasa a flujo
 normal y se reduce, que aquí no hay tarjeta de la que sobresalir. */
.dp-import-doctor .dp-import-doctor-avatar {
position: static;
max-width: 96px;
height: 96px;
margin: 0 auto 14px;
}

.dp-import-doctor .dp-import-doctor-name {
font-size: 1.25rem;
margin-bottom: 6px;
}
.dp-import-doctor .dp-import-doctor-name a {
color: inherit;
text-decoration: none;
}

.dp-import-doctor .dp-import-doctor-specializations span {
background: #E6F0F5;
}

/* 4. Columna derecha: reseñas en horizontal, deslizables. Sin JavaScript. */
.dp-import-reviews {
max-width: none;
margin: 0;
display: flex;
gap: 16px;
overflow-x: auto;
scroll-snap-type: x mandatory;
scroll-padding-left: 20px;
overscroll-behavior-x: contain;
padding-bottom: 16px;
scrollbar-width: thin;
scrollbar-color: #C8D3DA transparent;
}

.dp-import-reviews .dp-import-review {
flex: 0 0 280px;
scroll-snap-align: start;
margin-bottom: 0;
display: flex;
flex-direction: column;
background: #FFFFFF;
}

/* El texto empuja la fecha al fondo: las tarjetas quedan alineadas */
.dp-import-reviews .dp-import-review-content {
flex: 1 0 auto;
}

.dp-import-reviews::-webkit-scrollbar {
height: 8px;
}
.dp-import-reviews::-webkit-scrollbar-track {
background: transparent;
}
.dp-import-reviews::-webkit-scrollbar-thumb {
background: #C8D3DA;
border-radius: 4px;
}

/* 5. Móvil: las dos columnas se apilan.
    La dirección del contenedor se cambia a "columna" desde la propia
    pestaña Diseño de Elementor, en la vista móvil. */
@media (max-width: 767px) {
.elementor-widget:has(.dp-import-doctor),
.elementor-widget:has(.dp-import-reviews) {
  flex-basis: 100%;
}
.dp-import-reviews .dp-import-review {
  flex-basis: 82%;
}
}\n}