/* ==========================================================================
   Roger Editor — bloque "Trust badges". Réplica 1:1 de la franja
   "Beneficios" del home (.benefits-section) del prototipo, variante
   "disposicion: circulos" — ícono en círculo + grid de 4 columnas +
   fondo con degradado animado. La variante "fila" (por defecto, ícono a
   la izquierda) no necesita CSS propio, ya viene con estilos inline. */

.roger-editor-beneficios {
    padding: 3rem 0;
    background: linear-gradient(135deg, var(--color-marca, #9298ba), #acb3cd, var(--color-marca, #9298ba));
    background-size: 200% 200%;
    color: #fff;
    animation: rogerEditorBeneficiosGradiente 10s ease-in-out infinite alternate;
}
@media (prefers-reduced-motion: reduce) {
    .roger-editor-beneficios { animation: none; background-position: 0% 50%; }
}
@keyframes rogerEditorBeneficiosGradiente {
    0% { background-position: 0% 50%; }
    100% { background-position: 100% 50%; }
}

.roger-editor-trust-badges--circulos {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}
.roger-editor-trust-badges--circulos .roger-editor-trust-item {
    /* El tema define .roger-editor-trust-item como tarjeta blanca
       genérica (mismo lenguaje que Marcas/Destacados/Diferenciales) para
       la disposición "fila" — acá se anula porque esta variante no lleva
       tarjeta, el ícono flota directo sobre el degradado de fondo. */
    background: none;
    border: none;
    border-radius: 0;
    text-align: center;
    padding: 0 12px;
}
.roger-editor-trust-badges--circulos .roger-editor-icono-trust-wrap {
    display: flex; align-items: center; justify-content: center;
    width: 68px; height: 68px;
    margin: 0 auto 16px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .12);
    transition: transform .3s ease, background .3s ease;
}
.roger-editor-trust-badges--circulos .roger-editor-icono-trust-wrap svg {
    width: 32px; height: 32px;
    transition: transform .3s ease;
}
.roger-editor-trust-badges--circulos .roger-editor-trust-item:hover .roger-editor-icono-trust-wrap {
    background: rgba(255, 255, 255, .2);
}
.roger-editor-trust-badges--circulos .roger-editor-trust-item:hover .roger-editor-icono-trust-wrap svg {
    transform: scale(1.15) rotate(-8deg);
}
.roger-editor-trust-badges--circulos .roger-editor-trust-item-titulo {
    display: block;
    color: #fff; font-size: 16px; margin-bottom: 4px;
}
.roger-editor-trust-badges--circulos .roger-editor-trust-item-descripcion {
    display: block;
    font-size: 13px; color: color-mix(in srgb, white 85%, #91adba);
}
.roger-editor-trust-nota-legal {
    text-align: center;
    font-size: 12px; color: rgba(255, 255, 255, .55);
    margin-top: 36px;
    padding-top: 24px;
    border-top: 1px solid rgba(255, 255, 255, .15);
}
.roger-editor-trust-nota-legal a {
    color: rgba(255, 255, 255, .85);
    text-decoration: underline;
}
.roger-editor-trust-nota-legal a:hover { color: #fff; }

@media (max-width: 768px) {
    .roger-editor-trust-badges--circulos { grid-template-columns: 1fr 1fr; }
}