/* Wisdom Academy — Hero de la portada «Noche en 3D» (vista previa, 2026-11-04).
   Fondo azul noche de la marca con brillo turquesa; tarjetas de vidrio que flotan en 3D en computador
   y un collage plano en celular. Sin librerías. El movimiento lo maneja js/public/hero.js. */
.hx { --navy:#0D2B45; --navy2:#071B2E; --teal:#19B6B9; --ink:#0E7C7E; --lima:#E6FF00;
  position:relative; overflow:hidden; color:#fff; display:flex; align-items:center;
  min-height:min(820px, calc(100vh - 88px)); padding:64px 0 80px;
  background:radial-gradient(1100px 700px at 78% 30%, #134A6E 0%, transparent 60%), linear-gradient(160deg, var(--navy) 0%, var(--navy2) 100%); }
.hx::before { content:''; position:absolute; inset:0; pointer-events:none; background-image:radial-gradient(rgba(255,255,255,.07) 1px, transparent 1px); background-size:28px 28px;
  -webkit-mask-image:radial-gradient(ellipse at 70% 40%, #000 20%, transparent 75%); mask-image:radial-gradient(ellipse at 70% 40%, #000 20%, transparent 75%); }
.hx::after { content:''; position:absolute; left:0; right:0; bottom:0; height:1px; background:linear-gradient(90deg, transparent, rgba(25,182,185,.5), transparent); }
.hx-orb { position:absolute; border-radius:50%; filter:blur(80px); pointer-events:none; }
.hx-orb.o1 { width:460px; height:460px; background:var(--teal); opacity:.42; right:6%; top:6%; animation:hx-float 14s ease-in-out infinite; }
.hx-orb.o2 { width:300px; height:300px; background:var(--lima); opacity:.12; right:34%; bottom:-4%; animation:hx-float 18s ease-in-out infinite reverse; }
@keyframes hx-float { 50% { transform:translate(-30px, 24px); } }

.hx-grid { position:relative; z-index:2; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.05fr); gap:clamp(32px,5vw,80px); align-items:center; }
.hx-copy { min-width:0; }
.hx-tags { display:flex; flex-wrap:wrap; gap:8px; margin:0 0 22px; padding:0; list-style:none; }
.hx-tags[hidden] { display:none; }
.hx-tags li { font-family:var(--font-display); font-weight:600; font-size:.86rem !important; color:rgba(255,255,255,.85); background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.14); padding:6px 14px; border-radius:999px; }
.hx-title { font-family:var(--font-display); font-weight:800; font-size:clamp(2.5rem, 5vw, 4.6rem); line-height:1.02; letter-spacing:-.035em !important; color:#fff; margin:0 0 22px; text-wrap:balance; }
.hx-title em { font-style:normal; color:var(--lima); text-shadow:0 0 40px rgba(230,255,0,.35); }
.hx-sub { font-size:clamp(1.05rem,1.4vw,1.25rem); line-height:1.6; color:rgba(255,255,255,.8); max-width:31em; margin:0 0 30px; }
.hx .hx-cta { display:inline-flex; align-items:center; gap:12px; min-height:60px; padding:0 32px; border-radius:999px; font:700 1.12rem var(--font-display); text-decoration:none;
  background:var(--lima) !important; color:var(--navy) !important; border:0 !important; box-shadow:0 14px 40px rgba(230,255,0,.25) !important; transition:box-shadow .25s, transform .25s; }
.hx .hx-cta:hover { transform:translateY(-2px) !important; box-shadow:0 0 0 6px rgba(230,255,0,.15), 0 18px 50px rgba(230,255,0,.35) !important; }
.hx .hx-cta .arr { transition:transform .25s; }
.hx .hx-cta:hover .arr { transform:translateX(5px); }
.hx .hx-cta:focus-visible { outline:3px solid #fff; outline-offset:3px; }
/* Opción: botón turquesa oscuro (regla de la marca: lima solo como resaltador) */
.hx.btn-ink .hx-cta { background:var(--ink) !important; color:#fff !important; box-shadow:0 14px 40px rgba(14,124,126,.45) !important; }
.hx.btn-ink .hx-cta:hover { background:#0B6B6D !important; box-shadow:0 0 0 6px rgba(25,182,185,.18), 0 18px 50px rgba(14,124,126,.5) !important; }
.hx-small { margin:14px 0 0; font-size:.95rem; color:rgba(255,255,255,.65); }

/* Escena */
.hx-scene { position:relative; height:540px; perspective:1400px; transition:opacity .6s; }
.hx-js:not(.hx-fail) .hx-scene { opacity:0; }
.hx-js.hx-ready .hx-scene { opacity:1; }
.hx-stack { position:absolute; inset:0; transform-style:preserve-3d; transform:rotateX(calc(var(--ty,0) * -9deg + 8deg)) rotateY(calc(var(--tx,0) * 14deg - 12deg)); }
.hx-c { position:absolute; border-radius:24px; color:#fff; background:linear-gradient(160deg, rgba(255,255,255,.13), rgba(255,255,255,.04)); border:1px solid rgba(255,255,255,.16);
  -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px); box-shadow:0 40px 80px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.14); }
.hx-main { left:6%; top:17%; width:86%; padding:24px 24px 20px; }
.hx-hd { display:flex; justify-content:space-between; align-items:center; margin-bottom:18px; }
.hx-hd small { display:block; font:600 .78rem var(--font-display); color:rgba(255,255,255,.55); }
.hx-hd strong { font:700 1.02rem var(--font-display); }
.hx-lv { position:relative; width:84px; height:56px; font:900 3.2rem/56px var(--font-display); text-align:right; }
.hx-lv span { position:absolute; inset:0; transition:opacity .5s, transform .5s; }
.hx-lv .a { color:rgba(255,255,255,.85); opacity:0; transform:translateY(-16px) scale(.8); }
.hx-lv .b { color:var(--lima); text-shadow:0 0 30px rgba(230,255,0,.6); }
.hx-scene.down .hx-lv .a { opacity:1; transform:none; }
.hx-scene.down .hx-lv .b { opacity:0; transform:translateY(16px) scale(.8); }
.hx-trk { height:4px; border-radius:9px; background:rgba(255,255,255,.12); position:relative; margin:0 0 8px; }
.hx-trk i { position:absolute; inset:0; border-radius:9px; background:linear-gradient(90deg, var(--teal), var(--lima)); transform-origin:left; transform:scaleX(var(--p,1)); box-shadow:0 0 14px rgba(25,182,185,.7); }
.hx-trk u { position:absolute; top:50%; left:calc(var(--p,1)*100%); width:14px; height:14px; margin:-7px 0 0 -7px; border-radius:50%; background:#fff; box-shadow:0 0 0 5px rgba(230,255,0,.22), 0 0 18px var(--lima); }
.hx-ends { display:flex; justify-content:space-between; font:600 .74rem var(--font-display); color:rgba(255,255,255,.5); margin:0 0 14px; }
.hx-row { display:grid; grid-template-columns:80px 1fr 100px; gap:12px; align-items:center; margin:12px 0; font:600 .9rem var(--font-display); }
.hx-row em { font-style:normal; font-size:.78rem; text-align:right; color:rgba(255,255,255,.65); transition:color .4s; }
.hx-row em.ok { color:var(--lima); }
.hx-bar { height:8px; border-radius:9px; background:rgba(255,255,255,.1); }
.hx-bar i { display:block; height:100%; width:calc(var(--v,1)*100%); border-radius:9px; background:linear-gradient(90deg, var(--ink), var(--teal)); box-shadow:0 0 12px rgba(25,182,185,.6); }

.hx-voice { left:-2%; top:-1%; width:62%; min-height:116px; padding:0; background:none; border:0; box-shadow:none; -webkit-backdrop-filter:none; backdrop-filter:none; transform:translateZ(calc(70px + var(--p,1)*40px)); }
.hx-bub { position:absolute; inset:0 0 auto 0; padding:18px 20px; border-radius:22px 22px 22px 6px; font-size:1.12rem; line-height:1.4; -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); }
.hx-bub small { display:block; margin-top:6px; font-size:.78rem; font-weight:500; opacity:.75; }
.hx-b1 { background:rgba(255,255,255,.08); border:1px dashed rgba(255,255,255,.35); color:rgba(255,255,255,.75); opacity:calc(1 - var(--m,1)); transform:translateY(calc(var(--m,1) * -8px)); }
.hx-b1 s { text-decoration:underline wavy rgba(255,130,130,.9); text-underline-offset:5px; }
.hx-b2 { background:linear-gradient(135deg, rgba(25,182,185,.55), rgba(14,124,126,.4)); border:1px solid rgba(25,182,185,.8); color:#fff; font-weight:600; opacity:var(--m,1); transform:translateY(calc((1 - var(--m,1)) * 10px));
  box-shadow:0 0 40px rgba(25,182,185,.35), 0 30px 60px rgba(0,0,0,.35); }
.hx-b2 b { color:var(--lima); font-weight:700; }

.hx-cert { right:-1%; bottom:3%; width:50%; padding:18px 20px; background:linear-gradient(150deg, rgba(230,255,0,.16), rgba(255,255,255,.05)); border-color:rgba(230,255,0,.45);
  opacity:var(--s,1); transform:translateZ(calc(20px + var(--s,1)*90px)) translateY(calc((1 - var(--s,1)) * 30px)); box-shadow:0 0 40px rgba(230,255,0,.18), 0 40px 80px rgba(0,0,0,.4); }
.hx-cert div { font:700 .98rem/1.3 var(--font-display); display:flex; align-items:center; gap:10px; }
.hx-cert svg { width:32px; height:32px; color:var(--lima); flex:none; filter:drop-shadow(0 0 8px rgba(230,255,0,.7)); }
.hx-cert circle { stroke-dasharray:63; stroke-dashoffset:calc(63 * (1 - var(--s,1))); }
.hx-cert p { font-size:.8rem; color:rgba(255,255,255,.68); margin:6px 0 0; }
.hx-note { position:absolute; left:6%; bottom:4%; max-width:42%; font-size:.76rem !important; color:rgba(255,255,255,.5); transform:translateZ(30px); }

/* Tablet vertical: una columna, la escena 3D debajo del texto */
@media (max-width: 960px) {
  .hx { min-height:0; padding:44px 0 56px; }
  .hx-grid { grid-template-columns:minmax(0,1fr); }
  .hx-scene { max-width:560px; width:100%; margin:0 auto; }
}
/* Celular: sin perspectiva; las tarjetas se apilan como un collage (profundidad con sombras, giros leves y brillo) */
@media (max-width: 760px) {
  .hx-title { font-size:clamp(2.2rem, 9.6vw, 3rem); }
  .hx .hx-cta { display:flex; justify-content:center; width:100%; padding:0 20px; }
  .hx-small { text-align:center; }
  .hx-scene { height:auto; perspective:none; max-width:460px; margin-top:4px; }
  .hx-stack { position:relative; transform:none; display:flex; flex-direction:column; }
  .hx-c { position:relative; left:auto; right:auto; top:auto; bottom:auto; width:auto; }
  .hx-voice { order:1; z-index:3; margin:0 18px -26px 0; min-height:96px; transform:rotate(-2.5deg); animation:hx-bob 6s ease-in-out infinite; }
  .hx-main { order:2; z-index:1; padding:44px 18px 18px; }
  .hx-cert { order:3; z-index:3; margin:-24px 0 0 26px; padding:14px 16px; transform:rotate(2deg) translateY(calc((1 - var(--s,1)) * 16px)) scale(calc(.94 + .06 * var(--s,1))); }
  .hx-cert p { display:none; }
  .hx-note { position:static; order:4; transform:none; max-width:none; text-align:right; margin-top:10px; }
  .hx-bub { font-size:1rem; padding:14px 16px; }
  .hx-row { grid-template-columns:68px 1fr 92px; gap:8px; font-size:.84rem; }
  .hx-lv { height:46px; width:70px; font-size:2.6rem; line-height:46px; }
  .hx-orb.o1 { width:300px; height:300px; right:-25%; top:50%; }
}
@keyframes hx-bob { 50% { translate:0 -5px; } }
@media (prefers-reduced-motion: reduce) {
  .hx-orb, .hx-voice { animation:none !important; }
  .hx-scene, .hx-lv span, .hx-row em { transition:none !important; }
}