.elementor-28 .elementor-element.elementor-element-f1b16ed{--display:flex;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-28 .elementor-element.elementor-element-c8600ab{--display:flex;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-widget-image .widget-image-caption{color:var( --e-global-color-text );font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );}.elementor-28 .elementor-element.elementor-element-466ab14{--display:flex;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-28 .elementor-element.elementor-element-67ca6f6{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-28 .elementor-element.elementor-element-1943796{--display:flex;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-28 .elementor-element.elementor-element-40a15d4{--display:flex;--flex-direction:column;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--justify-content:center;--align-items:center;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-28 .elementor-element.elementor-element-cb6b657{--display:flex;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-28 .elementor-element.elementor-element-024f9ef{--display:flex;--justify-content:center;--align-items:center;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-28 .elementor-element.elementor-element-2ef5e01{width:var( --container-widget-width, 80% );max-width:80%;--container-widget-width:80%;--container-widget-flex-grow:0;}.elementor-28 .elementor-element.elementor-element-2ef5e01 > .elementor-widget-container{margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;}.elementor-28 .elementor-element.elementor-element-2ef5e01.elementor-element{--align-self:center;}.elementor-28 .elementor-element.elementor-element-2ef5e01 .jet-form-builder__label{text-align:left;}.elementor-28 .elementor-element.elementor-element-2ef5e01 .jet-form-builder__desc{text-align:left;}.elementor-28 .elementor-element.elementor-element-2ef5e01 .jet-form-builder__fields-group{gap:0.7em 0.7em;}.elementor-28 .elementor-element.elementor-element-2ef5e01 .jet-form-builder__field-wrap.checkradio-wrap span{gap:8px;}.elementor-28 .elementor-element.elementor-element-2ef5e01 .jet-form-builder input{color-scheme:normal;}.elementor-28 .elementor-element.elementor-element-2ef5e01 .jet-form-builder-repeater__row-remove{align-self:flex-start;}.elementor-28 .elementor-element.elementor-element-2ef5e01 .jet-form-builder__action-button{transition:all 0.3s;}.elementor-28 .elementor-element.elementor-element-2ef5e01 .jet-form-builder__next-page-wrap{text-align:left;}.elementor-28 .elementor-element.elementor-element-2ef5e01 .jet-form-builder-message--success{text-align:center;}.elementor-28 .elementor-element.elementor-element-2ef5e01 .jet-form-builder-message--error{text-align:center;}:root{--page-title-display:none;}body.elementor-page-28{margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;}/* Start custom CSS for jet-form-builder-form, class: .elementor-element-2ef5e01 *//* ============================================================
   DISEÑO PROFESIONAL PARA FORMULARIO EDUCATIVO
   Paleta: Rojo (#DC2626), Azul (#1E3A8A), 
           Gris claro (#F8FAFC), Negro (#111827), Blanco (#FFFFFF)
   VERSIÓN 2.0 - DISEÑO ELEGANTE Y RESPONSIVE
   ============================================================ */

/* ------------------------------------------------------------
   1. CONTENEDOR PRINCIPAL DEL FORMULARIO
   ------------------------------------------------------------ */

.jet-form-builder-form {
    background: #FFFFFF;
    border-radius: 20px;
    padding: 2.5rem 2.5rem 2rem 2.5rem;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.06), 0 8px 20px rgba(0, 0, 0, 0.02);
    border-top: 6px solid #DC2626; /* Rojo institucional */
    border-left: 1px solid #F1F5F9;
    border-right: 1px solid #F1F5F9;
    border-bottom: 1px solid #F1F5F9;
    transition: all 0.3s ease;
    max-width: 100%;
    margin: 0 auto;
}

/* Efecto hover sutil en el contenedor */
.jet-form-builder-form:hover {
    box-shadow: 0 25px 70px rgba(30, 58, 138, 0.08);
}

/* ------------------------------------------------------------
   2. TÍTULO PRINCIPAL DEL FORMULARIO
   ------------------------------------------------------------ */

.jet-form-builder-form .wp-block-heading,
.jet-form-builder-form h2 {
    font-family: 'Montserrat', 'Inter', system-ui, sans-serif;
    font-size: 1.8rem;
    font-weight: 700;
    color: #1E3A8A; /* Azul institucional */
    text-align: center;
    margin-bottom: 1.8rem;
    letter-spacing: -0.5px;
    position: relative;
    padding-bottom: 1rem;
}

/* Línea decorativa debajo del título */
.jet-form-builder-form h2::after {
    content: '';
    display: block;
    width: 80px;
    height: 4px;
    background: linear-gradient(90deg, #DC2626, #1E3A8A);
    margin: 0.6rem auto 0;
    border-radius: 4px;
    transition: width 0.3s ease;
}

/* Efecto al pasar el mouse sobre el título */
.jet-form-builder-form h2:hover::after {
    width: 120px;
}

/* Subtítulo opcional */
.jet-form-builder-form .wp-block-heading + p,
.jet-form-builder-form h2 + p {
    text-align: center;
    color: #6B7280;
    font-size: 0.95rem;
    margin-top: -0.8rem;
    margin-bottom: 1.5rem;
    font-family: 'Inter', system-ui, sans-serif;
}

/* ------------------------------------------------------------
   3. CADA FILA / CAMPO DEL FORMULARIO
   ------------------------------------------------------------ */

.jet-form-builder-row {
    margin-bottom: 1.2rem;
    position: relative;
}

/* Espaciado reducido para campos agrupados */
.jet-form-builder-row:last-of-type {
    margin-bottom: 0.5rem;
}

/* ------------------------------------------------------------
   4. ETIQUETAS (LABELS)
   ------------------------------------------------------------ */

.jet-form-builder__label-text {
    font-family: 'Montserrat', 'Inter', system-ui, sans-serif;
    font-weight: 600;
    font-size: 0.85rem;
    color: #1E3A8A; /* Azul institucional */
    margin-bottom: 0.35rem;
    display: inline-block;
    letter-spacing: 0.3px;
    transition: color 0.2s ease;
}

/* Decoración en la etiqueta */
.jet-form-builder__label-text::before {
    content: "▌";
    color: #DC2626; /* Rojo */
    font-weight: bold;
    margin-right: 6px;
    font-size: 1.1rem;
}

/* Campo requerido (asterisco) */
.jet-form-builder__required {
    color: #DC2626;
    font-weight: 700;
    margin-left: 3px;
}

/* ------------------------------------------------------------
   5. CAMPOS DE ENTRADA (Input, Select, Textarea)
   ------------------------------------------------------------ */

.jet-form-builder__field {
    width: 100%;
    padding: 12px 16px;
    font-size: 0.9rem;
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    border: 2px solid #E5E7EB;
    border-radius: 12px;
    background-color: #F8FAFC; /* Gris claro */
    transition: all 0.25s ease;
    outline: none;
    color: #111827; /* Negro suave */
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02);
}

/* Efecto focus mejorado */
.jet-form-builder__field:focus {
    border-color: #1E3A8A; /* Azul */
    box-shadow: 0 0 0 4px rgba(30, 58, 138, 0.08);
    background-color: #FFFFFF;
    transform: translateY(-1px);
}

/* Placeholder más elegante */
.jet-form-builder__field::placeholder {
    color: #9CA3AF;
    font-weight: 400;
    font-size: 0.85rem;
    opacity: 0.8;
}

/* Campos con error */
.jet-form-builder__field.is-error {
    border-color: #DC2626;
    background-color: #FEF2F2;
}

.jet-form-builder__field.is-error:focus {
    box-shadow: 0 0 0 4px rgba(220, 38, 38, 0.1);
}

/* ------------------------------------------------------------
   6. SELECT PERSONALIZADO
   ------------------------------------------------------------ */

select.jet-form-builder__field {
    appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%231E3A8A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'></polyline></svg>");
    background-repeat: no-repeat;
    background-position: right 1rem center;
    background-size: 1rem;
    cursor: pointer;
    padding-right: 2.5rem;
}

select.jet-form-builder__field:focus {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23DC2626' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'></polyline></svg>");
}

/* ------------------------------------------------------------
   7. TEXTAREA
   ------------------------------------------------------------ */

textarea.jet-form-builder__field {
    min-height: 100px;
    resize: vertical;
    font-family: 'Inter', system-ui, sans-serif;
    line-height: 1.6;
}

textarea.jet-form-builder__field:focus {
    min-height: 110px;
}

/* ------------------------------------------------------------
   8. CHECKBOX Y RADIO (Estilo moderno)
   ------------------------------------------------------------ */

.jet-form-builder__field-checkbox,
.jet-form-builder__field-radio {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 0.4rem;
    padding: 6px 0;
}

.jet-form-builder__field-checkbox input[type="checkbox"],
.jet-form-builder__field-radio input[type="radio"] {
    width: 18px;
    height: 18px;
    accent-color: #1E3A8A;
    cursor: pointer;
    flex-shrink: 0;
}

.jet-form-builder__field-checkbox label,
.jet-form-builder__field-radio label {
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 0.9rem;
    color: #111827;
    cursor: pointer;
}

/* ------------------------------------------------------------
   9. BOTÓN DE ENVÍO - ROJO CON LETRAS BLANCAS
   ============================================================ */

/* Contenedor del botón para centrarlo */
.jet-form-builder-row-submit {
    display: flex;
    justify-content: center;
    margin-top: 1.5rem;
    margin-bottom: 0;
}

.jet-form-builder__submit {
    background: #DC2626; /* Rojo sólido */
    color: #FFFFFF; /* Letras blancas */
    border: none;
    padding: 14px 48px;
    font-family: 'Montserrat', 'Inter', system-ui, sans-serif;
    font-size: 0.95rem;
    font-weight: 700;
    border-radius: 60px;
    cursor: pointer;
    transition: all 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    letter-spacing: 1.5px;
    text-transform: uppercase;
    box-shadow: 0 4px 16px rgba(220, 38, 38, 0.3);
    position: relative;
    overflow: hidden;
    min-width: 200px;
}

/* Efecto hover - oscurece el rojo */
.jet-form-builder__submit:hover {
    background: #B91C1C; /* Rojo más oscuro */
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 8px 30px rgba(220, 38, 38, 0.4);
}

.jet-form-builder__submit:active {
    transform: translateY(0) scale(0.98);
    box-shadow: 0 2px 10px rgba(220, 38, 38, 0.2);
}

/* Botón deshabilitado */
.jet-form-builder__submit:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none !important;
}

/* Botón con icono (opcional) */
.jet-form-builder__submit .dashicons {
    margin-right: 8px;
    vertical-align: middle;
}

/* ------------------------------------------------------------
   10. MENSAJES DE ÉXITO / ERROR
   ------------------------------------------------------------ */

.jet-form-builder-message--success {
    background: linear-gradient(135deg, #ECFDF5, #D1FAE5);
    border-left: 5px solid #059669;
    color: #064E3B;
    padding: 16px 20px;
    border-radius: 12px;
    margin-top: 1.2rem;
    font-size: 0.95rem;
    font-weight: 500;
    font-family: 'Inter', system-ui, sans-serif;
    box-shadow: 0 2px 8px rgba(5, 150, 105, 0.1);
}

.jet-form-builder-message--error {
    background: linear-gradient(135deg, #FEF2F2, #FEE2E2);
    border-left: 5px solid #DC2626;
    color: #991B1B;
    padding: 16px 20px;
    border-radius: 12px;
    margin-top: 1.2rem;
    font-size: 0.95rem;
    font-weight: 500;
    font-family: 'Inter', system-ui, sans-serif;
    box-shadow: 0 2px 8px rgba(220, 38, 38, 0.1);
}

/* Iconos en mensajes */
.jet-form-builder-message--success::before {
    content: "✓ ";
    font-weight: 700;
    color: #059669;
}

.jet-form-builder-message--error::before {
    content: "✕ ";
    font-weight: 700;
    color: #DC2626;
}

/* ------------------------------------------------------------
   11. CAMPOS CON DESCRIPCIÓN (Helper Text)
   ------------------------------------------------------------ */

.jet-form-builder__description {
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 0.8rem;
    color: #6B7280;
    margin-top: 0.25rem;
    display: block;
}

.jet-form-builder__description--error {
    color: #DC2626;
    font-weight: 500;
}

/* ------------------------------------------------------------
   12. DISEÑO EN DOS COLUMNAS (Opcional)
   ------------------------------------------------------------ */

/* Para formularios con columnas */
.jet-form-builder-row[data-conditional] {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

.jet-form-builder-row[data-conditional] .jet-form-builder-col {
    flex: 1 1 calc(50% - 0.5rem);
    min-width: 200px;
}

/* ------------------------------------------------------------
   13. RESPONSIVE DESIGN
   ------------------------------------------------------------ */

/* --- TABLET (768px - 1024px) --- */
@media screen and (max-width: 1024px) {
    .jet-form-builder-form {
        padding: 2rem 1.8rem 1.8rem 1.8rem;
    }
    
    .jet-form-builder-form h2 {
        font-size: 1.6rem;
        margin-bottom: 1.5rem;
    }
    
    .jet-form-builder__submit {
        padding: 12px 40px;
        font-size: 0.9rem;
        min-width: 180px;
    }
}

/* --- MÓVIL (menos de 768px) --- */
@media screen and (max-width: 768px) {
    .jet-form-builder-form {
        padding: 1.5rem 1.2rem 1.2rem 1.2rem;
        border-radius: 16px;
        border-top-width: 5px;
    }
    
    .jet-form-builder-form h2 {
        font-size: 1.4rem;
        margin-bottom: 1.2rem;
        padding-bottom: 0.8rem;
    }
    
    .jet-form-builder-form h2::after {
        width: 60px;
        height: 3px;
    }
    
    .jet-form-builder-row {
        margin-bottom: 1rem;
    }
    
    .jet-form-builder__field {
        padding: 10px 14px;
        font-size: 0.85rem;
        border-radius: 10px;
    }
    
    .jet-form-builder__label-text {
        font-size: 0.8rem;
    }
    
    .jet-form-builder__submit {
        padding: 12px 32px;
        font-size: 0.85rem;
        min-width: 160px;
        letter-spacing: 1px;
    }
    
    .jet-form-builder-row-submit {
        margin-top: 1.2rem;
    }
    
    /* Campos en dos columnas se vuelven una en móvil */
    .jet-form-builder-row[data-conditional] .jet-form-builder-col {
        flex: 1 1 100%;
    }
}

/* --- MÓVIL PEQUEÑO (menos de 480px) --- */
@media screen and (max-width: 480px) {
    .jet-form-builder-form {
        padding: 1.2rem 0.9rem 1rem 0.9rem;
        border-radius: 14px;
        border-top-width: 4px;
    }
    
    .jet-form-builder-form h2 {
        font-size: 1.2rem;
        margin-bottom: 1rem;
        padding-bottom: 0.6rem;
    }
    
    .jet-form-builder-form h2::after {
        width: 50px;
        height: 3px;
    }
    
    .jet-form-builder-row {
        margin-bottom: 0.8rem;
    }
    
    .jet-form-builder__field {
        padding: 8px 12px;
        font-size: 0.8rem;
        border-radius: 8px;
        border-width: 1.5px;
    }
    
    .jet-form-builder__label-text {
        font-size: 0.75rem;
    }
    
    .jet-form-builder__label-text::before {
        font-size: 0.9rem;
    }
    
    textarea.jet-form-builder__field {
        min-height: 80px;
    }
    
    .jet-form-builder__submit {
        padding: 10px 24px;
        font-size: 0.8rem;
        min-width: 140px;
        border-radius: 50px;
        letter-spacing: 0.5px;
    }
    
    .jet-form-builder-row-submit {
        margin-top: 1rem;
    }
    
    .jet-form-builder-message--success,
    .jet-form-builder-message--error {
        padding: 12px 16px;
        font-size: 0.85rem;
        border-left-width: 4px;
    }
}

/* ------------------------------------------------------------
   14. MEJORAS DE ACCESIBILIDAD
   ------------------------------------------------------------ */

/* Focus visible para navegación por teclado */
.jet-form-builder__field:focus-visible {
    outline: 3px solid rgba(30, 58, 138, 0.2);
    outline-offset: 2px;
}

.jet-form-builder__submit:focus-visible {
    outline: 3px solid rgba(220, 38, 38, 0.3);
    outline-offset: 2px;
}

/* Etiquetas en negrita para mejor legibilidad */
.jet-form-builder__label-text {
    font-weight: 600;
}

/* Campos requeridos con indicación visual adicional */
.jet-form-builder__required {
    color: #DC2626;
    font-weight: 700;
}

/* ------------------------------------------------------------
   15. SOPORTE PARA MODO OSCURO
   ------------------------------------------------------------ */

@media (prefers-color-scheme: dark) {
    .jet-form-builder-form {
        background: #1A1A1A;
        border-top-color: #DC2626;
        border-left-color: #2D2D2D;
        border-right-color: #2D2D2D;
        border-bottom-color: #2D2D2D;
        box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    }
    
    .jet-form-builder-form h2 {
        color: #93C5FD;
    }
    
    .jet-form-builder-form h2::after {
        background: linear-gradient(90deg, #DC2626, #60A5FA);
    }
    
    .jet-form-builder__label-text {
        color: #93C5FD;
    }
    
    .jet-form-builder__label-text::before {
        color: #DC2626;
    }
    
    .jet-form-builder__field {
        background-color: #2D2D2D;
        border-color: #4B5563;
        color: #E5E7EB;
    }
    
    .jet-form-builder__field::placeholder {
        color: #6B7280;
    }
    
    .jet-form-builder__field:focus {
        border-color: #60A5FA;
        background-color: #333333;
        box-shadow: 0 0 0 4px rgba(96, 165, 250, 0.1);
    }
    
    select.jet-form-builder__field {
        background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2393C5FD' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'></polyline></svg>");
    }
    
    .jet-form-builder__submit {
        background: #DC2626;
        color: #FFFFFF;
        box-shadow: 0 4px 16px rgba(220, 38, 38, 0.3);
    }
    
    .jet-form-builder__submit:hover {
        background: #B91C1C;
        box-shadow: 0 8px 30px rgba(220, 38, 38, 0.5);
    }
    
    .jet-form-builder-message--success {
        background: linear-gradient(135deg, #064E3B, #065F46);
        color: #D1FAE5;
        border-left-color: #34D399;
    }
    
    .jet-form-builder-message--error {
        background: linear-gradient(135deg, #7F1D1D, #991B1B);
        color: #FECACA;
        border-left-color: #EF4444;
    }
    
    .jet-form-builder__description {
        color: #9CA3AF;
    }
    
    .jet-form-builder__field-checkbox label,
    .jet-form-builder__field-radio label {
        color: #E5E7EB;
    }
    
    .jet-form-builder__field-checkbox input[type="checkbox"],
    .jet-form-builder__field-radio input[type="radio"] {
        accent-color: #60A5FA;
    }
}

/* ------------------------------------------------------------
   16. ANIMACIONES SUTILES PARA MEJOR UX
   ------------------------------------------------------------ */

/* Animación de entrada para el formulario */
@keyframes formFadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.jet-form-builder-form {
    animation: formFadeIn 0.6s ease forwards;
}

/* Animación para mensajes de éxito/error */
@keyframes messageSlideIn {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.jet-form-builder-message--success,
.jet-form-builder-message--error {
    animation: messageSlideIn 0.4s ease forwards;
}/* End custom CSS */