/*
 * FUENTES:
 * Asume que las fuentes 'AEDNIK' y 'AEONIK' están cargadas en tu proyecto
 * (e.g., usando @font-face o un servicio como Google Fonts).
 */

/* ======================================= */
/* 1. ESTILOS PARA TÍTULOS */
/* ======================================= */
.titulo,
h1 {
    /* Fuente: AEDNIK */
    font-family: 'Aeonik', sans-serif;
    /* Estilos: REGULAR & MEDIUM */
    /* Necesitarás una clase o tag para diferenciar REGULAR y MEDIUM si ambos se usan.
     Aquí establecemos el 'font-weight' base para el título. */
    font-weight: 500;
    /* Asume 500 para MEDIUM */

    /* Interletrado (Tracking): -2% */
    /* Convierte % a 'em' para letter-spacing */
    letter-spacing: -0.02em;

    /* Interlineado (Leading): 90% */
    /* 90% es menor que 1. Por lo general, se usa un valor sin unidad para el line-height. */
    line-height: 0.9;
}

/* Opcional: Estilo específico para la variación REGULAR de TÍTULOS */
.titulo-regular,
h1 .regular {
    font-weight: 400;
    /* Asume 400 para REGULAR */
}


/* ======================================= */
/* 2. ESTILOS PARA SUBTÍTULOS */
/* ======================================= */
.subtitulo,
h2 {
    /* Fuente: AEONIK REGULAR */
    font-family: 'AEONIK', sans-serif;
    font-weight: 400;
    /* Asume 400 para REGULAR */

    /* Interletrado (Tracking): No especificado */
    letter-spacing: normal;

    /* Interlineado (Leading): 100% */
    line-height: 1.0;
}


/* ======================================= */
/* 3. ESTILOS PARA CUERPO DE TEXTO */
/* ======================================= */
.cuerpo-texto,
p {
    /* Fuente: AEONIK REGULAR */
    font-family: 'AEONIK', sans-serif;
    font-weight: 400;
    /* Asume 400 para REGULAR */

    /* Interletrado (Tracking): -2% */
    letter-spacing: -0.02em;

    /* Interlineado (Leading): 100% */
    line-height: 1.0;
}

/* DATABRAIN BRAND SYSTEM - V1 (Julio 2025) 
   Citas referenciadas del manual de marca.
*/

:root {
    /* --- PALETA PRIMARIA [cite: 148-156] --- */
    --databrain-white: #FFFFFF;
    /* [cite: 151] */
    --databrain-off-white: #F4F4F2;
    /* [cite: 158] */
    --databrain-crimson: #770F35;
    /* [cite: 196] */
    --databrain-deep-crimson: #42061F;
    /* [cite: 204] */
    --databrain-brain-pink: #FFE3E9;
    /* [cite: 168] */
    --databrain-blush-pink: #EDA5B2;
    /* [cite: 173] */

    /* --- ESCALA MATTER GRAY [cite: 163-194] --- */
    --databrain-gray-light: #EAE6DF;
    /* [cite: 164] */
    --databrain-gray-matter: #CABCAE;
    /* [cite: 184] */
    --databrain-gray-dark: #9E968A;
    /* [cite: 190] */

    /* --- PALETA UI COMPLEMENTARIA [cite: 607-613] --- */
    --databrain-sky-breeze: #9CD0F5;
    /* [cite: 619] */
    --databrain-honey-mist: #F8D790;
    /* [cite: 626] */
    --databrain-lilac-cloud: #C8AADD;
    /* [cite: 627] */

    /* --- GEOMETRÍA Y LAYOUT [cite: 492-498] --- */
    /* Margen modular basado en 1/27 del lado largo [cite: 494] */
    --databrain-margin: calc(100vw / 27);
}

/* --- TIPOGRAFÍA PRINCIPAL: Aeonik [cite: 265-272] --- */

.databrain-title {
    font-family: 'Aeonik', sans-serif;
    font-weight: 500;
    /* Medium [cite: 374] */
    letter-spacing: -0.02em;
    /* -2% [cite: 375] */
    line-height: 0.9;
    /* 90% [cite: 377] */
}

.databrain-subtitle {
    font-family: 'Aeonik', sans-serif;
    font-weight: 400;
    /* Regular [cite: 383] */
    letter-spacing: 0;
    /* 0% [cite: 387] */
    line-height: 1.0;
    /* 100% [cite: 388] */
}

.databrain-body {
    font-family: 'Aeonik', sans-serif;
    font-weight: 400;
    /* Regular [cite: 391] */
    letter-spacing: -0.02em;
    /* -2% [cite: 394] */
    line-height: 1.0;
    /* 100% [cite: 396] */
}

/* --- TIPOGRAFÍA SECUNDARIA: JetBrains Mono [cite: 303-310] --- */
/* Uso: botones, datos y precisión visual [cite: 334] */
.databrain-ui-text,
.databrain-mono {
    font-family: 'JetBrains Mono', monospace;
    font-weight: 400;
    /* Regular [cite: 332] */
}

/* --- CLASES DE UTILIDAD: COLORES --- */

.databrain-bg-main {
    background-color: var(--databrain-off-white);
}

.databrain-bg-crimson {
    background-color: var(--databrain-crimson);
}

.databrain-bg-deep {
    background-color: var(--databrain-deep-crimson);
}

.databrain-text-crimson {
    color: var(--databrain-crimson);
}

.databrain-text-white {
    color: var(--databrain-white);
}

.databrain-text-gray {
    color: var(--databrain-gray-dark);
}

/* --- COMPONENTES Y ÁREAS SEGURAS --- */

.databrain-container {
    padding: var(--databrain-margin);
    /* [cite: 494] */
}

.databrain-btn {
    font-family: 'JetBrains Mono', monospace;
    background-color: var(--databrain-crimson);
    color: var(--databrain-white);
    padding: 12px 24px;
    border: none;
    cursor: pointer;
    transition: opacity 0.3s ease;
}

.databrain-btn:hover {
    opacity: 0.9;
}

/* Área de seguridad mínima para isotipo (0.25x) [cite: 45] */
.databrain-iso-safe {
    padding: 0.25em;
}

/* Área de seguridad para isologotipo (0.5x) [cite: 102] */
.databrain-isologo-safe {
    padding: 0.5em;
}

/* --- ACCESIBILIDAD (WCAG AAA) [cite: 554-563] --- */

/* Combinaciones con alto contraste aprobado [cite: 565-591] */
.databrain-accessible-dark {
    background-color: var(--databrain-deep-crimson);
    color: var(--databrain-white);
    /* AAA [cite: 587] */
}

.databrain-accessible-light {
    background-color: var(--databrain-white);
    color: var(--databrain-deep-crimson);
    /* AAA [cite: 565] */
}

/* GLOBAL RESET */
* {
    font-family: 'Aeonik', sans-serif !important;
}

/* --- SUAVIZADO DE FUENTE ---
   Aeonik se sirve en .ttf; en Windows/Chrome el hinting/ClearType engorda y
   distorsiona los trazos, haciendo que "no parezca" Aeonik respecto al render
   vectorial de las herramientas de diseño. El antialiasing acerca el render
   web a como se ve la fuente en el manual. */
html, body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}