/* ============================================================
   TRADINGUP · Sistema de diseño (tema oscuro premium)
   Comunidad de trading · impulsada por Tradesoft
   Tipografías: Plus Jakarta Sans (display) + Inter (texto)
   Build 2026-07-20 · v1
   ============================================================ */

:root {
    /* — Fondo y superficies — */
    --bg:            #070B10;   /* fondo base casi negro azulado */
    --bg-2:          #0B1119;   /* secciones alternas */
    --panel:         #0F1720;   /* paneles/tarjetas */
    --panel-2:       #131E29;   /* tarjetas hover / elevadas */
    --card-border:   rgba(255,255,255,.08);
    --card-border-2: rgba(255,255,255,.14);

    /* — Acento teal (del logo TradingUp) — */
    --teal:          #16C7A9;
    --teal-2:        #0FA98F;
    --teal-3:        #0C8776;
    --teal-soft:     rgba(22,199,169,.14);
    --teal-glow:     rgba(22,199,169,.30);
    --mint:          #6FE9C9;   /* highlight claro */
    --lime:          #B6F24A;   /* acento secundario puntual */

    /* — Texto — */
    --text:          #EAF2F6;
    --text-2:        #B9C7D1;
    --muted:         #8397A5;
    --muted-2:       #63758230;

    /* — Estados — */
    --up:            #2FD180;   /* verde alcista */
    --down:          #FF6B6B;   /* rojo bajista */
    --warn:          #FFC44D;

    /* — Tipografía — */
    --font-display:  'Plus Jakarta Sans', 'Space Grotesk', sans-serif;
    --font-main:     'Inter', system-ui, sans-serif;

    /* — Formas — */
    --radius:        12px;
    --radius-lg:     18px;
    --radius-xl:     26px;
    --shadow-sm:     0 2px 14px rgba(0,0,0,.35);
    --shadow-md:     0 18px 46px rgba(0,0,0,.45);
    --shadow-teal:   0 14px 40px rgba(22,199,169,.28);

    --container:     1200px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
    font-family: var(--font-main);
    color: var(--text);
    background: var(--bg);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

h1,h2,h3,h4,h5,h6 { font-family: var(--font-display); color: var(--text); font-weight: 700; letter-spacing: -.015em; }

a { color: var(--teal); text-decoration: none; transition: color .18s; }
a:hover { color: var(--mint); }

img { max-width: 100%; }

.container { max-width: var(--container); }

::selection { background: var(--teal-glow); color: #fff; }

/* Scrollbar sutil */
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: var(--bg-2); }
::-webkit-scrollbar-thumb { background: #1d2b38; border-radius: 8px; border: 2px solid var(--bg-2); }
::-webkit-scrollbar-thumb:hover { background: #263845; }

/* ============================================================
   UTILIDADES
   ============================================================ */
.text-teal   { color: var(--teal) !important; }
.text-mint   { color: var(--mint) !important; }
.text-muted2 { color: var(--muted) !important; }
.bg-panel    { background: var(--panel); }
.section     { padding: 88px 0; position: relative; }
.section-sm  { padding: 56px 0; }
.section-alt { background: var(--bg-2); }
.fw-800 { font-weight: 800; }
.lead-2 { font-size: 1.15rem; color: var(--text-2); }
.eyebrow {
    display: inline-flex; align-items: center; gap: .5rem;
    font-family: var(--font-main);
    font-size: .78rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
    color: var(--teal);
    background: var(--teal-soft);
    border: 1px solid rgba(22,199,169,.28);
    padding: .4rem .9rem; border-radius: 100px;
}
.gradient-text {
    background: linear-gradient(100deg, var(--mint) 0%, var(--teal) 55%, var(--teal-2) 100%);
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.divider-glow { height:1px; background:linear-gradient(90deg,transparent,var(--card-border-2),transparent); border:0; }

/* Fondo de rejilla y halos decorativos */
.grid-bg::before {
    content:''; position:absolute; inset:0; z-index:0; pointer-events:none;
    background-image:
      linear-gradient(rgba(255,255,255,.028) 1px, transparent 1px),
      linear-gradient(90deg, rgba(255,255,255,.028) 1px, transparent 1px);
    background-size: 46px 46px;
    mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000 40%, transparent 100%);
}
.glow {
    position:absolute; border-radius:50%; filter: blur(70px); opacity:.5; z-index:0; pointer-events:none;
    background: radial-gradient(circle, var(--teal-glow) 0%, transparent 70%);
}

/* ============================================================
   BOTONES
   ============================================================ */
.btn { font-family: var(--font-main); font-weight: 700; border-radius: 100px; transition: all .2s ease; letter-spacing:.01em; }
.btn-teal {
    background: linear-gradient(135deg, var(--teal) 0%, var(--teal-2) 100%);
    color: #04211C; border: none;
    box-shadow: var(--shadow-teal);
    padding: .72rem 1.6rem;
}
.btn-teal:hover { color:#04211C; transform: translateY(-2px); box-shadow: 0 18px 48px rgba(22,199,169,.42); filter: brightness(1.05); }
.btn-ghost {
    background: rgba(255,255,255,.03); color: var(--text);
    border: 1px solid var(--card-border-2); padding: .72rem 1.5rem;
}
.btn-ghost:hover { background: rgba(255,255,255,.07); color:#fff; border-color: var(--teal); }
.btn-outline-teal { background: transparent; color: var(--teal); border: 1.5px solid var(--teal); padding:.7rem 1.5rem; }
.btn-outline-teal:hover { background: var(--teal); color:#04211C; }
.btn-lg { padding: .95rem 2.1rem; font-size: 1.05rem; }
.btn-sm { padding: .45rem 1.1rem; font-size: .85rem; }

/* ============================================================
   NAVBAR
   ============================================================ */
.tu-navbar {
    background: rgba(7,11,16,.72);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--card-border);
    padding: .7rem 0;
    transition: background .25s;
}
.tu-navbar .navbar-brand { display:flex; align-items:center; }
.tu-logo { height: 40px; width:auto; display:block; }
.tu-navbar .nav-link {
    color: var(--text-2); font-weight: 600; font-size: .96rem;
    padding: .5rem .35rem !important; margin: 0 .55rem; position: relative;
}
.tu-navbar .nav-link::after {
    content:''; position:absolute; left:.35rem; right:.35rem; bottom:.15rem; height:2px; border-radius:2px;
    background: var(--teal); transform: scaleX(0); transform-origin:left; transition: transform .22s ease;
}
.tu-navbar .nav-link:hover, .tu-navbar .nav-link.active { color: #fff; }
.tu-navbar .nav-link:hover::after, .tu-navbar .nav-link.active::after { transform: scaleX(1); }
.navbar-toggler { border:1px solid var(--card-border-2); }
.navbar-toggler-icon { filter: invert(1) grayscale(1) brightness(1.6); }
.nav-dropdown-menu {
    background: var(--panel); border:1px solid var(--card-border); border-radius: var(--radius);
    box-shadow: var(--shadow-md); padding:.5rem;
}
.nav-dropdown-menu .dropdown-item { color: var(--text-2); border-radius:8px; padding:.5rem .75rem; font-size:.9rem; }
.nav-dropdown-menu .dropdown-item:hover { background: var(--teal-soft); color:#fff; }

/* ============================================================
   HERO
   ============================================================ */
.hero {
    position: relative; overflow: hidden;
    padding: 120px 0 96px;
    background:
      radial-gradient(1100px 520px at 50% -10%, rgba(22,199,169,.16), transparent 60%),
      linear-gradient(180deg, #070B10 0%, #0A121A 100%);
}
.hero .container { position: relative; z-index: 2; }
.hero-badge-row { display:flex; justify-content:center; gap:.5rem; flex-wrap:wrap; margin-bottom:1.4rem; }
.hero h1 {
    font-size: clamp(2.3rem, 6vw, 4.1rem);
    line-height: 1.05; font-weight: 800; margin-bottom: 1.2rem;
}
.hero .hero-sub { font-size: clamp(1.05rem,2.2vw,1.3rem); color: var(--text-2); max-width: 680px; margin: 0 auto 1rem; }
.hero .hero-tag { color: var(--teal); font-weight:700; font-family:var(--font-display); }
.hero-cta { display:flex; gap:.9rem; justify-content:center; flex-wrap:wrap; margin-top: 1.9rem; }
.hero-trust { margin-top: 2.4rem; color: var(--muted); font-size:.85rem; }

/* mini "ticker" del hero */
.ticker { display:flex; gap:1.6rem; justify-content:center; flex-wrap:wrap; margin-top:2.2rem; }
.ticker-item { display:flex; align-items:center; gap:.5rem; color:var(--text-2); font-size:.92rem; font-variant-numeric: tabular-nums; }
.ticker-item .up { color: var(--up); font-weight:700; }
.ticker-item .down { color: var(--down); font-weight:700; }
.ticker-item .sym { color: var(--muted); font-weight:600; }

/* ============================================================
   PAGE HERO (cabecera interior)
   ============================================================ */
.page-hero {
    position: relative; overflow: hidden;
    padding: 96px 0 56px; text-align: center;
    background:
      radial-gradient(900px 420px at 50% -20%, rgba(22,199,169,.14), transparent 60%),
      var(--bg);
    border-bottom: 1px solid var(--card-border);
}
.page-hero .container { position:relative; z-index:2; }
.page-hero h1 { font-size: clamp(2rem, 4.6vw, 3rem); margin: 1rem 0 .8rem; font-weight:800; }
.page-hero p { color: var(--text-2); max-width: 640px; margin: 0 auto; font-size:1.08rem; }

/* ============================================================
   SECTION HEADERS
   ============================================================ */
.sec-head { text-align:center; max-width: 720px; margin: 0 auto 3rem; }
.sec-head h2 { font-size: clamp(1.7rem, 3.6vw, 2.5rem); font-weight:800; margin:.9rem 0 .7rem; }
.sec-head p { color: var(--text-2); font-size:1.05rem; margin:0; }

/* ============================================================
   TARJETAS GENÉRICAS
   ============================================================ */
.tu-card {
    background: linear-gradient(180deg, var(--panel) 0%, rgba(15,23,32,.6) 100%);
    border: 1px solid var(--card-border);
    border-radius: var(--radius-lg);
    padding: 1.7rem;
    height: 100%;
    transition: transform .22s ease, border-color .22s, box-shadow .22s;
    position: relative;
}
.tu-card:hover { transform: translateY(-5px); border-color: rgba(22,199,169,.45); box-shadow: var(--shadow-md); }
.tu-card .ic {
    width: 52px; height: 52px; border-radius: 14px;
    display:flex; align-items:center; justify-content:center;
    font-size: 1.4rem; color: var(--teal);
    background: var(--teal-soft); border:1px solid rgba(22,199,169,.25);
    margin-bottom: 1.1rem;
}
.tu-card h3, .tu-card h4, .tu-card h5 { font-size: 1.15rem; margin-bottom:.55rem; }
.tu-card p { color: var(--text-2); font-size:.96rem; margin:0; }
.tu-card .card-link { display:inline-flex; align-items:center; gap:.35rem; margin-top:1rem; font-weight:700; font-size:.9rem; }

/* Tarjeta de característica compacta */
.feature-row { display:flex; gap:1rem; align-items:flex-start; }
.feature-row .ic { flex-shrink:0; }

/* Numeritos de pasos */
.step-num {
    width:42px;height:42px;border-radius:12px;flex-shrink:0;
    display:flex;align-items:center;justify-content:center;
    font-family:var(--font-display);font-weight:800;font-size:1.1rem;
    color:#04211C;background:linear-gradient(135deg,var(--teal),var(--teal-2));
}

/* ============================================================
   STATS
   ============================================================ */
.stats-row { display:grid; grid-template-columns:repeat(4,1fr); gap:1rem; }
.stat { text-align:center; padding:1.4rem 1rem; background:var(--panel); border:1px solid var(--card-border); border-radius:var(--radius-lg); }
.stat .num { font-family:var(--font-display); font-weight:800; font-size:2.2rem; line-height:1; color:var(--teal); }
.stat .lbl { color:var(--muted); font-size:.85rem; margin-top:.5rem; }
@media(max-width:767px){ .stats-row{ grid-template-columns:repeat(2,1fr);} }

/* ============================================================
   BLOG CARDS
   ============================================================ */
.blog-card {
    background: var(--panel); border:1px solid var(--card-border);
    border-radius: var(--radius-lg); overflow:hidden; height:100%;
    display:flex; flex-direction:column; transition: transform .22s, border-color .22s, box-shadow .22s;
}
.blog-card:hover { transform: translateY(-5px); border-color: rgba(22,199,169,.45); box-shadow: var(--shadow-md); }
.blog-card .cover { display:block; height:180px; overflow:hidden; position:relative; background:var(--bg-2); }
.blog-card .cover img { width:100%; height:100%; object-fit:cover; transition:transform .4s; }
.blog-card:hover .cover img { transform: scale(1.05); }
.blog-card .cat {
    position:absolute; top:.75rem; left:.75rem; z-index:2;
    background: rgba(7,11,16,.72); backdrop-filter: blur(6px);
    color: var(--mint); font-size:.72rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase;
    padding:.3rem .7rem; border-radius:100px; border:1px solid rgba(22,199,169,.3);
}
.blog-card .body { padding: 1.2rem 1.3rem 1.4rem; display:flex; flex-direction:column; flex:1; }
.blog-card .meta { color: var(--muted); font-size:.8rem; margin-bottom:.5rem; display:flex; gap:.9rem; }
.blog-card h3 { font-size: 1.08rem; line-height:1.32; margin-bottom:.55rem; }
.blog-card h3 a { color: var(--text); }
.blog-card h3 a:hover { color: var(--teal); }
.blog-card p { color: var(--text-2); font-size:.9rem; margin-bottom:1rem; flex:1; }
.blog-card .readmore { font-weight:700; font-size:.86rem; display:inline-flex; align-items:center; gap:.35rem; }

/* Featured (grande) */
.blog-feature { display:grid; grid-template-columns: 1.05fr .95fr; gap:0; background:var(--panel); border:1px solid var(--card-border); border-radius:var(--radius-xl); overflow:hidden; }
.blog-feature .cover { min-height:320px; }
.blog-feature .cover img { width:100%; height:100%; object-fit:cover; }
.blog-feature .body { padding: 2.2rem; display:flex; flex-direction:column; justify-content:center; }
.blog-feature h2 { font-size: clamp(1.4rem,2.6vw,2rem); line-height:1.18; margin:.6rem 0 .8rem; }
.blog-feature h2 a { color:var(--text); }
.blog-feature h2 a:hover { color: var(--teal); }
@media(max-width:900px){ .blog-feature{ grid-template-columns:1fr; } .blog-feature .cover{ min-height:220px; } }

/* ============================================================
   SIDEBAR (artículo)
   ============================================================ */
.aside-card { background:var(--panel); border:1px solid var(--card-border); border-radius:var(--radius-lg); padding:1.4rem; margin-bottom:1.4rem; }
.aside-card h5 { font-size:1rem; margin-bottom:1rem; display:flex; align-items:center; gap:.5rem; }
.aside-post { display:flex; flex-direction:column; padding:.6rem 0; border-bottom:1px solid var(--card-border); }
.aside-post:last-child { border-bottom:0; }
.aside-post__title { color:var(--text-2); font-size:.9rem; font-weight:600; line-height:1.35; }
.aside-post:hover .aside-post__title { color: var(--teal); }
.aside-post__date { color:var(--muted); font-size:.75rem; margin-top:.2rem; }
.aside-cta { background: linear-gradient(150deg, rgba(22,199,169,.16), rgba(15,23,32,.4)); border:1px solid rgba(22,199,169,.3); border-radius:var(--radius-lg); padding:1.5rem; margin-bottom:1.4rem; }
.aside-cta h5 { font-size:1.1rem; margin-bottom:.5rem; }
.aside-cta p { color:var(--text-2); font-size:.9rem; }
.archive-link { display:flex; justify-content:space-between; align-items:center; padding:.45rem .6rem; border-radius:8px; color:var(--text-2); font-size:.88rem; }
.archive-link:hover, .archive-link.active { background: var(--teal-soft); color:#fff; }
.archive-link .badge { background: rgba(255,255,255,.06); color:var(--muted); font-weight:600; }

/* ============================================================
   TIPOGRAFÍA DEL ARTÍCULO
   ============================================================ */
.article-body { font-size: 1.08rem; color: var(--text-2); line-height: 1.8; }
.article-body > *:first-child { margin-top:0; }
.article-body h2 { font-size: 1.6rem; color:#fff; margin: 2.4rem 0 1rem; padding-top:.4rem; }
.article-body h3 { font-size: 1.28rem; color:#fff; margin: 1.9rem 0 .8rem; }
.article-body p { margin: 0 0 1.15rem; }
.article-body a { color: var(--teal); text-decoration: underline; text-underline-offset: 3px; }
.article-body ul, .article-body ol { margin: 0 0 1.3rem; padding-left: 1.3rem; }
.article-body li { margin-bottom: .5rem; }
.article-body li::marker { color: var(--teal); }
.article-body strong { color: #fff; }
.article-body blockquote {
    margin: 1.8rem 0; padding: 1.1rem 1.4rem; border-left: 3px solid var(--teal);
    background: var(--teal-soft); border-radius: 0 12px 12px 0; color: var(--text);
}
.article-body img { border-radius: 14px; margin: 1.6rem 0; border:1px solid var(--card-border); }
.article-body .callout {
    background: var(--panel); border:1px solid var(--card-border-2); border-radius:14px;
    padding: 1.3rem 1.5rem; margin: 1.8rem 0;
}
.article-body .callout strong { color: var(--teal); }
.article-body table { width:100%; border-collapse:collapse; margin:1.6rem 0; font-size:.95rem; }
.article-body th, .article-body td { border:1px solid var(--card-border); padding:.7rem .9rem; text-align:left; }
.article-body th { background: var(--panel); color:#fff; }

/* Chips / tags */
.chip { display:inline-block; background: rgba(255,255,255,.05); border:1px solid var(--card-border); color:var(--text-2); font-size:.78rem; font-weight:600; padding:.28rem .8rem; border-radius:100px; }
a.chip:hover { border-color: var(--teal); color: var(--teal); }

/* ============================================================
   CTA BLOCK
   ============================================================ */
.cta-block {
    position:relative; overflow:hidden;
    background: linear-gradient(135deg, #0C1620 0%, #0A1F1B 100%);
    border: 1px solid rgba(22,199,169,.3);
    border-radius: var(--radius-xl);
    padding: 3rem;
    text-align:center;
}
.cta-block::before { content:''; position:absolute; width:420px;height:420px; top:-180px; right:-120px; background: radial-gradient(circle, var(--teal-glow), transparent 70%); filter: blur(30px); }
.cta-block .container-inner { position:relative; z-index:2; }
.cta-block h2 { font-size: clamp(1.6rem,3vw,2.3rem); font-weight:800; }
.cta-block p { color: var(--text-2); max-width:560px; margin:.8rem auto 1.6rem; }

/* ============================================================
   TABLA COMPARATIVA PROP FIRMS
   ============================================================ */
.compare-toolbar { display:flex; gap:.6rem; flex-wrap:wrap; align-items:center; margin-bottom:1.4rem; }
.filter-chip {
    background: rgba(255,255,255,.04); border:1px solid var(--card-border-2); color:var(--text-2);
    padding:.45rem 1rem; border-radius:100px; font-size:.85rem; font-weight:600; cursor:pointer; transition:all .18s;
}
.filter-chip:hover { color:#fff; border-color:var(--teal); }
.filter-chip.active { background: var(--teal); color:#04211C; border-color:var(--teal); }
.compare-wrap { overflow-x:auto; border:1px solid var(--card-border); border-radius:var(--radius-lg); }
.compare-table { width:100%; border-collapse:collapse; min-width: 940px; font-size:.9rem; }
.compare-table thead th {
    background: var(--panel); color:var(--muted); font-family:var(--font-main); font-weight:700;
    font-size:.75rem; letter-spacing:.06em; text-transform:uppercase; text-align:left;
    padding:.9rem 1rem; border-bottom:1px solid var(--card-border-2); position:sticky; top:0;
}
.compare-table tbody td { padding:1rem; border-bottom:1px solid var(--card-border); color:var(--text-2); vertical-align:middle; }
.compare-table tbody tr:hover { background: rgba(22,199,169,.05); }
.compare-table tbody tr:last-child td { border-bottom:0; }
.firm-cell { display:flex; align-items:center; gap:.8rem; }
.firm-logo { width:40px;height:40px;border-radius:11px;display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-weight:800;color:#04211C;font-size:.95rem;flex-shrink:0; }
.firm-name { color:#fff; font-weight:700; font-size:.98rem; }
.firm-loc { color:var(--muted); font-size:.76rem; }
.rating { color:var(--warn); font-weight:700; }
.rating .cnt { color:var(--muted); font-weight:500; font-size:.78rem; }
.pill { display:inline-block; padding:.2rem .6rem; border-radius:100px; font-size:.75rem; font-weight:700; }
.pill-yes { background: rgba(47,209,128,.14); color: var(--up); border:1px solid rgba(47,209,128,.3); }
.pill-no  { background: rgba(255,107,107,.12); color: var(--down); border:1px solid rgba(255,107,107,.28); }
.pill-plat { background: rgba(255,255,255,.05); color:var(--text-2); border:1px solid var(--card-border); margin:.1rem; }
.badge-tu { background: linear-gradient(135deg,var(--teal),var(--teal-2)); color:#04211C; font-weight:800; font-size:.68rem; padding:.18rem .5rem; border-radius:6px; letter-spacing:.02em; }
.compare-note { color:var(--muted); font-size:.82rem; margin-top:1rem; }

/* ============================================================
   VÍDEOS
   ============================================================ */
.video-card { background:var(--panel); border:1px solid var(--card-border); border-radius:var(--radius-lg); overflow:hidden; transition:transform .22s,border-color .22s; height:100%; }
.video-card:hover { transform:translateY(-4px); border-color:rgba(22,199,169,.4); }
.video-thumb { position:relative; aspect-ratio:16/9; background: linear-gradient(135deg,#0d1a24,#0a1512); display:flex;align-items:center;justify-content:center; overflow:hidden; }
.video-thumb img { width:100%;height:100%;object-fit:cover; }
.video-play { position:absolute; width:56px;height:56px;border-radius:50%; background:rgba(22,199,169,.92); display:flex;align-items:center;justify-content:center; color:#04211C; font-size:1.4rem; box-shadow:0 8px 26px rgba(0,0,0,.5); transition:transform .2s; }
.video-card:hover .video-play { transform:scale(1.1); }
.video-dur { position:absolute; bottom:.6rem; right:.6rem; background:rgba(0,0,0,.7); color:#fff; font-size:.72rem; padding:.15rem .5rem; border-radius:6px; }
.video-card .vb { padding:1.1rem 1.2rem; }
.video-card .vb h4 { font-size:1rem; margin-bottom:.35rem; }
.video-card .vb p { color:var(--muted); font-size:.82rem; margin:0; }

/* ============================================================
   TIMELINE FORMACIÓN
   ============================================================ */
.roadmap { position:relative; max-width:820px; margin:0 auto; padding-left:0; }
.roadmap::before { content:''; position:absolute; left:26px; top:8px; bottom:8px; width:2px; background:linear-gradient(180deg,var(--teal),transparent); }
.roadmap-step { position:relative; padding:0 0 2.2rem 4.5rem; }
.roadmap-step .dot { position:absolute; left:12px; top:2px; width:30px;height:30px;border-radius:50%; background:var(--panel); border:2px solid var(--teal); display:flex;align-items:center;justify-content:center; color:var(--teal); font-weight:800; font-size:.85rem; font-family:var(--font-display); z-index:2; }
.roadmap-step h4 { font-size:1.15rem; margin-bottom:.4rem; }
.roadmap-step p { color:var(--text-2); font-size:.96rem; margin:0; }
.roadmap-step .lvl { color:var(--teal); font-size:.75rem; font-weight:700; text-transform:uppercase; letter-spacing:.08em; }

/* ============================================================
   TESTIMONIOS
   ============================================================ */
.testi-card { background:var(--panel); border:1px solid var(--card-border); border-radius:var(--radius-lg); padding:1.6rem; height:100%; }
.testi-card .stars { color:var(--warn); margin-bottom:.7rem; letter-spacing:2px; }
.testi-card p { color:var(--text); font-size:.98rem; line-height:1.6; }
.testi-who { display:flex; align-items:center; gap:.8rem; margin-top:1.1rem; }
.testi-av { width:44px;height:44px;border-radius:50%; background:linear-gradient(135deg,var(--teal),var(--teal-3)); color:#04211C; font-weight:800; display:flex;align-items:center;justify-content:center; font-family:var(--font-display); }
.testi-who .n { color:#fff; font-weight:700; font-size:.92rem; }
.testi-who .r { color:var(--muted); font-size:.78rem; }

/* ============================================================
   INDICADORES (descargables)
   ============================================================ */
.ind-card { background:var(--panel); border:1px solid var(--card-border); border-radius:var(--radius-lg); overflow:hidden; height:100%; display:flex; flex-direction:column; transition:transform .22s,border-color .22s; }
.ind-card:hover { transform:translateY(-4px); border-color:rgba(22,199,169,.45); }
.ind-head { padding:1.3rem 1.4rem .6rem; }
.ind-chart { height:120px; margin:0 1.4rem; border-radius:12px; background:linear-gradient(180deg,rgba(22,199,169,.08),transparent); border:1px solid var(--card-border); position:relative; overflow:hidden; }
.ind-body { padding:1rem 1.4rem 1.4rem; display:flex; flex-direction:column; flex:1; }
.ind-tags { display:flex; gap:.4rem; flex-wrap:wrap; margin-bottom:.7rem; }
.ind-body h4 { font-size:1.1rem; margin-bottom:.4rem; }
.ind-body p { color:var(--text-2); font-size:.9rem; flex:1; }
.ind-meta { display:flex; justify-content:space-between; align-items:center; color:var(--muted); font-size:.8rem; margin-top:.8rem; }

/* ============================================================
   EVENTOS
   ============================================================ */
.event-item { display:grid; grid-template-columns: 92px 1fr auto; gap:1.3rem; align-items:center; background:var(--panel); border:1px solid var(--card-border); border-radius:var(--radius-lg); padding:1.2rem 1.4rem; transition:border-color .2s; }
.event-item:hover { border-color:rgba(22,199,169,.4); }
.event-date { text-align:center; background:var(--teal-soft); border:1px solid rgba(22,199,169,.3); border-radius:12px; padding:.6rem; }
.event-date .d { font-family:var(--font-display); font-weight:800; font-size:1.7rem; color:var(--teal); line-height:1; }
.event-date .m { color:var(--text-2); font-size:.74rem; text-transform:uppercase; letter-spacing:.08em; margin-top:.2rem; }
.event-body h4 { font-size:1.1rem; margin-bottom:.3rem; }
.event-body .info { color:var(--muted); font-size:.85rem; display:flex; gap:1rem; flex-wrap:wrap; }
.event-type { font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em; padding:.25rem .6rem; border-radius:100px; }
.ev-online { background: rgba(22,199,169,.14); color:var(--teal); border:1px solid rgba(22,199,169,.3); }
.ev-presencial { background: rgba(182,242,74,.12); color:var(--lime); border:1px solid rgba(182,242,74,.3); }
@media(max-width:640px){ .event-item{ grid-template-columns: 64px 1fr; } .event-item .event-cta{ grid-column:1/-1; } }

/* ============================================================
   FAQ
   ============================================================ */
.faq-item { border:1px solid var(--card-border); border-radius:var(--radius); margin-bottom:.8rem; overflow:hidden; background:var(--panel); }
.faq-q { padding:1.1rem 1.3rem; font-weight:700; color:#fff; cursor:pointer; display:flex; justify-content:space-between; align-items:center; font-family:var(--font-display); }
.faq-q .ico { color:var(--teal); transition:transform .2s; }
.faq-item.open .faq-q .ico { transform:rotate(45deg); }
.faq-a { padding:0 1.3rem; max-height:0; overflow:hidden; transition:max-height .3s, padding .3s; color:var(--text-2); }
.faq-item.open .faq-a { padding:0 1.3rem 1.2rem; max-height:400px; }

/* ============================================================
   FORMULARIO
   ============================================================ */
.form-control, .form-select {
    background: var(--panel); border:1px solid var(--card-border-2); color:var(--text);
    border-radius: 12px; padding:.75rem 1rem;
}
.form-control:focus, .form-select:focus { background: var(--panel); color:#fff; border-color:var(--teal); box-shadow:0 0 0 3px var(--teal-soft); }
.form-control::placeholder { color: var(--muted); }
.form-label { color: var(--text-2); font-weight:600; font-size:.9rem; margin-bottom:.4rem; }

/* ============================================================
   PARTNER / TRADESOFT STRIP
   ============================================================ */
.partner-strip { background: var(--bg-2); border-top:1px solid var(--card-border); border-bottom:1px solid var(--card-border); }
.partner-strip .powered { color: var(--muted); font-size:.85rem; letter-spacing:.03em; }
.partner-logos { display:flex; gap:2.4rem; align-items:center; flex-wrap:wrap; justify-content:center; opacity:.85; }
.partner-logos span { font-family:var(--font-display); font-weight:700; color:var(--text-2); font-size:1.05rem; }

/* ============================================================
   FOOTER
   ============================================================ */
.tu-footer { background: #05080C; border-top:1px solid var(--card-border); padding: 68px 0 28px; }
.tu-footer .foot-logo { height:38px; margin-bottom:1rem; }
.tu-footer p.desc { color: var(--muted); font-size:.9rem; line-height:1.7; max-width:320px; }
.footer-title { color:#fff; font-family:var(--font-display); font-weight:700; font-size:.95rem; margin-bottom:1rem; }
.footer-links { list-style:none; padding:0; margin:0; }
.footer-links li { margin-bottom:.55rem; }
.footer-links a { color: var(--text-2); font-size:.9rem; }
.footer-links a:hover { color: var(--teal); }
.footer-social { display:flex; gap:.6rem; margin-top:1.2rem; }
.footer-social a { width:38px;height:38px;border-radius:10px; background:rgba(255,255,255,.04); border:1px solid var(--card-border); display:flex;align-items:center;justify-content:center; color:var(--text-2); font-size:1.05rem; }
.footer-social a:hover { background:var(--teal-soft); color:var(--teal); border-color:var(--teal); }
.footer-bottom { border-top:1px solid var(--card-border); margin-top:2.6rem; padding-top:1.5rem; display:flex; justify-content:space-between; flex-wrap:wrap; gap:1rem; }
.footer-bottom, .footer-bottom a { color: var(--muted); font-size:.82rem; }
.footer-bottom a:hover { color: var(--teal); }
.footer-legal { display:flex; gap:1.2rem; flex-wrap:wrap; }
.risk-note { color:var(--muted); font-size:.76rem; line-height:1.6; margin-top:1.4rem; padding:1rem 1.2rem; background:rgba(255,255,255,.02); border:1px solid var(--card-border); border-radius:12px; }

/* ============================================================
   LEARN CTA (dentro de artículos)
   ============================================================ */
.learn-cta {
    display:flex; align-items:center; gap:1.3rem; flex-wrap:wrap;
    background: linear-gradient(135deg, rgba(22,199,169,.16), rgba(15,23,32,.5));
    border:1px solid rgba(22,199,169,.32); border-radius: var(--radius-lg);
    padding:1.6rem 1.8rem; margin:2.4rem 0;
}
.learn-cta__ic { width:54px;height:54px;border-radius:14px;flex-shrink:0; display:flex;align-items:center;justify-content:center; font-size:1.5rem; color:#04211C; background:linear-gradient(135deg,var(--teal),var(--teal-2)); }
.learn-cta__body { flex:1; min-width:220px; }
.learn-cta__body h3 { font-size:1.2rem; margin-bottom:.3rem; }
.learn-cta__body p { color:var(--text-2); font-size:.95rem; margin:0; }

/* ============================================================
   TRADESOFT BAND (funnel sutil)
   ============================================================ */
.ts-band {
    position:relative; overflow:hidden;
    background: linear-gradient(120deg, #08131A 0%, #0A1B18 100%);
    border:1px solid var(--card-border); border-left:3px solid var(--teal);
    border-radius: 14px; padding:1.4rem 1.6rem; margin:2rem 0;
}
.ts-band__tag { color:var(--teal); font-size:.74rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase; margin-bottom:.5rem; }
.ts-band__text { color:var(--text-2); font-size:.96rem; margin:0 0 .8rem; line-height:1.65; }
.ts-band__link { font-weight:700; font-size:.9rem; display:inline-flex; align-items:center; }

/* ============================================================
   RESOURCE HUB (home)
   ============================================================ */
.res-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:1rem; }
@media(max-width:991px){ .res-grid{ grid-template-columns:repeat(2,1fr);} }
@media(max-width:520px){ .res-grid{ grid-template-columns:1fr;} }
.res-tile {
    display:flex; flex-direction:column; gap:.5rem;
    background: var(--panel); border:1px solid var(--card-border); border-radius: var(--radius-lg);
    padding:1.3rem; transition: transform .2s, border-color .2s, background .2s; height:100%;
}
.res-tile:hover { transform:translateY(-4px); border-color:rgba(22,199,169,.45); background: var(--panel-2); }
.res-tile .ic { width:46px;height:46px;border-radius:12px; display:flex;align-items:center;justify-content:center; font-size:1.25rem; color:var(--teal); background:var(--teal-soft); border:1px solid rgba(22,199,169,.25); }
.res-tile h4 { font-size:1.02rem; margin:.3rem 0 0; }
.res-tile p { color:var(--muted); font-size:.85rem; margin:0; flex:1; }
.res-tile .tag { align-self:flex-start; font-size:.68rem; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--mint); background:rgba(22,199,169,.1); border:1px solid rgba(22,199,169,.25); padding:.15rem .5rem; border-radius:100px; }

/* Itinerarios (nuevo/avanzado) */
.track-card { background: linear-gradient(180deg,var(--panel),rgba(15,23,32,.5)); border:1px solid var(--card-border); border-radius:var(--radius-xl); padding:2rem; height:100%; position:relative; overflow:hidden; }
.track-card::before { content:''; position:absolute; top:-60px; right:-60px; width:200px;height:200px; background:radial-gradient(circle,var(--teal-glow),transparent 70%); opacity:.5; }
.track-card .lvl { display:inline-block; font-size:.72rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; padding:.3rem .8rem; border-radius:100px; margin-bottom:1rem; }
.track-new { color:var(--teal); background:rgba(22,199,169,.12); border:1px solid rgba(22,199,169,.3); }
.track-adv { color:var(--lime); background:rgba(182,242,74,.1); border:1px solid rgba(182,242,74,.3); }
.track-card h3 { font-size:1.4rem; margin-bottom:.6rem; }
.track-list { list-style:none; padding:0; margin:1.2rem 0 0; }
.track-list li { display:flex; align-items:center; gap:.6rem; padding:.5rem 0; border-bottom:1px solid var(--card-border); color:var(--text-2); font-size:.94rem; }
.track-list li:last-child { border-bottom:0; }
.track-list li i { color:var(--teal); }

/* Course cards */
.course-card { background:var(--panel); border:1px solid var(--card-border); border-radius:var(--radius-lg); overflow:hidden; height:100%; display:flex; flex-direction:column; transition:transform .2s,border-color .2s; }
.course-card:hover { transform:translateY(-4px); border-color:rgba(22,199,169,.45); }
.course-top { padding:1.3rem 1.4rem; border-bottom:1px solid var(--card-border); display:flex; justify-content:space-between; align-items:flex-start; }
.course-lvl { font-size:.7rem; font-weight:800; text-transform:uppercase; letter-spacing:.05em; padding:.2rem .6rem; border-radius:100px; }
.course-body { padding:1.2rem 1.4rem; display:flex; flex-direction:column; flex:1; }
.course-body h4 { font-size:1.1rem; margin-bottom:.5rem; }
.course-body p { color:var(--text-2); font-size:.9rem; flex:1; }
.course-meta { display:flex; gap:1rem; color:var(--muted); font-size:.8rem; margin-top:.9rem; }
.course-progress { height:6px; border-radius:100px; background:rgba(255,255,255,.06); overflow:hidden; margin-top:.9rem; }
.course-progress span { display:block; height:100%; background:linear-gradient(90deg,var(--teal),var(--mint)); }

/* Glosario mini */
.glos-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:.9rem; }
@media(max-width:800px){ .glos-grid{ grid-template-columns:1fr; } }
.glos-item { background:var(--panel); border:1px solid var(--card-border); border-radius:12px; padding:1rem 1.2rem; }
.glos-item dt { color:#fff; font-weight:700; font-family:var(--font-display); font-size:.98rem; margin-bottom:.2rem; }
.glos-item dd { color:var(--muted); font-size:.85rem; margin:0; }

/* ---------- Hero: gratis para siempre ---------- */
.hero-free { display:inline-flex; align-items:center; gap:.6rem; margin-top:1.6rem; padding:.55rem 1.1rem; border-radius:100px;
    background:rgba(22,199,169,.1); border:1px solid rgba(22,199,169,.3); color:#D7E2EA; font-size:.9rem; }
.hero-free strong { color:#fff; }
.hero-free .spark { color:var(--teal); display:inline-flex; }

/* ---------- NOTICIAS (layout tipo periódico) ---------- */
.news-flag { display:inline-flex; align-items:center; gap:.5rem; color:var(--down); font-weight:800; font-size:.74rem; letter-spacing:.08em; text-transform:uppercase; margin-bottom:.7rem; }
.live-dot { width:8px;height:8px;border-radius:50%;background:var(--down); box-shadow:0 0 0 4px rgba(255,107,107,.2); animation:pulse 1.8s infinite; }
.news-hero { display:grid; grid-template-columns:1.15fr 1fr; gap:0; background:var(--panel); border:1px solid var(--card-border); border-radius:var(--radius-xl); overflow:hidden; margin-bottom:2.4rem; }
.news-hero:hover { border-color:rgba(22,199,169,.4); }
.news-hero__media { min-height:320px; overflow:hidden; }
.news-hero__media img { width:100%; height:100%; object-fit:cover; transition:transform .5s; }
.news-hero:hover .news-hero__media img { transform:scale(1.04); }
.news-hero__body { padding:2.4rem; display:flex; flex-direction:column; justify-content:center; }
.news-hero__body h2 { font-size:clamp(1.5rem,2.8vw,2.2rem); line-height:1.15; margin-bottom:.8rem; color:#fff; }
.news-hero:hover .news-hero__body h2 { color:var(--teal); }
.news-hero__body p { color:var(--text-2); }
@media(max-width:860px){ .news-hero{ grid-template-columns:1fr; } .news-hero__media{ min-height:200px; } }

.news-list { display:flex; flex-direction:column; gap:0; border:1px solid var(--card-border); border-radius:var(--radius-lg); overflow:hidden; }
.news-item { display:grid; grid-template-columns:150px 1fr 40px; gap:1.4rem; align-items:center; padding:1.2rem 1.4rem; border-bottom:1px solid var(--card-border); transition:background .18s; }
.news-item:last-child { border-bottom:0; }
.news-item:hover { background:rgba(22,199,169,.05); }
.news-item__media { width:150px; height:92px; border-radius:12px; overflow:hidden; }
.news-item__media img { width:100%; height:100%; object-fit:cover; }
.news-item__date { color:var(--muted); font-size:.78rem; margin-bottom:.25rem; }
.news-item__body h3 { font-size:1.12rem; margin-bottom:.3rem; color:#fff; line-height:1.3; }
.news-item:hover .news-item__body h3 { color:var(--teal); }
.news-item__body p { color:var(--text-2); font-size:.9rem; margin:0; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.news-item__arrow { color:var(--muted); font-size:1.1rem; text-align:center; }
.news-item:hover .news-item__arrow { color:var(--teal); }
@media(max-width:640px){ .news-item{ grid-template-columns:84px 1fr; } .news-item__media{ width:84px; height:64px; } .news-item__arrow{ display:none; } .news-item__body p{ -webkit-line-clamp:2; } }

/* ---------- Tagline junto al logo ---------- */
.tu-navbar .navbar-brand { display:flex; align-items:center; gap:.9rem; }
.brand-tag { display:inline-flex; align-items:center; gap:.7rem; color:var(--muted); font-family:var(--font-display); font-weight:600; font-size:.82rem; letter-spacing:.01em; white-space:nowrap; }
.brand-tag__line { width:1px; height:26px; background:linear-gradient(180deg,transparent,var(--card-border-2),transparent); display:inline-block; }
.brand-tag { background:linear-gradient(90deg,var(--mint),var(--teal)); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.brand-tag .brand-tag__line { -webkit-text-fill-color:initial; }
@media(max-width:1100px){ .brand-tag{ display:none; } }

/* ---------- Cinta de cotizaciones en vivo (sin enlaces salientes) ---------- */
.tv-ticker-wrap { background:var(--bg-2); border-bottom:1px solid var(--card-border); min-height:46px; }
.tv-ticker-wrap .tradingview-widget-container { max-width:100%; pointer-events:none; }
/* Panel de mercados: solo lectura, sin navegar a TradingView */
.live-panel { border:1px solid rgba(255,255,255,.05); border-radius:var(--radius-xl); overflow:hidden; background:var(--panel); min-height:480px; }
.live-panel .tradingview-widget-container { pointer-events:none; }
/* Oculta la línea de atribución/enlace que inyecta el widget */
.tv-ticker-wrap .tradingview-widget-copyright, .live-panel .tradingview-widget-copyright { display:none !important; }

/* ============================================================
   v2 · REDISEÑO EDITORIAL PREMIUM
   ============================================================ */

/* Grano sutil global para textura (aleja del look "plano de plantilla") */
body::before {
    content:''; position:fixed; inset:0; z-index:1; pointer-events:none; opacity:.035;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Etiqueta numérica de sección */
.sec-num { display:inline-flex; align-items:center; gap:.6rem; color:var(--muted); font-family:var(--font-display); font-weight:700; font-size:.85rem; letter-spacing:.04em; margin-bottom:1rem; }
.sec-num b { color:var(--teal); }
.sec-num::before { content:''; width:32px; height:1px; background:var(--teal); display:inline-block; }

/* ---------- HERO CON FOTO ---------- */
.hero-photo {
    position:relative; overflow:hidden; min-height:92vh; display:flex; align-items:center;
    padding:120px 0 90px;
    background:#05080C;
}
.hero-photo .hero-bg {
    position:absolute; inset:0; z-index:0;
    background-size:cover; background-position:center;
    filter:saturate(1.05);
}
.hero-photo .hero-bg::after {
    content:''; position:absolute; inset:0;
    background:
      linear-gradient(180deg, rgba(5,8,12,.62) 0%, rgba(5,8,12,.72) 55%, rgba(5,8,12,.96) 100%),
      radial-gradient(1000px 500px at 20% 30%, rgba(22,199,169,.20), transparent 60%);
}
.hero-photo .container { position:relative; z-index:2; }
.hero-photo .hero-kicker { display:inline-flex; align-items:center; gap:.6rem; color:var(--mint); font-weight:700; font-size:.8rem; letter-spacing:.16em; text-transform:uppercase; margin-bottom:1.4rem; }
.hero-photo .hero-kicker .dot { width:8px;height:8px;border-radius:50%; background:var(--teal); box-shadow:0 0 0 4px rgba(22,199,169,.25); animation:pulse 2s infinite; }
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.4} }
.hero-photo h1 { font-size:clamp(2.6rem, 7vw, 5.4rem); line-height:.98; font-weight:800; letter-spacing:-.03em; margin-bottom:1.4rem; max-width:15ch; }
.hero-photo h1 em { font-style:normal; color:var(--teal); }
.hero-photo .hero-lead { font-size:clamp(1.1rem,2vw,1.4rem); color:#D7E2EA; max-width:620px; margin-bottom:2.2rem; }
.hero-photo .hero-cta { justify-content:flex-start; }
.hero-photo .hero-pills { display:flex; gap:.6rem; flex-wrap:wrap; margin-top:2.2rem; }
.hero-pills a { display:inline-flex; align-items:center; gap:.4rem; background:rgba(255,255,255,.06); backdrop-filter:blur(8px); border:1px solid rgba(255,255,255,.16); color:#EAF2F6; padding:.5rem 1rem; border-radius:100px; font-size:.85rem; font-weight:600; transition:all .2s; }
.hero-pills a:hover { background:var(--teal-soft); border-color:var(--teal); color:#fff; }

/* Barra de stats flotante que solapa el hero */
.hero-statbar {
    position:relative; z-index:3; margin-top:-46px;
    background:rgba(15,23,32,.86); backdrop-filter:blur(14px);
    border:1px solid var(--card-border-2); border-radius:var(--radius-xl);
    box-shadow:var(--shadow-md);
    display:grid; grid-template-columns:repeat(4,1fr);
}
.hero-statbar .hs { padding:1.6rem 1.4rem; text-align:center; border-right:1px solid var(--card-border); }
.hero-statbar .hs:last-child { border-right:0; }
.hero-statbar .hs .n { font-family:var(--font-display); font-weight:800; font-size:1.9rem; color:#fff; line-height:1; }
.hero-statbar .hs .n span { color:var(--teal); }
.hero-statbar .hs .l { color:var(--muted); font-size:.82rem; margin-top:.4rem; }
@media(max-width:767px){ .hero-statbar{ grid-template-columns:repeat(2,1fr);} .hero-statbar .hs:nth-child(2){border-right:0} }

/* ---------- MARQUEE ---------- */
.marquee { overflow:hidden; border-top:1px solid var(--card-border); border-bottom:1px solid var(--card-border); background:var(--bg-2); padding:1rem 0; }
.marquee__track { display:flex; gap:3rem; white-space:nowrap; width:max-content; animation:scroll 32s linear infinite; }
.marquee__track span { color:var(--text-2); font-family:var(--font-display); font-weight:600; font-size:1.05rem; display:inline-flex; align-items:center; gap:.6rem; }
.marquee__track span i { color:var(--teal); }
@keyframes scroll { from{transform:translateX(0)} to{transform:translateX(-50%)} }

/* ---------- BLOQUE EDITORIAL (imagen + texto) ---------- */
.editorial { display:grid; grid-template-columns:1fr 1fr; gap:3.5rem; align-items:center; }
.editorial.rev .editorial__media { order:2; }
.editorial__media { position:relative; border-radius:var(--radius-xl); overflow:hidden; aspect-ratio:4/3.2; border:1px solid var(--card-border); }
.editorial__media img { width:100%; height:100%; object-fit:cover; }
.editorial__media .badge-float { position:absolute; left:1.2rem; bottom:1.2rem; background:rgba(7,11,16,.8); backdrop-filter:blur(8px); border:1px solid var(--card-border-2); border-radius:14px; padding:.8rem 1.1rem; display:flex; align-items:center; gap:.7rem; }
.editorial__media .badge-float .ic { width:38px;height:38px;border-radius:10px; background:var(--teal); color:#04211C; display:flex;align-items:center;justify-content:center; font-size:1.1rem; }
.editorial__media .badge-float .t { color:#fff; font-weight:700; font-size:.9rem; } .editorial__media .badge-float .s { color:var(--muted); font-size:.76rem; }
.editorial h2 { font-size:clamp(1.8rem,3.6vw,2.7rem); font-weight:800; line-height:1.1; letter-spacing:-.02em; margin-bottom:1.1rem; }
.editorial p { color:var(--text-2); font-size:1.05rem; }
.check-list { list-style:none; padding:0; margin:1.4rem 0 0; display:grid; gap:.7rem; }
.check-list li { display:flex; gap:.7rem; align-items:flex-start; color:var(--text); }
.check-list li i { color:var(--teal); margin-top:.2rem; }
@media(max-width:860px){ .editorial{ grid-template-columns:1fr; gap:2rem;} .editorial.rev .editorial__media{ order:0;} }

/* ---------- CURRÍCULUM (lo que vas a aprender) ---------- */
.curri { border-top:1px solid var(--card-border); }
.curri__row { display:grid; grid-template-columns:80px 1fr auto; gap:1.5rem; align-items:center; padding:1.6rem 0; border-bottom:1px solid var(--card-border); transition:background .2s; }
.curri__row:hover { background:rgba(22,199,169,.04); }
.curri__num { font-family:var(--font-display); font-weight:800; font-size:2.4rem; color:var(--card-border-2); line-height:1; }
.curri__row:hover .curri__num { color:var(--teal); }
.curri__row h4 { font-size:1.25rem; margin-bottom:.2rem; }
.curri__row p { color:var(--muted); font-size:.95rem; margin:0; }
.curri__tag { color:var(--teal); font-size:.8rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em; white-space:nowrap; }
@media(max-width:640px){ .curri__row{ grid-template-columns:52px 1fr; } .curri__tag{ display:none;} .curri__num{font-size:1.8rem;} }

/* ---------- PLAN PRIMERA SEMANA ---------- */
.week-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:1rem; }
@media(max-width:991px){ .week-grid{ grid-template-columns:repeat(2,1fr);} }
@media(max-width:520px){ .week-grid{ grid-template-columns:1fr;} }
.week-card { background:var(--panel); border:1px solid var(--card-border); border-radius:var(--radius-lg); padding:1.4rem; position:relative; overflow:hidden; height:100%; transition:transform .2s,border-color .2s; }
.week-card:hover { transform:translateY(-4px); border-color:rgba(22,199,169,.4); }
.week-card .day { font-family:var(--font-display); font-weight:800; font-size:.8rem; letter-spacing:.08em; text-transform:uppercase; color:var(--teal); margin-bottom:.6rem; }
.week-card h4 { font-size:1.05rem; margin-bottom:.4rem; }
.week-card p { color:var(--text-2); font-size:.88rem; margin:0; }
.week-card .big { position:absolute; right:-6px; bottom:-18px; font-family:var(--font-display); font-weight:800; font-size:5rem; color:rgba(255,255,255,.03); }

/* ---------- MITOS VS REALIDAD ---------- */
.myth-row { display:grid; grid-template-columns:1fr 1fr; gap:1rem; margin-bottom:1rem; }
.myth, .real { border-radius:var(--radius-lg); padding:1.3rem 1.5rem; border:1px solid var(--card-border); }
.myth { background:rgba(255,107,107,.06); border-color:rgba(255,107,107,.22); }
.real { background:rgba(47,209,128,.06); border-color:rgba(47,209,128,.22); }
.myth .lbl, .real .lbl { font-size:.72rem; font-weight:800; text-transform:uppercase; letter-spacing:.08em; margin-bottom:.5rem; display:flex; align-items:center; gap:.4rem; }
.myth .lbl { color:var(--down); } .real .lbl { color:var(--up); }
.myth p, .real p { margin:0; color:var(--text); font-size:.98rem; }
@media(max-width:700px){ .myth-row{ grid-template-columns:1fr; gap:.5rem;} }

/* ---------- CTA banda con foto ---------- */
.cta-photo { position:relative; overflow:hidden; border-radius:var(--radius-xl); padding:4rem 3rem; text-align:center; border:1px solid var(--card-border-2); }
.cta-photo .cta-bg { position:absolute; inset:0; background-size:cover; background-position:center; z-index:0; }
.cta-photo .cta-bg::after { content:''; position:absolute; inset:0; background:linear-gradient(180deg,rgba(6,12,16,.82),rgba(6,20,17,.92)); }
.cta-photo > * { position:relative; z-index:2; }
.cta-photo h2 { font-size:clamp(1.8rem,3.4vw,2.6rem); font-weight:800; }
.cta-photo p { color:#D7E2EA; max-width:600px; margin:.9rem auto 1.7rem; }

/* imagen de tarjeta blog: rellena aunque falle (fondo) */
.blog-card .cover, .blog-feature .cover { background:linear-gradient(135deg,#0d1a24,#0a1512); }

/* ============================================================
   WHATSAPP FLOAT
   ============================================================ */
.wa-float { position:fixed; bottom:22px; right:22px; width:58px;height:58px;border-radius:50%; background:#25D366; display:flex;align-items:center;justify-content:center; color:#fff; font-size:1.7rem; box-shadow:0 10px 30px rgba(0,0,0,.4); z-index:60; transition:transform .2s; }
.wa-float:hover { transform:scale(1.08); color:#fff; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 991px) {
    .tu-navbar .navbar-collapse { background: var(--panel); border:1px solid var(--card-border); border-radius:var(--radius); margin-top:.7rem; padding:1rem; }
    .tu-navbar .nav-link { margin:0; padding:.6rem .4rem !important; }
    .hero { padding: 92px 0 70px; }
    .section { padding: 62px 0; }
    .cta-block { padding: 2rem 1.4rem; }
}
@media (max-width: 575px) {
    .tu-logo { height:34px; }
    .hero-cta .btn { width:100%; }
}

/* Animación de entrada (progresiva: sin JS el contenido siempre es visible) */
.reveal { opacity:1; transform:none; }
html.js .reveal { opacity:0; transform: translateY(22px); transition: opacity .6s ease, transform .6s ease; }
html.js .reveal.in { opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce) {
  html.js .reveal { opacity:1 !important; transform:none !important; }
}

/* ============================================================
   v3 · REFINAMIENTO "MENOS CAJAS, MÁS EDITORIAL"
   ============================================================ */
:root { --card-border: rgba(255,255,255,.06); --card-border-2: rgba(255,255,255,.1); }

/* Tarjetas: fuera el borde marcado; superficie sutil + elevación en hover */
.tu-card, .course-card, .week-card, .ind-card, .video-card, .testi-card, .aside-card, .track-card {
    border: 1px solid rgba(255,255,255,.05) !important;
    background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.012)) !important;
    box-shadow: none;
}
.tu-card:hover, .course-card:hover, .week-card:hover, .ind-card:hover, .video-card:hover, .track-card:hover {
    transform: translateY(-6px);
    border-color: rgba(255,255,255,.05) !important;
    background: linear-gradient(180deg, rgba(22,199,169,.07), rgba(255,255,255,.015)) !important;
    box-shadow: 0 30px 60px -30px rgba(0,0,0,.7), 0 0 0 1px rgba(22,199,169,.18) inset;
}

/* Stat bar del hero: cristal, sin línea dura */
.hero-statbar { background: rgba(255,255,255,.035); border-color: rgba(255,255,255,.08); box-shadow: 0 30px 70px -40px rgba(0,0,0,.8); }
.hero-statbar .hs { border-color: rgba(255,255,255,.06); }

/* Callouts menos "caja": barra lateral en vez de recuadro completo */
.article-body .callout {
    background: linear-gradient(90deg, rgba(22,199,169,.08), transparent 90%);
    border: 0; border-left: 2px solid var(--teal); border-radius: 0 10px 10px 0; padding: 1.1rem 1.4rem;
}

/* ---------- RECURSOS como índice editorial (no rejilla de cajas) ---------- */
.res-index { border-top: 1px solid var(--card-border); }
.res-cols { columns: 2; column-gap: 4rem; }
@media(max-width:800px){ .res-cols { columns: 1; } }
.res-row {
    display: flex; align-items: center; gap: 1.1rem; padding: 1.15rem .2rem;
    border-bottom: 1px solid var(--card-border); break-inside: avoid;
    transition: padding .22s ease, background .22s;
}
.res-row:hover { padding-left: 1rem; padding-right: 1rem; background: rgba(22,199,169,.04); border-radius: 12px; border-color: transparent; }
.res-row .ic { width: 44px; height: 44px; border-radius: 12px; flex-shrink:0; display:flex; align-items:center; justify-content:center;
    color: var(--teal); background: rgba(22,199,169,.1); font-size: 1.15rem; transition: background .2s,color .2s; }
.res-row:hover .ic { background: var(--teal); color: #04211C; }
.res-row .rx { flex: 1; min-width: 0; }
.res-row .rx b { display:block; color: #fff; font-family: var(--font-display); font-weight: 700; font-size: 1.02rem; }
.res-row .rx span { color: var(--muted); font-size: .86rem; }
.res-row .go { color: var(--muted); font-size: 1rem; transition: transform .2s, color .2s; }
.res-row:hover .go { color: var(--teal); transform: translateX(4px); }

/* Numeración de sección centrada bien */
.sec-num.center { justify-content:center; }

/* ============================================================
   v4 · TEMA CLARO (fondo blanco estilo LevelUp)
   Hero, footer y bandas de acento se mantienen oscuros.
   ============================================================ */
:root {
    --bg:            #FFFFFF;
    --bg-2:          #F6F6F4;   /* gris papel del pack NiuCollect */
    --panel:         #FFFFFF;
    --panel-2:       #F4F4F2;
    --card-border:   #E7E7E3;
    --card-border-2: #D7D7D2;
    --text:          #0A0A0B;   /* tinta casi negra del pack */
    --text-2:        #46586B;
    --muted:         #86888D;
    --teal:          #0FA98F;
    --teal-2:        #0C8776;
    --teal-soft:     rgba(15,169,143,.10);
    --radius-lg:     16px;
}
body { background: var(--bg); color: var(--text); }
body::before { opacity:.02; }

/* Textura de rejilla y scrollbar en claro */
.grid-bg::before {
    background-image:
      linear-gradient(rgba(12,18,26,.05) 1px, transparent 1px),
      linear-gradient(90deg, rgba(12,18,26,.05) 1px, transparent 1px);
}
::-webkit-scrollbar-track { background: #EEF2F5; }
::-webkit-scrollbar-thumb { background: #C7D0DA; border-color:#EEF2F5; }
::-webkit-scrollbar-thumb:hover { background: #AEB9C6; }

/* ---- NAVBAR clara ---- */
.tu-navbar { background: rgba(255,255,255,.92); border-bottom:1px solid var(--card-border); }
.tu-navbar .nav-link { color:#2B3644; }
.tu-navbar .nav-link:hover, .tu-navbar .nav-link.active { color:#0E1620; }
.navbar-toggler { border-color: var(--card-border-2); }
.navbar-toggler-icon { filter:none; opacity:.7; }
.nav-dropdown-menu { background:#fff; border:1px solid var(--card-border); box-shadow:0 20px 44px rgba(12,18,26,.14); }
.nav-dropdown-menu .dropdown-item { color:#2B3644; }
.nav-dropdown-menu .dropdown-item:hover { background:var(--teal-soft); color:#0E1620; }

/* ---- Botones en claro ---- */
.btn-ghost { background:#fff; border:1px solid var(--card-border-2); color:var(--text); }
.btn-ghost:hover { background:#F1F4F7; border-color:var(--teal); color:var(--text); }

/* ---- Chips / forms ---- */
.chip { background:#F1F4F7; border:1px solid var(--card-border); color:var(--text-2); }
a.chip:hover { border-color:var(--teal); color:var(--teal); }
.form-control, .form-select { background:#fff; border:1px solid var(--card-border-2); color:var(--text); }
.form-control::placeholder { color:var(--muted); }
.form-control:focus, .form-select:focus { background:#fff; color:var(--text); }

/* ---- HERO se mantiene oscuro: forzar texto claro ---- */
.hero-photo h1 { color:#fff; }
.hero-free { color:var(--text-2); background:var(--teal-soft); border:1px solid rgba(15,169,143,.3); }
.hero-free strong { color:var(--text); }
.hero-photo .hero-free { color:#D7E2EA; background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.2); }
.hero-photo .hero-free strong { color:#fff; }

/* Barra de stats: tarjeta blanca elevada */
.hero-statbar { background:#fff; border:1px solid var(--card-border); box-shadow:0 24px 54px rgba(12,18,26,.12); }
.hero-statbar .hs { border-color:var(--card-border); }
.hero-statbar .hs .n { color:var(--text); }

/* ---- PAGE HERO interior en claro ---- */
.page-hero { background:linear-gradient(180deg,#EFF5F4 0%,#FFFFFF 100%); border-bottom:1px solid var(--card-border); }
.page-hero h1 { color:var(--text); }
.page-hero p { color:var(--text-2); }

/* ---- TARJETAS en claro ---- */
.tu-card, .course-card, .week-card, .ind-card, .video-card, .testi-card, .aside-card, .track-card, .blog-card {
    background:#fff !important; border:1px solid var(--card-border) !important;
    box-shadow:0 1px 2px rgba(12,18,26,.04);
}
.tu-card:hover, .course-card:hover, .week-card:hover, .ind-card:hover, .video-card:hover, .track-card:hover, .blog-card:hover {
    background:#fff !important; border-color:rgba(15,169,143,.45) !important;
    box-shadow:0 20px 44px rgba(12,18,26,.13) !important; transform:translateY(-5px);
}
.stat { background:#fff; }
.week-card .big { color:rgba(12,18,26,.05); }

/* Texto que era blanco sobre oscuro -> oscuro sobre blanco */
.article-body h2, .article-body h3, .article-body strong, .article-body th,
.news-hero__body h2, .news-item__body h3, .firm-name, .glos-item dt,
.testi-who .n, .res-row .rx b, .hero-statbar .hs .n, .curri__row h4.text-white {
    color: var(--text) !important;
}
.article-body { color:#3C4B5C; }
.article-body a { color:var(--teal); }
.article-body table th { background:#F4F6F8; }
.article-body .callout { color:#3C4B5C; }
.curri__num { color:rgba(12,18,26,.12); }
.curri__row:hover .curri__num { color:var(--teal); }
.curri, .curri__row { border-color:var(--card-border); }
.res-row .rx span { color:var(--muted); }
.res-index, .res-row { border-color:var(--card-border); }

/* Compare table en claro */
.compare-table thead th { background:#F4F6F8; }
.compare-wrap { border-color:var(--card-border); }

/* ---- Bandas / bloques que SIGUEN oscuros: texto claro ---- */
.cta-block h2, .cta-photo h2 { color:#fff; }
.cta-block p, .cta-photo p { color:#D7E2EA; }
.section-alt { background:var(--bg-2); }

/* Testimonios: texto legible en claro */
.testi-card p { color:var(--text); }
.testi-who .r { color:var(--muted); }

/* Footer permanece oscuro (sin cambios) · partner-strip en claro */
.partner-strip { background:var(--bg-2); }
.partner-logos span { color:var(--text-2); }

/* News list / hero en claro */
.news-hero, .news-item { background:#fff; }
.news-list, .news-hero { border-color:var(--card-border); }
.news-item { border-color:var(--card-border); }

/* Aside cards de artículo en claro */
.aside-cta { background:linear-gradient(150deg, rgba(15,169,143,.10), #fff); border:1px solid rgba(15,169,143,.28); }
.aside-cta p, .aside-card p { color:var(--text-2); }
.aside-post__title { color:var(--text-2); }

/* ---- Pasos de la página Empezar ---- */
.start-steps { max-width:820px; margin:0 auto; display:flex; flex-direction:column; gap:1rem; }
.start-step { display:grid; grid-template-columns:64px 1fr; gap:1.4rem; align-items:flex-start;
  background:#fff; border:1px solid var(--card-border); border-radius:var(--radius-lg); padding:1.6rem 1.8rem; transition:border-color .2s, box-shadow .2s, transform .2s; }
.start-step:hover { border-color:rgba(15,169,143,.45); box-shadow:0 18px 40px rgba(12,18,26,.10); transform:translateY(-3px); }
.start-step__n { width:56px;height:56px;border-radius:16px; display:flex;align-items:center;justify-content:center;
  font-family:var(--font-display); font-weight:800; font-size:1.6rem; color:#04211C;
  background:linear-gradient(135deg,var(--teal),var(--teal-2)); }
.start-step__body h3 { font-size:1.25rem; margin-bottom:.4rem; }
.start-step__body p { color:var(--text-2); margin-bottom:.6rem; }
@media(max-width:560px){ .start-step{ grid-template-columns:1fr; } .start-step__n{ width:48px;height:48px;font-size:1.3rem;} }