.elementor-9259 .elementor-element.elementor-element-b3aa3f0{--display:flex;--min-height:70vh;--justify-content:center;--align-items:center;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--padding-top:100px;--padding-bottom:100px;--padding-left:0px;--padding-right:0px;}.elementor-9259 .elementor-element.elementor-element-e14939f{width:var( --container-widget-width, 86% );max-width:86%;--container-widget-width:86%;--container-widget-flex-grow:0;}.elementor-9259 .elementor-element.elementor-element-e14939f.elementor-element{--align-self:center;}/* Start custom CSS for shortcode, class: .elementor-element-e14939f *//*@media (min-width: 1025px) and (max-width: 1440px) {
    .dep-grid {
        display: flex;
        gap: 150px;
        flex-direction: row;
    }
}

@media (max-width: 767px) {
    .dep-grid {
        display: flex;
        gap: 70px;
        flex-direction: column;
    }
}


.dep-grid button {
    background: #F22811;
    font-weight: 500;
}

.dep-grid h3 {
    font-weight: 500;
}*/

/* --- 1. ESTRUCTURA (LADO A LADO) --- */

/* El contenedor principal */
.dep-grid {
    display: flex;            /* Activa el modo flexible (lado a lado) */
    justify-content: center;  /* Centra el contenido */
    gap: 120px;                /* Espacio (hueco) entre Login y Registro */
    max-width: 1000px;        /* Ancho máximo total para que no se estire infinito */
    margin: 0 auto;           /* Centrado en la página */
    align-items: flex-start;  /* Alinea al inicio (útil si uno es más alto que el otro) */
}

/* Las columnas individuales */
.dep-col {
    flex: 1;              /* Ambas columnas ocupan el mismo ancho (50/50) */
    min-width: 300px;     /* Ancho mínimo antes de que decida bajar en móviles */
}

/* Títulos (H3) */
h3.dep-title {
    text-align: center;
    margin-bottom: 15px;
    color: #333;
    font-size: 1.5rem;
}

/* --- 2. DISEÑO DEL FORMULARIO (Inputs y Labels) --- */

/* Estilo de la "caja" del formulario */
.dep-form {
    background-color: #f9f9f9;
    padding: 25px;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
}

/* Separación entre campos */
.dep-form p {
    margin: 0 0 15px 0;
}

/* Etiquetas (Labels) */
.dep-form label {
    display: block;
    margin-bottom: 6px;
    font-weight: 600;
    color: #444;
    font-size: 0.9rem;
}

/* Inputs (Campos de texto) */
.dep-form input[type="text"],
.dep-form input[type="password"],
.dep-form input[type="email"] {
    width: 100%;
    padding: 12px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box; /* Vital para que no se salga del ancho */
    font-size: 16px;
    background-color: #fff;
}

/* Efecto Focus */
.dep-form input:focus {
    border-color: #F22811; /* Opcional: Borde rojo al escribir para combinar */
    outline: none;
}

/* --- 3. BOTÓN (COLOR ROJO SOLICITADO) --- */

.dep-form .dep-btn {
    width: 100%;
    padding: 12px;
    margin-top: 10px;
    background-color: #F22811; /* <--- Color solicitado */
    color: white;
    font-weight: bold;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 16px;
    transition: background-color 0.3s ease;
}

.dep-form .dep-btn:hover {
    background-color: #d11f0e; /* Un rojo un poco más oscuro al pasar el mouse */
}

/* --- 4. RESPONSIVE (Móviles) --- */

/* Cuando la pantalla sea menor a 768px (Tablets y Celulares) */
@media (max-width: 768px) {
    .dep-grid {
        flex-direction: column; /* Cambia de lado-a-lado a uno-debajo-otro */
        gap: 40px; /* Más espacio vertical entre los formularios */
    }

    .dep-col {
        width: 100%; /* Ocupa todo el ancho en móvil */
        min-width: auto;
    }
}/* End custom CSS */