/* TOKENS DE DISEÑO - GOBIERNO COGNITIVO */
:root {
/* Neutrales estructurales */
--gc-bg-primary: #F2F2EF;     /* Blanco roto funcional [cite: 48] */
--gc-bg-secondary: #ECECE8;   /* Variación para secciones [cite: 49] */
--gc-bg-muted: #E4E4E0;       /* Fondos pasivos [cite: 50] */
--gc-text-primary: #1F2326;   /* Grafito / Negro no absoluto [cite: 51] */
--gc-text-secondary: #6F7478; /* Gris estructural [cite: 52] */
--gc-text-muted: #8A8F94;     /* Texto auxiliar [cite: 53] */
    
/* Interferencia controlada */
--gc-accent-cold: #4A5A66;    /* Azul acero [cite: 55] */
 --gc-accent-wear: #6B5550;    /* Óxido desaturado [cite: 56] */
    
/* Límites */
--gc-border-soft: #D6D6D2;    /* [cite: 58] */
--gc-border-hard: #AEB2B6;    /* [cite: 59] */
}

/* Restablecer estilos básicos */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Inter', 'Segoe UI', Tahoma, Geneva, sans-serif; /* Tipografía operativa [cite: 74] */
}

body {
background-color: var(--gc-bg-primary); /* [cite: 86] */
min-height: 100vh;
color: var(--gc-text-primary);
}

/* Contenedor principal en pantalla completa dividido en dos */
.container {
display: flex;
min-height: 100vh;
width: 100%;
}

/* ---- COLUMNA IZQUIERDA: FORMULARIO ---- */
.form-section {
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
padding: 4% 8%;
background-color: var(--gc-bg-primary);
}

/* Etiqueta superior*/
.badge {
align-self: flex-start;
background-color: var(--gc-bg-secondary);
color: var(--gc-text-secondary);
border: 1px solid var(--gc-border-soft);
padding: 6px 14px;
border-radius: 4px; /* Bordes duros, no amables */
font-weight: 600;
font-size: 0.85rem;
margin-bottom: 2rem;
display: flex;
align-items: center;
gap: 8px;
letter-spacing: 0.5px;
}

/* Título e introducción */
h1 {
color: var(--gc-text-primary); /* [cite: 87] */
font-family: 'Canela', 'Times New Roman', serif; /* Tipografía editorial para fricción [cite: 67] */
font-size: 2.8rem;
line-height: 1.1;
margin-bottom: 1.5rem;
font-weight: 600;
}

.subtitle {
    color: var(--gc-text-secondary);
    font-size: 1.1rem;
    line-height: 1.6;
    margin-bottom: 2.5rem;
    max-width: 450px;
}

/* Estilos de los inputs */
.diagnostic-form {
    max-width: 450px;
    width: 100%;
}

.input-group {
    margin-bottom: 1.5rem;
}

.input-group label {
    display: block;
    color: var(--gc-text-primary);
    font-weight: 600;
    margin-bottom: 0.5rem;
    font-size: 0.95rem;
}

.input-group input {
    width: 100%;
    padding: 14px 18px;
    border: 1px solid var(--gc-border-hard);
    border-radius: 4px;
    background-color: var(--gc-bg-secondary);
    font-size: 1rem;
    color: var(--gc-text-primary);
    transition: border-color 0.2s ease;
}

.input-group input:focus {
    outline: none;
    border-color: var(--gc-accent-cold);
    background-color: var(--gc-bg-primary);
    /* Sin sombras suaves tipo card [cite: 98] */
}

.privacy-notice {
    color: var(--gc-text-muted);
    font-size: 0.85rem;
    margin-bottom: 2rem;
}

/* Botón de envío principal */
.btn-submit {
    width: 100%;
    background-color: var(--gc-accent-cold); /* Azul acero frío [cite: 89] */
    color: #FFFFFF; /* [cite: 90] */
    border: none;
    padding: 16px;
    border-radius: 4px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    transition: background-color 0.2s ease;
}

.btn-submit:hover {
    background-color: var(--gc-text-primary); /* Hover = oscurecer, no agrandar [cite: 92] */
}

.validation-notice {
    color: var(--gc-text-secondary);
    font-size: 0.85rem;
    margin-top: 1.2rem;
    text-align: left;
}

/* ---- COLUMNA DERECHA: IMAGEN ---- */
.image-section {
    flex: 1;
    background-image: url('../img/fondo-diagnostico.png'); 
    background-size: cover;
    background-position: center;
    border-left: 1px solid var(--gc-border-soft); /* División clara [cite: 112] */
}

/* --- ESTILOS PÁGINA DE INTRODUCCIÓN --- */
.main-title {
    font-family: 'Canela', serif; /* [cite: 67] */
    font-size: 3.5rem;
    color: var(--gc-text-primary);
    line-height: 1.1;
    margin-bottom: 0.5rem;
}

.tagline {
    color: var(--gc-text-secondary);
    font-size: 1.2rem;
    font-weight: 500;
    margin-bottom: 1.5rem;
}

.divider {
    border: 0;
    height: 1px;
    background: var(--gc-border-hard);
    width: 100px;
    margin-bottom: 1.5rem;
}

.description-text {
    color: var(--gc-text-secondary);
    font-size: 1.1rem;
    line-height: 1.6;
    margin-bottom: 2.5rem;
    max-width: 460px;
}

.features-container {
    display: flex;
    gap: 3rem;
    margin-bottom: 3rem;
    max-width: 460px;
}

.feature-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.icon-wrapper {
    background-color: var(--gc-bg-muted);
    color: var(--gc-accent-cold);
    width: 50px;
    height: 50px;
    border-radius: 4px; /* Eliminamos el círculo amable */
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.3rem;
    margin-bottom: 0.8rem;
    border: 1px solid var(--gc-border-soft);
}

.feature-value {
    color: var(--gc-text-primary);
    font-weight: 600;
    font-size: 0.95rem;
    line-height: 1.3;
}

.btn-start {
    text-decoration: none;
    text-align: center;
}

.privacy-footer {
    color: var(--gc-text-muted);
    font-size: 0.85rem;
    margin-top: 1.5rem;
    display: flex;
    align-items: center;
    gap: 5px;
}

/* Responsive para pantallas móviles */
@media (max-width: 992px) {
    .container { flex-direction: column; }
    .image-section { display: none; }
    .form-section { padding: 32px 16px; } /* Usando saltos espaciales GC [cite: 80] */
    h1 { font-size: 2.2rem; }
}