.elementor-1534 .elementor-element.elementor-element-9070ca2 .elementor-button-content-wrapper{flex-direction:row;}.elementor-1534 .elementor-element.elementor-element-cbd5c20 .elementor-button-content-wrapper{flex-direction:row;}.elementor-1534 .elementor-element.elementor-element-722b71a{--divider-border-style:solid;--divider-color:#000;--divider-border-width:3px;}.elementor-1534 .elementor-element.elementor-element-722b71a .elementor-divider-separator{width:100%;}.elementor-1534 .elementor-element.elementor-element-722b71a .elementor-divider{padding-block-start:0px;padding-block-end:0px;}.elementor-1534 .elementor-element.elementor-element-eb232d8 .elementor-button-content-wrapper{flex-direction:row;}.elementor-1534 .elementor-element.elementor-element-afbfa73{--divider-border-style:solid;--divider-color:#000;--divider-border-width:3px;}.elementor-1534 .elementor-element.elementor-element-afbfa73 .elementor-divider-separator{width:100%;}.elementor-1534 .elementor-element.elementor-element-afbfa73 .elementor-divider{padding-block-start:0px;padding-block-end:0px;}.elementor-1534 .elementor-element.elementor-element-178d800 .elementor-button-content-wrapper{flex-direction:row;}.elementor-1534 .elementor-element.elementor-element-800344d{--divider-border-style:solid;--divider-color:#000;--divider-border-width:3px;}.elementor-1534 .elementor-element.elementor-element-800344d .elementor-divider-separator{width:100%;}.elementor-1534 .elementor-element.elementor-element-800344d .elementor-divider{padding-block-start:0px;padding-block-end:0px;}.elementor-1534 .elementor-element.elementor-element-85130c2 .elementor-icon-wrapper{text-align:center;}.elementor-1534 .elementor-element.elementor-element-85130c2 .elementor-icon{font-size:21px;}.elementor-1534 .elementor-element.elementor-element-85130c2 .elementor-icon svg{height:21px;}.elementor-1534 .elementor-element.elementor-element-b70c69b .elementor-icon-wrapper{text-align:center;}.elementor-1534 .elementor-element.elementor-element-b70c69b .elementor-icon{font-size:20px;}.elementor-1534 .elementor-element.elementor-element-b70c69b .elementor-icon svg{height:20px;}.elementor-1534 .elementor-element.elementor-element-b3e0c43 .elementor-icon-wrapper{text-align:center;}.elementor-1534 .elementor-element.elementor-element-b3e0c43 .elementor-icon{font-size:21px;}.elementor-1534 .elementor-element.elementor-element-b3e0c43 .elementor-icon svg{height:21px;}.elementor-1534 .elementor-element.elementor-element-f77c5bc .elementor-icon-wrapper{text-align:center;}.elementor-1534 .elementor-element.elementor-element-f77c5bc .elementor-icon{font-size:20px;}.elementor-1534 .elementor-element.elementor-element-f77c5bc .elementor-icon svg{height:20px;}.elementor-1534 .elementor-element.elementor-element-93c1a4c .elementor-icon-wrapper{text-align:center;}.elementor-1534 .elementor-element.elementor-element-93c1a4c .elementor-icon{font-size:21px;}.elementor-1534 .elementor-element.elementor-element-93c1a4c .elementor-icon svg{height:21px;}.elementor-1534 .elementor-element.elementor-element-1053049 .elementor-icon-wrapper{text-align:center;}.elementor-1534 .elementor-element.elementor-element-1053049 .elementor-icon{font-size:20px;}.elementor-1534 .elementor-element.elementor-element-1053049 .elementor-icon svg{height:20px;}.elementor-1534 .elementor-element.elementor-element-991a515 .elementor-button-content-wrapper{flex-direction:row;}.elementor-1534 .elementor-element.elementor-element-76fa8ea .elementor-button-content-wrapper{flex-direction:row;}.elementor-1534 .elementor-element.elementor-element-7bdbac5{--grid-template-columns:repeat(0, auto);text-align:center;--grid-column-gap:5px;--grid-row-gap:0px;}/* Start custom CSS *//* ============================================================
   LUIS ZEPEDA — THE MEN BARBER SCHOOL · HOME (hub)
   Bebas Neue (display) · Cormorant itálica (acento) · Jost (lectura)
   Hoja de estilos de la página (Elementor page custom CSS).
   ============================================================ */
:root{
  --bg:#0B0A08;
  --bg-soft:#0E0C09;
  --skin:#15120C;
  --ink:#EDE6D6;
  --muted:#A79D8A;
  --gold:#C9A24B;
  --gold-hi:#E3C368;
  --red:#B03A30;
  --blue:#2E4C74;
  --blue-deep:#1D2D49;
  --blue-soft:#243654;
  --red-deep:#5E241D;
  --red-soft:#6A2A22;
  --hairline:rgba(237,230,214,.09);
  --goldline:rgba(201,162,75,.30);
  --ease:cubic-bezier(.22,1,.36,1);
  --disp:'Bebas Neue','Arial Narrow',sans-serif;
  --serif:'Cormorant Garamond',Georgia,serif;
  --sans:'Jost',Verdana,sans-serif;
}

*,*::before,*::after{ margin:0; padding:0; box-sizing:border-box }
html{ scroll-behavior:smooth }
body{
  background:var(--bg); color:var(--ink);
  font:300 16px/1.6 var(--sans);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
a{ color:inherit }
button{ font:inherit; color:inherit; background:none; border:0 }
::selection{ background:var(--gold); color:#141008 }
::-webkit-scrollbar{ width:10px }
::-webkit-scrollbar-track{ background:var(--bg) }
::-webkit-scrollbar-thumb{ background:#2B251A; border-radius:6px }
::-webkit-scrollbar-thumb:hover{ background:#4A3E22 }
a:focus-visible,button:focus-visible,[tabindex]:focus-visible{ outline:1px solid var(--gold); outline-offset:4px }
section[id]{ scroll-margin-top:86px }

/* ---------- normalización Elementor (solo esta página) ---------- */
/* OJO: no fijar `width` aquí; rompería .container en contenedores nativos. */
.lz-c.lz-c{
  --gap:0; --content-width:100%; --width:100%;
  --padding-top:0; --padding-right:0; --padding-bottom:0; --padding-left:0;
  --margin-top:0; --margin-right:0; --margin-bottom:0; --margin-left:0;
  --container-widget-width:100%; --min-height:0;
}
.lz-c.lz-c > .elementor-element{ max-width:100% }
.elementor-widget-container{ width:100% }
.elementor-widget-text-editor{ color:inherit; font:300 16px/1.6 var(--sans) }
.elementor-widget-text-editor p{ margin:0 }
.elementor-widget-text-editor h1,.elementor-widget-text-editor h2,
.elementor-widget-text-editor h3,.elementor-widget-text-editor h4{ font-weight:400 }
.lz-anchor{ position:absolute; top:0; left:0; width:1px; height:1px; overflow:hidden }

.container{ width:min(1160px,calc(100% - 48px)); margin-inline:auto }
.sec{ padding:clamp(96px,11vw,150px) 0; position:relative }
.bt{ border-top:1px solid var(--hairline) }

/* ---- bloques de color ---- */
.sec-blue{ background:var(--blue-deep); --hairline:rgba(237,230,214,.15); --bg-soft:var(--blue-soft); --muted:#A9B4C9 }
.sec-red { background:var(--red-deep);  --hairline:rgba(237,230,214,.16); --bg-soft:var(--red-soft);  --muted:#D9BFB6; overflow:hidden }

.triband{ height:3px; background:linear-gradient(90deg,var(--red) 0 33.4%, #EDE6D6 33.4% 66.7%, var(--blue) 66.7% 100%) }
.js .triband.reveal{ opacity:1; transform:scaleX(0); transform-origin:left;
  transition:transform 1.4s var(--ease) .15s }
.js .triband.reveal.in{ transform:scaleX(1) }

/* ---------- capas globales ---------- */
.noise{
  position:fixed; inset:0; z-index:9500; pointer-events:none; opacity:.035;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='0.6'/%3E%3C/svg%3E");
}
.progress{
  position:fixed; top:0; left:0; z-index:750;
  width:100%; height:2px; background:var(--gold);
  transform:scaleX(0); transform-origin:left;
}

/* ---------- cursor ---------- */
.cursor-dot,.cursor-ring{ position:fixed; top:0; left:0; pointer-events:none; opacity:0; border-radius:50% }
.cursor-dot{ z-index:10000; width:6px; height:6px; background:var(--gold-hi) }
.cursor-ring{
  z-index:9999; width:34px; height:34px;
  border:1px solid rgba(201,162,75,.55);
  transition:width .3s,height .3s,border-color .3s,opacity .3s;
}
html.cursor-on .cursor-ring{ width:56px; height:56px; border-color:var(--gold) }
html.cursor-on .cursor-dot{ width:3px; height:3px }
html.fine, html.fine *{ cursor:none!important }

/* ---------- aparición ---------- */
.js .rise{ opacity:0; transform:translateY(26px);
  transition:opacity .9s ease var(--d,0s), transform 1s var(--ease) var(--d,0s) }
.js body.loaded .rise{ opacity:1; transform:none }
.js .reveal{ opacity:0; transform:translateY(28px);
  transition:opacity .9s ease var(--d,0s), transform 1s var(--ease) var(--d,0s) }
.js .reveal.in{ opacity:1; transform:none }

/* retardos escalonados (sustituyen al style="--d:…" del HTML) */
.d1{--d:.1s}.d2{--d:.12s}.d3{--d:.15s}.d4{--d:.16s}.d5{--d:.2s}.d6{--d:.24s}
.d7{--d:.3s}.d8{--d:.35s}.d9{--d:.36s}.d10{--d:.42s}.d11{--d:.45s}.d12{--d:.5s}
.d13{--d:.65s}.d14{--d:.85s}.d15{--d:1s}
.i0{--i:0}.i1{--i:1}.i2{--i:2}.i3{--i:3}

/* ---------- navegación ---------- */
.nav{
  position:fixed; inset:0 0 auto 0; z-index:700;
  display:flex; align-items:center; justify-content:space-between;
  padding:18px clamp(20px,4vw,48px);
  border-bottom:1px solid transparent;
  transition:transform .5s var(--ease), background .35s, padding .35s, border-color .35s, opacity .8s ease .1s;
}
.js .nav{ opacity:0; transform:translateY(-14px) }
.js body.loaded .nav{ opacity:1; transform:none }
.nav.scrolled{
  background:rgba(11,10,8,.82);
  -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
  border-bottom-color:var(--hairline); padding-block:11px;
}
.nav.hidden{ transform:translateY(-100%) }
.brand{ display:flex; align-items:center; gap:14px; text-decoration:none }
.brand-mark{
  width:40px; height:40px; border:1px solid var(--goldline); border-radius:50%;
  display:grid; place-items:center;
  font:400 18px/1 var(--disp); letter-spacing:.04em; color:var(--gold);
  transition:border-color .3s,color .3s;
}
.brand:hover .brand-mark{ border-color:var(--gold); color:var(--gold-hi) }
.brand-text{ display:flex; flex-direction:column; line-height:1.25 }
.brand-text strong{ font:400 16px/1 var(--disp); letter-spacing:.22em; color:var(--ink) }
.brand-text em{ font:400 9.5px var(--disp); font-style:normal; letter-spacing:.4em; color:var(--muted); text-transform:uppercase }
/* ---------- logos de marca (imagen en el marcado del nav y del pie) ---------- */
.lz-nav-host .brand img{ height:40px; width:auto; display:block }
.f-brand .brand img{ height:56px; width:auto; display:block }
.nav-links{ display:flex; gap:clamp(18px,2.4vw,34px) }
.nav-links a{
  position:relative; text-decoration:none;
  font:400 14px var(--disp); letter-spacing:.14em; text-transform:uppercase;
  color:var(--muted); padding:6px 2px; transition:color .3s;
}
.nav-links a::after{
  content:""; position:absolute; left:0; bottom:0; width:100%; height:1px;
  background:var(--gold); transform:scaleX(0); transform-origin:left;
  transition:transform .45s var(--ease);
}
.nav-links a:hover{ color:var(--ink) }
.nav-links a:hover::after{ transform:scaleX(1) }
.nav-right{ display:flex; align-items:center; gap:14px }
.nav-burger{
  display:none; width:44px; height:44px; border:1px solid var(--hairline); border-radius:50%;
  color:var(--ink); font-size:20px; place-items:center; transition:border-color .3s,color .3s;
}
.nav-burger:hover{ border-color:var(--gold); color:var(--gold-hi) }

/* ---------- menú móvil ---------- */
.menu{
  position:fixed; inset:0; z-index:800; display:flex; flex-direction:column;
  background:rgba(11,10,8,.97);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  padding:20px clamp(20px,6vw,44px) 28px;
  opacity:0; visibility:hidden; transition:opacity .45s ease, visibility .45s;
}
.menu.open{ opacity:1; visibility:visible }
.menu-top{ display:flex; justify-content:space-between; align-items:center }
.menu-top span{ font:400 12px var(--disp); letter-spacing:.26em; color:var(--muted) }
.menu-close{
  width:44px; height:44px; border:1px solid var(--goldline); border-radius:50%;
  color:var(--gold); font-size:19px; display:grid; place-items:center; transition:.3s;
}
.menu-close:hover{ border-color:var(--gold); transform:rotate(90deg) }
.menu-nav{ margin:auto 0; display:flex; flex-direction:column }
.menu-nav a{
  display:flex; align-items:baseline; gap:20px; text-decoration:none;
  font:400 clamp(2.1rem,6.5vw,2.9rem)/1 var(--disp);
  letter-spacing:.04em; text-transform:uppercase; color:var(--ink);
  padding:16px 4px; border-bottom:1px solid var(--hairline);
  opacity:0; transform:translateY(24px);
  transition:opacity .55s ease, transform .65s var(--ease), color .3s;
}
.menu.open .menu-nav a{ opacity:1; transform:none; transition-delay:calc(120ms + var(--i)*60ms) }
.menu-nav a span{ font:500 italic 1rem var(--serif); color:var(--gold) }
.menu-nav a:hover{ color:var(--gold-hi) }
.menu-foot{ display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap }
.menu-foot > a{ text-decoration:none; font:400 13px var(--sans); letter-spacing:.08em; color:var(--muted); display:flex; align-items:center; gap:10px }
.menu-foot > a i{ color:var(--gold); font-size:16px }
.menu-soc{ display:flex; gap:10px }

/* ---------- botones ---------- */
.btn{
  position:relative; overflow:hidden;
  display:inline-flex; align-items:center; gap:12px;
  padding:19px 36px; border-radius:2px; text-decoration:none;
  font:400 14.5px var(--disp); letter-spacing:.2em; text-transform:uppercase;
  transition:background .35s, color .35s, border-color .35s;
}
.btn i{ font-size:17px }
.btn-gold{ background:var(--gold); color:#161208 }
.btn-gold:hover{ background:var(--gold-hi) }
.btn-gold::after{
  content:""; position:absolute; top:-20%; bottom:-20%; left:0; width:34%;
  background:rgba(255,255,255,.28); transform:translateX(-180%) skewX(-18deg);
  transition:transform .8s ease;
}
.btn-gold:hover::after{ transform:translateX(420%) skewX(-18deg) }
.btn-ghost{ border:1px solid rgba(201,162,75,.4); color:var(--ink) }
.btn-ghost:hover{ border-color:var(--gold); background:rgba(201,162,75,.07) }
.btn-sm{ padding:14px 26px; font-size:12.5px; letter-spacing:.18em }
.magnet{ will-change:transform }

/* ---------- hero ---------- */
.hero{
  position:relative; min-height:100vh;
  display:flex; align-items:center;
  padding:150px 0 130px;
}
.hero-inner{ max-width:820px }
.kicker{
  display:flex; align-items:center; gap:12px;
  font:400 12.5px var(--disp); letter-spacing:.3em; text-transform:uppercase; color:var(--muted);
}
.kicker i{ color:var(--gold); font-size:15px }
.kicker .hello{
  font:500 italic 1.4rem var(--serif); color:var(--gold-hi);
  text-transform:none; letter-spacing:.02em; margin-right:2px;
}
.hero-title{
  font:400 clamp(4rem,10.5vw,9.2rem)/0.96 var(--disp);
  letter-spacing:.015em; text-transform:uppercase;
  margin:26px 0 10px;
}
.hero-title .line{ display:block; overflow:hidden }
.hero-title .line > span{ display:inline-block }
.js .hero-title .line > span{ transform:translateY(115%); transition:transform 1.1s var(--ease) }
.js body.loaded .hero-title .line > span{ transform:none }
.js .hero-title .line:nth-child(2) > span{ transition-delay:.16s }
.hero-title-it{
  font:500 italic clamp(1.6rem,3.4vw,2.6rem)/1.2 var(--serif);
  color:var(--gold-hi); margin:0 0 26px;
}
.hero-sub{ max-width:52ch; color:var(--muted); font:300 16.5px/1.7 var(--sans) }
.hero-sub strong{ color:var(--ink); font-weight:400 }
.hero-actions{ display:flex; flex-wrap:wrap; gap:16px; margin-top:44px }

.stats{
  display:grid; grid-template-columns:repeat(4,1fr);
  margin-top:66px; border-top:1px solid var(--hairline);
}
.stat{ padding:24px 26px 2px 0 }
.stat + .stat{ border-left:1px solid var(--hairline); padding-left:26px }
.stat b{ display:block; font:400 clamp(2.7rem,3.8vw,3.8rem)/1 var(--disp); letter-spacing:.02em; color:var(--ink) }
.stat b em.plus{ font:400 .55em var(--disp); font-style:normal; color:var(--gold); margin-left:3px }
.stat b em.ord{ font:italic 500 .5em var(--serif); color:var(--gold); margin-left:3px }
.stat .lbl{ display:block; margin-top:10px; font:400 10.5px var(--disp); letter-spacing:.24em; text-transform:uppercase; color:var(--muted) }

.scroll-cue{
  position:absolute; bottom:30px; left:50%; transform:translateX(-50%);
  text-align:center; font:400 11px var(--disp); letter-spacing:.4em; text-transform:uppercase; color:var(--muted);
}
.cue-line{ width:1px; height:54px; margin:12px auto 0; background:var(--hairline); position:relative; overflow:hidden }
.cue-line::after{
  content:""; position:absolute; left:0; width:1px; height:16px; top:-16px; background:var(--gold);
  animation:cueDrop 2.3s cubic-bezier(.6,0,.4,1) infinite;
}
@keyframes cueDrop{ 0%{ top:-16px } 65%,100%{ top:54px } }

/* ---------- poste de barbero ---------- */
.hero-pole{
  position:absolute; right:clamp(24px,7vw,110px); top:50%; transform:translateY(-50%);
  display:flex; align-items:center; gap:20px;
}
.pole-caption{
  writing-mode:vertical-rl; font:400 11px var(--disp); letter-spacing:.4em;
  text-transform:uppercase; color:var(--muted);
}
.pole{ display:flex; flex-direction:column; align-items:center; width:78px }
.pole-finial{ width:10px; height:10px; border-radius:50%; background:var(--gold); margin-bottom:6px }
.pole-cap{
  width:96%; height:24px; border-radius:5px; background:#17130D;
  border:1px solid var(--goldline); box-shadow:inset 0 -7px 9px rgba(0,0,0,.65);
}
.pole-body{
  position:relative; width:100%; height:clamp(300px,52vh,460px);
  overflow:hidden; border-radius:7px; background:#EDE6D6;
}
.pole-stripes{
  position:absolute; left:0; right:0; top:-150px; bottom:-150px; will-change:transform;
  background:repeating-linear-gradient(45deg,
    var(--red) 0 26px, #EDE6D6 26px 52px, var(--blue) 52px 78px);
}
.pole-body::after{
  content:""; position:absolute; inset:0; border-radius:7px;
  box-shadow:inset 0 0 34px 12px rgba(0,0,0,.62), inset 0 0 3px 1px rgba(0,0,0,.5);
}

/* ---------- marquesina ---------- */
.marquee-band{ border-block:1px solid var(--hairline); padding:28px 0 32px }
.marquee-label{
  text-align:center; font:400 11.5px var(--disp); letter-spacing:.34em;
  text-transform:uppercase; color:var(--muted); margin-bottom:20px;
}
.marquee{ overflow:hidden }
.marquee-track{ display:flex; width:max-content; will-change:transform }
.m-set{ display:flex; align-items:center; gap:54px; padding-right:54px }
.m-set span{
  white-space:nowrap; text-transform:uppercase;
  font:400 18px var(--disp); letter-spacing:.24em; color:rgba(237,230,214,.72);
}
.m-set i{ color:var(--gold); font-size:15px }

/* ---------- encabezados ---------- */
.sec-tag{ display:flex; align-items:center; gap:18px; margin-bottom:26px }
.sec-tag::before,.sec-tag::after{ content:""; flex:1; height:1px; background:var(--hairline) }
.sec-tag.left::before{ display:none }
.sec-tag .n{ font:500 italic 1.1rem var(--serif); color:var(--gold) }
.sec-tag .t{ font:400 12.5px var(--disp); letter-spacing:.32em; text-transform:uppercase; color:var(--muted) }
.h2{
  font:400 clamp(2.8rem,5.8vw,4.9rem)/1.02 var(--disp);
  letter-spacing:.015em; text-transform:uppercase;
}
.h2 .it{
  font:500 italic .98em/1.05 var(--serif); color:var(--gold-hi);
  letter-spacing:0; text-transform:none;
}
.intro{ max-width:56ch; margin-top:18px; font:300 16px/1.7 var(--sans); color:var(--muted) }
.intro strong{ color:var(--ink); font-weight:400 }

/* ---------- 01 · programa (bloque azul) ---------- */
.curso-grid{
  display:grid; grid-template-columns:minmax(340px,440px) 1fr;
  gap:clamp(40px,6vw,84px); margin-top:56px; align-items:start;
}
.fade-stage{
  border:1px solid var(--hairline); background:var(--bg-soft);
  padding:24px 20px 22px; will-change:transform;
  transition:transform .5s ease;
}
.stage-h{
  text-align:center; font:400 11.5px var(--disp); letter-spacing:.32em;
  text-transform:uppercase; color:var(--muted); margin-bottom:16px;
}
.fade-tabs{ display:flex; gap:8px }
.fade-tab{
  flex:1; padding:12px 6px; border:1px solid var(--hairline); border-radius:0;
  font:400 13px var(--disp); letter-spacing:.12em; text-transform:uppercase;
  color:var(--muted); transition:color .3s, border-color .3s, background .3s;
}
.fade-tab:hover{ color:var(--ink) }
.fade-tab.active{ color:var(--gold-hi); border-color:var(--goldline); background:rgba(201,162,75,.06) }
#fadeSvg{ display:block; width:100%; max-width:420px; height:auto; margin:10px auto 0 }
.fade-cap{
  min-height:3.2em; margin-top:14px; padding:0 10px; text-align:center;
  font:300 14px/1.6 var(--sans); color:var(--muted);
}
.fade-cap strong{ color:var(--ink); font-weight:400 }

.head-skin{ fill:var(--skin); stroke:rgba(237,230,214,.8); stroke-width:1.5 }
.hair{ fill:#E8E0CE; stroke:rgba(201,162,75,.4); stroke-width:1 }
.hair-lines path{ fill:none; stroke:rgba(11,10,8,.22); stroke-width:1.1 }
.ear{ fill:var(--skin); stroke:rgba(237,230,214,.8); stroke-width:1.5 }
.face-detail{ fill:none; stroke:rgba(237,230,214,.5); stroke-width:1.2 }
#fadeGroup{ transition:transform .85s var(--ease); will-change:transform }
.guide{ stroke:var(--gold); stroke-width:1; stroke-dasharray:5 6; animation:guideMarch 1.6s linear infinite }
@keyframes guideMarch{ to{ stroke-dashoffset:-11 } }
.guide-dot{ fill:var(--gold) }
.guide-tag{ font-family:var(--disp); font-size:13px; letter-spacing:.2em; fill:var(--gold-hi) }
.ruler > line{ stroke:var(--hairline) }
.ruler .tick line{ stroke:rgba(237,230,214,.3); transition:stroke .3s }
.ruler .tick text{ font-family:var(--disp); font-size:11px; letter-spacing:.14em; fill:var(--muted); transition:fill .3s }
.ruler .tick.active line{ stroke:var(--gold) }
.ruler .tick.active text{ fill:var(--gold-hi) }

.learn-list{ list-style:none; margin-top:6px }
.learn-list li{
  display:grid; grid-template-columns:64px 1fr; gap:2px 20px;
  padding:26px 0; border-top:1px solid var(--hairline);
  transition:transform .4s var(--ease);
}
.learn-list li:last-child{ border-bottom:1px solid var(--hairline) }
.learn-list li:hover{ transform:translateX(10px) }
.learn-list .num{ font:500 italic 1.9rem/1 var(--serif); color:var(--gold) }
.learn-list h3{ margin:0; font:400 1.5rem var(--disp); letter-spacing:.04em; text-transform:uppercase; color:var(--ink) }
.learn-list p{ font:300 14.5px/1.6 var(--sans); color:var(--muted); margin-top:6px; max-width:48ch }

.prog-cta{
  margin-top:64px; display:flex; flex-wrap:wrap;
  align-items:center; gap:18px 26px;
}
.chips{ display:flex; flex-wrap:wrap; gap:10px }
.chip{
  display:inline-flex; align-items:center; gap:9px;
  padding:10px 16px; border:1px solid var(--hairline);
  font:400 11.5px var(--disp); letter-spacing:.18em; text-transform:uppercase;
  color:var(--muted); transition:color .3s, border-color .3s;
}
.chip::before{ content:""; width:5px; height:5px; border-radius:50%; background:var(--gold); flex:none }
.chip:hover{ color:var(--ink); border-color:var(--goldline) }

/* ---------- 02 · estudiantes (banda roja compacta) ---------- */
.comm-ghost{
  position:absolute; right:clamp(8px,3vw,56px); top:clamp(48px,7vw,96px);
  font:400 clamp(8rem,18vw,16rem)/1 var(--disp); letter-spacing:-.01em;
  color:rgba(237,230,214,.05); pointer-events:none; user-select:none; white-space:nowrap;
}
.comm-copy{ max-width:46ch; margin-top:18px; font:300 16px/1.75 var(--sans); color:var(--muted) }
.comm-copy strong{ color:var(--ink); font-weight:400 }
.comm-cta{ margin-top:36px }

/* ---------- 03 · explorar (directorio de páginas) ---------- */
.dir-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:56px }
.dir-card{
  position:relative; overflow:hidden;
  display:flex; flex-direction:column; gap:14px;
  border:1px solid var(--hairline); background:#12100B;
  padding:30px 26px 58px; min-height:236px;
  text-decoration:none;
  transition:border-color .35s, transform .45s var(--ease);
}
.dir-card::before{
  content:""; position:absolute; top:-20%; bottom:-20%; left:0; width:30%;
  background:rgba(255,255,255,.06); transform:translateX(-160%) skewX(-18deg);
  transition:transform .9s ease;
}
.dir-card:hover{ border-color:var(--goldline); transform:translateY(-6px) }
.dir-card:hover::before{ transform:translateX(420%) skewX(-18deg) }
.dir-ico{
  width:46px; height:46px; border:1px solid var(--goldline); border-radius:50%;
  display:grid; place-items:center; color:var(--gold); font-size:21px;
}
.dir-cat{ display:block; font:400 11px var(--disp); letter-spacing:.32em; text-transform:uppercase; color:var(--gold) }
.dir-card h3{ font:400 1.8rem var(--disp); letter-spacing:.03em; text-transform:uppercase; color:var(--ink) }
.dir-card p{ font:300 14px/1.6 var(--sans); color:var(--muted); max-width:34ch }
.dir-arr{
  position:absolute; bottom:22px; right:24px;
  color:var(--gold-hi); font-size:20px;
  opacity:0; transform:translateX(-10px);
  transition:opacity .35s, transform .45s var(--ease);
}
.dir-card:hover .dir-arr{ opacity:1; transform:none }

/* ---------- 04 · cierre: promesa + CTA fusionados ---------- */
.cta{ position:relative; text-align:center; padding:clamp(110px,13vw,170px) 0; overflow:hidden }
.cta-frame{ position:absolute; inset:0; width:100%; height:100%; pointer-events:none }
.cta-frame rect{
  fill:none; stroke:rgba(201,162,75,.5); stroke-width:1;
  stroke-dasharray:1; stroke-dashoffset:1;
  transition:stroke-dashoffset 1.7s cubic-bezier(.65,0,.35,1) .25s;
}
.cta.in .cta-frame rect{ stroke-dashoffset:0 }
.cta-seal{
  position:absolute; top:0; left:50%; transform:translate(-50%,-50%);
  width:48px; height:48px; border-radius:50%;
  background:var(--bg); border:1px solid var(--goldline);
  display:grid; place-items:center; color:var(--gold); font-size:20px;
}
.statement{
  margin-top:44px; font:400 clamp(1.8rem,4vw,3.2rem)/1.3 var(--disp);
  letter-spacing:.03em; text-transform:uppercase;
  color:var(--ink); max-width:28ch; margin-inline:auto;
}
.js .statement .w{ color:rgba(237,230,214,.14); transition:color .5s ease }
.statement .w.lit{ color:var(--ink) }
.statement .w.g{ font:500 italic 1.06em var(--serif); text-transform:none }
.statement .w.g.lit{ color:var(--gold-hi) }
.cta-kicker{ margin-top:72px; font:400 12.5px var(--disp); letter-spacing:.36em; text-transform:uppercase; color:var(--gold) }
.cta-title{
  font:400 clamp(3.4rem,10.5vw,9.5rem)/1 var(--disp);
  letter-spacing:.015em; text-transform:uppercase;
  margin:20px 0 24px; color:var(--ink);
}
.cta-title em{ font:500 italic 1em var(--serif); text-transform:none; color:var(--gold-hi) }
.cta-sub{ max-width:48ch; margin:0 auto; font:300 15.5px/1.7 var(--sans); color:var(--muted) }
.cta-actions{ display:flex; justify-content:center; flex-wrap:wrap; gap:16px; margin-top:44px }
.cta-note{ margin-top:18px; font:300 italic 13px var(--sans); color:var(--muted) }
.cta-meta{ display:flex; justify-content:center; flex-wrap:wrap; gap:14px 34px; margin-top:64px }
.cta-meta >*, .cta-meta .copy-mail{
  display:inline-flex; align-items:center; gap:10px;
  font:300 13px var(--sans); color:var(--muted); transition:color .3s;
}
.cta-meta a{ text-decoration:none }
.cta-meta i{ color:var(--gold); font-size:16px }
a.cta-link:hover, .copy-mail:hover{ color:var(--ink) }
.socials{ display:flex; justify-content:center; gap:12px; margin-top:30px }
.soc{
  width:42px; height:42px; border:1px solid var(--hairline); border-radius:50%;
  display:grid; place-items:center; color:var(--muted); font-size:19px;
  text-decoration:none; transition:color .3s, border-color .3s, transform .35s var(--ease);
}
.soc:hover{ color:var(--gold-hi); border-color:var(--gold); transform:translateY(-4px) }

/* ---------- pie ---------- */
.footer{ border-top:1px solid var(--hairline); padding:72px 0 0 }
.footer-grid{
  display:grid; grid-template-columns:1.6fr 1fr 1.2fr auto;
  gap:clamp(32px,5vw,64px); padding-bottom:64px;
}
.f-brand .brand{ margin-bottom:18px }
.f-brand p{ font:300 14px/1.7 var(--sans); color:var(--muted); max-width:30ch }
.f-brand em{ display:block; margin-top:12px; font:500 italic 1.2rem var(--serif); color:var(--gold-hi) }
.f-h{ font:400 11.5px var(--disp); letter-spacing:.34em; text-transform:uppercase; color:var(--gold); margin-bottom:20px }
.f-nav a{
  display:block; text-decoration:none; padding:7px 0;
  font:300 14px var(--sans); color:var(--muted); transition:color .3s, transform .35s var(--ease);
}
.f-nav a:hover{ color:var(--ink); transform:translateX(6px) }
.f-contact p{ display:flex; gap:12px; align-items:flex-start; font:300 13.5px/1.7 var(--sans); color:var(--muted); padding:6px 0 }
.f-contact i{ color:var(--gold); font-size:16px; margin-top:3px }
.f-social{ display:flex; gap:10px; align-items:flex-start }
.f-bottom{
  display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap;
  border-top:1px solid var(--hairline); padding:24px 0 28px;
  font:300 12px var(--sans); color:var(--muted);
}
.f-gen{ font-style:italic }
#toTop{
  width:44px; height:44px; border:1px solid var(--goldline); border-radius:50%;
  color:var(--gold); font-size:18px; display:grid; place-items:center;
  transition:background .3s, color .3s, transform .35s var(--ease);
}
#toTop:hover{ background:var(--gold); color:#161208; transform:translateY(-4px) }

/* ---------- toast ---------- */
.toast{
  position:fixed; bottom:28px; left:50%; z-index:9000;
  transform:translate(-50%,16px); opacity:0; pointer-events:none;
  display:flex; align-items:center; gap:12px;
  background:#15110B; border:1px solid var(--goldline); border-left:2px solid var(--gold);
  padding:14px 22px; font:300 13.5px var(--sans); color:var(--ink);
  transition:opacity .35s ease, transform .45s var(--ease);
}
.toast i{ color:var(--gold); font-size:17px }
.toast.show{ opacity:1; transform:translate(-50%,0) }

/* ---------- responsive ---------- */
@media (max-width:1000px){
  .hero-pole{ right:20px } .pole{ width:60px }
  .pole-body{ height:clamp(240px,42vh,380px) }
}
@media (max-width:960px){
  .curso-grid{ grid-template-columns:1fr }
  .footer-grid{ grid-template-columns:1fr 1fr }
}
@media (max-width:900px){
  .nav-links{ display:none }
  .nav-burger{ display:grid }
  .hero-pole{ display:none }
}
@media (max-width:760px){
  .dir-grid{ grid-template-columns:1fr }
}
@media (max-width:640px){
  .nav .btn{ display:none }
  .stats{ grid-template-columns:1fr 1fr }
  .stat{ padding:20px 14px 2px 0 }
  .stat + .stat{ padding-left:14px }
  .stat:nth-child(3){ border-left:0; padding-left:0 }
  .stat:nth-child(n+3){ border-top:1px solid var(--hairline); margin-top:18px }
  .footer-grid{ grid-template-columns:1fr }
  .comm-ghost{ font-size:clamp(4.5rem,20vw,7rem); top:auto; bottom:24px }
  #toTop{ margin-inline-start:auto }
}

/* ---------- movimiento reducido ---------- */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto }
  *,*::before,*::after{ transition-duration:.001s!important; animation-duration:.001s!important }
}
/* ---------- correctivo: el contenedor nativo de Elementor es flex column,
   por lo que `align-items:center` centraba en horizontal y encogía el
   contenido. El hero se centra en vertical (como el HTML original). ---------- */
.lz-c.hero.hero{ flex-direction:column; justify-content:center; align-items:stretch }
.lz-c.hero.hero > .elementor-widget{ width:100% }
/* ---------- correctivo: los widgets nativos de Elementor traen
   `position:relative`, lo que secuestraba los elementos posicionados en
   absoluto (marco dorado, sello, poste de barbero, indicador de scroll,
   ancla #top). Los devolvemos al flujo normal, como en el HTML original. ---------- */
.lz-c .elementor-element.elementor-widget,
.lz-c .elementor-widget-container{ position:static }
/* ---------- correctivo: el estado final de .rise (transform:none) anulaba el
   translateY(-50%) del poste de barbero y el translateX(-50%) del indicador
   de scroll, dejándolos descentrados. Se conserva la animación de entrada. ---------- */
.js .hero-pole{ transform:translateY(-50%) translateY(26px) }
.js body.loaded .hero-pole{ transform:translateY(-50%) }
.js .scroll-cue{ transform:translateX(-50%) translateY(26px) }
.js body.loaded .scroll-cue{ transform:translateX(-50%) }
/* ---------- accesibilidad: objetivos táctiles cómodos en móvil ---------- */
@media (max-width:900px){
  .fade-tab{ min-height:44px }
  .chip{ min-height:44px }
  .cta-meta .copy-mail{ min-height:44px }
}
/* ---------- accesibilidad: con movimiento reducido no se oculta
   el cursor nativo ni se dibuja el cursor personalizado ---------- */
@media (prefers-reduced-motion:reduce){
  html.fine, html.fine *{ cursor:auto!important }
  .cursor-dot, .cursor-ring{ display:none!important }
}
/* ---------- accesibilidad: iconos sociales a 44px en móvil ---------- */
@media (max-width:900px){
  .soc{ width:44px; height:44px }
}
/* ============================================================
   CAPA DE ADAPTACIÓN — WIDGETS NATIVOS DE ELEMENTOR
   El sistema de diseño de arriba define el "cómo se ve"; este
   bloque mapea la estructura interna de los widgets nativos
   (botón, contador, separador, caja de icono, iconos sociales,
   lista de iconos y encabezado) a esas mismas clases.
   ============================================================ */

/* ---------- contenedores que ahora son filas ---------- */
.lz-c.hero-actions,
.lz-c.prog-cta,
.lz-c.cta-actions,
.lz-c.f-bottom,
.lz-c.f-social{ flex-direction:row }
.lz-c.hero-actions,
.lz-c.prog-cta,
.lz-c.cta-actions{ align-items:center }
.lz-c.cta-actions{ justify-content:center }

/* ---------- botones (.elementor-button) ---------- */
.elementor-button-wrapper{ display:inline-flex }
a.elementor-button.btn{ display:inline-flex; align-items:center; gap:12px; text-align:left }
.btn .elementor-button-content-wrapper{ display:inline-flex; align-items:center; gap:12px; flex-direction:row }
.btn .elementor-button-icon{ display:inline-flex; align-items:center; flex:none; line-height:1 }
.btn .elementor-button-icon svg{ width:17px; height:17px; fill:currentColor; display:block }
.btn .elementor-button-text{ display:inline-block }
.btn-icon-end .elementor-button-content-wrapper{ flex-direction:row-reverse }
.btn-icon-end .elementor-button-icon{ order:0 }

/* ---------- contadores (.elementor-counter) ---------- */
.stat .elementor-counter{ text-align:left }
.stat .elementor-counter-number-wrapper{ display:block; text-align:left;
  font:400 clamp(2.7rem,3.8vw,3.8rem)/1 var(--disp); letter-spacing:.02em; color:var(--ink) }
.stat .elementor-counter-number-wrapper span{ font:inherit; letter-spacing:inherit; color:inherit }
.stat .elementor-counter-number{ display:inline }
.stat .elementor-counter-number-suffix{ font:400 .55em var(--disp); color:var(--gold); margin-left:3px; white-space:normal }
.stat-ord .elementor-counter-number-suffix{ font:italic 500 .5em var(--serif); color:var(--gold) }
.stat .elementor-counter-title{ margin-top:10px; padding:0; text-align:left;
  font:400 10.5px var(--disp); letter-spacing:.24em; text-transform:uppercase; color:var(--muted) }

/* ---------- separadores (tri-band) ---------- */
.triband.triband{ height:auto; background:none }
.triband .elementor-divider{ padding:0 }
.triband .elementor-divider-separator{ display:block; border:0; width:100%; height:3px;
  background:linear-gradient(90deg,var(--red) 0 33.4%, #EDE6D6 33.4% 66.7%, var(--blue) 66.7% 100%) }

/* ---------- encabezados nativos (.elementor-heading-title) ---------- */
.hero-title .elementor-heading-title{
  font:400 clamp(4rem,10.5vw,9.2rem)/0.96 var(--disp);
  letter-spacing:.015em; text-transform:uppercase; color:inherit }
.h2 .elementor-heading-title{ font:400 clamp(2.8rem,5.8vw,4.9rem)/1.02 var(--disp);
  letter-spacing:.015em; text-transform:uppercase; color:inherit }
.cta-title .elementor-heading-title{ color:var(--ink);
  font:400 clamp(3.4rem,10.5vw,9.5rem)/1 var(--disp);
  letter-spacing:.015em; text-transform:uppercase }
.f-h .elementor-heading-title{ font:400 11.5px var(--disp); letter-spacing:.34em;
  text-transform:uppercase; color:var(--gold); margin:0 }
.learn-item-title .elementor-heading-title{ font:400 1.5rem var(--disp); letter-spacing:.04em;
  text-transform:uppercase; color:var(--ink) }
.dir-title .elementor-heading-title{ font:400 1.8rem var(--disp); letter-spacing:.03em;
  text-transform:uppercase; color:var(--ink) }

/* ---------- caja de icono (tarjetas de Explorar) ---------- */
.dir-card{ text-decoration:none }
.dir-ico .elementor-icon{ width:46px; height:46px; border:1px solid var(--goldline);
  border-radius:50%; display:grid; place-items:center; color:var(--gold); font-size:21px;
  background:none; padding:0 }
.dir-ico .elementor-icon svg{ width:21px; height:21px; fill:currentColor; display:block }
.lz-c .elementor-element.dir-arr{ position:absolute; bottom:22px; right:24px;
  opacity:0; transform:translateX(-10px); color:var(--gold-hi);
  transition:opacity .35s, transform .45s var(--ease) }
.dir-arr .elementor-icon svg{ width:20px; height:20px; fill:currentColor; display:block }
.dir-card:hover .dir-arr{ opacity:1; transform:none }
/* enlace estirado: el título enlaza toda la tarjeta */
.dir-title .elementor-heading-title a{ text-decoration:none; color:inherit }
.dir-title .elementor-heading-title a::after{ content:""; position:absolute; inset:0; z-index:2 }
.dir-card:has(a:focus-visible){ outline:1px solid var(--gold); outline-offset:4px }
.dir-card p, .dir-card .dir-cat{ position:relative; z-index:1 }

/* ---------- iconos sociales (.elementor-social-icon) ---------- */
.socials .elementor-social-icons-wrapper{ display:flex; justify-content:center; gap:12px;
  --grid-column-gap:12px; --grid-row-gap:12px }
.socials .elementor-grid-item{ display:inline-flex }
.socials a.elementor-social-icon{ width:42px; height:42px; border:1px solid var(--hairline);
  border-radius:50%; display:grid; place-items:center; color:var(--muted);
  background:none; font-size:19px; text-decoration:none;
  transition:color .3s, border-color .3s, transform .35s var(--ease) }
.socials a.elementor-social-icon svg{ width:19px; height:19px; fill:currentColor; display:block }
.socials a.elementor-social-icon:hover{ color:var(--gold-hi); border-color:var(--gold);
  background:none; transform:translateY(-4px) }
.f-social.socials{ margin-top:0 }
.f-social.socials .elementor-social-icons-wrapper{ justify-content:flex-start }

/* ---------- listas de iconos (pie) ---------- */
.f-nav .elementor-icon-list-items,
.f-contact .elementor-icon-list-items{ margin:0; padding:0 }
.f-nav .elementor-icon-list-item{ padding:0; transition:transform .35s var(--ease) }
.f-nav .elementor-icon-list-item a{ display:block; text-decoration:none;
  font:300 14px var(--sans) }
.f-nav .elementor-icon-list-text{ padding:0; font:300 14px var(--sans); color:var(--muted); transition:color .3s }
.f-nav .elementor-icon-list-item:hover{ transform:translateX(6px) }
.f-nav .elementor-icon-list-item:hover .elementor-icon-list-text{ color:var(--ink) }
.f-contact .elementor-icon-list-item{ padding:6px 0; align-items:flex-start }
.f-contact .elementor-icon-list-icon{ color:var(--gold); margin-top:3px }
.f-contact .elementor-icon-list-icon svg{ width:16px; height:16px; fill:currentColor; display:block }
.f-contact .elementor-icon-list-text{ padding-inline-start:12px;
  font:300 13.5px/1.7 var(--sans); color:var(--muted) }

/* ---------- botón volver arriba ---------- */
#toTop{ padding:0; background:none }
#toTop .elementor-button-content-wrapper{ display:grid; place-items:center }
#toTop .elementor-button-icon svg{ width:18px; height:18px; fill:currentColor }

/* ---------- ajustes móviles de los widgets nativos ---------- */
@media (max-width:900px){
  .socials a.elementor-social-icon{ width:44px; height:44px }
  .socials a.elementor-social-icon svg{ width:20px; height:20px }
}
/* ---------- botones nativos ----------
   `_css_classes` de un widget vive en el contenedor del widget, no en el
   enlace interno; por eso el look del botón se aplica a `.elementor-button`
   y se evita cualquier choque con las clases de tamaño de Elementor. ---------- */
.btnw{ display:inline-flex; align-items:center }
.btnw .elementor-button{ position:relative; overflow:hidden; display:inline-flex; align-items:center;
  gap:12px; padding:19px 36px; border-radius:2px; text-decoration:none;
  font:400 14.5px var(--disp); letter-spacing:.2em; text-transform:uppercase;
  transition:background .35s, color .35s, border-color .35s }
.btnw.btn-sm .elementor-button{ padding:14px 26px; font-size:12.5px; letter-spacing:.18em }
.btnw .elementor-button-content-wrapper{ display:inline-flex; align-items:center; gap:12px; flex-direction:row }
.btnw .elementor-button-icon{ display:inline-flex; align-items:center; flex:none; line-height:1; order:0 }
.btnw .elementor-button-icon svg{ width:17px; height:17px; fill:currentColor; display:block }
.btnw .elementor-button-text{ display:inline-block }
.btnw.btnw-end .elementor-button-content-wrapper{ flex-direction:row-reverse }
.btnw.btn-gold .elementor-button{ background:var(--gold); color:#161208 }
.btnw.btn-gold .elementor-button:hover{ background:var(--gold-hi) }
.btnw.btn-gold .elementor-button::after{ content:""; position:absolute; top:-20%; bottom:-20%; left:0;
  width:34%; background:rgba(255,255,255,.28); transform:translateX(-180%) skewX(-18deg);
  transition:transform .8s ease }
.btnw.btn-gold .elementor-button:hover::after{ transform:translateX(420%) skewX(-18deg) }
.btnw.btn-ghost .elementor-button{ border:1px solid rgba(201,162,75,.4); color:var(--ink);
  background:transparent }
.btnw.btn-ghost .elementor-button:hover{ border-color:var(--gold); background:rgba(201,162,75,.07) }

/* ---------- botón volver arriba (widget de botón) ---------- */
#toTop{ width:44px; height:44px; padding:0; border:0; background:none; display:grid; place-items:center;
  transition:transform .35s var(--ease) }
#toTop .elementor-button{ width:44px; height:44px; padding:0; border:1px solid var(--goldline);
  border-radius:50%; background:none; color:var(--gold); display:grid; place-items:center;
  transition:background .3s, color .3s, transform .35s var(--ease) }
#toTop .elementor-button:hover{ background:var(--gold); color:#161208; transform:translateY(-4px) }
#toTop .elementor-button-content-wrapper{ display:grid; place-items:center }
#toTop .elementor-button-icon svg{ width:18px; height:18px; fill:currentColor; display:block }
/* ---------- correctivo: el tope `max-width:100%` de la normalización
   (especificidad 0,3,0) pisaba el ancho máximo de .hero-inner. ---------- */
.lz-c.hero-inner.hero-inner{ max-width:820px }

/* ---------- correctivo: Elementor emite una regla por widget con
   `flex-direction:row` (especificidad 0,4,0) para el botón, así que el
   icono final se ordena con `order` en vez de row-reverse. ---------- */
.lz-c .btnw.btnw-end .elementor-button-text{ order:1 }
.lz-c .btnw.btnw-end .elementor-button-icon{ order:2 }
/* ---------- correctivo: los contenedores nativos de Elementor traen 20px de
   separación por defecto (--widgets-spacing / --row-gap / --column-gap). El
   diseño del HTML original no usa gaps: todo el ritmo viene de márgenes. ---------- */
.lz-c.lz-c{ --gap:0; --row-gap:0; --column-gap:0;
  --widgets-spacing:0px; --widgets-spacing-row:0px; --widgets-spacing-column:0px }

/* ---------- correctivo: tri-band. La regla del widget Divider usa :not()
   (especificidad 0,4,0) y ganaba sobre `.triband .elementor-divider-separator`,
   dejando la barra sin el degradado tricolor. ---------- */
.lz-c .triband.triband .elementor-divider .elementor-divider-separator{
  display:block; direction:ltr; margin:0; border:0; border-block:0;
  width:100%; height:3px;
  background:linear-gradient(90deg,var(--red) 0 33.4%, #EDE6D6 33.4% 66.7%, var(--blue) 66.7% 100%) }

/* ---------- iconos sociales: fila sin espacio extra ---------- */
.socials .elementor-social-icons-wrapper{ align-items:center; flex-wrap:nowrap; margin:0 }
.socials .elementor-grid-item{ height:42px; align-items:center }
/* ---------- correctivo: el «ª» del contador debe ir en Cormorant itálica.
   `.stat .elementor-counter-number-wrapper span` (0,2,1) ganaba sobre
   `.stat-ord .elementor-counter-number-suffix` (0,2,0). ---------- */
.stat-ord .elementor-counter-number-wrapper span.elementor-counter-number-suffix{
  font:italic 500 .5em var(--serif); color:var(--gold); margin-left:3px }

/* ---------- fila de iconos sociales: altura exacta del diseño (42px) ---------- */
.socials .elementor-social-icons-wrapper{ height:42px }
@media (max-width:900px){
  .socials .elementor-social-icons-wrapper{ height:44px }
}
/* ---------- accesibilidad: nombre accesible de los iconos sociales ----------
   El widget nativo dibuja el nombre de la red dentro de `.elementor-screen-only`,
   pero con un SVG personalizado ese texto queda vacío. Se rellena con contenido
   generado, que sí entra en el cálculo del nombre accesible. ---------- */
.socials .elementor-repeater-item-a1b2c3 .elementor-screen-only::after{ content:"Instagram" }
.socials .elementor-repeater-item-d4e5f6 .elementor-screen-only::after{ content:"Facebook" }
.socials .elementor-repeater-item-g7h8i9 .elementor-screen-only::after{ content:"TikTok" }
/* ---------- correctivo: el ancla #top quedó dentro de un contenedor
   posicionado (.hero-inner), así que apuntaba a y=150 (el padding del hero)
   en vez de al inicio de la página. Al situarla por encima del borde
   superior, el navegador recorta el destino a 0. ---------- */
.lz-anchor{ top:-200px }
/* ============================================================
   CAPA ATÓMICA — los contenedores son e-flexbox (Elementor 4.2.3).
   Emiten `e-con` + `lz-c` + las clases del diseño, así que el sistema
   de arriba se aplica sin cambios. Aquí solo lo específico del atómico.
   ============================================================ */
.e-flexbox-base{ --gap:0; --row-gap:0; --column-gap:0; min-height:0 }
.e-flexbox-base > .e-con-inner{ --content-width:100%; padding:0; gap:0 }
lz-c{ }

/* ============================================================
   Neutralizacion de base-desktop.css (atomico).
   `.elementor .e-flexbox-base` (0,2,0) llega DESPUES en orden y
   impone display:flex / min-height:0 / padding:10px. Se sube la
   especificidad a (0,3,0) y (0,4,0) para recuperar el diseno.
   ============================================================ */
.lz-c.lz-c.lz-c{ display:flex; flex-direction:column; min-height:0; padding:0;
  --gap:0; --row-gap:0; --column-gap:0 }
.lz-c.lz-c.lz-c.container{ padding:0 }
.lz-c.lz-c.lz-c.hero{ align-items:center; min-height:100vh; padding:150px 0 130px }
.lz-c.lz-c.lz-c.sec{ padding:clamp(96px,11vw,150px) 0 }
.lz-c.lz-c.lz-c.footer{ padding:72px 0 0 }
.lz-c.lz-c.lz-c.cta{ padding:clamp(110px,13vw,170px) 0 }
.lz-c.lz-c.lz-c.marquee-band{ padding:28px 0 32px }
.lz-c.lz-c.lz-c.fade-stage{ padding:24px 20px 22px; display:block }
.lz-c.lz-c.lz-c.dir-card{ gap:14px }
.lz-c.lz-c.lz-c.hero-inner{ max-width:820px }
.lz-c.lz-c.lz-c.stats{ display:grid }
.lz-c.lz-c.lz-c.curso-grid{ display:grid }
.lz-c.lz-c.lz-c.dir-grid{ display:grid }
.lz-c.lz-c.lz-c.footer-grid{ display:grid }
.lz-c.lz-c.lz-c.hero-actions,
.lz-c.lz-c.lz-c.prog-cta,
.lz-c.lz-c.lz-c.cta-actions,
.lz-c.lz-c.lz-c.f-bottom,
.lz-c.lz-c.lz-c.f-social,
.lz-c.lz-c.lz-c.socials{ flex-direction:row }
.lz-c.lz-c.lz-c.hero-actions,
.lz-c.lz-c.lz-c.prog-cta,
.lz-c.lz-c.lz-c.cta-actions{ align-items:center }
.lz-c.lz-c.lz-c.cta-actions{ justify-content:center }
.lz-c.lz-c.lz-c.f-bottom{ justify-content:space-between; align-items:center }
.lz-c.lz-c.lz-c.socials{ justify-content:center; gap:12px }
/* correctivo de la revision: .fade-stage volvia a display:block sin motivo; el original es flex column */
.lz-c.lz-c.lz-c.fade-stage{ display:flex; flex-direction:column }
/* ============================================================
   correctivo de la revision visual: faltaban en la capa de
   especificidad tres contenedores cuyo padding/min-height pisa
   base-desktop.css (.elementor .e-flexbox-base, 0,2,0).
   Medido: explorar -88px, footer-grid -64px, f-bottom -52px.
   ============================================================ */
.lz-c.lz-c.lz-c.dir-card{ padding:30px 26px 58px; min-height:236px; gap:14px }
.lz-c.lz-c.lz-c.footer-grid{ padding-bottom:64px }
.lz-c.lz-c.lz-c.f-bottom{ padding:24px 0 28px }
/* correctivo de la revision visual: Hello Elementor (reset.css) aplica
   [type="button"]{border:1px solid #CC3366} con especificidad (0,1,0), que
   gana a mi button{border:0} (0,0,1). Solo afectaba a .copy-mail, el unico
   boton sin borde propio. */
.copy-mail{ border:0; padding:0 }
/* correctivo de la revision visual: el wrapper del boton lleva la clase
   btn-gold como marcador, asi que la regla original `.btn-gold::after`
   (escrita para el ancla) le pintaba un SEGUNDO brillo. Como el wrapper
   tiene will-change:transform (clase .magnet) es bloque contenedor y con
   overflow:visible el brillo se escapaba y se veia como un paralelogramo
   gris. El brillo correcto es el del <a>, que si recorta. */
.btnw::after{ display:none }

/* ============================================================
   CORRECTIVO DE AUDITORÍA (2026-09-17)
   Medido contra la referencia (home.html). Cada regla indica el
   defecto que cierra. No se toca nada que ya coincidiera.
   ============================================================ */

/* D4/D10/D11 — `.elementor-widget-text-editor p` (0,1,1) gana a
   todas las reglas de diseño de párrafo (0,1,0) y anulaba sus
   márgenes. Se re-declaran las 8 reglas afectadas a (0,2,1).
   NO se baja la especificidad de la regla raíz: eso dejaría entrar
   el reset de Hello (`p{margin-block:0 .9rem}`) en .hero-sub,
   .dir-card p, .f-brand p, .cta-note y .toast. */
.elementor-widget-text-editor p.marquee-label{ margin-bottom:20px }
.elementor-widget-text-editor p.intro{ margin-top:18px }
.elementor-widget-text-editor p.stage-h{ margin-bottom:16px }
.elementor-widget-text-editor p.fade-cap{ margin-top:14px }
.elementor-widget-text-editor p.comm-copy{ margin-top:18px }
.elementor-widget-text-editor p.statement{ margin:44px auto 0 }
.elementor-widget-text-editor p.cta-kicker{ margin-top:72px }
.elementor-widget-text-editor p.cta-sub{ margin:0 auto }
.elementor-widget-text-editor p.hero-title-it{ margin:0 0 26px }
.elementor-widget-text-editor p.cta-note{ margin-top:18px }

/* D6 — al quitar el margen duplicado del título interior hay que
   devolver el del contenedor: `.e-con .elementor-widget.elementor-widget`
   (0,3,0) anulaba su margin-block-end. */
.lz-c .elementor-element.hero-title.hero-title{ margin:26px 0 10px }
.lz-c .elementor-element.cta-title.cta-title{ margin:20px 0 24px }

/* El wrapper del widget lleva las clases marcadoras del diseño
   (.btn-ghost / .btn-gold). Su borde y su fondo pintaban una caja de 2px
   extra alrededor del botón (wrapper 253.91x59 vs botón 251.91x57), lo que
   inflaba .hero-actions, .cta-actions y todas las secciones siguientes. */
.btnw.btn-ghost{ border:0 }
.btnw.btn-gold{ background:none }

/* D8 — el `.container` posicionado secuestraba el fantasma «2000+»;
   con el contenedor estático el bloque contenedor pasa a ser #comunidad. */
#comunidad > .elementor-element.container{ position:static }

/* El margin-bottom de .sec-tag (26px) queda atrapado dentro del wrapper del
   widget (un flex item no colapsa márgenes con su contenido). En el HTML de
   referencia colapsaba con el margin-top de .statement, así que el bloque de
   cierre quedaba 26px más abajo. Se devuelve el colapso. */
#cierre .elementor-widget-text-editor:has(> .sec-tag){ margin-bottom:-26px }

/* .f-h — el margen de 20px vivía en el heading interior del widget, así que
   el contenedor medía 33px en vez de 13px. Se devuelve al contenedor. */
.lz-c .elementor-element.f-h.f-h{ margin:0 0 20px }

/* La barra inferior del pie también herede el `font:300 16px/1.6` de
   `.elementor-widget-text-editor` (0,1,0) en vez de los 12px del diseño, que
   viven en el contenedor .f-bottom: a 390 el texto era un 33% más ancho y
   empujaba «Volver arriba» a una tercera línea. Solo tamaño e interlineado
   (sin el shorthand, para no borrar la itálica de .f-gen). */
.f-bottom .elementor-widget-text-editor{ font-size:12px; line-height:normal }

/* D2 — el botón «Volver arriba» mide 44×44 y su texto se veía
   recortado. Se conserva el texto (nombre accesible) pero oculto a la
   vista: el widget Button no tiene control nativo de aria-label. */
#toTop .elementor-button-text{ position:absolute; width:1px; height:1px;
  padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%);
  white-space:nowrap; border:0 }


/* ---------- 02 · testimonios (QA additions) ---------- */
.testi-grid{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(280px, 1fr));
  gap:20px; margin-top:32px; max-width:860px;
}
.testi-card{
  background:rgba(0,0,0,.28); border:1px solid var(--hairline);
  padding:26px 22px; display:flex; flex-direction:column; justify-content:space-between; gap:16px;
  height:100%; border-radius:2px; transition:border-color .3s, transform .35s var(--ease);
}
.testi-card:hover{ border-color:var(--goldline); transform:translateY(-3px); }
.testi-tag{ font:400 11px var(--disp); letter-spacing:.15em; text-transform:uppercase; color:var(--gold); }
.testi-quote{ font:italic 300 15px/1.65 var(--sans); color:var(--ink); margin:0; text-wrap:pretty; }
.testi-author strong{ display:block; font:400 14px var(--disp); letter-spacing:.06em; color:var(--ink); }
.testi-author span{ font:300 12.5px var(--sans); color:var(--muted); }

/* ---------- Scroll offset & header sticky behavior ---------- */
section[id], .sec, [data-id]{
  scroll-margin-top:110px !important;
}
@media (max-width:768px){
  section[id], .sec, [data-id]{
    scroll-margin-top:90px !important;
  }
}
.elementor-sticky.hidden, header.hidden, .nav.hidden{
  transform:translateY(-100%) !important;
  transition:transform .4s var(--ease) !important;
}

/* ---------- Touch targets & balance typography ---------- */
.fade-tab{
  flex:1; min-height:44px !important; min-width:44px !important;
  padding:12px 6px; border:1px solid var(--hairline);
  font:400 13px var(--disp); letter-spacing:.12em; text-transform:uppercase;
  color:var(--muted); transition:color .3s, border-color .3s, background .3s;
  cursor:pointer;
}
.soc{
  width:44px !important; height:44px !important; min-width:44px !important; min-height:44px !important;
  display:grid; place-items:center;
}
.h2{ text-wrap:balance !important; }
.cta-title{ text-wrap:balance !important; }
.statement{ text-wrap:balance !important; }
.cta-sub{ text-wrap:pretty !important; }


/* ---------- Fade Lab Redesign Rules ---------- */
.fade-slider, #fadeGroup, #fadeCover{ transition:transform .65s var(--ease); will-change:transform; }
.guide{ stroke:var(--gold) !important; stroke-width:1.4 !important; stroke-dasharray:4 4 !important; animation:guideMarch 1.6s linear infinite !important; }
@keyframes guideMarch{ to{ stroke-dashoffset:-8px; } }
.guide-dot{ fill:var(--gold-hi) !important; }
.guide-tag{ font-family:var(--disp) !important; font-size:13px !important; letter-spacing:.16em !important; fill:var(--gold-hi) !important; }
.ruler > line{ stroke:var(--hairline) !important; }
.ruler .tick line{ stroke:rgba(237,230,214,.3) !important; transition:stroke .3s; }
.ruler .tick text{ font-family:var(--disp) !important; font-size:11px !important; letter-spacing:.14em !important; fill:var(--muted) !important; transition:fill .3s; }
.ruler .tick.active line{ stroke:var(--gold) !important; }
.ruler .tick.active text{ fill:var(--gold-hi) !important; }/* End custom CSS */