/* Generado desde views/layout/news-styles.php (2026-09-29): antes iba en línea en cada página (~200 KB por HTML). */
/* ===== VÍA [MEDIO] (Plan 360 Bloque 14 — 2026-05-21) =====
Atribución visual prominente al medio fuente con favicon. Se muestra
antes de la encuesta para que el lector vea inmediatamente de dónde viene. */
.news-via {
display: inline-flex; align-items: center; gap: 8px;
margin: 1rem 0;
padding: 6px 12px;
background: rgba(0,212,255,0.06);
border: 1px solid rgba(0,212,255,0.15);
border-radius: 999px;
font-size: 0.82rem;
color: #aaa;
}
.news-via-favicon { width: 18px; height: 18px; border-radius: 3px; }
.news-via-text strong, .news-via-text a { color: var(--cyan, #00d4ff); text-decoration: none; font-weight: 600; }
.news-via-text a:hover { text-decoration: underline; }
/* ===== AI DISCLOSURE (Plan 360 Bloque 8 — 2026-05-21) =====
Cumple Google E-E-A-T Helpful Content Update: transparencia sobre uso de IA
+ atribución real al supervisor humano. Mejor SEO que ocultar uso de IA. */
.news-ai-disclosure {
margin: 2rem 0 1rem;
padding: 1rem 1.25rem;
background: rgba(255,255,255,0.025);
border: 1px solid rgba(255,255,255,0.05);
border-left: 3px solid rgba(0,212,255,0.4);
border-radius: 8px;
font-size: 0.85rem;
color: #999;
line-height: 1.5;
}
.news-ai-disclosure-inner { display: flex; gap: 0.8rem; align-items: flex-start; }
.news-ai-disclosure-icon { font-size: 1.2rem; color: var(--cyan, #00d4ff); flex-shrink: 0; line-height: 1; padding-top: 1px; }
.news-ai-disclosure p { margin: 0; }
.news-ai-disclosure strong { color: #ccc; font-weight: 600; }
.news-ai-disclosure a { color: var(--cyan, #00d4ff); text-decoration: none; }
.news-ai-disclosure a:hover { text-decoration: underline; }
/* ===== GAME CARD (Plan 360 Bloque 6 — 2026-05-21) ===== */
/* Tarjeta de datos inyectada por el servidor en noticias cuyas etiquetas
coinciden con un juego de la BD. Diferenciador: nadie más en el nicho lo hace. */
.gp-game-card {
background: linear-gradient(160deg, rgba(0,30,40,0.45), rgba(10,12,16,0.85));
border: 1px solid rgba(0,212,255,0.22);
border-radius: 14px;
padding: 16px 20px;
margin: 1.5rem 0;
box-shadow: 0 8px 24px rgba(0,0,0,0.4), 0 0 18px rgba(0,212,255,0.08);
position: relative;
overflow: hidden;
}
.gp-game-card::before {
content: '';
position: absolute;
top: -40px; right: -40px;
width: 140px; height: 140px;
background: radial-gradient(circle, rgba(0,212,255,0.18), transparent 60%);
pointer-events: none;
}
.gp-card-head {
display: flex; align-items: center; justify-content: space-between; gap: 1rem;
margin-bottom: 0.75rem; position: relative; z-index: 1;
}
.gp-card-head h4 {
margin: 0; font-family: 'Bebas Neue', sans-serif; font-size: 1.4rem; letter-spacing: 1px; color: #f0f0f0;
}
.gp-card-head h4 a { color: inherit; text-decoration: none; }
.gp-card-head h4 a:hover { color: var(--cyan, #00d4ff); }
.gp-card-eyebrow {
font-family: 'Bebas Neue', sans-serif; font-size: 10px; letter-spacing: 2px;
color: var(--cyan, #00d4ff); background: rgba(0,212,255,0.12);
border: 1px solid rgba(0,212,255,0.3); padding: 3px 8px; border-radius: 4px; font-weight: 700;
}
.gp-card-data { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; position: relative; z-index: 1; }
.gp-card-data li { font-size: 0.95rem; color: #d8d8d8; padding: 4px 0; }
.gp-card-data li strong { color: #f8f8f8; font-weight: 700; }
.gp-card-gp-si strong { color: #00ff88; }
.gp-card-gp-anunciado strong { color: #ffb74d; }
.gp-card-gp-no strong { color: #888; }
.gp-card-oferta a { color: var(--cyan, #00d4ff); font-weight: 700; text-decoration: none; }
.gp-card-oferta a:hover { text-decoration: underline; }
.gp-card-desc { background: #00ff88; color: #002818; font-size: 11px; font-weight: 800; padding: 2px 6px; border-radius: 4px; margin-left: 6px; }
.gp-card-oferta-vacia { color: #888; font-size: 0.85rem; }
@media (max-width: 600px) {
.gp-game-card { padding: 12px 14px; }
.gp-card-head h4 { font-size: 1.15rem; }
}
/* ===== NOTICIAS — SISTEMA PREMIUM ===== */
/* Variables locales de diseño */
:root {
--news-glass-bg: rgba(22, 24, 28, 0.7);
--news-glass-border: rgba(255, 255, 255, 0.08);
--news-glass-blur: blur(16px);
--news-glow-cyan: rgba(0, 212, 255, 0.25);
--news-glow-green: rgba(16, 124, 16, 0.25);
}
/* Cabecera Principal */
.news-page-header {
display: flex; align-items: flex-end; justify-content: space-between;
gap: var(--space-4); margin-bottom: var(--space-4); flex-wrap: wrap;
padding: var(--space-6) 0; position: relative;
}
.news-page-header::before {
content: ''; position: absolute; top: -20%; left: -10%; width: 50%; height: 140%;
background: radial-gradient(circle at center, rgba(0, 212, 255, 0.06) 0%, transparent 70%);
pointer-events: none; z-index: 0;
}
.news-page-header > * { position: relative; z-index: 1; }
/* 2026-05-10 (feedback Sergi "se ve cortado"): antes era una línea cyan de
100px de ancho que se cortaba abrupto. Ahora full-width con gradient que se
difumina por los lados — natural, sin sensación de corte. */
.news-page-header::after {
content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 1px;
background: linear-gradient(90deg,
transparent 0%,
var(--cyan-accent) 15%,
var(--cyan-accent) 30%,
rgba(0,212,255,0.30) 60%,
transparent 100%);
box-shadow: 0 0 8px rgba(0,212,255,0.4);
}
.news-page-context {
font-size: 11px; font-weight: 800; color: var(--cyan-accent);
letter-spacing: 3px; text-transform: uppercase; margin-bottom: 8px;
display: flex; align-items: center; gap: 10px;
opacity: 0.8;
}
.news-page-context::before {
content: ''; width: 20px; height: 1px; background: var(--cyan-accent);
}
.news-page-title {
font-family: 'Bebas Neue', sans-serif; font-size: 64px; letter-spacing: 3px;
line-height: 0.9; color: #fff; text-shadow: 0 0 30px rgba(255,255,255,0.1);
margin-bottom: 4px;
}
.news-page-title span {
color: transparent;
background: linear-gradient(90deg, var(--cyan-accent) 0%, #00ffcc 100%);
-webkit-background-clip: text; background-clip: text;
filter: drop-shadow(0 0 15px rgba(0,212,255,0.4));
}
.news-page-sub {
font-family: system-ui, -apple-system, sans-serif;
font-size: 14px; color: rgba(255,255,255,0.5); margin-top: 10px;
font-weight: 500; letter-spacing: 0.5px;
}
.news-page-sub strong { color: var(--cyan-accent); }
/* Filtros (Pills) */
/* 2026-05-09 (Operación BOOM A3): tabs SOCIALES (no taxonómicas).
3 tabs: Reciente / Trending / Debate. Las categorías ?cat= siguen
accesibles vía URL/sitemap pero no son la UI dominante. */
.news-tabs {
display: flex; gap: 6px; margin-bottom: var(--space-5);
padding: 4px 0 12px;
overflow-x: auto; -webkit-overflow-scrolling: touch;
scrollbar-width: none;
align-items: center;
}
.news-tabs::-webkit-scrollbar { display: none; }
.news-tab {
display: inline-flex; align-items: center; gap: 7px;
padding: 10px 18px;
background: rgba(255,255,255,0.03);
border: 1px solid rgba(255,255,255,0.06);
color: rgba(255,255,255,0.6);
font-size: 13px; font-weight: 700;
text-decoration: none;
border-radius: 999px;
transition: all 0.25s ease;
white-space: nowrap;
}
.news-tab-icon {
width: 14px; height: 14px;
flex-shrink: 0;
color: currentColor;
}
.news-tab.active .news-tab-icon { color: var(--cyan-accent, #00d4ff); }
.news-tab:hover {
background: rgba(0,212,255,0.06);
border-color: rgba(0,212,255,0.30);
color: #fff;
}
.news-tab.active {
background: linear-gradient(135deg, rgba(0,212,255,0.18), rgba(0,212,255,0.08));
border-color: rgba(0,212,255,0.55);
color: #fff;
box-shadow: 0 4px 14px rgba(0,212,255,0.18);
}
.news-tab-cat-badge {
margin-left: auto;
font-size: 11px;
color: rgba(255,255,255,0.55);
}
.news-tab-cat-badge a {
color: var(--cyan-accent, #00d4ff);
text-decoration: none;
padding: 4px 10px;
background: rgba(0,212,255,0.08);
border-radius: 999px;
border: 1px dashed rgba(0,212,255,0.30);
}
/* Labels condicionales: full en desktop, short en mobile (entran 3 sin scroll) */
.news-tab-label-short { display: none; }
@media (max-width: 600px) {
.news-tab { padding: 9px 14px; font-size: 12.5px; gap: 6px; }
.news-tab-label-full { display: none; }
.news-tab-label-short { display: inline; }
.news-tabs { gap: 5px; }
}
/* HERO */
/* 2026-05-08 (hero v8 — fix dimensiones):
- Desktop ≥960px: grid 1.4fr / 1fr (más ancho a secundarias). Las
secundarias NO se estiran al alto del hero (altura natural). Si el
hero mide más, queda hueco visual aceptable abajo de las secundarias.
- Tablet 700-959px: secundarias en fila 3-col bajo el hero.
- Mobile <700px: stack vertical. */
.news-hero-block {
display: flex; flex-direction: column; gap: var(--space-4);
margin-bottom: var(--space-5);
}
.news-hero-main { display: flex; min-width: 0; }
.news-hero-main > .news-card { width: 100%; }
.news-hero-secundarias {
display: grid; grid-template-columns: 1fr;
gap: var(--space-3);
min-width: 0;
align-content: start;
}
@media (min-width: 700px) and (max-width: 959px) {
.news-hero-secundarias { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 960px) {
.news-hero-block {
display: grid;
grid-template-columns: minmax(0, 1.4fr) minmax(280px, 1fr);
gap: var(--space-4);
align-items: start;
}
.news-hero-secundarias {
grid-template-columns: 1fr;
gap: var(--space-3);
}
}
/* LAYOUT GRID (Main + Sidebar) */
.news-layout {
display: grid; grid-template-columns: 1fr; gap: var(--space-6);
max-width: 1300px; margin: 0 auto; padding: 0 var(--space-4);
}
@media (min-width: 1100px) {
.news-layout { grid-template-columns: minmax(0,1fr) 340px; align-items: start; }
.news-sidebar-sticky-wrapper {
position: sticky;
top: 88px;
display: flex; flex-direction: column; gap: var(--space-5);
z-index: 10;
}
}
.news-main { min-width: 0; }
.news-sidebar { display: flex; flex-direction: column; gap: var(--space-6); position: relative; }
@media (max-width: 1099px) {
.news-sidebar { margin-top: var(--space-8); }
}
/* GRID — auto-fit (no auto-fill): cuando la última fila tiene 1-2 cards orphan,
se estiran para llenar el ancho disponible en lugar de dejar hueco a la
derecha. Mantiene minmax(280px, 1fr) para no romper en mobile. */
.news-grid {
display: grid; gap: var(--space-5);
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
/* ════════════════════════════════════════════════════════════════════════
LIVE ACTIVITY TICKER (Operación BOOM B1, 2026-05-09)
Franja auto-scroll bajo header. CSS @keyframes puro (mobile-safe).
════════════════════════════════════════════════════════════════════════ */
.live-ticker {
display: flex; align-items: stretch;
gap: 0;
width: 100%;
height: 44px;
background: linear-gradient(90deg, rgba(0,0,0,0.85) 0%, rgba(10,14,23,0.7) 100%);
border-top: 1px solid rgba(0,212,255,0.18);
border-bottom: 1px solid rgba(0,212,255,0.10);
overflow: hidden;
backdrop-filter: blur(12px);
position: relative;
z-index: 50;
}
.live-ticker-label {
display: inline-flex; align-items: center; gap: 6px;
padding: 0 14px;
font-size: 10px; font-weight: 800; letter-spacing: 0.12em;
color: #00f0ff;
background: rgba(0,240,255,0.10);
border-right: 1px solid rgba(0,240,255,0.20);
white-space: nowrap;
flex-shrink: 0;
z-index: 2;
}
.live-ticker-dot {
width: 8px; height: 8px;
background: #00f0ff;
border-radius: 50%;
box-shadow: 0 0 8px rgba(0,240,255,0.8);
animation: lt-pulse 1.4s ease-in-out infinite;
}
/* 2026-05-10: removido box-shadow del 50% (no compositable, Lighthouse).
El brillo estático del .live-ticker-dot ya da el efecto suficiente. */
@keyframes lt-pulse {
0%, 100% { opacity: 0.4; transform: scale(0.85); }
50% { opacity: 1; transform: scale(1.1); }
}
.live-ticker-track-wrap {
flex: 1;
overflow: hidden;
position: relative;
/* Captura swipes verticales sin bloquear (mobile UX) */
pointer-events: none;
}
.live-ticker-track {
display: inline-flex; align-items: center; gap: 32px;
padding: 0 32px;
white-space: nowrap;
will-change: transform;
/* Anim 70s desktop, 100s mobile (legible, no marea) */
animation: lt-scroll 70s linear infinite;
}
/* Mobile: animación más lenta para legibilidad. Bug fix 2026-05-09:
antes ocultaba .la-link y añadía ' una noticia' a TODOS los eventos →
"X acaba de unirse a la comunidad una noticia" sonaba absurdo.
Ahora dejamos el título visible (limitado por ancho del ticker). */
@media (max-width: 768px) {
.live-ticker { height: 36px; }
.live-ticker-label { padding: 0 10px; font-size: 9px; }
.live-ticker-track { animation-duration: 100s; gap: 22px; padding: 0 22px; }
.live-ticker-text .la-link {
max-width: 130px;
display: inline-block;
vertical-align: bottom;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
}
@keyframes lt-scroll {
from { transform: translateX(0); }
to { transform: translateX(-50%); }
}
/* Pausa en hover (desktop) y cuando pestaña inactiva */
.live-ticker:hover .live-ticker-track { animation-play-state: paused; }
/* Respeta prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
.live-ticker-track { animation: none; }
.live-ticker-dot { animation: none; opacity: 1; }
}
.live-ticker-item {
display: inline-flex; align-items: center; gap: 8px;
color: rgba(255,255,255,0.85);
font-size: 13px;
/* Restaurar pointer-events solo en items (para que enlaces funcionen) */
pointer-events: auto;
}
.live-ticker-emoji { font-size: 15px; line-height: 1; flex-shrink: 0; }
.live-ticker-text { color: rgba(255,255,255,0.85); }
.live-ticker-text .la-nick {
color: #00f0ff; font-weight: 700; text-decoration: none;
}
.live-ticker-text .la-nick:hover { text-decoration: underline; }
.live-ticker-text .la-link {
color: rgba(255,255,255,0.95); text-decoration: none;
border-bottom: 1px dotted rgba(0,240,255,0.30);
}
.live-ticker-text .la-link:hover { border-bottom-color: #00f0ff; }
.live-ticker-text strong { color: #ffd76b; }
.live-ticker-time {
color: rgba(255,255,255,0.40);
font-size: 11px;
margin-left: 4px;
}
/* ════════════════════════════════════════════════════════════════════════
MURAL DE LA COMUNIDAD (Operación BOOM, 2026-05-09)
Widget rolling-5: mensajes top sidebar. Cuesta 5⚡ publicar.
════════════════════════════════════════════════════════════════════════ */
.mural-widget {
position: relative;
margin-bottom: var(--space-4);
padding: 16px 16px 14px;
background: linear-gradient(180deg, rgba(0,212,255,0.06) 0%, rgba(15,20,30,0.85) 100%);
border: 1px solid rgba(0,212,255,0.30);
border-radius: 14px;
box-shadow: 0 8px 24px rgba(0,0,0,0.40), 0 0 18px rgba(0,212,255,0.10);
overflow: hidden;
}
/* Glow ambient sutil arriba del widget */
.mural-widget::before {
content: ''; position: absolute; top: -1px; left: 12%; right: 12%; height: 1px;
background: linear-gradient(90deg, transparent, var(--cyan-accent, #00d4ff), transparent);
box-shadow: 0 0 12px rgba(0,212,255,0.50);
}
.mural-head {
display: flex; align-items: center; justify-content: space-between;
margin-bottom: 12px; gap: 8px;
}
.mural-title {
display: inline-flex; align-items: center; gap: 7px;
font-family: 'Bebas Neue', sans-serif;
font-size: 16px; letter-spacing: 1.2px;
color: rgba(255,255,255,0.85);
text-transform: uppercase;
}
.mural-title svg { color: var(--cyan-accent, #00d4ff); flex-shrink: 0; }
.mural-title strong { color: var(--cyan-accent, #00d4ff); font-weight: 700; }
.mural-meta-rolling {
font-size: 9px; font-weight: 700; letter-spacing: 0.08em;
color: rgba(255,255,255,0.40);
text-transform: uppercase;
padding: 3px 8px;
background: rgba(255,255,255,0.04);
border: 1px solid rgba(255,255,255,0.08);
border-radius: 999px;
}
/* Form publicar */
.mural-form {
margin-bottom: 14px;
padding: 10px;
background: rgba(0,0,0,0.30);
border: 1px solid rgba(0,212,255,0.18);
border-radius: 10px;
}
.mural-form textarea {
width: 100%;
min-height: 60px;
padding: 8px 10px;
background: rgba(0,0,0,0.35);
border: 1px solid rgba(255,255,255,0.10);
border-radius: 8px;
color: #fff;
font-family: inherit;
font-size: 13px;
line-height: 1.4;
resize: vertical;
box-sizing: border-box;
}
.mural-form textarea:focus {
outline: none; border-color: var(--cyan-accent, #00d4ff);
box-shadow: 0 0 0 2px rgba(0,212,255,0.15);
}
.mural-form-foot {
display: flex; align-items: center; justify-content: space-between;
gap: 10px; margin-top: 8px;
}
.mural-form-counter {
font-size: 11px; color: rgba(255,255,255,0.45);
font-family: 'Share Tech Mono', monospace;
}
.mural-form-counter.is-near { color: #ffd76b; }
/* Bloque B 2026-05-28: input imagen mural */
.mural-img-row { display: flex; align-items: center; gap: 10px; margin-top: 6px; flex-wrap: wrap; }
.mural-img-btn {
display: inline-flex; align-items: center; gap: 6px;
padding: 6px 10px; border-radius: 8px;
background: rgba(0,212,255,0.06); border: 1px dashed rgba(0,212,255,0.35);
color: rgba(255,255,255,0.85); font-size: 11.5px; font-weight: 600;
cursor: pointer; transition: all .15s;
}
.mural-img-btn:hover { background: rgba(0,212,255,0.12); border-color: rgba(0,212,255,0.6); color: #fff; }
.mural-img-preview { display: inline-flex; align-items: center; gap: 6px; position: relative; }
.mural-img-preview[hidden] { display: none !important; }
.mural-img-preview img { width: 44px; height: 44px; object-fit: cover; border-radius: 6px; border: 1px solid rgba(255,255,255,0.1); }
.mural-img-remove {
background: rgba(231,76,60,0.85); color:#fff; border: 0;
width: 18px; height: 18px; border-radius: 50%; cursor: pointer;
font-size: 11px; line-height: 1; font-weight: 800;
display: inline-flex; align-items: center; justify-content: center;
position: absolute; top: -6px; right: -6px;
}
.mural-img-remove:hover { background: #e74c3c; }
.mural-img-status { font-size: 11px; color: rgba(255,255,255,0.55); font-style: italic; }
.mural-img-status.is-error { color: #ff8e8e; }
.mural-img-status.is-ok { color: #aef0a0; }
.mural-img-link { display: block; margin-top: 6px; }
.mural-img-shot {
display: block; width: 100%; max-height: 280px; object-fit: cover;
border-radius: 10px; border: 1px solid rgba(255,255,255,0.06);
background: #0a0a0e;
transition: transform .25s ease, border-color .25s ease;
}
.mural-img-link:hover .mural-img-shot { transform: scale(1.01); border-color: rgba(0,212,255,0.3); }
.mural-form-counter.is-over { color: #e74c3c; }
.mural-form-btn {
background: linear-gradient(135deg, var(--cyan-accent, #00d4ff), #00a8cc);
color: #001a20;
border: none;
padding: 8px 14px;
border-radius: 8px;
font-family: inherit;
font-size: 12px; font-weight: 800;
letter-spacing: 0.3px;
cursor: pointer;
transition: all 0.2s ease;
}
.mural-form-btn strong { font-weight: 800; }
.mural-form-btn:hover:not(:disabled) {
transform: translateY(-1px);
box-shadow: 0 4px 14px rgba(0,212,255,0.40);
filter: brightness(1.08);
}
.mural-form-btn:disabled { opacity: 0.6; cursor: progress; }
.mural-form-warn {
margin: 8px 0 0; padding: 0;
font-size: 10px; color: rgba(255,255,255,0.40);
line-height: 1.35;
}
.mural-form-err {
margin: 8px 0 0; padding: 6px 10px;
background: rgba(231,76,60,0.10); color: #ff8b80;
border: 1px solid rgba(231,76,60,0.30); border-radius: 6px;
font-size: 11px;
}
.mural-form-locked {
padding: 10px 12px;
margin-bottom: 14px;
background: rgba(255,255,255,0.03);
border: 1px dashed rgba(255,255,255,0.10);
border-radius: 8px;
color: rgba(255,255,255,0.65);
font-size: 12px; line-height: 1.5;
}
.mural-form-locked strong { color: var(--cyan-accent, #00d4ff); }
.mural-cta-anon {
color: var(--cyan-accent, #00d4ff);
font-weight: 700;
text-decoration: none;
border-bottom: 1px dotted rgba(0,212,255,0.40);
}
.mural-cta-anon:hover { border-bottom-color: var(--cyan-accent, #00d4ff); }
/* Lista de mensajes */
.mural-list {
list-style: none; padding: 0; margin: 0;
display: flex; flex-direction: column; gap: 10px;
}
.mural-item {
display: flex; gap: 10px;
padding: 10px;
background: rgba(255,255,255,0.02);
border: 1px solid rgba(255,255,255,0.05);
border-radius: 10px;
transition: border-color 0.2s ease;
}
.mural-item:hover { border-color: rgba(0,212,255,0.20); }
.mural-item.is-mine {
background: rgba(0,212,255,0.06);
border-color: rgba(0,212,255,0.25);
}
.mural-avatar-link { flex-shrink: 0; }
.mural-avatar {
width: 32px; height: 32px;
border-radius: 50%;
object-fit: cover;
display: block;
}
.mural-avatar-letter {
display: flex; align-items: center; justify-content: center;
font-weight: 800; font-size: 13px; color: #fff;
}
.mural-body { flex: 1; min-width: 0; }
.mural-meta {
display: flex; align-items: center; gap: 8px;
margin-bottom: 3px;
}
.mural-nick {
color: var(--cyan-accent, #00d4ff);
font-size: 12px; font-weight: 700;
text-decoration: none;
}
.mural-nick:hover { text-decoration: underline; }
.mural-time {
font-size: 10px; color: rgba(255,255,255,0.40);
}
.mural-delete {
margin-left: auto;
background: transparent; border: none;
color: rgba(255,255,255,0.35);
font-size: 16px; line-height: 1;
padding: 0 6px; cursor: pointer;
transition: color 0.2s ease;
}
.mural-delete:hover { color: #e74c3c; }
.mural-text {
margin: 0;
font-size: 12.5px;
line-height: 1.4;
color: rgba(255,255,255,0.85);
word-wrap: break-word;
overflow-wrap: anywhere;
}
.mural-empty {
margin: 0; padding: 12px;
text-align: center;
font-size: 12px; color: rgba(255,255,255,0.45);
background: rgba(255,255,255,0.02);
border-radius: 8px;
}
/* Mobile: ajustes mínimos */
@media (max-width: 600px) {
.mural-widget { padding: 14px 12px 12px; }
.mural-form-btn { padding: 8px 10px; font-size: 11px; }
}
/* ════════════════════════════════════════════════════════════════════════
BADGE TOAST (Operación BOOM B4, 2026-05-09)
Toast top-right con confetti CSS al desbloquear badge. Inyectado por
assets/js/badges-celebrate.js cuando un endpoint devuelve badges_unlocked.
════════════════════════════════════════════════════════════════════════ */
.gp-badge-toast {
position: fixed; top: 80px; right: 20px;
z-index: 10000;
display: flex; align-items: flex-start; gap: 12px;
width: 320px; max-width: calc(100vw - 40px);
padding: 14px 36px 14px 14px;
background: linear-gradient(135deg, rgba(15,20,30,0.98), rgba(8,12,18,0.98));
border: 1px solid rgba(0,212,255,0.40);
border-radius: 14px;
color: #fff;
box-shadow: 0 12px 40px rgba(0,0,0,0.6), 0 0 24px rgba(0,212,255,0.30);
cursor: pointer;
transform: translateX(380px); opacity: 0;
transition: transform 0.5s cubic-bezier(0.175,0.885,0.32,1.275),
opacity 0.3s ease;
overflow: hidden;
}
.gp-badge-toast.is-show { transform: translateX(0); opacity: 1; }
.gp-badge-toast.is-hide { transform: translateX(380px); opacity: 0; }
.gp-badge-toast[data-color="gold"] { border-color: rgba(255,215,107,0.55); box-shadow: 0 12px 40px rgba(0,0,0,0.6), 0 0 28px rgba(255,215,107,0.30); }
.gp-badge-toast[data-color="purple"] { border-color: rgba(192,132,252,0.55); box-shadow: 0 12px 40px rgba(0,0,0,0.6), 0 0 28px rgba(192,132,252,0.30); }
.gp-badge-toast[data-color="green"] { border-color: rgba(82,176,67,0.55); box-shadow: 0 12px 40px rgba(0,0,0,0.6), 0 0 28px rgba(82,176,67,0.30); }
.gp-badge-toast[data-color="red"] { border-color: rgba(231,76,60,0.55); box-shadow: 0 12px 40px rgba(0,0,0,0.6), 0 0 28px rgba(231,76,60,0.30); }
.gpbt-icon {
flex-shrink: 0;
width: 44px; height: 44px;
display: flex; align-items: center; justify-content: center;
background: linear-gradient(135deg, var(--cyan-accent, #00d4ff), #00a8cc);
color: #001a20;
border-radius: 50%;
box-shadow: 0 4px 14px rgba(0,212,255,0.40);
z-index: 2;
}
.gp-badge-toast[data-color="gold"] .gpbt-icon { background: linear-gradient(135deg, #ffd76b, #c89d2c); color: #2a1f00; box-shadow: 0 4px 14px rgba(255,215,107,0.40); }
.gp-badge-toast[data-color="purple"] .gpbt-icon { background: linear-gradient(135deg, #c084fc, #8b5cf6); color: #fff; box-shadow: 0 4px 14px rgba(192,132,252,0.40); }
.gp-badge-toast[data-color="green"] .gpbt-icon { background: linear-gradient(135deg, #52b043, #2e7d32); color: #fff; box-shadow: 0 4px 14px rgba(82,176,67,0.40); }
.gp-badge-toast[data-color="red"] .gpbt-icon { background: linear-gradient(135deg, #e74c3c, #c0392b); color: #fff; box-shadow: 0 4px 14px rgba(231,76,60,0.40); }
.gpbt-body { flex: 1; min-width: 0; z-index: 2; }
.gpbt-eyebrow {
font-size: 10px; font-weight: 800; letter-spacing: 0.12em;
color: var(--cyan-accent, #00d4ff);
text-transform: uppercase;
margin-bottom: 4px;
}
.gpbt-title {
font-family: 'Bebas Neue', sans-serif;
font-size: 22px; letter-spacing: 1px;
color: #fff;
line-height: 1.1; margin-bottom: 4px;
}
.gpbt-desc { font-size: 12px; color: rgba(255,255,255,0.70); line-height: 1.35; }
.gpbt-close {
position: absolute; top: 6px; right: 8px;
background: transparent; border: none;
color: rgba(255,255,255,0.45);
font-size: 22px; line-height: 1; cursor: pointer;
padding: 4px 8px;
z-index: 3;
}
.gpbt-close:hover { color: #fff; }
/* Confetti CSS — 14 partículas absolutas que caen con rotación */
.gpbt-confetti {
position: absolute; inset: 0;
pointer-events: none; overflow: hidden;
z-index: 1;
}
.gpbt-conf {
position: absolute; top: -10px; left: 50%;
width: 8px; height: 14px;
border-radius: 2px;
opacity: 0;
transform-origin: center;
}
.gp-badge-toast.is-show .gpbt-conf {
animation: gpbt-fall 1.8s ease-out forwards;
}
@keyframes gpbt-fall {
0% { opacity: 0; transform: translate(0, -10px) rotate(0); }
15% { opacity: 1; }
100% { opacity: 0; transform: translate(var(--tx, 0), var(--ty, 240px)) rotate(var(--rot, 360deg)); }
}
/* 14 partículas distribuidas con dirección/color distintos */
.gpbt-conf-0 { left: 12%; background: #00d4ff; --tx: -40px; --ty: 220px; --rot: 540deg; animation-delay: 0.05s; }
.gpbt-conf-1 { left: 22%; background: #ffd76b; --tx: -20px; --ty: 250px; --rot: 720deg; animation-delay: 0.10s; }
.gpbt-conf-2 { left: 32%; background: #c084fc; --tx: 10px; --ty: 230px; --rot: 600deg; animation-delay: 0.00s; }
.gpbt-conf-3 { left: 42%; background: #52b043; --tx: -10px; --ty: 260px; --rot: 480deg; animation-delay: 0.15s; }
.gpbt-conf-4 { left: 52%; background: #00d4ff; --tx: 30px; --ty: 240px; --rot: 720deg; animation-delay: 0.05s; }
.gpbt-conf-5 { left: 62%; background: #ffd76b; --tx: 20px; --ty: 220px; --rot: 540deg; animation-delay: 0.10s; }
.gpbt-conf-6 { left: 72%; background: #c084fc; --tx: 50px; --ty: 250px; --rot: 600deg; animation-delay: 0.00s; }
.gpbt-conf-7 { left: 82%; background: #00d4ff; --tx: 40px; --ty: 230px; --rot: 480deg; animation-delay: 0.20s; }
.gpbt-conf-8 { left: 18%; background: #ffd76b; --tx: -30px; --ty: 245px; --rot: 720deg; animation-delay: 0.30s; }
.gpbt-conf-9 { left: 38%; background: #52b043; --tx: 5px; --ty: 235px; --rot: 540deg; animation-delay: 0.25s; }
.gpbt-conf-10 { left: 58%; background: #c084fc; --tx: 15px; --ty: 255px; --rot: 600deg; animation-delay: 0.35s; }
.gpbt-conf-11 { left: 68%; background: #00d4ff; --tx: 35px; --ty: 225px; --rot: 480deg; animation-delay: 0.30s; }
.gpbt-conf-12 { left: 28%; background: #ffd76b; --tx: -15px; --ty: 245px; --rot: 720deg; animation-delay: 0.40s; }
.gpbt-conf-13 { left: 78%; background: #52b043; --tx: 45px; --ty: 240px; --rot: 540deg; animation-delay: 0.40s; }
@media (prefers-reduced-motion: reduce) {
.gp-badge-toast { transition: opacity 0.3s ease; transform: none; }
.gpbt-conf { display: none; }
}
@media (max-width: 600px) {
.gp-badge-toast { top: 70px; right: 10px; left: 10px; width: auto; }
}
/* 2026-05-09 (Operación BOOM A2): strip horizontal sutil POST-hero-bento.
Reemplaza el muro de 280px que pisaba contenido. Visible solo deslogueados. */
.home-comunidad-strip {
display: flex; align-items: center; justify-content: space-between;
gap: 16px; flex-wrap: wrap;
margin: var(--space-3) 0 var(--space-4);
padding: 14px 20px;
background: linear-gradient(90deg, rgba(0,212,255,0.08), rgba(0,212,255,0.02));
border: 1px solid rgba(0,212,255,0.20);
border-radius: 12px;
}
.home-comunidad-strip .hcs-text {
display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
font-size: 14px; color: var(--text-secondary, #ccc);
}
.home-comunidad-strip .hcs-text strong {
color: #fff; font-weight: 800; font-size: 15px;
}
.home-comunidad-strip .hcs-cta {
display: inline-flex; align-items: center;
background: linear-gradient(135deg, var(--cyan-accent, #00d4ff), #00a8cc);
color: #001a20; padding: 8px 16px; border-radius: 8px;
font-weight: 800; font-size: 13px; letter-spacing: 0.3px;
text-decoration: none; flex-shrink: 0;
box-shadow: 0 4px 12px rgba(0,212,255,0.30);
transition: all 0.2s ease;
}
.home-comunidad-strip .hcs-cta:hover {
transform: translateY(-1px);
box-shadow: 0 6px 18px rgba(0,212,255,0.45);
filter: brightness(1.08);
}
@media (max-width: 600px) {
.home-comunidad-strip { padding: 12px 14px; flex-direction: column; align-items: flex-start; }
.home-comunidad-strip .hcs-cta { width: 100%; justify-content: center; }
}
/* B9 (2026-05-07): eyebrow de sección entre hero y grid — guía la vista
y rompe el "muro de cards" diagnosticado por revisor externo. */
.news-section-eyebrow {
font-family: 'Bebas Neue', sans-serif;
font-size: 15px;
letter-spacing: 2px;
color: var(--cyan-accent, #00d4ff);
text-transform: uppercase;
/* F8 (2026-05-08): margin-top reducido para que no quede hueco grande tras el hero. */
margin: var(--space-3) 0 var(--space-3);
display: flex;
align-items: center;
gap: 12px;
text-shadow: 0 0 8px rgba(0,212,255,0.25);
}
.news-section-eyebrow::before,
.news-section-eyebrow::after {
content: '';
flex: 1;
height: 1px;
background: linear-gradient(90deg, transparent, rgba(0,212,255,0.25), transparent);
}
.news-section-eyebrow::after { background: linear-gradient(90deg, rgba(0,212,255,0.25), transparent); }
.news-section-eyebrow::before { background: linear-gradient(90deg, transparent, rgba(0,212,255,0.25)); }
@media (max-width: 600px) {
.news-section-eyebrow { font-size: 13px; letter-spacing: 1.5px; gap: 8px; margin: var(--space-5) 0 var(--space-3); }
}
/* Tarjeta Premium (Card) — refactor 2026-05-07 layout flex-column.
Antes: el envolvía meta + body con height:100%.
Ahora: meta y top-comment van FUERA del (HTML5-válido, permite buttons),
así que el article se vuelve flex-column y el hace flex:1 (rellena
espacio restante). Sin esto, meta queda oculta por overflow:hidden. */
.news-card {
display: flex; flex-direction: column;
background: var(--news-glass-bg); border: 1px solid var(--news-glass-border);
border-radius: 18px; overflow: hidden; transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1);
backdrop-filter: var(--news-glass-blur); -webkit-backdrop-filter: var(--news-glass-blur);
animation: newsFadeUp 0.5s cubic-bezier(0.25, 1, 0.5, 1) both; position: relative;
box-shadow: 0 8px 24px rgba(0,0,0,0.2);
}
.news-card::before {
content: ''; position: absolute; inset: 0; pointer-events: none;
border-radius: 18px; padding: 1px;
background: linear-gradient(135deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0) 50%, rgba(0,212,255,0.1) 100%);
-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
-webkit-mask-composite: xor; mask-composite: exclude;
}
.news-card:hover {
border-color: rgba(0,212,255,0.5); background: rgba(30, 34, 40, 0.8);
transform: translateY(-6px); box-shadow: 0 15px 35px var(--news-glow-cyan);
}
.news-card-link { display: flex; flex-direction: column; text-decoration: none; color: inherit; flex: 1; }
.news-card-media { position: relative; aspect-ratio: 16/9; overflow: hidden; background: #000; }
/* Overlay que funde la imagen con el body de la card → look premium 2026 */
.news-card-media::after {
content: ''; position: absolute; inset: 0;
background: linear-gradient(to top,
var(--bg-card) 0%,
rgba(10,12,16,0.55) 40%,
rgba(10,12,16,0.18) 70%,
rgba(10,12,16,0) 100%);
pointer-events: none;
}
.news-card-media img {
width: 100%; height: 100%; object-fit: cover;
transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1), filter 0.4s ease;
filter: brightness(0.92) saturate(1.05);
}
.news-card:hover .news-card-media img { transform: scale(1.08); filter: brightness(1.05) saturate(1.12); }
/* Hover sensorial — eleva la card con sombra más profunda + tinte cyan sutil */
.news-card { transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease; }
.news-card:hover {
transform: translateY(-4px);
box-shadow: 0 18px 44px rgba(0,0,0,0.55), 0 0 22px rgba(0,212,255,0.10);
border-color: rgba(0,212,255,0.20);
}
.news-card-placeholder {
width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;
background: linear-gradient(135deg, #111 0%, #222 100%);
font-family: 'Bebas Neue', sans-serif; color: var(--text-muted); letter-spacing: 2px;
}
/* Badges encuesta/pulso movidos al meta del body (refactor 2026-04-30 — antes
saturaban la cabecera de la imagen en móvil con 3 elementos absolutos). Los
estilos inline viven ahora en .news-card-meta-flag. */
/* Tag de categoría — pill con icono + texto, fondo tintado y glow sutil */
.news-card-cat {
position: absolute; top: 12px; left: 12px; z-index: 2;
display: inline-flex; align-items: center; gap: 6px;
background: rgba(0,0,0,0.6);
backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
color: #fff; font-size: 10px; font-weight: 800; letter-spacing: 1.5px;
text-transform: uppercase;
padding: 5px 11px 5px 8px;
border-radius: 999px;
border: 1px solid rgba(255,255,255,0.12);
box-shadow: 0 4px 12px rgba(0,0,0,0.35);
transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
}
.news-card-cat-icon {
display: inline-flex; align-items: center; justify-content: center;
line-height: 1;
filter: drop-shadow(0 1px 2px rgba(0,0,0,0.5));
}
.news-card-cat-icon svg { width: 12px; height: 12px; }
.news-card-cat-label { line-height: 1; }
/* Tints + glows por categoría — fondo con tinte del color, no solo borde.
game-pass = verde Game Pass (institucional servicio).
xbox = azul Xbox (institucional marca consola). Antes ambos verde → confusión. */
.news-cat-game-pass {
color: #aaffae;
background: linear-gradient(135deg, rgba(0,212,255,0.32), rgba(0,212,255,0.08));
border-color: rgba(0,212,255,0.55);
box-shadow: 0 4px 12px rgba(0,0,0,0.35), 0 0 14px rgba(0,212,255,0.18);
}
.news-cat-xbox {
color: #9ec1ff;
background: linear-gradient(135deg, rgba(16,124,247,0.32), rgba(16,124,247,0.08));
border-color: rgba(16,124,247,0.55);
box-shadow: 0 4px 12px rgba(0,0,0,0.35), 0 0 14px rgba(16,124,247,0.20);
}
.news-cat-lanzamientos {
color: #ffd07a;
background: linear-gradient(135deg, rgba(243,156,18,0.32), rgba(243,156,18,0.08));
border-color: rgba(243,156,18,0.55);
box-shadow: 0 4px 12px rgba(0,0,0,0.35), 0 0 14px rgba(243,156,18,0.20);
}
.news-cat-rumores {
color: #ffa39d;
background: linear-gradient(135deg, rgba(231,76,60,0.32), rgba(231,76,60,0.08));
border-color: rgba(231,76,60,0.55);
box-shadow: 0 4px 12px rgba(0,0,0,0.35), 0 0 14px rgba(231,76,60,0.20);
}
.news-cat-ofertas {
color: #ffc78a;
background: linear-gradient(135deg, rgba(255,153,0,0.34), rgba(255,153,0,0.08));
border-color: rgba(255,153,0,0.6);
box-shadow: 0 4px 12px rgba(0,0,0,0.35), 0 0 14px rgba(255,153,0,0.22);
}
.news-cat-comunidad {
color: #b3eaff;
background: linear-gradient(135deg, rgba(0,212,255,0.30), rgba(0,212,255,0.08));
border-color: rgba(0,212,255,0.5);
box-shadow: 0 4px 12px rgba(0,0,0,0.35), 0 0 14px rgba(0,212,255,0.18);
}
/* Hover: el tag se eleva ligeramente y el glow se intensifica */
.news-card:hover .news-card-cat,
.news-card-link:hover .news-card-cat {
transform: translateY(-1px);
}
.news-card:hover .news-cat-game-pass,
.news-card-link:hover .news-cat-game-pass { box-shadow: 0 6px 16px rgba(0,0,0,0.4), 0 0 22px rgba(0,212,255,0.45); }
.news-card:hover .news-cat-xbox,
.news-card-link:hover .news-cat-xbox { box-shadow: 0 6px 16px rgba(0,0,0,0.4), 0 0 22px rgba(16,124,247,0.45); }
.news-card:hover .news-cat-lanzamientos,
.news-card-link:hover .news-cat-lanzamientos { box-shadow: 0 6px 16px rgba(0,0,0,0.4), 0 0 22px rgba(243,156,18,0.45); }
.news-card:hover .news-cat-rumores,
.news-card-link:hover .news-cat-rumores { box-shadow: 0 6px 16px rgba(0,0,0,0.4), 0 0 22px rgba(231,76,60,0.45); }
.news-card:hover .news-cat-ofertas,
.news-card-link:hover .news-cat-ofertas { box-shadow: 0 6px 16px rgba(0,0,0,0.4), 0 0 22px rgba(255,153,0,0.50); }
.news-card:hover .news-cat-comunidad,
.news-card-link:hover .news-cat-comunidad { box-shadow: 0 6px 16px rgba(0,0,0,0.4), 0 0 22px rgba(0,212,255,0.42); }
.news-card-body {
padding: 0 var(--space-4) var(--space-4); display: flex; flex-direction: column; gap: 10px;
flex-grow: 1; position: relative; z-index: 2; margin-top: -20px;
}
.news-card-title {
font-family: system-ui, -apple-system, sans-serif;
/* B9 (2026-05-07): tipografía responsive — escala fluida en mobile sin requerir
media queries, evita títulos largos rebasando 3 líneas. min 15px / max 18px. */
font-size: clamp(15px, 3.8vw, 18px); font-weight: 700;
line-height: 1.35; color: #fff; text-shadow: 0 2px 4px rgba(0,0,0,0.8);
display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
word-break: break-word;
}
.news-card:hover .news-card-title { color: var(--cyan-accent); }
.news-card-excerpt {
font-family: system-ui, -apple-system, sans-serif; font-size: 14px; color: var(--text-secondary);
line-height: 1.6; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
/* Autor de la noticia — avatar + nombre + pill EDITOR + tiempo relativo */
.news-card-author {
display: flex; align-items: center; gap: 10px;
margin-bottom: 12px;
font-size: 12px; color: var(--text-muted, #888);
}
/* Avatar autor — borde cyan brand + glow (no verde Xbox) */
.news-card-author-avatar {
width: 32px; height: 32px;
border-radius: 50%;
object-fit: cover;
border: 2px solid var(--cyan-accent, #00d4ff);
box-shadow: 0 0 12px rgba(0, 212, 255, 0.45);
flex-shrink: 0;
transition: box-shadow 0.25s ease;
}
.news-card:hover .news-card-author-avatar {
box-shadow: 0 0 18px rgba(0, 212, 255, 0.7);
}
/* Fallback letra cuando no hay imagen — gradient cyan con glow */
.news-card-author-avatar-letter {
display: flex; align-items: center; justify-content: center;
background: linear-gradient(135deg, rgba(0, 212, 255, 0.20), rgba(0, 212, 255, 0.05));
color: #fff;
font-family: 'Bebas Neue', sans-serif;
font-size: 16px; font-weight: 700; letter-spacing: 1px;
line-height: 1;
text-shadow: 0 0 10px rgba(0, 212, 255, 0.6);
}
/* F5 (2026-05-08): info-block flex 1 con min-width 0 → ya no salta el "·" suelto
ni se descuelga el score-pulsos cuando el ancho aprieta. Sin span literal de
separador: usamos pseudo-element ::before en .news-card-author-time. */
.news-card-author-info {
display: flex; align-items: center; gap: 6px;
flex: 1; min-width: 0;
line-height: 1.3;
flex-wrap: wrap;
}
.news-card-author-info strong {
color: #fff; font-weight: 700;
font-size: 13px;
}
/* Pill EDITOR — colores de marca cyan + brillo blanco (no verde Xbox) */
.news-card-author-rank {
background: rgba(0, 212, 255, 0.12);
border: 1px solid rgba(0, 212, 255, 0.45);
color: #fff;
font-family: 'Bebas Neue', sans-serif;
font-size: 10px; letter-spacing: 1.2px;
font-weight: 700;
padding: 2px 8px;
border-radius: 4px;
text-transform: uppercase;
text-shadow: 0 0 10px rgba(0, 212, 255, 0.6);
}
.news-card-author-time {
color: var(--text-muted, #888); font-size: 11px;
display: inline-flex; align-items: center;
}
/* Separador "·" como pseudo-element — desaparece limpio en wrap, no queda colgado. */
.news-card-author-time::before {
content: '·';
color: var(--text-low, #555);
margin-right: 6px;
font-weight: 600;
}
/* news-card-author es flex-row: avatar + info + (score Pulsos a la derecha) */
.news-card-author { align-items: center; }
/* Score de Pulsos en el header del card body — display only (no interactivo).
Se sincroniza con el button del footer vía pulso.js (selector data-pulso-display). */
.news-card-pulsos-score {
margin-left: auto;
display: inline-flex;
align-items: center;
gap: 5px;
color: var(--cyan-accent, #00d4ff);
font-size: 12px;
font-weight: 700;
letter-spacing: 0.3px;
flex-shrink: 0;
line-height: 1;
}
.news-card-pulsos-score svg {
opacity: 0.85;
filter: drop-shadow(0 0 4px rgba(0, 212, 255, 0.35));
}
.pulsos-score-label {
color: var(--text-muted, #888);
font-weight: 600;
}
@media (max-width: 600px) {
.pulsos-score-label { display: none; }
}
/* En hero: avatar más grande para acompañar al título XL + más respiración */
.news-card-hero .news-card-author {
margin-top: 6px;
margin-bottom: 16px;
gap: 12px;
}
.news-card-hero .news-card-author-avatar {
width: 40px; height: 40px;
border-width: 2.5px;
}
.news-card-hero .news-card-author-avatar-letter { font-size: 18px; }
.news-card-hero .news-card-author-info strong { font-size: 15px; }
/* Top comment preview dentro de la card (proof social — qué dice la comunidad) */
.news-card-comment-preview {
display: flex; gap: 10px; align-items: flex-start;
padding: 10px 12px; margin-bottom: 12px;
background: rgba(0,212,255,0.04);
border-left: 3px solid rgba(0,212,255,0.45);
border-radius: 0 8px 8px 0;
}
.ncp-avatar {
width: 28px; height: 28px; border-radius: 50%;
object-fit: cover; flex-shrink: 0;
box-shadow: 0 0 0 1px rgba(255,255,255,0.08);
}
.ncp-avatar-letter {
display: flex; align-items: center; justify-content: center;
font-family: 'Bebas Neue', sans-serif;
font-size: 13px; font-weight: 700; color: #fff; letter-spacing: 1px;
}
.ncp-text { display: flex; flex-direction: column; min-width: 0; flex: 1; line-height: 1.35; }
.ncp-line { display: flex; gap: 6px; align-items: baseline; flex-wrap: wrap; font-size: 11px; }
.ncp-line strong { color: #fff; font-weight: 700; font-size: 12px; }
.ncp-level {
font-family: 'Bebas Neue', sans-serif;
font-size: 11px; font-weight: 800; letter-spacing: 0.5px;
}
.ncp-up {
color: var(--xbox-green-light, #00d4ff); font-weight: 800;
font-size: 11px;
}
.ncp-quote {
color: var(--text-secondary, #ccc);
font-size: 12px; line-height: 1.45;
overflow: hidden; text-overflow: ellipsis;
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
/* Meta bar como ACTION FOOTER (refactor 2026-05-08 estilo mockup Sergi):
solo 2 acciones — "X Respuestas" link a comentarios + "Dar Pulso" button.
Sin contador de Pulsos (movido al header del body). Border-top sutil
separa el texto editorial del bloque de acciones de comunidad. */
.news-card-meta {
font-size: 13px; color: var(--text-muted); display: flex; gap: 12px;
padding: 14px var(--space-4) var(--space-4);
font-weight: 600; letter-spacing: 0.3px; align-items: center;
justify-content: space-between; flex-wrap: nowrap;
border-top: 1px solid rgba(255,255,255,0.04);
margin-top: auto; /* 2026-05-16: footer pegado abajo + 1 sola línea (label izq / botón der). */
}
.news-card-meta > :first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.news-card-meta > span,
.news-card-meta > a,
.news-card-meta > button { display: inline-flex; align-items: center; gap: 6px; line-height: 1; }
/* Iconos SVG inline en meta — minimalistas, currentColor */
.news-card-meta .meta-icon {
flex-shrink: 0;
opacity: 0.75;
margin-top: -1px; /* corrección óptica para alinear con texto */
}
.news-card-meta > span:hover .meta-icon { opacity: 1; }
/* Comentarios link en meta — minimalista (sin pill/border).
F4 (2026-05-08): hover FORZADO a cyan con !important — sin él hereda
`a { color: var(--xbox-green-light) }` global de page-head.php → vira a verde
Xbox y Sergi insiste: "no somos Xbox, somos comunidad Game Pass, color cyan". */
.news-card-comments {
color: var(--text-muted, #666);
text-decoration: none;
transition: color 0.2s ease;
}
.news-card-comments:hover { color: var(--cyan-accent, #00d4ff) !important; }
.news-card-comments:hover .meta-icon { opacity: 1; }
.news-card-comments.is-active { color: var(--cyan-accent, #00d4ff); }
.news-card-comments.is-active .meta-icon { opacity: 1; }
/* ─── F3.3: Franja TOP COMMENT (≥3 pulsos) ────────────────────────────
Render fuera del principal (es link independiente al ancla del comentario).
Borde-left cyan + icono ⚡ + avatar pequeño + nick + pulsos + quote 1 línea.
Solo aparece en cards con tracción real, así no hay franjas mock. */
.news-card-top-comment {
display: flex; gap: 10px; align-items: center;
margin: 0 var(--space-4) var(--space-3);
padding: 10px 12px;
background: linear-gradient(135deg, rgba(0,212,255,0.06), rgba(0,212,255,0.02));
border: 1px solid rgba(0,212,255,0.18);
border-left: 3px solid rgba(0,212,255,0.55);
border-radius: 0 8px 8px 0;
text-decoration: none; color: inherit;
transition: all 0.25s ease;
}
.news-card-top-comment:hover {
border-color: rgba(0,212,255,0.4);
border-left-color: rgba(0,212,255,0.9);
background: linear-gradient(135deg, rgba(0,212,255,0.10), rgba(0,212,255,0.04));
transform: translateX(2px);
}
.nctc-icon {
flex-shrink: 0; color: var(--cyan-accent, #00d4ff);
filter: drop-shadow(0 0 4px rgba(0,212,255,0.5));
display: inline-flex;
}
.nctc-avatar {
width: 28px; height: 28px; border-radius: 50%;
object-fit: cover; flex-shrink: 0;
box-shadow: 0 0 0 1px rgba(255,255,255,0.08);
}
.nctc-avatar-letter {
display: flex; align-items: center; justify-content: center;
font-family: 'Bebas Neue', sans-serif;
font-size: 13px; font-weight: 700; color: #fff; letter-spacing: 1px;
}
.nctc-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; line-height: 1.35; }
.nctc-line { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; font-size: 11px; }
.nctc-nick { color: #fff; font-weight: 700; font-size: 12px; }
.nctc-pulsos {
color: var(--cyan-accent, #00d4ff);
font-weight: 800; font-size: 11px; letter-spacing: 0.3px;
}
.nctc-quote {
color: var(--text-secondary, #ccc);
font-size: 12px; line-height: 1.45;
overflow: hidden; text-overflow: ellipsis;
display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical;
}
/* BOOM: variante "X dieron Pulso" cuando no hay top_comment. Misma franja,
sustituye avatar único + cita por stack apilado de avatares. */
.news-card-top-pulsadores .nctc-pulsadores-stack {
display: inline-flex; align-items: center; flex-shrink: 0;
}
.news-card-top-pulsadores .nctc-pulsador-avatar {
width: 24px; height: 24px;
border-radius: 50%;
object-fit: cover;
margin-left: -8px;
border: 2px solid var(--bg-card, #0a0e17);
background: #1a1f2e;
transition: transform 0.15s ease;
}
.news-card-top-pulsadores .nctc-pulsador-avatar:first-child { margin-left: 0; }
.news-card-top-pulsadores .nctc-pulsador-avatar:hover { transform: translateY(-2px) scale(1.08); z-index: 2; }
.news-card-top-pulsadores .nctc-pulsador-letter {
display: inline-flex; align-items: center; justify-content: center;
font-weight: 800; font-size: 11px; color: #fff;
background: linear-gradient(135deg, var(--cyan-accent, #00d4ff), #0a4f5e);
}
.news-card-top-pulsadores .nctc-pulsador-extra {
display: inline-flex; align-items: center; justify-content: center;
height: 24px; min-width: 28px; padding: 0 6px;
margin-left: -4px;
border-radius: 12px;
background: rgba(0,212,255,0.12);
color: var(--cyan-accent, #00d4ff);
font-size: 10px; font-weight: 800;
border: 2px solid var(--bg-card, #0a0e17);
}
.news-card-top-pulsadores .nctc-pulsadores-text {
flex-direction: row; align-items: baseline; gap: 4px;
font-size: 12px;
}
.news-card-top-pulsadores .nctc-pulsadores-text strong {
color: var(--cyan-accent, #00d4ff);
font-weight: 800;
font-size: 13px;
}
/* ─── F3.2 v2 (2026-05-08): Pulso interactivo desde card — minimalista.
Refactor tras feedback Sergi: el pill/box compite con el card. Ahora estilo
"verbo de acción": icono + número + label "Pulso". Sin border, sin bg.
Solo color en hover (cyan) y estado is-reacted (cyan filled). */
.news-card-pulso-btn {
display: inline-flex; align-items: center; gap: 5px;
padding: 0;
background: none;
border: none;
cursor: pointer;
font: inherit;
color: var(--text-muted, #666);
font-size: 12px; font-weight: 600;
letter-spacing: 0.3px; line-height: 1;
transition: color 0.2s ease;
}
.news-card-pulso-btn:hover:not(:disabled) { color: var(--cyan-accent, #00d4ff); }
.news-card-pulso-btn .hud-icon {
opacity: 0.75;
transition: opacity 0.2s ease, transform 0.2s ease;
flex-shrink: 0;
}
.news-card-pulso-btn:hover:not(:disabled) .hud-icon { opacity: 1; transform: scale(1.12); }
.news-card-pulso-btn.is-reacted {
color: #00f3ff;
font-weight: 700;
cursor: default;
}
.news-card-pulso-btn.is-reacted .hud-icon {
opacity: 1;
fill: rgba(0, 212, 255, 0.25);
}
.news-card-pulso-btn.is-locked { opacity: 0.5; cursor: not-allowed; }
.news-card-pulso-btn:disabled { cursor: default; }
/* Flash al reaccionar — consistente con el HUD de noticia */
@keyframes news-card-pulse-flash {
0% { transform: scale(1); }
40% { transform: scale(1.4); filter: drop-shadow(0 0 8px rgba(0,243,255,0.8)); }
100% { transform: scale(1); }
}
.news-card-pulso-btn .hud-icon.flash-anim {
animation: news-card-pulse-flash 0.5s cubic-bezier(0.25, 1, 0.5, 1);
}
/* Flags inline (encuesta, pulso) — pills compactos con SVG, sin emojis */
.news-card-meta-flag {
display: inline-flex; align-items: center; gap: 5px;
font-size: 10px; font-weight: 800; letter-spacing: 0.6px;
text-transform: uppercase;
padding: 3px 9px;
border-radius: 999px;
border: 1px solid transparent;
line-height: 1;
}
.news-card-meta-flag svg { flex-shrink: 0; }
/* Pill EDITORIAL — tono dorado/ámbar para distinguir del verde Xbox */
.news-card-meta-flag.is-editorial {
color: #ffd07a;
background: linear-gradient(135deg, rgba(255,180,90,0.18), rgba(255,180,90,0.06));
border-color: rgba(255,180,90,0.45);
box-shadow: 0 0 12px rgba(255,180,90,0.18);
}
/* Pill HILO CALIENTE — rojo/naranja con pulse glow para llamar atención */
.news-card-meta-flag.is-hot {
color: #ff6b6b;
background: linear-gradient(135deg, rgba(255, 107, 107, 0.18), rgba(255, 107, 107, 0.04));
border-color: rgba(255, 107, 107, 0.45);
box-shadow: 0 0 14px rgba(255, 107, 107, 0.25);
animation: hot-pulse 2.4s ease-in-out infinite;
}
@keyframes hot-pulse {
0%, 100% { box-shadow: 0 0 14px rgba(255, 107, 107, 0.20); }
50% { box-shadow: 0 0 20px rgba(255, 107, 107, 0.45); }
}
/* En cards small: solo icono, sin texto. Pill cuadrado. */
.news-card-small .news-card-meta-flag-label { display: none; }
.news-card-small .news-card-meta-flag { padding: 4px 6px; gap: 0; }
/* En móviles estrechos: igual que small */
@media (max-width: 480px) {
.news-card-meta-flag-label { display: none; }
.news-card-meta-flag { padding: 4px 6px; gap: 0; }
.news-card-meta { gap: 10px; }
}
/* CARD — hero */
/* ============================================================
Encuesta inline GRANDE en hero card (Sprint 1.7)
"El Pulso de la Comunidad" — estilo mockup Nexus Feed.
============================================================ */
.np-hero {
background: linear-gradient(135deg, rgba(0,212,255,0.06), rgba(0,0,0,0.20));
border: 1px solid rgba(0,212,255,0.18);
border-radius: 14px;
padding: 14px 16px 16px;
margin: 14px 0 16px;
}
.np-hero-head {
display: flex; justify-content: space-between; align-items: center;
margin-bottom: 10px;
}
.np-hero-eyebrow {
font-family: 'Bebas Neue', sans-serif;
font-size: 13px; letter-spacing: 1.5px;
color: var(--cyan-accent, #00d4ff);
text-shadow: 0 0 8px rgba(0,212,255,0.35);
display: inline-flex; align-items: center; gap: 6px;
}
.np-hero-eyebrow svg { flex-shrink: 0; }
.np-hero-total {
font-size: 11px; font-weight: 700; color: var(--text-muted);
letter-spacing: 0.5px;
}
.np-hero-question {
font-family: 'Inter', system-ui, sans-serif;
font-size: 15px; line-height: 1.45;
font-weight: 700; color: #fff;
margin: 0 0 12px;
}
.np-hero-options { display: flex; flex-direction: column; gap: 8px; }
/* El atributo HTML 'hidden' debe ganar sobre display:flex (CSS prioriza el
bloque por defecto si no hacemos esta override explícita) */
.np-hero-options[hidden],
.np-hero-results[hidden] { display: none !important; }
.np-hero-btn {
width: 100%; cursor: pointer;
background: rgba(255,255,255,0.04);
border: 1px solid rgba(255,255,255,0.10);
color: #fff;
padding: 12px 14px;
border-radius: 10px;
font-size: 14px; font-weight: 600;
text-align: left;
display: flex; align-items: center; gap: 10px;
transition: background 0.2s, border-color 0.2s, transform 0.1s;
font-family: inherit;
}
.np-hero-btn:hover {
background: rgba(0,212,255,0.10);
border-color: rgba(0,212,255,0.40);
transform: translateY(-1px);
}
.np-hero-btn:active { transform: translateY(0); }
.np-hero-btn:disabled { opacity: 0.5; cursor: wait; }
.np-hero-btn-emoji { font-size: 16px; line-height: 1; }
.np-hero-btn-label { flex: 1; }
.np-hero-results { display: flex; flex-direction: column; gap: 8px; }
.np-hero-result {
position: relative;
display: flex; align-items: center;
gap: 10px;
padding: 10px 14px;
background: rgba(255,255,255,0.03);
border: 1px solid rgba(255,255,255,0.06);
border-radius: 10px;
overflow: hidden;
font-size: 13px;
}
.np-hero-result-fill {
position: absolute; top: 0; left: 0; bottom: 0;
width: 0;
background: linear-gradient(90deg, rgba(0,212,255,0.30), rgba(0,212,255,0.10));
transition: width 0.9s cubic-bezier(0.25, 1, 0.5, 1);
}
.np-hero-result.is-winner .np-hero-result-fill {
background: linear-gradient(90deg, rgba(0,212,255,0.40), rgba(0,212,255,0.15));
}
.np-hero-result.is-winner {
border-color: rgba(0,212,255,0.50);
box-shadow: inset 0 0 0 1px rgba(0,212,255,0.30), 0 0 18px rgba(0,212,255,0.10);
}
.np-hero-result.is-mine {
box-shadow: inset 0 0 0 2px rgba(0,212,255,0.55);
}
.np-hero-result-text {
position: relative; z-index: 2;
color: #fff; font-weight: 600;
display: flex; gap: 8px; align-items: center;
flex: 1;
min-width: 0;
/* 2026-06-04: Sergi no quiere truncado con "..." — wrap a 2 líneas máx. */
white-space: normal;
line-height: 1.3;
word-break: break-word;
overflow-wrap: anywhere;
}
.np-hero-result-mine {
background: rgba(0,212,255,0.20);
color: var(--cyan-accent, #00d4ff);
font-size: 10px; font-weight: 800;
padding: 1px 7px; border-radius: 999px;
text-transform: uppercase; letter-spacing: 0.5px;
}
.np-hero-result-pct {
position: relative; z-index: 2;
font-family: 'Bebas Neue', sans-serif;
font-size: 18px; letter-spacing: 1px;
color: #fff; flex-shrink: 0;
}
/* Voters: stack horizontal de avatares de top votantes — variante cyan
para encuesta hero. Se posicionan entre el texto y el % para mantener
el layout flex (text - voters - pct). */
.np-hero-result-voters {
position: relative; z-index: 2;
flex-shrink: 0;
display: inline-flex; align-items: center;
margin-right: 4px;
/* margin-left: auto eliminado — el text con flex:1 ya empuja voters a la derecha,
evita que se solape con TU VOTO badge cuando la opción es ganadora. */
}
.np-hero-result-voters:empty { display: none; }
.np-hero-voter, .np-hero-voter-more {
width: 22px; height: 22px;
border-radius: 50%;
border: 2px solid #131418;
box-sizing: border-box;
margin-left: -7px;
flex-shrink: 0;
transition: transform 0.18s ease;
}
.np-hero-voter:first-child, .np-hero-voter-letter:first-child { margin-left: 0; }
.np-hero-voter {
object-fit: cover;
background: rgba(255,255,255,0.05);
display: block;
}
.np-hero-voter:hover { transform: translateY(-2px) scale(1.08); z-index: 5; }
.np-hero-voter-letter {
display: inline-flex; align-items: center; justify-content: center;
background: linear-gradient(135deg, rgba(0,212,255,0.40), rgba(0,212,255,0.25));
color: #fff;
font-family: 'Inter', sans-serif;
font-size: 10px; font-weight: 800;
text-transform: uppercase;
}
.np-hero-voter-more {
width: auto; height: 22px;
padding: 0 7px;
background: rgba(0,212,255,0.20);
color: var(--cyan-accent, #00d4ff);
border-color: #131418;
font-family: 'Inter', sans-serif;
font-size: 10px; font-weight: 700;
display: inline-flex; align-items: center; justify-content: center;
border-radius: 999px;
line-height: 1;
}
/* En la opción ganadora los avatares ganan un borde verde sutil */
.np-hero-result.is-winner .np-hero-voter,
.np-hero-result.is-winner .np-hero-voter-letter {
border-color: rgba(0,212,255,0.65);
}
/* Mobile: ocultar avatares para no saturar (mismo criterio que news-poll) */
@media (max-width: 540px) {
.np-hero-result-voters { display: none; }
}
.np-hero-locked {
margin-top: 10px;
font-size: 11px;
color: var(--text-muted);
display: flex; align-items: center; justify-content: center; gap: 6px;
}
.np-hero-locked svg { flex-shrink: 0; opacity: 0.85; }
.np-hero-locked a { color: var(--cyan-accent, #00d4ff); font-weight: 700; }
/* Wrapper de la encuesta hero — vive FUERA del
(evita anidados). Mantiene padding lateral consistente con el body.
F6 (2026-05-08): borde-top sutil separa visualmente la encuesta del body
y refuerza la jerarquía "imagen → texto → encuesta" vertical. */
.news-card-poll-wrap {
padding: var(--space-3) var(--space-5) var(--space-5);
border-top: 1px solid rgba(255,255,255,0.05);
margin-top: var(--space-3);
}
.news-card-poll-wrap .np-hero { margin: 0; }
/* Hero card v3 (2026-05-08) — Mockup user.
- Imagen completa con object-fit: contain + bg dark (Xbox Wire-style).
- Body separado debajo: título + meta autor/fecha/⚡pulsos.
- Encuesta SACADA fuera al sidebar widget (hero-encuesta-widget). */
.news-card-hero {
display: flex !important; flex-direction: column !important;
border: 1px solid rgba(0,212,255,0.20);
box-shadow: 0 12px 40px rgba(0,0,0,0.55), 0 0 32px rgba(0,212,255,0.08);
height: 100%;
}
.news-card-hero .news-card-link {
display: flex; flex-direction: column;
height: 100%;
}
.news-card-hero:hover {
border-color: rgba(0,212,255,0.40);
box-shadow: 0 18px 50px rgba(0,0,0,0.6), 0 0 44px rgba(0,212,255,0.18);
}
/* Hero v8 — estructura clásica del mosaic:
- Imagen cover panorámica (16/9), título superpuesto con gradient bottom.
- Body con margin-top negativo para overlap del texto sobre imagen.
- Encuesta inline al final con avatares "TU VOTO". */
.news-card-hero .news-card-media {
aspect-ratio: 16/9;
background: var(--bg-card, #0a0e17);
display: block;
position: relative;
overflow: hidden;
max-height: none; min-height: 0;
padding: 0;
}
.news-card-hero .news-card-media img {
position: absolute; inset: 0;
width: 100%; height: 100%;
object-fit: cover;
object-position: center;
display: block;
}
/* Gradient bottom para legibilidad del título superpuesto */
.news-card-hero .news-card-media::after {
content: ''; display: block;
position: absolute; inset: 0;
background: linear-gradient(to top,
var(--bg-card, #0a0e17) 0%,
rgba(10,12,16,0.78) 28%,
rgba(10,12,16,0.32) 60%,
rgba(10,12,16,0) 100%);
pointer-events: none;
}
.news-card-hero .news-card-body {
padding: 0 var(--space-5) var(--space-4);
margin-top: -56px;
gap: 12px;
position: relative; z-index: 2;
}
.news-card-hero .news-card-title {
font-family: 'Bebas Neue', 'Inter', sans-serif;
font-size: clamp(24px, 2.4vw, 38px);
line-height: 1.05;
letter-spacing: 0.5px;
margin-bottom: 0;
color: #fff;
}
.news-card-hero .news-card-excerpt { display: none; }
@media (min-width: 1100px) {
.news-card-hero .news-card-body { padding: 0 var(--space-6) var(--space-5); }
}
/* CARD — small (sidebar hero) — REFACTOR 2026-05-08
Antes: layout horizontal con imagen 140px a la izquierda y título comprimido
a la derecha (apenas se leía). Sergi: "esto del hero no me gusta como está
lo de la foto de la noticia, se ve feo. Apenas se ve el titular".
Ahora: layout VERTICAL como cards normales pero compactas — imagen ancho
completo arriba (16/9), título y meta debajo. La imagen luce y el título respira. */
.news-card-small .news-card-link {
flex-direction: column;
min-height: 0;
}
.news-card-small .news-card-media {
aspect-ratio: 16/9;
width: 100%;
height: auto;
flex-shrink: 0;
}
.news-card-small .news-card-media img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
/* Overlay coherente con cards normales (gradient bottom→top) */
.news-card-small .news-card-media::after {
background: linear-gradient(to top,
var(--bg-card) 0%,
rgba(10,12,16,0.50) 35%,
rgba(10,12,16,0) 70%);
}
.news-card-small .news-card-cat { font-size: 9px; padding: 4px 8px; top: 8px; left: 8px; }
.news-card-small .news-card-body {
padding: 0 var(--space-3) var(--space-3);
margin-top: -16px;
gap: 6px;
}
.news-card-small .news-card-title { font-size: 14px; -webkit-line-clamp: 2; line-height: 1.35; }
.news-card-small .news-card-excerpt { display: none; }
.news-card-small .news-card-author { display: none; }
/* Footer compacto (Respuestas + Pulso) sin border-top fuerte y padding reducido */
.news-card-small .news-card-meta {
padding: 8px var(--space-3) var(--space-3);
gap: 14px;
font-size: 11px;
}
/* CARD — SECUNDARIA (mosaic moderno 2026-05-08)
Compacta, sin meta, sin autor, sin excerpt. Solo imagen + cat pill + título.
Vive dentro de .news-hero-secundarias y se estira a 1fr de fila. */
/* CARD SECUNDARIA v8 fix — layout HORIZONTAL en desktop columna estrecha,
VERTICAL en tablet (3-col) y mobile (stack). Sin avatar, sin EDITOR rank
(sobran en formato compacto), meta footer en línea inline iconos+números. */
.news-card-secundaria {
position: relative;
display: flex; flex-direction: column;
background: linear-gradient(180deg, rgba(22,24,30,0.96) 0%, rgba(14,16,20,0.98) 100%);
border: 1px solid rgba(255,255,255,0.06);
border-radius: 12px;
overflow: hidden;
transition: transform 0.25s cubic-bezier(0.25,1,0.5,1),
border-color 0.25s ease,
box-shadow 0.25s ease;
}
.news-card-secundaria:hover {
transform: translateY(-2px);
border-color: rgba(0,212,255,0.30);
box-shadow: 0 8px 24px rgba(0,212,255,0.12), 0 4px 14px rgba(0,0,0,0.30);
}
.news-card-secundaria .news-card-link {
display: flex; flex-direction: column;
text-decoration: none; color: inherit;
}
.news-card-secundaria .news-card-media {
flex: 0 0 auto;
aspect-ratio: 16 / 9;
width: 100%;
position: relative;
overflow: hidden;
}
.news-card-secundaria .news-card-media img {
position: absolute; inset: 0;
width: 100%; height: 100%;
object-fit: cover;
transition: transform 0.5s cubic-bezier(0.25,1,0.5,1);
}
.news-card-secundaria:hover .news-card-media img { transform: scale(1.04); }
.news-card-secundaria .news-card-media::after { display: none; }
.news-card-secundaria .news-card-cat {
top: 8px; left: 8px;
font-size: 9px; padding: 3px 7px;
backdrop-filter: blur(8px);
z-index: 2;
}
.news-card-secundaria .news-card-body {
padding: 10px 12px 4px;
display: flex; flex-direction: column; gap: 6px;
}
.news-card-secundaria .news-card-title {
font-family: 'Inter', system-ui, sans-serif;
font-size: 13.5px;
font-weight: 700;
line-height: 1.3;
letter-spacing: -0.01em;
margin: 0;
color: var(--text, #f0f0f0);
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
/* En secundaria ocultamos: avatar + EDITOR rank + display Pulsos. Solo time inline. */
.news-card-secundaria .news-card-author {
margin-bottom: 0;
font-size: 11px;
gap: 6px;
}
.news-card-secundaria .news-card-author-avatar { display: none; }
.news-card-secundaria .news-card-author-info { gap: 0; }
.news-card-secundaria .news-card-author-info strong { display: none; }
.news-card-secundaria .news-card-author-rank { display: none; }
.news-card-secundaria .news-card-author-time { font-size: 11px; color: var(--text-muted, #888); }
.news-card-secundaria .news-card-author-time::before { display: none; }
.news-card-secundaria .news-card-pulsos-score { display: none; }
/* Meta footer compacto: solo iconos + números, sin labels largos */
.news-card-secundaria .news-card-meta {
padding: 6px 12px 10px;
gap: 8px;
font-size: 11px;
border-top: none;
align-items: center;
}
.news-card-secundaria .news-card-comments span { font-size: 11px; }
.news-card-secundaria .news-card-pulso-btn {
padding: 4px 8px;
font-size: 11px;
gap: 4px;
}
.news-card-secundaria .news-card-pulso-btn .pulso-label { font-size: 11px; }
/* Tablet/desktop con 3-col debajo del hero (700-959px): cards más anchas */
@media (min-width: 700px) and (max-width: 959px) {
.news-card-secundaria .news-card-title { font-size: 14px; -webkit-line-clamp: 3; }
}
@media (min-width: 1100px) {
.news-card-secundaria .news-card-title { font-size: 14px; }
}
/* ─── Encuesta compacta EMBEBIDA en hero card (v6) ───────────────
Vive en el hueco final tras meta. Sin fondo propio (hereda del
card), separator top sutil, padding mínimo. */
.news-card-hero-poll {
padding: var(--space-3) var(--space-4) var(--space-4);
border-top: 1px solid rgba(255,255,255,0.06);
margin: 0;
}
.news-card-hero-poll .hero-poll-widget,
.hero-poll-widget.is-compact {
background: transparent;
border: none;
border-radius: 0;
padding: 0;
}
.news-card-hero-poll .hero-poll-widget:hover,
.hero-poll-widget.is-compact:hover {
border-color: transparent;
box-shadow: none;
}
/* En modo compact (dentro del hero) reducimos sizes 1-2px para más densidad */
.hero-poll-widget.is-compact .hero-poll-question {
font-size: 13px; margin-bottom: 8px;
}
.hero-poll-widget.is-compact .hero-poll-options { gap: 6px; }
.hero-poll-widget.is-compact .hero-poll-option {
padding: 8px 12px; font-size: 12px;
}
.hero-poll-widget.is-compact .hero-poll-pct { font-size: 14px; }
.hero-poll-widget.is-compact .hero-poll-cta {
margin-top: 10px; padding: 8px 14px; font-size: 11px;
}
/* ─── Fila de 3 destacadas debajo del hero (hero v6) ─────────────
Mobile: stack 1col (cards full-width legibles).
Desktop ≥700px: grid 3-col igualadas. */
.news-hero-secundarias {
display: grid;
grid-template-columns: 1fr;
gap: var(--space-3);
margin-top: var(--space-3);
}
@media (min-width: 700px) {
.news-hero-secundarias { grid-template-columns: repeat(3, 1fr); gap: var(--space-3); }
}
/* En el contexto del hero block, las secundarias quedan más bajitas */
.news-hero-secundarias .news-card-secundaria .news-card-media { aspect-ratio: 16/9; }
/* (Reglas hero v7 acciones-en-autor-row eliminadas — restaurado meta footer clásico) */
/* Widget encuesta compacta — espejo del mockup user. Reglas base
(también aplicables si se reutiliza el widget en otro contexto). */
.hero-poll-widget {
background: linear-gradient(180deg, rgba(20,22,26,0.92) 0%, rgba(13,15,18,0.96) 100%);
border: 1px solid rgba(0,212,255,0.10);
border-radius: 18px;
padding: var(--space-4);
display: flex; flex-direction: column;
transition: border-color 0.25s ease, box-shadow 0.25s ease;
}
.hero-poll-widget:hover {
border-color: rgba(0,212,255,0.25);
box-shadow: 0 8px 28px rgba(0,212,255,0.08);
}
.hero-widget-title {
font-family: 'Inter', sans-serif;
font-size: 12px; font-weight: 800;
text-transform: uppercase; letter-spacing: 0.12em;
color: var(--text-secondary, #a0a0a0);
margin: 0 0 var(--space-3);
display: flex; align-items: center; gap: 6px;
}
.hero-widget-title svg { color: var(--cyan-accent, #00d4ff); flex-shrink: 0; }
.hero-widget-title span { color: var(--cyan-accent, #00d4ff); }
.hero-poll-question {
font-size: 14px; font-weight: 700; line-height: 1.35;
color: var(--text-primary, #fff);
margin: 0 0 var(--space-3);
}
.hero-poll-options { display: flex; flex-direction: column; gap: 8px; }
.hero-poll-option {
position: relative;
display: flex; align-items: center; justify-content: space-between;
gap: 8px;
background: rgba(255,255,255,0.04);
border: 1px solid transparent;
border-radius: 8px;
padding: 10px 12px;
font-size: 12.5px; font-weight: 600;
color: var(--text-primary, #fff);
overflow: hidden;
transition: border-color 0.25s ease, background 0.25s ease, transform 0.18s ease;
/* Botón clickable: reset estilos de