/* ─────────────────────────────────────────────────────────────
   mmb-metodologia.css
   Estilos para las secciones compartidas "Metodología y
   Acompañamiento" y "Así funciona tu curso", usadas en la portada
   (index.html) y en las 7 landing de curso. Reutiliza los
   tokens y componentes ya existentes (mmb-tokens.css/mmb-components.css)
   — solo añade el layout específico de estas dos secciones.
   ───────────────────────────────────────────────────────────── */

.mmb-metodologia-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));
  gap:22px;
  max-width:1100px;
  margin:0 auto;
}
.mmb-metodologia-card{
  padding:28px 24px;
  text-align:left;
  border-radius:var(--mmb-radius-md);
  transition:
    transform .5s var(--mmb-ease-premium),
    border-color .5s var(--mmb-ease-premium),
    box-shadow .5s var(--mmb-ease-premium);
}
.mmb-metodologia-card:hover{
  transform:translateY(-6px);
  border-color:rgba(var(--acc, 0,120,212), 0.45);
  box-shadow:0 20px 40px -22px rgba(var(--acc, 0,120,212), 0.4);
}
.mmb-metodologia-icon{
  width:48px; height:48px;
  border-radius:12px;
  display:flex; align-items:center; justify-content:center;
  font-size:1.15rem;
  margin-bottom:16px;
  background:rgba(var(--acc, 0,120,212), 0.14);
  color:rgb(var(--acc, 0,120,212));
  transition: transform .45s var(--mmb-ease-premium);
}
.mmb-metodologia-card:hover .mmb-metodologia-icon{
  transform:scale(1.12) rotate(-6deg);
}
@media (prefers-reduced-motion: reduce){
  .mmb-metodologia-card{ transition:none; }
  .mmb-metodologia-card:hover{ transform:none; }
  .mmb-metodologia-icon{ transition:none; }
}
.mmb-metodologia-card h3{
  font-size:1.05rem;
  font-weight:700;
  margin-bottom:8px;
  font-family:'Space Grotesk', sans-serif;
}
.mmb-metodologia-card p{
  font-size:.9rem;
  line-height:1.6;
  color:var(--mmb-ink-dim);
  margin:0;
}

/* ───────── Así funciona tu curso ───────── */
.mmb-flow{
  max-width:1100px;
  margin:0 auto;
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(150px, 1fr));
  gap:26px 18px;
  position:relative;
}
.mmb-flow-step{
  text-align:center;
  padding:42px 16px 24px;
  border-radius:var(--mmb-radius-sm);
  background:var(--mmb-glass-bg);
  border:1px solid var(--mmb-glass-border);
  position:relative;
  transition:
    transform .5s var(--mmb-ease-premium),
    border-color .5s var(--mmb-ease-premium),
    background .5s var(--mmb-ease-premium),
    box-shadow .5s var(--mmb-ease-premium);
}
.mmb-flow-step:hover{
  transform:translateY(-7px);
  border-color:rgba(80,230,255,0.4);
  background:rgba(80,230,255,0.055);
  box-shadow:0 22px 44px -24px rgba(0,120,212,0.5);
}
/* Número de paso: insignia flotante que se solapa con el icono */
.mmb-flow-num{
  position:absolute;
  top:14px; left:50%;
  transform:translateX(6px);
  width:26px; height:26px;
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-family:'JetBrains Mono', monospace;
  font-size:.72rem; font-weight:700;
  background:linear-gradient(135deg, var(--mmb-office-blue), var(--mmb-office-cyan));
  color:#03121f;
  box-shadow:0 0 0 4px var(--mmb-bg-soft, var(--mmb-bg)), 0 4px 14px -3px rgba(80,230,255,.55);
  z-index:3;
}
.mmb-flow-step i.mmb-flow-icon{
  width:52px; height:52px;
  margin:0 auto 14px;
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:1.2rem;
  color:var(--mmb-office-cyan);
  background:radial-gradient(circle at 32% 28%, rgba(80,230,255,.22), rgba(0,120,212,.08));
  border:1px solid var(--mmb-glass-border);
  transition: transform .45s var(--mmb-ease-premium), background .45s var(--mmb-ease-premium);
}
.mmb-flow-step:hover i.mmb-flow-icon{
  transform:scale(1.12) rotate(-6deg);
  background:radial-gradient(circle at 32% 28%, rgba(80,230,255,.36), rgba(0,120,212,.14));
}
.mmb-flow-step h4{
  font-size:.9rem;
  font-weight:700;
  margin-bottom:6px;
  color:var(--mmb-ink);
}
.mmb-flow-step p{
  font-size:.78rem;
  line-height:1.5;
  color:var(--mmb-ink-dim);
  margin:0;
}
/* Conector entre pasos: línea que "se dibuja" al revelarse la tarjeta
   (si la página no usa data-mmb-reveal, queda visible de forma estática) */
.mmb-flow-step:not(:last-child)::after{
  content:'';
  display:none;
}
@media (min-width:900px){
  .mmb-flow-step:not(:last-child)::after{
    display:block;
    content:'';
    position:absolute;
    top:68px; right:-18px;
    width:18px; height:2px;
    border-radius:2px;
    background:linear-gradient(90deg, var(--mmb-office-cyan), rgba(80,230,255,.15));
    box-shadow:0 0 6px rgba(80,230,255,.5);
    transform-origin:left;
    transform:scaleX(1);
  }
  .mmb-flow-step[data-mmb-reveal]:not(:last-child)::after{
    transform:scaleX(0);
    transition:transform .6s .35s var(--mmb-ease-premium);
  }
  .mmb-flow-step[data-mmb-reveal].is-visible:not(:last-child)::after{
    transform:scaleX(1);
  }
}
/* Mobile: conector vertical corto entre tarjetas apiladas */
@media (max-width:899px){
  .mmb-flow-step:not(:last-child)::before{
    content:'';
    position:absolute;
    bottom:-26px; left:50%;
    transform:translateX(-50%);
    width:2px; height:26px;
    background:linear-gradient(var(--mmb-office-cyan), rgba(80,230,255,0));
  }
}
@media (prefers-reduced-motion: reduce){
  .mmb-flow-step{ transition:none; }
  .mmb-flow-step:hover{ transform:none; }
  .mmb-flow-step i.mmb-flow-icon{ transition:none; }
  .mmb-flow-step[data-mmb-reveal]:not(:last-child)::after{
    transition:none; transform:scaleX(1);
  }
}

/* ───────── Así funciona tu curso — modo circular (pantallas grandes) ─────────
   Los 7 pasos se distribuyen en el sentido de las agujas del reloj alrededor
   de un aro central, empezando arriba (paso 1, "Inscripción") y terminando
   justo antes de esa misma posición (paso 7, "Certificado"). Por debajo del
   breakpoint se mantiene el timeline lineal de arriba (más seguro en pantallas
   estrechas, donde un círculo de este tamaño no cabría bien). */
@media (min-width:1180px){
  .mmb-flow{
    display:block;
    width:660px;
    height:660px;
    max-width:100%;
    margin:70px auto 50px;
  }
  .mmb-flow::before{
    content:'';
    position:absolute;
    inset:76px;
    border-radius:50%;
    border:1px dashed rgba(80,230,255,.22);
  }
  .mmb-flow::after{
    content:'';
    position:absolute;
    top:50%; left:50%;
    width:64px; height:64px;
    margin:-32px 0 0 -32px;
    border-radius:50%;
    background:radial-gradient(circle, rgba(80,230,255,.2), transparent 70%);
  }
  .mmb-flow-step{
    position:absolute;
    top:50%; left:50%;
    width:186px;
    margin:0;
    transform: translate(-50%,-50%) rotate(var(--angle)) translate(280px) rotate(calc(-1 * var(--angle)));
  }
  .mmb-flow-step[data-mmb-reveal]{
    opacity:0;
    filter:none;
    transition:opacity .6s var(--mmb-ease-premium);
  }
  .mmb-flow-step[data-mmb-reveal].is-visible{
    opacity:1;
    transform: translate(-50%,-50%) rotate(var(--angle)) translate(280px) rotate(calc(-1 * var(--angle)));
  }
  .mmb-flow-step:hover{
    transform: translate(-50%,-50%) rotate(var(--angle)) translate(280px) rotate(calc(-1 * var(--angle))) scale(1.07);
    z-index:5;
  }
  .mmb-flow-step[data-mmb-reveal].is-visible:hover{
    transform: translate(-50%,-50%) rotate(var(--angle)) translate(280px) rotate(calc(-1 * var(--angle))) scale(1.07);
    z-index:5;
  }
  /* Ángulo de cada paso: -90deg = arriba (12h), avanzando en sentido horario */
  .mmb-flow-step:nth-child(1){ --angle:-90deg; }
  .mmb-flow-step:nth-child(2){ --angle:-38.57deg; }
  .mmb-flow-step:nth-child(3){ --angle:12.86deg; }
  .mmb-flow-step:nth-child(4){ --angle:64.29deg; }
  .mmb-flow-step:nth-child(5){ --angle:115.71deg; }
  .mmb-flow-step:nth-child(6){ --angle:167.14deg; }
  .mmb-flow-step:nth-child(7){ --angle:218.57deg; }

  /* El conector lineal de la vista en fila no aplica en el círculo */
  .mmb-flow-step:not(:last-child)::after{ display:none; }
}
@media (min-width:1180px) and (prefers-reduced-motion: reduce){
  .mmb-flow-step[data-mmb-reveal]{ opacity:1; transition:none; }
  .mmb-flow-step:hover,
  .mmb-flow-step[data-mmb-reveal].is-visible:hover{
    transform: translate(-50%,-50%) rotate(var(--angle)) translate(280px) rotate(calc(-1 * var(--angle)));
  }
}

/* ───────── FAQ (acordeón) — solo se usa aquí si la página no trae
   ya su propia copia inline de estas reglas, como la portada) ───────── */
.faq-content{
  max-height:0;
  overflow:hidden;
  transition:max-height .4s ease, opacity .3s ease;
  opacity:0;
}
.faq-content.show{
  max-height:500px;
  opacity:1;
}
.faq-toggle{
  background:transparent;
  border:none;
  cursor:pointer;
}
.faq-toggle.active{
  color:var(--mmb-office-cyan);
  background-color:rgba(80,230,255,0.06);
  border-radius:.5rem;
  padding:.75rem 1rem;
}
.faq-toggle:hover{
  color:var(--mmb-office-cyan);
}
.faq-toggle i.rotate-180{
  transform:rotate(180deg);
}