.elementor-2175 .elementor-element.elementor-element-8ce2e49{--display:flex;--flex-direction:row;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--align-items:stretch;--gap:10px 10px;--row-gap:10px;--column-gap:10px;--padding-top:0px;--padding-bottom:60px;--padding-left:0px;--padding-right:0px;}.elementor-2175 .elementor-element.elementor-element-1bfbba3{--display:flex;}.elementor-widget-heading .elementor-heading-title{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );color:var( --e-global-color-primary );}.elementor-2175 .elementor-element.elementor-element-a9f2213{padding:60px 0px 0px 0px;text-align:center;}.elementor-2175 .elementor-element.elementor-element-a9f2213 .elementor-heading-title{font-family:"tommy-soft-regular", Sans-serif;font-size:40px;font-weight:500;color:var( --e-global-color-secondary );}.elementor-widget-text-editor{font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );color:var( --e-global-color-text );}.elementor-widget-text-editor.elementor-drop-cap-view-stacked .elementor-drop-cap{background-color:var( --e-global-color-primary );}.elementor-widget-text-editor.elementor-drop-cap-view-framed .elementor-drop-cap, .elementor-widget-text-editor.elementor-drop-cap-view-default .elementor-drop-cap{color:var( --e-global-color-primary );border-color:var( --e-global-color-primary );}.elementor-2175 .elementor-element.elementor-element-ed62864{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;padding:0px 0px 30px 0px;text-align:center;font-family:"tommy-soft-regular", Sans-serif;font-weight:400;line-height:1.5em;}.elementor-widget-fluent-form-widget .fluentform-widget-description{font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-weight:var( --e-global-typography-accent-font-weight );}.elementor-widget-fluent-form-widget .ff-el-progress-status{color:var( --e-global-color-primary );font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );}.elementor-widget-fluent-form-widget .ff-el-progress-bar span{color:var( --e-global-color-primary );}.elementor-widget-fluent-form-widget .step-nav button{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );}.elementor-2175 .elementor-element.elementor-element-85a4a37 .fluentform-widget-wrapper .ff-el-input--label label{color:#252525;font-family:"tommy-soft-bold", Sans-serif;font-weight:800;text-transform:uppercase;}.elementor-2175 .elementor-element.elementor-element-85a4a37 .ff-el-is-required.asterisk-right label:after{color:#FF0808 !important;}.elementor-2175 .elementor-element.elementor-element-85a4a37 .fluentform-widget-wrapper input:not([type=radio]):not([type=checkbox]):not([type=submit]):not([type=button]):not([type=image]):not([type=file]), .elementor-2175 .elementor-element.elementor-element-85a4a37 .fluentform-widget-wrapper .ff-el-group textarea, .elementor-2175 .elementor-element.elementor-element-85a4a37 .fluentform-widget-wrapper .ff-el-group select{font-family:"tommy-soft-medi", Sans-serif;}.fluentform-widget-wrapper .ff-el-section-break .ff-el-section-title{font-family:"tommy-soft-medi", Sans-serif;font-size:1.5em;}.elementor-2175 .elementor-element.elementor-element-85a4a37 .fluentform-widget-wrapper .ff-el-section-break .ff-el-section-title{padding:0px 0px 15px 0px;}.elementor-2175 .elementor-element.elementor-element-85a4a37 .fluentform-widget-wrapper .ff-el-group .ff-btn-submit{background-color:#1a7efb !important;color:#ffffff !important;font-family:"tommy-soft-bold", Sans-serif;font-size:1.5em;}.elementor-2175 .elementor-element.elementor-element-486268a{--grid-template-columns:repeat(0, auto);text-align:center;padding:10px 0px 0px 0px;--icon-size:21px;--grid-column-gap:25px;--grid-row-gap:0px;}.elementor-2175 .elementor-element.elementor-element-486268a .elementor-social-icon{background-color:var( --e-global-color-primary );}@media(max-width:1024px){.elementor-2175 .elementor-element.elementor-element-8ce2e49{--padding-top:30px;--padding-bottom:30px;--padding-left:30px;--padding-right:30px;}}@media(max-width:767px){.elementor-2175 .elementor-element.elementor-element-8ce2e49{--padding-top:20px;--padding-bottom:20px;--padding-left:20px;--padding-right:20px;}.elementor-2175 .elementor-element.elementor-element-1bfbba3{--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-2175 .elementor-element.elementor-element-a9f2213{padding:30px 0px 0px 0px;}.elementor-2175 .elementor-element.elementor-element-a9f2213 .elementor-heading-title{font-size:25px;}.elementor-2175 .elementor-element.elementor-element-ed62864{padding:0% 15% 0% 15%;font-size:16px;}.elementor-2175 .elementor-element.elementor-element-85a4a37 .fluentform-widget-wrapper .ff-el-group .ff-btn-submit{font-size:1.5em;}.elementor-2175 .elementor-element.elementor-element-486268a{padding:0px 0px 15px 0px;}}/* Start custom CSS for fluent-form-widget, class: .elementor-element-85a4a37 *//* ==========================================================
   DEV PRO: FLUENT FORMS CHECKOUT UX/UI OPTIMIZATION
   ========================================================== */

.fluentform .ff-section_break_desk p {
    font-size: 0.9rem !important;
    color: #666 !important;
    margin-bottom: 20px !important;
}

/* 2. ADD EXTRAS - TARJETAS GRID Y UX */
.fluentform .extras .ff_el_checkable_photo_holders {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)) !important;
    gap: 15px !important;
    width: 100% !important;
    padding-bottom: 40px !important;
    padding-top: 15px !important;
    padding-right: 10px !important;
    padding-left: 10px !important;
}

/* Estado Base de las tarjetas */
.fluentform .extras .ff_el_checkable_photo_holders .ff-el-image-holder {
    width: 100% !important;
    margin: 0 !important;
    padding: 15px 5px !important;
    border: 2px solid #e0e0e0 !important;
    border-radius: 8px !important;
    background-color: #fff !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: space-between !important;
    cursor: pointer !important;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
    position: relative !important;
    box-sizing: border-box !important;
}

/* 🔥 MEJORA UX 1: Expandir el área de clic al 100% de la tarjeta */
.fluentform .extras .ff_el_checkable_photo_holders .ff-el-image-holder .ff-el-form-check-label::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    z-index: 5 !important;
    cursor: pointer !important;
    background: transparent !important;
}

/* Efecto Hover Base */
.fluentform .extras .ff_el_checkable_photo_holders .ff-el-image-holder:hover {
    border-color: #007ab9 !important;
    box-shadow: 0 4px 12px rgba(0, 122, 185, 0.15) !important;
    transform: translateY(-2px) !important;
}

/* Ajuste de la Imagen */
.fluentform .extras .ff_el_checkable_photo_holders .ff-el-image-holder .ff-el-image-input-src {
    width: 45px !important;
    height: 45px !important;
    background-size: contain !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    margin: 0 0 10px 0 !important;
    padding: 0 !important;
    position: static !important;
    filter: grayscale(100%) opacity(0.7) !important; /* Desaturado por defecto */
    transition: filter 0.3s ease !important;
    z-index: 2 !important;
}

/* Ajuste del Título */
.fluentform .extras .ff_el_checkable_photo_holders .ff-el-image-holder span.ff_plan_title {
    font-size: 13px !important;
    font-weight: 600 !important;
    text-align: center !important;
    color: #4a4a4a !important;
    line-height: 1.2 !important;
    margin: 0 !important;
    padding: 0 !important;
    z-index: 2 !important;
    position: relative !important;
    background: transparent !important;
}

/* ESTADO SELECCIONADO (CHECKED) */
.fluentform .extras .ff_el_checkable_photo_holders .ff-el-image-holder.ff_item_selected {
    background-color: #007ab9 !important;
    border-color: #005f92 !important;
    box-shadow: 0 4px 15px rgba(0, 122, 185, 0.3) !important;
}
.fluentform .extras .ff_el_checkable_photo_holders .ff-el-image-holder.ff_item_selected .ff-el-image-input-src {
    filter: brightness(0) invert(1) !important; /* Vuelve el icono blanco */
}
.fluentform .extras .ff_el_checkable_photo_holders .ff-el-image-holder.ff_item_selected span.ff_plan_title {
    color: #ffffff !important;
}

/* El Checkmark (Pseudo-elemento) */
.fluentform .extras .ff_el_checkable_photo_holders .ff-el-image-holder::after {
    content: '✓' !important;
    position: absolute !important;
    top: -8px !important;
    right: -8px !important;
    background-color: #28a745 !important;
    color: white !important;
    width: 22px !important;
    height: 22px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 12px !important;
    font-weight: bold !important;
    opacity: 0 !important;
    transform: scale(0) !important;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    z-index: 10 !important; /* Por encima del pseudo-elemento de clic */
}
.fluentform .extras .ff_el_checkable_photo_holders .ff-el-image-holder.ff_item_selected::after {
    opacity: 1 !important;
    transform: scale(1) !important;
}

/* 🔥 MEJORA UX 2: Cambiar a 'X' roja al hacer Hover sobre una tarjeta ya seleccionada */
.fluentform .extras .ff_el_checkable_photo_holders .ff-el-image-holder.ff_item_selected:hover::after {
    content: '✕' !important;
    background-color: #dc3545 !important; /* Rojo alerta */
    transform: scale(1.15) !important;
}

/* Ocultar el input nativo limpiamente */
.fluentform .extras .ff_el_checkable_photo_holders .ff-el-image-holder input[type=checkbox] {
    position: absolute !important;
    opacity: 0 !important;
    width: 0 !important;
    height: 0 !important;
}


/* 3. OPTIMIZACIÓN DEL CUPÓN (ALINEACIÓN Y TAMAÑO) */
.fluentform .ff_coupon_wrapper .ff_input-group {
    display: flex !important;
    width: 100% !important;
    max-width: 400px !important; /* Evita que sea gigante en desktop */
    margin: 0 !important;
    align-items: stretch !important; /* Hace que input y boton midan lo mismo */
}
.fluentform .ff_coupon_wrapper .ff_input-group input[type="text"] {
    flex: 1 !important;
    border-radius: 4px 0 0 4px !important;
    border: 1px solid #ccd0d4 !important;
    padding: 12px 15px !important;
    height: auto !important;
    margin: 0 !important;
    box-shadow: none !important;
}
.fluentform .ff_coupon_wrapper .ff_input-group .ff_input-group-append {
    display: flex !important;
    margin: 0 !important;
}
.fluentform .ff_coupon_wrapper .ff_input-group .ff_input-group-append span {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background-color: #007ab9 !important;
    color: #ffffff !important;
    border: 1px solid #007ab9 !important;
    border-radius: 0 4px 4px 0 !important;
    padding: 0 25px !important;
    margin: 0 !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: background-color 0.2s ease !important;
}
.fluentform .ff_coupon_wrapper .ff_input-group .ff_input-group-append span:hover {
    background-color: #005f92 !important;
}


/* 4. MEJORAS GENERALES DE INPUTS Y RADIO BUTTONS MODERNOS */
.fluentform .ff-el-form-control {
    border-radius: 4px !important;
    border: 1px solid #ccd0d4 !important;
    padding: 12px 15px !important;
    transition: border-color 0.2s, box-shadow 0.2s !important;
    width: 100% !important; /* Fuerz ancho total en todas las pantallas */
    max-width: 100% !important;
}
.fluentform .ff-el-form-control:focus {
    border-color: #007ab9 !important;
    box-shadow: 0 0 0 1px #007ab9 !important;
    outline: none !important;
}

/* Contenedor de la lista de botones */
.fluentform .ff_list_buttons .ff-el-input--content {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
}
.fluentform .ff_list_buttons .ff-el-form-check {
    margin: 0 !important;
    flex: 1 !important;
    min-width: 120px !important;
}

/* 🔥 ELIMINAR EL CÍRCULO NATIVO DE FLUENT FORMS */
.fluentform .ff_list_buttons .ff-el-form-check-label::before,
.fluentform .ff_list_buttons .ff-el-form-check-label::after {
    display: none !important;
    content: none !important;
    background: transparent !important;
    border: none !important;
}

/* Estilo del botón moderno (Contenedor Padre) */
.fluentform .ff_list_buttons .ff-el-form-check-label {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background-color: #f8f9fa !important;
    border: 1px solid #e0e0e0 !important;
    border-radius: 4px !important;
    padding: 12px 10px !important;
    cursor: pointer !important;
    transition: all 0.2s !important;
    width: 100% !important;
    text-align: center !important;
    color: #4a4a4a !important; /* Color inicial del texto */
}

/* Botón Seleccionado (Contenedor Padre) */
.fluentform .ff_list_buttons .ff-el-form-check.ff_item_selected .ff-el-form-check-label {
    background-color: #007ab9 !important;
    border-color: #007ab9 !important;
    color: #ffffff !important;
}

/* 🔥 RESET ABSOLUTO AL SPAN BASURA DEL TEMA/PLUGIN */
.fluentform .ff-el-group.ff_list_buttons .ff-el-form-check label > span {
    -webkit-appearance: none !important;
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    color: inherit !important; /* Fuerza heredar el color blanco del padre al seleccionar */
    display: inline !important;
    margin: 0 !important;
    padding: 0 !important;
    position: static !important;
    text-align: center !important;
    line-height: inherit !important;
}

/* Ocultar el input radio real */
.fluentform .ff_list_buttons .ff-el-form-check-input {
    position: absolute !important;
    opacity: 0 !important;
    width: 0 !important;
    height: 0 !important;
    margin: 0 !important;
}


/* 5. TABLA DE RESUMEN MÁS LIMPIA */
.fluentform .ffp_table_wrapper .table {
    border-collapse: collapse !important;
    width: 100% !important;
    margin-bottom: 20px !important;
}
.fluentform .ffp_table_wrapper .table th {
    background-color: #f1f3f5 !important;
    padding: 12px !important;
    border-bottom: 2px solid #dee2e6 !important;
    color: #495057 !important;
}
.fluentform .ffp_table_wrapper .table td {
    padding: 12px !important;
    border-bottom: 1px solid #dee2e6 !important;
    vertical-align: middle !important;
}


/* 6. RESPONSIVE DESIGN ESTRICTO */
@media (max-width: 768px) {
    .fluentform .ff-column-container {
        display: flex !important;
        flex-direction: column !important;
    }
    .fluentform .ff-column-container .ff-t-cell {
        flex-basis: 100% !important;
        width: 100% !important;
        margin-bottom: 15px !important;
    }
    .fluentform .extras .ff_el_checkable_photo_holders {
        grid-template-columns: repeat(2, 1fr) !important; /* 2 columnas en móvil */
    }
    .fluentform .ff_coupon_wrapper .ff_input-group {
        max-width: 100% !important;
    }
}
@media (max-width: 480px) {
    .fluentform .extras .ff_el_checkable_photo_holders {
        grid-template-columns: repeat(2, 1fr) !important; 
    }
}/* End custom CSS */