/* ═══════════════════════════════════════════════════════════════
   ACADEMIA MMB — Componentes reutilizables
   Botones premium, glass cards, tilt/magnetic/glow/ripple, bordes
   con gradiente animado. Depende de mmb-tokens.css.
   ═══════════════════════════════════════════════════════════════ */

/* ───────── Botones premium ───────── */
.mmb-btn{
  position:relative;
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-family:'Space Grotesk', sans-serif;
  font-weight:600;
  font-size:.95rem;
  padding:14px 28px;
  border-radius:999px;
  border:1px solid transparent;
  cursor:pointer;
  isolation:isolate;
  overflow:hidden;
  text-decoration:none;
  transition: transform .35s var(--mmb-ease-premium), box-shadow .35s var(--mmb-ease-premium), border-color .35s ease;
  -webkit-tap-highlight-color: transparent;
}
.mmb-btn:active{ transform:scale(.97); }
.mmb-btn:focus-visible{
  outline:2px solid var(--mmb-office-cyan);
  outline-offset:3px;
}
.mmb-btn:disabled, .mmb-btn[aria-disabled="true"]{
  opacity:.5;
  cursor:not-allowed;
  pointer-events:none;
  transform:none;
  box-shadow:none;
}

.mmb-btn-primary{
  background:linear-gradient(135deg, var(--mmb-office-blue), var(--mmb-office-cyan));
  color:#03121f;
  box-shadow: var(--mmb-shadow-glow-blue);
}
.mmb-btn-primary:hover{
  box-shadow: 0 26px 70px -18px rgba(80,230,255,0.6);
  transform: translateY(-2px);
}

.mmb-btn-glass{
  background: var(--mmb-glass-bg);
  backdrop-filter: blur(var(--mmb-glass-blur));
  -webkit-backdrop-filter: blur(var(--mmb-glass-blur));
  border-color: var(--mmb-glass-border);
  color: var(--mmb-ink);
}
.mmb-btn-glass:hover{
  border-color: rgba(80,230,255,0.5);
  transform: translateY(-2px);
  box-shadow: 0 20px 50px -24px rgba(80,230,255,0.4);
}

.mmb-btn .mmb-btn-shine{
  position:absolute; inset:0; z-index:-1;
  background:linear-gradient(120deg, transparent 30%, rgba(255,255,255,0.35) 50%, transparent 70%);
  transform:translateX(-120%);
  transition: transform .7s var(--mmb-ease-soft);
}
.mmb-btn:hover .mmb-btn-shine{ transform:translateX(120%); }

@media (prefers-reduced-motion: reduce){
  .mmb-btn, .mmb-btn .mmb-btn-shine{ transition:none; }
  .mmb-btn:hover{ transform:none; }
}

/* ───────── Magnetic wrapper (JS aplica transform inline) ───────── */
[data-mmb-magnetic]{ will-change: transform; }

/* ───────── Input genérico premium ─────────
   Generaliza el mismo patrón de foco que ya usaba #chat-input en
   mmb-sections.css, para cualquier campo de texto/textarea/select
   nuevo o mejorado en las páginas de esta fase. */
.mmb-input{
  transition: border-color .25s ease, box-shadow .25s ease;
}
.mmb-input:hover{
  border-color: var(--mmb-line-strong);
}
.mmb-input:focus, .mmb-input:focus-visible{
  outline:none;
  border-color: var(--mmb-office-cyan);
  box-shadow: 0 0 0 3px rgba(80,230,255,0.15);
}
.mmb-input:disabled{
  opacity:.5;
  cursor:not-allowed;
}
@media (prefers-reduced-motion: reduce){
  .mmb-input{ transition:none; }
}

/* ───────── Menús / paneles desplegables ─────────
   Sustituye el toggle instantáneo de Tailwind ".hidden" por una
   apertura con opacidad+desplazamiento. Aplicar ".mmb-menu-panel" al
   contenedor y alternar ".is-open" desde JS en vez de ".hidden". */
.mmb-menu-panel{
  opacity:0;
  transform:translateY(-8px);
  visibility:hidden;
  pointer-events:none;
  transition: opacity .3s var(--mmb-ease-soft), transform .3s var(--mmb-ease-soft), visibility .3s;
}
.mmb-menu-panel.is-open{
  opacity:1;
  transform:none;
  visibility:visible;
  pointer-events:auto;
}
@media (prefers-reduced-motion: reduce){
  .mmb-menu-panel{ transition:opacity .1s linear, visibility .1s; }
}

/* ───────── Modales ─────────
   Igual que arriba, pero con overlay de fondo + escala en la tarjeta
   interior. Aplicar ".mmb-modal-overlay" al fondo del modal y
   ".is-open" desde JS en vez de ".hidden". */
.mmb-modal-overlay{
  opacity:0;
  visibility:hidden;
  transition: opacity .3s ease, visibility .3s;
  z-index: var(--mmb-z-modal, 1000);
}
.mmb-modal-overlay.is-open{
  opacity:1;
  visibility:visible;
}
.mmb-modal-overlay .mmb-card,
.mmb-modal-overlay .mmb-glass{
  transform:scale(.94);
  opacity:0;
  transition: transform .35s var(--mmb-ease-premium), opacity .35s var(--mmb-ease-premium);
}
.mmb-modal-overlay.is-open .mmb-card,
.mmb-modal-overlay.is-open .mmb-glass{
  transform:scale(1);
  opacity:1;
}
@media (prefers-reduced-motion: reduce){
  .mmb-modal-overlay,
  .mmb-modal-overlay .mmb-card,
  .mmb-modal-overlay .mmb-glass{ transition:opacity .1s linear, visibility .1s; }
  .mmb-modal-overlay .mmb-card,
  .mmb-modal-overlay .mmb-glass{ transform:none !important; }
}

/* ───────── Fila de confianza (cerca de precios) ───────── */
.mmb-trust-row{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:12px 30px;
  max-width:820px;
  margin:0 auto 44px;
}
.mmb-trust-item{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:.82rem;
  color:var(--mmb-ink-dim);
}
.mmb-trust-item i{
  color:var(--mmb-office-cyan);
  font-size:.95rem;
}

/* ───────── Tabla comparativa de planes ───────── */
.mmb-compare-hint{
  display:none;
  text-align:center;
  font-family:'JetBrains Mono', monospace;
  font-size:.7rem;
  letter-spacing:.04em;
  color:var(--mmb-ink-faint);
  margin:36px auto 10px;
}
.mmb-compare-wrap{
  display:block;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  max-width:820px;
  width:100%;
  margin:56px auto 0;
  border-radius:var(--mmb-radius-lg);
  border:1px solid var(--mmb-glass-border);
  background:var(--mmb-glass-bg);
  backdrop-filter:blur(var(--mmb-glass-blur));
  -webkit-backdrop-filter:blur(var(--mmb-glass-blur));
  box-shadow:0 30px 70px -40px rgba(0,120,212,0.35);
}
.mmb-compare-table{
  width:100%;
  border-collapse:collapse;
  font-size:.87rem;
  min-width:560px;
}
@media (max-width:600px){
  .mmb-compare-hint{ display:block; margin-top:0; }
  .mmb-compare-wrap{ margin-top:4px; }
  .mmb-compare-table{ font-size:.76rem; min-width:460px; }
  .mmb-compare-table th, .mmb-compare-table td{ padding:10px 9px; }
  .mmb-compare-table th:first-child, .mmb-compare-table td:first-child{ padding-left:12px; }
  .mmb-compare-table thead th{ font-size:.82rem; padding-top:14px; }
  .mmb-compare-table thead th:nth-child(3)::before{ font-size:.55rem; padding:2px 8px; }
  .mmb-compare-table td i.fa-check, .mmb-compare-table td i.fa-minus{ width:20px; height:20px; font-size:.6rem; }
}
.mmb-compare-table th, .mmb-compare-table td{
  padding:16px 22px;
  text-align:center;
  border-bottom:1px solid var(--mmb-line);
}
.mmb-compare-table th:first-child, .mmb-compare-table td:first-child{
  text-align:left;
  color:var(--mmb-ink-dim);
  font-weight:500;
}
.mmb-compare-table thead th{
  font-family:'Space Grotesk', sans-serif;
  font-weight:700;
  color:var(--mmb-ink);
  font-size:1rem;
  padding-top:22px;
  padding-bottom:14px;
}
/* Columna "Completo" resaltada de arriba a abajo con una insignia propia */
.mmb-compare-table th:nth-child(3),
.mmb-compare-table td:nth-child(3){
  background:linear-gradient(180deg, rgba(80,230,255,0.14), rgba(80,230,255,0.04));
  position:relative;
}
.mmb-compare-table thead th:nth-child(3){
  color:var(--mmb-office-cyan);
  border-top-left-radius:12px;
  border-top-right-radius:12px;
}
.mmb-compare-table thead th:nth-child(3)::before{
  content:'Más popular';
  display:block;
  font-family:'JetBrains Mono', monospace;
  font-size:.6rem;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:#04121f;
  background:var(--mmb-office-cyan);
  padding:3px 10px;
  border-radius:999px;
  width:fit-content;
  margin:0 auto 8px;
}
.mmb-compare-table tbody tr:last-child td:nth-child(3){
  border-bottom-left-radius:12px;
  border-bottom-right-radius:12px;
}
.mmb-compare-table td i.fa-check, .mmb-compare-table td i.fa-minus{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:26px; height:26px;
  border-radius:50%;
  font-size:.72rem;
}
.mmb-compare-table td i.fa-check{
  background:rgba(80,230,255,0.16);
  color:var(--mmb-office-cyan);
}
.mmb-compare-table td i.fa-minus{
  background:rgba(159,176,200,0.10);
  color:var(--mmb-ink-faint);
}
.mmb-compare-table tbody tr{ transition:background .2s ease; }
.mmb-compare-table tbody tr:hover{ background:rgba(255,255,255,0.025); }
.mmb-compare-table tbody tr:hover td:nth-child(3){ background:rgba(80,230,255,0.2); }
.mmb-compare-table tbody tr:last-child td{ border-bottom:none; }

/* ───────── Botón "volver arriba" ───────── */
.mmb-back-to-top{
  position:fixed;
  right:22px; bottom:22px;
  width:46px; height:46px;
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg, var(--mmb-office-blue), var(--mmb-office-cyan));
  color:#04121f;
  border:none;
  cursor:pointer;
  font-size:1.05rem;
  box-shadow:0 10px 28px -8px rgba(0,120,212,.55);
  opacity:0;
  visibility:hidden;
  transform:translateY(14px);
  transition:opacity .3s ease, transform .3s ease, visibility .3s;
  z-index:500;
}
.mmb-back-to-top.show{
  opacity:1;
  visibility:visible;
  transform:translateY(0);
}
.mmb-back-to-top:hover{ transform:translateY(-4px); }
@media (prefers-reduced-motion: reduce){
  .mmb-back-to-top{ transition:opacity .1s linear; }
  .mmb-back-to-top:hover{ transform:none; }
}

/* ───────── Glass panel genérico ───────── */
.mmb-glass{
  background: var(--mmb-glass-bg);
  border:1px solid var(--mmb-glass-border);
  backdrop-filter: blur(var(--mmb-glass-blur));
  -webkit-backdrop-filter: blur(var(--mmb-glass-blur));
  border-radius: var(--mmb-radius-md);
}

/* ───────── Tilt 3D (JS setea --mmb-rx/--mmb-ry) ───────── */
[data-mmb-tilt]{
  --mmb-rx:0deg; --mmb-ry:0deg;
  transform: perspective(900px) rotateX(var(--mmb-rx)) rotateY(var(--mmb-ry));
  transition: transform .5s var(--mmb-ease-soft);
  transform-style: preserve-3d;
}
[data-mmb-tilt].mmb-tilt-active{ transition: transform .08s linear; }

/* ───────── Borde con gradiente animado ───────── */
.mmb-border-glow{
  position:relative;
  z-index:0;
}
.mmb-border-glow::before{
  content:'';
  position:absolute; inset:-1px; z-index:-1;
  border-radius:inherit;
  padding:1px;
  background:conic-gradient(from var(--mmb-angle,0deg), transparent 0%, rgba(var(--acc,80,230,255),.9) 12%, transparent 26%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity:0;
  transition: opacity .4s ease;
  animation: mmb-rotate-angle 4.5s linear infinite paused;
}
.mmb-border-glow:hover::before{ opacity:1; animation-play-state:running; }

@property --mmb-angle{
  syntax:'<angle>'; inherits:false; initial-value:0deg;
}
@keyframes mmb-rotate-angle{ to{ --mmb-angle:360deg; } }

@media (prefers-reduced-motion: reduce){
  [data-mmb-tilt]{ transform:none !important; transition:none !important; }
  .mmb-border-glow::before{ animation:none; }
}

/* ───────── Glass shine sweep (barrido diagonal en hover) ───────── */
.mmb-shine-sweep{ position:relative; overflow:hidden; }
.mmb-shine-sweep::after{
  content:'';
  position:absolute; top:-60%; left:-30%;
  width:40%; height:220%;
  background:linear-gradient(120deg, transparent, rgba(255,255,255,0.12), transparent);
  transform: rotate(15deg) translateX(-220%);
  transition: transform .8s var(--mmb-ease-soft);
  pointer-events:none;
  z-index:2;
}
.mmb-shine-sweep:hover::after{ transform: rotate(15deg) translateX(320%); }

/* ───────── Ripple (JS crea el span.mmb-ripple en el click) ───────── */
.mmb-ripple-host{ position:relative; overflow:hidden; }
.mmb-ripple{
  position:absolute; border-radius:50%;
  background:rgba(255,255,255,0.35);
  transform:scale(0);
  animation: mmb-ripple-anim .6s ease-out forwards;
  pointer-events:none;
}
@keyframes mmb-ripple-anim{ to{ transform:scale(1); opacity:0; } }

/* ───────── Cursor glow (desktop, puntero fino) ───────── */
#mmb-cursor-glow{
  position:fixed; top:0; left:0; width:420px; height:420px;
  border-radius:50%; pointer-events:none; z-index:3;
  background: radial-gradient(circle, rgba(80,230,255,0.10) 0%, transparent 70%);
  transform: translate(-50%,-50%);
  will-change: transform;
  opacity:0;
  transition: opacity .4s ease, width .3s var(--mmb-ease-soft), height .3s var(--mmb-ease-soft), background .3s ease;
}
#mmb-cursor-glow.is-active{ opacity:1; }
/* Cursor "personalizado": el glow se encoge e intensifica sobre
   elementos interactivos (botones, enlaces, tarjetas), en vez de
   sustituir el cursor del sistema operativo — ver mmb-effects.js. */
#mmb-cursor-glow.is-interactive{
  width:64px; height:64px;
  background: radial-gradient(circle, rgba(80,230,255,0.35) 0%, transparent 70%);
}
@media (prefers-reduced-motion: reduce){
  #mmb-cursor-glow{ display:none; }
}

/* ───────── Video slot genérico (mmb-video-bg.js) ───────── */
.mmb-video-slot{
  position:absolute; inset:0; overflow:hidden; z-index:0;
  pointer-events:none;
}
.mmb-video-slot video{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; opacity:0; transition:opacity 1s ease;
}
.mmb-video-slot video.is-ready{ opacity:1; }
.mmb-video-slot::after{
  content:'';
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(7,11,20,.35), rgba(7,11,20,.85));
}