/* stand.css — portada partida (Conocimiento arriba, Herramientas abajo) y páginas de producto. Misma paleta que la web de Jackson Guardian. */
:root {
  --fondo: #030509; --panel: #0b111d; --panel2: #080d16;   /* Manuel 21-oct: fondo algo más oscuro (sin más brillo) */ --borde: #1f2a40; --borde2: #2a3550;
  --txt: #e8edf7; --tenue: #9aa6bf; --apagado: #66728c;
  --oro: #F5B942; --oro2: #f0a92c; --cielo: #22D3EE;
  --acento: var(--cielo); --acento-rgb: 34, 211, 238;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--fondo); color: var(--txt); font-family: Manrope, system-ui, sans-serif; line-height: 1.5; overflow-x: hidden; }
a { color: inherit; text-decoration: none; }
h1, h2, h3 { font-family: Sora, Manrope, sans-serif; margin: 0; text-wrap: balance; }
.oro { color: var(--oro); }
.zona { --acento: var(--oro); --acento-rgb: 245, 185, 66; }
.pendiente { color: #ffcf7a !important; font-style: italic; }
.antetitulo { text-transform: uppercase; letter-spacing: .16em; font-size: .72rem; font-weight: 800; color: var(--acento); margin: 0 0 6px; }
.sub { color: var(--tenue); margin: 4px 0 0; }
.nota-legal { color: var(--apagado); font-size: .78rem; margin: 14px 0 0; position: relative; z-index: 1; }

/* 22-oct (Daniel): detalles de acabado en toda la web — selección, scrollbar, foco y entrada suave de tarjetas */
::selection { background: rgba(245,185,66,.85); color: #17181c; }
html { scrollbar-color: #2a3550 var(--fondo); }
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: var(--fondo); }
::-webkit-scrollbar-thumb { background: linear-gradient(180deg, #2a3550, #1f2a40); border-radius: 8px; border: 2px solid var(--fondo); }
::-webkit-scrollbar-thumb:hover { background: #3a4a6e; }
:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; border-radius: 4px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
/* tarjetas y carteles entran con un fundido al llegar al viewport (solo navegadores con animation-timeline; si no, quietas) */
@media (prefers-reduced-motion: no-preference) { @supports (animation-timeline: view()) {
  .tarjeta, .banda-cab { animation: aparecer linear both; animation-timeline: view(); animation-range: entry 0% entry 48%; }   /* .cartel NO: el carrusel maneja su propia opacidad */
}}
@keyframes aparecer { from { opacity: .25; transform: translateY(14px); } to { opacity: 1; transform: none; } }
/* brillo que recorre los botones principales — SOLO al pasar el ratón/foco (coste cero en reposo) */
.btn-membresia, .cc-btn:not(.l), .tp-btn:not(.sec) { position: relative; overflow: hidden; }
.btn-membresia::after, .cc-btn:not(.l)::after, .tp-btn:not(.sec)::after {
  content: ''; position: absolute; top: 0; bottom: 0; left: -75%; width: 50%; pointer-events: none;
  background: linear-gradient(105deg, transparent, rgba(255,255,255,.55) 50%, transparent); transform: skewX(-18deg); }
@media (prefers-reduced-motion: no-preference) {
  .btn-membresia:hover::after, .btn-membresia:focus-visible::after, .cc-btn:not(.l):hover::after, .cc-btn:not(.l):focus-visible::after,
  .tp-btn:not(.sec):hover::after { animation: destello .65s ease-out; }
}
@keyframes destello { from { left: -75%; } to { left: 125%; } }
/* enlaces del menú: subrayado que crece desde la izquierda */
.cab-nav a { position: relative; }
.cab-nav a::after { content: ''; position: absolute; left: 0; right: 0; bottom: -3px; height: 2px; border-radius: 2px;
  background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform .22s ease; }
.cab-nav a:hover::after, .cab-nav a:focus-visible::after { transform: scaleX(1); }
/* tarjetas de plan: elevación con halo al pasar (transform/box-shadow, barato) */
.tarjeta.plan { transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease; }
.tarjeta.plan:hover { transform: translateY(-3px); border-color: rgba(var(--acento-rgb), .5); box-shadow: 0 14px 30px rgba(0,0,0,.45), 0 0 18px rgba(var(--acento-rgb), .10); }

/* cabecera */
.cab { position: sticky; top: 0; z-index: 40; display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 20px; background: rgba(5,7,12,.85); backdrop-filter: blur(10px); border-bottom: 1px solid var(--borde); }
.cab-marca { display: flex; align-items: center; gap: 8px; font-size: .95rem; }
.cab-marca img { width: 32px; height: 32px; border-radius: 50%; }
.cab-marca img.cuadrado { border-radius: 8px; }
.cab-marca i { color: var(--apagado); font-style: normal; margin: 0 2px; }
.cab-nav { display: flex; gap: 18px; font-weight: 600; font-size: .9rem; color: var(--tenue); }
.cab-nav a:first-child:hover { color: var(--oro); } .cab-nav a:last-child:hover { color: var(--cielo); }

.lema { text-align: center; margin: 0; padding: 18px 20px; font: 700 clamp(1rem, 2.2vw, 1.25rem) Sora, sans-serif; color: var(--oro); }
.lema span { color: var(--cielo); }

/* ---------- las dos franjas ---------- */
.franja { position: relative; isolation: isolate; padding: 26px clamp(16px, 4vw, 48px) 30px; min-height: max(44vh, 420px); border-top: 1px solid rgba(var(--acento-rgb), .22); }
.franja.zona { background: radial-gradient(70% 90% at 25% 40%, rgba(245,185,66,.05), transparent 70%), linear-gradient(180deg, #0b0a08, #07080c); }
.franja.jg { background: radial-gradient(70% 90% at 25% 60%, rgba(34,211,238,.12), transparent 70%), linear-gradient(180deg, #060a12, #05070c); }
.marca-agua { position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.marca-agua::before { content: ''; position: absolute; width: min(64vh, 560px); aspect-ratio: 1; left: 38%; top: 50%; transform: translate(-50%, -50%) rotate(-8deg); background: var(--logo) center / contain no-repeat; opacity: .07; filter: grayscale(.3) blur(1px); border-radius: 22%; }
.marca-agua::after { content: ''; position: absolute; inset: 0; background-image: var(--logo); background-size: 46px; background-repeat: space; opacity: .018; mask-image: radial-gradient(60% 70% at 40% 50%, #000, transparent 75%); }
.franja-cab { position: relative; z-index: 1; }
.franja-cab h2 { font-size: clamp(1.5rem, 3.4vw, 2.1rem); }
/* Botón "Plataforma NinjaTrader" (enlace de afiliado de Manuel) arriba a la derecha de la franja de La Zona */
.plataforma-nt { position: absolute; top: 0; right: 0; display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--txt, #e9edf4); padding: 6px 14px 6px 6px; border-radius: 999px; border: 1px solid rgba(245,185,66,.45); background: rgba(14,12,8,.7); transition: border-color .2s, box-shadow .2s, transform .2s; }
.plataforma-nt:hover { border-color: var(--oro); box-shadow: 0 0 18px rgba(245,185,66,.35); transform: translateY(-1px); }
.pnt-circ { width: 52px; height: 52px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: radial-gradient(circle at 40% 35%, #2a2f3a, #0d1016 70%); box-shadow: inset 0 0 0 1px rgba(255,66,0,.45), 0 0 14px rgba(255,66,0,.25); flex: none; overflow: hidden; }
/* NT de NinjaTrader en 3D girando siempre (hoja de 96 fotogramas, render propio del logo oficial que pasó Manuel, 13-oct) */
.pnt-nt { width: 38px; height: 38px; background: url(img/holo/nt8-360-h96-v1-l.webp) no-repeat 0 0 / 1200% 800%; animation: holo-x .5s steps(12) infinite, holo-y 4s steps(8) infinite; }
.pnt-txt { display: flex; flex-direction: column; gap: 3px; line-height: 1.1; }
.pnt-txt small { font-size: .62rem; letter-spacing: .14em; text-transform: uppercase; color: var(--oro); font-weight: 800; }
.pnt-marca { display: flex; align-items: center; gap: 6px; }
.pnt-marca img { height: 17px; width: auto; display: block; }
.pnt-marca b { font: 800 1.05rem/1 Sora, sans-serif; color: #ff4200; }
.plataforma-nt:hover { border-color: #ff4200; box-shadow: 0 0 18px rgba(255,66,0,.35); }
@media (max-width: 700px) { .plataforma-nt { position: static; margin-top: 12px; display: inline-flex; } }
.franja-cuerpo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(240px, 300px); gap: 28px; align-items: center; margin-top: 4px; }

/* ---------- el stand: iconos suspendidos sobre una peana ---------- */
/* (la pieza se pinta con capas: .giro > .capa×6 + .cara; ver «holograma» más abajo) */
.stand { position: relative; padding: 110px 0 0; }
.iconos { position: relative; z-index: 2; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px clamp(10px, 2.2vw, 30px); padding: 0 8px; }
.peana { position: relative; height: 112px; margin: -86px 0 0; z-index: 1; }
.peana::before { content: ''; position: absolute; inset: 0; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255,255,255,.07), rgba(var(--acento-rgb), .09) 55%, rgba(var(--acento-rgb), .03) 82%, transparent);
  border: 1px solid rgba(var(--acento-rgb), .32); box-shadow: 0 0 46px rgba(var(--acento-rgb), .09), inset 0 -10px 24px rgba(0,0,0,.45); }
.peana::after { content: ''; position: absolute; left: 6%; right: 6%; top: 78%; height: 22px; border-radius: 50%; background: radial-gradient(closest-side, rgba(var(--acento-rgb), .14), transparent); filter: blur(6px); }

.ico { position: relative; display: flex; flex-direction: column; align-items: center; width: 132px; text-align: center; outline: none; }   /* Manuel 21-oct: iconos ligeramente más grandes */
.flota { display: block; animation: flotar 4.6s ease-in-out infinite; animation-delay: var(--d, 0s); }
.pieza { position: relative; display: block; width: 116px; height: 116px; transition: transform .32s cubic-bezier(.2,.8,.2,1.2);
  filter: drop-shadow(0 0 14px rgba(var(--acento-rgb), .38)); }   /* Manuel 22-oct (reunión tarde): más brillo en los iconos, que destaquen sin molestar */
.pieza img { width: 100%; height: 100%; object-fit: cover; border-radius: 24px; display: block; border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 1px 0 rgba(255,255,255,.35) inset, 0 16px 26px rgba(0,0,0,.6), 0 4px 0 rgba(0,0,0,.35); }
.pieza::before { content: ''; position: absolute; inset: 0; border-radius: 24px; pointer-events: none; z-index: 2;
  background: linear-gradient(155deg, rgba(255,255,255,.4) 0%, rgba(255,255,255,.08) 28%, transparent 50%), radial-gradient(120% 80% at 50% 120%, rgba(0,0,0,.35), transparent 60%); }
.pieza.css { border-radius: 24px; display: flex; align-items: center; justify-content: center;
  background: radial-gradient(90% 90% at 30% 20%, #3fe6ff, #0e7fa0 55%, #073247); box-shadow: 0 1px 0 rgba(255,255,255,.4) inset, 0 -6px 14px rgba(0,0,0,.35) inset, 0 16px 26px rgba(0,0,0,.6), 0 4px 0 rgba(0,0,0,.35); }
.zona .pieza.css { background: radial-gradient(90% 90% at 30% 20%, #ffe08f, #e99a1d 55%, #6e3f05); }
.pieza.css svg { width: 54%; height: 54%; fill: none; stroke: #fff; stroke-width: 3.6; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 2px 2px rgba(0,0,0,.35)); }
.jg .pieza.css svg rect { fill: rgba(255,255,255,.9); stroke: none; }
.pieza.css svg .vivo { fill: #ff4d4d; stroke: none; }
.sombra { display: block; width: 58px; height: 10px; margin-top: 12px; border-radius: 50%; background: radial-gradient(closest-side, rgba(0,0,0,.75), transparent); animation: sombra 4.6s ease-in-out infinite; animation-delay: var(--d, 0s); transition: transform .32s; }
.nombre { margin-top: 6px; font-weight: 700; font-size: .78rem; line-height: 1.25; color: var(--tenue); transition: color .2s; }
.nota { position: absolute; z-index: 5; top: -64px; left: calc(50% + 108px); width: 220px; padding: 10px 12px; border-radius: 14px; text-align: left;
  background: rgba(13,20,34,.97); border: 1px solid rgba(var(--acento-rgb), .55); box-shadow: 0 16px 40px rgba(0,0,0,.6), 0 0 24px rgba(var(--acento-rgb), .15);
  font-size: .84rem; color: var(--tenue); opacity: 0; pointer-events: none; transform: translateX(-10px) scale(.96); transition: opacity .22s, transform .22s; }
.ico.izq .nota { left: auto; right: calc(50% + 108px); transform: translateX(10px) scale(.96); }
.nota b { display: block; color: var(--txt); font-family: Sora, sans-serif; font-size: .92rem; margin-bottom: 2px; }
.nota .ir { display: block; margin-top: 6px; font-weight: 800; font-size: .76rem; color: var(--acento); }
@media (hover: hover) {
  .ico:hover .pieza, .ico:focus-visible .pieza { transform: scale(1.75) translateY(-26px); }
  .ico:hover .giro, .ico:focus-visible .giro { animation: girar 3.6s linear infinite; filter: drop-shadow(0 0 16px rgba(var(--acento-rgb), .75)); }
  .ico:hover .giro::after, .ico:focus-visible .giro::after { opacity: 1; }
  .ico:hover::before, .ico:focus-visible::before { opacity: 1; transform: translateX(-50%) scaleY(1); }
  .ico:hover .sombra, .ico:focus-visible .sombra { transform: scale(1.25); opacity: .55; }
  .ico:hover .nombre, .ico:focus-visible .nombre { color: var(--acento); }
  .ico:hover .nota, .ico:focus-visible .nota { opacity: 1; transform: none; }
  .ico:hover { z-index: 6; }
}
.ico:focus-visible .pieza { outline: 2px solid var(--acento); outline-offset: 6px; border-radius: 26px; }
@keyframes flotar { 0%, 100% { transform: translateY(0) rotate(-1deg); } 50% { transform: translateY(-9px) rotate(1deg); } }
@keyframes sombra { 0%, 100% { opacity: .9; transform: scaleX(1); } 50% { opacity: .5; transform: scaleX(.78); } }

/* ---------- holograma: pieza con grosor que gira en 3D al pasar el puntero ---------- */
.ico { perspective: 700px; }
.flota, .pieza, .giro { transform-style: preserve-3d; }
.giro { position: relative; display: block; width: 100%; height: 100%; }
.pieza::before { transform: translateZ(1.5px); }
.cara { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; transform: translateZ(1px); border-radius: inherit; }
.pieza.css .cara svg { width: 54%; height: 54%; }
.capa { position: absolute; inset: 0; border-radius: 24px; transform: translateZ(calc(var(--k) * -1.7px)); filter: brightness(calc(.62 - var(--k) * .05)); }
.cara.dorso { transform: rotateY(180deg) translateZ(11.2px); }   /* 21-oct: cara trasera de la pieza-moneda (detrás de las 6 capas) */
.capa img { box-shadow: none !important; }
.pieza.css .capa { background: radial-gradient(90% 90% at 30% 20%, #3fe6ff, #0e7fa0 55%, #073247); }
.zona .pieza.css .capa { background: radial-gradient(90% 90% at 30% 20%, #ffe08f, #e99a1d 55%, #6e3f05); }
.pieza.css { background: none; box-shadow: none; }
.pieza.css .cara { background: radial-gradient(90% 90% at 30% 20%, #3fe6ff, #0e7fa0 55%, #073247); box-shadow: 0 1px 0 rgba(255,255,255,.4) inset, 0 -6px 14px rgba(0,0,0,.35) inset, 0 16px 26px rgba(0,0,0,.6); }
.zona .pieza.css .cara { background: radial-gradient(90% 90% at 30% 20%, #ffe08f, #e99a1d 55%, #6e3f05); }
.giro::after { content: ''; position: absolute; inset: -3px; border-radius: 26px; pointer-events: none; opacity: 0; transition: opacity .25s; transform: translateZ(2px);
  background: repeating-linear-gradient(0deg, rgba(var(--acento-rgb), .22) 0 2px, transparent 2px 5px); background-size: 100% 10px; mix-blend-mode: screen; animation: barrido 1s linear infinite; }
.ico::before { content: ''; position: absolute; z-index: -1; left: 50%; bottom: 44px; width: 150px; height: 190px; pointer-events: none; opacity: 0; transform-origin: 50% 100%; transform: translateX(-50%) scaleY(.4); transition: opacity .3s, transform .3s;
  background: linear-gradient(0deg, rgba(var(--acento-rgb), .38), rgba(var(--acento-rgb), .06) 70%, transparent); clip-path: polygon(42% 100%, 58% 100%, 100% 0, 0 0); filter: blur(2px); }
.holo-anim { position: absolute; left: -14%; top: -20%; width: 128%; height: 128%; pointer-events: none; transform: translateZ(4px);
  background-repeat: no-repeat; background-size: 1200% 800%; animation: holo-x .5s steps(12) infinite, holo-y 4s steps(8) infinite; animation-play-state: paused;
  filter: drop-shadow(0 0 8px rgba(var(--acento-rgb), .55)); transition: filter .25s; }
/* sin cursor (móvil) gira siempre */
@media (hover: none) { .holo-anim { animation-play-state: running; } }
.prod-cab .holo-anim { animation-play-state: running; }
@keyframes holo-x { from { background-position-x: 0%; } to { background-position-x: 109.0909%; } }
@keyframes holo-y { from { background-position-y: 0%; } to { background-position-y: 114.2857%; } }
.con-holo .giro, .ico:hover .con-holo .giro, .ico:focus-visible .con-holo .giro { opacity: 0 !important; animation: none !important; visibility: hidden; }
.con-holo::before { opacity: 0; }
@media (hover: hover) {
  .ico:hover .con-holo .holo-anim, .ico:focus-visible .con-holo .holo-anim { filter: drop-shadow(0 0 14px rgba(var(--acento-rgb), .9)) drop-shadow(0 0 2px rgba(255,255,255,.4)) brightness(1.08); }
  /* gira solo con el cursor encima; al salir se queda donde iba y la próxima vez sigue desde ahí */
  .ico:hover .holo-anim, .ico:focus-visible .holo-anim { animation-play-state: running; }
}
/* renders 3D de verdad (La Zona): sin halo de color ni brillo dorado encima; solo sombra sólida debajo */
.pieza.con-holo, .zona .pieza.css.con-holo { background: none; box-shadow: none; border: 0; }   /* el render ya es el objeto: sin recuadro de color detrás */
/* Daniel 11-oct: los iconos de Jackson Guardian igual que los de Manuel, NADA de holograma: sin halo de color, sin haz de luz; render sólido con sombra debajo */
.holo-anim { filter: drop-shadow(0 8px 10px rgba(0,0,0,.7)); }
.ico:has(.con-holo)::before { display: none; }   /* sin haz de luz */
@media (hover: hover) { .ico:hover .con-holo .holo-anim, .ico:focus-visible .con-holo .holo-anim { filter: drop-shadow(0 10px 14px rgba(0,0,0,.75)) brightness(1.1); } }
/* en la página del producto el busto gira siempre */

@keyframes girar { from { transform: rotateY(0deg); } to { transform: rotateY(360deg); } }
@keyframes parpadeo { 0%, 100% { opacity: 1; } 47% { opacity: .82; } 49% { opacity: 1; } 83% { opacity: .9; } }
@keyframes barrido { to { background-position: 0 10px; } }
/* el holograma solo se mueve cuando lo pide el puntero: se mantiene aunque el sistema pida reducir movimiento */

/* ---------- cartelera: hueco cuadrado de noticias, carteles y eventos ---------- */
.cartelera { position: relative; z-index: 1; width: 100%; max-width: 300px; aspect-ratio: 1; justify-self: end; border-radius: 22px; overflow: hidden;
  border: 1px solid rgba(var(--acento-rgb), .35); background: linear-gradient(160deg, rgba(var(--acento-rgb), .10), rgba(13,20,34,.92) 55%); box-shadow: 0 20px 50px rgba(0,0,0,.45); }
.cartel { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; gap: 4px; padding: 18px 18px 34px; opacity: 0; visibility: hidden; transition: opacity .6s, visibility .6s; }
.cartel.activo { opacity: 1; visibility: visible; }
.cartel:not(:has(img))::before { content: ''; position: absolute; top: 16%; left: 50%; width: 46%; aspect-ratio: 1; transform: translateX(-50%); background: var(--logo-c) center / contain no-repeat; opacity: .22; border-radius: 22%; }
.cartelera[data-casa=zona] { --logo-c: url(img/zt-cuadrado-384.webp); } .cartelera[data-casa=jg] { --logo-c: url(img/marca-jg-384.webp); }
/* 21-oct (Daniel): la foto del cartel llena el cuadro entero, nada de miniatura; degradado abajo para que el texto se lea */
.cartel img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  background: radial-gradient(95% 95% at 32% 24%, rgba(var(--acento-rgb), .4), #0d1422 72%); }   /* las imágenes con transparencia (Centinela, Guardian) también llenan el cuadro */
.cartel:has(img)::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(7,9,14,0) 32%, rgba(7,9,14,.68) 62%, rgba(7,9,14,.92) 100%); }
.cartel > b, .cartel > small, .cartel > .etq { position: relative; z-index: 1; }
.cartel b { font-family: Sora, sans-serif; font-size: 1.12rem; line-height: 1.2; }
.cartel small { color: var(--tenue); font-size: .86rem; }
.etq { align-self: flex-start; font-size: .65rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #1a1405; background: var(--oro); border-radius: 999px; padding: 1px 8px; }
.etq.cielo { background: var(--cielo); color: #03222a; }

/* Sección "Sobre nosotros" (misión/visión/objetivo) + soporte. NO es .franja. */
.info { padding: 26px clamp(16px, 4vw, 48px) 30px; border-top: 1px solid rgba(var(--acento-rgb), .22); background: linear-gradient(180deg, #07080c, #090b11); }
.info-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 26px; max-width: 920px; margin: 0 auto; }
.info h3 { font-family: Sora, sans-serif; font-size: 1.1rem; margin: 0 0 8px; color: var(--oro); }
.info .sub { margin: 4px 0; }
.info .pendiente { color: var(--tenue); font-style: italic; }

/* Banda "En directo" — hub de directos/podcast/entrevistas. NO es .franja (la prueba recorre las .franja esperando stand+cartelera). */
.banda { position: relative; z-index: 1; padding: 24px clamp(16px, 4vw, 48px) 28px; border-top: 1px solid rgba(var(--acento-rgb), .22);
  background: radial-gradient(60% 80% at 50% 0%, rgba(34,211,238,.10), transparent 70%), linear-gradient(180deg, #06080c, #080a10); }
.banda-cab h2 { font-size: clamp(1.4rem, 3.2vw, 1.9rem); margin: 2px 0 0; }
/* 22-oct (Daniel): la cabecera de cada portada, más llamativa — tarjeta con acento dorado y título con degradado, que destaque del texto que viene después */
.banda-cab { position: relative; padding: 18px 22px 18px 26px; border: 1px solid rgba(var(--acento-rgb), .30); border-radius: 16px; margin-bottom: 8px;
  background: radial-gradient(120% 170% at 10% 0%, rgba(var(--acento-rgb), .12), transparent 55%), linear-gradient(180deg, #0d1322, #090d16);
  box-shadow: 0 14px 34px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.05); }
.banda-cab::before { content: ''; position: absolute; left: 0; top: 16px; bottom: 16px; width: 3px; border-radius: 3px;
  background: linear-gradient(180deg, rgb(var(--acento-rgb)), transparent); }
.banda-cab h1, .banda-cab h2 { font-family: Sora, sans-serif; font-weight: 800; font-size: clamp(1.6rem, 3.6vw, 2.2rem);
  background: linear-gradient(180deg, #fff, color-mix(in srgb, rgb(var(--acento-rgb)) 45%, #fff) 60%, rgb(var(--acento-rgb))); -webkit-background-clip: text; background-clip: text; color: transparent; }
.banda-cab .sub { font-size: .98rem; max-width: 70ch; }
.banda-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; margin-top: 16px; }
.tarjeta { display: flex; flex-direction: column; align-items: flex-start; gap: 7px; padding: 18px; border-radius: 18px; text-decoration: none; color: inherit;
  background: rgba(255,255,255,.035); border: 1px solid rgba(255,255,255,.09); transition: transform .2s ease, border-color .2s ease; }
a.tarjeta:hover, a.tarjeta:focus-visible { transform: translateY(-3px); border-color: rgba(var(--acento-rgb), .55); outline: none; }
.tarjeta b { font-family: Sora, sans-serif; font-size: 1.08rem; line-height: 1.2; }
.tarjeta small { color: var(--tenue); font-size: .88rem; line-height: 1.4; }
.tarjeta .ir { margin-top: 2px; font-weight: 800; font-size: .8rem; color: var(--acento); }
.tarjeta.pendiente { opacity: .72; }
.puntos { position: absolute; z-index: 3; right: 14px; bottom: 12px; display: flex; gap: 2px; }
.puntos button { width: 24px; height: 24px; padding: 0; border: 0; background: none; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.puntos button::after { content: ''; width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,.28); transition: background .2s, transform .2s; }
.puntos button[aria-current="true"]::after { background: var(--acento); transform: scale(1.25); }

.pie { padding: 22px clamp(16px, 4vw, 48px) 40px; border-top: 1px solid var(--borde); color: var(--tenue); font-size: .88rem; }
.pie p { margin: 0 0 4px; } .pie a { text-decoration: underline; }

/* ---------- móvil: sin hover. Nombre y nota siempre visibles; un toque lleva a la página ---------- */
@media (max-width: 820px) {
  .cab { padding: 8px 14px; } .cab-nav { display: none; } .cab-marca span { font-size: .85rem; }
  .franja { min-height: 0; padding: 22px 16px 26px; }
  .franja-cuerpo { grid-template-columns: 1fr; gap: 22px; }
  .stand { padding-top: 16px; }
  .iconos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px 8px; padding: 0; }
  .ico { width: auto; }
  .pieza { width: 86px; height: 86px; } .pieza img, .pieza::before, .pieza.css { border-radius: 18px; }
  .capa, .cara, .giro::after { border-radius: 18px; }
  .sombra { width: 46px; margin-top: 9px; }
  .nombre { color: var(--txt); font-size: .8rem; }
  .nota { position: static; width: auto; padding: 0; margin-top: 2px; background: none; border: 0; box-shadow: none; opacity: 1; transform: none; font-size: .72rem; text-align: center; line-height: 1.35; }
  .nota b, .nota .ir { display: none; }
  .peana { display: none; }
  .stand { background: radial-gradient(80% 60% at 50% 55%, rgba(var(--acento-rgb), .08), transparent 75%); }
  .cartelera { max-width: none; justify-self: stretch; aspect-ratio: 4 / 3; }
  .marca-agua::before { width: 90vw; left: 50%; }
}
@media (max-width: 360px) { .iconos { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (prefers-reduced-motion: reduce) { .flota { animation-name: flotar-suave; } html { scroll-behavior: auto; } }
@keyframes flotar-suave { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }

/* ---------- página de producto ---------- */
.prod-pag { max-width: 1040px; margin: 0 auto; padding: 18px clamp(16px, 4vw, 40px) 40px; position: relative; isolation: isolate; }
.volver { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; font-weight: 700; color: var(--tenue); }
.volver:hover { color: var(--acento); }
.prod-cab { display: grid; grid-template-columns: 220px minmax(0, 1fr) minmax(250px, 320px); gap: 28px; align-items: center; padding: 26px; border-radius: 26px; border: 1px solid rgba(var(--acento-rgb), .3);
  background: radial-gradient(70% 100% at 15% 50%, rgba(var(--acento-rgb), .14), transparent 70%), linear-gradient(180deg, rgba(13,20,34,.9), rgba(10,16,28,.7)); }
.prod-cab .stand { padding-top: 10px; } .prod-cab .iconos { display: flex; }
.prod-cab .ico { width: auto; pointer-events: none; } .prod-cab .pieza { width: 130px; height: 130px; } .prod-cab .pieza img, .prod-cab .pieza::before, .prod-cab .pieza.css { border-radius: 34px; } .prod-cab .capa, .prod-cab .cara { border-radius: 34px; } .prod-cab .giro { animation: girar 9s linear infinite; }
.prod-cab .sombra { width: 90px; }
.prod-cab h1 { font-size: clamp(1.7rem, 4vw, 2.5rem); line-height: 1.1; }
.prod-cab .frase { color: var(--tenue); font-size: 1.05rem; margin: 10px 0 0; }
.precio { padding: 18px; border-radius: 18px; border: 1px solid var(--borde2); background: rgba(5,7,12,.6); display: grid; gap: 8px; }
.precio .cifra { font: 800 2.2rem/1 Sora, sans-serif; color: var(--acento); font-variant-numeric: tabular-nums; }
.precio .cifra small { font-size: .9rem; color: var(--tenue); font-weight: 600; margin-left: 4px; }
.precio p { margin: 0; font-size: .8rem; color: var(--apagado); }
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 20px; border-radius: 14px; font: 800 1rem Manrope, sans-serif; border: 0; }
.btn.oro { background: linear-gradient(180deg, #ffd27a, var(--oro2)); color: #1a1405; }
.btn[disabled] { opacity: .5; cursor: not-allowed; }
.desglose { margin-top: 4px; border-top: 1px dashed var(--borde2); padding-top: 10px; font-size: .8rem; color: var(--tenue); }
.desglose table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.desglose td { padding: 2px 0; } .desglose td:last-child { text-align: right; color: var(--txt); }
.desglose .tuyo td { color: var(--oro); font-weight: 800; }
.prod-secs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 18px; align-items: start; }
.prod-cab .nombre { display: none; } .prod-cab .peana { height: 70px; margin-top: -40px; }
.video { max-height: 420px; width: 100%; }
.prod-sec { padding: 20px; border-radius: 20px; border: 1px solid var(--borde); background: linear-gradient(180deg, rgba(13,20,34,.85), rgba(10,16,28,.6)); }
.prod-sec.ancha { grid-column: 1 / -1; }
.prod-sec h2 { font-size: 1.15rem; margin-bottom: 10px; }
.prod-sec ul { margin: 0; padding-left: 1.2em; display: grid; gap: 6px; color: var(--tenue); }
.prod-sec p { margin: 0; color: var(--tenue); }
.prod-sec dl { margin: 0; display: grid; grid-template-columns: max-content 1fr; gap: 6px 16px; }
.prod-sec dt { font-weight: 700; } .prod-sec dd { margin: 0; color: var(--tenue); }
.prod-sec .enlace { display: inline-flex; min-height: 44px; align-items: center; font-weight: 800; color: var(--acento); }
.carteles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.carteles img { width: 100%; height: auto; border-radius: 16px; border: 1px solid var(--borde2); display: block; }
@media (max-width: 560px) { .carteles { grid-template-columns: 1fr; } }
.prod-sec h3.dia { font-size: 1rem; margin: 14px 0 6px; color: var(--txt); }
.prod-sec h3.dia:first-child { margin-top: 0; }
.prod-sec .bono { margin-top: 14px; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--oro2); color: var(--txt);
  background: radial-gradient(90% 90% at 20% 20%, rgba(255, 210, 122, .12), transparent 60%), rgba(13, 20, 34, .6); font-weight: 600; }
.video { aspect-ratio: 16 / 9; border-radius: 16px; border: 1px solid var(--borde2); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; text-align: center; padding: 16px;
  background: radial-gradient(80% 80% at 30% 20%, rgba(var(--acento-rgb), .18), transparent 60%), #070b14; }
.video .play { width: 60px; height: 60px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; color: #1a1405; background: linear-gradient(180deg, #ffd27a, var(--oro2)); }
@media (max-width: 820px) {
  .prod-cab { grid-template-columns: 1fr; padding: 20px; gap: 16px; text-align: center; }
  .prod-cab .pieza { width: 104px; height: 104px; }
  .precio { text-align: left; }
  .prod-secs { grid-template-columns: 1fr; }
}

/* ---- Membresías (sección obra) ---- */
.plan .plan-precio { font: 800 1.8rem/1 Sora, sans-serif; color: var(--acento); margin: 4px 0 8px; font-variant-numeric: tabular-nums; }
.plan .plan-precio small { font-size: .85rem; color: var(--tenue); font-weight: 600; margin-left: 2px; }
.plan-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; width: 100%; }
.plan-lista li { position: relative; padding-left: 20px; font-size: .9rem; color: var(--tenue); line-height: 1.4; }
.plan-lista li::before { content: '✓'; position: absolute; left: 0; color: var(--acento); font-weight: 800; }
.plan-lista li.no { color: var(--apagado); }
.plan-lista li.no::before { content: '—'; color: var(--apagado); }
.plan.destacado { border-color: rgba(var(--acento-rgb), .55); box-shadow: 0 0 0 1px rgba(var(--acento-rgb), .25), 0 16px 30px rgba(0,0,0,.45); }

/* ---- Calendario (vista previa) ---- */
.cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; margin-top: 16px; }
.cal-dia { border: 1px solid var(--borde); border-radius: 12px; overflow: hidden; background: rgba(5,7,12,.5); }
.cal-dia h4 { font: 700 .8rem Sora, sans-serif; text-align: center; padding: 8px 4px; margin: 0; background: rgba(var(--acento-rgb), .1); color: var(--txt); }
.cal-dia .hueco { font-size: .78rem; color: var(--tenue); text-align: center; padding: 12px 4px; font-variant-numeric: tabular-nums; }
.cal-notas { margin: 14px 0 0; padding-left: 18px; color: var(--tenue); font-size: .86rem; }
.cal-notas li { margin: 3px 0; }

/* ---- Bots (tarjetas con logo) ---- */
.tarjeta.bot img { width: 72px; height: 72px; border-radius: 14px; object-fit: cover; border: 1px solid var(--borde); margin-bottom: 2px; }

@media (max-width: 640px) { .cal-grid { grid-template-columns: repeat(2, 1fr); } }

/* --- Pulido 11-oct: CTA planes, bienvenida, marcas, en vivo --- */
.hero-cta { text-align: center; margin: 4px 0 8px; }
.btn-cta { display: inline-block; padding: 11px 26px; border-radius: 999px; background: var(--acento); color: #06121f; font: 800 .95rem Sora, sans-serif; text-decoration: none; box-shadow: 0 10px 24px rgba(var(--acento-rgb), .3); }
.btn-cta:hover, .btn-cta:focus-visible { filter: brightness(1.08); outline: none; }
.video-ph { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; text-align: center; margin-top: 16px; padding: 44px 18px; border: 1px dashed rgba(var(--acento-rgb), .4); border-radius: 18px; background: rgba(5,7,12,.5); }
.video-ph-ic { font-size: 1.6rem; color: var(--acento); }
.video-ph b { font-family: Sora, sans-serif; }
.marcas-fila { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 12px; opacity: .92; }
.marcas-fila img { height: 34px; width: auto; }
.marcas-fila span { color: var(--tenue); font-weight: 700; }

/* ---- Barra superior: compatibilidad + idiomas + botón Membresía (11-oct) ---- */
.cab-acciones{display:flex;align-items:center;gap:14px;margin-left:auto;flex-wrap:wrap}
.compat{display:flex;align-items:center;gap:6px;font-size:.72rem;color:#9aa3b2}
.compat b{color:#e9edf4}
.compat .compat-et{opacity:.7}
.idiomas{display:inline-flex;border:1px solid rgba(255,255,255,.18);border-radius:999px;overflow:hidden}
.idiomas .lang{background:transparent;border:0;color:#9aa3b2;padding:4px 11px;font:inherit;font-size:.78rem;cursor:pointer}
.idiomas .lang.activo{background:#e8b23a;color:#17181c;font-weight:700}
/* 21-oct (Daniel): píldoras de acceso llamativas, con color y relieve */
.btn-membresia{background:linear-gradient(180deg,#ffd98f,#e8b23a 52%,#b9881c);color:#17181c;font-weight:800;padding:8px 18px;border-radius:999px;text-decoration:none;font-size:.86rem;white-space:nowrap;
  border:1px solid #8a6414;box-shadow:inset 0 1px 0 rgba(255,255,255,.55),inset 0 -2px 3px rgba(0,0,0,.28),0 4px 12px rgba(232,178,58,.35);text-shadow:0 1px 0 rgba(255,255,255,.3);transition:transform .15s,box-shadow .15s}
.btn-membresia:hover{filter:brightness(1.06);transform:translateY(-1px);box-shadow:inset 0 1px 0 rgba(255,255,255,.55),inset 0 -2px 3px rgba(0,0,0,.28),0 7px 18px rgba(232,178,58,.5)}
@media(max-width:820px){.cab-acciones{gap:9px}.compat{display:none}}
@media(max-width:560px){.cab-acciones{width:100%;justify-content:space-between;margin-top:8px}}

/* ---- Selector de idioma real (portado de la web pública, 11-oct) ---- */
.jg-lang-switch{position:relative;display:flex;align-items:center}
.jg-lang-btn{width:30px;height:30px;cursor:pointer;border-radius:50%}
.jg-lang-btn:hover{transform:scale(1.1)}
.jg-lang-menu{position:absolute;top:40px;right:0;background:#0e131d;border:1px solid #232c3a;border-radius:14px;padding:10px;display:grid;grid-template-columns:repeat(4,34px);gap:8px;opacity:0;pointer-events:none;transform:translateY(-6px);transition:.15s;z-index:1000}
.jg-lang-switch.open .jg-lang-menu{opacity:1;pointer-events:auto;transform:none}
.jg-lang-item{display:block;padding:0}
.jg-lang-item.actual svg{box-shadow:0 0 0 2px #2EB86B;border-radius:50%}

/* ===== Spec 11-oct: badge en el aire, overlay bienvenida, calendario mes, flotantes, soporte ===== */
/* Punto 4: EN EL AIRE */
.en-el-aire{position:fixed;top:0;left:0;right:0;z-index:1200;background:#c0162b;color:#fff;text-align:center;padding:7px 12px;font-size:.85rem;font-weight:700;letter-spacing:.3px;box-shadow:0 2px 12px rgba(0,0,0,.4)}
.en-el-aire .punto{display:inline-block;width:9px;height:9px;border-radius:50%;background:#fff;margin-right:6px;animation:lzpar 1.1s ease-in-out infinite}
.en-el-aire a{color:#ffe08a;text-decoration:underline;margin-left:8px}
@keyframes lzpar{0%,100%{opacity:1}50%{opacity:.25}}
/* Punto 2: overlay bienvenida */
.bv-overlay{position:fixed;inset:0;z-index:1300;background:rgba(8,10,16,.92);display:flex;align-items:center;justify-content:center;padding:18px}
.bv-caja{max-width:760px;width:100%;text-align:center}
.bv-video{aspect-ratio:16/9;width:100%;border:1px solid #2a3344;border-radius:14px;background:linear-gradient(135deg,#141a26,#0e131d);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;color:#e9edf4}
.bv-video .bv-ic{font-size:2.4rem;color:#e8b23a}
.bv-omitir{margin-top:16px;background:#e8b23a;color:#17181c;font-weight:700;border:0;border-radius:999px;padding:11px 22px;font-size:.95rem;cursor:pointer}
.bv-omitir:hover{filter:brightness(1.08)}
/* Punto 9: calendario mes */
.cal-mes{max-width:560px;margin:0 auto;background:#0e131d;border:1px solid #232c3a;border-radius:14px;padding:12px}
.cal-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.cal-mesnom{font-weight:700;color:#e9edf4;text-transform:capitalize}
.cal-nav{background:#1a2230;border:1px solid #2a3344;color:#cdd6e4;width:30px;height:30px;border-radius:8px;cursor:pointer;font-size:1rem}
.cal-nav:hover{background:#243049}
.cal-dow{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;margin-bottom:4px}
.cal-dow span{text-align:center;font-size:.7rem;color:#8a94a6;padding:3px 0}
.cal-dias{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}
.cal-cel{aspect-ratio:1;border:0;border-radius:8px;background:#161d29;color:#dfe5ef;font:inherit;font-size:.85rem;cursor:pointer;display:flex;align-items:center;justify-content:center}
button.cal-cel:hover{background:#e8b23a;color:#17181c}
.cal-cel.vacia{background:transparent;cursor:default}
.cal-cel.hoy{outline:2px solid #e8b23a}
.cal-cel.sel{background:#e8b23a;color:#17181c;font-weight:700}
.cal-cel.bloq{background:#10141c;color:#4a5568;cursor:not-allowed;text-decoration:line-through}
.cal-cel.pasado{background:#10141c;color:#44506a;cursor:not-allowed}
.cal-detalle{max-width:560px;margin:14px auto 0;background:#0e131d;border:1px solid #232c3a;border-radius:14px;padding:14px}
.cal-det-cab{display:flex;flex-direction:column;gap:2px;margin-bottom:10px}
.cal-det-cab b{color:#fff;font-size:1.05rem}
.cal-det-rango{color:#8a94a6;font-size:.82rem}
.cal-huecos{display:flex;flex-wrap:wrap;gap:8px}
.cal-hueco{background:#1a2230;border:1px solid #2a3344;border-radius:999px;padding:6px 13px;font-size:.82rem;color:#dfe5ef}
.cal-det-nota{color:#8a94a6;font-size:.78rem;margin:10px 0 0}
/* Puntos 5 y 6: botones flotantes + panel soporte */
.flotantes{position:fixed;right:14px;bottom:14px;z-index:1100;display:flex;flex-direction:column;gap:10px}
.flot{display:flex;align-items:center;gap:8px;background:#141a26;border:1px solid #2a3344;color:#e9edf4;border-radius:999px;padding:9px 15px;text-decoration:none;cursor:pointer;font:inherit;font-size:.85rem;box-shadow:0 6px 20px rgba(0,0,0,.4)}
.flot:hover{background:#1d2636;border-color:#3a4760}
.flot.soporte{background:#e8b23a;color:#17181c;border-color:#e8b23a;font-weight:700}
.flot .flot-ic{font-size:1.05rem}
.soporte-panel{position:fixed;right:14px;bottom:120px;z-index:1101;max-width:300px;background:#0e131d;border:1px solid #2a3344;border-radius:14px;padding:16px;box-shadow:0 10px 30px rgba(0,0,0,.5)}
.soporte-panel b{color:#fff}
.soporte-panel p{color:#c3ccda;font-size:.84rem;line-height:1.45;margin:8px 0}
.soporte-panel a{color:#e8b23a}
@media(max-width:560px){.flot .flot-tx{display:none}.flot{padding:11px}}

/* Fix: respetar el atributo hidden pese a display:flex/block de los componentes */
.en-el-aire[hidden],.bv-overlay[hidden],.cal-detalle[hidden],.soporte-panel[hidden]{display:none!important}

/* ---- Membresía: hero con foto + contadores de miembros (11-oct) ---- */
.memb-pag{max-width:1100px;margin:0 auto;padding:16px}
.memb-hero{display:grid;grid-template-columns:1.2fr 1fr;gap:0;border:1px solid rgba(var(--acento-rgb),.32);border-radius:18px;overflow:hidden;background:radial-gradient(130% 150% at 15% 0%, #1b2440, #0e1322 62%);margin-bottom:14px;box-shadow:0 16px 40px rgba(0,0,0,.5), 0 0 28px rgba(var(--acento-rgb),.08), inset 0 1px 0 rgba(255,255,255,.06)}
.memb-hero .memb-foto{position:relative;min-height:220px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;background:linear-gradient(135deg,#141a2c,#0b1020);border-right:1px solid rgba(255,255,255,.07)}
.memb-hero .memb-foto .marcas-fila img{height:42px}
/* 22-oct: la obra de arte ZT × JG cubre TODO el recuadro del hero (nada de miniaturas) */
.memb-hero .memb-foto{min-height:260px}
.memb-hero .memb-arte{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 42%}
.memb-hero .memb-foto .ph{font-size:.74rem}
.memb-hero .memb-sobre{padding:24px 26px;display:flex;flex-direction:column;justify-content:center}
.memb-hero h1{margin:.1em 0;font:800 clamp(1.9rem,4vw,2.4rem)/1.12 Sora,sans-serif;background:linear-gradient(180deg,#fff,color-mix(in srgb, rgb(var(--acento-rgb)) 45%, #fff) 60%,rgb(var(--acento-rgb)));-webkit-background-clip:text;background-clip:text;color:transparent}
.memb-hero .memb-sobre p{margin:.25em 0;color:#b7c0cf;font-size:1.02rem}
.lz-contador{font-size:.84rem;color:#9aa3b2;margin-top:10px!important}
.lz-contador #lzMiembrosGeneral{color:#e8b23a;font-weight:800}
.plan-activos{display:inline-block;margin:4px 0 2px;font-size:.72rem;color:#c9d2e0;background:rgba(232,178,58,.1);border:1px solid rgba(232,178,58,.28);border-radius:999px;padding:3px 11px}
@media(max-width:720px){.memb-hero{grid-template-columns:1fr}.memb-hero .memb-foto{border-right:0;border-bottom:1px solid rgba(255,255,255,.07);min-height:150px}}
.lema + .lz-contador{text-align:center}
.memb-hero .lz-contador{text-align:left}

/* ---- Distintivos de plan + Diamante (11-oct) ---- */
.plan-ic{display:inline-block;margin-right:3px}
.plan-ic.estrella{color:#e8b23a}
.plan-ic.corona{color:#ffd24a}
.plan-ic.diamante-ic{color:#7fd8ff}
.tarjeta.plan.diamante{border:1.5px solid #7fd8ff;box-shadow:0 0 0 1px rgba(127,216,255,.25),0 10px 34px rgba(127,216,255,.14);background:linear-gradient(170deg,rgba(127,216,255,.07),transparent 60%)}
.tarjeta.plan.diamante .etq{color:#bfe9ff}

/* ---- Cartel promocionado (guías gratis / entretenimiento) 11-oct ---- */
.cartel.destacado{border:1px solid rgba(232,178,58,.55);box-shadow:0 0 0 1px rgba(232,178,58,.15),0 8px 26px rgba(232,178,58,.1);background:linear-gradient(165deg,rgba(232,178,58,.08),transparent 60%)}
.cartel.destacado .etq.oro,.etq.oro{background:#e8b23a;color:#17181c}

/* ---- Fondo "portal" (trío del banner de X) en la sección Jackson (11-oct v2) ---- */
.franja.jg{position:relative;background:linear-gradient(rgba(12,14,22,.60),rgba(12,14,22,.70)),#0c0e16 url('img/fondo-jackson-trio-horizontal-2560x1440.webp') center/contain no-repeat}
.franja.jg .marca-agua{display:none}
@media(max-width:760px){.franja.jg{background:linear-gradient(rgba(12,14,22,.62),rgba(12,14,22,.74)),#0c0e16 url('img/fondo-jackson-trio-vertical-1080x1920.webp') center/contain no-repeat}}

/* ---- Fondo de la franja de La Zona (pedido de Daniel 13-oct, hecho por el sobremesa): versión ELÉCTRICA sin logo (Daniel: el ZT quedaba detrás de los iconos), velo ~35 % ---- */
.franja.zona{background:linear-gradient(rgba(7,8,12,.38),rgba(7,8,12,.5)),#07080c url('img/fondo-lazona-electrico-sin-logo-1920.jpg') center/cover no-repeat;background-image:linear-gradient(rgba(7,8,12,.38),rgba(7,8,12,.5)),image-set(url('img/fondo-lazona-electrico-sin-logo-1920.webp') type('image/webp'),url('img/fondo-lazona-electrico-sin-logo-1920.jpg') type('image/jpeg'))}
/* 13-oct noche: fondo de MANUEL (su imagen, «súbelas tal cual», Daniel) en ordenador; ya trae el ZT, así que fuera el ZT superpuesto. Velo suave para que se lea el texto */
@media(min-width:761px){.franja.zona{background-image:linear-gradient(rgba(7,8,12,.22),rgba(7,8,12,.42)),image-set(url('img/fondo-lazona-manuel-1920.webp') 1x type('image/webp'),url('img/fondo-lazona-manuel-2470.webp') 2x type('image/webp'),url('img/fondo-lazona-manuel-2470.jpg') type('image/jpeg'))}.franja.zona .marca-agua{display:none}}
/* ZT de Manuel en el hueco libre de arriba (entre el título y el botón de NinjaTrader), fundido con el fondo para que no se vea el cuadro */
.franja.zona .marca-agua::after{display:none}
.franja.zona .marca-agua::before{width:clamp(150px,15vw,220px);left:50%;top:20%;transform:translate(-50%,-50%);opacity:.95;filter:drop-shadow(0 0 18px rgba(245,185,66,.35));border-radius:0;-webkit-mask-image:radial-gradient(closest-side,#000 62%,transparent 100%);mask-image:radial-gradient(closest-side,#000 62%,transparent 100%)}
@media(max-width:760px){.franja.zona .marca-agua{display:none}}
@media(max-width:760px){.franja.zona{background-image:linear-gradient(rgba(7,8,12,.45),rgba(7,8,12,.6)),image-set(url('img/fondo-lazona-electrico-sin-logo-1280.webp') type('image/webp'),url('img/fondo-lazona-electrico-sin-logo-1280.jpg') type('image/jpeg'))}}

/* logo de cabecera (Manuel 11-oct): una moneda con La Zona Trade por una cara y Jackson Guardian por la otra, girando despacio.
   Gira siempre (no depende de «reducir movimiento»: es lento y suave). */
.moneda { position: relative; display: inline-block; width: 34px; height: 34px; perspective: 400px; flex: none; }
.moneda .cara { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 50%; object-fit: cover; backface-visibility: hidden; -webkit-backface-visibility: hidden; animation: moneda-gira 9s linear infinite; box-shadow: 0 0 10px rgba(232,178,58,.35); }
.moneda .cara.dorso { animation-name: moneda-gira-dorso; box-shadow: 0 0 10px rgba(63,230,255,.35); }
@keyframes moneda-gira { from { transform: rotateY(0deg); } to { transform: rotateY(360deg); } }
@keyframes moneda-gira-dorso { from { transform: rotateY(180deg); } to { transform: rotateY(540deg); } }

/* ventana del grupo de talleres (reunión 11-oct) */
.pozo-cifra { font-size: 1.05rem; } .pozo-cifra b { color: var(--acento); font-size: 1.2rem; }
.pozo-barra { height: 10px; border-radius: 999px; background: rgba(255,255,255,.08); overflow: hidden; margin: 8px 0 10px; }
.pozo-barra span { display: block; height: 100%; background: linear-gradient(90deg, #e8b23a, #ffd24a); border-radius: inherit; }
.pozo-nombres { color: var(--tenue); font-size: .9rem; }
.pozo-btn { margin-top: 6px; padding: 10px 18px; border: 0; border-radius: 12px; background: #e8b23a; color: #17181c; font: 800 .95rem Manrope, sans-serif; cursor: pointer; }
.pozo-btn:disabled { opacity: .55; cursor: not-allowed; }

/* Bot-Lab: el logo de cada bot es su render 3D girando (hoja de 96), como los iconos de Manuel */
.tarjeta.bot .bot-giro { display: block; width: 110px; height: 110px; margin: -4px 0 4px; background-repeat: no-repeat; background-size: 1200% 800%;
  animation: holo-x .5s steps(12) infinite, holo-y 4s steps(8) infinite; filter: drop-shadow(0 8px 10px rgba(0,0,0,.7)); }

/* ===== cuenta de alumno (cuenta.js · plataforma de cuentas por /cc/api) ===== */
/* 21-oct (Daniel): «Entrar» con color y relieve, nada de botón hueco */
.cc-entrar{background:linear-gradient(180deg,#8fe4ff,#3fc6e8 52%,#1b87a8);border:1px solid #0e6b85;color:#04222b;font:800 .86rem Manrope,sans-serif;padding:7px 16px;border-radius:999px;cursor:pointer;white-space:nowrap;min-height:36px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.55),inset 0 -2px 3px rgba(0,0,0,.28),0 4px 12px rgba(63,198,232,.35);text-shadow:0 1px 0 rgba(255,255,255,.3);transition:transform .15s,box-shadow .15s}
.cc-entrar:hover{filter:brightness(1.06);transform:translateY(-1px);box-shadow:inset 0 1px 0 rgba(255,255,255,.55),inset 0 -2px 3px rgba(0,0,0,.28),0 7px 18px rgba(63,198,232,.5)}
.cc-entrar:focus-visible,.cc-btn:focus-visible,.cc-enl:focus-visible,.cc-x:focus-visible,.pozo-btn:focus-visible,.cc-dlg a:focus-visible,.cc-form input:focus-visible,.cc-form textarea:focus-visible{outline:2px solid #e8b23a;outline-offset:2px}
.cc-aviso{display:flex;gap:12px;align-items:center;justify-content:center;flex-wrap:wrap;padding:9px 16px;background:rgba(255,123,114,.1);border-bottom:1px solid rgba(255,123,114,.35);color:#ffc9c4;font:600 .86rem Manrope,sans-serif;text-align:center}
.cc-aviso[hidden]{display:none}
.cc-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:44px;padding:0 18px;border:0;border-radius:12px;background:#e8b23a;color:#17181c;font:800 .92rem Manrope,sans-serif;cursor:pointer;text-decoration:none}
.cc-btn:hover{filter:brightness(1.08)}
.cc-btn.l{background:none;border:1px solid var(--borde2);color:var(--txt);font-weight:700}
.cc-btn.l:hover{border-color:#e8b23a;color:#e8b23a;filter:none}
.cc-btn[disabled]{opacity:.55;cursor:wait}
.cc-velo{position:fixed;inset:0;z-index:8800;background:rgba(3,5,10,.82);display:flex;align-items:center;justify-content:center;padding:16px;font-family:Manrope,system-ui,sans-serif}
.cc-dlg{background:var(--panel);border:1px solid var(--borde2);border-radius:18px;width:100%;max-width:420px;max-height:calc(100dvh - 32px);overflow:auto;color:var(--txt);box-shadow:0 20px 60px rgba(0,0,0,.6)}
.cc-dlg-cab{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:16px 18px 6px}
.cc-dlg-cab h2{margin:0;font:700 1.2rem Sora,sans-serif;color:#e8b23a}
.cc-x{background:none;border:1px solid var(--borde2);color:var(--txt);border-radius:10px;width:40px;height:40px;cursor:pointer;font-size:1rem}
.cc-dlg-cuerpo{padding:6px 18px 18px}
.cc-form{display:grid;gap:8px;margin:6px 0}
.cc-form label{font-weight:700;font-size:.88rem}
.cc-form input:not([type=checkbox]),.cc-form textarea{width:100%;box-sizing:border-box;background:var(--panel2);border:1px solid var(--borde2);border-radius:10px;color:var(--txt);padding:11px 12px;font:inherit;font-size:1rem}
.cc-form #cc-cod{font:700 1.4rem/1 Sora,monospace;letter-spacing:.35em;text-align:center}
.cc-check{display:flex;gap:9px;align-items:flex-start;font-weight:500!important;line-height:1.4}
.cc-check input{width:20px;height:20px;margin:1px 0 0;accent-color:#e8b23a;flex:none}
.cc-check a,.cc-nota a,.cc-resena a{color:#e8b23a}
.cc-nota{color:var(--tenue);font-size:.88rem;line-height:1.5;margin:6px 0}
.cc-nota.fuerte{color:var(--txt);font-weight:600}
.cc-err{color:#ff7b72;font-size:.88rem;min-height:1.2em;margin:2px 0}
.cc-dev{background:rgba(34,211,238,.08);border:1px dashed rgba(34,211,238,.5);border-radius:10px;padding:8px 10px;font-size:.85rem;color:#a5f3fc}
.cc-sim{background:rgba(232,178,58,.08);border:1px solid rgba(232,178,58,.35);border-radius:10px;padding:8px 12px;font-size:.86rem;color:#f3d48f;line-height:1.45;margin:8px 0}
.memb-pag .cc-sim{max-width:640px;margin:-10px auto 22px;text-align:center}
.cc-fila{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px}
.cc-enl{background:none;border:0;color:#e8b23a;font:600 .86rem Manrope,sans-serif;text-decoration:underline;cursor:pointer;padding:6px 0;min-height:36px}
.cc-h3{font:700 1rem Sora,sans-serif;margin:12px 0 6px}
.cc-subs{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.cc-subs li{border:1px solid var(--borde2);border-radius:12px;padding:10px 12px;background:var(--panel2)}
.cc-subs small{display:block;color:var(--tenue);margin-top:4px;font-size:.84rem}
.cc-chip{display:inline-block;font:700 .72rem Manrope,sans-serif;padding:2px 8px;border-radius:999px;background:rgba(232,178,58,.15);color:#e8b23a;vertical-align:middle}
.cc-chip.mal{background:rgba(255,123,114,.15);color:#ff9d95}
.cc-resena{border:1px solid rgba(232,178,58,.55);border-radius:12px;padding:12px;margin:12px 0;background:rgba(232,178,58,.06)}
.cc-resena p{color:var(--tenue);font-size:.88rem;line-height:1.45;margin:6px 0}
.cc-plan-acc{display:grid;gap:8px;width:100%;margin-top:auto;padding-top:12px}
.cc-plan-acc .cc-btn{width:100%}
.cc-tuyo{justify-self:start;font:800 .78rem Manrope,sans-serif;color:#7fe3a0}
.cc-tuyo[hidden]{display:none}
.cc-memb-msg{max-width:720px;margin:18px auto 0;padding:12px 16px;border-radius:12px;border:1px solid rgba(127,227,160,.45);background:rgba(127,227,160,.08);color:#c8f3d6;text-align:center;line-height:1.45}
/* Manuel 20-oct: anuncio orientado al plan en el hueco del mensaje */
.cc-sugerencia{display:block;margin-top:12px;padding:12px 16px;border-radius:12px;border:1px solid rgba(232,178,58,.5);background:radial-gradient(90% 90% at 25% 20%,rgba(232,178,58,.14),transparent 65%),rgba(13,20,34,.7);color:inherit;text-decoration:none;text-align:left}
.cc-sugerencia b{display:block;color:#ffd98f}
.cc-sugerencia small{color:var(--tenue)}
.cc-sugerencia:hover{border-color:#e8b23a}
.cc-memb-msg.mal{border-color:rgba(255,123,114,.45);background:rgba(255,123,114,.08);color:#ffc9c4}
.cc-memb-msg.info{border-color:rgba(255,206,120,.45);background:rgba(255,206,120,.08);color:#ffe3b3}
.cc-memb-msg[hidden]{display:none}
.banda-cards>.cc-memb-msg,.memb-cards>.cc-memb-msg{grid-column:1/-1;width:100%;max-width:none;margin:4px 0 0}   /* 14-oct ciclo 2 (QA C7): dentro de la rejilla ocupa una fila entera, no una columna alta y vacía */
/* formas de pago (pagos.html): tarjetas con datos copiables; solo se pintan con sesión */
.cc-pagos{margin-top:10px;align-items:start}
.cc-pago{padding:22px 20px;background:rgba(18,22,34,.62);border-radius:18px}
.cc-pago .cc-btn{margin:6px 0 2px}
.cc-datos{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:8px;width:100%}
.cc-datos li{display:grid;grid-template-columns:1fr auto;grid-template-areas:'etq boton' 'dato boton';align-items:center;gap:2px 10px;padding:8px 12px;border:1px solid var(--borde2);border-radius:12px;background:rgba(10,14,22,.5)}
.cc-datos li small{grid-area:etq;color:var(--tenue);font-size:.75rem}
.cc-datos li b{grid-area:dato;font-size:.95rem;overflow-wrap:anywhere}
.cc-datos li .cc-btn.l{grid-area:boton;min-height:36px;padding:0 12px;font-size:.8rem;white-space:nowrap}
.cc-areas{margin-top:4px}
.cc-area{gap:10px}
.cc-vids{list-style:none;margin:0;padding:0;display:grid;gap:8px;width:100%}
.cc-video{display:grid;grid-template-columns:1fr auto;gap:4px 10px;align-items:center;border:1px solid var(--borde2);border-radius:12px;padding:9px 11px;background:rgba(10,16,28,.6)}
.cc-video .cc-vt b{display:block;font-size:.95rem}
.cc-video .cc-vt small{color:var(--tenue);font-size:.8rem}
.cc-video .cc-btn{min-height:38px;padding:0 14px}
.cc-video.bloq .cc-vt{opacity:.45}
.cc-video.bloq{border-style:dashed}
.cc-motivo{grid-column:1/-1;color:#f3d48f;font-size:.82rem;line-height:1.35}
.cc-vid-estado{grid-column:1/-1;margin:0;font-size:.82rem;color:#7fe3a0}
.cc-vid-estado:empty{display:none}
.cc-vid-estado a{color:#e8b23a;margin-left:6px}
@media(max-width:560px){.cc-entrar{padding:6px 12px;font-size:.82rem}.cc-velo{align-items:flex-end;padding:10px}.cc-dlg{max-height:calc(100dvh - 20px)}}
@media(prefers-reduced-motion:no-preference){.cc-dlg{animation:cc-sube .18s ease-out}@keyframes cc-sube{from{transform:translateY(10px);opacity:0}to{transform:none;opacity:1}}}

/* Manuel 12-oct: «Grupo en formación» en la columna derecha, al lado del temario, y fijo al bajar para que se vea siempre */
.prod-sec[data-seccion$="-grupo"] { position: sticky; top: 80px; border-color: rgba(232,178,58,.55); box-shadow: 0 0 0 1px rgba(232,178,58,.2), 0 12px 28px rgba(0,0,0,.4); }
@media (max-width: 820px) { .prod-sec[data-seccion$="-grupo"] { position: static; order: -1; } }

/* página de Guardian (guardian.html): acento cian de Jackson Guardian */
.btn.cielo { background: linear-gradient(180deg, #7ee8f7, var(--cielo)); color: #04161b; }
.prod-cab .plataforma { margin: 10px 0 0; font-size: .85rem; color: var(--tenue); }
.video-real { width: 100%; max-width: 900px; border-radius: 16px; border: 1px solid var(--borde2); background: #000; display: block; }
.golpes { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; }
.golpe { display: grid; gap: 4px; padding: 14px; border-radius: 16px; border: 1px solid rgba(var(--acento-rgb), .25); background: rgba(var(--acento-rgb), .05); }
.golpe span { font-size: 1.5rem; } .golpe small { color: var(--tenue); }
.faq { border-top: 1px solid var(--borde); padding: 10px 0; } .faq summary { cursor: pointer; font-weight: 700; } .faq p { margin: 8px 0 0; color: var(--tenue); }

/* 12-oct (Daniel/Manuel): cabecera de producto con más vida — icono más grande, logo de la casa de marca de agua con halo
   detrás, y en los talleres el recuadro del grupo arriba a la derecha, al lado del precio */
.prod-cab { position: relative; overflow: hidden; isolation: isolate; grid-template-columns: 260px minmax(0, 1fr) minmax(250px, 300px); }
.prod-cab::before { content: ''; position: absolute; z-index: -1; left: -40px; top: 50%; width: 380px; aspect-ratio: 1; transform: translateY(-50%) rotate(-8deg);
  background: var(--logo) center / contain no-repeat; opacity: .14; filter: blur(.5px); pointer-events: none; }
.prod-cab::after { content: ''; position: absolute; z-index: -1; inset: 0; pointer-events: none; opacity: .5;
  background: radial-gradient(260px 220px at 130px 50%, rgba(var(--acento-rgb), .22), transparent 70%),
              repeating-linear-gradient(90deg, rgba(var(--acento-rgb), .045) 0 1px, transparent 1px 34px),
              repeating-linear-gradient(0deg, rgba(var(--acento-rgb), .045) 0 1px, transparent 1px 34px);
  mask-image: linear-gradient(90deg, #000 0, rgba(0,0,0,.6) 45%, transparent 80%); }
.prod-cab .pieza { width: 200px; height: 200px; } .prod-cab .sombra { width: 140px; }
.prod-cab .peana { height: 84px; margin-top: -50px; }
.prod-cab.con-grupo { grid-template-columns: 220px minmax(0, 1fr) minmax(260px, 300px); grid-template-areas: 'ico tit pre' 'ico tit gru'; align-items: start; }
.prod-cab.con-grupo > .stand { grid-area: ico; align-self: center; } .prod-cab.con-grupo > div:nth-of-type(2) { grid-area: tit; align-self: center; } .prod-cab.con-grupo > .precio { grid-area: pre; } .prod-cab.con-grupo > .grupo-cab { grid-area: gru; }
.grupo-cab { padding: 16px 18px; border-radius: 18px; border: 1px solid rgba(232,178,58,.55); background: rgba(5,7,12,.65); box-shadow: 0 0 0 1px rgba(232,178,58,.2), 0 12px 28px rgba(0,0,0,.4); }
.grupo-cab h2 { font-size: 1.05rem; margin-bottom: 6px; } .grupo-cab p { margin: 6px 0; font-size: .85rem; color: var(--tenue); }
@media (max-width: 1000px) { .prod-cab.con-grupo { grid-template-columns: 200px minmax(0, 1fr); grid-template-areas: 'ico tit' 'pre gru'; } }
@media (max-width: 820px) { .prod-cab, .prod-cab.con-grupo { grid-template-columns: 1fr; grid-template-areas: 'ico' 'tit' 'pre' 'gru'; } .prod-cab .pieza { width: 150px; height: 150px; }
  .prod-cab::before { left: 50%; top: 22%; width: 300px; transform: translate(-50%, -50%) rotate(-8deg); } .prod-cab::after { mask-image: linear-gradient(180deg, #000, transparent 60%); background-position: 50% 0; } }
/* Daniel 12-oct: el grupo AL LADO del precio, en fila. En pantallas anchas la página del taller se ensancha y caben los cuatro;
   en pantallas estrechas y móvil no caben en fila y se apilan (precio arriba, grupo debajo / todo en columna) */
@media (min-width: 1240px) {
  .prod-pag:has(.con-grupo) { max-width: 1340px; }
  .prod-cab.con-grupo { grid-template-columns: 210px minmax(0, 1fr) minmax(240px, 270px) minmax(280px, 320px); grid-template-areas: 'ico tit pre gru'; align-items: center; }
  .prod-cab.con-grupo > .precio, .prod-cab.con-grupo > .grupo-cab { align-self: stretch; align-content: center; }
}
/* 12-oct: fondo «universo» del stand JG (Guardiana a la izquierda mirando a los iconos + rótulo JACKSON GUARDIAN de marca de agua).
   Hecho a medida del hueco (3840×990 / 1080×2580): va con cover, sin bandas; velo más suave para que se vea la Guardiana */
.franja.jg{background:linear-gradient(rgba(8,10,18,.30),rgba(8,10,18,.50)),#06070d url('img/fondo-universo-horizontal-3840x990-v2.webp') center/cover no-repeat}
/* 13-oct (Daniel): v2 = mismo fondo con el rótulo JACKSON GUARDIAN subido 170 px dentro de la imagen, para que no lo tape la cartelera */
@media(max-width:760px){.franja.jg{background:linear-gradient(rgba(8,10,18,.34),rgba(8,10,18,.56)),#06070d url('img/fondo-universo-vertical-1080x2580.webp') center top/cover no-repeat}}
/* calendario conectado a la agenda real (12-oct) */
.cal-cel.con-huecos{position:relative;box-shadow:inset 0 0 0 1px rgba(232,178,58,.55)}
.cal-cel.con-huecos::after{content:"";position:absolute;bottom:5px;left:50%;width:5px;height:5px;margin-left:-2.5px;border-radius:50%;background:#e8b23a}
.cal-cel.sel.con-huecos::after{background:#17181c}
.cal-leyenda{margin:10px 0 0;font-size:.74rem;color:#8a94a6;display:flex;align-items:center;gap:6px}
.cal-punto{display:inline-block;width:6px;height:6px;border-radius:50%;background:#e8b23a}
.cal-lista{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.cal-item{display:flex;align-items:center;justify-content:space-between;gap:10px;background:#141b27;border:1px solid #232c3a;border-radius:10px;padding:10px 12px}
.cal-item b{display:block;color:#eef2f8;font-size:.9rem;font-variant-numeric:tabular-nums}
.cal-item small{display:block;color:#8a94a6;font-size:.76rem;margin-top:2px}
.cal-reservar,.cal-cancelar{flex:none;border:0;border-radius:999px;padding:8px 14px;font:700 .8rem Manrope,sans-serif;cursor:pointer;min-height:36px}
.cal-reservar{background:#e8b23a;color:#17181c}
.cal-reservar:hover{background:#f3c55a}
.cal-cancelar{background:#1a2230;color:#cdd6e4;border:1px solid #2a3344}
.cal-reservar:disabled,.cal-cancelar:disabled{opacity:.6;cursor:wait}
.cal-ya{flex:none;color:#7fd99a;font-weight:700;font-size:.8rem}
.cal-msg{margin:10px 0 0;font-size:.84rem;color:#e8b23a}
.cal-msg:empty{display:none}
.cal-mias{max-width:560px;margin:14px auto 0;background:#0e131d;border:1px solid #232c3a;border-radius:14px;padding:14px}
.cal-mias[hidden]{display:none}
.cal-mias h3{margin:0 0 10px;font:700 1rem Sora,sans-serif;color:#fff}
@media(max-width:420px){.cal-item{flex-direction:column;align-items:stretch}.cal-reservar,.cal-cancelar{width:100%}}
/* mi-agenda.html (panel de Manuel) */
.ag-estado{max-width:560px;margin:0 auto 14px;background:#0e131d;border:1px solid #232c3a;border-radius:14px;padding:14px;color:#cdd6e4;font-size:.9rem;display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.ag-estado[hidden],#agPanel[hidden]{display:none!important}
.ag-estado a{color:#e8b23a}
.ag-cel{position:relative}
.ag-cel.ag-bloq{background:#10141c;color:#4a5568;text-decoration:line-through}
.ag-cel.ag-pasado{background:#10141c;color:#44506a}
.ag-num{position:absolute;top:3px;right:5px;font-size:.62rem;font-weight:800;color:#22d3ee;text-decoration:none}
.cal-cel.sel .ag-num{color:#17181c}
.ag-item.ag-cerrado{opacity:.6}
.ag-alumnos{color:#cfe7ee!important;word-break:break-all}
.ag-ojo{color:#ffcf7a!important;font-size:.78rem}
.ag-form{display:grid;gap:8px;margin-top:14px;padding-top:12px;border-top:1px solid #232c3a}
.ag-form b{color:#eef2f8;font-size:.92rem}
.ag-form label{display:grid;gap:4px;color:#8a94a6;font-size:.8rem}
.ag-form input{background:#141b27;border:1px solid #2a3344;border-radius:8px;color:#eef2f8;padding:9px 10px;font:inherit;font-size:.95rem;min-height:40px}
.ag-form button{justify-self:start}
.ag-ayuda{color:#8a94a6;font-size:.74rem;margin:0}
.ag-bloquear{margin-top:14px;background:transparent;border:1px solid #3a4558;color:#cdd6e4;border-radius:999px;padding:8px 14px;font:700 .8rem Manrope,sans-serif;cursor:pointer;min-height:36px}
.ag-bloquear:hover{border-color:#e8b23a;color:#e8b23a}
.cal-elige{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.cal-taller small{line-height:1.45}
.ag-taller>div{flex:1;min-width:0}
.ag-fila{display:grid;grid-template-columns:1fr 1fr auto;gap:8px;align-items:end}
.ag-quitar{background:none;border:1px solid #2a3344;border-radius:8px;color:#8a94a6;min-height:40px;min-width:40px;cursor:pointer}
.ag-mas{justify-self:start;background:none;border:1px dashed #3a4558;border-radius:8px;color:#cfd6e2;padding:8px 12px;cursor:pointer;font:inherit;font-size:.85rem}
.ag-botones{display:flex;gap:8px;flex-wrap:wrap}
.ag-falta{color:#8a94a6;font-size:.78rem;white-space:nowrap}
.ag-form select{background:#141b27;border:1px solid #2a3344;border-radius:8px;color:#eef2f8;padding:9px 10px;font:inherit;font-size:.95rem;min-height:40px}
.cal-cel{position:relative}
.cal-live{position:absolute;top:4px;right:4px;width:6px;height:6px;border-radius:50%;background:#ff4d5e}
.cal-live-ley{display:inline-block;width:7px;height:7px;border-radius:50%;background:#ff4d5e;vertical-align:middle}
.cal-directo b{color:#ffd1d6}
.es-tabs{display:flex;gap:6px;flex-wrap:wrap;margin:0 0 14px}
.es-tab{background:#141b27;border:1px solid #2a3344;border-radius:999px;color:#cfd6e2;padding:9px 16px;font:inherit;font-size:.9rem;cursor:pointer;min-height:40px}
.es-tab.on{background:#2a2410;border-color:#d4a72c;color:#ffe3a0}
.es-cifras{display:grid;grid-template-columns:repeat(auto-fit,minmax(90px,1fr));gap:8px;margin:10px 0}
.es-cifras div{background:#141b27;border:1px solid #232c3a;border-radius:10px;padding:10px;text-align:center}
.es-cifras b{display:block;font-size:1.4rem;color:#eef2f8}
.es-cifras small{color:#8a94a6;font-size:.75rem}
.es-resena{margin:8px 0;padding:10px 12px;border-left:3px solid #d4a72c;background:#141b27;border-radius:6px;color:#dfe5ee;font-size:.9rem}
.es-resena small{display:block;color:#8a94a6;margin-top:6px;font-size:.75rem}
.ag-form textarea{background:#141b27;border:1px solid #2a3344;border-radius:8px;color:#eef2f8;padding:9px 10px;font:inherit;font-size:.95rem;resize:vertical}
.tr-bot{margin-top:12px}
.tr-titulo{margin:0 0 6px;font-size:.8rem;color:#8fd3ff;letter-spacing:.04em;text-transform:uppercase}
.tr-fig{margin:0}
.tr-fig img{width:100%;height:auto;border-radius:8px;border:1px solid #2a3344;display:block;background:#0c1118}
.tr-fig figcaption{margin-top:6px;font-size:.8rem;color:#cfd6e2}
.tr-fig figcaption small{display:block;color:#8a94a6;font-size:.74rem}
.tr-carpeta{margin-top:10px;border:1px solid #232c3a;border-radius:8px;padding:6px 10px;background:#0f141d}
.tr-carpeta summary{cursor:pointer;color:#cfd6e2;font-size:.85rem;padding:4px 0}
.tr-rejilla{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:10px;margin-top:8px}
.tarjeta.bot .tr-fig img{width:100%;height:auto;max-height:none;object-fit:contain;border-radius:8px;margin:0}
.tarjeta.bot .tr-rejilla .tr-fig img{max-height:140px;object-fit:cover}
.es-hoy{margin-bottom:14px;border-color:#5a4a1c}
.es-toca{list-style:none;margin:8px 0 0;padding:0;display:grid;gap:6px}
.es-toca li{display:flex;gap:10px;align-items:center;background:#141b27;border:1px solid #232c3a;border-radius:8px;padding:8px 10px;color:#dfe5ee;font-size:.9rem}
.es-toca li>span:nth-child(2){flex:1}
.es-ir{background:none;border:1px solid #d4a72c;color:#ffe3a0;border-radius:999px;padding:4px 12px;cursor:pointer;font:inherit;font-size:.8rem;min-height:32px}
/* ---- Agenda tipo Google Calendar (mi-agenda) ---- */
.gc{position:relative;margin-bottom:12px}
.gc-barra{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:6px}
.gc-btn,.gc-flecha{background:#141b27;border:1px solid #2a3344;color:#dfe5ee;border-radius:999px;padding:7px 14px;font:inherit;font-size:.85rem;cursor:pointer;min-height:36px}
.gc-flecha{padding:7px 12px;font-size:1.1rem;line-height:1}
.gc-btn.on{background:#2a2410;border-color:#d4a72c;color:#ffe3a0}
.gc-titulo{flex:1;min-width:140px;color:#eef2f8;font-size:1.05rem}
.gc-vistas{display:flex;gap:4px}
.gc-crear{background:linear-gradient(#f7c95e,#e2a52a);color:#1a1405;border:0;border-radius:999px;padding:8px 16px;font:inherit;font-weight:700;cursor:pointer;min-height:36px}
.gc-leyenda{color:#8a94a6;font-size:.72rem;margin:0 0 8px;display:flex;flex-wrap:wrap;gap:4px 10px;align-items:center}
.gc-leyenda i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:4px;vertical-align:middle}
.gc-rejilla{border:1px solid #232c3a;border-radius:10px;overflow:hidden;background:#0d121a}
.gc-cab{display:grid;grid-template-columns:52px repeat(var(--cols),1fr);border-bottom:1px solid #232c3a}
.gc-dcab{background:none;border:0;border-left:1px solid #1b2230;color:#cfd6e2;padding:6px 2px;cursor:pointer;display:flex;flex-direction:column;align-items:center;font:inherit}
.gc-dcab small{font-size:.7rem;color:#8a94a6;text-transform:uppercase}
.gc-dcab b{font-size:1.15rem}
.gc-dcab.hoy b{background:#d4a72c;color:#1a1405;border-radius:50%;width:32px;height:32px;display:grid;place-items:center}
.gc-dcab.bloq{text-decoration:line-through;opacity:.6}
.gc-cuerpo{display:grid;grid-template-columns:52px repeat(var(--cols),1fr);max-height:62vh;overflow-y:auto;position:relative}
.gc-horas span{display:block;font-size:.68rem;color:#6f7a8c;text-align:right;padding-right:6px;transform:translateY(-6px);box-sizing:border-box}
.gc-col{position:relative;border-left:1px solid #1b2230;background-image:repeating-linear-gradient(#1b2230 0 1px,transparent 1px 48px);cursor:copy}
.gc-col.pasado{background-color:#0a0e14;cursor:default}
.gc-col.bloq{background-color:#151017;background-image:repeating-linear-gradient(45deg,#2a1f2a 0 6px,transparent 6px 12px);cursor:not-allowed}
.gc-ahora{position:absolute;left:0;right:0;height:2px;background:#ff4d5e;z-index:2}
.gc-ev{position:absolute;z-index:1;border:0;border-radius:6px;padding:3px 6px;text-align:left;cursor:pointer;overflow:hidden;font:inherit;color:#0b0f15;display:flex;flex-direction:column;gap:1px;box-shadow:0 1px 3px rgba(0,0,0,.4)}
.gc-ev b{font-size:.74rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gc-ev small{font-size:.68rem;opacity:.85;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gc-clase,.gc-leyenda .gc-clase{background:#8fc4ff}
.gc-llena,.gc-leyenda .gc-llena{background:#7ee0a1}
.gc-cerrada{background:#4a5263;color:#cfd6e2}
.gc-directo,.gc-leyenda .gc-directo{background:#ff8a96}
.gc-saltado{background:#3a2a2e;color:#b98a91;text-decoration:line-through}
.gc-taller,.gc-leyenda .gc-taller{background:#f2c55c}
.gc-leyenda .gc-bloq{background:repeating-linear-gradient(45deg,#5a3f5a 0 3px,#151017 3px 6px)}
.gc-pop{position:absolute;z-index:20;background:#121925;border:1px solid #3a4558;border-radius:12px;padding:12px;box-shadow:0 10px 30px rgba(0,0,0,.55);display:grid;gap:6px}
.gc-pop b{color:#eef2f8}
.gc-pop small{color:#8a94a6;font-size:.78rem}
.gc-acc{display:grid;gap:6px;margin-top:4px}
.gc-acc button{width:100%}
.gc-msg{margin:6px 0 0}
@media (max-width:700px){.gc-cab,.gc-cuerpo{grid-template-columns:42px repeat(var(--cols),1fr)}.gc-titulo{order:5;flex-basis:100%}}
/* ---- Mi escuela: el despacho del director, ambientado La Zona Trade (negro y oro) ---- */
.es-despacho{position:relative;background:radial-gradient(1200px 500px at 10% -10%,rgba(245,185,66,.13),transparent 60%),radial-gradient(900px 500px at 110% 20%,rgba(245,185,66,.07),transparent 60%),linear-gradient(180deg,#0b0a07,#07090d 420px)}
.es-despacho::before{content:"";position:absolute;inset:0;background:url(img/zt-cuadrado-384.webp) no-repeat right 4% top 40px/300px;opacity:.035;pointer-events:none;filter:grayscale(.2)}
.es-despacho>*{position:relative}
.es-despacho.con-hero .banda-cab{display:none}
.es-hero{border:1px solid rgba(245,185,66,.35);border-radius:18px;padding:20px;margin-bottom:16px;background:linear-gradient(145deg,rgba(245,185,66,.10),rgba(20,16,6,.6) 45%,rgba(10,12,16,.9));box-shadow:0 0 0 1px rgba(0,0,0,.4) inset,0 18px 50px rgba(0,0,0,.45),0 0 60px rgba(245,185,66,.06)}
.es-hero-top{display:flex;gap:16px;align-items:center;flex-wrap:wrap}
.es-emblema{width:84px;height:84px;border-radius:18px;box-shadow:0 0 0 2px rgba(245,185,66,.55),0 0 30px rgba(245,185,66,.35);animation:es-brillo 6s ease-in-out infinite}
@keyframes es-brillo{50%{box-shadow:0 0 0 2px rgba(245,185,66,.8),0 0 44px rgba(245,185,66,.5)}}
@media (prefers-reduced-motion:reduce){.es-emblema{animation:none}}
.es-hero-txt{flex:1;min-width:200px}
.es-anios{margin:0 0 4px;font-size:.72rem;color:var(--tenue,#9aa3b2)}
.es-cargo{margin:0;font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--oro);font-weight:800}
.es-hero h2{margin:2px 0;font:800 clamp(1.4rem,3.2vw,2rem) Sora,sans-serif;background:linear-gradient(180deg,#fff2cf,#f5b942 70%,#c98a1c);-webkit-background-clip:text;background-clip:text;color:transparent}
.es-fecha{margin:0;color:#b9b2a0;font-size:.9rem}
.es-relojes{display:flex;gap:10px}
.es-relojes span{display:flex;flex-direction:column;align-items:center;background:rgba(0,0,0,.35);border:1px solid rgba(245,185,66,.25);border-radius:12px;padding:8px 12px;min-width:78px}
.es-relojes b{font:700 1.25rem Sora,sans-serif;color:#ffe3a0;font-variant-numeric:tabular-nums}
.es-relojes small{font-size:.66rem;color:#9a927f;text-transform:uppercase;letter-spacing:.08em}
.es-lema{margin:14px 0 4px;padding-left:12px;border-left:3px solid var(--oro);color:#e9dfc4;font-style:italic;font-size:.95rem}
.es-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(118px,1fr));gap:10px;margin-top:14px}
.es-kpi{background:rgba(0,0,0,.35);border:1px solid rgba(245,185,66,.18);border-radius:12px;padding:10px 12px;display:flex;flex-direction:column;gap:2px}
.es-kpi b{font:800 1.6rem Sora,sans-serif;color:#fff3d1;line-height:1.1}
.es-kpi b i{font-style:normal;font-size:.9rem;color:#9a927f;margin-left:2px}
.es-kpi small{font-size:.72rem;color:#b9b2a0}
.es-barra{display:block;height:4px;border-radius:4px;background:rgba(255,255,255,.08);margin-top:6px;overflow:hidden}
.es-barra span{display:block;height:100%;background:linear-gradient(90deg,#c98a1c,#ffd27a)}
.es-rapidos{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.es-rapidos button{flex:1 1 140px;background:linear-gradient(180deg,rgba(245,185,66,.16),rgba(245,185,66,.06));border:1px solid rgba(245,185,66,.45);color:#ffe3a0;border-radius:12px;padding:11px 12px;font:700 .9rem Manrope,sans-serif;cursor:pointer;min-height:44px;transition:transform .15s,background .15s}
.es-rapidos button:hover{background:linear-gradient(180deg,rgba(245,185,66,.3),rgba(245,185,66,.1));transform:translateY(-1px)}
.es-despacho .es-hoy{border-color:rgba(245,185,66,.4);background:linear-gradient(180deg,rgba(245,185,66,.07),rgba(13,16,22,.9))}
.es-despacho .es-tabs{border-bottom:1px solid rgba(245,185,66,.2);padding-bottom:10px}
.es-despacho .cal-detalle{border-color:rgba(245,185,66,.16)}
.es-despacho .gc-rejilla{border-color:rgba(245,185,66,.22)}
.es-despacho .gc-dcab.hoy b{box-shadow:0 0 14px rgba(245,185,66,.6)}
@media (max-width:700px){.es-hero{padding:14px}.es-emblema{width:60px;height:60px}.es-relojes{width:100%}.es-relojes span{flex:1}}
.gc-pop[hidden]{display:none}
.es-despacho .cal-detalle,.es-despacho #agMes{max-width:none}
.es-despacho #agMes{max-width:760px;margin-left:auto;margin-right:auto}
/* ---- Estudio de emisión ---- */
.es-aire{border-color:rgba(255,77,94,.55)!important;background:linear-gradient(180deg,rgba(255,77,94,.14),rgba(13,16,22,.9))!important}
.es-aire.off{border-color:rgba(245,185,66,.35)!important;background:linear-gradient(180deg,rgba(245,185,66,.08),rgba(13,16,22,.9))!important}
.es-aire b{display:block;color:#ffd1d6;font-size:1rem}
.es-aire.off b{color:#ffe3a0}
.es-aire small{display:block;color:#b9b2a0;margin:4px 0 8px}
.es-em{display:block;width:100%;text-align:left;background:#121925;border:1px solid #232c3a;border-radius:10px;padding:10px 12px;margin:8px 0;color:inherit;font:inherit;cursor:pointer}
.es-em.abierto{cursor:default;border-color:rgba(245,185,66,.45)}
.es-em-cab{display:flex;flex-wrap:wrap;gap:4px 10px;align-items:baseline}
.es-em-cab b{color:#ffe3a0}
.es-em-cab small{color:#8a94a6;font-size:.75rem}
.es-em-cab span{flex:1;min-width:120px;color:#eef2f8}
.es-em-cab em{font-style:normal;font-size:.72rem;border-radius:999px;padding:2px 8px}
.es-em-cab em.ok{background:rgba(126,224,161,.15);color:#9ff0bb}
.es-em-cab em.falta{background:rgba(255,255,255,.06);color:#8a94a6}
.es-ical{width:100%;box-sizing:border-box;background:#0b1018;border:1px solid #2a3344;border-radius:8px;color:#cfd6e2;padding:9px 10px;font:.8rem monospace;margin:6px 0}
.es-pasos{color:#cfd6e2;font-size:.85rem;padding-left:20px;margin:8px 0}
/* ---- Directos en la web (en-vivo) ---- */
.dir-aire{margin:10px 0;padding:12px;border-radius:12px;border:1px solid rgba(255,77,94,.55);background:linear-gradient(180deg,rgba(255,77,94,.16),rgba(13,16,22,.6));display:grid;gap:6px}
.dir-aire .punto{width:10px;height:10px;border-radius:50%;background:#ff4d5e;box-shadow:0 0 10px #ff4d5e;animation:dir-lat 1.4s infinite}
@keyframes dir-lat{50%{opacity:.35}}
.dir-aire b{color:#ffd1d6}
.dir-player{position:relative;width:100%;aspect-ratio:16/9;border-radius:10px;overflow:hidden;background:#000}
.dir-player iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.dir-msg{margin:0;color:#ffb3bb;font-size:.85rem}
.dir-lista{list-style:none;margin:8px 0;padding:0;display:grid;gap:6px}
.dir-lista li{display:grid;gap:1px;padding:8px 10px;border-radius:8px;background:rgba(0,0,0,.25);border:1px solid rgba(255,255,255,.06);font-size:.85rem}
.dir-lista li small{color:#8a94a6}
.dir-legal{display:block;margin-top:6px;color:#8a94a6;font-size:.72rem}
/* ---- Biblioteca de alumnos ---- */
.bi-resumen{color:#b9b2a0;font-size:.85rem;margin:6px 0}
.bi-buscar{width:100%;box-sizing:border-box;background:#141b27;border:1px solid #2a3344;border-radius:8px;color:#eef2f8;padding:9px 10px;font:inherit;margin:6px 0 10px}
.bi-lista{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.bi-alumno{background:#121925;border:1px solid #232c3a;border-radius:10px}
.bi-alumno.abierto{border-color:rgba(245,185,66,.45)}
.bi-cab{display:flex;flex-wrap:wrap;gap:4px 10px;align-items:baseline;width:100%;background:none;border:0;color:inherit;font:inherit;text-align:left;padding:10px 12px;cursor:pointer}
.bi-cab b{color:#ffe3a0}
.bi-cab span{flex:1;color:#cfd6e2;font-size:.85rem}
.bi-cab em{font-style:normal;font-size:.72rem;border-radius:999px;padding:2px 8px}
.bi-cab em.ok{background:rgba(126,224,161,.15);color:#9ff0bb}
.bi-cab em.falta{background:rgba(255,255,255,.06);color:#8a94a6}
.bi-cuerpo{padding:0 12px 12px;color:#dfe5ee;font-size:.88rem}
.bi-cuerpo p{margin:6px 0}
.bi-chip{display:inline-block;background:rgba(255,255,255,.06);border-radius:999px;padding:2px 8px;margin:2px 2px 2px 0;font-size:.75rem}
.bi-notas{list-style:none;padding:0;margin:10px 0 0;display:grid;gap:6px}
.bi-notas li{background:rgba(0,0,0,.25);border-left:3px solid #d4a72c;border-radius:6px;padding:6px 10px}
.bi-notas small{color:#8a94a6;margin-right:6px}
/* ---- vídeos reales de Manuel (13-oct) ---- */
.video-real{width:100%;aspect-ratio:16/9;border-radius:14px;overflow:hidden;background:#000;border:1px solid rgba(245,185,66,.25)}
.video-real video{width:100%;height:100%;display:block;object-fit:contain;background:#000}
.bv-video.bv-real{padding:0;background:#000;aspect-ratio:16/9;overflow:hidden}
.bv-video.bv-real video{width:100%;height:100%;display:block;object-fit:contain}
/* ---- Carnet de alumno (13-oct) ---- */
.carnet{max-width:560px;margin:0 auto 18px;border-radius:20px;overflow:hidden;color:#1a1405;background:linear-gradient(135deg,#fff3cf 0%,#f5c654 38%,#d99a22 70%,#a8700f 100%);box-shadow:0 20px 50px rgba(0,0,0,.55),0 0 0 1px rgba(255,255,255,.25) inset;position:relative}
.carnet::after{content:"";position:absolute;inset:0;background:radial-gradient(400px 200px at 85% 10%,rgba(255,255,255,.35),transparent 60%),repeating-linear-gradient(115deg,rgba(255,255,255,.05) 0 2px,transparent 2px 9px);pointer-events:none}
.carnet-cab{display:flex;align-items:center;gap:12px;padding:16px 18px;background:rgba(20,14,2,.88);color:#ffe3a0}
.carnet-logo{width:52px;height:52px;border-radius:12px;box-shadow:0 0 0 2px rgba(245,185,66,.7)}
.carnet-cab b{display:block;font:800 1.05rem Sora,sans-serif;letter-spacing:.14em}
.carnet-cab small{color:#c9b98e;font-size:.72rem;letter-spacing:.08em;text-transform:uppercase}
.carnet-num{margin-left:auto;font:700 .95rem Sora,monospace;background:rgba(245,185,66,.18);border:1px solid rgba(245,185,66,.6);border-radius:8px;padding:4px 10px}
.carnet-cuerpo{padding:16px 18px 6px;position:relative;z-index:1}
.carnet-nombre{font:800 clamp(1.3rem,4vw,1.7rem) Sora,sans-serif;margin-bottom:10px;color:#1a1003}
.carnet-datos{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 16px;margin:0}
.carnet-datos div{min-width:0}.carnet-datos .ancho{grid-column:1/-1}
.carnet-datos dt{font-size:.62rem;text-transform:uppercase;letter-spacing:.1em;color:#5a4108;font-weight:800}
.carnet-datos dd{margin:0;font-weight:700;font-size:.95rem;overflow-wrap:anywhere}
.carnet-sobre{margin:12px 0 4px;padding:10px 12px;background:rgba(255,255,255,.35);border-radius:10px;font-style:italic;font-size:.9rem;color:#2a1d05}
.carnet-pie{display:flex;justify-content:space-between;gap:8px;flex-wrap:wrap;padding:10px 18px 14px;font-size:.72rem;font-weight:700;color:#4a3606;position:relative;z-index:1}
.carnet-form{max-width:560px;margin:0 auto}
.carnet-check{display:flex!important;gap:8px;align-items:center;color:#dfe5ee!important}
.carnet-check input{width:auto!important;min-height:0!important}
.carnet-mini{max-width:460px;margin:8px 0 12px}
.carnet-mini .carnet-logo{width:40px;height:40px}
.carnet-mini .carnet-nombre{font-size:1.2rem}
/* 13-oct: vídeos de Manuel en vertical (9:16) en el móvil en vertical — video-movil.js añade .es-vertical */
.video-real.es-vertical,.bv-video.bv-real.es-vertical{aspect-ratio:9/16;width:min(100%,calc(82vh * 9 / 16));margin:0 auto}
.ev-video{margin:0 auto 22px;max-width:900px}
/* 13-oct: mientras no se ha bajado la hoja de giro, se ve el primer fotograma suelto */
.holo-anim.espera{background-size:100% 100%;background-position:0 0;animation:none}

/* ===== Mi escuela, con cariño (14-oct): emblema que gira, cifras con icono, «de esto me encargo yo», directos por nivel ===== */
.es-emblema{transform-style:preserve-3d}
.es-hero:not([hidden]) .es-emblema{animation:es-giro 1.6s cubic-bezier(.3,.7,.3,1) .2s 1 both,es-brillo 6s ease-in-out 2s infinite}
.es-hero:not([hidden]) .es-emblema:hover{animation:es-giro 1.4s cubic-bezier(.3,.7,.3,1) 1,es-brillo 6s ease-in-out infinite}
/* «reducir movimiento»: nada se mueve solo; el giro al pasar el ratón sí, porque lo pide quien lo usa (regla de la skill de iconos: el Windows de Daniel lo tiene activado) */
@media (prefers-reduced-motion:reduce){.es-hero:not([hidden]) .es-emblema{animation:none}.es-hero:not([hidden]) .es-emblema:hover{animation:es-giro 1.4s cubic-bezier(.3,.7,.3,1) 1}}
@keyframes es-giro{from{transform:perspective(500px) rotateY(0)}to{transform:perspective(500px) rotateY(360deg)}}
.es-kpi{position:relative;transition:transform .2s,border-color .2s}
.es-kpi:hover{transform:translateY(-2px);border-color:rgba(245,185,66,.45)}
.es-kpi-ico{position:absolute;top:8px;right:10px;font-size:1.05rem;opacity:.75}
.es-kpi-sub{font-size:.68rem;color:#8f8775;margin-top:2px}
.es-barra.lleno span{background:linear-gradient(90deg,#3fbf7f,#9ff0c4);box-shadow:0 0 10px rgba(63,191,127,.6)}
.es-solo{margin-top:14px;border:1px dashed rgba(245,185,66,.35);border-radius:12px;padding:10px 14px;background:rgba(0,0,0,.25)}
.es-solo-cab{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px;margin:0 0 6px}
.es-solo-cab b{color:#ffe3a0;font-size:.9rem}
.es-obra{font-size:.68rem;color:#8a94a6;border:1px solid #2a3344;border-radius:999px;padding:2px 8px}
.es-solo ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:4px 16px}
.es-solo li{font-size:.82rem;color:#d8d2c2}
.es-toca li.es-fiesta{border-color:#3fbf7f;background:linear-gradient(90deg,rgba(63,191,127,.16),rgba(20,27,39,.9));animation:es-latido 2.4s ease-in-out 3}
.es-toca li.es-fiesta .es-ir{border-color:#3fbf7f;color:#b8f5d3;font-weight:700}
@keyframes es-latido{50%{box-shadow:0 0 0 3px rgba(63,191,127,.25)}}
.es-calma{color:#cfc6ae!important}
/* directos del calendario con el color de su nivel (mismos colores que los emblemas de membresía) */
.gc-directo.gc-nv-socio,.gc-leyenda .gc-nv-socio{background:#ff8a96}
.gc-directo.gc-nv-standard,.gc-leyenda .gc-nv-standard{background:#c9d2e0}
.gc-directo.gc-nv-premium,.gc-leyenda .gc-nv-premium{background:#e8b23a}
.gc-directo.gc-nv-vip,.gc-leyenda .gc-nv-vip{background:#ffd24a;box-shadow:inset 0 0 0 2px #fff3b0}
.gc-directo.gc-nv-diamante,.gc-leyenda .gc-nv-diamante{background:#7fd8ff}
.gc-ley-dir{display:inline-flex;flex-wrap:wrap;align-items:center;gap:2px 6px}
/* pestañas: en móvil, una fila con desplazamiento lateral */
@media (max-width:700px){.es-despacho .es-tabs{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}.es-despacho .es-tab{flex:none}.es-solo ul{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){.es-toca li.es-fiesta{animation:none}}

/* relojes del mundo en Mi escuela (14-oct): una fila de chips bajo la cabecera */
.es-mundo{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
.es-mundo span{display:flex;align-items:baseline;gap:6px;background:rgba(0,0,0,.3);border:1px solid rgba(245,185,66,.15);border-radius:999px;padding:4px 10px}
.es-mundo small{font-size:.66rem;color:#9a927f;text-transform:uppercase;letter-spacing:.06em}
.es-mundo b{font:700 .88rem Sora,sans-serif;color:#f3e6c4;font-variant-numeric:tabular-nums}
@media (max-width:700px){.es-mundo{display:grid;grid-template-columns:repeat(2,1fr)}.es-mundo span{justify-content:space-between}}

/* «Mi plan» del alumno (14-oct): su clave de licencia */
.cc-clave{display:flex;flex-wrap:wrap;align-items:center;gap:8px;background:#0e131d;border:1px solid rgba(245,185,66,.35);border-radius:12px;padding:10px 12px;margin:6px 0}
.cc-clave small{width:100%;font-size:.7rem;color:#9a927f;text-transform:uppercase;letter-spacing:.08em}
.cc-clave code{font:700 1.05rem/1.2 ui-monospace,Consolas,monospace;color:#ffe3a0;letter-spacing:.06em;flex:1;min-width:0;word-break:break-all}

/* Daniel 14-oct: cuadros con color y dibujo de su tema (tenues: el texto manda) + textura en el fondo de la página */
.prod-sec { position: relative; --tema: 245, 185, 66;
  background: radial-gradient(120% 90% at 0% 0%, rgba(var(--tema), .10), transparent 55%), linear-gradient(180deg, rgba(13,20,34,.85), rgba(10,16,28,.6));
  border-top: 2px solid rgba(var(--tema), .55); }
.prod-sec > :not(.sec-deco):not(.ob-com) { position: relative; z-index: 1; }
.prod-sec h2 { color: rgb(var(--tema)); }
.prod-sec[data-tema="aprende"] { --tema: 245, 185, 66; }
.prod-sec[data-tema="para-quien"] { --tema: 34, 211, 238; }
.prod-sec[data-tema="info"] { --tema: 139, 124, 246; }
.prod-sec[data-tema="resenas"] { --tema: 244, 132, 95; }
.prod-sec[data-tema="test"], .prod-sec[data-tema="caso"] { --tema: 62, 207, 142; }
.prod-sec[data-tema="proximos"], .prod-sec[data-tema="ediciones"] { --tema: 139, 124, 246; }
.prod-sec[data-tema="completa"], .prod-sec[data-tema="faq"] { --tema: 34, 211, 238; }
.prod-sec[data-tema="golpes"] { --tema: 244, 132, 95; }
.prod-sec[data-tema="video"], .prod-sec[data-tema="carteles"] { --tema: 245, 185, 66; }
.sec-deco { position: absolute; inset: 0; overflow: hidden; border-radius: inherit; z-index: 0; pointer-events: none; opacity: .13; color: rgb(var(--tema)); }
.sec-deco svg { position: absolute; right: -14px; bottom: -18px; width: 150px; height: 150px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.sec-deco svg * { fill: none !important; stroke: currentColor; }
.prod-sec.ancha .sec-deco svg { width: 120px; height: 120px; right: 10px; bottom: -22px; }
@media (max-width: 700px) { .sec-deco { opacity: .1; } .sec-deco svg { width: 110px; height: 110px; } }

/* Daniel 14-oct (3.ª): fondo con motivo de trading — velas japonesas, línea de precio y barras de volumen en tesela, muy tenues, sobre azul noche con grano */
body { background-color: #070b14;
  background-image:
    radial-gradient(1100px 700px at 8% -10%, rgba(245,185,66,.10), transparent 60%),
    radial-gradient(1000px 800px at 105% 105%, rgba(34,211,238,.08), transparent 60%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .10 0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E"),
    url("img/fondo-velas.svg"),
    linear-gradient(180deg, #0b1220 0%, #070b14 45%, #05070c 100%);
  background-size: auto, auto, 220px 220px, 480px 300px, auto;
  background-attachment: fixed; }

/* Daniel 14-oct: el recuadro del icono que gira tenía mucho negro — anillos de holograma detrás del icono (lo realzan) y un gráfico de velas tenue abajo */
.prod-cab .stand { isolation: auto; }
.prod-cab .stand::before { content: ''; position: absolute; z-index: -1; left: 50%; top: 52%; width: 250px; aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; pointer-events: none;
  background:
    radial-gradient(closest-side, rgba(var(--acento-rgb), .30), rgba(var(--acento-rgb), .08) 55%, transparent 72%),
    repeating-conic-gradient(rgba(var(--acento-rgb), .55) 0 1.2deg, transparent 1.2deg 10deg);
  -webkit-mask: radial-gradient(closest-side, #000 60%, transparent 61% 88%, #000 89% 93%, transparent 94%);
          mask: radial-gradient(closest-side, #000 60%, transparent 61% 88%, #000 89% 93%, transparent 94%);
  animation: anillo-gira 40s linear infinite; }
.prod-cab .stand::after { content: ''; position: absolute; z-index: -1; left: 50%; top: 52%; width: 200px; aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; pointer-events: none;
  border: 1px dashed rgba(var(--acento-rgb), .45); box-shadow: 0 0 40px rgba(var(--acento-rgb), .18), inset 0 0 30px rgba(var(--acento-rgb), .12);
  animation: anillo-gira 26s linear infinite reverse; }
@keyframes anillo-gira { to { rotate: 360deg; } }
.prod-cab > .sec-velas { position: absolute; z-index: -1; left: 0; right: 0; bottom: 0; height: 46%; pointer-events: none; opacity: .16; color: rgb(var(--acento-rgb));
  -webkit-mask: linear-gradient(180deg, transparent, #000 60%); mask: linear-gradient(180deg, transparent, #000 60%); }
.prod-cab > .sec-velas svg { width: 100%; height: 100%; display: block; }
@media (prefers-reduced-motion: reduce) { .prod-cab .stand::before, .prod-cab .stand::after { animation-duration: 120s; } }
@media (max-width: 820px) { .prod-cab .stand::before { width: 210px; } .prod-cab .stand::after { width: 170px; } }

/* Daniel 14-oct: vídeo ajustado al ancho del cuadro (antes se quedaba en 900 px y dejaba hueco) */
.prod-sec[data-tema="video"] .video-real:not(.es-vertical) { max-width: none; }
/* Daniel 14-oct: recuadro «Grupo en formación» decorado — brillo dorado, grupo de personas de marca de agua y las 10 plazas dibujadas */
.grupo-cab { position: relative; --tema: 245, 185, 66;
  background: radial-gradient(120% 80% at 100% 0%, rgba(245,185,66,.16), transparent 60%), linear-gradient(180deg, rgba(20,16,8,.75), rgba(5,7,12,.7)); }
.grupo-cab > :not(.sec-deco):not(.ob-com) { position: relative; z-index: 1; }
.grupo-cab .sec-deco svg { width: 130px; height: 130px; right: -10px; bottom: -14px; }
.grupo-cab h2 { color: var(--oro); }
.pozo-sillas { display: flex; align-items: flex-end; gap: 4px; margin: 4px 0 10px; flex-wrap: wrap; }
.pozo-sillas span { width: 20px; height: 20px; color: rgba(255,255,255,.22); }
.pozo-sillas span.min { color: rgba(245,185,66,.5); }
.pozo-sillas span.min:nth-child(6) { margin-right: 8px; border-right: 1px dashed rgba(245,185,66,.5); padding-right: 6px; width: 26px; }
.pozo-sillas span.llena { color: #ffd24a; filter: drop-shadow(0 0 4px rgba(255,210,74,.6)); }
.pozo-sillas svg { width: 20px; height: 20px; fill: currentColor; display: block; }
.pozo-sillas small { font-size: .68rem; color: rgba(245,185,66,.7); margin-left: 2px; align-self: center; text-transform: uppercase; letter-spacing: .08em; }

/* 14-oct (QA): carnet sin scroll horizontal en móvil; desplegables oscuros en los diálogos; carpetas en el catálogo de vídeos */
.carnet-form,.carnet-form *{min-width:0;box-sizing:border-box}
.carnet-form input,.carnet-form select,.carnet-form textarea{width:100%;max-width:100%}
.cc-form select,.cc-dlg select{width:100%;box-sizing:border-box;background:var(--panel2,#0e1625);border:1px solid var(--borde2,#2a3550);border-radius:10px;color:var(--txt,#e8edf5);padding:11px 12px;font:inherit;font-size:1rem;color-scheme:dark}
.cc-form select option,.cc-dlg select option,.ag-form select option,.es-tab option,.bi-alumno select option{background:#0e1625;color:#e8edf5}   /* el desplegable nativo no hereda el fondo oscuro (QA 14-oct) */
.cc-carpeta{list-style:none;margin:6px 0 0;padding:2px 2px 0;color:var(--oro,#e8b23a);font-size:.9rem}
.carnet-form .ag-fila{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,180px),1fr));gap:8px}
.es-tabs{flex-wrap:wrap}
/* 14-oct (QA propio): pestaña «Automáticos» — la casilla no debe heredar el ancho/alto de los campos de texto */
.ag-form .aj-check{display:flex;align-items:center;gap:10px;color:#eef2f8;font-size:.95rem}
.ag-form .aj-check input[type=checkbox]{width:22px;height:22px;min-height:0;padding:0;flex:none;accent-color:#e8b23a}
.ag-form .aj-margen{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.ag-form .aj-margen input{width:110px;max-width:100%}

/* 14-oct ciclo 2: contenido de un correo en la pestaña de Daniel */
.es-correo{white-space:pre-wrap;word-break:break-word;background:#141b27;border:1px solid #2a3344;border-radius:8px;padding:10px 12px;font:inherit;font-size:.9rem;color:#dfe6f1;margin:6px 0 0;max-height:260px;overflow:auto}

/* 16-oct: chat de la comunidad (chat.js). Sin desborde horizontal a 390 px: todo con min-width:0 y texto que corta palabra larga. */
.banda-cards>.chat{grid-column:1/-1;min-width:0}
.chat{background:var(--panel);border:1px solid var(--borde);border-radius:18px;padding:16px;display:flex;flex-direction:column;gap:10px;min-width:0}
.chat *{box-sizing:border-box;min-width:0}
.ch-aviso{margin:0;padding:10px 12px;border-radius:12px;background:rgba(245,185,66,.1);border:1px solid rgba(245,185,66,.35);color:var(--txt);font-size:.88rem;line-height:1.4}
.ch-norma{padding:9px 12px;border-radius:12px;background:rgba(34,211,238,.08);border:1px solid rgba(34,211,238,.35);font-size:.9rem;overflow-wrap:anywhere}
.ch-lista{display:flex;flex-direction:column;gap:8px;height:min(56vh,460px);overflow-y:auto;overflow-x:hidden;padding:4px;background:var(--panel2);border:1px solid var(--borde);border-radius:14px;-webkit-overflow-scrolling:touch}
.ch-msg{padding:8px 10px;border-radius:12px;background:#111a2c;border:1px solid var(--borde);max-width:92%;align-self:flex-start;overflow-wrap:anywhere}
.ch-msg.ch-mio{align-self:flex-end;background:#16213a;border-color:var(--borde2)}
.ch-cab{display:flex;gap:8px;align-items:baseline;justify-content:space-between;font-size:.78rem;color:var(--tenue)}
.ch-autor{font-weight:800;color:var(--txt)} .ch-rol{color:var(--oro)}
.ch-texto{margin:3px 0 0;white-space:pre-wrap;overflow-wrap:anywhere;line-height:1.4}
.ch-cita{margin:5px 0 0;padding:4px 8px;border-left:3px solid var(--borde2);color:var(--tenue);font-size:.82rem;overflow-wrap:anywhere}
.ch-imgcaja{margin-top:6px}
.ch-img{display:block;max-width:100%;max-height:320px;border-radius:10px;border:1px solid var(--borde);-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.ch-img.ch-peq{max-height:110px}
.ch-cargando,.ch-vacio{color:var(--apagado);font-size:.85rem}
.ch-acc{display:flex;flex-wrap:wrap;gap:4px 12px;margin-top:5px}
.ch-link{background:none;border:0;padding:4px 0;color:var(--tenue);font:600 .78rem Manrope,sans-serif;cursor:pointer;text-decoration:underline;min-height:28px}
.ch-link:hover,.ch-link:focus-visible{color:var(--txt)}
.ch-estado{margin:0;color:var(--tenue);font-size:.84rem;min-height:1.2em}
.ch-comp{display:flex;flex-direction:column;gap:8px}
.ch-comp.ch-off{opacity:.6}
.ch-txt,.ch-in{width:100%;background:var(--panel2);color:var(--txt);border:1px solid var(--borde2);border-radius:12px;padding:10px 12px;font:inherit;font-size:.95rem}
.ch-txt{resize:vertical;min-height:60px;max-height:200px}
.ch-comp-fila,.ch-fila{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.ch-fila .ch-in{flex:1 1 180px;width:auto}
.ch-cont{margin-left:auto;font-size:.8rem;color:var(--tenue)} .ch-cont.ch-sobra{color:#ff7b72}
.ch-btn{background:none;border:1px solid var(--borde2);color:var(--txt);font:700 .86rem Manrope,sans-serif;padding:8px 16px;border-radius:999px;cursor:pointer;min-height:38px;text-decoration:none;display:inline-flex;align-items:center}
.ch-btn:disabled{opacity:.45;cursor:not-allowed}
.ch-btn-oro{background:#e8b23a;border-color:#e8b23a;color:#17181c}
.ch-btn:focus-visible,.ch-link:focus-visible,.ch-txt:focus-visible,.ch-in:focus-visible,.ch-lista:focus-visible{outline:2px solid #e8b23a;outline-offset:2px}
.ch-cons{font-size:.88rem;color:var(--txt);display:flex;gap:8px;align-items:flex-start}
.ch-cons[hidden],.ch-resp[hidden],.ch-vista[hidden],.ch-norma[hidden],.ch-mod[hidden]{display:none}
.ch-nota{margin:0;font-size:.8rem;color:var(--tenue);line-height:1.4}
.ch-resp{display:flex;gap:10px;align-items:center;justify-content:space-between;font-size:.84rem;color:var(--tenue);padding:6px 10px;border-left:3px solid var(--oro);background:var(--panel2);border-radius:8px;overflow-wrap:anywhere}
.ch-vista{display:flex;gap:12px;align-items:center}
.ch-tarjeta{display:flex;flex-direction:column;gap:8px;align-items:flex-start;padding:4px}
.ch-tarjeta b{font:700 1.08rem Sora,sans-serif}
.ch-tarjeta p{margin:0;color:var(--tenue)}
.ch-acciones{display:flex;gap:10px;flex-wrap:wrap;margin-top:4px}
.ch-mod{border-top:1px solid var(--borde);padding-top:10px}
.ch-mod details>*{margin-top:8px}
.ch-mod summary{cursor:pointer;font-weight:800;color:var(--oro)}
.ch-rep{display:flex;gap:10px;flex-wrap:wrap;align-items:center;font-size:.84rem;overflow-wrap:anywhere}
.ch-sil{display:flex;flex-direction:column;gap:8px;padding:10px;border:1px solid var(--borde2);border-radius:12px}
.ch-reg{margin:0;padding-left:18px;font-size:.78rem;color:var(--tenue);max-height:180px;overflow:auto}

/* 16-oct: regalo de Daniel con varios correos + promociones */
.es-resumen-regalo{margin-top:10px;padding:10px 12px;border:1px solid var(--borde2,#2a2d36);border-radius:12px}
.es-resumen-regalo ul{margin:6px 0 0;padding-left:18px}.es-resumen-regalo li.ok{color:#7fd69a}.es-resumen-regalo li.mal{color:#ff9b8a}
.ag-form textarea{width:100%;box-sizing:border-box}
.ag-dur input{width:5.5em}

/* 16-oct: mentoría 1 a 1 (elegir hora y reservar) */
.m1a1-lista{list-style:none;margin:8px 0;padding:0;display:grid;gap:8px}
.m1a1-hueco{width:100%;text-align:left;padding:10px 12px;border-radius:12px;border:1px solid var(--borde2,#2a3344);background:transparent;color:inherit;font:inherit;cursor:pointer}
.m1a1-hueco.on,.m1a1-hueco:hover{border-color:var(--oro,#e8b23a)}
.m1a1-ok{border:1px solid var(--oro,#e8b23a);border-radius:14px;padding:12px 14px}

/* 17-oct: casilla de aceptación antes de pagar con Stripe (texto BORRADOR: lo revisa un gestor) */
.cc-terminos{max-width:720px;margin:6px auto 14px;padding:10px 14px;border:1px solid var(--borde2,#2a3344);border-radius:12px;font-size:.88rem;line-height:1.45;text-align:left}
.cc-terminos label{display:flex;gap:10px;align-items:flex-start;cursor:pointer}
.cc-terminos input[type=checkbox]{width:auto;margin-top:3px;flex:none}
.cc-terminos a{text-decoration:underline}
