/* Se define una paleta autónoma para convivir con Elementor, WPBakery y cualquier tema. */
.hbs-ae-activity { --hbs-ae-accent: #1479b8; --hbs-ae-accent-dark: #0c527d; --hbs-ae-border: #dce5ec; --hbs-ae-muted: #5f6b76; --hbs-ae-surface: #fff; background: var(--hbs-ae-surface); color: #23313d; display: grid; gap: 1.25rem; max-width: 100%; }
/* Se presenta el nombre de la actividad con una jerarquía clara. */
.hbs-ae-activity__title { color: #17364d; font-size: clamp(1.55rem, 3vw, 2.2rem); font-weight: 700; letter-spacing: -.02em; line-height: 1.15; margin: 0; }
/* Se mantiene la descripción legible y compatible con contenido HTML filtrado. */
.hbs-ae-activity__description { color: #52616d; font-size: 1rem; line-height: 1.65; }
/* Se presenta la regla de dependencia como una alerta informativa elegante. */
.hbs-ae-notes { background: #f1f8fc; border-inline-start: 4px solid var(--hbs-ae-accent); border-radius: 0 8px 8px 0; color: #36566b; line-height: 1.55; margin: 0; padding: .8rem 1rem; }
/* Se organiza el conjunto de opciones en una cuadrícula adaptable. */
.hbs-ae-options { border: 0; display: grid; gap: 1rem; margin: 0; padding: 0; }
/* Se convierte cada grupo en una tarjeta consistente con el diseño del formulario. */
.hbs-ae-option { background: var(--hbs-ae-surface); border: 1px solid var(--hbs-ae-border); border-radius: 10px; box-shadow: 0 3px 12px rgb(23 54 77 / 7%); display: grid; gap: .75rem; min-width: 0; padding: 1rem 1.1rem; transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease; }
/* Se ofrece una realimentación sutil al pasar por una opción interactiva. */
.hbs-ae-option:hover, .hbs-ae-option:focus-within { border-color: var(--hbs-ae-accent); box-shadow: 0 5px 16px rgb(20 121 184 / 15%); transform: translateY(-1px); }
/* Se diferencia cada etiqueta descriptiva del contenido de su valor. */
.hbs-ae-option span { color: var(--hbs-ae-muted); display: block; font-size: .76rem; font-weight: 700; letter-spacing: .045em; margin-bottom: .2rem; text-transform: uppercase; }
/* Se da protagonismo a los datos principales de cada grupo. */
.hbs-ae-option strong { color: #263d4d; font-size: .98rem; font-weight: 600; line-height: 1.4; }
/* Se presenta el precio con mayor contraste visual. */
.hbs-ae-option__price div { color: var(--hbs-ae-accent-dark); font-size: 1.08rem; font-weight: 700; overflow-wrap: anywhere; }
/* Se convierte la zona de inscripción en un control táctil claro. */
.hbs-ae-option__enrollment { border-top: 1px solid #edf1f4; margin-top: .25rem; padding-top: .75rem; }
/* Se mantiene toda la etiqueta seleccionable y accesible con teclado. */
.hbs-ae-option__enrollment label { align-items: center; color: #234c66; cursor: pointer; display: flex; font-weight: 600; gap: .55rem; line-height: 1.4; }
/* Se aumenta el área táctil del checkbox/radio sin perder el estilo nativo. */
.hbs-ae-option__enrollment input { accent-color: var(--hbs-ae-accent); block-size: 1.15rem; inline-size: 1.15rem; margin: 0; }
/* Se conserva el formato de varias líneas en observaciones. */
.hbs-ae-option__notes { color: var(--hbs-ae-muted); font-size: .9rem; line-height: 1.5; margin: 0; }
/* Se muestran dos tarjetas por fila en pantallas amplias. */
@media (min-width: 48rem) { .hbs-ae-options { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* Se muestran cuatro tarjetas cuando el formulario dispone de mucho espacio. */
@media (min-width: 75rem) { .hbs-ae-options { grid-template-columns: repeat(4, minmax(0, 1fr)); } }