/| que lo contenía queda vacío atrás (jQuery mueve el nodo
real, no lo clona), pero sin contenido ni padding propio colapsa solo a 0px, sin dejar un hueco
vacío en el cuadro gris. */
/* =======================================================
4. SECCIÓN: PÍLDORA DE BENEFICIOS (NUEVO DISEÑO ESPEJO)
======================================================= */
/* --- VERSIÓN DE ESCRITORIO --- */
.mmc-pildora-escritorio {
display: block !important;
width: 100% !important;
}
.mmc-contenedor-pildora-limitado {
position: relative !important; /* Ya no es absoluto/flotante */
width: 100% !important; /* Toma todo el ancho de miniaturas + foto principal */
margin-top: 25px !important; /* Espacio de separación debajo de las fotos */
margin-bottom: 20px !important;
padding-left: 15px !important;
padding-right: 15px !important;
z-index: 10 !important;
pointer-events: auto !important;
}
/* Diseño de referencia: caja azul muy clara de esquinas suaves (no una píldora completa), sin
sombra, con el título a la izquierda y los beneficios repartidos y separados por líneas finas.
Antes era gris (#e9ebeb), totalmente redondeada (50px), con sombra marcada y el texto chico en
negrita, todo centrado. */
.mmc-pildora-final-diseno {
display: flex !important;
align-items: center !important;
justify-content: flex-start !important;
background-color: #eaf2fd !important;
border-radius: 18px !important;
padding: 18px 26px !important;
width: 100% !important;
box-sizing: border-box !important;
box-shadow: none !important;
pointer-events: auto !important;
overflow: hidden !important;
}
.pildora-title {
color: #023E5E !important;
font-weight: 700 !important;
font-size: 15px !important;
margin-right: 24px !important;
text-transform: none !important;
white-space: nowrap !important;
line-height: 1.3 !important;
flex-shrink: 0 !important;
text-align: left !important;
}
/* flex:1 en cada beneficio: se reparten el ancho por igual, como en la referencia, en vez de
quedar pegados al centro. El texto puede ocupar dos líneas sin romper la caja. */
.pildora-item {
display: flex !important;
align-items: center !important;
gap: 12px !important;
flex: 1 1 0 !important;
min-width: 0 !important;
color: #5b6971 !important;
font-size: 14px !important;
font-weight: 400 !important;
padding: 2px 18px !important;
border-left: 1px solid #cddcf2 !important;
white-space: normal !important;
word-break: break-word !important;
line-height: 1.35 !important;
}
.pildora-item:first-of-type {
border-left: none !important;
padding-left: 0 !important;
}
/* Bloqueo a imágenes gigantes */
.pildora-item img {
width: 24px !important;
height: 24px !important;
min-width: 24px !important;
max-width: 24px !important;
margin-right: 0 !important;
object-fit: contain !important;
display: block !important;
border: none !important;
box-shadow: none !important;
background: transparent !important;
}
/* --- VERSIÓN MÓVIL (CUADRÍCULA) --- */
.mmc-cuadricula-movil {
display: none !important; /* Oculta por defecto en escritorio */
width: 100% !important;
margin-top: 15px !important;
}
.mmc-titulo-cuadricula {
font-weight: 800 !important;
font-size: 18px !important;
margin-bottom: 12px !important;
color: #1a1e26 !important;
}
.mmc-grid-beneficios {
display: grid !important;
grid-template-columns: repeat(2, 1fr) !important;
gap: 12px !important;
}
.mmc-grid-item {
background-color: #f1f8fc !important;
border-radius: 8px !important;
padding: 15px !important;
display: flex !important;
flex-direction: column !important;
align-items: flex-start !important;
}
.mmc-grid-item img {
width: 32px !important;
height: 32px !important;
margin-bottom: 10px !important;
object-fit: contain !important;
}
.mmc-grid-texto {
font-weight: 600 !important;
font-size: 14px !important;
color: #3b4754 !important;
line-height: 1.3 !important;
}
/* =======================================================
5. AJUSTES RESPONSIVE DE PÍLDORA (AHORA ME VES, AHORA NO)
======================================================= */
/* =======================================================
5. AJUSTES RESPONSIVE DE PÍLDORA (TRANSICIONES)
======================================================= */
/* Entre 901px y 1200px: Título Arriba, Opciones Abajo */
@media (min-width: 901px) and (max-width: 1200px) {
.mmc-pildora-final-diseno {
flex-wrap: wrap !important;
justify-content: flex-start !important;
padding: 15px 20px !important; /* Aumentamos el relleno para usar el espacio lateral */
border-radius: 18px !important;
}
.pildora-title {
width: 100% !important;
text-align: center !important;
margin-right: 0 !important;
margin-bottom: 10px !important;
font-size: 14px !important; /* Subimos el título a 14px */
display: block !important;
}
.pildora-item {
padding: 0 15px !important; /* Damos más aire entre cada beneficio */
font-size: 13px !important; /* Subimos la letra de 10px a 12px (mucho más legible) */
}
.pildora-item img {
width: 22px !important; /* Iconos un pelín más grandes para que hagan juego */
height: 22px !important;
min-width: 22px !important;
max-width: 22px !important;
}
}
/* Menos de 900px: Activamos el diseño "espejo" (Cuadrícula 2x2 abajo) */
@media (max-width: 900px) {
/* 1. Ocultamos la barra gris de escritorio */
.mmc-pildora-escritorio {
display: none !important;
}
/* 2. Mostramos la cuadrícula de beneficios */
.mmc-cuadricula-movil {
display: block !important;
}
} |