/* ================================================================
   FINXIDIL FORTE — Widgets CSS
================================================================ */

/* --- SECTION HEADER --- */
.fxw-section-header { max-width: 760px; margin: 0 auto; padding-bottom: 1rem; }
.fxw-section-title {
    font-family: var(--fx-font-display);
    font-size: clamp(2rem, 5vw, 3.5rem);
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    line-height: 1.1;
    margin: .5rem 0;
    color: inherit;
}
.fxw-section-subtitle {
    font-size: 1.05rem;
    color: var(--fx-muted);
    max-width: 600px;
    line-height: 1.7;
    margin: .75rem auto 0;
}
.fx-light .fxw-section-subtitle,
.fx-light-blue .fxw-section-subtitle { color: #3A4B6A; }

/* --- HERO --- */
.fxw-hero {
    min-height: 90vh;
    display: flex;
    align-items: center;
    position: relative;
    overflow: hidden;
    padding: 100px 0 60px;
}
.fxw-hero-bg {
    position: absolute; inset: 0; pointer-events: none;
    background-image:
        radial-gradient(circle at 30% 50%, rgba(0,191,255,.12) 0%, transparent 45%),
        radial-gradient(circle at 80% 20%, rgba(0,191,255,.08) 0%, transparent 40%);
}
.fxw-container { max-width: 1200px; margin: 0 auto; padding: 0 24px; width: 100%; }
.fxw-hero-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    align-items: center;
}
@media (max-width: 768px) {
    .fxw-hero-grid { grid-template-columns: 1fr; }
    .fxw-hero { min-height: auto; padding: 100px 0 48px; }
}
.fxw-hero-content { display: flex; flex-direction: column; gap: 1.25rem; }
.fxw-hero-title {
    font-family: var(--fx-font-display);
    font-size: clamp(2.5rem, 6vw, 5rem);
    font-weight: 700;
    line-height: 1.05;
    text-transform: uppercase;
    letter-spacing: .04em;
    margin: 0;
    color: var(--fx-light);
}
.fxw-hero-desc { font-size: 1.1rem; color: var(--fx-muted); line-height: 1.7; max-width: 480px; margin: 0; }
.fxw-hero-actions { display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap; margin-top: .5rem; }
.fxw-hero-note { font-size: .875rem; color: var(--fx-muted); }
.fxw-hero-image img { width: 100%; border-radius: 16px; position: relative; z-index: 1; }

/* --- PRODUCT CARD --- */
.fxw-product-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    position: relative;
    overflow: visible;
}
.fxw-product-card--featured {
    border-color: var(--fx-cyan) !important;
    box-shadow: 0 0 40px rgba(0,191,255,.25) !important;
}
.fxw-product-card__popular {
    position: absolute;
    top: -14px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--fx-cyan);
    color: #0B0E14;
    font-family: var(--fx-font-display);
    font-size: .65rem;
    font-weight: 700;
    letter-spacing: .12em;
    padding: 4px 16px;
    border-radius: 20px;
    white-space: nowrap;
    z-index: 2;
}
.fxw-product-card__top {
    padding: 24px 24px 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}
.fxw-product-card__img { width: 180px; height: 180px; display: flex; align-items: center; justify-content: center; }
.fxw-product-card__img img { max-width: 100%; max-height: 100%; object-fit: contain; }
.fxw-product-card__body { padding: 0 24px 16px; flex: 1; }
.fxw-product-card__name {
    font-family: var(--fx-font-display);
    font-size: 1.1rem;
    letter-spacing: .08em;
    margin: 0 0 .5rem;
    color: var(--fx-light);
}
.fxw-product-card__desc { font-size: .85rem; color: var(--fx-muted); margin: 0 0 1rem; line-height: 1.6; }
.fxw-product-card__benefits { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.fxw-product-card__benefits li { font-size: .8rem; color: var(--fx-muted); padding-left: 18px; position: relative; }
.fxw-product-card__benefits li::before { content: '✓'; position: absolute; left: 0; color: var(--fx-cyan); font-weight: 700; }
.fxw-product-card__footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 24px 24px;
    border-top: 1px solid rgba(0,191,255,.1);
    margin-top: auto;
    gap: 12px;
    flex-wrap: wrap;
}

/* --- STATS BAR --- */
.fxw-stats-bar {
    display: flex;
    justify-content: center;
    gap: 0;
    flex-wrap: wrap;
}
.fxw-stat-item {
    flex: 1 1 140px;
    text-align: center;
    padding: 24px 16px;
    border-right: 1px solid rgba(0,191,255,.12);
}
.fxw-stat-item:last-child { border-right: none; }
@media (max-width: 600px) {
    .fxw-stat-item { border-right: none; border-bottom: 1px solid rgba(0,191,255,.12); }
    .fxw-stat-item:last-child { border-bottom: none; }
}

/* --- TESTIMONIAL --- */
.fxw-testimonial-header { display: flex; align-items: center; gap: 16px; margin-bottom: 16px; }
.fxw-testimonial-name { font-weight: 700; font-size: .95rem; color: #0E1420; }
.fxw-testimonial-location { font-size: .75rem; color: #8B9DBB; }
.fxw-stars { font-size: 1rem; letter-spacing: 2px; margin-bottom: 12px; }
.fx-testimonial blockquote { font-style: italic; color: #3A4B6A; margin: 0 0 16px; line-height: 1.7; font-size: .9rem; }
.fxw-testimonial-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 14px;
    border-top: 1px solid #DDE3EE;
    font-size: .85rem;
    font-weight: 700;
    color: #0E1420;
}

/* --- TIMELINE STEP --- */
.fxw-timeline-step { padding: 24px 24px 24px 90px !important; }
.fxw-timeline-content {}
.fxw-timeline-badge { margin-bottom: 6px; }
.fx-timeline-step h4 { font-size: 1rem !important; color: var(--fx-light) !important; margin: 0 0 6px !important; }
.fx-timeline-step p { font-size: .85rem !important; color: var(--fx-muted) !important; margin: 0 0 8px !important; }
.fxw-timeline-points { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.fxw-timeline-points li {
    font-size: .7rem;
    background: rgba(0,191,255,.1);
    border: 1px solid rgba(0,191,255,.2);
    color: var(--fx-cyan);
    padding: 2px 10px;
    border-radius: 20px;
    font-weight: 600;
    letter-spacing: .08em;
}

/* --- FAQ --- */
.fxw-faq details { transition: box-shadow .2s; }
.fxw-faq details:hover { box-shadow: 0 2px 16px rgba(0,0,0,.06); }

/* --- CTA BANNER --- */
.fxw-cta-banner {
    border-radius: 20px;
    padding: 60px 40px;
    text-align: center;
    border: 1px solid rgba(0,191,255,.15);
    position: relative;
    overflow: hidden;
}
.fxw-cta-banner::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 50% 50%, rgba(0,191,255,.08) 0%, transparent 60%);
    pointer-events: none;
}
.fxw-cta-inner { position: relative; z-index: 1; max-width: 640px; margin: 0 auto; }
.fxw-cta-title {
    font-family: var(--fx-font-display);
    font-size: clamp(1.8rem, 4vw, 3rem);
    letter-spacing: .06em;
    margin: .5rem 0 1rem;
    color: var(--fx-light);
}
.fxw-cta-desc { color: var(--fx-muted); font-size: 1rem; line-height: 1.7; margin: 0 0 1.5rem; }
.fxw-cta-points { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; margin-bottom: 2rem; }
.fxw-cta-point {
    background: rgba(0,191,255,.08);
    border: 1px solid rgba(0,191,255,.25);
    color: var(--fx-cyan);
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .1em;
    padding: 6px 16px;
    border-radius: 20px;
    font-family: var(--fx-font-display);
}
.fxw-cta-actions { display: flex; justify-content: center; gap: 16px; flex-wrap: wrap; }

/* --- Responsive general --- */
@media (max-width: 480px) {
    .fxw-cta-banner { padding: 40px 20px; }
    .fxw-product-card__footer { flex-direction: column; align-items: flex-start; }
}

/* ================================================================
   LIGHT MODE — overrides dentro de .fxw-outer.fx-light
   y .fxw-outer.fx-light-blue
================================================================ */

/* Wrapper outer */
.fxw-outer { transition: background-color .3s; }
.fxw-outer.fx-dark      { background-color: #0B0E14; color: #E3EAF5; }
.fxw-outer.fx-dark-2    { background-color: #0E1420; color: #E3EAF5; }
.fxw-outer.fx-dark-3    { background-color: #141B2D; color: #E3EAF5; }
.fxw-outer.fx-light     { background-color: #EEF2F8; color: #0E1420; }
.fxw-outer.fx-light-blue{
    background-color: #E8EEF8;
    background-image: radial-gradient(circle at 0% 0%, rgba(0,191,255,.10) 0%, transparent 45%),
                      radial-gradient(circle at 100% 100%, rgba(0,191,255,.08) 0%, transparent 45%);
    color: #0E1420;
}

/* Borde top */
.fxw-top-border { border-top: 3px solid var(--fx-cyan); }

/* Texto en modos claros */
.fxw-outer.fx-light     h1,
.fxw-outer.fx-light     h2,
.fxw-outer.fx-light     h3,
.fxw-outer.fx-light     h4,
.fxw-outer.fx-light     .fxw-section-title,
.fxw-outer.fx-light-blue h1,
.fxw-outer.fx-light-blue h2,
.fxw-outer.fx-light-blue h3,
.fxw-outer.fx-light-blue h4,
.fxw-outer.fx-light-blue .fxw-section-title { color: #0E1420 !important; }

.fxw-outer.fx-light     p,
.fxw-outer.fx-light     .fxw-section-subtitle,
.fxw-outer.fx-light     .fxw-hero-desc,
.fxw-outer.fx-light-blue p,
.fxw-outer.fx-light-blue .fxw-section-subtitle { color: #3A4B6A !important; }

/* Product cards en modo claro */
.fxw-outer.fx-light     .fxw-product-card,
.fxw-outer.fx-light-blue .fxw-product-card {
    background-color: #fff;
    border-color: #DDE3EE;
}
.fxw-outer.fx-light     .fxw-product-card__name,
.fxw-outer.fx-light-blue .fxw-product-card__name { color: #0E1420; }
.fxw-outer.fx-light     .fxw-product-card__desc,
.fxw-outer.fx-light     .fxw-product-card__benefits li,
.fxw-outer.fx-light-blue .fxw-product-card__desc,
.fxw-outer.fx-light-blue .fxw-product-card__benefits li { color: #3A4B6A; }
.fxw-outer.fx-light     .fxw-product-card__footer,
.fxw-outer.fx-light-blue .fxw-product-card__footer { border-color: #DDE3EE; }

/* Stats en modo claro */
.fxw-outer.fx-light     .fxw-stat-item,
.fxw-outer.fx-light-blue .fxw-stat-item { border-color: rgba(0,191,255,.2); }
.fxw-outer.fx-light     .fx-stat-label,
.fxw-outer.fx-light-blue .fx-stat-label { color: #3A4B6A; }

/* Timeline en modo claro */
.fxw-outer.fx-light     .fx-timeline-step,
.fxw-outer.fx-light-blue .fx-timeline-step {
    background: #fff;
    border-color: #DDE3EE;
}
.fxw-outer.fx-light     .fx-timeline-step h4,
.fxw-outer.fx-light-blue .fx-timeline-step h4 { color: #0E1420 !important; }
.fxw-outer.fx-light     .fx-timeline-step p,
.fxw-outer.fx-light-blue .fx-timeline-step p { color: #3A4B6A !important; }

/* FAQ en modo claro (ya usa fx-faq que es blanco — OK) */
.fxw-outer.fx-dark .fx-faq details,
.fxw-outer.fx-dark-2 .fx-faq details,
.fxw-outer.fx-dark-3 .fx-faq details {
    background: #141B2D;
    border-color: rgba(0,191,255,.15);
}
.fxw-outer.fx-dark  .fx-faq summary,
.fxw-outer.fx-dark-2 .fx-faq summary,
.fxw-outer.fx-dark-3 .fx-faq summary { color: #E3EAF5; }
.fxw-outer.fx-dark  .fx-faq .fx-faq-body,
.fxw-outer.fx-dark-2 .fx-faq .fx-faq-body,
.fxw-outer.fx-dark-3 .fx-faq .fx-faq-body { color: #8B9DBB; }

/* CTA Banner en modo claro */
.fxw-outer.fx-light .fxw-cta-banner,
.fxw-outer.fx-light-blue .fxw-cta-banner {
    background: transparent;
    border-color: rgba(0,191,255,.25);
}
.fxw-outer.fx-light .fxw-cta-title,
.fxw-outer.fx-light-blue .fxw-cta-title { color: #0E1420; }
.fxw-outer.fx-light .fxw-cta-desc,
.fxw-outer.fx-light-blue .fxw-cta-desc { color: #3A4B6A; }

/* Hero en modo claro */
.fxw-outer.fx-light .fxw-hero { background-color: #EEF2F8; }
.fxw-outer.fx-light .fxw-hero-title { color: #0E1420; }
.fxw-outer.fx-light .fxw-hero-desc { color: #3A4B6A; }

/* Botón en modo claro (texto sigue siendo oscuro sobre cyan) */
.fxw-outer.fx-light .fx-btn,
.fxw-outer.fx-light-blue .fx-btn { color: #0B0E14; }

/* Badge pill en modo claro */
.fxw-outer.fx-light .fx-badge-pill,
.fxw-outer.fx-light-blue .fx-badge-pill {
    background: rgba(0,191,255,.10);
    border-color: rgba(0,191,255,.35);
}

/* Section header en modo claro */
.fxw-outer.fx-light .fxw-section-subtitle,
.fxw-outer.fx-light-blue .fxw-section-subtitle { color: #3A4B6A; }