/* Club BPS — parte del set custom-club-* (CSS global del sitio). Cargado como archivo fisico via index.php del template (registerAndUseStyle + ?v=filemtime). Partido desde el antiguo custom-club.css monolitico; un archivo por BLOQUE. */ /* ============================================================ BLOQUE 7 — NOTICIAS HOME: Magallanes / Deporte / Promociones 3 secciones nuevas, mismo addon "Articles" que Área Social (BLOQUE 4) pero con layouts distintos (creative / basic / essential respectivamente) — el DOM de columnas de cada uno es distinto al de "modern" (Área Social), así que no se reusan los selectores .sppb-col-md-5/-7 de BLOQUE 4. ============================================================ */ /* Carcasa de card — misma "receta" visual que BLOQUE 4, compartida por las 3 secciones nuevas */ #noticias-home-magallanes .sppb-addon-article, #noticias-home-deporte .sppb-addon-article, #noticias-home-promociones .sppb-addon-article { background: var(--blanco); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm); margin-bottom: 24px; transition: box-shadow .25s ease, transform .25s ease; } #noticias-home-magallanes .sppb-addon-article:hover, #noticias-home-deporte .sppb-addon-article:hover, #noticias-home-promociones .sppb-addon-article:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); } #noticias-home-magallanes .sppb-article-image-wrap, #noticias-home-deporte .sppb-article-image-wrap, #noticias-home-promociones .sppb-article-image-wrap { overflow: hidden; } #noticias-home-magallanes .sppb-article-image-wrap img, #noticias-home-magallanes .sppb-article-image-wrap video, #noticias-home-deporte .sppb-article-image-wrap img, #noticias-home-deporte .sppb-article-image-wrap video, #noticias-home-promociones .sppb-article-image-wrap img, #noticias-home-promociones .sppb-article-image-wrap video { width: 100%; height: 260px; object-fit: cover; display: block; transition: transform .5s ease; } #noticias-home-magallanes .sppb-addon-article:hover .sppb-article-image-wrap img, #noticias-home-magallanes .sppb-addon-article:hover .sppb-article-image-wrap video, #noticias-home-deporte .sppb-addon-article:hover .sppb-article-image-wrap img, #noticias-home-deporte .sppb-addon-article:hover .sppb-article-image-wrap video, #noticias-home-promociones .sppb-addon-article:hover .sppb-article-image-wrap img, #noticias-home-promociones .sppb-addon-article:hover .sppb-article-image-wrap video { transform: scale(1.05); } #noticias-home-magallanes .sppb-article-details, #noticias-home-deporte .sppb-article-details, #noticias-home-promociones .sppb-article-details { padding: 20px 22px 22px; } #noticias-home-magallanes .sppb-meta-date, #noticias-home-deporte .sppb-meta-date, #noticias-home-promociones .sppb-meta-date { display: block; margin-bottom: 8px; font-size: 12px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase; color: var(--gris-500); } #noticias-home-magallanes .sppb-article-title, #noticias-home-deporte .sppb-article-title, #noticias-home-promociones .sppb-article-title { margin: 0 0 10px; } #noticias-home-magallanes .sppb-article-title a, #noticias-home-deporte .sppb-article-title a, #noticias-home-promociones .sppb-article-title a { font-family: 'Roboto', sans-serif; font-size: 20px; font-weight: 700; line-height: 1.3; color: var(--azul-900); transition: color .2s ease; } #noticias-home-magallanes .sppb-addon-article:hover .sppb-article-title a, #noticias-home-deporte .sppb-addon-article:hover .sppb-article-title a, #noticias-home-promociones .sppb-addon-article:hover .sppb-article-title a { color: var(--azul-600); } #noticias-home-magallanes .sppb-article-introtext p, #noticias-home-deporte .sppb-article-introtext p, #noticias-home-promociones .sppb-article-introtext p { margin: 0; font-size: 15px; line-height: 1.6; color: var(--gris-600); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } #noticias-home-magallanes a.sppb-btn, #noticias-home-deporte a.sppb-btn, #noticias-home-promociones a.sppb-btn { display: inline-flex; align-items: center; gap: 8px; margin-top: 8px; padding: 12px 26px; font-family: 'Roboto', sans-serif; font-size: 14px; font-weight: 700; color: var(--blanco); background: var(--azul-900); border-radius: var(--radius-md); text-transform: uppercase; letter-spacing: .3px; transition: background-color .2s ease, transform .15s ease; } #noticias-home-magallanes a.sppb-btn:hover, #noticias-home-deporte a.sppb-btn:hover, #noticias-home-promociones a.sppb-btn:hover { background: var(--azul-600); transform: translateY(-2px); } #noticias-home-magallanes a.sppb-btn::after, #noticias-home-deporte a.sppb-btn::after, #noticias-home-promociones a.sppb-btn::after { content: "\203A"; font-size: 18px; line-height: 0; } @media (max-width: 991.98px) { #noticias-home-magallanes .sppb-article-image-wrap img, #noticias-home-magallanes .sppb-article-image-wrap video, #noticias-home-deporte .sppb-article-image-wrap img, #noticias-home-deporte .sppb-article-image-wrap video, #noticias-home-promociones .sppb-article-image-wrap img, #noticias-home-promociones .sppb-article-image-wrap video { height: 220px; } } /* --- Proyecto de Magallanes (layout "creative"): 2 leading 8/4 + grilla de 3 columnas para el resto (5 noticias en total: las 2 más recientes destacadas arriba, las otras 3 en fila abajo). El bundle de SPPB trae varias reglas ".sppb-row" en conflicto entre sí (una de ellas termina pisando "display:flex" con "display:table"), así que sin este refuerzo escopeado el grid de columnas no arma — todo cae apilado a ancho completo. --- */ #noticias-home-magallanes .sppb-addon-content .sppb-row { display: flex; flex-wrap: wrap; align-items: flex-start; row-gap: 24px; } /* Los hijos directos de .sppb-row son wrappers con clase vacía "sppb-col-md-" (sin número) — uno envuelve el leading 8/4, el otro la grilla de 3 columnas. Las clases reales (.sppb-col-md-8, .sppb-col-sm-6.sppb-col-md-4, etc.) están un nivel más adentro, así que cada wrapper necesita ser su propio contenedor flex a 100% de ancho para que esas clases hijas puedan repartirse en fila. row-gap acá adentro es lo que separa las cards del wrapper cuando quedan apiladas en 1 columna (mobile/tablet angosto) — sin esto, el height:100% de más abajo hace que el margin-bottom de la card no llegue a empujar a la siguiente y quedan pegadas. */ #noticias-home-magallanes .sppb-addon-content .sppb-row > [class^="sppb-col-md-"] { flex: 0 0 100%; max-width: 100%; display: flex; flex-wrap: wrap; row-gap: 24px; } #noticias-home-magallanes .sppb-addon-content [class*="sppb-col-"] { padding-left: 12px; padding-right: 12px; } /* El botón "Ver todos" es hermano directo de .sppb-row (no un hijo de columna) — al flexear la fila cae solo en su propia línea porque los 2 wrappers de columna anteriores ya ocupan flex:0 0 100% cada uno; acá sólo hace falta el margen (la alineación a la derecha vía margin-left:auto ya está en la regla compartida más arriba). */ #noticias-home-magallanes .sppb-addon-content .sppb-row > a.sppb-btn { margin-top: 8px; } /* Altura pareja: los wrappers de columna (leading 8/4 y grilla de 3) ya estiran la columna a la misma altura por default de flexbox (align-items:stretch); falta que la card en sí ocupe ese alto en vez de achicarse a su contenido. */ #noticias-home-magallanes .sppb-main-leading-wrap .sppb-addon-article, #noticias-home-magallanes .sppb-sub-leading-wrap .sppb-addon-article, #noticias-home-magallanes [class*="sppb-col-sm-6"] .sppb-addon-article { height: 100%; display: flex; flex-direction: column; } #noticias-home-magallanes .sppb-main-leading-wrap .sppb-article-image-wrap img, #noticias-home-magallanes .sppb-main-leading-wrap .sppb-article-image-wrap video, #noticias-home-magallanes .sppb-sub-leading-wrap .sppb-article-image-wrap img, #noticias-home-magallanes .sppb-sub-leading-wrap .sppb-article-image-wrap video { height: 340px; } @media (max-width: 767.98px) { #noticias-home-magallanes .sppb-main-leading-wrap .sppb-article-image-wrap img, #noticias-home-magallanes .sppb-main-leading-wrap .sppb-article-image-wrap video, #noticias-home-magallanes .sppb-sub-leading-wrap .sppb-article-image-wrap img, #noticias-home-magallanes .sppb-sub-leading-wrap .sppb-article-image-wrap video { height: 220px; } } /* --- Área Deporte (layout "basic"): grilla simple de 3 columnas en una sola fila, sin leading — a diferencia de "creative"/"essential" acá las columnas son clases reales de Bootstrap (.sppb-col-md-4) hijas directas de .sppb-row, así que no hace falta el refuerzo de "display:flex" (ya lo trae el bundle de SPPB sin conflicto para este layout). --- */ #noticias-home-deporte .sppb-addon-content .sppb-row { margin-left: -12px; margin-right: -12px; row-gap: 24px; } #noticias-home-deporte .sppb-addon-content [class*="sppb-col-md-"] { padding-left: 12px; padding-right: 12px; } /* Altura pareja: .sppb-row ya estira las columnas por default de flexbox (align-items:stretch); falta que la card en sí ocupe ese alto en vez de achicarse a su contenido — ver skill flexbox-stretch-eats-margin-bottom: por eso el espaciado entre filas va por row-gap arriba y no por el margin-bottom de la card. El layout "basic" del addon mete un
sin clase entre la columna numerada y la card (mismo bloque de site.php que abre ese wrapper para "creative"/"essential"; para "basic" no está excluido y también cae ahí) — sin pasarle el 100% de alto a ESE wrapper también, la card sólo hereda el auto-height de ese div intermedio y termina achicada a su propio contenido en vez del alto de la columna ya pareja. Recién visible con contenido real de distinto largo (con el contenido demo, de largo parejo, coincidía por casualidad). */ #noticias-home-deporte .sppb-addon-content [class*="sppb-col-md-"] > div { height: 100%; } #noticias-home-deporte .sppb-addon-content [class*="sppb-col-md-"] .sppb-addon-article { height: 100%; display: flex; flex-direction: column; } /* --- Promociones (layout "essential"): 2 leading a 6/6 + resto full-width. Mismo refuerzo de "display:flex" que Área Deporte. --- */ #noticias-home-promociones .sppb-addon-content .sppb-row { display: flex; flex-wrap: wrap; align-items: flex-start; row-gap: 24px; } #noticias-home-promociones .sppb-addon-content .sppb-row > [class^="sppb-col-md-"] { flex: 0 0 100%; max-width: 100%; display: flex; flex-wrap: wrap; row-gap: 24px; } #noticias-home-promociones .sppb-addon-content [class*="sppb-col-"] { padding-left: 12px; padding-right: 12px; } #noticias-home-promociones .sppb-addon-content .sppb-row > a.sppb-btn { margin-top: 8px; } #noticias-home-promociones .sppb-main-leading-wrap .sppb-addon-article, #noticias-home-promociones .sppb-sub-leading-wrap .sppb-addon-article { height: 100%; display: flex; flex-direction: column; } #noticias-home-promociones .sppb-main-leading-wrap .sppb-article-image-wrap img, #noticias-home-promociones .sppb-main-leading-wrap .sppb-article-image-wrap video, #noticias-home-promociones .sppb-sub-leading-wrap .sppb-article-image-wrap img, #noticias-home-promociones .sppb-sub-leading-wrap .sppb-article-image-wrap video { height: 300px; } @media (max-width: 767.98px) { #noticias-home-promociones .sppb-main-leading-wrap .sppb-article-image-wrap img, #noticias-home-promociones .sppb-main-leading-wrap .sppb-article-image-wrap video, #noticias-home-promociones .sppb-sub-leading-wrap .sppb-article-image-wrap img, #noticias-home-promociones .sppb-sub-leading-wrap .sppb-article-image-wrap video { height: 220px; } }