/**
 * page · / (home) — Home UXDivi
 *
 * Tokens DS + estilos específicos de la home. Scope:
 * `body.uxdivi-frontend--home .ux-home`. Las variables del DS
 * (--brand, --cyan, --ink, etc.) se sirven por separado desde
 * `uxdivi-core.css` (el loader enquea esa hoja como dependencia
 * cuando el slug está en `SLUGS_USING_CORE`).
 *
 * Fuente de verdad: rediseno/Home UXDivi.html
 * Generado por tools/regen-home.py
 */

  /* ═══════════════════════════════════════════════════════════
     CONTAINER · regla canónica del rediseño 2026
     · max-width 1280px en desktop · centrado · sin padding lateral
     · padding lateral SOLO en mobile/tablet (4vw → contenido 92vw)
       APLICADO AL `.wrap` INTERNO (NO al root `.ux-home`) porque
       las `<section>` tienen atmósferas full-bleed (`.glow-orb-center`,
       `.fx-blur-shape`, `.particle-field`, etc.) que deben sangrar
       al viewport · si el padding va al root, las secciones quedan
       constreñidas y aparecen franjas negras laterales en móvil
       (bug reportado por Jefferson 2026-05-15 en /sobre/ y
       2026-05-16 en /planes/ HERO).
     · seal anti scroll-horizontal porque la page usa .fx-blur-shape
       y .glow-orb-center con offsets negativos
     Ver memoria feedback-container-1280px.md
     ═══════════════════════════════════════════════════════════ */
  html, body { overflow-x: hidden; }
  .wrap { max-width: 1280px; margin: 0 auto; }
  @media (max-width: 980px) {
    .ux-home .wrap { padding-left: 4vw; padding-right: 4vw; }
  }

  /* ======== HOME specific ======== */

  /* Hero side-by-side · padding uniformado a 60px (regla global de secciones) */
  .home-hero { padding: 60px 0; position: relative; overflow: hidden; }
  .home-hero::before {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background:
      radial-gradient(700px 400px at 75% 40%, rgba(1,77,253,0.22), transparent 60%),
      radial-gradient(500px 400px at 10% 70%, rgba(98,229,255,0.10), transparent 60%);
  }
  .home-hero .hh-grid {
    display: grid; grid-template-columns: 1.1fr 1fr; gap: 60px; align-items: center;
    position: relative;
  }
  .home-hero .pill-ai {
    display: inline-flex; align-items: center; gap: 10px;
    padding: 8px 14px; border-radius: 999px;
    background: rgba(98,229,255,0.1);
    border: 1px solid rgba(98,229,255,0.35);
    color: var(--cyan); font-family: var(--mono); font-size: 12px;
    letter-spacing: 0.12em; text-transform: uppercase;
    box-shadow: 0 0 0 4px rgba(98,229,255,0.04), 0 0 28px rgba(98,229,255,0.18);
    animation: pulseGlow 2.4s ease-in-out infinite;
  }
  @keyframes pulseGlow {
    0%, 100% { box-shadow: 0 0 0 4px rgba(98,229,255,0.04), 0 0 28px rgba(98,229,255,0.18); }
    50%      { box-shadow: 0 0 0 6px rgba(98,229,255,0.08), 0 0 44px rgba(98,229,255,0.35); }
  }
  .home-hero h1 {
    font-size: clamp(44px, 5.2vw, 72px);
    line-height: 1.02;
    letter-spacing: -0.035em;
    margin: 22px 0 18px;
  }
  .home-hero h1 .glow {
    background: linear-gradient(120deg, var(--brand-light) 0%, var(--cyan) 100%);
    -webkit-background-clip: text; background-clip: text; color: transparent;
  }
  .home-hero .sub { font-size: 18px; color: var(--ink-2); line-height: 1.55; max-width: 580px; }
  .home-hero .ctas { margin-top: 30px; display: flex; gap: 12px; flex-wrap: wrap; }
  .home-hero .trust { margin-top: 28px; display: flex; flex-direction: column; gap: 12px; align-items: center; font-size: 13.5px; color: var(--ink-3); }
  .home-hero .trust .trust-row { display: flex; gap: 16px; flex-wrap: wrap; align-items: center; justify-content: center; }
  .home-hero .trust .trust-row--tp { gap: 8px; }
  .home-hero .trust b { color: var(--ink); font-weight: 600; }
  .home-hero .trust .stars { color: #FFD06B; font-size: 14px; letter-spacing: 2px; }

  /* Hero visual — editor + AI chat */
  .hero-mock {
    position: relative; aspect-ratio: 4 / 3.3;
    border-radius: 22px; overflow: hidden;
    border: 1px solid rgba(98,229,255,0.2);
    background: var(--surface);
    box-shadow: 0 50px 120px -30px rgba(1,77,253,0.55);
  }
  .hero-mock .editor-shot { position: absolute; inset: 0; }
  .hero-mock .editor-shot img { width: 100%; height: 100%; object-fit: cover; }
  .hero-mock .editor-shot::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 40%, rgba(4,8,20,0.45) 100%); }
  .hero-mock .ai-chip {
    position: absolute;
    bottom: 22px; right: 22px;
    width: 320px;
    background: rgba(10,15,30,0.92); backdrop-filter: blur(18px);
    border: 1px solid rgba(98,229,255,0.32);
    border-radius: 14px;
    padding: 14px 16px;
    box-shadow: 0 20px 50px -10px rgba(1,77,253,0.5);
  }
  .hero-mock .ai-chip .hdr { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; font-family: var(--mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--cyan); }
  .hero-mock .ai-chip .hdr .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 8px var(--cyan); }
  .hero-mock .ai-chip .msg-ai { font-size: 12.5px; color: var(--ink-2); line-height: 1.5; margin-bottom: 8px; font-family: var(--mono); }
  .hero-mock .ai-chip .msg-ai code { color: var(--cyan); background: rgba(98,229,255,0.08); padding: 1px 6px; border-radius: 4px; font-family: var(--mono); font-size: 11px; }
  .hero-mock .ai-chip .typing { display: inline-flex; gap: 3px; margin-top: 2px; }
  .hero-mock .ai-chip .typing span { width: 4px; height: 4px; border-radius: 50%; background: var(--cyan); animation: typ 1.2s ease-in-out infinite; }
  .hero-mock .ai-chip .typing span:nth-child(2) { animation-delay: .15s; }
  .hero-mock .ai-chip .typing span:nth-child(3) { animation-delay: .3s; }
  @keyframes typ { 0%, 60%, 100% { opacity: 0.3; transform: translateY(0);} 30% { opacity: 1; transform: translateY(-2px);} }
  .hero-mock .brand-chip {
    position: absolute; top: 22px; left: 22px;
    display: flex; align-items: center; gap: 8px;
    padding: 6px 10px; border-radius: 999px;
    background: rgba(10,15,30,0.8); backdrop-filter: blur(10px);
    border: 1px solid var(--line-2); color: var(--ink-2); font-family: var(--mono); font-size: 11px;
  }
  .hero-mock .brand-chip .d { width: 8px; height: 8px; border-radius: 50%; background: #E43; box-shadow: 0 0 6px #E43; }

  /* Trust strip — rebuilt as coherent single-row layout */
  .trust-strip {
    margin-top: -30px; position: relative; z-index: 3;
    padding: 24px 32px;
    background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.015));
    border: 1px solid var(--line-2);
    border-radius: var(--radius-lg);
    backdrop-filter: blur(12px);
  }
  .ts-row {
    display: grid; grid-template-columns: auto 1fr auto; gap: 36px; align-items: center;
  }
  /* Stats — inline horizontal */
  .ts-nums { display: flex; gap: 28px; align-items: center; }
  .ts-nums .ns { display: flex; flex-direction: column; gap: 3px; }
  .ts-nums .n { font-family: var(--display); font-size: 30px; font-weight: 600; letter-spacing: -0.02em; color: var(--cyan); line-height: 1; }
  .ts-nums .l { font-family: var(--mono); font-size: 10px; color: var(--ink-3); letter-spacing: 0.12em; text-transform: uppercase; line-height: 1.2; }
  .ts-sep { width: 1px; height: 42px; background: var(--line-2); }

  /* Logos — centered horizontal row */
  .ts-logos { display: flex; gap: 8px; align-items: center; justify-content: center; flex-wrap: wrap; }
  .ts-logo {
    padding: 7px 12px;
    background: rgba(255,255,255,0.03);
    border: 1px solid var(--line-2);
    border-radius: 999px;
    font-family: var(--display); font-size: 12px; font-weight: 600; color: var(--ink-2);
    letter-spacing: -0.01em;
    display: flex; align-items: center; gap: 7px;
    white-space: nowrap;
  }
  .ts-logo .dt { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }

  /* Trustpilot block — right side, single row */
  .ts-tp {
    display: flex; align-items: center; gap: 14px;
    padding: 10px 16px;
    background: rgba(0,182,122,0.06);
    border: 1px solid rgba(0,182,122,0.28);
    border-radius: 12px;
  }
  .ts-tp .stars-tp { display: flex; gap: 2px; }
  .ts-tp .star { width: 18px; height: 18px; background: #00B67A; display: grid; place-items: center; color: #fff; border-radius: 2px; font-size: 10px; }
  .ts-tp .tp-text { display: flex; flex-direction: column; gap: 2px; }
  .ts-tp .rating { font-family: var(--display); font-size: 17px; font-weight: 600; color: var(--ink); line-height: 1; }
  .ts-tp .rating span { color: var(--ink-4); font-size: 12px; font-weight: 400; }
  .ts-tp .sm { font-family: var(--mono); font-size: 10px; color: var(--ink-3); letter-spacing: 0.08em; text-transform: uppercase; }
  .ts-tp .sm b { color: #00B67A; }
  .ts-tp a.ts-more { color: var(--cyan); font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em; border-left: 1px solid var(--line-2); padding-left: 14px; }
  .ts-tp a.ts-more:hover { color: var(--cyan-2); }

  /* Bloque 3 — Divi 5 + IA advantage (stacked, full-width) */
  /* .ai-advantage sin caja contenedora — sección plana con atmósfera FX desde un lado */
  .ai-advantage {
    position: relative;
    background: transparent;
    border: 0;
    box-shadow: none;
    padding: 0;
    overflow: visible;
  }
  .ai-advantage::before { display: none; }
  .ai-advantage .aa-head { position: relative; text-align: center; max-width: 820px; margin: 0 auto 44px; }
  .ai-advantage .aa-head .eyebrow { justify-content: center; }
  .ai-advantage h2 { font-size: 46px; line-height: 1.05; margin: 14px 0 22px; letter-spacing: -0.025em; }
  .ai-advantage h2 .grad { background: linear-gradient(120deg, #FFFFFF 0%, #62E5FF 70%, #8CEEFF 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
  .ai-advantage .aa-lead { color: var(--ink-2); font-size: 17px; line-height: 1.6; max-width: 720px; margin: 0 auto; }
  .ai-advantage .aa-lead strong { color: var(--ink); }

  .aa-kicker {
    position: relative;
    display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 22px;
    max-width: 720px; margin: 0 auto 44px;
    font-family: var(--mono); font-size: 12px; color: var(--ink-3); letter-spacing: 0.06em;
  }
  .aa-kicker .line { height: 1px; background: linear-gradient(90deg, transparent, rgba(98,229,255,0.4), transparent); }
  .aa-kicker .pill { padding: 8px 16px; border-radius: 999px; background: rgba(98,229,255,0.1); border: 1px solid rgba(98,229,255,0.3); color: var(--cyan); text-transform: uppercase; letter-spacing: 0.14em; font-weight: 600; }

  .tool-chips { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; max-width: 1040px; margin: 0 auto 40px; }
  .tool-chip {
    display: grid; gap: 14px;
    padding: 26px 24px;
    background: linear-gradient(180deg, rgba(98,229,255,0.06), rgba(1,77,253,0.04));
    border: 1px solid rgba(98,229,255,0.22);
    border-radius: 16px;
    position: relative; overflow: hidden;
    transition: transform .2s, border-color .2s, box-shadow .2s;
  }
  .tool-chip:hover { transform: translateY(-2px); border-color: rgba(98,229,255,0.45); box-shadow: 0 20px 50px -15px rgba(1,77,253,0.5); }
  .tool-chip .tc-num { position: absolute; top: 16px; right: 20px; font-family: var(--mono); font-size: 11px; color: var(--ink-4); letter-spacing: 0.1em; }
  .tool-chip .tc-ico {
    width: 52px; height: 52px; border-radius: 14px;
    background: rgba(255,255,255,0.96);
    border: 1px solid rgba(255,255,255,0.2);
    display: grid; place-items: center;
    box-shadow: 0 8px 24px -8px rgba(1,77,253,0.4);
  }
  .tool-chip .tc-ico svg { width: 28px; height: 28px; display: block; }
  /* Colores de marca oficiales por logo */
  .tool-chip .tc-ico--openai { color: #10A37F; }   /* OpenAI green */
  .tool-chip .tc-ico--google { background: rgba(255,255,255,0.96); }
  .tool-chip .tc-ico--claude { color: #D97757; background: #1F1B17; }   /* Anthropic claude orange on dark */
  .tool-chip .tc-names { font-family: var(--display); font-size: 18px; color: var(--ink); font-weight: 600; letter-spacing: -0.01em; }
  .tool-chip .tc-for { font-size: 13.5px; color: var(--ink-3); line-height: 1.5; }
  .tool-chip .tc-tag { margin-top: 4px; display: inline-flex; align-items: center; gap: 6px; font-family: var(--mono); font-size: 10.5px; color: var(--cyan); letter-spacing: 0.1em; text-transform: uppercase; }
  .tool-chip .tc-tag::before { content: "►"; font-size: 9px; }

  .aa-cta-row { position: relative; display: flex; justify-content: center; align-items: center; gap: 18px; flex-wrap: wrap; }
  .aa-cta-row .aa-note { font-family: var(--mono); font-size: 12px; color: var(--ink-4); letter-spacing: 0.04em; }

  /* AI visual panel — chat mock */
  .ai-visual {
    position: relative; aspect-ratio: 4/4.2;
    border-radius: 20px; overflow: hidden;
    background: rgba(4,8,20,0.7);
    border: 1px solid rgba(98,229,255,0.28);
    padding: 24px;
    display: flex; flex-direction: column; gap: 12px;
    box-shadow: 0 30px 80px -20px rgba(1,77,253,0.55);
  }
  .ai-visual .v-hdr { display: flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 10px; color: var(--ink-4); letter-spacing: 0.12em; text-transform: uppercase; padding-bottom: 10px; border-bottom: 1px solid var(--line-2); margin-bottom: 6px; }
  .ai-visual .v-hdr .d { width: 7px; height: 7px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 8px var(--cyan); }
  .vmsg { max-width: 85%; padding: 10px 14px; border-radius: 14px; font-size: 13px; line-height: 1.5; }
  .vmsg.me { background: linear-gradient(180deg, #2B6BFF, #014DFD); color: #fff; margin-left: auto; border-top-right-radius: 4px; }
  .vmsg.ai { background: rgba(255,255,255,0.05); border: 1px solid var(--line-2); color: var(--ink-2); border-top-left-radius: 4px; font-family: var(--mono); font-size: 12px; }
  .vmsg.ai code { color: var(--cyan); background: rgba(98,229,255,0.08); padding: 1px 5px; border-radius: 4px; }
  .vmsg-meta { font-family: var(--mono); font-size: 10px; color: var(--ink-4); letter-spacing: 0.06em; }

  /* 4-pilares cards */
  /* ═══ Bento grid 3 columnas alineadas + strip wide ═══ */
  .bento-grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-auto-rows: minmax(160px, auto);
    gap: 18px;
  }
  /* Variante: 3 columnas con centro 50% más ancho (laterales 3 cols, centro 6 cols).
     Strip wide ocupa 12 cols debajo. */
  .bento-grid--3col .bento--cell {
    grid-column: span 3;
    display: flex; flex-direction: column;
  }
  /* Las cards del centro (+49 cursos y quote) ocupan el doble: 6 cols */
  .bento-grid--3col .bento--cell-center {
    grid-column: span 6;
  }
  .bento-grid--3col .bento--cell-strip {
    grid-column: span 12;
  }
  /* La quote en su celda mantiene texto grande pero se alinea con las otras */
  .bento-grid--3col .bento--quote {
    align-items: center;
    min-height: auto;
  }
  .bento-grid--3col .bento--quote .quote-text {
    font-size: clamp(28px, 3.4vw, 48px);
    line-height: 1.1;
    letter-spacing: -0.025em;
  }
  .bento {
    position: relative;
    border-radius: 22px;
    border: 1px solid rgba(98,229,255,0.18);
    background: linear-gradient(180deg, rgba(15,25,55,0.55), rgba(10,15,30,0.78));
    padding: 28px;
    overflow: hidden;
    transition: border-color .25s ease, transform .25s ease, box-shadow .25s ease;
  }
  .bento:hover {
    border-color: rgba(98,229,255,0.4);
    transform: translateY(-3px);
    box-shadow: 0 30px 70px -25px rgba(1,77,253,0.45);
  }
  /* Halo decorativo en cada bento (esquina) */
  .bento::before {
    content: ""; position: absolute; top: -60px; right: -60px;
    width: 220px; height: 220px;
    background: radial-gradient(closest-side, rgba(1,77,253,0.22), transparent 70%);
    pointer-events: none;
  }
  /* Card sizes (column spans) */
  .bento--xl { grid-column: span 7; grid-row: span 2; }
  .bento--lg { grid-column: span 5; }
  .bento--md { grid-column: span 4; }
  .bento--sm { grid-column: span 3; }
  .bento--quote { grid-column: span 7; }
  .bento--strip { grid-column: span 12; padding: 22px 28px; }
  /* Iconos del bento */
  .bento .b-ico {
    width: 48px; height: 48px; border-radius: 14px;
    background: linear-gradient(135deg, rgba(1,77,253,0.28), rgba(98,229,255,0.1));
    border: 1px solid rgba(98,229,255,0.3);
    color: var(--cyan); display: grid; place-items: center;
    margin-bottom: 18px;
  }
  .bento .b-ico svg { width: 22px; height: 22px; }
  .bento h3 {
    font-family: var(--display);
    font-size: 22px; line-height: 1.18;
    letter-spacing: -0.015em;
    margin-bottom: 10px;
    color: var(--ink);
  }
  .bento--xl h3 { font-size: 28px; line-height: 1.1; }
  /* Card central del Catálogo principal (+49 cursos): título grande para llenar la caja */
  .bento-grid--3col .bento--cell-center:not(.bento--quote) h3 {
    font-size: clamp(34px, 3.2vw, 46px);
    line-height: 1.08;
    letter-spacing: -0.02em;
    margin-top: 6px;
    margin-bottom: 16px;
  }
  .bento p {
    font-size: 14.5px; line-height: 1.55;
    color: var(--ink-3);
  }
  /* Card-quote: texto grande con gradient brand→cyan */
  .bento--quote {
    border-color: rgba(1,77,253,0.35);
    background:
      radial-gradient(600px 400px at 0% 0%, rgba(1,77,253,0.28), transparent 60%),
      linear-gradient(180deg, rgba(15,25,55,0.6), rgba(10,15,30,0.85));
    display: flex; align-items: center; min-height: 240px;
  }
  .bento--quote .quote-text {
    font-family: var(--display);
    font-weight: 600;
    font-size: clamp(24px, 2.4vw, 36px);
    line-height: 1.18;
    letter-spacing: -0.02em;
    background: linear-gradient(120deg, #FFFFFF 0%, #62E5FF 60%, #4A7EFF 100%);
    -webkit-background-clip: text; background-clip: text; color: transparent;
    text-wrap: balance;
  }
  .bento--quote .quote-text .accent {
    background: linear-gradient(120deg, #4A7EFF 0%, #62E5FF 100%);
    -webkit-background-clip: text; background-clip: text; color: transparent;
  }
  /* Card-XL hero con visual mockup interno */
  .bento--xl {
    display: flex; flex-direction: column; justify-content: space-between;
  }
  .bento--xl .b-visual {
    margin-top: 18px;
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;
  }
  .bento--xl .b-thumb {
    aspect-ratio: 4/3;
    border-radius: 12px;
    border: 1px solid rgba(98,229,255,0.18);
    background:
      radial-gradient(80% 60% at 50% 30%, rgba(1,77,253,0.4), transparent 70%),
      linear-gradient(180deg, #0A1230 0%, #040814 100%);
    position: relative; overflow: hidden;
  }
  .bento--xl .b-thumb::after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(180deg, transparent 50%, rgba(4,8,20,0.6) 100%);
  }
  .bento--xl .b-thumb-label {
    position: absolute; bottom: 8px; left: 10px;
    font-family: var(--mono); font-size: 9.5px; color: #fff;
    letter-spacing: 0.04em; z-index: 2;
  }
  /* Strip de chips features */
  .bento--strip {
    display: flex; align-items: center; flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
    background: linear-gradient(180deg, rgba(15,25,55,0.4), rgba(10,15,30,0.6));
  }
  .bento--strip .b-chip {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 8px 14px;
    border-radius: 999px;
    background: rgba(98,229,255,0.07);
    border: 1px solid rgba(98,229,255,0.22);
    font-family: var(--mono); font-size: 12px;
    color: var(--ink-2); letter-spacing: 0.04em;
  }
  .bento--strip .b-chip svg {
    width: 14px; height: 14px; color: var(--cyan);
    stroke: currentColor;
  }
  /* Tag pill arriba a la izquierda en algunos bentos */
  .bento .b-tag {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 5px 11px; border-radius: 999px;
    background: rgba(98,229,255,0.1);
    border: 1px solid rgba(98,229,255,0.3);
    color: var(--cyan);
    font-family: var(--mono); font-size: 10.5px;
    letter-spacing: 0.1em; text-transform: uppercase;
    margin-bottom: 14px;
  }
  /* Responsive */
  @media (max-width: 1100px) {
    .bento--xl { grid-column: span 12; grid-row: span 1; }
    .bento--lg, .bento--md, .bento--sm, .bento--quote { grid-column: span 6; }
    .bento--strip { grid-column: span 12; }
    /* Variante 3col · cells laterales (span 3) y centrales (span 6) en
       layout original colapsan a 2 columnas (span 6). El strip sigue full. */
    .bento-grid--3col .bento--cell { grid-column: span 6; }
    .bento-grid--3col .bento--cell-center { grid-column: span 6; }
    .bento-grid--3col .bento--cell-strip { grid-column: span 12; }
  }
  @media (max-width: 700px) {
    .bento-grid { grid-template-columns: 1fr; }
    .bento--xl, .bento--lg, .bento--md, .bento--sm, .bento--quote, .bento--strip {
      grid-column: span 1;
    }
    /* Variante 3col en mobile · todas las cells a 1 columna. */
    .bento-grid--3col .bento--cell,
    .bento-grid--3col .bento--cell-center,
    .bento-grid--3col .bento--cell-strip { grid-column: span 1; }
  }

  /* Routes grid */
  .routes-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
  .route-card {
    padding: 28px 24px;
    border-radius: 16px;
    border: 1px solid var(--line-2);
    background: rgba(255,255,255,0.02);
    transition: transform .2s, border-color .2s;
    cursor: pointer; position: relative;
  }
  .route-card:hover { transform: translateY(-3px); border-color: rgba(98,229,255,0.3); }
  .route-card.new { border-color: rgba(98,229,255,0.35); background: linear-gradient(180deg, rgba(98,229,255,0.05), rgba(98,229,255,0.01)); }
  .route-card.new::after {
    content: "NUEVA"; position: absolute; top: 14px; right: 14px;
    padding: 3px 7px; border-radius: 4px;
    background: linear-gradient(180deg, #8CEEFF, #62E5FF); color: #001a2a;
    font-family: var(--mono); font-size: 9px; font-weight: 700; letter-spacing: 0.1em;
  }
  .route-card .rc-ico {
    width: 44px; height: 44px; border-radius: 12px;
    background: linear-gradient(135deg, rgba(1,77,253,0.22), rgba(98,229,255,0.08));
    border: 1px solid rgba(98,229,255,0.25);
    color: var(--cyan); display: grid; place-items: center; font-size: 20px;
    margin-bottom: 18px;
  }
  .route-card h3 { font-size: 17px; margin-bottom: 8px; line-height: 1.25; }
  .route-card p { font-size: 13px; color: var(--ink-3); line-height: 1.5; }
  .route-card .rc-link { margin-top: 14px; font-family: var(--mono); font-size: 11px; color: var(--cyan); letter-spacing: 0.06em; }

  /* How it works — clearer flow with arrows */
  .steps { display: grid; grid-template-columns: 1fr 40px 1fr 40px 1fr; gap: 0; align-items: stretch; position: relative; }
  .step {
    padding: 40px 32px;
    border-radius: var(--radius-lg);
    border: 1px solid rgba(98,229,255,0.22);
    background:
      radial-gradient(400px 200px at 100% 0%, rgba(1,77,253,0.2), transparent 65%),
      linear-gradient(180deg, rgba(15,25,60,0.6), rgba(10,15,30,0.8));
    position: relative; overflow: hidden;
    transition: transform .2s, border-color .2s, box-shadow .2s;
  }
  .step:hover { transform: translateY(-3px); border-color: rgba(98,229,255,0.4); box-shadow: 0 24px 60px -20px rgba(1,77,253,0.5); }
  .step::before {
    content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
    background: linear-gradient(90deg, var(--brand) 0%, var(--cyan) 100%);
  }
  .step .sn-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }
  .step .sn {
    font-family: var(--display); font-size: 68px; font-weight: 600; letter-spacing: -0.04em; line-height: 1;
    background: linear-gradient(135deg, #FFFFFF 0%, #62E5FF 60%, #014DFD 100%);
    -webkit-background-clip: text; background-clip: text; color: transparent;
  }
  .step .sico {
    width: 52px; height: 52px; border-radius: 14px;
    background: linear-gradient(135deg, rgba(1,77,253,0.35), rgba(98,229,255,0.18));
    border: 1px solid rgba(98,229,255,0.4);
    color: var(--cyan); display: grid; place-items: center; font-size: 22px;
    box-shadow: 0 0 0 4px rgba(98,229,255,0.06), 0 0 20px rgba(98,229,255,0.25);
  }
  .step h3 { font-size: 21px; margin-bottom: 12px; line-height: 1.25; letter-spacing: -0.01em; }
  .step p { font-size: 14.5px; color: var(--ink-2); line-height: 1.6; }
  .step .s-tag {
    display: inline-flex; align-items: center; gap: 6px; margin-top: 18px;
    font-family: var(--mono); font-size: 11px; color: var(--cyan); letter-spacing: 0.08em; text-transform: uppercase;
    padding: 6px 10px; border-radius: 6px;
    background: rgba(98,229,255,0.08); border: 1px solid rgba(98,229,255,0.22);
  }

  .step-arrow {
    display: grid; place-items: center; position: relative;
    color: var(--cyan);
  }
  .step-arrow::before {
    content: ""; position: absolute; top: 50%; left: 0; right: 0; height: 1px;
    background: linear-gradient(90deg, rgba(98,229,255,0.5), rgba(98,229,255,0.2));
  }
  .step-arrow svg { position: relative; z-index: 1; filter: drop-shadow(0 0 6px rgba(98,229,255,0.5)); }

  /* Featured courses */
  .fc-filters { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; margin-bottom: 34px; }
  .fc-tab {
    padding: 8px 18px; border-radius: 999px;
    font-family: var(--mono); font-size: 12px; letter-spacing: 0.06em;
    border: 1px solid var(--line-2);
    background: rgba(255,255,255,0.02);
    color: var(--ink-3);
    cursor: pointer; transition: all .15s;
  }
  .fc-tab:hover { color: var(--ink); border-color: rgba(98,229,255,0.3); }
  .fc-tab.active {
    background: rgba(98,229,255,0.12);
    color: var(--cyan);
    border-color: rgba(98,229,255,0.4);
  }
  .courses-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
  .fc-card {
    border: 1px solid var(--line-2);
    border-radius: 16px;
    overflow: hidden;
    background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.01));
    transition: transform .2s, border-color .2s;
    display: flex; flex-direction: column;
    cursor: pointer;
  }
  .fc-card:hover { transform: translateY(-3px); border-color: rgba(98,229,255,0.3); }
  .fc-thumb { aspect-ratio: 16 / 9; position: relative; overflow: hidden; }
  .fc-thumb img { width: 100%; height: 100%; object-fit: cover; }
  .fc-badge {
    position: absolute; top: 12px; left: 12px;
    font-family: var(--mono); font-size: 10px; padding: 4px 10px; border-radius: 999px;
    background: rgba(10,15,30,0.85); backdrop-filter: blur(6px);
    border: 1px solid rgba(98,229,255,0.28);
    color: var(--cyan); letter-spacing: 0.08em; text-transform: uppercase;
  }
  .fc-body { padding: 22px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
  .fc-body h3 { font-size: 19px; line-height: 1.25; margin: 0; }
  .fc-body p { font-size: 13.5px; color: var(--ink-3); line-height: 1.55; flex: 1; }
  .fc-body .fc-foot { display: flex; justify-content: space-between; align-items: center; padding-top: 10px; border-top: 1px solid rgba(255,255,255,0.04); font-family: var(--mono); font-size: 11px; color: var(--ink-4); }
  .fc-body .fc-foot .link { color: var(--cyan); }

  /* Launch block */
  .launch {
    position: relative; overflow: hidden;
    border-radius: var(--radius-xl);
    padding: 72px 60px;
    display: grid; grid-template-columns: 1.1fr 1fr; gap: 64px; align-items: center;
    background:
      radial-gradient(600px 400px at 50% 0%, rgba(1,77,253,0.45), transparent 60%),
      radial-gradient(500px 400px at 90% 100%, rgba(98,229,255,0.18), transparent 60%),
      linear-gradient(180deg, rgba(5,9,22,0.95), rgba(4,7,20,0.98));
    border: 1px solid rgba(98,229,255,0.25);
  }
  .launch::before {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background:
      repeating-linear-gradient(90deg, rgba(98,229,255,0.04) 0 1px, transparent 1px 80px),
      repeating-linear-gradient(0deg,  rgba(98,229,255,0.04) 0 1px, transparent 1px 80px);
  }
  .launch .copy { position: relative; }
  .launch .eyebrow { color: var(--cyan); }
  .launch h2 { font-size: 40px; line-height: 1.08; margin: 14px 0 20px; }
  .launch h2 .grad { background: linear-gradient(120deg, #FFFFFF 0%, #62E5FF 70%); -webkit-background-clip: text; background-clip: text; color: transparent; }
  .launch p { color: var(--ink-2); font-size: 15.5px; line-height: 1.6; }
  .launch p + p { margin-top: 12px; }
  .countdown {
    margin: 32px 0 20px;
    display: flex; gap: 12px; flex-wrap: wrap;
  }
  .cd-cell {
    min-width: 88px; padding: 14px 18px;
    border-radius: 14px;
    background: linear-gradient(180deg, rgba(98,229,255,0.1), rgba(1,77,253,0.05));
    border: 1px solid rgba(98,229,255,0.28);
    text-align: center;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.08);
  }
  .cd-cell .cv { font-family: var(--display); font-size: 36px; font-weight: 600; letter-spacing: -0.03em; color: var(--ink); line-height: 1; }
  .cd-cell .cl { font-family: var(--mono); font-size: 10px; color: var(--cyan); letter-spacing: 0.14em; text-transform: uppercase; margin-top: 6px; }
  .cd-line { font-family: var(--mono); font-size: 11.5px; color: var(--ink-4); letter-spacing: 0.06em; margin-bottom: 20px; }
  .waitlist {
    display: grid; grid-template-columns: 1fr auto; gap: 10px; max-width: 520px;
    padding: 6px; border-radius: 14px;
    background: rgba(255,255,255,0.04);
    border: 1px solid var(--line-2);
  }
  .waitlist input {
    border: none; background: transparent; outline: none;
    padding: 14px 16px; color: var(--ink); font-size: 15px; font-family: var(--body);
    width: 100%;
  }
  .waitlist input::placeholder { color: var(--ink-4); }
  .waitlist button { border: none; cursor: pointer; font-family: var(--body); }
  .waitlist-meta { margin-top: 12px; font-size: 12px; color: var(--ink-4); font-family: var(--mono); letter-spacing: 0.04em; }

  .launch-visual { position: relative; }
  .course-premium-cover {
    position: relative; aspect-ratio: 3 / 4;
    border-radius: 20px; overflow: hidden;
    border: 1px solid rgba(98,229,255,0.35);
    background: var(--surface);
    box-shadow: 0 50px 120px -30px rgba(1,77,253,0.75), 0 0 0 1px rgba(98,229,255,0.12);
    transform: rotate(-3deg) translateY(-6px);
    transition: transform .3s ease;
  }
  .course-premium-cover:hover { transform: rotate(-2deg) translateY(-10px); }
  .course-premium-cover img { width: 100%; height: 100%; object-fit: cover; }
  .course-premium-cover .cp-chip {
    position: absolute; top: 16px; left: 16px;
    padding: 6px 12px; border-radius: 999px;
    background: rgba(10,15,30,0.85); backdrop-filter: blur(8px);
    border: 1px solid rgba(98,229,255,0.35);
    color: var(--cyan); font-family: var(--mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase;
  }
  .course-premium-cover .cp-badges {
    position: absolute; bottom: 16px; left: 16px; right: 16px;
    display: flex; gap: 6px; flex-wrap: wrap;
  }
  .course-premium-cover .cp-badges span {
    padding: 4px 8px; border-radius: 6px;
    background: rgba(10,15,30,0.8); backdrop-filter: blur(6px);
    border: 1px solid var(--line-2); color: var(--ink-2);
    font-family: var(--mono); font-size: 10px; letter-spacing: 0.04em;
  }

  /* Jefferson + comunidad */
  /* ═══ Hero — gradientes diagonales en los bordes (mismo approach que Planes)
     · Background radial en un ::after (no en el section, para no afectar contenido).
     · Mask vertical SÓLO en ::after para difuminar bordes top/bottom sin cortes.
     · Hidden las shapes blur viejas que generaban el edge visible. */
  .home-hero {
    isolation: isolate;
    background: transparent;
  }
  .home-hero::after {
    content: "";
    position: absolute;
    /* Extiende ±140px arriba/abajo (igual que el clip-path del section) para que
       el gradient cubra todo el área visible y no genere edge donde termina el ::after. */
    inset: -140px 0;
    z-index: 0;
    pointer-events: none;
    background:
      radial-gradient(circle 900px at 0% 30%, rgba(1,77,253,0.30), transparent 55%),
      radial-gradient(circle 900px at 100% 70%, rgba(98,229,255,0.18), transparent 55%);
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 18%, #000 82%, transparent 100%);
    mask-image: linear-gradient(180deg, transparent 0%, #000 18%, #000 82%, transparent 100%);
  }
  .home-hero > .wrap { position: relative; z-index: 2; }
  .home-hero .fx-blur-shape { display: none; }
  .home-hero .fx-grid { display: none; }
  .home-hero .glow-orb-center { opacity: 0.4; }
  /* El ::before del .home-hero ya existente (líneas 19-24) lo desactivamos para evitar overlap */
  .home-hero::before { display: none !important; }

  /* ═══ Sec 11 — Planes: gradientes diagonales en los bordes ═══
     Approach: radial-gradients en el background del propio section,
     extendidos vertical con mask que difumina los bordes top/bottom para
     que se fundan con las secciones vecinas sin cortes visibles. */
  #planes {
    position: relative;
    isolation: isolate;
    background:
      radial-gradient(circle 720px at 0% 30%, rgba(1,77,253,0.20), transparent 55%),
      radial-gradient(circle 720px at 100% 70%, rgba(98,229,255,0.14), transparent 55%);
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 12%, #000 88%, transparent 100%);
    mask-image: linear-gradient(180deg, transparent 0%, #000 12%, #000 88%, transparent 100%);
  }
  /* Ocultar las shapes blur — el background de la sección ya da el efecto */
  #planes .fx-blur-shape { display: none; }

  /* ═══ Sec 9 — Jefferson hero editorial (estilo Sobre Mi) ═══ */
  .jeff-hero {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
  }
  .jeff-photo {
    border-radius: 22px;
    overflow: hidden;
    aspect-ratio: 4/5;
    box-shadow: 0 40px 80px -30px rgba(1,77,253,0.45);
  }
  .jeff-photo img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
  }
  .jeff-text .eyebrow-rule {
    display: inline-flex; align-items: center; gap: 10px;
    font-family: var(--mono); font-size: 11px;
    letter-spacing: 0.14em; text-transform: uppercase;
    color: var(--cyan);
    margin-bottom: 22px;
  }
  .jeff-text .er-line {
    width: 24px; height: 1px;
    background: var(--cyan);
  }
  .jeff-h {
    font-family: var(--display);
    font-size: clamp(40px, 4.4vw, 64px);
    line-height: 1.05;
    letter-spacing: -0.025em;
    margin: 0 0 20px;
    color: var(--ink);
    text-wrap: balance;
  }
  .jeff-h .text-glow-grad {
    background: linear-gradient(120deg, #FFFFFF 0%, #62E5FF 60%, #4A7EFF 100%);
    -webkit-background-clip: text; background-clip: text; color: transparent;
  }
  .jeff-lead {
    font-family: var(--mono); font-size: 12px;
    letter-spacing: 0.06em; color: var(--cyan);
    margin-bottom: 18px;
  }
  .jeff-prose {
    font-size: 15.5px; line-height: 1.6;
    color: var(--ink-2);
    margin-bottom: 28px;
  }
  .jeff-prose strong { color: var(--ink); }
  .jeff-meta {
    display: grid; grid-template-columns: 1fr 1fr;
    gap: 32px;
    padding: 22px 0;
    border-top: 1px solid var(--line-2);
    border-bottom: 1px solid var(--line-2);
    margin-bottom: 28px;
  }
  .jeff-meta .jm-label {
    font-family: var(--mono); font-size: 10.5px;
    letter-spacing: 0.14em; text-transform: uppercase;
    color: var(--ink-3); margin-bottom: 8px;
  }
  .jeff-meta .jm-val {
    font-family: var(--display); font-size: 14.5px;
    color: var(--ink); line-height: 1.5;
  }
  .jeff-ctas {
    display: flex; gap: 12px; flex-wrap: wrap;
  }

  /* ═══ Bloque Comunidad debajo del Trustpilot bar (en sección testimonios) ═══ */
  .community-block {
    text-align: center;
    max-width: 760px;
    margin: 56px auto 0;
  }
  .community-block .eyebrow {
    display: inline-block;
    margin-bottom: 14px;
  }
  .community-title {
    font-family: var(--display);
    font-size: clamp(28px, 3vw, 40px);
    line-height: 1.15;
    letter-spacing: -0.02em;
    margin: 0 0 18px;
    color: var(--ink);
    text-wrap: balance;
  }
  .community-lead {
    font-size: 16px; line-height: 1.65;
    color: var(--ink-2);
    margin: 0;
  }

  .jc-grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: 24px; }
  .jc-card {
    padding: 40px;
    border-radius: var(--radius-lg);
    border: 1px solid var(--line-2);
    background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.01));
  }
  .jc-jeff { display: grid; grid-template-columns: 160px 1fr; gap: 28px; align-items: start; }
  .jc-jeff .ph { aspect-ratio: 1; border-radius: 16px; overflow: hidden; border: 1px solid rgba(98,229,255,0.2); box-shadow: 0 20px 50px -20px rgba(1,77,253,0.5); }
  .jc-jeff .ph img { width: 100%; height: 100%; object-fit: cover; }
  .jc-jeff h3 { font-size: 24px; margin: 8px 0 10px; }
  .jc-jeff .role { font-family: var(--mono); font-size: 11px; color: var(--cyan); letter-spacing: 0.06em; margin-bottom: 12px; }
  .jc-jeff p { color: var(--ink-2); font-size: 14.5px; line-height: 1.55; }
  .jc-jeff .j-stats { display: flex; gap: 20px; margin-top: 14px; flex-wrap: wrap; font-size: 12.5px; color: var(--ink-3); }
  .jc-jeff .j-stats b { color: var(--ink); }
  .jc-jeff a.more { display: inline-block; margin-top: 12px; color: var(--cyan); font-size: 13px; }

  .jc-community { display: flex; flex-direction: column; justify-content: space-between; }
  .avatar-stack { display: flex; margin: 18px 0 22px; }
  .avatar-stack .av {
    width: 44px; height: 44px; border-radius: 50%;
    border: 3px solid #0A0F1E;
    margin-left: -10px;
    overflow: hidden;
  }
  .avatar-stack .av:first-child { margin-left: 0; }
  .avatar-stack .av img { width: 100%; height: 100%; object-fit: cover; }
  .avatar-stack .more {
    width: 44px; height: 44px; border-radius: 50%;
    border: 3px solid #0A0F1E;
    margin-left: -10px;
    background: rgba(98,229,255,0.14);
    color: var(--cyan);
    display: grid; place-items: center;
    font-family: var(--mono); font-size: 11px; font-weight: 600;
  }
  .jc-community h3 { font-size: 24px; margin-bottom: 10px; line-height: 1.2; }
  .jc-community p { color: var(--ink-2); font-size: 14.5px; line-height: 1.55; }

  /* Testimonials marquee */
  .t-marquee { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
  .t-marquee .t-card { padding: 26px; font-size: 14px; }
  .t-marquee .t-quote { font-size: 14.5px; }

  /* Plans compact */
  .plans-compact { display: grid; grid-template-columns: 1.1fr 1fr; gap: 20px; max-width: 960px; margin: 0 auto; }
  .plan-mini {
    padding: 32px;
    border-radius: var(--radius-lg);
    border: 1px solid var(--line-2);
    background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.01));
    position: relative;
    display: flex; flex-direction: column;
  }
  .plan-mini.featured {
    background:
      radial-gradient(500px 300px at 10% -10%, rgba(1,77,253,0.35), transparent 60%),
      radial-gradient(400px 300px at 100% 100%, rgba(98,229,255,0.14), transparent 60%),
      linear-gradient(180deg, rgba(20,30,70,0.55), rgba(10,15,30,0.7));
    border-color: rgba(1,77,253,0.5);
    box-shadow: 0 30px 80px -25px rgba(1,77,253,0.55);
  }
  .plan-mini .pm-badge {
    position: absolute; top: -12px; left: 32px;
    display: inline-flex; gap: 6px; align-items: center;
    font-family: var(--mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase;
    padding: 6px 12px; border-radius: 999px;
    background: linear-gradient(180deg, #8CEEFF, #62E5FF);
    color: #001a2a; font-weight: 700;
    box-shadow: 0 8px 20px -6px rgba(98,229,255,0.5);
  }
  .plan-mini .pm-name { font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 10px; }
  .plan-mini h3 { font-size: 22px; margin-bottom: 14px; line-height: 1.2; }
  .plan-mini .pm-price { display: flex; align-items: baseline; gap: 6px; margin-bottom: 6px; }
  .plan-mini .pm-price .n { font-family: var(--display); font-size: 48px; font-weight: 600; letter-spacing: -0.03em; line-height: 1; }
  .plan-mini .pm-price .p { color: var(--ink-3); font-size: 14px; }
  .plan-mini .pm-sub { font-size: 13px; color: var(--ink-3); margin-bottom: 18px; }
  .plan-mini .pm-sub b { color: var(--ink); }
  .plan-mini .pm-desc { font-size: 13.5px; color: var(--ink-2); line-height: 1.55; margin-bottom: 22px; flex: 1; }
  /* CTA centrado del plan trimestral (`.btn-ghost` por default queda
     alineado al inline-start del flex-column del card). */
  .plan-mini .plan-mini__cta { text-align: center; justify-content: center; }
  .plans-foot { text-align: center; margin-top: 26px; }
  .plans-foot a { color: var(--cyan); font-size: 14px; }
  .plans-foot .g { margin-top: 14px; font-family: var(--mono); font-size: 12px; color: var(--ink-4); }

  /* Blog */
  .blog-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
  .bl-card {
    border: 1px solid var(--line-2); border-radius: 16px; overflow: hidden;
    background: rgba(255,255,255,0.02);
    transition: transform .2s, border-color .2s;
    cursor: pointer; display: flex; flex-direction: column;
  }
  .bl-card:hover { transform: translateY(-3px); border-color: rgba(98,229,255,0.28); }
  .bl-thumb { aspect-ratio: 16 / 10; overflow: hidden; position: relative; background: var(--surface-2); }
  .bl-thumb img { width: 100%; height: 100%; object-fit: cover; }
  .bl-thumb .cat {
    position: absolute; top: 10px; left: 10px;
    font-family: var(--mono); font-size: 9.5px; padding: 3px 8px; border-radius: 4px;
    background: rgba(10,15,30,0.85); backdrop-filter: blur(6px);
    border: 1px solid rgba(98,229,255,0.28); color: var(--cyan);
    letter-spacing: 0.1em; text-transform: uppercase;
  }
  .bl-body { padding: 18px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
  .bl-body h3 { font-size: 15.5px; line-height: 1.3; margin: 0; }
  .bl-body .meta { font-family: var(--mono); font-size: 10.5px; color: var(--ink-4); letter-spacing: 0.04em; margin-top: auto; padding-top: 10px; border-top: 1px solid rgba(255,255,255,0.04); }

  /* Sec-foot CTA links common */
  .sec-foot-cta { text-align: center; margin-top: 40px; }

  /* Synthetic thumbnails for blog */
  .bl-synth { width: 100%; height: 100%; position: relative; }
  .bl-synth.s1 { background: linear-gradient(135deg, #0A2A6B 0%, #014DFD 100%); }
  .bl-synth.s2 { background: linear-gradient(135deg, #132645 0%, #23589B 100%); }
  .bl-synth.s3 { background: linear-gradient(135deg, #0A0F1E 0%, #07254C 100%); }
  .bl-synth.s4 { background: linear-gradient(135deg, #18213E 0%, #0A4C8A 100%); }
  .bl-synth .glyph {
    position: absolute; inset: 0; display: grid; place-items: center;
    font-family: var(--display); font-size: 72px; font-weight: 600; color: rgba(255,255,255,0.14);
    letter-spacing: -0.04em;
  }
  .bl-synth .grid-bg {
    position: absolute; inset: 0; pointer-events: none;
    background:
      repeating-linear-gradient(90deg, rgba(98,229,255,0.06) 0 1px, transparent 1px 40px),
      repeating-linear-gradient(0deg,  rgba(98,229,255,0.06) 0 1px, transparent 1px 40px);
  }

  /* ═══════════════════════════════════════════════════════════
     SISTEMA FX — atmósferas reutilizables (mismo de Planes/Sobre Mi)
     ═══════════════════════════════════════════════════════════ */
  .fx-grid {
    position: absolute; inset: 0; pointer-events: none;
    background-image:
      linear-gradient(rgba(98,229,255,0.04) 1px, transparent 1px),
      linear-gradient(90deg, rgba(98,229,255,0.04) 1px, transparent 1px);
    background-size: 48px 48px;
    mask-image: radial-gradient(ellipse at center, #000 30%, transparent 70%);
    -webkit-mask-image: radial-gradient(ellipse at center, #000 30%, transparent 70%);
    z-index: 0;
  }
  .fx-blur-shape {
    position: absolute; pointer-events: none;
    border-radius: 50%;
    filter: blur(100px);
    mix-blend-mode: screen;
    z-index: 0;
    animation: uxdivi-float 12s ease-in-out infinite;
  }
  .fx-blur-shape--brand {
    top: 10%; left: 5%;
    width: 500px; height: 500px;
    background: radial-gradient(circle, var(--brand, #014DFD) 0%, transparent 70%);
    opacity: 0.6;
  }
  .fx-blur-shape--cyan {
    bottom: 10%; right: 5%;
    width: 600px; height: 600px;
    background: radial-gradient(circle, var(--cyan, #62E5FF) 0%, transparent 70%);
    opacity: 0.35;
    animation: uxdivi-float 14s ease-in-out infinite reverse;
  }
  @keyframes uxdivi-float {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50%      { transform: translate(30px, -30px) scale(1.1); }
  }
  .fx-blur-shape--sm { filter: blur(80px); }
  .fx-blur-shape--sm.fx-blur-shape--brand {
    top: 22%; left: 5%; bottom: auto; right: auto;
    width: 380px; height: 380px;
    opacity: 0.32;
  }
  .fx-blur-shape--sm.fx-blur-shape--cyan {
    top: auto; left: auto; bottom: 22%; right: 5%;
    width: 420px; height: 420px;
    opacity: 0.20;
  }
  .fx-blur-shape--alt.fx-blur-shape--brand { left: auto; right: 5%; }
  .fx-blur-shape--alt.fx-blur-shape--cyan  { right: auto; left: 5%; }
  .glow-orb-center {
    position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
    width: 600px; height: 380px;
    background: radial-gradient(ellipse, rgba(1,77,253,0.4), rgba(98,229,255,0.12) 50%, transparent 70%);
    border-radius: 50%;
    filter: blur(50px);
    pointer-events: none;
    z-index: 0;
  }
  .glow-orb-center--sm {
    position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
    width: 520px; height: 360px;
    background: radial-gradient(ellipse, rgba(1,77,253,0.22), rgba(98,229,255,0.08) 50%, transparent 75%);
    border-radius: 50%;
    filter: blur(60px);
    pointer-events: none;
    z-index: 0;
  }
  /* No-cuts: clip-path para que las atmósferas sangren entre secciones */
  #divi5ai, #pilares, #rutas, #como, #cursos, #vibe-coding, #jeff, #testimonios, #planes, #blog, #cta-final,
  .home-hero {
    position: relative;
    isolation: isolate;
    overflow: visible !important;
    clip-path: inset(-140px 0 -140px 0);
  }
  /* Asegurar que el contenido (.wrap) quede por encima de las atmósferas */
  #divi5ai > .wrap, #pilares > .wrap, #rutas > .wrap, #como > .wrap,
  #cursos > .wrap, #vibe-coding > .wrap, #jeff > .wrap, #testimonios > .wrap,
  #planes > .wrap, #blog > .wrap, #cta-final > .wrap {
    position: relative;
    z-index: 1;
  }
  .home-hero > .wrap { position: relative; z-index: 1; }
  @media (prefers-reduced-motion: reduce) {
    .fx-blur-shape { animation: none; }
  }

  /* ═══ HERO centrado tipo Planes (sin imagen lateral) ═══ */
  .home-hero .hh-grid {
    grid-template-columns: 1fr !important;
    text-align: center;
    max-width: 920px;
    margin: 0 auto;
  }
  .home-hero .hh-grid > div:first-child > * { margin-left: auto; margin-right: auto; }
  .home-hero .hh-grid .ctas { justify-content: center; }
  .home-hero .hh-grid .trust { justify-content: center; }
  .home-hero .hh-grid .sub { max-width: 720px; margin-left: auto; margin-right: auto; }
  .home-hero .hero-mock { display: none !important; }
  /* Stars del hero como cajas Trustpilot verdes (mismo patrón del Planes) */
  .home-hero .trust .stars-tp {
    display: inline-flex; gap: 4px; margin-right: 6px; vertical-align: -3px;
  }
  .home-hero .trust .stars-tp .tp-box {
    width: 18px; height: 18px;
    border-radius: 3px;
    background: #00B67A;
    display: grid; place-items: center;
  }
  .home-hero .trust .stars-tp .tp-box svg {
    width: 12px; height: 12px;
  }

  /* Cómo funciona — quitar línea que tapa la flecha */
  .step-arrow { background: transparent !important; border: 0 !important; }
  .step-arrow::before, .step-arrow::after { display: none !important; }
  .steps::before, .steps::after { display: none !important; }

  /* Vibe Coding — quitar caja contenedora */
  #vibe-coding .launch {
    background: transparent !important;
    border: 0 !important;
    padding: 0 !important;
    box-shadow: none !important;
  }
  /* Quitar el grid de cuadrados perpendiculares (líneas 80px) del fondo
     del row — Jefferson lo señaló como "fondo de cuadrados matemáticos"
     que ensucia la sección. Las atmósferas FX globales del section ya
     dan textura suficiente. */
  #vibe-coding .launch::before { display: none !important; }
  #vibe-coding .launch-visual .course-premium-cover {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    /* Imagen recta: el rotate(-3deg) original se cortaba con la sección
       siguiente. Sin tilt en estado normal ni en hover. */
    transform: none !important;
    /* Cancela el `aspect-ratio: 3/4` + `overflow: hidden` de la regla
       base · pedido Jefferson 2026-05-18: la imagen del Método Vibe
       Coding tiene su proporción propia y se recortaba arriba/abajo. */
    aspect-ratio: auto !important;
    overflow: visible !important;
  }
  #vibe-coding .launch-visual .course-premium-cover:hover {
    transform: none !important;
  }
  #vibe-coding .launch-visual .course-premium-cover img {
    border-radius: 0 !important;
    border: 0 !important;
    /* Respeta proporción natural · sin object-fit cover ni height 100% */
    width: 100% !important;
    height: auto !important;
    object-fit: contain !important;
  }

  /* Pilar/Route cards — bordes refinados, atmósfera tipo Planes */
  .pi-card, .route-card, .jc-card, .plan-mini {
    border: 1px solid rgba(98,229,255,0.15) !important;
    background: linear-gradient(180deg, rgba(15,25,55,0.4), rgba(10,15,30,0.6)) !important;
    transition: border-color 250ms ease, transform 250ms ease, box-shadow 250ms ease;
  }
  .pi-card:hover, .route-card:hover {
    border-color: rgba(98,229,255,0.4) !important;
    transform: translateY(-3px);
    box-shadow: 0 24px 60px -20px rgba(1,77,253,0.4);
  }

  /* ═══ Video testimonials (mismo facade Vimeo de Planes) ═══ */
  .vt-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 28px;
    max-width: 1200px;
    margin: 0 auto;
  }
  .vt-card { position: relative; isolation: isolate; }
  .vt-play {
    position: relative; display: block; width: 100%;
    aspect-ratio: 9 / 16;
    border-radius: 24px; overflow: hidden;
    border: 1px solid var(--line-2);
    background: linear-gradient(180deg, rgba(15,25,55,0.6), rgba(10,15,30,0.85));
    cursor: pointer; padding: 0; isolation: isolate;
    transition: transform 350ms cubic-bezier(0.33, 1, 0.68, 1),
                box-shadow 350ms ease, border-color 250ms ease;
  }
  .vt-card:hover .vt-play {
    transform: translateY(-4px);
    box-shadow: 0 30px 60px -20px rgba(1,77,253,0.55);
    border-color: rgba(98,229,255,0.5);
  }
  .vt-poster {
    position: absolute; inset: 0;
    background:
      radial-gradient(80% 60% at 50% 30%, rgba(1,77,253,0.45), transparent 70%),
      radial-gradient(60% 50% at 80% 80%, rgba(98,229,255,0.25), transparent 70%),
      linear-gradient(180deg, #0A1230 0%, #040814 100%);
    background-size: cover; background-position: center;
    z-index: 0; transition: transform 600ms ease;
  }
  .vt-card:hover .vt-poster { transform: scale(1.04); }
  .vt-overlay {
    position: absolute; inset: 0;
    background: linear-gradient(180deg, transparent 50%, rgba(4,8,20,0.55) 100%);
    z-index: 1; pointer-events: none;
  }
  .vt-glow {
    position: absolute; top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 140px; height: 140px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(98,229,255,0.45), transparent 70%);
    filter: blur(24px); z-index: 1; opacity: 0.7;
    pointer-events: none;
    transition: opacity 350ms ease, transform 350ms ease;
  }
  .vt-card:hover .vt-glow {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.15);
  }
  .vt-play-icon {
    position: absolute; top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 72px; height: 72px;
    border-radius: 50%;
    background: linear-gradient(180deg, #FFFFFF 0%, #E8F2FF 100%);
    display: grid; place-items: center; z-index: 2;
    box-shadow: 0 14px 34px -10px rgba(1,77,253,0.7), inset 0 -2px 0 rgba(0,0,0,0.05);
    transition: transform 250ms cubic-bezier(0.33, 1, 0.68, 1), box-shadow 250ms ease;
  }
  .vt-card:hover .vt-play-icon {
    transform: translate(-50%, -50%) scale(1.1);
    box-shadow: 0 20px 50px -10px rgba(98,229,255,0.8), inset 0 -2px 0 rgba(0,0,0,0.05);
  }
  .vt-play-icon svg { width: 28px; height: 28px; color: var(--brand); margin-left: 4px; }
  .vt-duration {
    position: absolute; bottom: 14px; right: 14px; z-index: 2;
    font-family: var(--mono); font-size: 11px; color: #fff;
    background: rgba(0,0,0,0.7); padding: 4px 8px; border-radius: 6px;
    letter-spacing: 0.04em; backdrop-filter: blur(6px);
  }
  .vt-meta { margin-top: 18px; text-align: center; }
  .vt-name {
    font-family: var(--display); font-size: 16px; font-weight: 600;
    color: var(--ink); letter-spacing: -0.01em;
  }
  .vt-role {
    font-family: var(--mono); font-size: 11px; color: var(--ink-3);
    margin-top: 6px; letter-spacing: 0.06em; text-transform: uppercase;
  }
  .vt-card.is-playing .vt-play { display: none; }
  .vt-iframe-wrap {
    position: relative; width: 100%; aspect-ratio: 9 / 16;
    border-radius: 24px; overflow: hidden;
    border: 1px solid var(--line-2); background: #000;
  }
  .vt-iframe-wrap iframe {
    position: absolute; inset: 0; width: 100%; height: 100%; border: 0;
  }
  @keyframes vt-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(98,229,255,0.5); }
    50%      { box-shadow: 0 0 0 12px rgba(98,229,255,0); }
  }
  .vt-card:hover .vt-play-icon { animation: vt-pulse 1.6s ease-out infinite; }
  @media (max-width: 1100px) { .vt-grid { grid-template-columns: repeat(2, 1fr); gap: 24px; } }
  @media (max-width: 600px) { .vt-grid { grid-template-columns: 1fr; max-width: 360px; } }

  /* ═══ CTA FINAL — Aurora Gradient (mismo del Planes) ═══ */
  #planes ~ section .final, body > section:last-of-type .final, .final {
    isolation: isolate;
    background: linear-gradient(180deg, rgba(15,25,55,0.85), rgba(10,15,30,0.92));
    border: 0 !important;
  }
  .final::before {
    content: ""; position: absolute; inset: -30%;
    background:
      radial-gradient(circle at 20% 30%, var(--brand, #014DFD) 0%, transparent 35%),
      radial-gradient(circle at 75% 20%, var(--cyan, #62E5FF) 0%, transparent 35%),
      radial-gradient(circle at 50% 80%, var(--brand-light, #4A7EFF) 0%, transparent 40%);
    filter: blur(80px); opacity: 0.6; z-index: -1; pointer-events: none;
    transform-origin: center center; will-change: transform;
    animation: uxdivi-aurora-drift 22s ease-in-out infinite;
  }
  @keyframes uxdivi-aurora-drift {
    0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
    25%      { transform: translate3d(5%, -5%, 0) scale(1.10); }
    50%      { transform: translate3d(-4%, 4%, 0) scale(1.18); }
    75%      { transform: translate3d(-5%, -3%, 0) scale(1.12); }
  }
  .final::after {
    content: ""; position: absolute; inset: 0;
    background-image:
      linear-gradient(rgba(98,229,255,0.03) 1px, transparent 1px),
      linear-gradient(90deg, rgba(98,229,255,0.03) 1px, transparent 1px);
    background-size: 48px 48px;
    mask-image: radial-gradient(ellipse at center, #000 20%, transparent 70%);
    -webkit-mask-image: radial-gradient(ellipse at center, #000 20%, transparent 70%);
    z-index: -1; pointer-events: none;
  }
  .final h2 { text-wrap: balance; }
  @media (prefers-reduced-motion: reduce) {
    .final::before { animation: none; }
  }

  /* ═══════════════════════════════════════════════════════════
     LOADING STATE · grid de cursos durante el cambio de categoría.
     Se aplica la clase `.is-loading` al grid wrap desde el JS del
     filtro. El contenido se difumina (blur 4px + opacity 0.5) y se
     centra un spinner cyan rotando.
     ═══════════════════════════════════════════════════════════ */
  .courses-grid { position: relative; isolation: isolate; }
  .courses-grid > * { transition: filter 0.18s ease, opacity 0.18s ease; }
  .courses-grid.is-loading > * {
    filter: blur(4px);
    opacity: 0.55;
    pointer-events: none;
  }
  .courses-grid.is-loading::after {
    content: "";
    position: absolute;
    top: 50%; left: 50%;
    width: 48px; height: 48px;
    margin: -24px 0 0 -24px;
    border: 3px solid rgba(98, 229, 255, 0.2);
    border-top-color: var(--cyan, #62E5FF);
    border-radius: 50%;
    animation: uxdivi-spin 0.85s linear infinite;
    z-index: 10;
    box-shadow: 0 0 30px rgba(98, 229, 255, 0.45),
                inset 0 0 12px rgba(98, 229, 255, 0.15);
    pointer-events: none;
  }
  @keyframes uxdivi-spin {
    to { transform: rotate(360deg); }
  }
  /* Cuando el grid es alto el spinner queda fuera de viewport ·
     en mobile lo subimos al top del grid (96px) para garantizar
     visibilidad inmediata al cambiar de tab. */
  @media (max-width: 700px) {
    .courses-grid.is-loading::after { top: 96px; margin-top: 0; }
  }

  /* ═══════════════════════════════════════════════════════════
     TIPOGRAFÍA · font-weight 600 EXPLÍCITO en todos los headings.
     Garantía contra user agent defaults que pintan 700 cuando la
     regla del DS core no llega a aplicarse (Jefferson 2026-05-16).
     ═══════════════════════════════════════════════════════════ */
  .ux-home h1,
  .ux-home h2,
  .ux-home h3,
  .ux-home h4,
  .ux-home .jeff-h,
  .ux-home .aa-display-h { font-weight: 600; }

  /* ═══════════════════════════════════════════════════════════
     SECCIONES · padding vertical uniforme (regla global).
     Override del default del core (`section { padding: 100px 0 }`)
     a 60px en desktop y 20px en móvil (Jefferson 2026-05-16).
     Aplica a TODAS las <section> dentro de .ux-home incluido
     .home-hero. Padding lateral lo sigue manejando .wrap.
     ═══════════════════════════════════════════════════════════ */
  .ux-home section { padding: 60px 0; }

  /* ═══════════════════════════════════════════════════════════
     RESPONSIVE · colapso de grids no-responsive a tablet y mobile.
     Breakpoints alineados con los otros @media del rediseño 2026:
     · 1100px → tablet (2 cols donde había 3-4)
     · 700px  → mobile (1 col · hero stack · launch ajustado)
     Cajas afectadas:
     · §Hero hh-grid · §3 tool-chips · §5 routes-grid · §6 steps
     · §7 courses-grid · §8 launch · §9 jeff-hero · §10 t-marquee
     · §11 plans-compact · §12 blog-grid
     ═══════════════════════════════════════════════════════════ */
  @media (max-width: 1100px) {
    .home-hero .hh-grid { grid-template-columns: 1fr; gap: 40px; }
    .home-hero .sub { max-width: none; }

    .tool-chips { grid-template-columns: repeat(2, 1fr); }
    .routes-grid { grid-template-columns: repeat(2, 1fr); }
    .courses-grid { grid-template-columns: repeat(2, 1fr); }
    .t-marquee { grid-template-columns: repeat(2, 1fr); }
    .blog-grid { grid-template-columns: repeat(2, 1fr); }

    .steps { grid-template-columns: 1fr; gap: 24px; }
    .steps > .step-arrow,
    .steps > [class*="connector"] { display: none; }

    .launch { grid-template-columns: 1fr; gap: 36px; padding: 56px 36px; }
    /* En layout apilado · imagen arriba del texto (orden invertido para
       que el cover del Método Vibe Coding entre primero en visibilidad). */
    .launch .copy { order: 2; }
    .launch .launch-visual { order: 1; }
    .jeff-hero { grid-template-columns: 1fr; gap: 36px; }
    .jeff-photo { max-width: 480px; margin: 0 auto; }
    .plans-compact { grid-template-columns: 1fr; max-width: 520px; }
  }

  @media (max-width: 700px) {
    /* Padding vertical de secciones · regla global Jefferson 2026-05-16
       (40px tras ajuste · 20px dejaba las secciones muy pegadas) */
    .ux-home section { padding: 40px 0; }

    .tool-chips,
    .routes-grid,
    .courses-grid,
    .t-marquee,
    .blog-grid { grid-template-columns: 1fr; }

    .bento--xl .b-visual { grid-template-columns: repeat(2, 1fr); }

    .home-hero h1 { font-size: clamp(34px, 7.5vw, 44px); }
    .home-hero .sub { font-size: 16px; }
    /* Pill IA · sin letter-spacing extendido en móvil para que el texto
       respire sin desbordar el chip cuando el viewport es chico. */
    .home-hero .pill-ai { letter-spacing: 0; font-size: 10.5px; padding: 7px 12px; }
    /* CTAs · ambos botones en UNA sola línea (no stack vertical).
       flex: 1 1 0 distribuye el ancho disponible · nowrap + padding y
       font-size reducidos garantizan que `Acceder desde $10/mes` quepa
       junto a `Ver cursos` en viewports de 360-414px. */
    .home-hero .ctas { flex-direction: row; flex-wrap: nowrap; gap: 8px; align-items: stretch; }
    .home-hero .ctas > a {
      flex: 1 1 0;
      min-width: 0;
      padding: 11px 14px;
      font-size: 12.5px;
      white-space: nowrap;
      justify-content: center;
      text-align: center;
    }
    .home-hero .ctas > a .arr { display: none; }

    .launch { padding: 40px 22px; }
    .launch h2 { font-size: 28px; }
    /* CTA final · padding compacto en mobile (Jefferson 2026-05-16). */
    .final { padding: 40px 20px; }
    /* Trustpilot bar · en mobile el grid `auto 1fr auto` del core
       hace que el texto del medio rompa palabra por palabra. Lo
       apilamos verticalmente, centramos y compactamos. */
    .trustpilot-bar {
      grid-template-columns: 1fr;
      gap: 16px;
      padding: 22px 20px;
      text-align: center;
    }
    .trustpilot-bar .tp-logo { justify-content: center; }
    .trustpilot-bar .tp-meta {
      justify-content: center;
      flex-direction: row;
      flex-wrap: wrap;
      gap: 8px 12px;
      font-size: 13.5px;
    }
    .trustpilot-bar .tp-meta .rating { font-size: 22px; }
    .trustpilot-bar > .btn { justify-self: center; }

    /* Botón CTA del launch · permitir wrap en mobile para que el texto
       largo no desborde el container. Padding y font ajustados. */
    .launch .launch-cta {
      display: flex;
      width: 100%;
      max-width: 100%;
      box-sizing: border-box;
      white-space: normal;
      text-align: center;
      justify-content: center;
      align-items: center;
      gap: 8px;
      padding: 14px 18px;
      font-size: 13.5px;
      line-height: 1.3;
    }

    .cd-cell { min-width: 68px; padding: 12px 14px; }
    .cd-cell .cv { font-size: 26px; }

    /* En mobile · ocultar los filtros de categoría completos (en pantallas
       chicas ocupan demasiado vertical sin aportar valor) y mostrar solo
       los 4 cursos más recientes (5° y 6° ocultos). El catálogo completo
       con filtros vive en /cursos/. */
    .fc-filters { display: none; }
    .courses-grid .fc-card:nth-child(n+5) { display: none; }

    /* Bento strip · chips compactos en mobile para que fluyan en filas
       (en lugar de stackearse uno por línea). Reducción coordinada de
       font-size, padding, gap del strip y del ícono interno. */
    .bento--strip { gap: 6px; padding: 16px 14px; flex-wrap: wrap; justify-content: center; }
    .bento--strip .b-chip {
      font-size: 10.5px;
      padding: 5px 10px;
      gap: 5px;
      letter-spacing: 0.02em;
    }
    .bento--strip .b-chip svg { width: 12px; height: 12px; }
  }