/* ==========================================
   1. VARIABLES Y CONFIGURACIÓN GENERAL
   ========================================== */
:root {
    --azul-sobrio: #327ee7;      /* Fondo del bloque principal */
    --azul-oscuro: #0A192F;      /* Textos principales y títulos */
    --gris-fondo: #F8F9FA;       /* Fondos alternados */
    --blanco: #FFFFFF;
    --verde-acento: #10B981;     /* Botón de compra / éxito */
    --verde-hover: #059669;
    --azul-pago: #1447b4;        /* Botón de pago final */
    --azul-pago-hover: #1D4ED8;
    --gris-texto: #4B5563;       /* Párrafos secundarios */
    --borde-suave: 12px;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

body {
    background-color: var(--blanco);
    color: var(--azul-oscuro);
    line-height: 1.6;
}

/* ==========================================
   2. HEADER Y FOOTER
   ========================================== */
.header-landing {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 2%;
    background-color: var(--blanco);
    border-bottom: 1px solid #E5E7EB;
}

.logo-texto {
    font-size: 1.2rem;
    color: var(--azul-oscuro);
}

.logo-texto strong {
    color: var(--azul-pago);
}

.header-navegacion .enlace-nav {
    margin-left: 8px;
    text-decoration: none;
    color: var(--gris-texto);
    font-weight: 500;
    font-size: .8rem;
}

.footer-landing {
    background-color: #14264c;
    color: var(--blanco);
    padding: 30px 5%;
    text-align: center;
}

.footer-contenido {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 15px;
}

.enlace-legal {
    color: #9CA3AF;
    text-decoration: none;
    margin-left: 15px;
    font-size: 0.9rem;
}

/* El contenedor que empuja un bloque a la izquierda y otro a la derecha */
.footer-logos {
    display: flex;
    justify-content: space-between; /* Empuja los hijos a los extremos */
    align-items: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1); /* Línea divisoria elegante */
    padding-bottom: 20px;
}

/* Bloque izquierdo: Métodos de pago */
.footer-medio {
    display: flex;
    gap: 15px; /* Espacio entre los dos logos de métodos */
}

.footer-medio img {
    height: 120px; /* Tamaño controlado para los métodos de pago */
    width: auto;
}

/* Bloque derecho: Certificado SSL */
.footer-superior img {
    height: 60px; /* Tamaño controlado para el certificado */
    width: auto;
}

/* Bloque inferior: Texto y Enlaces legales */
.footer-contenido {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.85rem;
    color: #94a3b8; /* Gris suave para textos legales */
}

.footer-enlaces {
    display: flex;
    gap: 20px;
}

/* =======================================
   COMPORTAMIENTO MÓVIL EN EL FOOTER
   ======================================= */
@media (max-width: 768px) {
    /* Apila el bloque de métodos y el bloque de certificado */
    .footer-logos {
        flex-direction: column; 
        text-align: center;
        gap: 25px; /* Espacio entre el grupo de métodos y el certificado */
    }
    
    /* ¡Aquí está la clave! Apila una imagen debajo de la otra para los métodos de pago */
    .footer-medio {
        flex-direction: column; 
        align-items: center; /* Centra las imágenes horizontalmente */
        gap: 15px; /* Espacio vertical entre cada imagen de método de pago */
    }

    /* Apila el texto de copyright y los enlaces legales */
    .footer-contenido {
        flex-direction: column;
        text-align: center;
        gap: 15px;
    }

    /* Apila también los enlaces legales uno debajo del otro */
    .footer-enlaces {
        flex-direction: column;
        gap: 10px;
    }
}

/* ==========================================
   3. BLOQUE 1: CONTENEDOR PRINCIPAL (AZUL MÁS OSCURO)
   ========================================== */

/* Ajustamos el contenedor principal para que distribuya el texto a la izquierda y el formulario a la derecha */
.bloque-principal {
    background-color: #eaeef7;
    padding: 40px; /* Más espacio interno para un look premium */
    display: flex;
    flex-direction: row;
    justify-content: space-between; /* Empuja el texto a la izquierda y el formulario/resultado a la derecha */
    align-items: center; /* Centra verticalmente ambos bloques */
    gap: 5px;
    flex-wrap: wrap; /* Mantiene la adaptabilidad en móviles */
    max-width: 1200px; /* Evita que se estire demasiado en pantallas gigantes */
    margin: 0 auto;
}

/* Estilos para el nuevo bloque de texto (Izquierda) */
.bloque-intro-texto {
    flex: 1;
    min-width: 300px; /* Evita que se comprima demasiado */
    max-width: 1000px; /* Controla el ancho de lectura del párrafo */
    text-align: left;
}

/* Asegura que en pantallas de celulares el texto quede arriba y centrado */
@media (max-width: 768px) {
    .bloque-principal {
        flex-direction: column; /* Apila los elementos verticalmente */
        align-items: center;    /* ¡Clave! Fuerza a que la tarjeta y la imagen se alineen perfectamente al centro */
        padding: 20px;
        gap: 30px;
    }
    
    .imagen-principal {
        max-width: 100%;
        display: flex;          /* Convierte el contenedor de la imagen en flex */
        justify-content: center; /* Centra la etiqueta <img> internamente */
        margin-bottom: 10px;
    }
}

/* Tarjeta Blanca para el Formulario (Hacia un costado) */
.formulario-tarjeta-blanca {
    background-color: var(--blanco);
    padding: 30px;
    border-radius: var(--borde-suave);
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.2);
    width: 100%;
    max-width: 400px;
    text-align: left;
}

.formulario-tarjeta-blanca h2 {
    font-size: 1.6rem;
    text-align: center;
    margin-bottom: 10px;
    color: var(--azul-oscuro);
}

.formulario-tarjeta-blanca h5 {
    font-size: 1.1rem;
    text-align: center;
    color: var(--gris-texto);
    margin-bottom: 30px;
    font-weight: 400;
}

.campo-grupo {
    width: 100%;
    margin-bottom: 12px;
}

.campo-grupo label {
    display: block;
    margin-bottom: 4px;
    font-weight: 600;
    font-size: 0.90rem;
}

.input-formulario {
    width: 100%;
    padding: 10px 14px;
    border: .80px solid #CBD5E1;
    border-radius: var(--borde-suave);
    font-size: 1rem;
    background-color: var(--gris-fondo);
    margin-bottom: 5px;
    text-transform: uppercase;
}

.input-formulario:focus {
    outline: 2px solid var(--azul-pago);
    background-color: var(--blanco);
}

.campo-grupo-check {
    margin-bottom: 25px;
    font-size: 0.80rem;
}

.btn-principal {
    width: 100%; /* Botón al ancho completo del formulario */
    background-color: var(--verde-acento);
    color: var(--blanco);
    border: none;
    padding: 14px;
    font-size: 1rem;
    font-weight: bold;
    border-radius: var(--borde-suave);
    cursor: pointer;
    transition: background 0.2s ease;
}

.btn-principal:hover {
    background-color: var(--verde-hover);
}

.btn-principal:disabled {
    background-color: #888888; /* Un color gris de bloqueo */
    cursor: not-allowed;    /* Cambia la flecha del mouse por un símbolo de prohibido */
    opacity: 0.7;           /* Lo hace ver un poco más transparente */
}

.btn-evita {
    width: 80%; /* Botón al ancho completo del formulario */
    background-color: #e3e829;
    color: #0033a0;
    margin: 20px;
    border: none;
    padding: 14px;
    font-size: 1rem;
    font-weight: bold;
    border-radius: var(--borde-suave);
    cursor: pointer;
    transition: background 0.2s ease;
}

.imagen-principal {
    flex: 1.2;
    min-width: 300px;
    max-width: 1000px; /* Evita que crezca demasiado */
}

/* Fuerza a la imagen a adaptarse a su contenedor */
.img-fluida {
    width: 100%;
    height: auto;
    display: block;
}

/*FRANJA INFORMATIVA*/
.nav-bar{
    background-color: #0033a0;
    color: var(--blanco);
    padding: 15px 20px;
    text-align: center;
    font-size: 1.4rem;
    font-weight: 500;
    width: 100%;
    box-sizing: border-box; /* Evita que el padding genere scroll horizontal */
}

.nav-bar p {
    margin: 0; /* Elimina márgenes por defecto del párrafo */
}


/* ==========================================
   4. TARJETA DE RESULTADOS (VISIBLE PARA PRUEBAS)
   ========================================== */
.bloque-resultado {
    width: 100%;
    max-width: 450px; /* Mismo ancho que el formulario para simetría */
}

.tarjeta-cotizacion {
    width: 100%;
    background: var(--blanco);
    border: 1px solid #E2E8F0;
    border-radius: var(--borde-suave);
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.4);
    padding: 20px; /* Mismo padding para balance visual */
}

.tarjeta-cabecera {
    text-align: center;
    border-bottom: 2px dashed #E2E8F0;
    padding-bottom: 20px;
    margin-bottom: 20px;
}

.tarjeta-subtitulo {
    font-size: 0.9rem;
    color: var(--gris-texto);
}

.tarjeta-detalles {
    margin-bottom: 25px;
}

.detalle-fila {
    display: flex;
    justify-content: space-between;
    margin-bottom: 12px;
    font-size: 1rem;
}

.detalle-etiqueta {
    color: var(--gris-texto);
}

.tarjeta-precio-contenedor {
    background-color: #F0FDF4;
    border: 1px solid #DCFCE7;
    border-radius: var(--borde-suave);
    padding: 30px;
    text-align: center;
    margin-bottom: 25px;
}

.precio-etiqueta {
    font-size: 0.9rem;
    color: #166534;
    font-weight: 600;
}

.precio-valor {
    font-size: 2.2rem;
    font-weight: 800;
    color: var(--verde-acento);
    margin-top: 5px;
}

.btn-pago {
    width: 100%;
    background-color: var(--azul-pago);
    color: var(--blanco);
    border: none;
    padding: 14px;
    font-size: 1.1rem;
    font-weight: bold;
    border-radius: var(--borde-suave);
    cursor: pointer;
    transition: background 0.2s ease;
}

.btn-pago:hover {
    background-color: var(--azul-pago-hover);
}

/* ==========================================
   5. BLOQUES DE CONTENIDO ADICIONALES
   ========================================== */
.bloque-contenido {
    padding: 80px 2%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    max-width: 1100px;
    margin: 0 auto;
}

.bloque-contenido:nth-of-type(even) {
    background-color: var(--gris-fondo);
    max-width: 100%;
    padding: 80px 5%;
}

/* Hace que las secciones internas tengan un contenedor centrado si tienen fondo gris */
.bloque-contenido:nth-of-type(even) > div {
    max-width: 1100px;
}

.bloque-inverso {
    flex-direction: row-reverse;
}


.contenido-imagen {
    flex: 1;
    text-align: center;
}

.img-fluida {
    max-width: 80%;
    height: auto;
    border-radius: var(--borde-suave);
}

.bloque-preguntas {
    padding: 80px 5%;
    background-color: var(--blanco);
    text-align: center;
    max-width: 700px;
    margin: 0 auto;
}

.bloque-preguntas h2 {
    margin-bottom: 30px;
}

.pregunta-item {
    text-align: left;
    background-color: var(--gris-fondo);
    padding: 20px;
    border-radius: var(--borde-suave);
    margin: 12px;
}

.pregunta-titulo {
    font-weight: bold;
    margin-bottom: 8px;
}

/* =======================================
   ESTILOS EXCLUSIVOS: SECCIÓN BENEFICIOS
   ======================================= */

/* Control de la imagen de este bloque (sin conflictos) */
.img-beneficios {
    width: 100%;
    max-width: 450px; /* Tamaño ideal para la imagen publicitaria */
    height: auto;
    border-radius: var(--borde-suave);
    display: block;
    margin: 0 auto;
}

/* Contenedor de la lista */
.lista-beneficios {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 25px;
}

/* Alineación del Icono + Bloque de Texto */
.beneficio-item {
    display: flex;
    align-items: flex-start; /* Alinea el icono con la primera línea de texto */
    gap: 15px;
}

/* Control del Icono pequeño */
.icono-beneficio {
    width: 50px;
    height: 50px;
    object-fit: contain;
    flex-shrink: 0; /* Evita que el icono se mofe o encoja */
    border-radius: 10px;
}

/* Bloque de texto al lado del icono */
.texto-beneficio p {
    margin: 0 0 5px 0;
    font-size: 1rem;
    color: var(--gris-texto);
    line-height: 1.4;
}

/* =======================================
   COMPORTAMIENTO MÓVIL
   ======================================= */
@media (max-width: 768px) {
    .bloque-contenido {
        flex-direction: column; /* Envía la lista abajo de la imagen */
        padding: 40px 20px;
        gap: 30px;
    }
    
    .img-beneficios {
        max-width: 100%; /* La imagen toma buen tamaño en celular */
    }
}

/* Media Query para pantallas menores o iguales a 768px (Móviles y Tablets) */
@media (max-width: 768px) {
    
    .bloque-contenido, 
    .bloque-contenido.bloque-inverso {
        flex-direction: column; /* Apila el texto y la imagen verticalmente */
        text-align: center;     /* Centra los textos para mejor lectura en móvil */
        gap: 30px;              /* Reduce un poco el espacio entre bloques */
        padding: 50px 5%;       /* Espaciado interno más cómodo para celulares */
    }

    .contenido-imagen {
        width: 100%;            /* Asegura que el contenedor de la imagen ocupe todo el ancho */
        order: 2;               /* Empuja la imagen para que SIEMPRE quede abajo del texto */
    }

    .contenido-texto {
        order: 1;               /* Asegura que el texto SIEMPRE quede arriba */
    }
}

/* Controla el espacio y tamaño del bloque de texto (Izquierda) */
.contenido-texto {
    flex: 1;
    text-align: left;
}
.contenido-texto h2 {
    font-size: 2rem;
    text-transform: uppercase;
    color: var(--azul-oscuro);
    margin-bottom: 10px;
}

.contenido-texto h3 {
    font-size: 1.4rem;
    color: var(--azul-oscuro);
    margin-bottom: 10px;
}

.contenido-texto p {
    font-size: 1.05rem;
    color: var(--gris-texto);
    line-height: 1.5;
    margin: 0;
}

/* =======================================
   ESTILOS EXCLUSIVOS: PASO 2 (DATOS PERSONALES)
   ======================================= */

/* 1. Oculta la sección por defecto */
.bloque-datos-oculto {
    display: none; 
    padding: 60px 20px;
    background-color: #eaeef7;
    min-height: 70vh; /* Asegura un buen alto de pantalla */
}

/* Contenedor centrado y limpio para la tarjeta de datos */
.tarjeta-datos-personales {
    background-color: var(--blanco);
    padding: 40px;
    border-radius: var(--borde-suave);
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
    width: 100%;
    max-width: 500px; /* Un poco más ancha para comodidad del usuario */
    margin: 0 auto; /* La centra perfectamente en la pantalla */
    text-align: left;
    box-sizing: border-box;
}

.titulo-datos {
    font-size: 1.8rem;
    color: var(--azul-oscuro);
    margin-top: 20px;
    margin-bottom: 8px;
    text-align: center;
}

.subtitulo-datos {
    font-size: 0.95rem;
    color: var(--gris-texto);
    margin-bottom: 30px;
    text-align: center;
    line-height: 1.4;
}

/* Diseño para la mini tarjeta de resumen (Placa y Precio) */
.tarjeta-resumen-mini {
    background-color: #f1f5f9;
    border-left: 4px solid var(--azul-pago, #2563eb);
    padding: 15px;
    margin-bottom: 10px;
    border-radius: 6px;
    font-size: 0.95rem;
    color: var(--azul-oscuro);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* Espaciado para los dos botones finales */
.bloque-botones-datos {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 30px;
}

/* Estilo para el botón secundario (Regresar) */
.btn-secundario {
    width: 100%;
    background-color: transparent;
    color: var(--gris-texto);
    border: 1px solid #cbd5e1;
    padding: 14px;
    font-size: 1rem;
    font-weight: 500;
    border-radius: var(--borde-suave);
    cursor: pointer;
    transition: background 0.2s ease;
}

.btn-secundario:hover {
    background-color: #f8fafc;
    color: var(--azul-oscuro);
}


/* =======================================
   ESTILOS EXCLUSIVOS: PASO 3 (VOUCHER FINAL)
   ======================================= */

/* Tarjeta contenedora del recibo */
.tarjeta-voucher-final {
    background-color: var(--blanco);
    padding: 40px 30px;
    border-radius: var(--borde-suave);
    box-shadow: 0 15px 35px -5px rgba(0, 0, 0, 0.15);
    width: 100%;
    max-width: 550px; /* Un poco más ancha para simular un recibo real */
    margin: 0 auto;
    text-align: center; /* Centra los textos y la imagen */
    box-sizing: border-box;
}

/* Icono festivo de éxito */
.icono-exito {
    font-size: 3rem;
    margin-bottom: 10px;
}

/* Caja gris que agrupa el resumen final del cliente y carro */
.detalles-voucher-caja {
    background-color: var(--gris-fondo, #f8fafc);
    border: 1px dashed #cbd5e1; /* Borde punteado estilo recibo de caja */
    padding: 20px;
    border-radius: 8px;
    margin: 25px 0;
    text-align: left; /* Los datos se leen mejor alineados a la izquierda */
}

/* Zona central del código de barras / QR */
.contenedor-codigo-pago {
    background-color: #ffffff;
    border: 1px solid #e2e8f0;
    padding: 25px 15px;
    border-radius: var(--borde-suave);
    margin-top: 25px;
}

.instruccion-pago {
    font-size: 0.9rem;
    color: var(--gris-texto);
    margin-bottom: 20px;
    line-height: 1.4;
}

/* ¡Clave! Controla que la imagen del código sea grande y protagonista */
.imagen-codigo-recibo {
    width: 100%;
    max-width: 380px; /* Tamaño ideal en el centro */
    height: auto;
    display: block;
    margin: 0 auto 15px auto; /* La centra horizontalmente con márgenes */
}

.referencia-texto {
    font-size: 1rem;
    color: var(--azul-oscuro);
    margin: 0;
}

/* Reutiliza la misma clase para ocultar esta sección al inicio */
#seccion-pago-exitoso.bloque-datos-oculto {
    display: none;
}

.resumen-precio-nave strong {
    font-size: 18px;
}

/* CAMPO PARA EL COMPROBANTE DE PAGO */
.campo-comprobante-grupo {
    margin: 20px 0;
    padding: 15px;
    background-color: #f9f9f9;
    border: 2px dashed #0070c0; /* Línea punteada estilo "zona de arrastre" */
    border-radius: 8px;
    text-align: center;
}

/* Estilo para el texto explicativo o etiqueta */
.etiqueta-comprobante {
    display: block;
    font-size: 16px;
    font-weight: bold;
    color: #333;
    margin-bottom: 10px;
    cursor: pointer;
}

/* El botón de seleccionar archivo real */
.input-comprobante {
    display: inline-block;
    padding: 10px 15px;
    background-color: #ffffff;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-size: 14px;
    color: #555;
    cursor: pointer;
    width: 100%; /* Ocupa todo el ancho en móviles para facilitar el toque */
    max-width: 300px;
}

/* Cambio de color cuando el usuario pasa el mouse (PC) */
.input-comprobante:hover {
    background-color: #eef7ff;
    border-color: #0070c0;
}

/* Texto de ayuda en la parte inferior */
.ayuda-texto {
    font-size: 12px;
    color: #666;
    margin-top: 8px;
}