/* ==========================================================================
   LA TRIBU DEL ORO — PÁGINAS INTERNAS (v2)
   Se carga después de styles.css, tribu-v2.css y antes del <style> de cada
   página. Por eso todo va con prefijo body.page para ganar especificidad.
   Mismo lenguaje del inicio: fondo claro con brillos suaves, tarjetas de
   vidrio, rojo solo en acciones, oro como acento, banners en rojo profundo.
   ========================================================================== */

/* ---------- Tipografía ---------- */
body.page { font-family: var(--body); color: var(--text); }
body.page h1, body.page h2, body.page h3, body.page h4,
body.page .hero-title, body.page .section-title, body.page .page-title {
  font-family: var(--display);
  color: var(--ink);
  letter-spacing: -0.025em;
  text-wrap: balance;
}
body.page .hero-title { font-weight: 800; line-height: 1.02; font-size: clamp(36px, 4.6vw, 56px) !important; }
body.page .hero-title span, body.page .page-title span { color: var(--gold-logo, #D3AC00); }
body.page .hero-subtitle, body.page .section-subtitle { color: var(--muted); line-height: 1.65; }
body.page .section-title { font-size: clamp(28px, 3.4vw, 40px); font-weight: 800; }

/* ---------- Héroes internos: transparentes sobre el brillo de la página ---------- */
body.page .course-hero, body.page .classroom-header, body.page .signals-hero,
body.page .efi-hero, body.page .ib-hero, body.page .calc-page-hero,
body.page .page-header, body.page .glossary-hero, body.page .help-hero {
  background: transparent;
  border-bottom: 0;
  padding-top: 64px;
  padding-bottom: 56px;
}
body.page .section, body.page section[style*="background"] { background: transparent !important; }

/* Etiquetas de los héroes: pastilla de vidrio con texto rojo */
body.page .course-tag, body.page .classroom-tag, body.page .signals-tag, body.page .efi-tag,
body.page .ib-tag, body.page .calc-tag, body.page .glossary-intro-badge, body.page .help-badge,
body.page .video-label-badge {
  background: rgba(255, 255, 255, 0.6);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border: 1px solid rgba(229, 185, 9, 0.25);
  color: var(--gold-logo, #D3AC00);
  border-radius: 999px;
  box-shadow: inset 0 1px 0 #fff;
}

/* ---------- Botones ---------- */
body.page .btn-hero-red, body.page .btn-referral {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 0 24px; border-radius: 999px; font-weight: 700;
  background: rgba(229, 185, 9, 0.1);
  border: 1px solid rgba(229, 185, 9, 0.45);
  color: var(--red);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85), 0 8px 22px -16px rgba(229, 185, 9, 0.55);
  transition: background .2s, transform .2s, box-shadow .2s;
}
body.page .btn-hero-red:hover, body.page .btn-referral:hover { background: rgba(229, 185, 9, 0.17); transform: translateY(-1px); color: var(--red); }
body.page .btn-hero-outline {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: 0 24px; border-radius: 999px; font-weight: 700;
  background: rgba(255, 255, 255, 0.6); color: var(--ink);
  border: 1px solid rgba(255, 255, 255, 0.85);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  box-shadow: inset 0 1px 0 #fff, 0 8px 22px -16px rgba(15, 23, 42, 0.35);
}
body.page .btn-hero-outline:hover { background: rgba(255, 255, 255, 0.85); }
body.page .btn-telegram, body.page .btn-support-wa {
  border-radius: 999px; min-height: 48px;
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 8px 22px -14px rgba(0, 0, 0, 0.35);
}
body.page .btn-telegram { background: rgba(217, 180, 34, 0.85); border: 1px solid rgba(250, 232, 160, 0.7); }
body.page .btn-support-wa { background: rgba(37, 211, 102, 0.85); border: 1px solid rgba(190, 255, 215, 0.7); }

/* ---------- Tarjetas de vidrio ---------- */
body.page .module-card, body.page .included-card, body.page .player-meta, body.page .playlist-card,
body.page .safety-box, body.page .telegram-preview-card, body.page .feature-card, body.page .video-info-box,
body.page .step-card, body.page .benefit-card, body.page .ib-form-box, body.page .calc-widget,
body.page .calc-guide-card, body.page .glossary-item-card, body.page .faq-item, body.page .legal-document,
body.page .video-card-slide, body.page .alphabet-btn, body.page .help-tab-btn, body.page .video-tab-btn,
body.page .filter-chip {
  background: rgba(255, 255, 255, 0.58);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  backdrop-filter: blur(16px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, 0.8);
  box-shadow: 0 12px 32px -20px rgba(15, 23, 42, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.9);
}
body.page .module-card, body.page .included-card, body.page .playlist-card, body.page .safety-box,
body.page .telegram-preview-card, body.page .feature-card, body.page .step-card, body.page .benefit-card,
body.page .ib-form-box, body.page .calc-widget, body.page .calc-guide-card, body.page .glossary-item-card,
body.page .faq-item, body.page .legal-document { border-radius: 20px; }
body.page .module-card:hover, body.page .feature-card:hover, body.page .step-card:hover,
body.page .benefit-card:hover, body.page .glossary-item-card:hover, body.page .calc-guide-card:hover {
  background: rgba(255, 255, 255, 0.8);
  border-color: rgba(255, 255, 255, 0.95);
  transform: translateY(-3px);
}
body.page .playlist-header, body.page .glossary-badge-cat, body.page .telegram-bubble-body,
body.page .lesson-num, body.page .tab-icon-box { background: rgba(252, 251, 248, 0.6); }
body.page .lesson-item { background: transparent; }
body.page .lesson-item:hover { background: rgba(255, 255, 255, 0.6); }

/* Botones de pestaña / filtros / abecedario: pastillas de vidrio, activo en rojo */
body.page .alphabet-btn, body.page .help-tab-btn, body.page .filter-chip { border-radius: 999px; color: var(--ink); }
body.page .alphabet-btn.active, body.page .help-tab-btn.active, body.page .filter-chip.active,
body.page .video-tab-btn.active {
  background: rgba(229, 185, 9, 0.1);
  border-color: rgba(229, 185, 9, 0.45);
  color: var(--red);
}
body.page .letter-title { background: rgba(229, 185, 9, 0.1); color: var(--gold-logo, #D3AC00); border: 1px solid rgba(229, 185, 9, 0.3); }
body.page .letter-line { background: linear-gradient(90deg, rgba(229, 185, 9, .35), rgba(223, 183, 72, .25) 50%, transparent); }

/* Campos de formulario y calculadora */
body.page .ib-input, body.page .calc-num-input, body.page .calc-select, body.page input[type="text"], body.page input[type="search"] {
  background: rgba(255, 255, 255, 0.75);
  border: 1px solid #f0ede2;
  border-radius: 12px;
}
body.page .ib-input:focus, body.page .calc-num-input:focus, body.page .calc-select:focus,
body.page input[type="text"]:focus, body.page input[type="search"]:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(223, 183, 72, 0.25); }
body.page .risk-btn { border-radius: 999px; background: rgba(255, 255, 255, 0.6); border: 1px solid #f0ede2; }
body.page .risk-btn.active { background: rgba(229, 185, 9, 0.1); border-color: rgba(229, 185, 9, 0.45); color: var(--red); }

/* ---------- Videos: marcos oscuros con borde de vidrio ---------- */
body.page .hero-video-box, body.page .player-container, body.page .video-frame-box, body.page .video-thumb {
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.7);
  box-shadow: 0 30px 60px -28px rgba(15, 23, 42, 0.55);
}
body.page .hero-play-btn, body.page .video-play-mini {
  background: rgba(255, 255, 255, 0.55) !important;
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.8);
}
body.page .hero-play-btn svg, body.page .video-play-mini svg { fill: var(--red) !important; }

/* ---------- Banners oscuros: mismo rojo profundo del inicio ---------- */
body.page .cta-banner, body.page .referral-banner, body.page .ib-cta-banner, body.page .support-box {
  background: radial-gradient(100% 140% at 0% 0%, #7a1116 0%, #3d0a0d 50%, #1a0b0c 100%) !important;
  border: 1px solid rgba(252, 230, 143, 0.35);
  border-radius: 32px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 30px 60px -30px rgba(122, 17, 22, 0.7);
}
body.page .cta-banner h2, body.page .referral-banner h2, body.page .ib-cta-banner h2, body.page .support-box h3,
body.page .cta-banner h3, body.page .referral-banner h3, body.page .ib-cta-banner h3 { color: #fff; }
body.page .cta-banner .btn-hero-red, body.page .referral-banner .btn-hero-red, body.page .referral-banner .btn-referral,
body.page .ib-cta-banner .btn-hero-red {
  background: rgba(229, 185, 9, 0.28); color: #fff; border-color: rgba(251, 224, 114, 0.7);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3);
}
/* Resultado de la calculadora: panel oscuro de vidrio con cifras en oro */
body.page .calc-result-box {
  background: linear-gradient(160deg, rgba(23, 30, 45, 0.94), rgba(13, 17, 23, 0.96)) !important;
  border: 1px solid rgba(223, 183, 72, 0.35);
  border-radius: 20px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 24px 50px -24px rgba(15, 23, 42, 0.6);
}
body.page .calc-res-val { color: var(--gold-l) !important; font-family: var(--display); font-variant-numeric: tabular-nums; }

/* Aviso de riesgo legal */
body.page .risk-alert-box { background: rgba(254, 252, 242, 0.7); border-radius: 16px; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }

/* Ocultar líneas divisorias viejas: el espacio y el vidrio ya separan */
body.page .divider-base { opacity: .5; }

@media (max-width: 900px) {
  body.page .course-hero, body.page .classroom-header, body.page .signals-hero, body.page .efi-hero,
  body.page .ib-hero, body.page .calc-page-hero, body.page .page-header, body.page .glossary-hero,
  body.page .help-hero { padding-top: 36px; padding-bottom: 36px; }
}

/* La info bajo los reproductores va sólida para que se lea sobre el marco oscuro */
body.page .player-meta, body.page .video-info-box { background: rgba(255, 255, 255, 0.94); -webkit-backdrop-filter: none; backdrop-filter: none; }
body.page .hero-play-btn, body.page .video-play-mini { background: rgba(255, 255, 255, 0.82) !important; box-shadow: 0 0 0 8px rgba(255, 255, 255, 0.16), 0 10px 26px -8px rgba(0, 0, 0, 0.5) !important; }

/* ==========================================================================
   CAPA COMÚN DE INTERACCIÓN (mismo lenguaje del inicio y de Videos gratis)
   Espacios más compactos, íconos de color, hover con zoom corto, entrada
   suave y foco visible. Todo el movimiento respeta prefers-reduced-motion.
   ========================================================================== */

/* ---------- Espacios más compactos ---------- */
body.page .course-hero, body.page .classroom-header, body.page .signals-hero,
body.page .efi-hero, body.page .ib-hero, body.page .calc-page-hero,
body.page .page-header, body.page .glossary-hero, body.page .help-hero { padding-bottom: 28px; }
body.page .section { padding-top: 44px; padding-bottom: 44px; }
body.page .section-header { margin-bottom: 28px; }
@media (max-width: 900px) {
  body.page .section { padding-top: 32px; padding-bottom: 32px; }
}

/* ---------- Títulos del pie: se leían oscuros sobre el fondo oscuro ---------- */
.v2 .footer-col-title { color: #ffffff; }

/* ---------- Íconos de las tarjetas en chips de color ---------- */
body.page .solution-logo-box { width: 52px; height: 52px; border-radius: 16px; }
body.page .features-grid > :nth-child(3n+1) .solution-logo-box,
body.page .benefits-grid > :nth-child(3n+1) .solution-logo-box,
body.page .calc-guide-grid > :nth-child(3n+1) .solution-logo-box { background: linear-gradient(160deg, rgba(254, 248, 226,.9), rgba(229, 185, 9,.14)) !important; color: var(--gold-logo, #D3AC00) !important; }
body.page .features-grid > :nth-child(3n+2) .solution-logo-box,
body.page .benefits-grid > :nth-child(3n+2) .solution-logo-box,
body.page .calc-guide-grid > :nth-child(3n+2) .solution-logo-box { background: linear-gradient(160deg, rgba(254, 248, 224,.9), rgba(217, 180, 34,.16)) !important; color: #9a8017 !important; }
body.page .features-grid > :nth-child(3n) .solution-logo-box,
body.page .benefits-grid > :nth-child(3n) .solution-logo-box,
body.page .calc-guide-grid > :nth-child(3n) .solution-logo-box { background: linear-gradient(160deg, rgba(251, 248, 235,.95), rgba(167, 153, 95,.2)) !important; color: #8f8149 !important; }
body.page .solution-logo-box { transition: transform .3s cubic-bezier(.34,1.56,.64,1), box-shadow .3s ease; }
body.page .tab-icon-box { transition: transform .25s ease, background-color .2s ease; }

/* ---------- Foco visible con teclado ---------- */
body.page a:focus-visible, body.page button:focus-visible, body.page [role="button"]:focus-visible,
body.page .lesson-item:focus-visible, body.page input:focus-visible, body.page select:focus-visible {
  outline: 2px solid var(--red); outline-offset: 3px;
}

/* ---------- Transiciones (sin !important para que reduced-motion las apague) ---------- */
body.page .btn-hero-red, body.page .btn-hero-outline, body.page .btn-referral, body.page .btn-telegram,
body.page .btn-support-wa, body.page .btn-support-wa, body.page .risk-btn, body.page .alphabet-btn,
body.page .help-tab-btn, body.page .video-tab-btn {
  transition: transform .25s cubic-bezier(.16,1,.3,1), background-color .2s ease, border-color .2s ease, box-shadow .25s ease, color .2s ease;
}
body.page .lesson-item { transition: background-color .2s ease, transform .2s ease; }
body.page .lesson-num { transition: background-color .2s ease, color .2s ease, transform .25s cubic-bezier(.34,1.56,.64,1); }
body.page .faq-item { transition: border-color .2s ease, box-shadow .25s ease, transform .25s ease; }

/* ---------- Hover (solo con mouse) ---------- */
@media (hover: hover) {
  body.page .btn-hero-red:hover, body.page .btn-hero-outline:hover, body.page .btn-referral:hover,
  body.page .btn-telegram:hover, body.page .btn-support-wa:hover { transform: translateY(-2px) scale(1.03); }
  body.page .risk-btn:hover, body.page .alphabet-btn:hover, body.page .help-tab-btn:hover,
  body.page .video-tab-btn:hover { transform: scale(1.05); }
  body.page .feature-card:hover .solution-logo-box, body.page .benefit-card:hover .solution-logo-box,
  body.page .calc-guide-card:hover .solution-logo-box { transform: scale(1.1) rotate(-4deg); box-shadow: 0 10px 20px -10px rgba(15,23,42,.35); }
  body.page .included-card:hover, body.page .safety-box:hover { box-shadow: 0 22px 44px -22px rgba(15,23,42,.3), inset 0 1px 0 rgba(255,255,255,.9); }
  body.page .lesson-item:hover { transform: translateX(3px); }
  body.page .lesson-item:hover .lesson-num { transform: scale(1.12); }
  body.page .video-tab-btn:hover .tab-icon-box { transform: scale(1.1); }
  body.page .faq-item:hover { transform: translateY(-1px); box-shadow: 0 14px 28px -20px rgba(15,23,42,.35); }
  body.page .step-card:hover .step-number, body.page .module-card:hover .module-num { letter-spacing: .09em; }
  body.page .step-card .step-number, body.page .module-card .module-num { transition: letter-spacing .3s ease; }
}

/* ---------- Anillo del botón de play al pasar el cursor ---------- */
body.page .hero-play-btn::after { content: ''; position: absolute; inset: -3px; border-radius: 50%; border: 2px solid rgba(229, 185, 9,.55); opacity: 0; pointer-events: none; }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  body.page .hero-video-box:hover .hero-play-btn::after, body.page .video-frame-box:hover .hero-play-btn::after { animation: pg-ring 1.3s ease-out infinite; }
}
@keyframes pg-ring { from { opacity: .9; transform: scale(1); } to { opacity: 0; transform: scale(1.7); } }

/* ---------- Entrada: el encabezado aparece escalonado al cargar ---------- */
@media (prefers-reduced-motion: no-preference) {
  body.page :is(.course-tag, .classroom-tag, .signals-tag, .efi-tag, .ib-tag, .calc-tag, .glossary-intro-badge, .help-badge) { animation: pg-in .5s cubic-bezier(.2,.8,.2,1) backwards; }
  body.page :is(.hero-title, .glossary-hero-title, .help-hero-title) { animation: pg-in .6s cubic-bezier(.2,.8,.2,1) .06s backwards; }
  body.page :is(.hero-subtitle, .glossary-hero-desc, .help-hero-subtitle, .calc-page-hero .section-subtitle) { animation: pg-in .6s cubic-bezier(.2,.8,.2,1) .12s backwards; }
  body.page :is(.hero-buttons, .glossary-search-wrapper, .help-tabs-wrapper) { animation: pg-in .6s cubic-bezier(.2,.8,.2,1) .18s backwards; }
  body.page :is(.hero-video-wrapper, .hero-video-box) { animation: pg-in .7s cubic-bezier(.2,.8,.2,1) .15s backwards; }
  body.page .faq-item.open .faq-answer { animation: pg-in .3s ease backwards; }
  body.page .calc-res-val.bump { animation: pg-bump .4s ease; }
  body.page .telegram-preview-card .telegram-live { animation: pg-blink 1.6s ease-in-out infinite; }
}
@keyframes pg-in { from { opacity: 0; transform: translateY(14px); } }
@keyframes pg-bump { 40% { transform: scale(1.06); } }
@keyframes pg-blink { 50% { opacity: .35; } }

/* ---------- Entrada al hacer scroll (solo navegadores que lo soportan; si no, todo se ve normal) ---------- */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    body.page :is(.feature-card, .benefit-card, .step-card, .module-card, .calc-guide-card, .included-card, .safety-box,
      .playlist-card, .player-container, .player-meta, .calc-widget, .telegram-preview-card, .cta-banner, .referral-banner,
      .ib-cta-banner, .support-box, .ib-form-box, .video-switch-grid, .legal-document, .faq-item, .glossary-item-card, .letter-header) {
      animation: pg-reveal linear backwards; animation-timeline: view(); animation-range: entry 0% entry 40%;
    }
  }
}
@keyframes pg-reveal { from { opacity: 0; transform: translateY(18px); } }

/* ---------- Íconos de las tarjetas: versión rellena a dos tonos, cada uno con su gesto al pasar el cursor ---------- */
body.page .solution-logo-box svg { width: 34px; height: 34px; overflow: visible; }
body.page .solution-logo-box svg * { transform-box: fill-box; transform-origin: center; }
body.page .tab-icon-box { background: rgba(249, 247, 241,.9); }
body.page .video-tab-btn.active .tab-icon-box { background: rgba(229, 185, 9,.12); color: var(--red); }
body.page .ic-bars rect { transform-origin: bottom center; }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  body.page :is(.feature-card, .benefit-card, .calc-guide-card):hover .ic-shield { animation: pg-shake .5s ease; }
  body.page :is(.feature-card, .benefit-card, .calc-guide-card):hover .ic-bars rect { animation: pg-grow .6s cubic-bezier(.2,.8,.2,1) backwards; }
  body.page :is(.feature-card, .benefit-card, .calc-guide-card):hover .ic-bars rect:nth-child(2) { animation-delay: .08s; }
  body.page :is(.feature-card, .benefit-card, .calc-guide-card):hover .ic-bars rect:nth-child(3) { animation-delay: .16s; }
  body.page :is(.feature-card, .benefit-card, .calc-guide-card):hover .ic-check .tick { stroke-dasharray: 16; animation: pg-draw .6s ease backwards; }
  body.page :is(.feature-card, .benefit-card, .calc-guide-card):hover .ic-coin .disc { animation: pg-flip .7s ease; }
  body.page :is(.feature-card, .benefit-card, .calc-guide-card):hover .ic-user .head { animation: pg-bob .5s ease; }
  body.page :is(.feature-card, .benefit-card, .calc-guide-card):hover .ic-book .l { animation: pg-page-l .6s ease; }
  body.page :is(.feature-card, .benefit-card, .calc-guide-card):hover .ic-book .r { animation: pg-page-r .6s ease; }
  body.page :is(.feature-card, .benefit-card, .calc-guide-card):hover .ic-target .o { animation: pg-pulse .7s ease; }
  body.page :is(.feature-card, .benefit-card, .calc-guide-card):hover .ic-target .m { animation: pg-pulse .7s ease .08s; }
}
@keyframes pg-shake { 20% { transform: rotate(-8deg); } 50% { transform: rotate(7deg); } 80% { transform: rotate(-3deg); } }
@keyframes pg-grow { from { transform: scaleY(.35); } }
@keyframes pg-draw { from { stroke-dashoffset: 16; } }
@keyframes pg-flip { to { transform: rotateY(360deg); } }
@keyframes pg-bob { 40% { transform: translateY(-2px); } }
@keyframes pg-page-l { 40% { transform: rotate(-6deg); } }
@keyframes pg-page-r { 40% { transform: rotate(6deg); } }
@keyframes pg-pulse { 40% { transform: scale(1.15); } }

/* ==========================================================================
   AULA (Copy trading y Cripto): color de acento por página con --acc / --acc-d
   ========================================================================== */
body.page .classroom-header { position: relative; isolation: isolate; overflow: hidden; }
body.page .classroom-header::before { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; -webkit-mask-image: linear-gradient(#000 55%, transparent); mask-image: linear-gradient(#000 55%, transparent);
  background: radial-gradient(42% 70% at 90% 0%, var(--acc-glow, rgba(229, 185, 9,.14)), transparent 70%), radial-gradient(36% 60% at 2% 100%, var(--acc-glow2, rgba(223,183,72,.2)), transparent 70%); }
body.page .classroom-tag { color: var(--acc-d, var(--red)); border-color: color-mix(in srgb, var(--acc, #e5b909) 35%, transparent); }
body.page .classroom-header .hero-title span { background: linear-gradient(90deg, var(--acc-d, #e5b909), var(--acc, #e5b909) 55%, var(--acc-d, #e5b909)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.cls-pills { list-style: none; display: flex; flex-wrap: wrap; gap: 10px; margin: 22px 0 0; padding: 0; }
.cls-pills li { display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px 7px 10px; border-radius: 999px; font-size: 13px; font-weight: 700; color: var(--acc-d, #c49e08);
  background: rgba(255,255,255,.65); border: 1px solid color-mix(in srgb, var(--acc, #e5b909) 28%, transparent); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: inset 0 1px 0 #fff; transition: transform .2s ease; }
.cls-pills svg { width: 18px; height: 18px; color: var(--acc, #e5b909); }
body.page .player-container { box-shadow: 0 30px 60px -28px color-mix(in srgb, var(--acc, #0f172a) 55%, transparent); border-color: color-mix(in srgb, var(--acc, #fff) 35%, white); }
body.page .current-lesson-badge { display: inline-block; padding: 3px 12px; border-radius: 999px; background: color-mix(in srgb, var(--acc, #e5b909) 12%, white); color: var(--acc-d, #c49e08); letter-spacing: .03em; }

/* Barra de progreso del temario y clases vistas */
.pl-progress { margin-top: 12px; height: 6px; border-radius: 6px; background: rgba(15,23,42,.08); overflow: hidden; --p: 25%; }
.pl-progress i { display: block; height: 100%; width: var(--p); border-radius: 6px; background: linear-gradient(90deg, var(--acc, #e5b909), var(--acc-d, #c49e08)); transition: width .5s cubic-bezier(.2,.8,.2,1); }
body.page .lesson-item.done .lesson-num { background: color-mix(in srgb, var(--acc, #e5b909) 16%, white); color: transparent; position: relative; }
body.page .lesson-item.done .lesson-num::after { content: ''; position: absolute; left: 50%; top: 50%; width: 5px; height: 9px; border: solid var(--acc-d, #c49e08); border-width: 0 2.2px 2.2px 0; transform: translate(-50%, -62%) rotate(45deg); }
body.page .lesson-item.active { box-shadow: inset 4px 0 0 var(--red); }

/* Tarjeta de ayuda (antes con estilos en línea) */
.help-card { margin-top: 20px; padding: 20px; text-align: center; border-radius: 22px; background: rgba(255,255,255,.62); -webkit-backdrop-filter: blur(16px) saturate(160%); backdrop-filter: blur(16px) saturate(160%);
  border: 1px solid rgba(255,255,255,.85); box-shadow: 0 14px 34px -22px rgba(15,23,42,.3), inset 0 1px 0 rgba(255,255,255,.9); }
.help-card p { font-size: 13.5px; color: #475569; margin-bottom: 12px; font-weight: 500; }
.help-card .btn-hero-outline { width: 100%; font-size: 13.5px; min-height: 44px; }

/* Reglas de oro con íconos */
body.page .safety-box { border-radius: 26px; padding: 30px; }
body.page .safety-item { padding: 18px; border-radius: 18px; background: rgba(255,255,255,.55); border: 1px solid rgba(255,255,255,.8); transition: transform .25s ease, box-shadow .25s ease; }
.cls-ico { display: inline-grid; place-items: center; width: 46px; height: 46px; border-radius: 14px; margin-bottom: 4px; transition: transform .3s cubic-bezier(.34,1.56,.64,1); }
.cls-ico svg { width: 26px; height: 26px; overflow: visible; }
.cls-ico svg * { transform-box: fill-box; transform-origin: center; }
.safety-item[data-tone="blue"] .cls-ico { background: linear-gradient(160deg, rgba(254, 248, 224,.95), rgba(217, 180, 34,.2)); color: #9a8017; }
.safety-item[data-tone="red"] .cls-ico { background: linear-gradient(160deg, rgba(254, 248, 226,.95), rgba(229, 185, 9,.16)); color: var(--gold-logo, #D3AC00); }
.safety-item[data-tone="purple"] .cls-ico { background: linear-gradient(160deg, rgba(251, 248, 235,.95), rgba(167, 153, 95,.22)); color: #8f8149; }
.safety-item[data-tone="orange"] .cls-ico { background: linear-gradient(160deg, rgba(254, 247, 221,.95), rgba(247, 203, 26,.24)); color: #c49f0a; }
@media (hover: hover) {
  body.page .safety-item:hover { transform: translateY(-3px); box-shadow: 0 16px 30px -20px rgba(15,23,42,.4); }
  body.page .safety-item:hover .cls-ico { transform: scale(1.1) rotate(-4deg); }
  .cls-pills li:hover { transform: scale(1.05); }
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  body.page .safety-item:hover .ic-down .ln { stroke-dasharray: 26; animation: cls-draw .7s ease backwards; }
  body.page .safety-item:hover .ic-ban .sp { animation: cls-spin .7s ease; }
  body.page .safety-item:hover .ic-stop .oct { animation: pg-pulse .6s ease; }
}
@keyframes cls-draw { from { stroke-dashoffset: 26; } }
@keyframes cls-spin { to { transform: rotate(360deg); } }

/* ===== Ajustes móvil (revisión con capturas reales) ===== */
body.page :is(.btn-hero-red, .btn-hero-outline, .btn-referral, .btn-telegram, .btn-support-wa) { text-align: center; line-height: 1.25; }
@media (max-width: 640px) {
  /* Botones principales: uno debajo del otro, a todo el ancho y con el texto centrado */
  body.page .hero-buttons { flex-direction: column; align-items: stretch; gap: 10px; }
  body.page .hero-buttons > :is(a, button) { width: 100%; min-height: 52px; justify-content: center; text-align: center; }
  /* Títulos: un poco más de aire entre letras y palabras */
  body.page :is(h1, .hero-title, .glossary-hero-title, .help-hero-title) { letter-spacing: -0.012em; word-spacing: .05em; }
  body.page :is(h2, .section-title) { letter-spacing: -0.01em; word-spacing: .06em; }
  /* Botón flotante de WhatsApp más discreto para no tapar contenido */
  .wa-container { transform: scale(.82); transform-origin: bottom right; opacity: .92; }
}