/* ==========================================================
   AAM · Membresías — compartido entre la web (membresias.php)
   y el Blank "membresias" de Scriptcase (aam_css_membresias()).
   Solo depende de las variables de aam-tokens y de .aam-btn.
   Todo va dentro de .mb-raiz para no chocar con Scriptcase.
   ========================================================== */

.mb-raiz { font-family: var(--font-sans); color: var(--texto); }
.mb-raiz *, .mb-raiz *::before, .mb-raiz *::after { box-sizing: border-box; }
.mb-raiz .aam-visualmente-oculto { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Encabezado de la pantalla */
.mb-intro { display: flex; flex-direction: column; gap: var(--esp-3); margin-bottom: var(--esp-8); max-width: 760px; }
.mb-intro__eyebrow { font: 600 13px/16px var(--font-sans); letter-spacing: .12em; text-transform: uppercase; color: var(--acento); margin: 0; }
.mb-intro__titulo { font: 600 44px/1.05 var(--font-display); color: var(--texto); margin: 0; }
.mb-intro__bajada { font: 400 18px/28px var(--font-sans); color: var(--texto-suave); margin: 0; }

/* Saltos a cada grupo */
.mb-saltos { display: flex; flex-wrap: wrap; gap: var(--esp-2); margin-bottom: var(--esp-8); }
.mb-saltos a {
    display: inline-flex; align-items: center; min-height: 36px; padding: var(--esp-2) var(--esp-4);
    border: 1px solid var(--borde-control); border-radius: var(--radio-pildora);
    font: 500 14px/20px var(--font-sans); color: var(--texto); text-decoration: none; background: var(--superficie);
}
.mb-saltos a:hover { border-color: var(--marca-azul); color: var(--marca-azul); }

/* Grupo */
.mb-grupo { margin-bottom: var(--esp-12); scroll-margin-top: calc(var(--alto-header, 0px) + var(--esp-4)); }
.mb-grupo__cabeza { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--esp-2) var(--esp-4); margin-bottom: var(--esp-6); padding-bottom: var(--esp-3); border-bottom: 1px solid var(--linea); }
.mb-grupo__titulo { font: 600 28px/1.15 var(--font-display); color: var(--texto); margin: 0; }
.mb-grupo__bajada { font-size: 15px; line-height: 22px; color: var(--texto-suave); margin: 0; }
.mb-grupo__planes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--esp-6); }

/* Plan */
.mb-plan {
    display: flex; flex-direction: column; background: var(--superficie);
    border: 1px solid var(--linea); border-top: 4px solid var(--marca-azul);
    border-radius: var(--radio-tarjeta); box-shadow: var(--sombra-tarjeta); overflow: hidden;
}
.mb-plan--actual { border-color: var(--mercurio-petroleo); border-top-color: var(--mercurio-petroleo); }
.mb-plan__cabeza { padding: var(--esp-6) var(--esp-6) var(--esp-4); display: flex; flex-direction: column; gap: var(--esp-2); position: relative; }
.mb-plan__codigo {
    align-self: flex-start; font: 600 12px/16px var(--font-sans); letter-spacing: .06em;
    padding: var(--esp-1) var(--esp-3); border-radius: var(--radio-pildora);
    background: var(--marca-azul-tinte); color: var(--marca-azul);
}
.mb-plan__actual {
    position: absolute; top: var(--esp-6); right: var(--esp-6);
    font: 600 12px/16px var(--font-sans); padding: var(--esp-1) var(--esp-3); border-radius: var(--radio-pildora);
    background: var(--exito-fondo); color: var(--exito);
}
.mb-plan__nombre { font: 600 22px/1.25 var(--font-display); color: var(--texto); margin: 0; }
.mb-plan__para { font-size: 14px; line-height: 20px; color: var(--texto-suave); margin: 0; min-height: 60px; }
.mb-plan__precio { margin: var(--esp-2) 0 0; color: var(--texto-suave); font-size: 14px; }
.mb-plan__precio strong { font: 600 32px/1 var(--font-display); color: var(--texto); letter-spacing: -.01em; }
.mb-plan__beneficios { list-style: none; margin: 0; padding: var(--esp-4) var(--esp-6); border-top: 1px solid var(--linea); display: grid; gap: var(--esp-3); flex: 1; align-content: start; }
.mb-plan__beneficios li { position: relative; padding-left: 26px; font-size: 14px; line-height: 20px; color: var(--texto-suave); }
.mb-plan__beneficios li strong { color: var(--texto); font-weight: 600; }
.mb-plan__beneficios li::before {
    content: ""; position: absolute; left: 0; top: 2px; width: 16px; height: 16px; background: var(--mercurio-petroleo);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat;
}
.mb-plan__pie { padding: 0 var(--esp-6) var(--esp-6); }
.mb-plan__btn { width: 100%; }
.mb-plan__nota { display: block; text-align: center; font: 600 14px/20px var(--font-sans); color: var(--exito); padding: var(--esp-3) 0; }

/* Aviso de pago */
.mb-aviso {
    display: flex; gap: var(--esp-4); align-items: flex-start; padding: var(--esp-4) var(--esp-6);
    border-radius: var(--radio-tarjeta); background: var(--marca-azul-tinte); color: var(--marca-azul); margin-bottom: var(--esp-8);
}
.mb-aviso p { margin: 0; font-size: 15px; line-height: 22px; color: var(--texto); }
.mb-aviso strong { color: var(--marca-azul); }

@media (max-width: 960px) { .mb-grupo__planes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) {
    .mb-intro__titulo { font-size: 32px; }
    .mb-grupo__planes { grid-template-columns: 1fr; gap: var(--esp-4); }
    .mb-plan__para { min-height: 0; }
}

/* Solo web: cierre */
.mb-cierre { display: flex; align-items: center; justify-content: space-between; gap: var(--esp-6); flex-wrap: wrap; }
.mb-cierre .aam-texto { margin-top: var(--esp-2); }