/* ═══════════════════════════════════════════════════════════════
   ACADEMIA MMB — Landing de curso (Office / Oposiciones / Inglés Niños)
   Complemento a mmb-tokens.css + mmb-components.css: estos 3 archivos
   comparten plantilla, así que esta hoja añade solo lo específico de
   ese layout (hero de 2 columnas, pricing cards, modal, FAQ, nav).
   Los colores siguen viniendo de las variables --mmb-office-blue /
   --mmb-office-cyan que cada página ya define con su propio acento.
   ═══════════════════════════════════════════════════════════════ */

/* ───────── Hero: canvas de partículas dentro del layout de 2 columnas ───────── */
#mmb-hero{ isolation:isolate; }
#mmb-hero-canvas{
  position:absolute; inset:0; z-index:0; pointer-events:none;
  opacity:0; transition:opacity 1.2s ease;
}
#mmb-hero-canvas.is-ready{ opacity:1; }

/* ───────── Tilt en tarjetas de apps / features / pricing ───────── */
.app-icon[data-mmb-tilt],
.mmb-card[data-mmb-tilt]{
  transform-style: preserve-3d;
}

/* ───────── Borde con gradiente animado adaptado al acento de cada página ───────── */
.pricing-card.mmb-border-glow::before,
.pricing-card-popular.mmb-border-glow::before,
.app-icon.mmb-border-glow::before,
.mmb-card.mmb-border-glow::before,
.review-card.mmb-border-glow::before{
  background:conic-gradient(from var(--mmb-angle,0deg), transparent 0%, rgba(var(--acc,80,230,255),.9) 12%, transparent 26%);
}

/* ───────── Header / Nav: pulido premium ───────── */
header:has(#mobileMenuBtn){
  transition: background .4s ease, box-shadow .4s ease;
}
header:has(#mobileMenuBtn) a[href]:not(.mmb-shine-sweep){
  position:relative;
}
#mobileMenu{
  transition: opacity .3s ease, transform .3s ease;
}

/* ───────── FAQ: chevron y transición más suaves ───────── */
.faq-toggle i.fa-chevron-down{
  transition: transform .35s var(--mmb-ease-premium, cubic-bezier(.22,.61,.36,1));
}
.faq-toggle.active i.fa-chevron-down{
  transform: rotate(180deg);
}

/* ───────── Modal de suscripción: glass premium ───────── */
#subscribeModal .mmb-card{
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: 0 30px 90px -20px rgba(0,0,0,.6);
}

/* ───────── Estrellas de reseña: pequeño glow al seleccionar ───────── */
.review-star.selected{
  filter: drop-shadow(0 0 6px rgba(var(--acc,80,230,255),.6));
}

/* ───────── Reduced motion: aseguramos estado final visible ───────── */
@media (prefers-reduced-motion: reduce){
  #mmb-hero-canvas{ display:none; }
}

/* ───────── Lectura, foco y adaptación de las fichas de curso ───────── */
:where(a, button, input, select, textarea, [role="button"]):focus-visible{
  outline:2px solid var(--mmb-office-cyan, #50E6FF);
  outline-offset:3px;
}

.mmb-course-summary{
  max-width:44rem;
  align-items:flex-start;
}
.mmb-course-summary .mmb-mono{
  line-height:1.4;
  text-wrap:pretty;
}
#mmb-hero h2{
  text-wrap:balance;
}

@media (max-width:640px){
  .mmb-course-summary{ gap:.5rem !important; }
  .mmb-course-summary .mmb-mono{
    font-size:10px !important;
    padding:6px 9px !important;
  }
  #mmb-hero .flex.flex-wrap.gap-4 > a{
    display:inline-flex;
    width:100%;
    min-height:48px;
    align-items:center;
    justify-content:center;
  }
}

@media (prefers-reduced-motion: reduce){
  .mmb-course-summary .mmb-mono{ text-wrap:wrap; }
}