/* ============================================================================
   JUSTI LANGUAGE · Design system de marca
   Se carga AL FINAL en los 3 layouts (sitio, panel, acceso) y re-viste los
   componentes que ya existen (hs-*, sh-*, sc-*, mb__*, panel, Bootstrap).
   Azul = color institucional dominante. Rojo = solo CTA, acentos y activos.
   ============================================================================ */
:root{
  --jl-navy:#062B62;      --jl-navy-dark:#031F49;
  --jl-red:#C90012;       --jl-red-dark:#A90010;
  --jl-white:#FFFFFF;     --jl-bg:#F5F7FA;
  --jl-text:#0B1D36;      --jl-muted:#64748B;
  --jl-line:#E2E8F0;      --jl-navy-soft:#E9EEF6;   --jl-red-soft:#FDECEE;

  --jl-font:'Montserrat', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --jl-script:var(--jl-font);  /* el kit pide manuscrita SOLO si hay fuente autorizada: no la hay */

  --jl-radius-sm:10px;  --jl-radius:16px;  --jl-radius-lg:22px;  --jl-pill:999px;
  --jl-shadow-sm:0 1px 2px rgba(6,43,98,.06);
  --jl-shadow:0 1px 2px rgba(6,43,98,.05), 0 10px 28px rgba(6,43,98,.07);
  --jl-shadow-lg:0 22px 50px rgba(6,43,98,.16);

  --jl-container:1200px;
  --jl-gutter:clamp(16px, 4vw, 28px);
  --jl-sec:clamp(56px, 8vw, 100px);
  --jl-h1:clamp(2.4rem, 1.4rem + 4.6vw, 4.6rem);
  --jl-h2:clamp(1.7rem, 1.2rem + 2vw, 2.6rem);
  --jl-h3:clamp(1.1rem, 1rem + .4vw, 1.3rem);

  /* Tokens viejos apuntando a la marca (sitio, panel, CSS del theme) */
  --hs-accent:var(--jl-navy); --hs-accent-d:var(--jl-navy-dark); --hs-dark:var(--jl-text);
  --hs-text:#334155; --hs-muted:var(--jl-muted); --hs-soft:var(--jl-bg); --hs-border:var(--jl-line);
  --hs-heading-font:var(--jl-font); --hs-body-font:var(--jl-font);
  --sh-accent:var(--jl-navy); --sh-accent-d:var(--jl-navy-dark); --sh-ink:var(--jl-text); --sh-coral:var(--jl-red);
  --pc-accent:var(--jl-navy); --pc-accent-soft:var(--jl-navy-soft); --pc-heading:var(--jl-navy);
  --pc-bg:var(--jl-bg); --pc-font:var(--jl-font); --pc-font-head:var(--jl-font); --pc-font-title:var(--jl-font);
  --brand:var(--jl-navy);
  --bs-primary:#062B62; --bs-primary-rgb:6,43,98; --bs-link-color:#062B62; --bs-link-color-rgb:6,43,98;
  --bs-link-hover-color:#031F49; --bs-body-font-family:var(--jl-font);
}
/* Los layouts inyectan --hs-accent / --pc-accent desde el setting: body gana. */
body.hs, body.app-body, body.jl{ --hs-accent:var(--jl-navy); --hs-accent-d:var(--jl-navy-dark); --pc-accent:var(--jl-navy); --brand:var(--jl-navy); }

html{ -webkit-text-size-adjust:100%; }
body.hs, body.app-body, body.jl{ font-family:var(--jl-font); color:var(--jl-text); overflow-x:clip; }
.hs h1,.hs h2,.hs h3,.hs h4,.app-body h1,.app-body h2,.app-body h3,.app-body h4,.jl h1,.jl h2,.jl h3{ font-family:var(--jl-font); letter-spacing:-.01em; }
.hs h1,.hs h2,.jl h1,.jl h2{ font-weight:800; }
img{ max-width:100%; }
.hs a{ color:var(--jl-navy); }
.hs a:hover{ color:var(--jl-red); }

/* ---------- Utilidades de marca ---------- */
.jl-container{ width:100%; max-width:var(--jl-container); margin:0 auto; padding:0 var(--jl-gutter); }
.jl-sec{ padding:var(--jl-sec) 0; }
.jl-sec--soft{ background:var(--jl-bg); }
.jl-red{ color:var(--jl-red) !important; }
.jl-script{ font-family:var(--jl-script); font-style:italic; font-weight:700; letter-spacing:0; text-transform:none; }
.jl-eyebrow{ display:inline-flex; align-items:center; gap:10px; font-weight:800; font-size:.8rem; letter-spacing:.14em; text-transform:uppercase; color:var(--jl-red); }
.jl-eyebrow::before{ content:''; width:28px; height:3px; border-radius:3px; background:var(--jl-red); }
.jl-eyebrow--light{ color:#fff; } .jl-eyebrow--light::before{ background:var(--jl-red); }
.jl-h2{ font-size:var(--jl-h2); font-weight:900; line-height:1.08; margin:.55rem 0 .6rem; color:var(--jl-navy); text-transform:none; }
.jl-lead{ color:var(--jl-muted); font-size:clamp(1rem, .95rem + .3vw, 1.15rem); line-height:1.6; margin:0; }
.jl-head{ max-width:720px; margin:0 auto clamp(32px,5vw,52px); text-align:center; }
.jl-underline{ background:url('../brand/acentos/subrayado-rojo.svg') left 100%/100% .24em no-repeat; padding:0 .04em .14em; -webkit-box-decoration-break:clone; box-decoration-break:clone; }

/* ---------- Botones ---------- */
.jl-btn, .hs-btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:48px; padding:12px 26px;
  border-radius:var(--jl-radius-sm); border:2px solid transparent; font-family:var(--jl-font); font-weight:800; font-size:.92rem;
  letter-spacing:.04em; text-transform:uppercase; text-decoration:none; cursor:pointer; line-height:1.15; transition:background .18s, color .18s, border-color .18s, transform .18s, box-shadow .18s; }
.jl-btn:active, .hs-btn:active{ transform:translateY(1px); }
.jl-btn--red, .hs-btn-primary{ background:var(--jl-red); color:#fff !important; box-shadow:0 8px 20px rgba(201,0,18,.22); }
.jl-btn--red:hover, .hs-btn-primary:hover{ background:var(--jl-red-dark); color:#fff !important; }
.jl-btn--navy{ background:var(--jl-navy); color:#fff !important; }
.jl-btn--navy:hover{ background:var(--jl-navy-dark); }
.jl-btn--outline, .hs-btn-outline, .hs-btn-ghost{ background:transparent; color:var(--jl-navy) !important; border-color:var(--jl-navy); }
.jl-btn--outline:hover, .hs-btn-outline:hover, .hs-btn-ghost:hover{ background:var(--jl-navy); color:#fff !important; }
.jl-btn--white{ background:transparent; color:#fff !important; border-color:rgba(255,255,255,.85); }
.jl-btn--white:hover{ background:#fff; color:var(--jl-navy) !important; }
.jl-btn--lg{ min-height:56px; padding:15px 32px; font-size:1rem; }
.jl-btn i, .hs-btn i{ font-size:1.15em; }
:focus-visible{ outline:3px solid rgba(201,0,18,.45); outline-offset:2px; }

/* ---------- Franja superior + HEADER ---------- */
.jl-topline{ background:var(--jl-navy-dark); color:rgba(255,255,255,.88); font-size:.8rem; font-weight:600; text-align:center; padding:7px var(--jl-gutter); letter-spacing:.02em; }
.jl-topline b{ color:#fff; }
.jl-topline i{ color:var(--jl-red); margin-right:6px; vertical-align:-2px; }
.jl-header{ position:sticky; top:0; z-index:1000; background:#fff; border-bottom:1px solid transparent; transition:box-shadow .2s, border-color .2s; }
.jl-header.is-scrolled{ box-shadow:0 6px 24px rgba(6,43,98,.08); border-color:var(--jl-line); }
.jl-header__in{ display:flex; align-items:center; gap:20px; min-height:80px; }
.jl-brand{ display:flex; flex-direction:column; justify-content:center; text-decoration:none !important; min-width:0; flex:none; }
.jl-brand img{ height:44px; width:auto; display:block; }
.jl-brand__name{ font-weight:900; font-size:1.3rem; color:var(--jl-navy); line-height:1; display:flex; align-items:center; gap:8px; white-space:nowrap; }
.jl-brand__name i{ color:var(--jl-red); }
.jl-brand__tag{ font-family:var(--jl-script); font-style:italic; font-weight:600; font-size:.78rem; color:var(--jl-red); line-height:1; margin-top:4px; white-space:nowrap; }
.jl-nav{ display:flex; align-items:center; gap:4px; margin-left:auto; }
.jl-nav a{ position:relative; padding:10px 14px; color:var(--jl-text); font-weight:700; font-size:.93rem; text-decoration:none; border-radius:8px; }
.jl-nav a:hover{ color:var(--jl-navy); background:var(--jl-bg); }
.jl-nav a.active{ color:var(--jl-navy); }
.jl-nav a.active::after{ content:''; position:absolute; left:14px; right:14px; bottom:3px; height:3px; border-radius:3px; background:var(--jl-red); }
.jl-nav .jl-only-m{ display:none; }
.jl-actions{ display:flex; align-items:center; gap:10px; flex:none; }
.jl-actions .jl-btn{ min-height:44px; padding:10px 18px; font-size:.82rem; }
.jl-burger{ display:none; width:46px; height:46px; border:1px solid var(--jl-line); background:#fff; border-radius:var(--jl-radius-sm); color:var(--jl-navy); font-size:24px; cursor:pointer; }
@media (max-width:1100px){
  .jl-nav{ position:fixed; inset:var(--jl-hh,80px) 0 auto 0; flex-direction:column; align-items:stretch; gap:2px; background:#fff; padding:12px var(--jl-gutter) 20px;
    box-shadow:0 24px 40px rgba(6,43,98,.14); border-top:1px solid var(--jl-line); transform:translateY(-130%); visibility:hidden; transition:transform .25s, visibility .25s; margin:0; max-height:calc(100vh - 80px); overflow:auto; }
  .jl-nav.open{ transform:none; visibility:visible; }
  .jl-nav a{ padding:14px 12px; font-size:1rem; }
  .jl-nav a.active::after{ left:12px; right:auto; width:28px; bottom:6px; }
  .jl-nav .jl-only-m{ display:block; }
  .jl-burger{ display:inline-grid; place-items:center; }
  .jl-actions{ margin-left:auto; }
  .jl-actions .jl-hide-m{ display:none; }
}
@media (max-width:480px){
  .jl-header__in{ min-height:68px; gap:10px; }
  .jl-brand img{ height:36px; }
  .jl-brand__name{ font-size:1.1rem; }
  .jl-brand__tag{ font-size:.7rem; }
  .jl-actions .jl-btn{ padding:9px 12px; font-size:.74rem; letter-spacing:.02em; }
  .jl-topline{ font-size:.72rem; }
}
@media (max-width:360px){ .jl-brand__tag{ display:none; } .jl-actions .jl-btn i{ display:none; } }
@media (display-mode: standalone), (display-mode: fullscreen){
  .jl-header{ padding-top:env(safe-area-inset-top); }
  body.hs{ padding-bottom:env(safe-area-inset-bottom); }
}

/* ---------- HERO ---------- */
.jl-hero{ position:relative; background:var(--jl-bg) url('../brand/fondos/hero-claro.svg') center/cover no-repeat; overflow:hidden; }
.jl-hero h1{ line-height:1.04 !important; }
.jl-hero h1 .jl-red{ display:inline-block; background:url('../brand/acentos/subrayado-rojo.svg') left 92%/100% .16em no-repeat; padding-bottom:.12em; }
.jl-hero__in{ position:relative; z-index:1; display:grid; grid-template-columns:55fr 45fr; gap:clamp(28px,4vw,56px); align-items:center; padding-top:clamp(36px,6vw,72px); padding-bottom:clamp(40px,6vw,80px); }
.jl-hero h1{ font-size:var(--jl-h1); font-weight:900; line-height:.98; letter-spacing:-.02em; text-transform:uppercase; color:var(--jl-navy); margin:18px 0 20px; }
.jl-hero__sub{ font-size:clamp(1.02rem, .95rem + .4vw, 1.25rem); color:#334155; line-height:1.55; max-width:560px; margin:0 0 26px; }
.jl-benefits{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:12px 22px; margin:0 0 30px; padding:0; list-style:none; max-width:560px; }
.jl-benefits li{ display:flex; gap:12px; align-items:center; }
.jl-bi{ flex:none; width:42px; height:42px; display:grid; place-items:center; border-radius:12px; background:#fff; border:1px solid var(--jl-line); box-shadow:var(--jl-shadow-sm); }
.jl-benefits b{ display:block; font-weight:900; font-size:.95rem; letter-spacing:.04em; color:var(--jl-navy); line-height:1.1; }
.jl-benefits span{ font-size:.88rem; color:var(--jl-muted); }
.jl-ctas{ display:flex; flex-wrap:wrap; gap:12px; }
.jl-micro{ display:flex; flex-wrap:wrap; gap:8px 20px; margin:18px 0 0; padding:0; list-style:none; color:var(--jl-muted); font-size:.88rem; font-weight:600; }
.jl-micro i{ color:var(--jl-red); margin-right:4px; vertical-align:-2px; }
.jl-hero__media{ position:relative; }
.jl-photo{ position:relative; border-radius:var(--jl-radius-lg); overflow:hidden; aspect-ratio:4/5; background:var(--jl-navy) center/cover no-repeat; box-shadow:var(--jl-shadow-lg); }
.jl-photo img{ width:100%; height:100%; object-fit:cover; object-position:50% 15%; display:block; }
.jl-hero__media::before{ content:''; position:absolute; left:-18px; bottom:-18px; width:55%; height:55%; border-radius:var(--jl-radius-lg); background:var(--jl-red); z-index:-1; }
.jl-photo__cap{ position:absolute; left:0; right:0; bottom:0; padding:60px 22px 18px; background:linear-gradient(transparent, rgba(3,31,73,.92)); color:#fff; font-family:var(--jl-script); font-style:italic; font-weight:800; font-size:clamp(1.1rem,1rem + .6vw,1.45rem); line-height:1.05; }

/* ---------- Barra de confianza ---------- */
.jl-trust{ background:var(--jl-navy); color:#fff; }
.jl-trust__grid{ display:grid; grid-template-columns:repeat(4,1fr); }
.jl-trust__it{ display:flex; align-items:center; gap:14px; padding:26px 18px; justify-content:center; }
.jl-trust__it + .jl-trust__it{ border-left:1px solid rgba(255,255,255,.14); }
.jl-trust__it i{ font-size:30px; color:#fff; opacity:.9; }
.jl-trust__it b{ display:block; font-weight:900; font-size:clamp(1.35rem,1.1rem + .9vw,2rem); line-height:1; }
.jl-trust__it span{ display:block; font-size:.74rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:rgba(255,255,255,.78); margin-top:4px; }
.jl-trust__txt{ font-size:clamp(1rem,.9rem + .4vw,1.2rem) !important; text-transform:uppercase; letter-spacing:.04em; line-height:1.1 !important; }
@media (min-width:901px){ .jl-trust__txt{ white-space:nowrap; } }
.jl-trust__it:nth-child(odd) i{ color:#FF6B76; }
@media (max-width:900px){
  .jl-trust__grid{ grid-template-columns:repeat(2,1fr); }
  .jl-trust__it{ justify-content:flex-start; padding:20px 16px; }
  .jl-trust__it:nth-child(3){ border-left:0; }
  .jl-trust__it:nth-child(n+3){ border-top:1px solid rgba(255,255,255,.14); }
}

/* ---------- Tarjetas genéricas ---------- */
.jl-card{ background:#fff; border:1px solid var(--jl-line); border-radius:var(--jl-radius); box-shadow:var(--jl-shadow); }
.jl-grid4{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:clamp(14px,2vw,22px); }
.jl-grid2{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(16px,2.4vw,28px); }
@media (max-width:1000px){ .jl-grid4{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:760px){ .jl-grid2{ grid-template-columns:1fr; } }
@media (max-width:520px){ .jl-grid4{ grid-template-columns:1fr; } }

/* Método */
.jl-method{ padding:28px 24px 26px; border-top:4px solid var(--jl-navy); transition:transform .18s, box-shadow .18s; }
.jl-method:nth-child(even){ border-top-color:var(--jl-red); }
.jl-method:hover{ transform:translateY(-3px); box-shadow:var(--jl-shadow-lg); }
.jl-method .jl-ico{ width:44px; height:44px; display:block; margin-bottom:14px; }
.jl-method h3{ font-size:1.05rem; font-weight:900; letter-spacing:.08em; text-transform:uppercase; color:var(--jl-navy); margin:0 0 8px; }
.jl-method p{ color:var(--jl-muted); margin:0; font-size:.95rem; line-height:1.55; }

/* Dos formas */
.jl-mode{ padding:clamp(26px,3.6vw,40px); display:flex; flex-direction:column; border-radius:var(--jl-radius-lg); }
.jl-mode__ic{ width:60px; height:60px; border-radius:16px; display:grid; place-items:center; font-size:30px; background:var(--jl-navy-soft); color:var(--jl-navy); margin-bottom:18px; }
.jl-mode h3{ font-size:clamp(1.3rem,1.1rem + .8vw,1.75rem); font-weight:900; text-transform:uppercase; letter-spacing:.02em; color:var(--jl-navy); margin:0 0 16px; }
.jl-mode ul{ list-style:none; padding:0; margin:0 0 26px; display:grid; gap:12px; flex:1; }
.jl-mode li{ display:flex; gap:10px; align-items:flex-start; font-weight:600; color:#334155; }
.jl-li-ic{ flex:none; width:28px; height:28px; display:inline-grid; place-items:center; border-radius:8px; background:#fff; border:1px solid var(--jl-line); }
.jl-mode li{ align-items:center; }
.jl-mode .jl-btn{ align-self:flex-start; }
.jl-mode--navy{ background:var(--jl-navy); border-color:var(--jl-navy); box-shadow:var(--jl-shadow-lg); }
.jl-mode--navy h3, .jl-mode--navy li{ color:#fff; }
.jl-mode--navy .jl-mode__ic{ background:#fff; }
.jl-mode--navy .jl-li-ic{ border-color:transparent; }
.jl-mode__live{ display:inline-flex; align-items:center; gap:6px; background:var(--jl-red); color:#fff; font-size:.7rem; font-weight:800; letter-spacing:.12em; padding:4px 10px; border-radius:var(--jl-pill); margin-bottom:12px; align-self:flex-start; }
.jl-mode__live::before{ content:''; width:7px; height:7px; border-radius:50%; background:#fff; animation:jlPulse 1.6s infinite; }
@keyframes jlPulse{ 50%{ opacity:.25; } }
@media (prefers-reduced-motion:reduce){ .jl-mode__live::before{ animation:none; } }

/* Curso destacado */
.jl-feat{ background:var(--jl-navy-dark); color:#fff; position:relative; overflow:hidden; }
.jl-feat::after{ content:''; position:absolute; right:-120px; top:-120px; width:360px; height:360px; border-radius:50%; border:60px solid rgba(255,255,255,.04); }
.jl-feat__in{ position:relative; z-index:1; display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(28px,4vw,60px); align-items:center; }
.jl-feat__cover{ position:relative; border-radius:var(--jl-radius-lg); overflow:hidden; aspect-ratio:16/9; background:var(--jl-navy) center/cover; box-shadow:0 30px 60px rgba(0,0,0,.35); display:block; }
.jl-feat__play{ position:absolute; inset:0; display:grid; place-items:center; font-size:72px; color:rgba(255,255,255,.95); background:linear-gradient(transparent 40%, rgba(3,31,73,.45)); transition:transform .2s; }
.jl-feat__cover:hover .jl-feat__play{ transform:scale(1.06); }
.jl-badge{ display:inline-flex; align-items:center; gap:6px; background:var(--jl-red); color:#fff; font-size:.72rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase; padding:6px 12px; border-radius:6px; }
.jl-feat h2{ color:#fff !important; font-size:var(--jl-h2); font-weight:900; line-height:1.05; margin:16px 0 6px; }
.jl-feat .jl-script{ font-size:clamp(1.05rem,1rem + .5vw,1.35rem); color:#FF8A93; display:block; margin-bottom:14px; }
.jl-feat p{ color:rgba(255,255,255,.78); line-height:1.6; }
.jl-feat__meta{ display:flex; flex-wrap:wrap; gap:10px; margin:20px 0 24px; padding:0; list-style:none; }
.jl-feat__meta li{ display:inline-flex; align-items:center; gap:7px; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.14); border-radius:var(--jl-pill); padding:7px 14px; font-size:.86rem; font-weight:700; }
.jl-feat__meta .jl-li-ic{ width:24px; height:24px; border-radius:6px; }
.jl-feat__ad{ display:block; border-radius:var(--jl-radius); overflow:hidden; background:#fff; box-shadow:0 30px 60px rgba(0,0,0,.35); }
.jl-price{ display:flex; align-items:baseline; gap:14px; flex-wrap:wrap; margin-bottom:22px; }
.jl-price b{ font-size:clamp(2.4rem,2rem + 1.6vw,3.4rem); font-weight:900; line-height:1; }
.jl-price small{ font-size:.95rem; font-weight:700; color:rgba(255,255,255,.7); }
.jl-price s{ color:rgba(255,255,255,.55); font-size:1.15rem; font-weight:700; }

/* Experiencia */
.jl-exp__in{ display:grid; grid-template-columns:.9fr 1.1fr; gap:clamp(28px,5vw,72px); align-items:center; }
.jl-exp__media{ position:relative; }
.jl-exp__media::before{ content:''; position:absolute; right:-16px; top:-16px; width:60%; height:60%; border:4px solid var(--jl-red); border-radius:var(--jl-radius-lg); z-index:0; }
.jl-exp__media .jl-photo{ z-index:1; aspect-ratio:4/5; }
.jl-exp__ad{ position:relative; z-index:1; border-radius:var(--jl-radius); box-shadow:var(--jl-shadow-lg); background:#fff; }
.jl-exp__years{ position:absolute; left:-10px; bottom:24px; z-index:2; background:var(--jl-navy); color:#fff; border-radius:var(--jl-radius); padding:14px 20px; box-shadow:var(--jl-shadow-lg); }
.jl-exp__years b{ display:block; font-size:2.2rem; font-weight:900; line-height:1; }
.jl-exp__years span{ font-size:.72rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase; opacity:.8; }
.jl-exp p{ color:#334155; line-height:1.7; font-size:1.02rem; }
.jl-motto{ margin:26px 0 0; padding:18px 22px; border-left:5px solid var(--jl-red); background:var(--jl-bg); border-radius:0 var(--jl-radius-sm) var(--jl-radius-sm) 0; font-weight:900; font-size:clamp(1.05rem,1rem + .5vw,1.35rem); color:var(--jl-navy); letter-spacing:.02em; text-transform:uppercase; }

/* Testimonios */
.jl-testi{ padding:28px 24px 22px; display:flex; flex-direction:column; }
.jl-testi__q{ display:block; width:40px; height:32px; }
.jl-testi p{ color:#334155; font-size:.97rem; line-height:1.6; margin:12px 0 18px; flex:1; }
.jl-testi__who{ display:flex; gap:12px; align-items:center; padding-top:16px; border-top:1px solid var(--jl-line); }
.jl-testi__ava{ width:40px; height:40px; border-radius:50%; background:var(--jl-navy); color:#fff; display:grid; place-items:center; font-weight:800; flex:none; }
.jl-testi__who b{ color:var(--jl-text); font-size:.92rem; } .jl-testi__who small{ color:var(--jl-muted); display:block; }

/* CTA final */
.jl-cta{ background:var(--jl-navy) url('../brand/fondos/cta-azul.svg') center/cover no-repeat; color:#fff; text-align:center; position:relative; overflow:hidden; }
.jl-cta__brush{ display:block; width:min(200px,50%); height:auto; margin:-4px auto 18px; }
.jl-cta::before{ content:''; position:absolute; inset:auto -10% -55% -10%; height:80%; background:radial-gradient(ellipse at center, rgba(201,0,18,.22), transparent 65%); }
.jl-cta > *{ position:relative; }
.jl-cta .jl-red, .jl-feat .jl-red{ color:#F0293B !important; }
.jl-cta h2{ color:#fff !important; font-size:clamp(2rem,1.3rem + 3vw,3.6rem); font-weight:900; line-height:1.02; text-transform:uppercase; margin:0 0 16px; }
.jl-cta p{ color:rgba(255,255,255,.8); max-width:600px; margin:0 auto 28px; font-size:clamp(1rem,.95rem + .3vw,1.15rem); }
.jl-cta .jl-ctas{ justify-content:center; }
.jl-cta__script{ display:block; font-family:var(--jl-script); font-style:italic; font-weight:800; letter-spacing:.02em; font-size:clamp(1.1rem,1rem + .7vw,1.6rem); color:#FF8A93; transform:rotate(-3deg); margin-bottom:10px; }

/* ---------- FOOTER ---------- */
.jl-footer{ background:var(--jl-navy-dark) url('../brand/fondos/footer-profundo.svg') center/cover no-repeat; color:rgba(255,255,255,.72); padding:clamp(48px,6vw,72px) 0 0; font-size:.93rem; }
.jl-footer__grid{ display:grid; grid-template-columns:1.5fr 1fr 1.2fr; gap:clamp(28px,4vw,56px); padding-bottom:40px; }
.jl-footer h4{ color:#fff !important; font-size:.8rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase; margin:0 0 16px; }
.jl-footer ul{ list-style:none; padding:0; margin:0; display:grid; gap:10px; }
.jl-footer a{ color:rgba(255,255,255,.75); text-decoration:none; }
.jl-footer a:hover{ color:#fff; }
.jl-footer li i{ color:#FF6B76; margin-right:6px; }
.jl-footer__logo{ display:inline-block; background:#fff; border-radius:var(--jl-radius-sm); padding:10px 14px; margin-bottom:12px; }
.jl-footer__logo img{ height:40px; width:auto; display:block; }
.jl-footer__logo .jl-brand__name{ font-size:1.15rem; }
.jl-footer__tag{ font-family:var(--jl-script); font-style:italic; font-weight:600; font-size:1.05rem; color:#fff; line-height:1.1; margin:0 0 8px; }
.jl-footer__motto{ font-weight:800; letter-spacing:.06em; text-transform:uppercase; font-size:.78rem; color:rgba(255,255,255,.6); margin:0 0 18px; }
.jl-soc{ display:flex; gap:10px; }
.jl-soc a{ width:42px; height:42px; display:grid; place-items:center; border-radius:10px; background:rgba(255,255,255,.08); font-size:19px; color:#fff; }
.jl-soc a:hover{ background:var(--jl-red); }
.jl-footer__bottom{ border-top:1px solid rgba(255,255,255,.1); padding:18px 0; font-size:.82rem; text-align:center; color:rgba(255,255,255,.55); }
@media (max-width:760px){ .jl-footer__grid{ grid-template-columns:1fr; } }

/* ---------- Responsive home ---------- */
@media (max-width:960px){
  .jl-hero__in, .jl-feat__in, .jl-exp__in{ grid-template-columns:1fr; }
  .jl-hero__media{ max-width:460px; width:100%; margin:0 auto; }
  .jl-photo{ aspect-ratio:4/3.6; }
  .jl-exp__media{ max-width:440px; width:calc(100% - 16px); margin:0 auto; }
}
@media (max-width:520px){
  .jl-benefits{ grid-template-columns:1fr 1fr; gap:12px; }
  .jl-bi{ width:36px; height:36px; } .jl-bi img{ width:19px; height:19px; }
  .jl-benefits b{ font-size:.82rem; } .jl-benefits span{ font-size:.78rem; }
  .jl-ctas .jl-btn, .jl-mode .jl-btn, .jl-feat .jl-btn{ width:100%; align-self:stretch; text-align:center; }
  .jl-grid4--m2{ grid-template-columns:1fr 1fr; gap:12px; }
  .jl-grid4--m2 .jl-method{ padding:18px 16px; }
  .jl-grid4--m2 .jl-method .jl-ico{ width:34px; height:34px; margin-bottom:10px; }
  .jl-grid4--m2 .jl-method h3{ font-size:.9rem; letter-spacing:.04em; }
  .jl-grid4--m2 .jl-method p{ font-size:.85rem; }
  .jl-hero__media::before{ left:-8px; bottom:-8px; }
  .jl-exp__media::before{ right:-8px; top:-8px; }
}

/* =============================================================================
   RE-VESTIDO DE COMPONENTES EXISTENTES (sin tocar su HTML/lógica)
   ============================================================================= */
/* Contenedor del theme */
.hs-container{ max-width:var(--jl-container); padding-left:var(--jl-gutter); padding-right:var(--jl-gutter); }

/* Tarjeta de curso (catálogo) */
.sc-grid{ grid-template-columns:repeat(auto-fill, minmax(min(100%, 270px), 1fr)) !important; gap:clamp(16px,2vw,24px) !important; }
.sc-card{ border-radius:var(--jl-radius) !important; border-color:var(--jl-line) !important; box-shadow:var(--jl-shadow) !important; }
.sc-card:hover{ transform:translateY(-3px) !important; box-shadow:var(--jl-shadow-lg) !important; }
.sc-cover{ height:auto !important; aspect-ratio:16/9; }
.sc-cat{ background:#fff !important; color:var(--jl-navy) !important; font-weight:800 !important; letter-spacing:.04em; text-transform:uppercase; font-size:10.5px !important; border-radius:6px !important; }
.sc-precio{ background:var(--jl-red) !important; border-radius:6px !important; }
.sc-title{ font-family:var(--jl-font) !important; font-weight:800 !important; color:var(--jl-text) !important; }
.sc-desc, .sc-meta, .sc-instr{ color:var(--jl-muted) !important; }
.sc-meta i, .sc-instr i{ color:var(--jl-navy) !important; }
.sc-go{ color:var(--jl-red) !important; font-weight:800 !important; letter-spacing:.06em; text-transform:uppercase; font-size:12px !important; }
.sc-rate{ color:#F5A524 !important; }
.sc-chip{ border-radius:var(--jl-pill) !important; font-weight:600; }
.sc-chip:hover{ border-color:var(--jl-navy) !important; color:var(--jl-navy) !important; }
.sc-chip.on{ background:var(--jl-navy) !important; border-color:var(--jl-navy) !important; color:#fff !important; }
.sh-card, .sh-testi{ border-radius:var(--jl-radius) !important; border-color:var(--jl-line) !important; box-shadow:var(--jl-shadow) !important; }
.sh-pill--accent{ background:var(--jl-navy) !important; } .sh-pill--coral{ background:var(--jl-red) !important; }
.sh-hero__ov{ background:linear-gradient(90deg, rgba(3,31,73,.94) 0%, rgba(6,43,98,.78) 45%, rgba(6,43,98,.35) 100%) !important; }

/* Membresías (_membresia.php) — Gratis neutral · Básico borde azul · Premium navy + rojo */
.mb{ --teal:var(--jl-navy) !important; --teal-d:var(--jl-navy) !important; --teal-soft:var(--jl-navy-soft) !important; --teal-line:#C9D6EA !important; --navy:var(--jl-text) !important; --muted:var(--jl-muted) !important; --line:var(--jl-line) !important; }
.mb .mb__h{ font-family:var(--jl-font); font-weight:900; font-size:var(--jl-h2); color:var(--jl-navy); }
.mb .mb__eyebrow{ background:transparent; color:var(--jl-red); letter-spacing:.14em; font-weight:800; padding:0; }
.mb .mb__plan{ border-radius:var(--jl-radius); box-shadow:var(--jl-shadow); font-family:var(--jl-font); }
.mb .mb__plan:not(.best){ border:2px solid var(--jl-navy); }
.mb .mb__plan.mb__plan--free{ border:1px solid var(--jl-line); } /* Gratis neutral */
.mb .mb__plan h3, .mb .mb__big{ font-family:var(--jl-font); font-weight:900; }
.mb .mb__cta{ font-family:var(--jl-font); font-weight:800; text-transform:uppercase; letter-spacing:.05em; font-size:.85rem; border-radius:var(--jl-radius-sm); min-height:48px; display:flex; align-items:center; justify-content:center; gap:6px; }
.mb .mb__cta.solid{ background:var(--jl-navy); color:#fff; }
.mb .mb__cta.ghost{ background:#fff; color:var(--jl-navy); border:2px solid var(--jl-navy); }
.mb .mb__toggle button.on{ background:var(--jl-navy); box-shadow:0 6px 16px rgba(6,43,98,.25); }
.mb .mb__plan.best{ background:var(--jl-navy); border:2px solid var(--jl-navy); box-shadow:var(--jl-shadow-lg); color:#fff; }
.mb .mb__plan.best h3, .mb .mb__plan.best .mb__big, .mb .mb__plan.best .mb__feat li{ color:#fff; }
.mb .mb__plan.best .mb__desc, .mb .mb__plan.best .mb__per{ color:rgba(255,255,255,.72); }
.mb .mb__plan.best .mb__year{ color:#FF8A93; }
.mb .mb__plan.best .mb__feat li .yes{ color:#fff; }
.mb .mb__plan.best .mb__feat li.off{ color:rgba(255,255,255,.45); }
.mb .mb__plan.best .mb__cta.solid{ background:var(--jl-red); }
.mb .mb__plan.best .mb__cta.solid:hover{ background:var(--jl-red-dark); }
.mb .mb__pop{ background:var(--jl-red); text-transform:uppercase; letter-spacing:.12em; font-size:11px; font-weight:800; border-radius:6px; }
.mb .mb__live{ background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.16); }
.mb .mb__live i{ color:#FF8A93; }
.mb .mb__adv .c{ border-radius:var(--jl-radius); }
.mb .mb__adv .c.hot .ic{ background:var(--jl-red); }
@media (max-width:820px){ .mb .mb__plans{ grid-template-columns:minmax(0,1fr) !important; } }


/* =============================================================================
   PANEL (layouts/main.php) — sidebar navy, activo con acento rojo
   ============================================================================= */
.app-body{ background:var(--jl-bg); }
.app-body input, .app-body textarea, .app-body select, .app-body button, .hs input, .hs textarea, .hs select, .hs button{ font-family:var(--jl-font); }
.app-sidebar{ background:var(--jl-navy-dark) !important; border-right:0 !important; }
.app-sidebar .side-brand, .app-sidebar .side-brand b{ color:#fff !important; }
.app-sidebar .side-brand small{ color:rgba(255,255,255,.6) !important; }
.app-sidebar .side-brand .chip{ background:var(--jl-red) !important; color:#fff !important; }
.app-sidebar .nav-label{ color:rgba(255,255,255,.45) !important; }
.app-nav a{ color:rgba(255,255,255,.78) !important; border-radius:10px; position:relative; }
.app-nav a i{ color:rgba(255,255,255,.6) !important; }
.app-nav a:hover{ background:rgba(255,255,255,.07) !important; color:#fff !important; }
.app-nav a.active{ background:rgba(255,255,255,.1) !important; color:#fff !important; font-weight:700; }
.app-nav a.active i{ color:#fff !important; }
.app-nav a.active::before{ content:''; position:absolute; left:0; top:8px; bottom:8px; width:4px; border-radius:4px; background:var(--jl-red); }
.app-topbar .page-title{ font-family:var(--jl-font) !important; font-weight:800 !important; color:var(--jl-navy) !important; }
.app-user .avatar{ background:var(--jl-navy) !important; color:#fff !important; }
.app-body .btn-primary{ --bs-btn-bg:var(--jl-navy); --bs-btn-border-color:var(--jl-navy); --bs-btn-hover-bg:var(--jl-navy-dark); --bs-btn-hover-border-color:var(--jl-navy-dark); --bs-btn-active-bg:var(--jl-navy-dark); --bs-btn-active-border-color:var(--jl-navy-dark); }
.app-body .btn-danger{ --bs-btn-bg:var(--jl-red); --bs-btn-border-color:var(--jl-red); --bs-btn-hover-bg:var(--jl-red-dark); --bs-btn-hover-border-color:var(--jl-red-dark); }
.app-body .btn-outline-primary{ --bs-btn-color:var(--jl-navy); --bs-btn-border-color:var(--jl-navy); --bs-btn-hover-bg:var(--jl-navy); --bs-btn-hover-border-color:var(--jl-navy); }
.app-body .text-primary{ color:var(--jl-navy) !important; } .app-body .bg-primary{ background-color:var(--jl-navy) !important; }
.app-body .progress-bar{ background-color:var(--jl-navy); }
.app-body .form-control:focus, .app-body .form-select:focus{ border-color:var(--jl-navy); box-shadow:0 0 0 .2rem rgba(6,43,98,.12); }
.app-body .form-check-input:checked{ background-color:var(--jl-navy); border-color:var(--jl-navy); }
.app-body .nav-tabs .nav-link.active, .app-body .nav-pills .nav-link.active{ border-bottom-color:var(--jl-red); }
.app-body .nav-pills .nav-link.active{ background:var(--jl-navy); }
.app-body .card{ border-radius:var(--jl-radius); }

/* =============================================================================
   ACCESO (login, registro, recuperar) — usan .brand-side / .card-login / .btn-main
   ============================================================================= */
body.jl .brand-side{ position:relative; }
body.jl .brand-side::after{ content:''; position:absolute; left:60px; bottom:48px; width:64px; height:5px; border-radius:5px; background:var(--jl-red); }
body.jl .brand-side h1{ font-family:var(--jl-font) !important; font-weight:900 !important; text-transform:uppercase; letter-spacing:-.01em; }
body.jl .form-side{ background:var(--jl-bg) !important; }
body.jl .card-login{ border-radius:var(--jl-radius-lg) !important; box-shadow:var(--jl-shadow-lg) !important; }
body.jl .card-login h2{ font-family:var(--jl-font) !important; font-weight:900 !important; color:var(--jl-navy) !important; }
body.jl .inp input{ min-height:50px; font-family:var(--jl-font); }
body.jl .inp input:focus{ outline:0; border-color:var(--jl-navy); box-shadow:0 0 0 4px rgba(6,43,98,.10); }
body.jl .btn-main{ background:var(--jl-red) !important; font-family:var(--jl-font) !important; font-weight:800 !important; text-transform:uppercase; letter-spacing:.06em; min-height:52px; border-radius:var(--jl-radius-sm) !important; }
body.jl .btn-main:hover{ background:var(--jl-red-dark) !important; }
body.jl a{ color:var(--jl-navy); }
@media (max-width:820px){ body.jl{ grid-template-columns:1fr !important; } }

/* =============================================================================
   KIT VISUAL JUSTI LANGUAGE (css/justi-brand.css del kit, integrado)
   ============================================================================= */
.jl-section{ padding:clamp(40px,6vw,88px) 20px; color:var(--jl-text); }
.jl-title{ font-family:var(--jl-font); font-weight:900; line-height:1.06; font-size:clamp(32px,5vw,64px); margin:0 0 24px; }
.jl-button{ display:inline-flex; align-items:center; justify-content:center; min-height:48px; padding:12px 24px; border:2px solid var(--jl-red); border-radius:8px; background:var(--jl-red); color:#fff; font-weight:700; text-decoration:none; cursor:pointer; }
.jl-button:hover{ background:var(--jl-red-dark); border-color:var(--jl-red-dark); color:#fff; }
.jl-button:focus-visible{ outline:3px solid var(--jl-navy); outline-offset:4px; }
.jl-button-outline{ background:transparent; border-color:var(--jl-navy); color:var(--jl-navy); }
.jl-icon{ width:56px; height:56px; object-fit:contain; }
.jl-grid{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:24px; }
.jl-dark{ background:var(--jl-navy); color:#fff; }
.jl-dark .jl-button-outline{ border-color:#fff; color:#fff; }
/* Anuncios originales: SIEMPRE completos, sin recorte */
.jl-promo-image{ display:block; width:100%; height:auto; object-fit:contain; }
@media(max-width:900px){ .jl-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:480px){ .jl-grid{ grid-template-columns:1fr; } }

/* Iconos del kit junto a texto */
.jl-ico{ display:inline-block; vertical-align:-.2em; flex:none; object-fit:contain; }
.sc-meta span, .sh-card__meta span{ display:inline-flex; align-items:center; gap:6px; }
.jl-chips{ display:flex; flex-wrap:wrap; justify-content:center; gap:10px; margin:16px 0 0; }
.jl-chips span{ display:inline-flex; align-items:center; gap:8px; background:#fff; border:1px solid var(--jl-line); border-radius:var(--jl-pill); padding:7px 14px; font-weight:700; font-size:.85rem; color:var(--jl-navy); }
.jl-tile-ic{ width:64px; height:64px; flex:none; display:grid; place-items:center; border-radius:16px; background:var(--jl-navy-soft); }

/* Clases en Miami */
.jl-miami__ads{ align-items:start; max-width:980px; margin:0 auto; }
.jl-miami__ads img{ border-radius:var(--jl-radius); box-shadow:var(--jl-shadow); background:#fff; }
.jl-miami__data{ display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:14px 18px; margin-top:clamp(24px,4vw,36px); }
.jl-miami__dir{ display:inline-flex; align-items:center; gap:8px; font-weight:700; color:var(--jl-navy); }

/* Contacto */
.ct-dir{ display:flex; align-items:center; gap:8px; margin:14px 0 0; font-weight:600; color:var(--jl-navy); font-size:.9rem; }

/* Acceso (login, registro, recuperar): fondo claro del kit + icono de acceso */
body.jl{ background:var(--jl-bg) url('../brand/fondos/login-claro.svg') center/cover no-repeat fixed; }
body.jl .form-side{ background:transparent !important; }
body.jl .card-login h2::before{ content:''; display:block; width:44px; height:44px; margin-bottom:14px; background:url('../brand/iconos/acceso-azul.svg') center/contain no-repeat; }

/* Acceso en celular (2026-10-24): tarjeta casi a lo ancho, campos y botones de tamaño normal.
   Antes: 40px de margen afuera + 40px adentro dejaban los campos angostos y el texto cortado. */
body.jl .btn-main{ letter-spacing:.03em; line-height:1.2; }
body.jl #btnHuella{ background:#fff !important; color:var(--jl-navy) !important; border:1.5px solid #dbe3ec !important; text-transform:none; letter-spacing:0; }
body.jl #btnHuella:hover{ background:#f3f6fa !important; }
@media (max-width:575px){
  body.jl .form-side{ padding:20px 14px; align-items:flex-start; }
  body.jl .card-login{ padding:26px 20px; }
  body.jl .card-login h2{ font-size:1.6rem; margin-bottom:4px; }
  body.jl .card-login h2::before{ width:36px; height:36px; margin-bottom:10px; }
  body.jl .card-login > p{ font-size:.95rem; }
  body.jl .inp{ margin-bottom:12px; }
  body.jl .inp input{ min-height:48px; font-size:16px; padding:11px 12px 11px 40px; }
  body.jl .btn-main{ min-height:48px; font-size:.95rem; padding:10px 14px; }
}