/* cotizacion.css - Estilos específicos de la página de cotización */

/* ======================================= */
/* === Estilos Específicos de COTIZACIÓN === */
/* ======================================= */

/* Nuevo cabecero simplificado para la página de Cotización */
#cotizacion-header-simple {
    background-color: var(--color-claro); /* Un fondo suave que contraste un poco */
    padding: 60px 20px; /* Padding vertical más moderado */
    text-align: center;
    border-bottom: 1px solid var(--color-borde); /* Una línea sutil debajo */
}

.cotizacion-title {
    font-size: var(--h1-size); /* Usa tu tamaño de h1 global */
    color: var(--color-principal); /* Tu color principal para el título */
    margin: 0; /* Sin márgenes extra */
    line-height: 1.2;
    /* Estilos creativos para el título */
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1); /* Sombra sutil para profundidad */
    font-weight: 700; /* Asegura que sea negrita */
}


/* Sección principal del formulario y pasos */
.cotizacion-main {
    padding: 60px var(--padding-seccion-horizontal); /* Ajuste el padding vertical para ser más compacto */
    background-color: var(--color-claro); 
}

.cotizacion-content-wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr; 
    gap: 40px; /* Reducimos el espacio entre las columnas */
    max-width: var(--ancho-maximo-contenido); 
    margin: 0 auto;
    align-items: start; 
}

/* Estilos para el contenedor del formulario */
.formulario-cotizacion-container {
    background-color: var(--color-blanco);
    padding: 35px; /* Reducimos el padding interno del contenedor */
    border-radius: var(--border-radius-suave);
    box-shadow: 0 5px 15px var(--color-sombra);
}

.formulario-cotizacion-container h2 {
    font-size: var(--h2-size);
    color: var(--color-principal);
    margin-bottom: 25px; /* Reducimos el margen inferior */
    text-align: center;
}

/* Estilos del formulario en sí */
.cotizacion-form .form-group {
    margin-bottom: 18px; /* Reducimos el margen entre grupos de formulario */
}

.cotizacion-form label {
    display: block;
    margin-bottom: 6px; /* Reducimos el margen inferior */
    font-weight: bold;
    color: var(--color-texto-oscuro);
    font-size: 0.95em;
}

.cotizacion-form input[type="text"],
.cotizacion-form input[type="email"],
.cotizacion-form input[type="tel"],
.cotizacion-form select,
.cotizacion-form textarea {
    width: 100%;
    padding: 10px; /* Reducimos el padding interno de los campos */
    background-color: #f0f0f0; 
    border: 2px solid #bbb; 
    border-radius: var(--border-radius-suave); 
    font-size: 0.95em; /* Ligeramente más pequeño */
    color: var(--color-texto-oscuro);
    box-sizing: border-box; 
    transition: border-color 0.3s ease, background-color 0.3s ease; 
}

/* Estilo para los placeholders */
.cotizacion-form input::placeholder,
.cotizacion-form textarea::placeholder {
    color: #555; 
    opacity: 1; 
}

.cotizacion-form input:focus,
.cotizacion-form select:focus,
.cotizacion-form textarea:focus {
    border-color: var(--color-principal); 
    outline: none;
    box-shadow: 0 0 0 3px rgba(var(--color-principal-rgb), 0.2);
    background-color: var(--color-blanco); 
}

.cotizacion-form textarea {
    resize: vertical; 
    min-height: 100px; /* Reducimos la altura mínima */
}

.cotizacion-form .btn-enviar {
    display: block; 
    width: 100%;
    background-color: var(--color-principal);
    color: var(--color-blanco);
    padding: 12px 20px; /* Reducimos el padding del botón */
    border: none;
    border-radius: var(--border-radius-suave);
    font-size: 1em; /* Ligeramente más pequeño */
    font-weight: bold;
    cursor: pointer;
    transition: background-color var(--transicion-rapida), transform var(--transicion-rapida);
    margin-top: 18px; /* Reducimos el margen superior */
}

.cotizacion-form .btn-enviar:hover {
    background-color: var(--color-secundario);
    transform: translateY(-2px);
}

/* Estilos para mensajes de éxito/error del formulario */
.mensaje-exito {
    background-color: #d4edda;
    color: #155724;
    padding: 15px;
    border: 1px solid #c3e6cb;
    border-radius: var(--border-radius-suave);
    margin-top: 20px;
    text-align: center;
    font-weight: bold;
}

.mensaje-error {
    background-color: #f8d7da;
    color: #721c24;
    padding: 15px;
    border: 1px solid #f5c6cb;
    border-radius: var(--border-radius-suave);
    margin-top: 20px;
    text-align: center;
    font-weight: bold;
}

/* Estilos para la sección de información de pasos */
.info-cotizacion-pasos {
    background-color: var(--color-principal-claro); 
    padding: 35px; /* Reducimos el padding interno del contenedor */
    border-radius: var(--border-radius-suave);
    box-shadow: 0 5px 15px var(--color-sombra);
    display: flex;
    flex-direction: column;
    justify-content: center; 
}

.info-cotizacion-pasos h2 {
    font-size: var(--h2-size);
    color: var(--color-principal-oscuro); 
    margin-bottom: 25px; /* Reducimos el margen inferior */
    text-align: center;
}

.info-item-paso {
    display: flex;
    align-items: flex-start; 
    margin-bottom: 20px; /* Reducimos el margen entre pasos */
    gap: 12px; /* Reducimos el espacio entre el número y el texto */
}

.paso-numero {
    background-color: var(--color-secundario);
    color: var(--color-blanco);
    min-width: 35px; /* Ligeramente más pequeño */
    height: 35px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2em; /* Ligeramente más pequeño */
    font-weight: bold;
    flex-shrink: 0; 
}

.paso-texto h3 {
    font-size: var(--h3-size);
    color: var(--color-principal);
    margin-bottom: 6px;
}

.paso-texto p {
    font-size: 0.9em; /* Ligeramente más pequeño */
    line-height: 1.5; /* Ajuste el line-height */
    color: var(--color-texto-oscuro);
}

.info-item-tiempo {
    display: flex;
    align-items: center;
    margin-top: 25px; /* Reducimos el margen superior */
    color: var(--color-principal);
    font-weight: bold;
    font-size: 0.95em; /* Ligeramente más pequeño */
    background-color: var(--color-blanco);
    padding: 12px 18px; /* Reducimos el padding */
    border-radius: var(--border-radius-suave);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.info-item-tiempo i {
    margin-right: 8px; /* Reducimos el margen */
    font-size: 1.1em; /* Ligeramente más pequeño */
    color: var(--color-secundario);
}

.cotizacion-slogan {
    text-align: center;
    font-style: italic;
    font-size: 1em; /* Ligeramente más pequeño */
    color: var(--color-principal-oscuro);
    margin-top: 25px; /* Reducimos el margen */
    font-weight: 500;
}

/* ======================================= */
/* === Media Queries para Responsiveness === */
/* ======================================= */

@media (max-width: 992px) {
    .cotizacion-content-wrapper {
        grid-template-columns: 1fr; 
        gap: 30px; /* Ajustamos el gap para apilado */
    }

    .info-cotizacion-pasos {
        order: -1; 
    }

    #cotizacion-header-simple {
        padding: 40px 15px; /* Ajuste de padding para móviles */
    }

    .cotizacion-title {
        font-size: 2em; /* Ajuste de tamaño para móviles */
    }
}

@media (max-width: 768px) {
    .cotizacion-main {
        padding: 30px 15px; /* Más compacto en móviles */
    }

    .formulario-cotizacion-container,
    .info-cotizacion-pasos {
        padding: 25px 15px; /* Más compacto en móviles */
    }

    .formulario-cotizacion-container h2,
    .info-cotizacion-pasos h2 {
        font-size: 1.6em; /* Ajuste de tamaño para móviles */
        margin-bottom: 20px;
    }

    .cotizacion-form label {
        font-size: 0.88em;
    }

    .cotizacion-form input,
    .cotizacion-form select,
    .cotizacion-form textarea {
        padding: 8px;
        font-size: 0.9em;
    }

    .cotizacion-form .btn-enviar {
        padding: 10px 15px;
        font-size: 0.95em;
    }

    .paso-numero {
        min-width: 30px;
        height: 30px;
        font-size: 1em;
    }

    .paso-texto h3 {
        font-size: 1em;
    }

    .paso-texto p {
        font-size: 0.85em;
    }

    .info-item-tiempo {
        font-size: 0.9em;
        padding: 10px 12px;
    }
}

@media (max-width: 480px) {
    .cotizacion-title {
        font-size: 1.8em;
    }
}