/* =========================================
   1. VARIABLES & PALETA "EJECUTIVA"
   ========================================= */
:root {
    /* COLOR PRINCIPAL: Vino Tinto (Marsala) 
       Sustituye al rojo brillante. Es más maduro y elegante. */
    --brand-primary: #9E2A2B;

    /* ACENTO: Dorado Mate 
       Detalles sutiles para elevar el estatus. */
    --brand-gold: #B08D55;

    /* OSCURO: Gris Plomo (Gunmetal)
       Sustituye al negro puro. Menos agresivo, igual de formal. */
    --brand-dark: #2C3E50;

    /* FONDO: Blanco Hueso / Lino 
       Elimina el "brillo clínico" del blanco puro. */
    --brand-bg: #F9F7F2;

    /* TEXTO: Gris oscuro neutro */
    --brand-text: #4A4A4A;

    /* TIPOGRAFÍA ORIGINAL INTACTA */
    --font-primary: 'Raleway', sans-serif;
}

/* =========================================
   2. REGLAS GLOBALES
   ========================================= */

body {
    font-family: var(--font-primary) !important;
    color: var(--brand-text) !important;
    background-color: var(--brand-bg) !important;
}

/* Aseguramos que los títulos usen la fuente original pero con el nuevo color */
h1,
h2,
h3,
h4,
h5,
h6,
.display-2,
.display-4,
.navbar-brand {
    font-family: var(--font-primary) !important;
    color: var(--brand-dark) !important;
    letter-spacing: 0px;
    /* Quitamos tracking excesivo para limpiar */
}

.titqs {
    color: white !important;
}

/* --- AJUSTE ESPECÍFICO: TÍTULO HERO BLANCO --- */
/* Forzamos que el H1 dentro de la sección de portada (vh-100) sea blanco puro */
section.vh-100 h1 {
    color: #ffffff !important;
}

/* Opcional: Si el subtítulo (h5) también se ve gris y lo quieres blanco, descomenta esto: */
/*
section.vh-100 h5 {
    color: #ffffff !important;
}
*/

/* =========================================
   3. REDEFINICIÓN DE COLORES BOOTSTRAP
   ========================================= */

/* Fondo oscuro ahora es Gris Plomo */
.bg-dark,
.bg-black {
    background-color: var(--brand-dark) !important;
}

/* Rojo ahora es Vino */
.text-danger {
    color: var(--brand-primary) !important;
}

.bg-danger {
    background-color: var(--brand-primary) !important;
}

.border-danger {
    border-color: var(--brand-primary) !important;
}

/* =========================================
   4. SUAVIZADO DE FORMAS (EL TOQUE FEMENINO)
   ========================================= */

/* TRUCO: Redondeamos todo lo que tenga la clase 'rounded-0' (que era cuadrada) */
.rounded-0 {
    border-radius: 8px !important;
}

/* Botones: Más estilizados */
.btn-danger {
    background-color: var(--brand-primary) !important;
    border-color: var(--brand-primary) !important;
    border-radius: 6px !important;
    padding: 10px 28px;
    /* Más aire */
    letter-spacing: 1px;
    box-shadow: 0 4px 10px rgba(158, 42, 43, 0.2);
    transition: all 0.3s ease;
}

.btn-danger:hover {
    background-color: #7a1f20 !important;
    transform: translateY(-2px);
}

.btn-dark {
    background-color: var(--brand-dark) !important;
    border-color: var(--brand-dark) !important;
    border-radius: 6px !important;
}

.btn-outline-light,
.btn-outline-dark {
    border-radius: 6px !important;
    border-width: 1px;
    letter-spacing: 1px;
}

/* =========================================
   5. SECCIONES ESPECÍFICAS
   ========================================= */

/* HERO OVERLAY: Degradado con tinte Vino (Cálido) en vez de Negro (Frío) */
.bg-gradient-overlay {
    background: linear-gradient(90deg, rgba(44, 62, 80, 0.95) 0%, rgba(158, 42, 43, 0.5) 100%) !important;
}

/* NAVBAR: Limpia y luminosa */
.navbar {
    background-color: rgba(255, 255, 255, 0.98) !important;
    border-bottom: 1px solid rgba(176, 141, 85, 0.2);
    /* Línea dorada sutil */
    /* Definimos el tamaño original */
    padding-top: 1rem !important;
    padding-bottom: 1rem !important;

    /* Aseguramos que la transición sea suave (Sutil) */
    transition: all 0.4s ease-in-out;

    /* Fondo original (blanco sólido) */
    background-color: rgba(255, 255, 255, 1) !important;
}

/* 2. Estado "Scrolled" (Al bajar) */
.navbar-scrolled {
    /* CONTRAER: Reducimos el padding a la mitad */
    padding-top: 0.4rem !important;
    padding-bottom: 0.4rem !important;

    /* OPACIDAD: Blanco al 80% */
    background-color: rgba(255, 255, 255, 0.5) !important;

    /* EFECTO VIDRIO: Difumina lo que pasa por detrás (Toque Premium) */
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);

    /* Sombra suave para separar del contenido */
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
}

/* ICONOS: Círculos en lugar de Cuadrados */
.icon-square {
    width: 65px;
    height: 65px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #fff !important;
    border: 1px solid var(--brand-gold);
    /* Borde dorado fino */
    color: var(--brand-primary) !important;
    border-radius: 50% !important;
    /* CÍRCULO */
}

/* CARDS */
.card {
    border: none !important;
    border-radius: 12px !important;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05) !important;
    background-color: #fff;
}

.card:hover {
    transform: translateY(-5px);
}

/* FOOTER */
footer {
    border-top: 4px solid var(--brand-primary);
}

/* Enlaces */
a {
    transition: color 0.3s ease;
}

a:hover {
    color: var(--brand-primary) !important;
}

/* --- BARRA DE ESTADÍSTICAS (Ajuste de Color) --- */

/* 1. Números Grandes: Cambiamos a Dorado para que resalten y se vean elegantes */
section.bg-black .display-4 {
    color: var(--brand-gold) !important;
    /* Dorado Mate */
}

/* 2. Texto Pequeño: Blanco puro con un poco más de peso para lectura */
section.bg-black p.small {
    color: #ffffff !important;
    /* Blanco total en lugar de grisáceo */
    opacity: 0.9;
    font-weight: 600 !important;
    /* Un poco más gordita la letra */
    letter-spacing: 1.5px !important;
    /* Espaciado elegante */
}

/* 3. Fondo de la barra: Aseguramos el tono "Gunmetal" (Gris Azulado Profundo) */
section.bg-black {
    background-color: var(--brand-dark) !important;
    border-top: 3px solid var(--brand-gold);
    /* Línea decorativa superior */
}

/* =========================================
   FIX DE CONTRASTE (PRIORIDAD ALTA)
   ========================================= */

/* 1. SECCIÓN CTA (Fondo Rojo): Forzamos TODO el texto a BLANCO */
section.bg-danger h2,
section.bg-danger p,
section.bg-danger .lead {
    color: #ffffff !important;
}

/* 2. SECCIÓN ESTADÍSTICAS (Fondo Oscuro): Texto legible */
/* Los números grandes (+15, 360, 100%) */
section.bg-black .display-4 {
    color: #ffffff !important;
    /* Blanco puro para máxima legibilidad */
    /* Si prefieres el dorado que mencionamos antes, usa: var(--brand-gold) */
}

/* Las etiquetas pequeñas (Años de experiencia, etc.) */
section.bg-black p {
    color: rgba(255, 255, 255, 0.9) !important;
    font-weight: 500;
}

/* =========================================
   KIT FISCAL: PERSONALIZACIÓN HERO
   ========================================= */

/* Sobrescribimos el fondo gris oscuro (.bg-dark) SOLO en el Hero del Kit Fiscal.
   Usamos un degradado Marsala (Vino Profundo) que armoniza con el logo 
   y elimina la frialdad del gris. */

.hero-lp.bg-dark {
    /* Color base por si falla el gradiente */
    background-color: var(--brand-primary) !important;

    /* Degradado: De un Vino muy oscuro (casi chocolate) al Vino Institucional.
       Esto da volumen y elegancia premium. */
    background-image: linear-gradient(135deg, #4a0d15 0%, var(--brand-primary) 100%) !important;

    /* Agregamos una línea dorada inferior para separar del contenido blanco */
    border-bottom: 4px solid var(--brand-gold) !important;
}

/* Opcional: Ajustamos la tarjeta de la derecha que tenía fondo gris (.bg-gradient-gray)
   para que sea blanca limpia y resalte sobre el nuevo fondo vino */
.hero-lp .bg-gradient-gray {
    background: #ffffff !important;
    background-image: none !important;
    color: var(--brand-dark) !important;
    /* Texto oscuro para lectura */
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2) !important;
    /* Sombra más fuerte */
}

/* Ajuste para que el subtítulo de la tarjeta se vea bien en fondo blanco */
.hero-lp .bg-gradient-gray h3 {
    color: var(--brand-primary) !important;
}

/* =========================================
   FIX URGENTE: LEGIBILIDAD HERO KIT FISCAL
   ========================================= */

/* 1. Títulos y textos generales a BLANCO PURO */
.hero-lp h1,
.hero-lp p,
.hero-lp .lead {
    color: #ffffff !important;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    /* Sutil sombra para mejor lectura */
}

/* 2. El texto que era rojo ("SAT te da miedo?") 
   Lo cambiamos a DORADO. Rojo sobre fondo Vino no se ve. */
.hero-lp h1 .text-danger {
    color: var(--brand-gold) !important;
}

/* 3. La etiqueta pequeña de arriba ("Solo para nuevos emprendedores")
   La ponemos blanca con texto vino para máximo contraste */
.hero-lp .badge {
    background-color: #ffffff !important;
    color: var(--brand-primary) !important;
    border: none !important;
}