/*
Theme Name: Consultio
Theme URI: http://demo.casethemes.net/consultio/
Author: Case-Themes
Author URI: https://themeforest.net/user/case-themes/portfolio/
Description: Consultio is the Perfect Consulting Finane & Business WordPress Theme. Consultio is best suited for corporate website like Consultioial Advisor, Accountant, Consulting Firms, insurance, loan, tax help, Investment firm etc. This is a business theme that is help full for online presence for Corporate Business and Consultioial Firms.   
Version: 3.2.8
License: ThemeForest
License URI: https://themeforest.net/licenses
Text Domain: consultio
Tags: advisor, attorney, corporate accountant, consulting, consultant, finance, insurance, invest, investment, investor, mutual funds, pensions, retirement, saving, trading 
This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.
*/


/*Formulario*/
button#cf7mls-back-btn-cf7mls_step-4{
	background-color: #655bf6 !important;
	border: 2px solid #655bf6 !important;
	color: #ffffff !important;
}
button#cf7mls-back-btn-cf7mls_step-4:hover {
	background-color: #4f46e5 !important;
	border-color: #4f46e5 !important;
}

/* Responsive Design*/
@media (max-width: 767px) {
	/* aca van los estilos */
	.form-section-title {
		font-size: 20px !important;
		line-height: 1.5 !important;
	}
	
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
textarea,
select {
  font-size: 16px !important;
}
	
	.ct-contact-form-layout1.style9 .wpcf7-form-control-wrap .wpcf7-form-control:not(.wpcf7-submit) {
    padding-left: 25px !important;
}
	
	/* Caja Quieres guardar tus datos para futuras nominaciones*/
	.wpcf7-form .save-data-text-block h4, .wpcf7-form .save-data-title {
    font-size: 16px !important;
    font-weight: 800 !important;
	}
	
	.cf7mls_back, .cf7mls_next, button.cf7mls_back, button.cf7mls_next {
	font-size: 20px !important;
	}
	.ct-contact-form-layout1 .wpcf7-form button.action-button{
		min-width: 360px !important;
	}
	button#cf7mls-back-btn-cf7mls_step-4{
		font-size: 20px !important;
	}
	
	h2.lm-success-title {
		font-size: 32px !important;
	}
	
	.elementor-1536 .elementor-element.elementor-element-d08cb5f h2.elementor-heading-title{
		line-height: 25px !important;
		font-size: 23px!important;
	}
	
	div.elementor-element-5b89ecb{
		flex-direction: row !important;
	}
}

/* Estilo del título principal */
.form-label-main {
    display: block;
    font-size: 18px;
    font-weight: 700;
    color: #111638; /* Color azul marino de tu interfaz */
    margin-bottom: 12px;
    font-family: system-ui, sans-serif;
}

/* Animación y margen para la caja que aparece dinámicamente */
.form-group-conditional {
    margin-top: 15px;
    animation: fadeInContainer 0.3s ease-in-out;
}

.form-label-sub {
    display: block;
    font-size: 15px;
    font-weight: 600;
    color: #333333;
    margin-bottom: 8px;
}

/* Efecto de aparición suave */
@keyframes fadeInContainer {
    from {
        opacity: 0;
        transform: translateY(-5px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Forzar la reducción de espacio en la estructura nativa de CF7 */
div.form-field-group, 
.form-field-group {
    margin-bottom: 20px !important; /* Espacio entre bloques completos (ej: entre Nombre y Apellidos) */
}
@media (max-width: 767px) {
	div.form-field-group, 
	.form-field-group {
		margin-bottom: 40px !important; /* Espacio entre bloques completos (ej: entre Nombre y Apellidos) */
	}
}

/* Reducir el espacio directo debajo del título */
.form-field-group label,
div.form-field-group > label {
    display: inline-block !important;
    margin: 0 0 10px 0 !important; /* Fuerza 10px estrictos abajo, y 0 en los demás lados */
    padding: 0 !important;
    line-height: 1.2 !important;
}

/* Eliminar márgenes de los spans internos de Contact Form 7 que suelen empujar hacia abajo */
.form-field-group .wpcf7-form-control-wrap,
div.form-field-group span.wpcf7-form-control-wrap {
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Asegurar que el input mismo no tenga márgenes superiores heredados */
.form-field-group input, 
.form-field-group select,
.form-field-group .wpcf7-form-control {
    margin-top: 0 !important;
    padding-top: 10px !important;   /* Controla el aire interno superior */
    padding-bottom: 10px !important;/* Controla el aire interno inferior */
}

/* Espaciado del grupo */
.form-field-group, 
.conditional-field {
    margin-bottom: 10px;
    width: 100%;
}

/* Ocultar los campos condicionales al cargar la página */
.conditional-field {
    display: none;
}

/* Estilo para las etiquetas de texto sobre la caja */
.form-field-group label,
.conditional-field label {
    display: block;
    color: #1a2258; /* Azul marino */
    font-size: 15px;
    font-weight: 700;
    margin-bottom: 8px;
}

/* Estilo idéntico para el select y los inputs */
.wpcf7-form select,
.wpcf7-form input[type="tel"],
.wpcf7-form input[type="email"] {
    width: 100%;
    background-color: #f5f6f9; /* Fondo gris claro */
    border: 1px solid #e2e5ec;
    border-radius: 14px; /* Bordes redondeados del ejemplo */
    padding: 14px 20px;
    font-size: 15px;
    color: #4b526d;
    box-sizing: border-box;
    appearance: none; /* Quita el estilo por defecto de los select en móviles */
    -webkit-appearance: none;
    transition: all 0.3s ease;
}

/* ESTADO EN FOCO / SELECCIONADO (Borde Morado del ejemplo) */
.wpcf7-form select:focus,
.wpcf7-form input:focus {
    border-color: #5d5fef; /* El color morado de tu switch */
    background-color: #ffffff;
    box-shadow: 0 0 0 3px rgba(93, 95, 239, 0.15);
    outline: none;
    color: #1a2258;
}

/* Tarjeta contenedora compacta con padding armónico */
.save-data-card {
    background-color: #f3f5ff; /* Color de fondo suave */
    border-radius: 24px;
    padding: 0px 18px; /* Menos espacio arriba/abajo, excelente balance lateral */
    display: flex;
    justify-content: space-between;
    align-items: center; /* Alinea perfectamente los centros de ambas columnas */
    gap: 20px;
    box-sizing: border-box;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    max-width: 100%;
}

/* Columna de Textos (Agrupados para que no se separen) */
.save-data-info {
    display: flex;
    flex-direction: column;
    gap: 6px; /* Espacio mínimo y estético entre título y subtítulo */
    text-align: left;
}

.save-data-title {
    margin: 0 !important;
    color: #1a2258; /* Azul marino oscuro */
    font-size: 22px;
    font-weight: 700;
    line-height: 1.2;
}

.save-data-text {
    margin: 0 !important;
    color: #555a75; /* Gris azulado */
    font-size: 15px;
    line-height: 1.4;
}

/* Columna del Switch (Perfectamente alineado y centrado) */
.save-data-action {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 60px;
    flex-shrink: 0; /* Evita que el botón se achique en pantallas pequeñas */
}

/* Palabra "Guardar" debajo del switch */
.action-label {
    color: #5d5fef; /* Color morado exacto del texto */
    font-size: 13px;
    font-weight: 700;
    margin-top: 8px; /* Pequeña separación del botón */
    text-align: center;
    line-height: 1;
}

/* --- Estilo del Switch Deslizable --- */
.switch-toggle {
    position: relative;
    display: inline-block;
    width: 54px;
    height: 30px;
    margin: 0;
    cursor: pointer;
}

/* Ocultamos el checkbox nativo de WordPress/CF7 */
.switch-toggle input[type="checkbox"] {
    opacity: 0;
    width: 0;
    height: 0;
    position: absolute;
}

/* Fondo del Switch (Cuerpo base) */
.switch-toggle .slider-switch {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background-color: #cbd2e0; /* Color gris por si se desactiva */
    transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border-radius: 30px;
}

/* Botón interior circular blanco */
.switch-toggle .slider-switch:before {
    position: absolute;
    content: "";
    height: 22px;
    width: 22px;
    left: 4px;
    bottom: 4px;
    background-color: #ffffff;
    transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border-radius: 50%;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    z-index: 2;
}

/* El pequeño círculo interno del botón blanco */
.switch-toggle .slider-switch:after {
    position: absolute;
    content: "";
    height: 8px;
    width: 8px;
    left: 11px;
    bottom: 11px;
    background-color: #5d5fef; /* Morado interno */
    border-radius: 50%;
    transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 3;
}

/* --- ESTADO ACTIVADO (default:on) --- */
/* Cambia el fondo del switch a morado */
.switch-toggle input[type="checkbox"]:checked + .slider-switch {
    background-color: #5d5fef;
}

/* Desplaza el círculo blanco a la derecha */
.switch-toggle input[type="checkbox"]:checked + .slider-switch:before {
    transform: translateX(24px);
}

/* Desplaza el punto morado interno a la derecha manteniendo su posición */
.switch-toggle input[type="checkbox"]:checked + .slider-switch:after {
    transform: translateX(24px);
}

/* ==========================================================================
   1. GLOBAL: TIPOGRAFÍA Y CONFIGURACIÓN BASE DEL FORMULARIO
   ========================================================================== */
#wpcf7-f123-p456-o1 { /* Reemplaza con el ID real de tu formulario si es necesario */
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* ==========================================================================
   2. ENCABEZADO: TÍTULO PRINCIPAL Y LÍNEA SEPARADORA IZQUIERDA
   ========================================================================== */
.form-section-header {
    position: relative;
    padding-left: 20px; /* Espacio para que el texto no choque con la línea vertical */
    margin-bottom: 28px;
	margin-top: 50px;
}

/* La línea vertical del lado izquierdo */
.form-section-header::before {
    content: "";
    position: absolute;
    left: 0;
    top: 4px; /* Ajuste para centrar verticalmente con el texto */
    bottom: 4px;
    width: 3px; /* Grosor del separador */
    background-color: #1a2258; /* Azul marino oscuro idéntico al ejemplo */
    border-radius: 2px;
}

/* Título de la sección (Ej: 1. Sobre ti...) */
.form-section-title {
    margin: 0 0 6px 0 !important;
    color: #1a2258; /* Azul marino oscuro */
    font-size: 26px; /* Tamaño destacado */
    font-weight: 800; /* Peso extra-bold para el título */
    line-height: 1.2;
}

/* Bajada del título (Ej: Queremos conocerte...) */
.form-section-subtitle {
    margin: 0 !important;
    color: #4b526d; /* Gris azulado suave */
    font-size: 16px;
    font-weight: 400; /* Peso regular/normal */
    line-height: 1.4;
}

/* ==========================================================================
   3. CAMPOS DE ENTRADA: LABELS (Nombre, Apellidos) E INPUTS
   ========================================================================== */

/* Etiquetas sobre las cajas de datos (Ej: Nombre, Apellidos, etc.) */
.wpcf7-form label,
.form-field-label {
    display: block;
    color: #1a2258; /* Mismo azul marino del título */
    font-size: 18px; /* Tamaño intermedio y legible */
    font-weight: 700; /* Peso bold/negrita */
    margin-bottom: 8px; /* Espacio controlado con su respectiva caja */
}

/* Cajas de texto (Inputs) modificadas para coincidir con la referencia */
.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form input[type="tel"],
.wpcf7-form select,
.wpcf7-form textarea {
    width: 100%;
    background-color: #f5f6f9; /* Fondo grisáceo muy claro y limpio */
    border: 1px solid #e2e5ec; /* Borde sutil casi imperceptible */
    border-radius: 12px; /* Esquinas redondeadas suaves */
    padding: 12px 16px;
    font-size: 16px;
    color: #1a2258;
    box-sizing: border-box;
    transition: all 0.3s ease;
}

/* Efecto Focus al hacer clic sobre una caja */
.wpcf7-form input:focus,
.wpcf7-form select:focus,
.wpcf7-form textarea:focus {
    background-color: #ffffff;
    border-color: #1a2258;
    outline: none;
    box-shadow: 0 0 0 3px rgba(26, 34, 88, 0.1);
}

/* Estilo para los placeholders (Ej: "Ej: Antonia") */
.wpcf7-form input::placeholder,
.wpcf7-form textarea::placeholder {
    color: #888e9b; /* Gris apagado para los ejemplos internos */
    font-weight: 400;
}

/* ==========================================================================
   PASO 2: ALINEACIÓN Y DISEÑO DEL FORMULARIO SIN TOCAR HTML
   ========================================================================== */

/* 1. Forzar que los campos se organicen en 2 columnas (Grid) de forma automática */
.wpcf7-form .page-step-2 .wpcf7-form-control-wrap,
.wpcf7-form .step-2-container, 
.wpcf7-form .form-grid-step2 { /* Selectores comunes de plugins multi-step */
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 24px !important;
    width: 100% !important;
}

/* Forzar que las etiquetas (Labels) se mantengan firmes sobre las cajas */
.wpcf7-form .page-step-2 label {
    display: block !important;
    color: #1a2258 !important; /* Azul Marino */
    font-size: 15px !important;
    font-weight: 700 !important;
    margin-bottom: 8px !important;
}

/* ==========================================================================
   2. LIMPIEZA DE FLECHAS EN EL PASO 2 (Campos de texto, Edad y Desplegables)
   ========================================================================== */

/* Eliminar iconos de fondo y flechas raras inyectadas en inputs y selects */
.wpcf7-form input[type="text"],
.wpcf7-form input[type="number"],
.wpcf7-form select {
    -webkit-appearance: none !important; /* Chrome, Safari, Edge */
    -moz-appearance: none !important;    /* Firefox */
    appearance: none !important;         /* Estándar */
    background-image: none !important;   /* Mata flechas inyectadas por el tema */
    padding-right: 16px !important;      /* Corrige el espacio del texto */
}

/* Ocultar las flechas nativas para subir/bajar número en el campo de "Edad" */
.wpcf7-form input[type="number"]::-webkit-outer-spin-button,
.wpcf7-form input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none !important;
    margin: 0 !important;
}
.wpcf7-form input[type="number"] {
    -moz-appearance: textfield !important;
}

/* ==========================================================================
   3. ADAPTACIÓN PARA MÓVILES (Paso 2)
   ========================================================================== */
@media (max-width: 768px) {
    /* Pasar a 1 sola columna en pantallas de celulares */
    .wpcf7-form .page-step-2 .wpcf7-form-control-wrap,
    .wpcf7-form .step-2-container,
    .wpcf7-form .form-grid-step2 {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }
}

/* ==========================================================================
   ALINEACIÓN DEL BANNER "GUARDA TUS DATOS" (ESTILO REFERENCIA)
   ========================================================================== */

/* 1. Contenedor principal de la franja gris/azulada */
.wpcf7-form .save-data-banner,
.wpcf7-form .step-save-wrapper { /* Reemplaza por la clase real de la franja si difiere */
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important; /* Centra verticalmente el contenido izquierdo y derecho */
    background-color: #f4f6fa !important; /* Fondo suave de la captura */
    border-radius: 20px !important;     /* Bordes redondeados del contenedor */
    padding: 24px 32px !important;     /* Espaciado interno general */
    width: 100% !important;
    box-sizing: border-box !important;
    gap: 20px !important;
}

/* 2. Bloque de textos (Izquierda) */
.wpcf7-form .save-data-text-block {
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important; /* Espacio corto entre el título y la descripción */
    text-align: left !important;
}

/* Título principal */
.wpcf7-form .save-data-text-block h4,
.wpcf7-form .save-data-title {
    color: #1a2258 !important; /* Azul marino corporativo */
    font-size: 22px !important;
    font-weight: 700 !important;
    margin: 0 !important;
}

/* Subtexto descriptivo */
.wpcf7-form .save-data-text-block p,
.wpcf7-form .save-data-subtitle {
    color: #4b526d !important;
    font-size: 15px !important;
    margin: 0 !important;
}

/* 3. Bloque del Interruptor + Texto "Guardar" (Derecha) */
/* Forzamos a que actúe como un bloque unificado de columna al centro */
.wpcf7-form .save-action-container,
.wpcf7-form .toggle-button-wrapper { 
    display: inline-flex !important;
    flex-direction: column !important;
    align-items: center !important;    /* Centra el switch horizontalmente con la palabra "Guardar" */
    justify-content: center !important;
    min-width: 80px !important;        /* Evita que colapse o se achique por falta de espacio */
    gap: 4px !important;               /* Reduce al mínimo el espacio entre el botón y la palabra */
    flex-shrink: 0 !important;         /* Evita que el navegador deforme el switch en pantallas medianas */
}

/* Asegurar el tamaño del Switch animado */
.wpcf7-form .save-action-container input[type="checkbox"],
.wpcf7-form .save-action-container .switch-element {
    margin: 0 !important; /* Remueve márgenes heredados del tema que causaban desalineación */
}

/* Texto específico "Guardar" debajo del switch */
.wpcf7-form .save-action-container label,
.wpcf7-form .save-action-container span.text-guardar {
    color: #5d5fef !important; /* El color morado exacto */
    font-size: 16px !important;
    font-weight: 700 !important;
    text-align: center !important;
    margin: 0 !important;
    padding: 0 !important;
    display: block !important;
}

/* ==========================================================================
   RESPONSIVO: Comportamiento en celulares
   ========================================================================== */
@media (max-width: 600px) {
    .wpcf7-form .save-data-banner,
    .wpcf7-form .step-save-wrapper {
        flex-direction: column !important; /* En móviles se apila para que no se corte */
        text-align: center !important;
        padding: 20px !important;
    }
    .wpcf7-form .save-data-text-block {
        text-align: center !important;
    }
    .wpcf7-form .save-action-container {
        margin-top: 10px !important;
    }
}

/* ==========================================================================
   BARRA DE PROGRESO DE PASOS (REDISEÑO COMPLETO TIPO MAGENTA)
   ========================================================================== */

/* 1. Contenedor Principal: Centrado absoluto en la página */
.cf7msm-steps, 
.wpcf7msm-steps,
.cf7-multi-step-indicator {
    display: flex !important;
    justify-content: center !important;
    align-items: flex-start !important;
    position: relative !important;
    width: 100% !important;
    max-width: 650px !important; /* Acorta la línea para que no se pegue a los bordes */
    margin: 40px auto !important; /* Centra el bloque entero en la pantalla */
    padding: 0 !important;
    list-style: none !important;
}

/* 2. La Línea Conectora Gris Grisácea del Fondo */
.cf7msm-steps::before,
.wpcf7msm-steps::before {
    content: "" !important;
    position: absolute !important;
    top: 25px !important; /* Justo en la mitad vertical de los círculos de 50px */
    left: 10% !important;
    right: 10% !important;
    height: 2px !important;
    background-color: #cccccc !important; /* Gris suave del ejemplo */
    z-index: 1 !important;
}

/* 3. Estructura de cada uno de los 3 pasos individuales */
.cf7msm-steps .step,
.wpcf7msm-steps li,
.cf7-multi-step-indicator .step-item {
    position: relative !important;
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    z-index: 2 !important; /* Quedan sobre la línea gris */
}

/* 4. Formato de los Círculos Base (Estado NO Activo) */
.cf7msm-steps .step .step-number,
.wpcf7msm-steps li .step-node,
.cf7-multi-step-indicator .step-item .number {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 50px !important;
    height: 50px !important;
    border-radius: 50% !important;
    background-color: #ffffff !important; /* Fondo blanco requerido */
    border: 2px solid #b3b3b3 !important;  /* Borde gris del ejemplo */
    color: #8c8c8c !important;             /* Número color gris */
    font-size: 20px !important;
    font-weight: 700 !important;
    background-image: none !important;     /* Elimina degradados previos */
    box-shadow: none !important;
    transition: all 0.3s ease !important;
}

/* 5. Círculo en Estado ACTIVO / SELECCIONADO (Magenta Sólido sin Borde) */
.cf7msm-steps .step.active .step-number,
.wpcf7msm-steps li.active .step-node,
.cf7msm-steps .step.current .step-number,
.wpcf7msm-steps li.current .step-node,
.cf7-multi-step-indicator .step-item.active .number {
    background-color: #e040fb !important; /* Color Magenta de la captura */
    border-color: #e040fb !important;     /* Sin borde diferenciado */
    color: #ffffff !important;             /* Número blanco */
}

/* ==========================================================================
   TEXTOS INFERIORES DINÁMICOS (Inyectados por CSS mediante selectores de orden)
   ========================================================================== */
.cf7msm-steps .step,
.wpcf7msm-steps li,
.cf7-multi-step-indicator .step-item {
    padding-top: 65px !important; /* Genera el margen exacto para que el texto se acomode abajo */
}

/* Estilo común de las tipografías inferiores */
.cf7msm-steps .step::after,
.wpcf7msm-steps li::after,
.cf7-multi-step-indicator .step-item::after {
    position: absolute !important;
    bottom: -25px !important;
    font-family: system-ui, -apple-system, sans-serif !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    color: #555555 !important; /* Gris oscuro intermedio */
    white-space: nowrap !important;
}

/* Asignación de textos específicos por posición */
.cf7msm-steps .step:nth-child(1)::after, .wpcf7msm-steps li:nth-child(1)::after { content: "Sobre ti"; }
.cf7msm-steps .step:nth-child(2)::after, .wpcf7msm-steps li:nth-child(2)::after { content: "Sobre la persona a quien nominas"; }
.cf7msm-steps .step:nth-child(3)::after, .wpcf7msm-steps li:nth-child(3)::after { content: "Confirmación"; }

/* Color del texto del paso que está activo actualmente (Opcional, Azul/Morado corporativo) */
.cf7msm-steps .step.active::after, .wpcf7msm-steps li.active::after,
.cf7msm-steps .step.current::after, .wpcf7msm-steps li.current::after {
    color: #1a2258 !important; 
}

/* Ocultar textos nativos del plugin si los genera arriba para que no se dupliquen */
.cf7msm-steps .step-title, 
.wpcf7msm-steps .step-name {
    display: none !important;
}

.ct-contact-form-layout1.style9 {
    /* 1. Bloqueado: No tiene borde */
    /* border: 1px solid #e4e3e3; */
    border: none !important;

    /* 2. Bloqueado: No tiene padding (espacio interno) */
    /* padding: 44px 40px 54px; */
    padding: 0 !important;

    /* 3. Bloqueado: No tiene color de fondo (se vuelve transparente) */
    /* background-color: #fff; */
    background-color: transparent !important;
}

.ct-contact-form-layout1.style9 .wpcf7-form-control-wrap .wpcf7-form-control:not(.wpcf7-submit) {
    padding-left: 25px !important;
}


/* --- ETAPA 3 - FORMULARIO CONFIRMACIÓN LÍDERES MAYORES --- */

/* --- COMPONENTES PANTALLA CONFIRMACIÓN LÍDERES MAYORES --- */

.lm-confirmation-screen {
    max-width: 1150px;
    margin: 0 auto;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    color: #2c3565;
}

/* Tarjetas contenedoras de datos */
.lm-card {
    background-color: #e5e7eb; /* Tono azul claro de fondo */
    border-radius: 16px;
    padding: 32px;
    margin-bottom: 24px;
    border: 1px solid transparent;
}

.lm-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
    border-bottom: 1px solid #e2e8f5;
    padding-bottom: 16px;
}

.lm-card-header h2 {
    font-size: 24px;
    color: #1d2774;
    font-weight: 700;
    margin: 0;
}

/* Botón Corregir Datos */
.lm-btn-correct {
    background: #ffffff;
    border: 1px solid #5c56f7;
    color: #5c56f7;
    padding: 0px 18px;
    border-radius: 15px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: all 0.2s ease;
}

.lm-btn-correct:hover {
    background: #5c56f7;
    color: #ffffff;
}

/* Grilla para metadata */
.lm-card-body.lm-grid-2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px 40px;
}

@media (max-width: 768px) {
    .lm-card-body.lm-grid-2 {
        grid-template-columns: 1fr;
        gap: 16px;
    }
}

.lm-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.lm-f-label {
    font-size: 15px;
    font-weight: 700;
    color: #1d2774;
}

.lm-f-val {
    font-size: 16px;
    color: #434a75;
    font-weight: 400;
}

/* Sección de historias y textos largos integrados */
.lm-card-narrative-section {
    margin-top: 32px;
    padding-top: 28px;
    border-top: 1px solid #e2e8f5;
    display: flex;
    flex-direction: column;
    gap: 28px;
}

.lm-f-val-text {
    font-size: 15px;
    line-height: 1.6;
    color: #434a75;
    margin: 4px 0 0 0;
    white-space: pre-line; /* Mantiene saltos de línea del textarea */
}

/* Bloque del Toggle de Boletín Informativo */
.lm-toggle-box {
    background-color: #f5f7ff;
    border-radius: 16px;
    padding: 24px 32px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
}

.lm-toggle-text h3 {
    font-size: 23px;
    color: #1d2774;
    margin: 0 0 4px 0;
    font-weight: 700;
}

.lm-toggle-text p {
    font-size: 17px;
    color: #636b95;
    margin: 0;
}

/* Customización del Checkbox nativo de CF7 como Switch Toggle */
.lm-switch {
    position: relative;
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
    color: #5c56f7;
    gap: 10px;
}

/* Input de Correo */
.lm-email-group {
    margin-bottom: 35px;
}

.lm-email-label {
    display: block;
    font-size: 16px;
    font-weight: 700;
    color: #1d2774;
    margin-bottom: 10px;
}

.lm-asterisk {
    color: #ef4444;
}

.lm-input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.lm-mail-icon {
    position: absolute;
    left: 16px;
    color: #8c94bd;
    display: flex;
    align-items: center;
}

.lm-input-email {
    width: 100%;
    padding: 16px 16px 16px 48px;
    border: 1px solid #cbd5e1;
    background-color: #f8fafc;
    border-radius: 12px;
    font-size: 16px;
    outline: none;
    transition: border-color 0.2s;
}

.lm-input-email:focus {
    border-color: #5c56f7;
    background-color: #fff;
}

/* Manejo de estados de Error de Validación (Nativo de CF7) */
.wpcf7-not-valid .lm-input-email {
    border: 1px solid #ef4444 !important;
    background-color: #fef2f2 !important;
}

.wpcf7-not-valid-tip {
    color: #ef4444;
    font-size: 16px;
    font-weight: 600;
    margin-top: 8px;
    display: flex;
    align-items: center;
    gap: 6px;
}

/* Botón Enviar Postulación Principal */
.lm-submit-container {
    text-align: center;
    margin-top: 20px;
}

.lm-btn-submit {
    background: #5c56f7 !important; /* Púrpura/Índigo vibrante */
    color: #ffffff !important;
    border: none !important;
    padding: 16px 48px !important;
    font-size: 18px !important;
    font-weight: 600 !important;
    border-radius: 35px !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: background 0.2s ease !important;
    box-shadow: 0 4px 12px rgba(92, 86, 247, 0.2);
}

.lm-btn-submit:hover {
    background: #463ec9 !important;
}

/* 1. Contenedor principal del input e ícono */
.form-group-email .input-wrapper {
    display: flex;           /* Alinea el ícono y el input en la misma línea */
    align-items: center;     /* Centra verticalmente el ícono con el texto */
    background-color: #ededed; /* Fondo gris claro de tu imagen */
    border: 2px solid #d66f64; /* Borde rojo/coral de error */
    border-radius: 30px !important;/* Bordes redondeados idénticos a la captura */
    padding: 0 16px;         /* Margen interno para que no toque los bordes */
    height: 56px;            /* Altura cómoda para el campo */
    width: 100%;             /* Se adapta al ancho disponible */
    box-sizing: border-box;  /* Evita que el padding deforme el tamaño */
}

/* 2. Estilo del Ícono */
.form-group-email .mail-icon {
    color: #555555;          /* Color gris oscuro para el sobre */
    margin-right: 12px;      /* Separación exacta entre el ícono y el texto */
    flex-shrink: 0;          /* Evita que el ícono se aplaste en pantallas chicas */
}

/* 3. ¡EL TRUCO CLAVE! Resetear el input nativo */
.form-group-email .input-wrapper input {
    border: none !important;      /* Elimina el borde propio del input */
    background: transparent !important; /* Elimina el fondo blanco del input */
    outline: none !important;     /* Elimina el borde azul al hacer clic */
    width: 100%;                  /* Toma todo el espacio restante dentro de la caja */
    height: 100%;                 /* Toma todo el alto disponible */
    font-size: 17px;              /* Tamaño de la fuente del texto */
    color: #333333;               /* Color del texto escrito */
    padding: 0;                   /* Resetea paddings por defecto */
    margin: 0;
}


/* ==========================================================================
   PASO 4 PANTALLA DE ÉXITO FORMULARIO
   ========================================================================== */
/* Ocultar la tarjeta de éxito por defecto durante el flujo del formulario */
#lm-success-card-wrapper {
    display: none;
}

/* ======================================================= */
/* COMPORTAMIENTO NATIVO AL ENVIAR CON ÉXITO (.sent)       */
/* ======================================================= */

/* Oculta limpiamente las etapas previas, botones y elementos internos */
.wpcf7 .sent form > *,
.wpcf7 .sent .wpcf7-step,
.wpcf7 .sent .multistep-step,
.wpcf7 .sent .cf7ms-step,
.wpcf7 .sent .wpcf7-response-output {
    display: none !important;
}

/* Despliega el bloque de éxito en toda la extensión del contenedor del formulario */
.wpcf7 .sent #lm-success-card-wrapper {
    display: block !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

/* ======================================================= */
/* RÉPLICA ESTILÍSTICA DE LA CAJA CONTENEDORA              */
/* ======================================================= */
.lm-success-card {
    max-width: 100% !important;
    width: 100% !important;
    margin: 0 auto !important;
    background-color: #f5f7ff !important; /* Color de fondo solicitado */
    border-radius: 24px !important;       /* Consistencia con el radio del paso 3 */
    padding: 60px 30px !important;
    text-align: center !important;        /* Centrado absoluto de textos y elementos inline */
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;       /* Centrado de flex-items (icono y botón) */
    justify-content: center !important;
}

/* Sanitización de espaciados y párrafos vacíos huérfanos de WP */
.lm-success-card p, 
.lm-success-card br {
    display: none !important; 
}
.lm-success-card p.lm-success-subtitle {
    display: block !important;
}

/* Contenedor del Icono Lordicon */
.lm-success-icon-box {
    margin: 0 auto 15px auto !important;
    display: inline-block !important;
    text-align: center !important;
}

/* ======================================================= */
/* TIPOGRAFÍA, PESOS Y COLORES (Heredados de etapas 1, 2 y 3) */
/* ======================================================= */
.lm-success-title {
    color: #1e2a78 !important;         /* Tono azul marino de títulos anteriores */
    font-family: inherit !important;   /* Mantiene la fuente global del sitio */
    font-size: 36px !important;        /* Jerarquía visual idéntica a la captura */
    font-weight: 700 !important;       /* Peso fuerte para el encabezado principal */
    margin: 0 auto 16px auto !important;
    letter-spacing: -0.5px !important;
    line-height: 1.2 !important;
    border: none !important;
    background: none !important;
    padding: 0 !important;
    width: 100% !important;
}

.lm-success-subtitle {
    color: #2b3990 !important;         /* Color de la bajada anterior */
    font-family: inherit !important;
    font-size: 18px !important;
    line-height: 1.5 !important;
    font-weight: 500 !important;       /* Peso medio semi-bold corporativo */
    margin: 0 auto 36px auto !important;
    max-width: 720px !important;       /* Ajuste para quiebre suave de texto */
    width: 100% !important;
}

/* Botón "Postular a otra persona" */
.lm-success-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background-color: #635bff !important; /* Tono lila/azul del CTA principal */
    color: #ffffff !important;
    font-family: inherit !important;
    font-size: 18px !important;
    font-weight: 600 !important;
    padding: 14px 40px !important;
    border-radius: 50px !important;
    border: none !important;
    cursor: pointer !important;
    transition: background-color 0.2s ease, transform 0.1s ease !important;
    box-shadow: 0 4px 14px rgba(99, 91, 255, 0.2) !important;
    text-decoration: none !important;
    margin: 0 auto !important;
}

.lm-success-btn:hover {
    background-color: #4f46e5 !important;
}

.lm-success-btn-arrow {
    margin-left: 10px !important;
    font-size: 18px !important;
    display: inline-block !important;
    transition: transform 0.2s ease !important;
}

.lm-success-btn:hover .lm-success-btn-arrow {
    transform: translateX(5px) !important;
}