/*
 * Workshop The Multiplier System — Buena Banda × Collective Academy.
 *
 * Sigue el sistema de la marca para landings, el mismo que el embed del Retreat
 * y los de Guadalajara: **hero negro, contenido blanco, cierre magenta** y nada
 * más. Botones amarillos, cuadrados, planos y con borde blanco de 2 px, solo
 * sobre fondo oscuro o de color —sobre blanco el borde desaparece—. Montserrat
 * en 400 para el cuerpo, 700 para el énfasis, 800 en botones y 900 en títulos.
 *
 * Sin sombras, sin degradados, sin color de acento por sección: el equipo
 * rechaza lo recargado ("es mucho").
 *
 * Todo va dentro de `.bb-ms` para no chocar con `globals.css`, que pinta el
 * `body` en negro para el resto de la app.
 *
 * La familia sale de `--font-montserrat`, que el layout raíz ya carga con
 * `next/font`. Se declara igual el nombre suelto por si la variable no llega.
 */

.bb-ms {
  --bb-magenta: #b41a81;
  --bb-yellow: #f0e514;
  --bb-ink: #141414;
  --bb-gray: #5b5b5b;
  --bb-line: #e6e6e6;
  --bb-col: 680px;

  font-family: var(--font-montserrat), "Montserrat", Arial, Helvetica, sans-serif;
  color: var(--bb-ink);
  background: #fff;
  font-weight: 400;
  line-height: 1.6;
  font-size: 19px;
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
}
.bb-ms *{ box-sizing: border-box; margin: 0; padding: 0; }
.bb-ms img { max-width: 100%; display: block; }

/* ── El botón ──────────────────────────────────────────────────────────── */

.bb-ms-btn {
  display: inline-block;
  cursor: pointer;
  text-decoration: none;
  text-align: center;
  font-family: inherit;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .04em;
  font-size: 1.05rem;
  line-height: 1.25;
  background: var(--bb-yellow);
  color: var(--bb-ink);
  border: 2px solid #fff;
  border-radius: 0;
  padding: .9rem 2rem;
  transition: opacity .14s ease;
}
.bb-ms-btn:hover { opacity: .9; }
.bb-ms-btn--block { display: block; width: 100%; }

/* ── Hero, negro ───────────────────────────────────────────────────────── */

.bb-ms-hero {
  background: #000;
  color: #fff;
  text-align: center;
  padding: clamp(3rem, 7vw, 5rem) 1.5rem clamp(3.5rem, 7vw, 5.5rem);
}
.bb-ms-hero__inner { max-width: 720px; margin: 0 auto; }
/*
 * El arte del evento, entero.
 *
 * La regla de la marca es que el arte se ve completo y sin recortar: cada uno
 * trae su proporción —este es 4:5— y encajarlo en una franja le corta la fecha
 * o el nombre de quien habla, que es justo lo que hay que leer.
 *
 * El `max-width` va con la especificidad de `.bb-ms` delante a propósito: el
 * reset `.bb-ms img{max-width:100%}` es de un solo nivel y le ganaría a una
 * clase suelta, y el arte saldría a todo lo ancho de la pantalla.
 */
.bb-ms .bb-ms-hero__arte {
  width: 100%;
  max-width: 460px;
  height: auto;
  margin: 0 auto;
  /* El filo redondeado NO se pone aquí: es `.bb-evento-arte` de membresia.css,
     que lo aplica igual en el hero de todas las páginas de evento. */
}
/*
 * El título después del arte.
 *
 * Más chico que cuando el hero era solo tipografía: aquí ya no es lo primero
 * que se ve —el arte lo grita— y compitiendo a 4rem se leían como dos títulos
 * peleados. Se queda porque es el `h1` de la página: lo que lee un buscador y
 * lo que oye quien no ve la imagen.
 */
.bb-ms-hero__title {
  font-size: clamp(1.7rem, 4.4vw, 2.5rem);
  font-weight: 900;
  line-height: 1.06;
  letter-spacing: -.02em;
  text-transform: uppercase;
  color: #fff;
  margin-top: 2.2rem;
  text-wrap: balance;
}
.bb-ms-hero__sub {
  font-size: clamp(1rem, 2.3vw, 1.18rem);
  line-height: 1.55;
  color: rgba(255, 255, 255, .85);
  max-width: 600px;
  margin: 1.6rem auto 0;
  text-wrap: balance;
}
.bb-ms-hero__meta {
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--bb-yellow);
  margin-top: 1.8rem;
  line-height: 1.8;
}
/* Los 16 px sobre el subtítulo los pidió el equipo: pegado se leía apretado. */
.bb-ms-hero__btn { max-width: 400px; width: 100%; margin-top: 1.6rem; font-size: 1.15rem; }

/* ── Contenido, blanco ─────────────────────────────────────────────────── */

.bb-ms-article {
  max-width: var(--bb-col);
  margin: 0 auto;
  padding: clamp(2.8rem, 5vw, 4.2rem) 1.5rem clamp(2rem, 4vw, 3rem);
}
.bb-ms-article + .bb-ms-article { padding-top: 0; }
.bb-ms-article p { margin-bottom: 1.2rem; }
.bb-ms-article p:last-child { margin-bottom: 0; }
.bb-ms-article strong { font-weight: 700; }
.bb-ms-article em { font-style: italic; }

.bb-ms-intro {
  font-size: clamp(1.15rem, 2.8vw, 1.45rem);
  line-height: 1.4;
  font-weight: 400;
}
.bb-ms-article h2 {
  font-size: clamp(1.7rem, 4vw, 2.2rem);
  font-weight: 900;
  line-height: 1.08;
  letter-spacing: -.015em;
  margin: 0 0 1rem;
  text-wrap: balance;
}
.bb-ms-article h3 {
  font-size: clamp(1.15rem, 2.6vw, 1.35rem);
  font-weight: 800;
  line-height: 1.2;
  margin: 2rem 0 .6rem;
}

.bb-ms-lista { list-style: none; margin: 0 0 1.4rem; padding: 0; }
.bb-ms-lista li { position: relative; padding-left: 1.4rem; margin-bottom: .7rem; line-height: 1.5; }
.bb-ms-lista li::before {
  content: "•";
  position: absolute;
  left: 0;
  color: var(--bb-magenta);
  font-weight: 700;
}

/* Metodología, vigencias y letra secundaria: más chica, nunca el cuerpo. */
.bb-ms-nota { font-size: .9rem; line-height: 1.5; color: var(--bb-gray); }

/* Una raya fina entre apartados. Es la única separación que hay. */
.bb-ms-linea { max-width: var(--bb-col); margin: 0 auto; padding: 0 1.5rem; }
.bb-ms-linea hr { border: 0; border-top: 1px solid var(--bb-line); }

/* ── Los mentores ──────────────────────────────────────────────────────── */

/*
 * Dos en fila en pantalla grande y uno debajo de otro en el teléfono.
 *
 * `minmax(0, 1fr)` y no `1fr` a secas: con `1fr`, una bio larga ensancha su
 * columna y descuadra la pareja, porque el mínimo por defecto de una columna de
 * grid es su contenido, no cero.
 */
.bb-ms-mentores {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2.2rem 1.6rem;
  margin-top: 1.6rem;
}
/*
 * La foto entera, sin recortar: llegaron ya encuadradas de Collective y
 * cualquier recorte nuestro —cuadrarlas, por ejemplo— le corta la cabeza a
 * alguien. `aspect-ratio` no se fuerza por lo mismo.
 */
.bb-ms .bb-ms-mentor__foto {
  width: 100%;
  height: auto;
  margin-bottom: .9rem;
}
.bb-ms-mentor__nombre {
  font-size: 1.15rem;
  font-weight: 900;
  line-height: 1.2;
  margin: 0;
}
.bb-ms-mentor__cargo {
  font-size: .82rem;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--bb-magenta);
  margin: .3rem 0 .7rem;
  line-height: 1.35;
}
.bb-ms-mentor__bio { font-size: .95rem; line-height: 1.55; margin: 0; }

@media (max-width: 620px) {
  .bb-ms-mentores { grid-template-columns: minmax(0, 1fr); gap: 2.6rem; }
  /* Solos y a todo lo ancho de la columna, los retratos se comen la pantalla
     del teléfono. Se acotan sin recortarlos. */
  .bb-ms .bb-ms-mentor__foto { max-width: 300px; }
}

.bb-ms-datos { list-style: none; margin: 0; padding: 0; }
.bb-ms-datos li { margin-bottom: .45rem; font-weight: 700; }
.bb-ms-datos li:last-child { margin-bottom: 0; }

/* ── Cierre, magenta ───────────────────────────────────────────────────── */

.bb-ms-cierre {
  background: var(--bb-magenta);
  color: #fff;
  text-align: center;
  padding: clamp(3.2rem, 7vw, 5rem) 1.5rem;
}
.bb-ms-cierre h2 {
  font-size: clamp(1.9rem, 5vw, 2.6rem);
  font-weight: 900;
  line-height: 1.1;
  letter-spacing: -.015em;
  color: #fff;
}
.bb-ms-cierre__meta {
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .85);
  margin-top: 1rem;
  line-height: 1.8;
}

.bb-ms-oferta { max-width: 420px; margin: 2.4rem auto 0; }
.bb-ms-oferta__quien {
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .82);
  margin-bottom: .6rem;
}
.bb-ms-precio {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
  gap: .2rem .9rem;
  margin-bottom: 1.2rem;
}
/* El precio de lista tachado solo aparece cuando de verdad hay descuento. */
.bb-ms-precio__antes {
  font-size: clamp(1.05rem, 2.4vw, 1.35rem);
  font-weight: 600;
  color: rgba(255, 255, 255, .55);
  text-decoration: line-through;
  text-decoration-thickness: 2px;
}
.bb-ms-precio__ahora {
  font-size: clamp(2rem, 5vw, 2.9rem);
  font-weight: 900;
  letter-spacing: -.01em;
  line-height: 1;
  color: #fff;
}
.bb-ms-precio--preferencial .bb-ms-precio__ahora { color: var(--bb-yellow); }

/*
 * El aviso de "¿eres member?".
 *
 * Va en una tarjeta blanca y no en texto suelto porque la palabra "login" tiene
 * que ir en rosa —lo pidió el equipo— y el rosa de la marca sobre el magenta
 * del cierre no se lee. Sobre blanco sí, y de paso el aviso se separa del
 * precio en vez de competir con él.
 */
/*
 * El aviso de "¿eres member?", que tiene que verse.
 *
 * Nació como una nota al pie —letra chica, caja fina, debajo del botón— y así
 * se lo saltaban. Lo que lo hace visible ahora:
 *
 *   - Va ANTES del precio de lista, no después del botón.
 *   - Tarjeta blanca con marco negro de 3 px sobre el magenta del cierre. El
 *     marco es lo que la convierte en un bloque y no en un párrafo suelto.
 *   - Texto grande y en 700, del tamaño del cuerpo de la página, no más chico.
 *
 * Sigue BLANCA y no amarilla a propósito: el amarillo es del botón y de nada
 * más en esta pantalla. Dos bloques amarillos a un centímetro y el que hay que
 * pulsar deja de distinguirse.
 *
 * Todo plano: ni sombra, ni degradado, ni esquina redondeada — los bloques de
 * esta app van en pico.
 */
.bb-ms-aviso {
  background: #fff;
  color: var(--bb-ink);
  border: 3px solid var(--bb-ink);
  max-width: 420px;
  margin: 0 auto 2rem;
  padding: 1.15rem 1.25rem;
  font-size: clamp(1.05rem, 2.6vw, 1.2rem);
  font-weight: 700;
  line-height: 1.4;
  text-wrap: balance;
}
/* "login" es lo que hay que pulsar: rosa de la marca, 900 y bien subrayado. */
.bb-ms-aviso a {
  color: var(--bb-magenta);
  font-weight: 900;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 3px;
}
.bb-ms-aviso a:hover { color: var(--bb-ink); }

/* Ya pagó: en vez de mandarla a pagar otra vez, lo que pagó. */
.bb-ms-pagado { max-width: 420px; margin: 2.4rem auto 0; }
.bb-ms-pagado__titulo {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-weight: 800;
  font-size: 1.05rem;
}
.bb-ms-pagado__monto {
  font-size: 1.5rem;
  font-weight: 900;
  color: var(--bb-yellow);
  margin: .5rem 0 1.2rem;
  line-height: 1.2;
}
.bb-ms-pagado .bb-ms-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
}

.bb-ms-cierre__nota {
  font-size: .8rem;
  letter-spacing: .06em;
  color: rgba(255, 255, 255, .78);
  margin-top: 1.2rem;
}
.bb-ms .bb-ms-cierre__logo { height: 42px; width: auto; margin: 3rem auto 1rem; }
.bb-ms-cierre__mail {
  color: #fff;
  text-decoration: none;
  font-weight: 700;
  font-size: .9rem;
  border-bottom: 1px solid rgba(255, 255, 255, .5);
  padding-bottom: 2px;
}
.bb-ms-cierre__mail:hover { color: var(--bb-yellow); border-color: var(--bb-yellow); }

@media (max-width: 600px) {
  .bb-ms { font-size: 18px; }
}

@media (prefers-reduced-motion: reduce) {
  .bb-ms { scroll-behavior: auto; }
  .bb-ms-btn { transition: none; }
}