/* --- Definición de Fuentes (Poppins) --- */
@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-display: swap;
    font-weight: 200; /* Extra-ligero */
    src: url(https://cdn.jsdelivr.net/fontsource/fonts/poppins@latest/latin-200-normal.woff2) format('woff2');
    unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* TE RECOMIENDO AÑADIR ESTOS TAMBIÉN
  Tu sitio usa font-weight: 400 (normal) y 700 (bold).
  Si no los añades, el navegador intentará "falsear" la negrita y se verá mal.
*/

@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-display: swap;
    font-weight: 400; /* Regular */
    src: url(https://cdn.jsdelivr.net/fontsource/fonts/poppins@latest/latin-400-normal.woff2) format('woff2');
    unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-display: swap;
    font-weight: 700; /* Bold */
    src: url(https://cdn.jsdelivr.net/fontsource/fonts/poppins@latest/latin-700-normal.woff2) format('woff2');
    unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}



/* --- Fin de Definición de Fuentes --- */

/* --- Variables de Estilo --- */
:root {
    --color-fondo-oscuro:#011A2A;/* #183151;*/
    --color-primario-azul-oscuro: #183151;
    --color-amarillo-mostaza: #000000;
    --color-texto-claro: #E0E7ED;
    --color-texto-link-footer: #A1B0C4;
    --color-texto-parrafo: #5B6A7A;
    --color-fondo-claro: #F0F2F5;
    --color-fondo: #FFFFFF;
    --color-borde: #E0E0E0;
    --fuente-principal: 'Poppins','Montserrat';
   

}


/* --- Reseteo Básico y Estilos Globales --- */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--fuente-principal);
    line-height: 1.6;
    color: var(--color-texto-parrafo);
    background-color: var(--color-fondo);
    -webkit-font-smoothing: antialiased;
}

.container {
    width: 90%;
    max-width: 1100px;
    margin: 0 auto;
}

h1, h2 {
    font-weight: 700;
    margin-bottom: 1rem;
    color: var(--color-primario-azul-oscuro);
}

h2 {
    font-size: 2.2rem;
    line-height: 1.2;
    text-align: center;
    margin-bottom: 1.5rem;
}

p {
    margin-bottom: 1.5rem;
    text-align: center;
    font-size: 1.1rem;
    color: var(--color-texto-parrafo);
}

/* --- 1. Estilo de Encabezado (Header) --- */
.header {
    background: var(--color-fondo);
    border-bottom: 1px solid var(--color-borde);
    padding: 1.5rem 0;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}

.header .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo {
    font-size: 1.5rem;
    color: var(--color-primario-azul-oscuro);
    text-decoration: none;
    font-weight: 700;
}


/* --- Estilos para los Logos en el Header --- */

/* Contenedor de los logos */
.logo-container {
    display: flex; /* Habilitar Flexbox para alineación */
    justify-content: center; /* Centrar horizontalmente los logos */
    align-items: center; /* Alinear verticalmente los logos (si tuvieran alturas diferentes) */
    gap: 1.5rem; /* Espacio entre los logos */
    padding: 1rem 0; /* Espaciado interno arriba y abajo */
}

/* Estilos para cada logo individual */
.header-logo {
    max-height: 50px; /* Tamaño máximo para la altura de los logos */
    width: auto; /* Mantener la proporción original de la imagen */
    object-fit: contain; /* Asegura que el logo se vea completo dentro del espacio */
}

/* Puedes ajustar el tamaño de los logos para pantallas pequeñas si es necesario */
@media (max-width: 768px) {
    .logo-container {
        flex-direction: column; /* Apilar los logos en pantallas pequeñas */
        gap: 0.5rem; /* Menos espacio cuando están apilados */
    }

    .header-logo {
        max-height: 40px; /* Reducir un poco el tamaño en móvil */
    }
}


/* --- Estilos para los Dos Logos del Footer --- */

/* Contenedor para alinear los logos */
.footer-logo-container {
    display: flex;
    align-items: center; /* Alinea verticalmente */
    /* 'flex-start' alinea a la izquierda de la columna (por defecto) */
    justify-content: flex-start; 
    gap: 1.5rem; /* Espacio entre los logos */
    margin-bottom: 1rem; /* Espacio antes del copyright */
    flex-wrap: wrap; /* Permite que se apilen si no caben */
}

/* Estilo para cada logo individual */
.footer-logo-img {
    max-height: 40px; /* Altura máxima (ajusta según necesites) */
    width: auto;      /* Ancho automático para mantener proporción */
    object-fit: contain;
    max-width: 100%; /* Asegura que un logo muy ancho no se desborde */
}

/* En tu CSS ya tienes una regla que centra la columna del logo en 
  pantallas medianas. Este código la complementa.
*/
@media (max-width: 992px) {
    .footer-logo-container {
        /* Centra los logos cuando la columna del logo pasa a 100% */
        justify-content: center;
    }
}



.nav-main a {
    color: var(--color-primario-azul-oscuro);
    text-decoration: none;
    margin-left: 1.8rem;
    font-weight: 500;
    transition: color 0.3s ease;
    font-size: 0.95rem;
    /*text-transform: uppercase;*/
}

.nav-main a:hover {
    color: var(--color-fondo-oscuro);
}

/* --- 2. Contenido Principal (Formulario) --- */
.main-content {
    padding: 5rem 0;
    background-color: var(--color-fondo-claro);
    min-height: 70vh;
}

.form-container {
    max-width: 700px;
    margin: 0 auto;
    background: var(--color-fondo);
    padding: 2.5rem;
    border-radius: 8px;
    border: 1px solid var(--color-borde);
    box-shadow: 0 4px 15px rgba(0,0,0,0.08);
    overflow: hidden; /* Para contener la animación del wizard */
}

.form-group {
    margin-bottom: 1.8rem;
}

.form-group label {
    display: block;
    font-weight: 700;
    margin-bottom: 0.7rem;
    color: var(--color-primario-azul-oscuro);
    font-size: 1rem;
}

.form-group input[type="text"],
.form-group input[type="email"],
.form-group select {
    width: 100%;
    padding: 1rem;
    border: 1px solid var(--color-borde);
    border-radius: 5px;
    font-family: var(--fuente-principal);
    font-size: 1rem;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
    color: var(--color-primario-azul-oscuro);
}

.form-group input:focus,
.form-group select:focus {
    outline: none;
    border-color: var(--color-primario-azul-oscuro);
    box-shadow: 0 0 5px rgba(26, 46, 68, 0.2);
}

/* --- Estilos para el Selector de Cantidad --- */
.quantity-selector {
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--color-borde);
    border-radius: 5px;
    overflow: hidden;
    max-width: 180px;
    margin: 0 auto; /* Centrar el selector */
}

.quantity-selector .quantity-btn {
    background-color: transparent;
    border: none;
    padding: 0.8rem;
    cursor: pointer;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--color-primario-azul-oscuro);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.3s ease;
}

.quantity-selector .quantity-btn svg {
    fill: var(--color-primario-azul-oscuro);
    width: 20px;
    height: 20px;
}

.quantity-selector .quantity-btn:hover {
    background-color: var(--color-fondo-claro);
}

.quantity-selector input[type="number"] {
    flex-grow: 1;
    border: none;
    text-align: center;
    padding: 0.8rem 0.5rem;
    font-size: 1.1rem;
    font-family: var(--fuente-principal);
    color: var(--color-primario-azul-oscuro);
    -moz-appearance: textfield;
}

.quantity-selector input[type="number"]::-webkit-outer-spin-button,
.quantity-selector input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* --- Estilos para el Div de Precio (Alineado a la Derecha) --- */
.price-display {
    display: flex;
    justify-content: flex-end; 
    align-items: baseline;
    gap: 0.75rem; 
    background-color: var(--color-fondo-claro, #f0f2f5);
    border-radius: 8px;
    padding: 1.5rem 1.8rem;
    margin-top: 1rem;
    margin-bottom: 2rem;
    border: 1px solid var(--color-borde, #e0e0e0);
}

.price-display .price-label {
    font-weight: 700;
    font-size: 1.2rem;
    color: var(--color-texto-parrafo, #5B6A7A);
}

.price-display .price-amount {
    font-weight: 700;
    font-size: 2.2rem;
    color: var(--color-primario-azul-oscuro, #1A2E44);
    line-height: 1;
}

/* --- Estilos para el Checkbox de Términos --- */
.form-group-checkbox {
    display: flex;
    align-items: center;
    margin-bottom: 2rem;
}

.form-group-checkbox input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    width: 20px;
    height: 20px;
    border: 2px solid var(--color-borde, #e0e0e0);
    border-radius: 4px;
    margin-right: 0.8rem;
    cursor: pointer;
    position: relative;
    top: -2px;
    transition: all 0.2s ease;
}

.form-group-checkbox input[type="checkbox"]:checked {
    background-color: var(--color-primario-azul-oscuro, #1A2E44);
    border-color: var(--color-primario-azul-oscuro, #1A2E44);
}

.form-group-checkbox input[type="checkbox"]:checked::after {
    content: '✔';
    position: absolute;
    color: white;
    font-size: 14px;
    font-weight: bold;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

.form-group-checkbox label {
    font-size: 0.9rem;
    color: var(--color-texto-parrafo, #5B6A7A);
    margin: 0;
}

.form-group-checkbox label a {
    color: var(--color-primario-azul-oscuro, #1A2E44);
    text-decoration: underline;
    font-weight: 700;
}



/* --- Arreglo de Estilo de Error para Checkbox --- */

/* Borde rojo para el input del checkbox */
.form-group-checkbox.error input[type="checkbox"] {
    border-color: #D9534F; /* Borde rojo */
    box-shadow: 0 0 5px rgba(217, 83, 79, 0.3); /* Sombra roja */
}

/* Texto del label también en rojo */
.form-group-checkbox.error label {
    color: #D9534F; /* Texto del label en rojo */
}

/* Posicionamiento del mensaje de error del checkbox */
.form-group-checkbox .error-message {
    position: absolute; /* CLAVE: Posicionamiento absoluto */
    top: 100%; /* CLAVE: Posicionarlo justo debajo del checkbox y su label */
    left: 0;
    margin-top: 5px; /* Pequeño margen superior */
    color: #D9534F;
    font-size: 0.85rem;
    font-weight: 500;
    white-space: nowrap; /* Evita que el mensaje se rompa en varias líneas */
    z-index: 10; /* Para que esté por encima de otros elementos si se solapa */
}

/* El contenedor padre debe tener position: relative para que el absolute funcione */
.form-group-checkbox {
    position: relative; /* CLAVE */
    margin-bottom: 2rem; /* Ya lo tienes, pero asegúrate */
}
/* --- Estilos de Botones Generales --- */
.btn {
    display: inline-block;
    padding: 1rem 2rem;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 700 !important;
    font-size: 1rem;
    font-family: var(--fuente-principal);
    cursor: pointer;
    border: 2px solid var(--color-primario-azul-oscuro);
    transition: all 0.3s ease;
    margin-top: 0.5rem;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.btn-primary {
    background-color: var(--color-primario-azul-oscuro);
    color: #FFFFFF;
}

.btn-primary:hover {
    background-color: #314a66;
    border-color: #314a66;
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(26, 46, 68, 0.2);
}

.btn-secondary {
    background-color: #FFFFFF;
    color: var(--color-primario-azul-oscuro);
}

.btn-secondary:hover {
    background-color: var(--color-fondo-claro);
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
}

/* --- Estilos del Wizard Multi-paso --- */
.form-progress-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2.5rem;
    position: relative;
    max-width: 300px; /* Limitar ancho de la barra */
    margin-left: auto;
    margin-right: auto;
}

.form-progress-bar::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    height: 4px;
    width: 100%;
    background-color: var(--color-borde, #e0e0e0);
    z-index: 1;
}

.progress-step {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: #fff;
    border: 4px solid var(--color-borde, #e0e0e0);
    color: var(--color-texto-parrafo, #5B6A7A);
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    transition: all 0.4s ease;
}

.progress-step.active {
    border-color: var(--color-primario-azul-oscuro, #1A2E44);
    background-color: var(--color-primario-azul-oscuro, #1A2E44);
    color: #fff;
}

.progress-step.current {
    box-shadow: 0 0 10px rgba(26, 46, 68, 0.5);
}

.form-step {
    display: none;
    animation: fadeIn 0.5s ease-in-out;
}

.form-step-active {
    display: block;
}

.form-navigation {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 2rem;
}

.form-step:first-child .form-navigation {
    justify-content: flex-end;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* --- 3.5. Estilos de CTA Pre-Footer --- */
.footer-cta {
    background-color: var(--color-fondo-oscuro);
    padding: 5rem 2rem;
    text-align: left;
}

.footer-cta h2 {
    color: #FFFFFF;
    font-size: 2.2rem;
    max-width: 600px;
    margin: 0;
    margin-bottom: 2rem;
    line-height: 1.3;
    text-align: left;
}

.highlight-yellow {
    color: var(--color-amarillo-mostaza);
}

.cta-buttons {
    display: flex;
    flex-wrap: wrap; /* Para móvil */
    gap: 1rem;
    margin-top: 2rem;
}

.cta-buttons .btn {
    margin: 0;
    width: auto;
    padding: 1rem 2rem;
    font-size: 1rem;
}

.btn-primary-yellow {
    background-color: var(--color-amarillo-mostaza);
    color: var(--color-fondo-oscuro);
    border: 2px solid var(--color-amarillo-mostaza);
    font-weight: 700;
    position: relative;
    padding-right: 3.5rem;
}

.btn-primary-yellow::after {
    content: '→';
    position: absolute;
    right: 1rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.2em;
    font-weight: normal;
}

.btn-primary-yellow:hover {
    background-color: #fbd26e;
    border-color: #fbd26e;
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
}

.btn-secondary-white {
    background-color: #FFFFFF;
    color: var(--color-fondo-oscuro);
    border: 2px solid #FFFFFF;
    font-weight: 700;
}

.btn-secondary-white:hover {
    background-color: #f0f0f0;
    border-color: #f0f0f0;
    transform: translateY(-2px);
}


/* --- 4. Estilo de Pie de Página (Footer) --- */
.footer {
    background: var(--color-fondo-oscuro);
    color: var(--color-texto-link-footer);
    padding: 5rem 0 3rem 0;
    font-size: 0.95rem;
    position: relative; 
}

.footer .container {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 2rem;
}

.footer-content {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 2rem;
    width: 100%;
}

.footer-col {
    flex: 1; 
    min-width: 180px;
}

.footer-logo-col {
    flex-basis: 25%;
    min-width: 220px;
}

.footer-logo {
    color: #FFFFFF;
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 1rem;
    text-decoration: none;
    display: inline-block;
}

.copyright {
    color: var(--color-texto-link-footer);
    font-size: 0.8rem;
    text-align: left;
    margin-top: 1rem;
}

.footer-links-col h4 {
    color: #FFFFFF;
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: 1.2rem;
    text-transform: none;
}

.footer-links-col ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-links-col li {
    margin-bottom: 0.7rem;
}

.footer-links-col a {
    color: var(--color-texto-link-footer); 
    text-decoration: none;
    transition: color 0.3s ease;
}

.footer-links-col a:hover {
    color: #FFFFFF;
}

.back-to-top {
    display: block;
    position: absolute;
    bottom: 2rem;
    right: 2rem; 
    background-color: var(--color-texto-link-footer);
    color: var(--color-fondo-oscuro);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    text-align: center;
    line-height: 40px;
    text-decoration: none;
    transition: all 0.3s ease;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}

.back-to-top svg {
    fill: var(--color-fondo-oscuro);
    width: 20px;
    height: 20px;
    position: relative;
    top: 2px;
}

.back-to-top:hover {
    background-color: #C0CFDC;
    transform: translateY(-3px);
}
    
/* --- 5. Estilos Responsivos (Móvil) --- */
@media (max-width: 992px) {
    .footer-cta h2 {
        text-align: center;
        max-width: 100%;
    }
    .cta-buttons {
        justify-content: center;
    }
    .footer-logo-col {
        flex-basis: 100%; 
        margin-bottom: 2rem;
        text-align: center;
    }
    .copyright {
        text-align: center;
    }
    .footer-col {
        text-align: center;
    }
}
    
@media (max-width: 768px) {
    .header .container {
        flex-direction: column;
        align-items: center;
    }

    .logo {
        margin-bottom: 1rem;
    }

    .nav-main a {
        margin: 0 0.6rem;
        font-size: 0.85rem;
    }

    h2 {
        font-size: 1.8rem;
    }

    p {
        font-size: 1rem;
    }

    .main-content {
        padding: 3rem 0;
    }
    
    .form-container {
        padding: 1.5rem;
    }

    .form-navigation .btn {
        font-size: 0.9rem;
        padding: 0.8rem 1.2rem;
    }

    .footer-cta {
        padding: 3rem 1rem;
    }

    .cta-buttons {
        flex-direction: column;
        align-items: center;
        gap: 0.8rem;
    }
    .cta-buttons .btn {
        width: 100%;
        max-width: 300px;
    }

    .footer .container {
        padding: 0 1rem;
    }
    .footer-col {
        min-width: 100%;
        margin-bottom: 1.5rem;
        text-align: center;
    }
    .back-to-top {
        bottom: 1rem;
        right: 1rem;
    }
}

/* validador */
/* --- Estilos de Validación de Errores --- */

/* Contenedor del campo con error */
.form-group.error input,
.form-group.error select,
.form-group.error .quantity-selector {
    border-color: #D9534F; /* Rojo para el borde */
    box-shadow: 0 0 5px rgba(217, 83, 79, 0.3);
}

.form-group-checkbox.error label {
    color: #D9534F; /* Texto de la etiqueta en rojo */
}

/* El mensaje de error en sí */
.error-message {
    color: #D9534F;
    font-size: 0.85rem;
    font-weight: 700;
    display: block;
    margin-top: 0.5rem;
    text-align: left; /* Alinear el error a la izquierda */
}

/* Ocultar el error de 'p' que pueda estar en el form-group */
.form-group .error-message {
    text-align: left;
    font-size: 0.85rem;
    margin-bottom: 0;
}


/* --- Estilos para Opciones de Radio (Método de Pago) --- */

/* Título del grupo de radios */
.radio-group-label {
    display: block;
    font-weight: 700;
    /* ...otros estilos... */
    border: 0;
    width: 100%;
    margin-bottom: 1rem;
}

/* ¡CLAVE! Contenedor para ponerlos LADO A LADO 
*/
.radio-options-container {
    display: flex;
    flex-wrap: wrap; /* Para que se apilen en móvil si no caben */
    gap: 1.5rem; /* Espacio entre opciones */
    margin-top: 0.5rem;
    justify-content: flex-start; /* Alineados a la izquierda */
}

.radio-option {
    display: flex;
    align-items: center;
}

/* Ocultar el radio button por defecto */
.radio-option input[type="radio"] {
    opacity: 0;
    position: absolute;
    width: 0;
    height: 0;
}

/* Estilo del label (el texto) */
.radio-option label {
    display: inline-block;
    padding-left: 32px; /* Espacio para el círculo personalizado */
    position: relative;
    cursor: pointer;
    font-size: 1rem;
    color: var(--color-texto-parrafo, #5B6A7A);
    font-weight: 700;
    user-select: none; /* Evitar seleccionar el texto al hacer clic */
}

/* Círculo exterior personalizado (::before) */
.radio-option label::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 2px solid var(--color-borde, #E0E0E0);
    background-color: #fff;
    transition: all 0.2s ease;
}

/* Círculo interior (punto) - Oculto por defecto */
.radio-option label::after {
    content: '';
    position: absolute;
    left: 5px; /* Centrado ( (20px_ancho + 4px_borde) / 2 - (10px_punto / 2) ) */
    top: 50%;
    transform: translateY(-50%) scale(0); /* Oculto y escalado a 0 */
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: var(--color-primario-azul-oscuro, #1A2E44);
    transition: all 0.2s ease;
}

/* ESTADO: CHECKED (Marcado) */
.radio-option input[type="radio"]:checked + label::before {
    border-color: var(--color-primario-azul-oscuro, #1A2E44);
}

.radio-option input[type="radio"]:checked + label::after {
    transform: translateY(-50%) scale(1); /* Mostrar el punto */
}

/* ESTADO: FOCUS (para accesibilidad con teclado) */
.radio-option input[type="radio"]:focus + label::before {
    box-shadow: 0 0 5px rgba(26, 46, 68, 0.4);
}


/* opciones de pago*/

/* --- Recreando Clases de Bootstrap con Flexbox --- */

/* Clase para ocultar/mostrar el div */
.hidden {
    display: none !important;
    animation: fadeIn 0.5s ease-in-out; /* Usa la animación que ya teníamos */
}

/* Define .row como un contenedor flex */
.row {
    display: flex;
    flex-wrap: wrap; /* Permite que las columnas se apilen en móvil */
    gap: 2rem; /* Espacio limpio entre columnas */
}

/* Define .col-md-5 y .col-md-7.
  Usamos flex-basis para darles su tamaño base (como 5/12 y 7/12)
  y min-width para que se apilen bien en pantallas pequeñas.
*/
.col-md-5,
.col-md-7 {
    flex-grow: 1; /* Permite que crezcan para llenar el espacio */
    flex-shrink: 1; /* Permite que se encojan */
    min-width: 300px; /* Punto de quiebre para apilarse */
}

.col-md-5 {
    flex-basis: 40%; /* Aprox. 5/12, dejando espacio para el gap */
}

.col-md-7 {
    flex-basis: 55%; /* Aprox. 7/12, dejando espacio para el gap */
}

.text-center {
    text-align: center;
}

/* --- Estilos para limpiar tu info bancaria --- */
.bank-account-title {
    margin: 1rem 0 0.5rem 0 !important;
    font-size: 1rem !important;
    font-weight: 700;
    color: var(--color-primario-azul-oscuro);
    text-align: left;
}

.bank-account-list {
    margin-left: 25px !important;
    font-size: 0.9rem;
    color: var(--color-texto-parrafo);
    text-align: left;
}

.bank-account-list li {
    margin-bottom: 0.25rem;
}
/* fin pagos */

/* archivo */

/* --- Estilos para "Dropify" Personalizado (Sin jQuery) --- */

.file-drop-zone-container {
    position: relative;
    width: 100%;
}

/* El input de archivo original se oculta */
.file-input-hidden {
    display: none;
}

/* La zona de "arrastrar y soltar" */
.file-drop-zone {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 220px; /* Altura que tenías en 'data-height' */
    border: 2px dashed var(--color-borde, #e0e0e0);
    border-radius: 8px;
    padding: 1rem;
    background-color: #fafafa;
    cursor: pointer;
    transition: border-color 0.3s ease, background-color 0.3s ease;
    overflow: hidden; /* Para contener la imagen */
    position: relative;
}

/* Estado "hover" o cuando se arrastra un archivo encima */
.file-drop-zone:hover,
.file-drop-zone.highlight {
    border-color: var(--color-primario-azul-oscuro, #1A2E44);
    background-color: var(--color-fondo-claro, #f0f2f5);
}

/* El mensaje de texto */
.file-drop-message {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--color-texto-parrafo, #5B6A7A);
    text-align: center;
    transition: opacity 0.3s ease;
}

/* La vista previa de la imagen */
.file-drop-preview {
    width: 100%;
    height: 100%;
    position: absolute; /* Se superpone al 'label' */
    top: 0;
    left: 0;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0; /* Oculta por defecto */
    transition: opacity 0.3s ease;
}

/* Cuando hay una imagen cargada */
.file-drop-zone.has-file .file-drop-preview {
    opacity: 1; /* Mostrar vista previa */
}

.file-drop-zone.has-file .file-drop-message {
    opacity: 0; /* Ocultar mensaje */
}

/* Estado de error (del validador) */
.file-drop-zone-container.error .file-drop-zone {
    border-color: #D9534F; /* Rojo */
    box-shadow: 0 0 5px rgba(217, 83, 79, 0.3);
}

/* --- Estilos para Vista Previa de Archivos (No-Imagen) --- */
.file-drop-preview {
    /* Centrar el contenido (icono y texto) */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    text-align: center;
}

.file-preview-icon {
    font-size: 3.5rem; /* Icono grande */
    line-height: 1;
    color: #888;
}

.file-preview-name {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--color-texto-parrafo, #5B6A7A);
    margin-top: 0.5rem;
    /* Evitar que el texto largo se desborde */
    word-break: break-all;
}

/* --- Estilo para el botón de limpiar "Dropify" --- */
.file-drop-clear {
    display: none; /* Oculto por defecto */
    position: absolute;
    top: 10px;
    right: 10px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: none;
    background-color: rgba(255, 255, 255, 0.8);
    color: #333;
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 30px; /* Centra el 'x' */
    text-align: center;
    cursor: pointer;
    transition: all 0.2s ease;
    z-index: 3; /* Asegura que esté por encima de la vista previa */
}

.file-drop-clear:hover {
    background-color: #fff;
    color: #000;
}

/* Mostrar el botón de limpiar SOLO cuando hay un archivo */
.file-drop-zone.has-file .file-drop-clear {
    display: block;
}

/* --- Estilo para el botón de Carga (Loading) --- */
.btn-loading {
    opacity: 0.8;
    pointer-events: none; /* Desactivar clics mientras carga */
}

/* Spinner de Carga (animación) */
.btn-loading .spinner {
    display: inline-block;
    width: 1rem;
    height: 1rem;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    border-top-color: #fff; /* Color del spinner */
    animation: spin 1s ease-in-out infinite;
    margin-right: 0.5rem;
    vertical-align: middle;
    position: relative;
    top: -1px;
}

@keyframes spin {
    to { 
        transform: rotate(360deg); 
    }
}

/* fin archivo */


/* --- Estilos para la Página de Términos y Condiciones --- */

/* El contenedor principal del texto */
.legal-container {
    max-width: 900px; /* Más ancho que el form, para leer mejor */
    margin: 0 auto;
    background: var(--color-fondo, #FFFFFF);
    padding: 3rem 4rem;
    border-radius: 8px;
    border: 1px solid var(--color-borde, #e0e0e0);
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
}

/* Títulos */
.legal-container h1 {
    font-size: 2.5rem;
    text-align: center;
    margin-bottom: 2rem;
    color: var(--color-primario-azul-oscuro, #1A2E44);
}

.legal-container h2 {
    font-size: 1.8rem;
    text-align: left;
    color: var(--color-primario-azul-oscuro, #1A2E44);
    margin-top: 2.5rem;
    margin-bottom: 1rem;
    border-bottom: 2px solid var(--color-borde, #e0e0e0);
    padding-bottom: 0.5rem;
}

.legal-container h3 {
    font-size: 1.3rem;
    text-align: left;
    color: var(--color-texto-parrafo, #5B6A7A);
    font-weight: 700;
    margin-top: 1.5rem;
    margin-bottom: 0.5rem;
}

/* Párrafos (¡IMPORTANTE! Alineados a la izquierda) */
.legal-container p {
    text-align: left;
    font-size: 1rem;
    line-height: 1.7;
    color: var(--color-texto-parrafo, #5B6A7A);
    margin-bottom: 1rem;
}

/* Listas (numeradas y con viñetas) */
.legal-container ol,
.legal-container ul {
    margin-left: 2rem;
    margin-bottom: 1.5rem;
    text-align: left;
}

.legal-container li {
    margin-bottom: 0.75rem;
    line-height: 1.7;
    font-size: 1rem;
    color: var(--color-texto-parrafo, #5B6A7A);
}

/* Separador */
.legal-container hr {
    border: 0;
    border-top: 1px solid var(--color-borde, #e0e0e0);
    margin: 2.5rem 0;
}

/* Info de contacto al final */
.contact-info {
    text-align: center;
    font-size: 0.9rem;
    color: #888;
}

.contact-info p {
    text-align: center;
    line-height: 1.6;
}

/* Ajuste responsivo para el padding en móvil */
@media (max-width: 768px) {
    .legal-container {
        padding: 2rem 1.5rem;
    }
}




/* --- Force Input and Button Side-by-Side --- */
.input-group {
  display: flex; /* Makes items go side-by-side */
  width: 100%;   /* Takes full width */
}

/* Ensure the input takes up most space */
.input-group .form-control {
  flex-grow: 1; /* Allows the input to grow */
  /* Prevent button overlap */
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

/* Ensure the button takes only needed space */
.input-group .btn {
    margin: 0px !important;
  flex-shrink: 0; /* Prevents the button from shrinking */
   /* Prevent input overlap */
   height: 100% !important;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}


/* --- Ajustes Responsivos para el Escáner QR en Móvil --- */
@media (max-width: 600px) {
    .qr-scanner-box {
        width: 100%; /* Ocupa casi todo el ancho */
        max-width: none; /* Elimina el límite de 400px */
        padding-bottom: 60px; /* Un poco más de espacio para el botón cancelar */
    }

    #qr-video {
        /* Asegura que el video no se desborde si su aspect ratio es raro */
        max-width: 100%; 
        height: auto;
    }

    .qr-scanner-close {
        bottom: 15px; /* Sube un poco el botón */
    }
}