.elementor-12923 .elementor-element.elementor-element-bbc2ddd:not(.elementor-motion-effects-element-type-background), .elementor-12923 .elementor-element.elementor-element-bbc2ddd > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:var( --e-global-color-accent );}.elementor-12923 .elementor-element.elementor-element-bbc2ddd > .elementor-container{min-height:100px;}.elementor-12923 .elementor-element.elementor-element-bbc2ddd{transition:background 0.3s, border 0.3s, border-radius 0.3s, box-shadow 0.3s;}.elementor-12923 .elementor-element.elementor-element-bbc2ddd > .elementor-background-overlay{transition:background 0.3s, border-radius 0.3s, opacity 0.3s;}.elementor-12923 .elementor-element.elementor-element-ef0accf > .elementor-container{min-height:650px;}.elementor-12923 .elementor-element.elementor-element-ef0accf .elementor-background-slideshow__slide__image{background-size:contain;background-position:center center;}.elementor-12923 .elementor-element.elementor-element-ef0accf{transition:background 0.3s, border 0.3s, border-radius 0.3s, box-shadow 0.3s;}.elementor-12923 .elementor-element.elementor-element-ef0accf > .elementor-background-overlay{transition:background 0.3s, border-radius 0.3s, opacity 0.3s;}.elementor-12923 .elementor-element.elementor-element-fc39805{--spacer-size:50px;}.elementor-12923 .elementor-element.elementor-element-8a23e9b{--spacer-size:50px;}.elementor-12923 .elementor-element.elementor-element-cf82469{--spacer-size:100px;}/* Start custom CSS for shortcode, class: .elementor-element-74d07d1 *//* =========================================================
   CSS COMPLEMENTARIO - GRAVITY FORMS - ENLACES EDUCANADA
   
   Este CSS trabaja JUNTO con el CSS que ya tienes activo en
   el sitio. Solo agrega estilos que faltan (barra de progreso,
   confirmación, etc.) sin pelearse con tus estilos existentes.
   
   COLORES OFICIALES DE ENLACES:
     Naranja principal: #FC913A
     Rojo / Hover:      #FF4E50
   
   DÓNDE PEGAR:
   WordPress → Apariencia → Personalizar → CSS adicional
   (DEBAJO o JUNTO al CSS que ya tienes)
   ========================================================= */


/* ---------- BARRA DE PROGRESO ---------- */

/* Franja llena (la parte que avanza) - naranja Enlaces */
.gform_wrapper .gf_progressbar_percentage {
    background-color: #FC913A !important;
    background-image: none !important;
    color: #FFFFFF !important;
}

/* Franja vacía (fondo de la barra) */
.gform_wrapper .gf_progressbar {
    background-color: #F3F4F6 !important;
    border: 1px solid #E5E7EB !important;
}

/* Texto "Step X of Y - nombre de página" */
.gform_wrapper .gf_progressbar_title {
    color: #4B5563 !important;
    font-weight: 500;
}


/* ---------- BOTONES DE NAVEGACIÓN ENTRE PÁGINAS ---------- */
/* Tu CSS actual estiliza .gform_button (botón principal) pero no los
   de navegación. Los estilizamos para que sean consistentes. */

/* Botón "Siguiente" */
.gform_wrapper .gform_next_button {
    background-color: #FC913A !important;
    border: none !important;
    color: #FFFFFF !important;
    border-radius: 10px !important;
    padding: 15px !important;
    transition: background-color 0.2s ease;
}

.gform_wrapper .gform_next_button:hover {
    background-color: #FF4E50 !important;
}

/* Botón "Anterior" - estilo discreto para que no compita */
.gform_wrapper .gform_previous_button {
    background-color: #F3F4F6 !important;
    color: #4B5563 !important;
    border: 1px solid #D1D5DB !important;
    border-radius: 10px !important;
    padding: 15px !important;
    transition: background-color 0.2s ease;
}

.gform_wrapper .gform_previous_button:hover {
    background-color: #E5E7EB !important;
}


/* ---------- CAMPOS REQUERIDOS ---------- */

/* Asterisco "(Required)" en naranja Enlaces */
.gform_wrapper .gfield_required {
    color: #FC913A !important;
}


/* ---------- LINKS DENTRO DEL FORMULARIO ---------- */

/* Cualquier link (términos, política de privacidad, etc.) */
.gform_wrapper a {
    color: #FC913A !important;
    text-decoration: underline;
}

.gform_wrapper a:hover {
    color: #FF4E50 !important;
}


/* ---------- MENSAJE DE CONFIRMACIÓN ---------- */

/* Línea izquierda en naranja cuando el formulario se envía */
.gform_confirmation_message {
    border-left: 4px solid #FC913A !important;
    padding-left: 20px !important;
}


/* ---------- MENSAJES DE ERROR EN CAMPOS ---------- */

/* Etiqueta del campo cuando hay error */
.gform_wrapper .gfield_error .gfield_label {
    color: #FF4E50 !important;
}

/* Borde del input cuando hay error */
.gform_wrapper .gfield_error input,
.gform_wrapper .gfield_error select,
.gform_wrapper .gfield_error textarea {
    border-color: #FF4E50 !important;
}

/* Mensaje de error específico debajo del campo */
.gform_wrapper .validation_message {
    color: #FF4E50 !important;
    font-weight: 500;
}


/* ---------- CHECKBOXES Y RADIOS ---------- */

/* Color del check cuando está marcado (navegadores modernos) */
.gform_wrapper input[type="checkbox"]:checked,
.gform_wrapper input[type="radio"]:checked {
    accent-color: #FC913A;
}


/* =========================================================
   AJUSTES OPCIONALES - REVISA SI LOS QUIERES APLICAR
   ========================================================= */


/* ---------- AJUSTE 1 - MOSTRAR ERRORES GENERALES ---------- */
/* 
   Tu CSS actual oculta el resumen de errores con:
       .gform_validation_errors {display: none;}
   
   Esto es riesgoso porque cuando un estudiante envía el formulario
   con campos faltantes, no ve el resumen de qué le falta.
   
   Si quieres mostrar los errores generales (recomendado),
   descomenta este bloque quitando los slash-asterisco:
*/

/*
.gform_wrapper .gform_validation_errors {
    display: block !important;
    background: #FEF2F2 !important;
    border: 1px solid #FF4E50 !important;
    border-radius: 8px !important;
    padding: 16px !important;
    margin-bottom: 24px !important;
    color: #991B1B !important;
}
*/


/* ---------- AJUSTE 2 - BOTÓN RESPONSIVE ---------- */
/* 
   Tu CSS actual fija el botón en 323px de ancho:
       .gform_button { width: 323px !important; }
   
   En celular esto puede verse mal (botón muy ancho o cortado).
   Si quieres que en móvil el botón se adapte, descomenta:
*/

/*
@media (max-width: 600px) {
    .gform_button {
        width: 100% !important;
        max-width: 323px !important;
    }
}
*/


/* ---------- AJUSTE 3 - VER TÍTULO DEL FORMULARIO ---------- */
/*
   Tu CSS actual oculta el título y descripción del formulario:
       .gform_heading {display: none;}
   
   Si quieres que se VEA el título y descripción que pongas en
   el editor de Gravity Forms (útil para mostrar el HTML de
   bienvenida que agregamos en el v8), descomenta este bloque:
*/

/*
.gform_wrapper .gform_heading {
    display: block !important;
    margin-bottom: 32px;
}

.gform_wrapper .gform_title {
    color: #FC913A !important;
    font-size: 28px !important;
    font-weight: bold !important;
}

.gform_wrapper .gform_description {
    color: #4B5563 !important;
    font-size: 16px !important;
    line-height: 1.6 !important;
}
*//* End custom CSS */