/* =====================================================================
   redesign.css — capa de presentación (override) · template basic
   Carga DESPUÉS de main.css y theme-global.css.
   Solo variables de color.php (:root). Cero hex de acento. Multi-tenant.
   Convención:  color completo -> var(--x)
                componente HSL -> hsl(var(--x))  (--border-color, --section-bg-two, --white)
   ===================================================================== */

/* === 1. COMPONENTES REUTILIZABLES === */

.eyebrow-pro {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: 12.5px; font-weight: 500; text-transform: uppercase; letter-spacing: 1.5px;
    color: var(--primary-light);
    background: var(--primary-tint);
    border: 1px solid var(--primary-border);
    padding: 6px 14px; border-radius: 999px; margin-bottom: 18px;
}
.eyebrow-pro::before { content: ""; width: 6px; height: 6px; border-radius: 999px; background: var(--primary); }

.section-heading-pro__title { color: var(--text-main); font-weight: 700; letter-spacing: -1px; line-height: 1.1; }
.section-heading-pro__desc  { color: var(--text-soft); font-size: 17px; line-height: 1.65; }

.card-pro {
    background: var(--bg-card);
    border: 1px solid hsl(var(--border-color));
    border-radius: var(--radius-lg);
    padding: 32px 26px;
    transition: border-color var(--transition), background var(--transition), transform var(--transition);
}
.card-pro:hover { border-color: var(--primary-border); background: var(--bg-hover); }

.icon-pro {
    display: inline-flex; align-items: center; justify-content: center;
    width: 60px; height: 60px; border-radius: var(--radius-lg);
    background: var(--primary-tint); border: 1px solid var(--primary-border);
    color: var(--primary-light); font-size: 26px;
}

.btn-pro-primary {
    display: inline-flex; align-items: center; gap: 8px;
    background: var(--primary); color: var(--on-primary); font-weight: 600;
    padding: 14px 28px; border: 0; border-radius: var(--radius-md);
    transition: background var(--transition);
}
.btn-pro-primary:hover { background: var(--primary-hover); color: var(--on-primary); }

.btn-pro-secondary {
    display: inline-flex; align-items: center; gap: 8px;
    background: transparent; color: var(--text-main); font-weight: 600;
    padding: 14px 28px; border: 1px solid hsl(var(--border-color)); border-radius: var(--radius-md);
    transition: border-color var(--transition), background var(--transition);
}
.btn-pro-secondary:hover { border-color: var(--primary-border); background: var(--bg-hover); color: var(--text-main); }

.badge-pro {
    display: inline-flex; align-items: center;
    font-size: 12.5px; font-weight: 600;
    color: var(--primary-light); background: var(--primary-tint); border: 1px solid var(--primary-border);
    padding: 4px 12px; border-radius: 999px;
}

.stat-block { text-align: center; padding: 8px 12px; }
.stat-block__number { color: var(--text-main); font-weight: 700; letter-spacing: -1px; font-size: clamp(34px, 4vw, 46px); line-height: 1; }
.stat-block__number .accent { color: var(--primary-light); }
.stat-block__label { display: block; margin-top: 10px; color: var(--text-soft); font-size: 14px; font-weight: 500; }

/* === 2. SECCIÓN counter (estila clases BEM existentes, sin tocar el blade) === */

.counter-up-section { background: hsl(var(--section-bg-two)); position: relative; }
.counter-up-section .shape-one { opacity: 0.5; pointer-events: none; }

.counter-up-section .section-heading__title { color: var(--text-main); letter-spacing: -1px; }
.counter-up-section .section-heading__desc  { color: var(--text-soft); }

.counter-up-section .counterup-item {
    height: 100%; display: flex; align-items: center; justify-content: center; text-align: center;
    background: var(--bg-card);
    border: 1px solid hsl(var(--border-color));
    border-radius: var(--radius-lg);
    padding: 28px 18px;
    transition: border-color var(--transition), background var(--transition);
}
.counter-up-section .counterup-item:hover { border-color: var(--primary-border); background: var(--bg-hover); }

.counter-up-section .counterup-item__title,
.counter-up-section .counterup-item__number .odometer {
    color: var(--primary-light); font-weight: 700; letter-spacing: -1px;
}
.counter-up-section .counterup-item__text { color: var(--text-soft); font-size: 14px; font-weight: 500; }

/* === 3. SECCIÓN banner (hero) === */
.banner-section {
    position: relative;
    background-color: hsl(var(--body-bg));
    overflow: hidden;
}
.banner-section::before {
    content: "";
    position: absolute; inset: 0; z-index: 0; pointer-events: none;
    background:
        radial-gradient(60% 55% at 50% 0%, var(--primary-glow), transparent 70%),
        linear-gradient(to bottom, hsl(var(--body-bg) / 0.92), hsl(var(--body-bg) / 0.985));
}
.banner-section::after {
    content: "";
    position: absolute; left: 0; right: 0; bottom: 0; height: 40%; z-index: 0; pointer-events: none;
    background: linear-gradient(to bottom, transparent, hsl(var(--body-bg)));
}
.banner-section .banner-shap-bg { opacity: 0.5; }
.banner-content__subtitle {
    display: inline-block;
    font-size: 12.5px; font-weight: 500; text-transform: uppercase; letter-spacing: 1.5px;
    color: var(--primary-light);
    background: var(--primary-tint);
    border: 1px solid var(--primary-border);
    padding: 6px 14px; border-radius: 999px;
    margin-bottom: 20px;
}
.banner-content__title {
    color: var(--text-main);
    font-weight: 700;
    letter-spacing: -1.8px;
    line-height: 1.04;
    font-size: clamp(40px, 6vw, 62px);
}
.banner-content__desc {
    color: var(--text-soft);
    font-size: 18px;
    line-height: 1.65;
}
.banner-content__button { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.banner-section .btn--base {
    background: var(--primary);
    color: var(--on-primary);
    font-weight: 600;
    border: 0;
    border-radius: var(--radius-md);
    padding: 14px 28px;
    transition: background var(--transition);
}
.banner-section .btn--base:hover { background: var(--primary-hover); color: var(--on-primary); }
.banner-section .btn-outline--base {
    background: transparent;
    color: var(--text-main);
    font-weight: 600;
    border: 1px solid hsl(var(--border-color));
    border-radius: var(--radius-md);
    padding: 14px 28px;
    transition: border-color var(--transition), background var(--transition);
}
.banner-section .btn-outline--base:hover {
    border-color: var(--primary-border);
    background: var(--bg-hover);
    color: var(--text-main);
}

/* === FIX hero scrim: scrim encima del bg-image inline, contenido encima del scrim === */
.banner-section::before { z-index: 1; }
.banner-section .container { position: relative; z-index: 2 !important; }

/* Ajuste scrim hero: imagen de ambiente visible pero sutil (override final) */
.banner-section::before {
    background:
        radial-gradient(60% 55% at 50% 0%, var(--primary-glow), transparent 70%),
        linear-gradient(to bottom, hsl(var(--body-bg) / 0.70), hsl(var(--body-bg) / 0.88));
}

/* =====================================================================
   SECCIONES 4-12 · landing · solo variables del theme · sin tocar blades
   ===================================================================== */

.how-work-section, .why-choose-section, .highlight-section,
.payout-section, .faq-section, .testimonial-section, .evaluation-section {
    background: hsl(var(--body-bg));
    position: relative;
}
.section-heading__subtitle {
    display: inline-block;
    color: var(--primary-light);
    text-transform: uppercase;
    letter-spacing: 1.5px;
    font-weight: 500;
}
.section-heading__title { color: var(--text-main); letter-spacing: -1px; }
.section-heading__desc  { color: var(--text-soft); }
.shape-one { opacity: 0.5; pointer-events: none; }

.how-work-section .btn--base,
.payout-section .btn--base,
.cta .btn--base {
    background: var(--primary); color: var(--on-primary); font-weight: 600;
    border: 0; border-radius: var(--radius-md); padding: 14px 28px;
    transition: background var(--transition);
}
.how-work-section .btn--base:hover,
.payout-section .btn--base:hover,
.cta .btn--base:hover { background: var(--primary-hover); color: var(--on-primary); }

.cta .btn-outline--base {
    background: transparent; color: var(--text-main); font-weight: 600;
    border: 1px solid hsl(var(--border-color)); border-radius: var(--radius-md); padding: 14px 28px;
    transition: border-color var(--transition), background var(--transition);
}
.cta .btn-outline--base:hover { border-color: var(--primary-border); background: var(--bg-hover); color: var(--text-main); }

.choose-item, .highlight-item {
    height: 100%;
    background: var(--bg-card);
    border: 1px solid hsl(var(--border-color));
    border-radius: var(--radius-lg);
    padding: 32px 26px;
    transition: border-color var(--transition), background var(--transition);
}
.choose-item:hover, .highlight-item:hover { border-color: var(--primary-border); background: var(--bg-hover); }

.choose-item__icon, .highlight-item__icon, .how-work-item__icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 60px; height: 60px; border-radius: var(--radius-lg);
    background: var(--primary-tint); border: 1px solid var(--primary-border);
    color: var(--primary-light); font-size: 26px; margin-bottom: 16px;
}
.choose-item__title, .highlight-item__title, .how-work-item__title { color: var(--text-main); font-weight: 600; }
.choose-item__desc,  .highlight-item__desc,  .how-work-item__desc  { color: var(--text-soft); }

.how-work-section .how-work-item {
    background: var(--bg-card);
    border: 1px solid hsl(var(--border-color));
    border-radius: var(--radius-lg);
    padding: 22px;
    transition: border-color var(--transition);
}
.how-work-section .how-work-item:hover { border-color: var(--primary-border); }

.payout-section .payout-thumb { position: relative; }
.payout-section .payout-thumb img { filter: drop-shadow(0 20px 45px rgba(0,0,0,0.45)); }
.payout-section .payout-thumb::before {
    content: ""; position: absolute; inset: 10%; z-index: 0; pointer-events: none;
    background: radial-gradient(circle at center, var(--primary-glow), transparent 60%);
    opacity: 0.55;
}

.faq-section .custom--accordion {
    --bs-accordion-bg: var(--bg-card);
    --bs-accordion-border-color: hsl(var(--border-color));
    --bs-accordion-btn-color: var(--text-main);
    --bs-accordion-color: var(--text-soft);
    --bs-accordion-active-color: var(--primary-light);
    --bs-accordion-active-bg: var(--primary-tint);
    --bs-accordion-btn-focus-box-shadow: 0 0 0 0.2rem var(--primary-glow);
    --bs-accordion-btn-focus-border-color: var(--primary-border);
}
.faq-section .accordion-item { background: var(--bg-card); border: 1px solid hsl(var(--border-color)); }
.faq-section .accordion-button { color: var(--text-main); background: transparent; }
.faq-section .accordion-button:not(.collapsed) { color: var(--primary-light); background: var(--primary-tint); box-shadow: none; }
.faq-section .accordion-button:focus { border-color: var(--primary-border); box-shadow: 0 0 0 0.2rem var(--primary-glow); }
.faq-section .accordion-body .text { color: var(--text-soft); }

.cta {
    text-align: center;
    background: linear-gradient(135deg, var(--primary-tint), transparent);
    border: 1px solid var(--primary-border);
    border-radius: var(--radius-lg);
    padding: 56px 32px;
}
.cta__title { color: var(--text-main); letter-spacing: -1px; }
.cta__btn { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-top: 24px; }

.testimonial-section .rating-list__item i { color: var(--primary-light); }
.testimonial-section .testimonial-item {
    background: var(--bg-card);
    border: 1px solid hsl(var(--border-color));
    border-radius: var(--radius-lg);
    padding: 32px 28px;
}
.testimonial-section .testimonial-item__desc { color: var(--text-soft); }
.testimonial-section .testimonial-item__name { color: var(--text-main); }
.testimonial-section .testimonial-item__designation { color: var(--text-soft); }
.testimonial-section .testimonial-item__thumb img { border: 2px solid var(--primary-border); border-radius: 50%; }
.testimonial-section .slick-dots li button:before { color: var(--text-soft); opacity: 0.5; }
.testimonial-section .slick-dots li.slick-active button:before { color: var(--primary); opacity: 1; }

.pc-tab:hover { border-color: var(--primary-border); }
.pc-tab--active { border-color: var(--primary); background: var(--primary-tint); }
.pc-tab--active .pc-tab__radio { border-color: var(--primary); background: var(--primary); }
.pc-tab--active .pc-tab__radio::after { background: var(--on-primary); }
.pc-tab__badge { background: var(--primary); color: var(--on-primary); }
.pc-cap:hover { border-color: var(--primary-border); }
.pc-cap--active { border-color: var(--primary); background: var(--primary-tint); }
.pc-cap--active .pc-cap__radio { border-color: var(--primary); background: var(--primary); }
.pc-cap--active .pc-cap__radio::after { background: var(--on-primary); }
.pc-cap--active .pc-cap__bottom { background: var(--primary-tint); }
.pc-cap--active .pc-cap__bottom strong { color: var(--primary-light); }
.pc-summary__tag { background: var(--primary-tint); border-color: var(--primary-border); color: var(--primary-light); }
.pc-summary__inc-list li i { color: var(--primary-light); }
.pc-btn-cta { background: var(--primary); color: var(--on-primary); }
.pc-btn-cta:hover { box-shadow: 0 8px 32px var(--primary-glow); }

.footer-area { background: hsl(var(--section-bg-two)); }
.footer-area .footer-item__title, .footer-area .footer-contact__title { color: var(--text-main); }
.footer-area .footer-item__desc, .footer-area .footer-contact__desc { color: var(--text-soft); }
.footer-area .footer-menu__link { color: var(--text-soft); transition: color var(--transition); }
.footer-area .footer-menu__link:hover { color: var(--primary-light); }
.footer-area .social-list__link {
    color: var(--text-soft);
    border: 1px solid hsl(var(--border-color));
    transition: color var(--transition), background var(--transition), border-color var(--transition);
}
.footer-area .social-list__link:hover { color: var(--on-primary); background: var(--primary); border-color: var(--primary); }
.footer-area .form--control { background: var(--bg-card); border: 1px solid hsl(var(--border-color)); color: var(--text-main); }
.footer-area .subscribe-btn.btn--base { background: var(--primary); color: var(--on-primary); border: 0; }
.footer-area .subscribe-btn.btn--base:hover { background: var(--primary-hover); }
.footer-area .bottom-footer { border-top: 1px solid hsl(var(--border-color)); }
.footer-area .bottom-footer__text { color: var(--text-soft); }

/* =====================================================================
   SECCIÓN 13 · trading_rules — override scopeado (gana especificidad)
   ===================================================================== */
.trading-rules-section .tr-tab-btn.active {
    background: var(--primary);
    color: var(--on-primary);
    box-shadow: 0 4px 20px var(--primary-glow);
}
.trading-rules-section .tr-table tr.tr-row-highlight { background: var(--primary-tint); }
.trading-rules-section .tr-table tr.tr-row-highlight:hover { background: var(--primary-tint); }
.trading-rules-section .tr-badge-blue,
.trading-rules-section .tr-badge-green {
    background: var(--primary-tint);
    color: var(--primary-light);
    border: 1px solid var(--primary-border);
}
.trading-rules-section .tr-table thead th:last-child { color: var(--primary-light); }
.trading-rules-section .tr-table tbody td:last-child { background: var(--primary-tint); }
.trading-rules-section .tr-table thead th:last-child,
.trading-rules-section .tr-table tbody td:last-child { border-left: 1px solid var(--primary-border); }