/* ============================================================================
   Membresías — solo los planes.

   Todo lo demás (portada, bloques de texto, rejilla de ventajas, cierre) lo pone el
   kit de landings. Esta hoja solo añade lo único que el kit no tiene: la tarjeta de
   plan, que es una rejilla comparable y no una lista compacta como la de las fichas.

   Está hecha con los mismos materiales que `.dl-memb`, el panel de membresía que ya
   usan cinco fichas: mismo cristal, mismo filo, mismo radio de 18 y el mismo relleno.
   El rótulo del plan usa directamente `.dl-dl__h` y las pastillas `.dl-pill`, que son
   las clases del sistema, para que no se separen nunca de él.

   Ojo con la tipografía: la display es una fuente VARIABLE y el sistema la gobierna
   siempre con `font-stretch` + `font-variation-settings`. Un `font-weight` suelto da
   otra letra, que es lo que pasaba antes y por lo que estas tarjetas no pegaban con
   el resto de la web.
   ============================================================================ */

/* ---- Las frecuencias de barbería: «1 servicio al Mes»… ----------------------

   Estuvieron un rato pintadas como pastillas y estaba mal: una pastilla dice
   «púlsame» y estas no hacen nada. No son opciones de compra ni controles, son la
   primera decisión que tomas —cada cuánto vienes— escrita como lo que es, una línea
   de texto. Van entre el titular y la tarifa, que es su orden de lectura.

   `.dl-precios__intro` es el hueco que se le añadió al componente del kit. Se viste
   desde aquí y no desde la hoja del kit porque esa se sirve minificada; si algún día
   lo usa otra página, hay que mover estas dos reglas allí. */

/* El titular ya trae su propio margen inferior; aquí solo se recorta a la mitad, que
   esta línea es su subtítulo y no un párrafo aparte. */
.dl-precios__intro {
    margin: calc(clamp(16px, 2.4vh, 28px) * -.5) 0 clamp(28px, 4vh, 50px);
    text-align: center;
}

.mbp-frec {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: baseline;
    gap: 6px 0;
    list-style: none;
    margin: 0;
    padding: 0;
}

.mbp-frec li {
    font-family: var(--f-m);
    font-size: 11px;
    line-height: 1.4;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--mut2);
}

/* El separador lo pone el CSS, no el texto: así no se añade ni se quita una palabra
   de lo que escribió el cliente.
   Va como `::after` del anterior y no como `::before` del siguiente para que, al
   partirse la línea en un móvil, el punto se quede al final del renglón y no abriendo
   el de abajo. */
.mbp-frec li:not(:last-child)::after {
    content: "·";
    color: var(--champ-deep);
    margin: 0 12px;
}

/* ---- Pastillas (ya no se usan en ninguna página) ---------------------------- */

.mbp-pills {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    list-style: none;
    margin: 0 0 clamp(32px, 5vh, 56px);
    padding: 0;
}

/* En móvil, cuatro pastillas apiladas ocupaban cuatro renglones y parecían una lista
   floja. El kit ya resolvió esto con los filtros de tratamientos: una sola fila que se
   desliza y sangra hasta el borde, para que se vea que hay más a la derecha. */
@media (max-width: 767px) {
    .mbp-pills {
        flex-wrap: nowrap;
        justify-content: flex-start;
        overflow-x: auto;
        overscroll-behavior-x: contain;
        scrollbar-width: none;
        margin-inline: calc(var(--gut) * -1);
        padding-inline: var(--gut);
    }

    .mbp-pills::-webkit-scrollbar { display: none; }

    .mbp-pills .dl-pill { flex: 0 0 auto; font-size: 10px; padding: 9px 13px; }
}

/* ---- Rejilla de tarjetas ---------------------------------------------------- */

.mbp-rej {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
    list-style: none;
    margin: clamp(28px, 4vh, 50px) 0 0;
    padding: 0;
}

/* Las tarjetas cortas —nombre, precio y el enlace— caben de dos en dos en un móvil,
   igual que las de tratamientos. A una por fila, cuatro opciones son cuatro pantallas
   de desplazamiento para leer tres datos. */
.mbp-rej--corta { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }

.mbp-rej--corta .mbp-card { padding: 18px 16px; }

/* En la tarjeta corta hay tres datos y mucho aire entre ellos: el rótulo y su filete
   no necesitan el mismo respiro que cuando debajo viene un párrafo. */
.mbp-rej--corta .mbp-card__n { margin-bottom: 12px; padding-bottom: 10px; }
.mbp-rej--corta .mbp-card__bt { padding-top: 14px; }

@media (min-width: 680px) {
    .mbp-rej { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
    .mbp-rej--corta .mbp-card { padding: clamp(22px, 2.6vw, 34px); }
}

/* A partir de aquí manda cuántas tarjetas haya: con una sola, estirarla a todo el
   ancho la deja ridícula, y con cinco una fila de cinco no se compara. */
@media (min-width: 1000px) {
    .mbp-rej { grid-template-columns: repeat(min(var(--mbp-cols, 3), 3), minmax(0, 1fr)); gap: 20px; }
}

/* Una tarjeta sola se queda del ancho del panel de membresía de las fichas (720). */
.mbp-rej:has(> :only-child) { max-width: 460px; margin-inline: auto; }

/* ---- La tarjeta: los materiales de .dl-memb -------------------------------- */

.mbp-card {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: clamp(22px, 2.6vw, 34px);
    border-radius: 18px;
    background: var(--vidrio);
    border: 1px solid rgba(243, 244, 245, .14);
    box-shadow: var(--vidrio-relieve);
    -webkit-backdrop-filter: var(--vidrio-velo);
    backdrop-filter: var(--vidrio-velo);
}

/* El destacado lo marca el cliente con el nombre del plan («IDEAL»), no yo. Un filo
   champán, que es como el sistema señala sin gritar. */
.mbp-card--top {
    border-color: rgba(216, 185, 142, .42);
    box-shadow: var(--vidrio-relieve), 0 0 0 1px rgba(216, 185, 142, .14);
}

.mbp-card__cinta {
    position: absolute;
    top: 0;
    left: clamp(22px, 2.6vw, 34px);
    transform: translateY(-50%);
    padding: 6px 12px;
    border: 1px solid rgba(216, 185, 142, .42);
    border-radius: 999px;
    background: var(--g2);
    color: var(--champ);
}

/* El rótulo viene de .dl-dl__h; aquí solo se le quita el margen de más, porque dentro
   de la tarjeta el aire lo reparte el flex. */
.mbp-card__n { margin-bottom: clamp(14px, 1.8vh, 18px); }

/* La cinta del destacado va sobre el filo, fuera del relleno, así que no hace falta
   bajarle el rótulo: si se baja, los tres filetes dejan de alinearse entre sí y es
   justo lo primero que se compara al mirar las tarjetas de lado. */

.mbp-card__p {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 10px;
    margin: 0;
}

/* El precio anterior, en su propia línea y con el tamaño que le da el sistema en
   .dl-memb__antes. Si se deja fluir, en una tarjeta cabe al lado del precio
   («80€ 54,99€/mes») y en otra no («320€ total»), y las tarjetas dejan de alinearse
   justo donde se comparan. */
.mbp-card__antes {
    flex-basis: 100%;
    color: var(--t4);
    font-size: 11px;
    text-decoration-thickness: 1px;
}

/* En Manrope 600, como `.dl-memb__ahora`, no en la display: el sistema guarda la
   display para los titulares y pinta TODOS los importes en Manrope —la tarifa de las
   fichas, el precio de las tarjetas de tratamiento, la membresía—. Aquí solo sube de
   tamaño, porque en una tarjeta el precio es lo que se mira primero. */
.mbp-card__ahora {
    font-family: var(--f-b);
    font-weight: 600;
    font-size: clamp(23px, 2.1vw, 29px);
    line-height: 1.1;
    letter-spacing: -.01em;
    color: var(--w);
}

.mbp-card__ses {
    margin: 7px 0 0;
    color: var(--champ);
}

.mbp-card__d {
    margin: clamp(14px, 1.8vh, 18px) 0 0;
    font-family: var(--f-b);
    font-size: 13.5px;
    font-weight: 300;
    line-height: 1.55;
    color: var(--mut2);
}

/* El botón, clavado abajo: con descripciones de distinto largo, si no, cada tarjeta
   lo pone a una altura y la fila se descuadra. */
.mbp-card__bt {
    margin-top: auto;
    padding-top: clamp(18px, 2.4vh, 26px);
    align-self: flex-start;
}

.mbp-nota {
    max-width: 62ch;
    margin: clamp(28px, 4vh, 44px) auto 0;
    color: var(--mut);
    font-size: 14px;
    text-align: center;
}

/* Navegadores sin :has() dejan la tarjeta única a todo lo ancho; es feo, no roto. */
@supports not selector(:has(*)) {
    .mbp-rej { max-width: 980px; margin-inline: auto; }
}

/* ---- «Qué incluye», pegado a los tres beneficios -----------------------------

   El recuadro de cristal del kit trae un margen de arriba pensado para cuando cuelga
   de un texto que va encima. Aquí es lo primero de la sección, así que ese margen se
   suma al relleno de la propia sección y abre un hueco que no pinta nada. */
.dl-sec--incluye .dl-ben:first-child { margin-top: 0; }

/* Tres columnas exactas, no las que quepan. La rejilla del recuadro es `auto-fit` con
   un mínimo de 260 px: en pantalla ancha deja sitio para cuatro, colapsa la cuarta y
   reparte el sobrante, que es como la lista acababa ocupando 980 px dentro de una caja
   de 1285 y volvía a quedar hueco a la derecha. Con tres datos fijos, se dicen tres. */
@media (min-width: 900px) {
    .dl-sec--incluye .dl-ben__lista {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 11px clamp(14px, 1.6vw, 22px);   /* el mismo aire entre columnas que los paneles */
    }
}

/* Y el recuadro, del ancho exacto de los tres paneles que lleva debajo. Sin esto se
   come los 1285 px de la columna y sobresale 50 px por cada lado de las tarjetas: dos
   cosas de la misma sección empezando en sitios distintos. */
.dl-sec--incluye .dl-ben { max-width: 1180px; margin-inline: auto; }

/* ---- Las tarjetas altas, apiladas ------------------------------------------

   De lado, 16-20 px entre tarjetas separan de sobra: el ojo ya las lee como tres
   columnas. Apiladas no: dos paneles de cristal de 277 px de alto a 16 px se leen
   como un solo bloque con rayas.

   Y encima la cinta del destacado sobresale 14 px por arriba, así que de esos 16
   solo quedaban 2 px libres sobre ella y parecía pegada a la tarjeta de antes.
   El margen de la destacada es justo lo que mide la cinta, para que le quede el
   mismo aire que hay entre las otras dos.

   `:not(.mbp-rej--corta)` no es por capricho: las tarjetas cortas van de dos en dos
   en móvil con su gap de 12, y a igual especificidad mandaría esta regla por estar
   escrita después. */
@media (max-width: 679px) {
    .mbp-rej:not(.mbp-rej--corta) { gap: 28px; }
    .mbp-rej:not(.mbp-rej--corta) .mbp-card--top { margin-top: 14px; }
}