/**
 * compramostucocheaccidentado.com
 * Variables de marca: colorimetría del isotipo + tipografía
 *
 * Colores: azul #0D3E5C, verde #60A13C, rojo #E31E24
 * Fuente: cambiar --font-brand para usar otra (y cargarla en el layout).
 */

:root {
    /* --- Tipografía: fuente de marca para esta landing de motos --- */
    --font-brand: 'Poppins', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

    /* --- Paleta de marca para esta landing ---
     * primary: negro (texto y títulos)
     * green: azul oscuro que usábamos antes (para CTAs y acentos)
     */
    --brand-primary: #111111;
    --brand-primary-rgb: 17, 17, 17;
    /* Usamos el azul antiguo como "green" para reaprovechar estilos */
    --brand-green: #0D3E5C;
    --brand-green-rgb: 13, 62, 92;
    --brand-green-dark: #082639;
    --brand-red: #E31E24;
    --brand-red-rgb: 227, 30, 36;
    --brand-white: #FFFFFF;

    /* --- Colores de texto base --- */
    --text-main: #1F2B3B;
    --text-muted: #4B5563;
    --text-soft: #6B7C8F;
    --text-footer: #3D4A5C;

    /* --- Fondos neutros --- */
    --bg-page: #F8FAFB;
    --bg-soft: #F0F4F8;
    --bg-placeholder: #E8EEF5;

    /* --- Override del tema (style.css) para usar la colorimetría --- */
    --color-one: var(--brand-primary);
    --color-two: var(--brand-green);
    --color-three: var(--brand-red);
    --color-four: var(--brand-green);
    --color-title: var(--brand-primary);
    --color-text: #555;

    --background-default: var(--brand-white);
    --background-grey: #F7F9FB;
    --background-one: linear-gradient(135deg, var(--brand-primary) 0%, #222222 50%, var(--brand-green) 100%);
    --background-two: linear-gradient(90deg, var(--brand-green) 0%, #60A13C 100%);
    --background-three: linear-gradient(90deg, var(--brand-green) 0%, var(--brand-primary) 100%);
}

/* Header fondo blanco con acentos de marca */
.navbar-inverse {
    background-color: var(--brand-white) !important;
    border-color: #e0e0e0 !important;
    border-bottom: 1px solid #e8e8e8;
}
.navbar-inverse .navbar-brand,
.navbar-inverse .navbar-brand:hover {
    color: var(--brand-primary) !important;
}
.navbar-inverse .navbar-nav > li > a {
    color: var(--brand-primary) !important;
}
.navbar-inverse .navbar-nav > li > a:hover,
.navbar-inverse .navbar-nav > li > a:focus {
    background-color: rgba(var(--brand-primary-rgb), 0.08) !important;
    color: var(--brand-green) !important;
}
.navbar-inverse .navbar-toggle {
    border-color: var(--brand-primary);
}
.navbar-inverse .navbar-toggle .icon-bar {
    background-color: var(--brand-primary);
}
.navbar-inverse .navbar-toggle:hover,
.navbar-inverse .navbar-toggle:focus {
    background-color: rgba(var(--brand-primary-rgb), 0.08);
}
.btn-primary {
    background-color: var(--brand-green);
    border-color: var(--brand-green);
}
.btn-primary:hover,
.btn-primary:focus {
    background-color: #4d8a30;
    border-color: #4d8a30;
}
.btn-secondary {
    background-color: var(--brand-primary);
    border-color: var(--brand-primary);
}
.btn-secondary:hover,
.btn-secondary:focus {
    background-color: #0a2f47;
    border-color: #0a2f47;
}
a:hover {
    color: var(--brand-green);
}
.intro .overlay {
    background: linear-gradient(180deg, transparent 30%, rgba(var(--brand-primary-rgb), 0.9) 100%);
}

/* Aplicar fuente de marca a todo el sitio */
body,
.navbar-brand,
h1, h2, h3, h4, h5, h6,
.btn,
input, select, textarea {
    font-family: var(--font-brand) !important;
}