/* =====================================================================
   Sección de promoción de packs dentro de Suscripción — hoja global.

   POR QUÉ ESTÁ ACÁ Y NO EN PacksPromo.razor.css

   El CSS aislado del proyecto cliente no se sirve. Medido sobre la
   pantalla levantada: el elemento lleva su atributo de aislamiento
   —b-tqxg9x496k— pero su `max-width: 1328px` resuelve a `none`, y el
   manifiesto de assets del host publica dos rutas `.styles.css`, las dos
   del host. El bundle del cliente existe (730 KB en su obj) y no tiene
   ruta que lo sirva.

   O sea que todo lo que se escribe en un `.razor.css` del cliente no
   llega al navegador. Carolina lo reportó tres veces seguidas sin que
   nosotros entendiéramos por qué: cada arreglo iba a una hoja muerta.
   El caso más claro es el espacio antes de la banda gris, que le dijimos
   hecho el 15/10 y nunca se vio.

   Esto es un parche acotado a esta pantalla, igual que pack-card.css,
   ds-carousel-ssr.css y mis-experiencias-ssr.css, que probablemente
   nacieron del mismo problema. La causa de fondo —servir el bundle del
   cliente— mueve 730 KB de estilos en toda la aplicación y va aparte.

   Acá va solo lo que es de la sección: la banda gris, el encabezado y la
   fila. Las cards son las de /packs y viven en pack-card.css.

   Todos los selectores empiezan con .packs-promo, que no se usa en
   ninguna otra pantalla: verificado sobre el repo entero.
   ===================================================================== */

.packs-promo {
    display: flex;
    flex-direction: column;
    /* 32, que es lo que separa el encabezado de la fila en el nodo 4289-32593: la sección mide
       787 y son 64 + 67 de encabezado + 32 + 560 de cards + 64. Estaba en 24. */
    gap: 32px;
    /* 64 arriba y abajo, que es el espaciado de la sección en Figma (nodo 4289-32593). */
    padding-block: 64px;
    /* El aire entre el historial y donde empieza el gris. Lo pidió Carolina el 15/10
       —«agrega un espacio entre el historial y el fondo gris»— y el mock lo tiene: en el
       frame Desktop 3735-74533 la banda (Frame 21) no arranca pegada a la card de arriba.
       Medido sobre ese mock da 55-57px de diseño; 56 es el redondo.

       Va como margen y no como padding porque el padding ya está pintado de gris: lo que
       falta es espacio del color de la página, antes de que empiece la banda. */
    margin-block-start: 56px;
    /* Sangre completa: en Figma la sección va sobre Gray/color-neutral-100 de borde a borde —es
       el fondo del frame que la contiene, 1920 de ancho (4289-32593), no el de la página—, y eso
       es lo que hace que la franja de 33px de cada card se lea como banda.

       El fondo va en el propio contenedor, estirado con margen negativo, y NO en un
       pseudo-elemento con z-index negativo: así lo escribí primero y no pintaba nada, porque un
       z-index -1 lo manda detrás del fondo del body, que lo tapa. El tope de 1328 se muda a los
       hijos para que el contenido siga donde estaba.

       calc(50vw - 50%) usa 50vw, que incluye la barra de scroll: sobresale ~7px por lado y por
       eso app.css le pone overflow-x: clip al body de esta pantalla. */
    margin-inline: calc(50% - 50vw);
    padding-inline: calc(50vw - 50%);
    background: var(--color-neutral-100, #E9E9E9);
}

/* El tope del diseño va en cada hijo y no en una regla compartida arriba: PacksPromoAnchoTests
   lee este archivo y toma el primer bloque cuyo selector coincide, así que una regla conjunta
   puesta antes le tapaba el bloque real de .packs-promo-cards. */
.packs-promo-header {
    text-align: center;
    max-width: 1328px;
    margin-inline: auto;
    width: 100%;
}

.packs-promo-title {
    font-family: 'Poppins', sans-serif;
    /* 24 y no 22: el nodo del título (4289-32596) lo declara en Poppins 24. El interlineado va
       en píxeles y no en proporción porque lo que fija el nodo es el alto del bloque, 31. */
    font-size: 24px;
    line-height: 31px;
    font-weight: 500;
    color: var(--gray-color-neutral-800, #262626);
    margin: 0;
}

.packs-promo-title strong {
    font-weight: 700;
}

.packs-promo-subtitle {
    font-family: 'Nunito Sans', sans-serif;
    font-size: 14px;
    /* Como el título: el nodo del subtítulo (4289-32597) fija el bloque en 24 de alto. */
    line-height: 24px;
    color: var(--gray-color-neutral-700, #404040);
    /* 12 entre título y subtítulo, que es la separación interna del encabezado en el nodo
       (4289-32595). Estaba en 4. */
    margin: 12px 0 0;
}

/* Flex y no grid: en Figma la fila "packs" abraza su contenido y se centra, no reparte un
   ancho fijo. Se ve comparando los dos estados que mando Carolina: con cuatro packs mide
   1328 (nodo 3735-75625) y con tres, cuando la marca ya tiene uno, mide 992 (nodo
   4289-32566), que es 3 x 320 + 2 x 16. Con repeat(4, 1fr) las tres quedaban pegadas a la
   izquierda y con un hueco de 320 a la derecha (SCRUM-213). */
.packs-promo-cards {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 16px;
    align-items: flex-start;
    /* El tope del diseño vive acá desde que la sección pasó a ser de borde a borde: antes lo
       heredaba de .packs-promo, que ahora ocupa todo el ancho para pintar el fondo gris.
       1328px es el ancho del contenedor "packs" en Figma (nodo 3735-75625), y son exactamente
       4 x 320 + 3 x 16, así que las cuatro cards entran en una fila sin encogerse. */
    max-width: 1328px;
    margin-inline: auto;
    width: 100%;
}

/* La promo no le cambia nada a la card: la usa como está en pack-card.css.

   Acá hubo un min-height de 54 sobre el título de la card, puesto con el argumento de que
   «Pack Vendedores Motivados» y «Pack Marketing y Fidelización» no entraban en una línea.
   Medido en la aplicación, los cuatro títulos miden 26 de alto natural: entran todos. El
   forzado agregaba 28px muertos por card y salían del hueco entre la lista y el precio, que
   daba 21 contra los ~25 del nodo. */