:root {
    --sim-dark: #0B252B;
    --sim-orange: #FF7A59;
}

body { font-family: 'Inter', sans-serif; color: var(--sim-dark); }
.fw-800 { font-weight: 800; }
.text-orange { color: var(--sim-orange); }

/* Navbar */
.btn-cta {
    background: var(--sim-orange);
    color: white !important;
    font-weight: 700;
    border-radius: 8px;
    padding: 10px 20px;
}

/* Hero */
.hero-section {
    background: linear-gradient(180deg, #f8fafd 0%, #ffffff 100%);
}

.btn-primary-sim {
    background: var(--sim-orange);
    color: white;
    border: none;
    padding: 15px 30px;
    border-radius: 10px;
    font-weight: 700;
}

.btn-outline-dark-sim {
    border: 2px solid var(--sim-dark);
    color: var(--sim-dark);
    padding: 15px 30px;
    border-radius: 10px;
    font-weight: 700;
}

/* Gráfico - LA SOLUCIÓN AL ESTIRAMIENTO */
.chart-wrapper {
    position: relative;
    height: 300px; /* Altura fija para evitar crecimiento infinito */
    width: 100%;
}

.chart-box {
    border: 1px solid rgba(0,0,0,0.05);
    border-radius: 20px;
}

/* Extras */
.orange-line {
    width: 60px;
    height: 4px;
    background: var(--sim-orange);
    margin-top: 15px;
}

.hover-up:hover {
    transform: translateY(-10px);
    transition: 0.3s;
}

/* Footer Styles */
.footer-sim {
    background-color: var(--sim-dark); /* El azul petróleo de tu logo */
    border-top: 4px solid var(--sim-orange);
}

.text-light-50 {
    color: rgba(255, 255, 255, 0.6);
}

.text-orange-link {
    color: var(--sim-orange);
    text-decoration: none;
    font-weight: 600;
    transition: 0.3s;
}

.text-orange-link:hover {
    color: #ffffff;
    text-decoration: underline;
}

/* Filtro opcional para que el logo se vea blanco en el fondo oscuro */
.filter-white {
    filter: brightness(0) invert(1);
    opacity: 0.9;
}