/* RESET: Eliminamos estilos automáticos del navegador para control total */
* { box-sizing: border-box; margin: 0; padding: 0; font-family: 'Segoe UI', sans-serif; }

/* VARIABLES: Colores principales para facilitar cambios futuros */
:root {
    --primary: #000000;
    --accent: #007bff;
    --bg: #ffffff;
    --gray: #f4f7f6;
}

/* HEADER: Diseño de la barra superior */
.header { padding: 20px; border-bottom: 1px solid #eee; background: #fff; position: sticky; top: 0; z-index: 10; }
.header .container { display: flex; justify-content: space-between; align-items: center; max-width: 1000px; margin: auto; }
.brand { font-size: 24px; font-weight: 800; letter-spacing: -1px; }
.brand span { color: var(--accent); } /* El 'Card' de ViCard en color azul */

/* HERO: Sección de impacto principal con fondo oscuro */
.hero { background: var(--primary); color: #fff; padding: 80px 20px; text-align: center; }
.hero h1 { font-size: 36px; margin-bottom: 10px; }
.cta-button { display: inline-block; margin-top: 20px; padding: 12px 25px; background: #fff; color: #000; text-decoration: none; border-radius: 5px; font-weight: bold; }

/* HERO: Sección de impacto principal con fondo oscuro */
.hero { background: var(--primary); color: #ffffff; padding: 80px 20px; text-align: center; }
.hero h1 { font-size: 36px; margin-bottom: 10px; }
.cta2-button { display: inline-block; margin-top: 20px; padding: 12px 25px; background: #fdfdfd; color: #ffffff; text-decoration: none; border-radius: 5px; font-weight: bold; }


/* FORMULARIO: Estilo de tarjeta flotante */
.form-container { padding: 50px 20px; background: var(--gray); }
.card-form { max-width: 600px; margin: auto; background: #fff; padding: 40px; border-radius: 15px; shadow: 0 4px 15px rgba(0,0,0,0.1); }
.card-form h2 { margin-bottom: 5px; text-align: center; }
.subtitle { text-align: center; color: #666; font-size: 14px; margin-bottom: 30px; }

/* CAMPOS: Estilos de los inputs y labels */
.field { margin-bottom: 15px; display: flex; flex-direction: column; flex: 1; }
.field-group { display: flex; gap: 15px; } /* Permite poner dos columnas en PC */
label { font-size: 12px; font-weight: bold; margin-bottom: 5px; color: #444; }
input { padding: 12px; border: 1px solid #ccc; border-radius: 6px; font-size: 16px; }
input:focus { border-color: var(--accent); outline: none; }

/* BOTÓN DE ENVÍO: Efecto visual al presionar */
#btn-enviar { width: 100%; padding: 15px; background: var(--primary); color: #fff; border: none; border-radius: 6px; font-weight: bold; cursor: pointer; transition: 0.3s; margin-top: 10px; }
#btn-enviar:hover { background: #333; }

/* MENSAJES: Se muestran según la respuesta del servidor */
.status-msg { display: none; padding: 15px; border-radius: 6px; margin-top: 20px; text-align: center; font-weight: bold; }
.success { background: #d4edda; color: #155724; }
.error { background: #f8d7da; color: #721c24; }

/* RESPONSIVE: Adaptación para pantallas pequeñas */
@media (max-width: 600px) {
    .field-group { flex-direction: column; gap: 0; }
}