/* 
--------------------------------------------------------------------------------
8bitroot Design System v1.0
--------------------------------------------------------------------------------
*/

@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;600;800&family=Press+Start+2P&display=swap');

html {
    scroll-behavior: smooth;
    scroll-padding-top: 60px; /* Compensar la altura del menú sticky */
}

:root {
    /* Paleta Digital Paper (Default) — Ultra Premium Light */
    --bg-main: #F4F7F6;
    --bg-surface: #FFFFFF;
    --bg-accent: #E0E4E6;
    
    --text-primary: #1A1C1E;
    --text-secondary: #4A4D52;
    --text-muted: #8E9296;
    
    --color-primary: #00F5D4; /* Electric Cyan / Aqua */
    --color-secondary: #FF006E; /* Bit-Magenta */
    --color-accent: #007A7C; /* Deep Teal */
    
    --color-success: #2bd48f;
    --color-warning: #fbc02d;
    --color-danger: #ff5252;
    
    --glow-primary: 0 0 20px rgba(0, 245, 212, 0.3);
    --glass: rgba(255, 255, 255, 0.7);
    --glass-hover: rgba(255, 255, 255, 0.9);
    --border-glass: rgba(0, 245, 212, 0.2); /* Tinted with Electric Cyan */

    --font-main: 'Outfit', sans-serif;
    --font-retro: 'Press Start 2P', cursive;

    --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    
    /* Magazine Layout Vars */
    --container-width: 1100px;
    --sidebar-width: 33%;
    --content-width: 66%;
}

/* Modo Oscuro (Dark Theme) — Deep Midnight */
.dark-theme {
    --bg-main: #0D1117;
    --bg-surface: #161b22;
    --bg-accent: #21262d;
    
    --text-primary: #e6edf3;
    --text-secondary: #8b949e;
    --text-muted: #6e7681;
    
    --glow-primary: 0 0 15px rgba(0, 245, 212, 0.4);
    --glass: rgba(13, 17, 23, 0.6);
    --glass-hover: rgba(13, 17, 23, 0.85);
    --border-glass: rgba(255, 255, 255, 0.1);
}

/* Modo Sepia (Reading Mode) — Aged Paper */
.sepia-theme {
    --bg-main: #f4ecd8;
    --bg-surface: #fdf6e3;
    --bg-accent: #eee8d5;
    
    --text-primary: #5b4636;
    --text-secondary: #856751;
    --text-muted: #a38d7d;
    
    --border-glass: rgba(91, 70, 54, 0.1);
    --glass: rgba(253, 246, 227, 0.6);
    --glass-hover: rgba(253, 246, 227, 0.85);
}

/* Modo Terminal (Dev Mode) — Tokyo Night / Matrix feel */
.terminal-theme {
    --bg-main: #1a1b26;
    --bg-surface: #16161e;
    --bg-accent: #24283b;
    
    --text-primary: #c0caf5;
    --text-secondary: #9aa5ce;
    --text-muted: #565f89;
    
    --color-primary: #7dcfff;
    --color-secondary: #bb9af7;
    
    --border-glass: rgba(125, 207, 255, 0.1);
    --glass: rgba(22, 22, 30, 0.7);
    --glass-hover: rgba(22, 22, 30, 0.9);
}


* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

h1, h2, h3, h4, h5, h6 {
    font-weight: 600;
}

body {
    background-color: var(--bg-main);
    color: var(--text-primary);
    font-family: var(--font-main);
    line-height: 1.6;
    overflow-x: hidden;
}

/* Main Container — lateral margins */
.container {
    max-width: var(--container-width);
    margin: 0 auto;
    padding: 0 40px;
}

/* Utilidades Premium */
.glass-effect {
    background: var(--glass);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    border: 2px solid var(--border-glass); /* Increased to 2px */
    border-radius: 20px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03); /* Subtle shadow for depth */
    transition: var(--transition);
}

.glass-effect:hover {
    border-color: rgba(0, 245, 212, 0.5); /* Highlight more on hover */
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08);
    transform: translateY(-4px) scale(1.005); /* Subtle lift effect */
}

.neon-text {
    text-shadow: 0 0 8px rgba(92, 179, 255, 0.4);
}

.logo-gray {
    color: var(--text-secondary);
}

.txt-magenta {
    color: var(--color-secondary) !important;
}

.logo-sm {
    font-size: 1.2rem;
    letter-spacing: -0.5px;
}

.logo-style-text {
    font-family: var(--font-main);
    font-weight: 400;
    color: #000;
    letter-spacing: -0.5px;
}

.txt-white {
    color: #ffffff !important;
}

.txt-pixel {
    font-family: var(--font-retro);
    font-size: 0.85em;
    letter-spacing: 2px;
    text-transform: none;
    
    /* Degradado Color Vivo / Synthwave */
    background: linear-gradient(180deg, #b678ff 0%, #5cb3ff 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    
    /* Borde de los píxeles definido */
    -webkit-text-stroke: 1px rgba(255, 255, 255, 0.75);
    
    /* Sombra sólida de bloque 8-bit */
    filter: drop-shadow(3px 3px 0 rgba(0, 0, 0, 0.8));
    display: inline-block;
}

.btn-primary {
    background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
    color: white;
    padding: 10px 24px;
    border-radius: 12px;
    border: none;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition);
    box-shadow: var(--glow-primary);
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 25px rgba(0, 242, 255, 0.6);
}

/* Animaciones de Entrada */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

.animate-in {
    animation: fadeIn 0.8s ease forwards;
}

/* =========================================================
   XP BAR (EXP PROGRESS)
   ========================================================= */
.xp-bar-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    z-index: 9999;
    background: rgba(0,0,0,0.2);
}

.xp-bar {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, var(--color-primary), var(--color-secondary));
    box-shadow: 0 0 10px var(--color-primary);
    transition: width 0.1s ease-out;
    position: relative;
}

/* Pixel tip for the XP bar */
.xp-bar::after {
    content: '';
    position: absolute;
    right: 0;
    top: -2px;
    width: 8px;
    height: 8px;
    background: #fff;
    box-shadow: 0 0 8px #fff;
    border-radius: 0;
}


/* Magazine Style Top Bar */
.trending-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 40px;
    font-size: 0.8rem;
    border-bottom: 1px solid var(--border-glass);
    background: #0D1117; /* Sólido para que no se vean los píxeles del header detrás */
    color: #ffffff;
    border-radius: 0;
    font-family: monospace;
    position: relative;
    z-index: 10; /* Asegurar que quede encima de todo el header */
}

.trending-label {
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--color-primary); /* Electric Cyan for the label */
}

.trending-ticker {
    flex: 1;
    margin: 0 20px;
    overflow: hidden;
    white-space: nowrap;
    position: relative;
}

.trending-ticker span {
    color: #ffffff !important;
}

.ticker-content {
    display: inline-block;
    white-space: nowrap;
    animation: ticker-slide 15s linear infinite;
    will-change: transform;
}

.ticker-content:hover {
    animation-play-state: paused;
    cursor: pointer;
}

@keyframes ticker-slide {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

.trending-social a {
    color: #ffffff;
    margin-left: 10px;
    font-size: 1rem;
    transition: var(--transition);
}

.trending-social a:hover {
    color: var(--color-primary);
}

/* Layout & Components: Header Editorial */
.main-header {
    background: transparent;
    position: relative;
    z-index: 1000;
    margin: 0;
    padding: 0;
    border-radius: 0;
    border-bottom: none;
}

/* Nuevo contenedor unificado para Logo */
.brand-bg-area {
    background-color: #ffffff;
    position: relative;
    overflow: hidden;
    border-bottom: none;
    padding-bottom: 50px; /* Espacio extra: el fondo blanco llega DEBAJO del menú */
}

/* Fondo invertido (píxeles desde arriba) */
.brand-bg-area::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    z-index: 0;
    opacity: 0.6;
    background-image: url('../img/footer-pixels.svg');
    background-repeat: no-repeat;
    background-position: center top; 
    background-size: 100% auto;
    transform: rotate(180deg);
    pointer-events: none;
}

.header-content {
    position: relative;
    z-index: 2; /* Por encima de los píxeles */
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 30px 40px;
    max-width: var(--container-width);
    margin: 0 auto;
}

.logo {
    font-weight: 800;
    font-size: 2.2rem;
    letter-spacing: -1px;
}

/* Ocultar el logo móvil en escritorio */
.nav-logo-mobile {
    display: none;
}

.header-ad-space {
    width: 728px;
    height: 90px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border: none;
    background: transparent;
    color: var(--text-muted);
}

.ad-label { font-size: 0.6rem; text-transform: uppercase; letter-spacing: 2px;}
.ad-text { font-weight: 800; font-size: 1.2rem; }

/* Full-width strip behind the nav (white background edge-to-edge) */
.nav-bg-strip {
    position: sticky;
    top: 0;
    z-index: 1001;
    background-color: #ffffff;
    border-bottom: 1px solid var(--border-glass);
    margin-top: -50px; /* Subir para solaparse con el fondo del header */
    transition: box-shadow 0.3s ease;
}

.nav-bg-strip.sticky-shadow {
    box-shadow: 0 4px 20px rgba(0,0,0,0.12);
}

/* Sticky Main Navigation (centered content inside the strip) */
.main-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 40px;
    max-width: var(--container-width);
    margin: 0 auto;
    background: transparent;
    border: none;
    box-shadow: none;
}

/* Mini logo: oculto por defecto, aparece cuando el logo principal sale */
.nav-logo-mini {
    display: none; /* Oculto inicialmente */
    font-weight: 800;
    font-size: 1.1rem;
    letter-spacing: -0.5px;
    white-space: nowrap;
    margin-right: 15px;
    opacity: 0;
    transform: translateX(-10px);
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.nav-logo-mini.visible {
    display: block;
    opacity: 1;
    transform: translateX(0);
}

/* Desactivar hover del glass-effect en el menú */
.main-nav.glass-effect:hover,
.main-nav:hover {
    transform: none !important;
    scale: 1 !important;
}

/* Dynamic Shadow generated via JS on scroll */
.sticky-shadow {
    box-shadow: 0 10px 30px rgba(0,0,0,0.5); /* Strong shadow para que parezca que flota */
}

.nav-links {
    display: flex;
    gap: 5px;
}

.nav-links a {
    color: var(--text-primary);
    text-decoration: none;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.72rem; /* Compact font to avoid 'overload' overflow */
    padding: 12px 10px; /* Slimmer padding */
    transition: var(--transition);
    white-space: nowrap; 
    letter-spacing: 0.4px; /* Slightly tighter for premium fit */
}

.nav-links a:hover {
    background: rgba(0, 0, 0, 0.06);
    color: var(--color-primary);
}

.nav-links a.active {
    background: var(--color-primary);
    color: #000;
}

.header-controls {
    display: flex;
    gap: 10px;
    align-items: center;
    padding: 10px;
}

.btn-retro {
    padding: 6px 12px;
    cursor: pointer;
    color: var(--text-primary);
    border-radius: 5px;
    font-size: 0.8rem;
    background: var(--bg-surface);
    border: 1px solid var(--border-glass);
    transition: var(--transition);
}

.btn-retro:hover {
    background: var(--glass-hover);
    color: var(--color-primary);
}

.container {
    max-width: var(--container-width);
    margin: 20px auto;
    padding: 0 20px;
}

.hero-article {
    position: relative;
    height: 500px;
    overflow: hidden;
    display: flex;
    align-items: flex-end;
    padding: 40px;
    margin-bottom: 60px;
}

.hero-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to top, var(--bg-main), transparent), url('../img/hero-placeholder.jpg') center/cover;
    z-index: -1;
}

.hero-content {
    max-width: 700px;
}

.tag-exclusive {
    display: none !important;
}

.hero-title {
    font-size: 1.6rem;
    margin: 10px 0;
    line-height: 1.25;
    font-weight: 700;
    color: #fff;
}

.hero-p {
    color: var(--text-secondary);
    font-size: 1rem;
    margin-bottom: 20px;
    line-height: 1.4;
}

.news-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 30px;
}

.news-card {
    padding: 20px;
    transition: var(--transition);
}

.news-card-img {
    background: #222;
    height: 180px;
    border-radius: 10px;
    margin-bottom: 15px;
}

.main-footer {
    margin-top: 80px;
    padding: 40px;
    border-top: 1px solid var(--border-glass);
    text-align: center;
    color: var(--text-muted);
}

.main-footer a {
    color: var(--text-muted);
}

.txt-secondary {
    color: var(--color-secondary);
}

.card-p {
    font-size: 0.9rem;
    margin-bottom: 0;
}

/* =========================================================
   MAGAZINE ARCHITECTURE (Newsmag Inspired)
   ========================================================= */

/* The Big Grid */
.big-grid {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 5px;
    height: 500px;
    margin-bottom: 15px;
}

.big-grid-secondary {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 5px;
}

.bg-card {
    position: relative;
    overflow: hidden; /* Clave para que el zoom interno no desborde */
    height: 100%;
    min-height: 200px;
    cursor: pointer;
    border-radius: 8px; /* Redondear si preferimos un toque moderno, o dejar 0 si mas estricto a newsmag */
}

.card-bg-image {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1); /* Curva suave y fluida */
    z-index: 0;
}

.bg-card:hover .card-bg-image {
    transform: scale(1.08);
}

.bg-card::before {
    content: '';
    position: absolute;
    bottom: 0; left: 0; right: 0; top: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.95) 0%, rgba(0,0,0,0.2) 60%, transparent 100%);
    z-index: 1;
    transition: background 0.4s ease;
}

.bg-card:hover::before {
    background: linear-gradient(to top, rgba(0,0,0,1) 0%, rgba(0,0,0,0.4) 60%, transparent 100%);
}

.bg-content {
    position: absolute;
    bottom: 20px;
    left: 20px;
    right: 20px;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: flex-start; /* Asegura que las etiquetas no se estiren a todo lo ancho */
}

.card-title {
    font-size: 0.95rem;
    margin-top: 8px;
    line-height: 1.3;
    font-weight: 600;
    color: #fff; /* Always white regardless of theme due to image background */
}

/* Base Magazine Layout */
.magazine-layout {
    display: flex;
    gap: 30px;
    align-items: flex-start;
}

.content-area {
    flex: 0 0 var(--content-width);
    max-width: var(--content-width);
    min-width: 0;
}

.sidebar-area {
    flex: 0 0 var(--sidebar-width);
    max-width: var(--sidebar-width);
    position: sticky;
    top: 90px;
}

/* Category Blocks */
.category-block {
    margin-bottom: 40px;
}

.block-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 2px solid var(--border-glass);
    padding-bottom: 10px;
    margin-bottom: 20px;
}

.block-header h2 {
    font-weight: 600;
    font-size: 1.15rem;
    position: relative;
    letter-spacing: 0.5px;
}

.block-header h2::after {
    content: '';
    position: absolute;
    bottom: -12px;
    left: 0;
    width: 50%;
    height: 2px;
    background: var(--color-primary);
}
.view-all {
    color: var(--color-primary);
    font-size: 0.8rem;
    text-transform: uppercase;
    font-weight: 800;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 16px;
    border-radius: 20px;
    border: 1px solid var(--color-primary);
    background: #000;
    transition: all 0.3s ease;
    animation: neonBreathe 2s infinite ease-in-out;
}

.view-all i {
    transition: transform 0.3s ease;
}

.view-all:hover {
    background: var(--color-primary);
    color: #111;
    transform: translateY(-2px);
    box-shadow: 0 5px 20px var(--color-primary);
}

.view-all:hover i {
    transform: translateX(4px);
}

@keyframes neonBreathe {
    0%, 100% { box-shadow: 0 0 3px var(--color-primary); }
    50% { box-shadow: 0 0 12px var(--color-primary); }
}

.block-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.main-cat-post {
    padding: 0 !important;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.main-cat-post .news-card-img {
    height: 300px;
    border-radius: 0;
    margin-bottom: 20px;
    width: 100%;
}

.main-cat-post h3,
.main-cat-post .card-p,
.main-cat-post .author-byline {
    padding-left: 25px;
    padding-right: 25px;
}

.main-cat-post .author-byline {
    margin-top: auto;
    padding-bottom: 25px;
    border-top: 1px solid var(--border-glass);
    padding-top: 15px;
}

.side-cat-posts {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
    gap: 10px; /* Gap mínimo */
}

.small-post {
    display: flex;
    gap: 15px;
    align-items: stretch;
    padding: 0 !important;
    overflow: hidden;
    height: 100px; /* Fixed height for consistent alignment */
}

.small-post-img {
    width: 110px;
    background: #222;
    flex-shrink: 0;
}

.small-post-info {
    padding: 10px 15px 10px 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex: 1;
}

.small-post-info h4 {
    font-size: 0.9rem;
    line-height: 1.3;
    margin-bottom: 5px;
    transition: color 0.3s ease;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2; /* Propiedad estándar */
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.small-post:hover .small-post-info h4 {
    color: var(--color-primary);
}

.post-date {
    font-size: 0.7rem;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: 5px;
}

/* =========================================================
   PARALLAX SECTION
   ========================================================= */
.parallax-divider {
    position: relative;
    height: 400px;
    width: 100vw;
    margin-left: calc(-50vw + 50%); /* Hack para que rompa el contenedor y ocupe 100% pantalla */
    margin-bottom: 40px;
    background-attachment: fixed; /* La magia real del Parallax */
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.parallax-overlay {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.6);
    z-index: 1;
}

.parallax-content {
    position: relative;
    z-index: 2;
    color: #fff;
    max-width: 800px;
    padding: 20px;
}

.parallax-content h2 {
    font-size: 1.95rem;
    font-weight: 700;
    margin-bottom: 20px;
    text-shadow: 0 4px 10px rgba(0,0,0,0.8);
}

/* Widgets */
.widget {
    margin-bottom: 30px;
    padding: 20px;
}

.widget-title {
    font-size: 1.2rem;
    margin-bottom: 20px;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.social-grid {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.social-item {
    display: flex;
    align-items: center;
    padding: 12px 20px;
    border-radius: 6px;
    color: white;
    cursor: pointer;
    transition: var(--transition);
}

.social-item:hover {
    transform: translateX(5px);
}

.social-item i {
    font-size: 1.5rem;
    margin-right: 15px;
}

.social-stats {
    display: flex;
    flex-direction: column;
    font-size: 0.7rem;
    text-transform: uppercase;
}

.social-stats span {
    font-size: 1.1rem;
    font-weight: 800;
}

/* Premium SVG Social Icons */
.premium-social-item {
    display: flex;
    align-items: center;
}
.icon-premium {
    width: 38px;
    height: 38px;
    padding: 8px;
    border-radius: 12px;
    background: linear-gradient(145deg, rgba(255,255,255,0.08), rgba(255,255,255,0.02));
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255,255,255,0.1);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    display: inline-flex;
    justify-content: center;
    align-items: center;
    color: var(--text-primary);
    margin-right: 15px;
}
.social-item:hover .icon-premium {
    background: var(--color-primary);
    color: #000;
    box-shadow: 0 0 25px rgba(92, 179, 255, 0.6);
    transform: translateY(-4px) scale(1.05);
}
.icon-premium svg {
    width: 20px;
    height: 20px;
}

/* Flat Social Counter (Image Style) */
.social-flat-grid {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.social-flat-btn {
    display: flex;
    align-items: center;
    color: #fff;
    text-decoration: none;
    border-radius: 4px;
    height: 46px;
    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
    transition: filter 0.3s ease;
    overflow: hidden;
    position: relative;
}
.social-flat-btn:hover {
    filter: brightness(1.1);
}
.flat-fb { background: linear-gradient(135deg, #1877F2 0%, #0c59c2 100%); box-shadow: 0 4px 15px rgba(24,119,242,0.3); border-top: 1px solid rgba(255,255,255,0.1); }
.flat-x { background: linear-gradient(135deg, #1f1f1f 0%, #000000 100%); box-shadow: 0 4px 15px rgba(0,0,0,0.5); border-top: 1px solid rgba(255,255,255,0.08); }
.flat-yt { background: linear-gradient(135deg, #FF0000 0%, #c40000 100%); box-shadow: 0 4px 15px rgba(255,0,0,0.3); border-top: 1px solid rgba(255,255,255,0.15); }

.sf-icon {
    width: 50px;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    border-right: 1px solid rgba(255,255,255,0.15);
    position: relative;
    overflow: hidden;
}
.sf-icon::after {
    content: '';
    position: absolute;
    width: 100px;
    height: 100px;
    background: rgba(0,0,0,0.15);
    transform: rotate(45deg) translate(28px, 15px);
    z-index: 1;
}
.sf-icon svg {
    width: 26px;
    height: 26px;
    fill: #ffffff;
    z-index: 2;
    position: relative;
    transform: perspective(100px) translate3d(-2px, -2px, 5px);
    filter: 
        drop-shadow(1px 1px 0px rgba(0,0,0,0.25)) 
        drop-shadow(2px 2px 0px rgba(0,0,0,0.25)) 
        drop-shadow(3px 3px 0px rgba(0,0,0,0.25)) 
        drop-shadow(5px 5px 8px rgba(0,0,0,0.7));
    transition: transform 0.3s ease, filter 0.3s ease;
}
.social-flat-btn:hover .sf-icon svg {
    transform: perspective(100px) translate3d(-1px, -1px, 2px);
    filter: 
        drop-shadow(1px 1px 0px rgba(0,0,0,0.25)) 
        drop-shadow(2px 2px 5px rgba(0,0,0,0.5));
}
.sf-stats {
    flex: 1;
    padding-left: 15px;
    font-size: 14px;
    font-weight: 500;
}
.sf-stats strong {
    font-weight: 700;
    margin-right: 5px;
    font-size: 15px;
}
.sf-action {
    width: 90px;
    text-align: center;
    font-size: 13px;
    font-weight: 700;
    border-left: 1px solid rgba(255,255,255,0.15);
    text-transform: uppercase;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    letter-spacing: 0.5px;
}

.widget-post-list {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.ad-widget {
    text-align: center;
    border: 1px solid var(--border-glass);
}

/* Footer Editorial */
.main-footer {
    position: relative;
    border-radius: 0 !important;
    padding: 100px 0 60px 0; /* Expanded padding for the aesthetic fade */
    margin-top: 60px;
    background-color: #ffffff;
    overflow: hidden; /* Contain the pseudo-element background */
}

/* Background layer for the mathematical pixel dispersal */
.main-footer::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    z-index: 0;
    opacity: 1;
    background-image: url('../img/footer-pixels.svg');
    background-repeat: no-repeat;
    background-position: center bottom;
    background-size: 100% auto;
}

/* Ensure footer content stays above the background and fully visible */
.footer-grid, .footer-bottom {
    position: relative;
    z-index: 2;
    text-shadow: 0 0 12px #ffffff, 0 0 4px #ffffff; /* 'Safe-zone' glow to protect text from pixel noise */
}

.footer-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1.5fr;
    gap: 40px;
    max-width: var(--container-width);
    margin: 0 auto;
    text-align: left;
}

.footer-links h3 {
    color: var(--text-primary);
    margin-bottom: 20px;
    font-weight: 800;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    font-size: 1rem;
}

.footer-links a {
    display: block;
    margin-bottom: 10px;
    font-size: 0.95rem;
    text-decoration: none;
    color: var(--text-secondary);
    font-weight: 500;
    transition: var(--transition);
}

.footer-links a:hover {
    color: var(--color-primary);
}

.footer-bottom {
    text-align: center;
    margin-top: 40px;
    padding: 30px 0;
    color: var(--text-secondary); /* Darker than muted for better legibility */
    font-size: 0.85rem;
    font-weight: 600;
}

.footer-picks .small-post-info {
    padding-top: 0;
    padding-bottom: 0;
}

/* Responsive Overrides */
@media (max-width: 1024px) {
    .big-grid {
        grid-template-columns: 1fr;
        height: auto;
    }
    .big-grid-primary {
        height: 400px;
    }
    .magazine-layout {
        flex-direction: column;
    }
    .content-area, .sidebar-area {
        flex: 1 1 100%;
        max-width: 100%;
    }
    .block-content, .gadgets-grid-bottom, .recipes-grid {
        grid-template-columns: 1fr;
    }
    .footer-grid {
        grid-template-columns: 1fr;
        text-align: center;
    }
    .header-ad-space {
        display: none;
    }
    .main-nav {
        overflow-x: auto;
    }
    .trending-bar {
        flex-direction: column;
        gap: 10px;
    }
    .latest-feed-item {
        flex-direction: column;
        align-items: flex-start;
    }
    .latest-feed-img {
        width: 100%;
        height: 250px;
    }
    .latest-feed-info {
        padding: 25px; /* Restaura padding en móvil para que no toque bordes */
    }
}

/* =========================================================
   NEW MEGA LAYOUT BLOCKS (PHASE 2)
   ========================================================= */

/* Block 2: Video Playlist Style */
.video-playlist-block {
    background: var(--glass);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    padding: 30px;
    border-radius: 12px;
    margin-bottom: 40px;
    border: 2px solid var(--border-glass);
    transition: var(--transition);
}

.video-playlist-block:hover {
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08);
    transform: translateY(-4px) scale(1.005);
}

/* Ensure consistent text colors in the light container */
.video-playlist-block .block-header h2 { color: var(--text-primary); }
.video-playlist-block .hero-title { color: #fff; text-shadow: 0 2px 10px rgba(0,0,0,0.5); }
.video-playlist-block .author-name { color: var(--text-secondary); }
.video-playlist-main {
    width: 100%;
    height: 450px;
    margin-bottom: 20px;
    position: relative;
    border-radius: 8px;
    overflow: hidden;
}
.video-playlist-main i.fa-play-circle {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    font-size: 4rem; color: rgba(255,255,255,0.8); z-index: 5; transition: 0.3s;
}
.video-playlist-main:hover i.fa-play-circle { transform: translate(-50%, -50%) scale(1.1); color: var(--color-primary); }
.video-playlist-thumbs {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}
.elite-card {
    position: relative;
    height: 145px;
    border-radius: 12px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.elite-card .card-title {
    font-size: 0.88rem !important;
    line-height: 1.25;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-bottom: 8px;
    font-weight: 700;
}
.video-thumb { height: 145px; } /* Mantener compatibilidad si se usa */

/* Block 3: Gadgets Grid */
.gadgets-grid-top {
    height: 300px;
    margin-bottom: 20px;
}
.gadgets-grid-bottom {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}
.gadgets-grid-bottom .bg-card { height: 200px; }
.gadgets-grid-bottom .card-title { font-size: 0.95rem; }

/* Block 4: Recipes Grid (Manga / Review) */
.recipes-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, 1fr);
    gap: 20px;
}
.recipes-grid .bg-card { height: 250px; }

/* Latest Articles (Classic Blog List) */
.latest-feed-item {
    display: grid;
    grid-template-columns: 260px 1fr;
    gap: 0;
    margin-bottom: 30px;
    background: var(--glass-card);
    border: 1px solid var(--border-glass);
    border-radius: 20px;
    transition: var(--transition);
    align-items: stretch;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    padding: 0 !important;
    overflow: hidden;
}

.latest-feed-img {
    width: 100%;
    height: 100% !important;
    border-radius: 0 !important;
    background: #111;
    overflow: hidden;
    position: relative;
    display: flex;
}

.latest-feed-info {
    padding: 30px 40px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start; /* Evita que las etiquetas se estiren a todo lo ancho */
}

.latest-feed-info h3 {
    font-size: 1.45rem;
    margin-bottom: 15px;
    line-height: 1.2;
}

.latest-feed-info p {
    color: var(--text-secondary);
    margin-bottom: 20px;
    font-size: 1.05rem;
}

.latest-feed-info .author-byline {
    margin-top: auto;
    padding-top: 20px;
    border-top: 1px solid var(--border-glass);
    width: 100%;
}

.latest-feed-meta {
    font-size: 0.8rem;
    color: var(--text-muted);
    text-transform: uppercase;
    font-weight: 800;
}

/* =========================================================
   TRENDING ROW (3 articles horizontally after Big Grid)
   ========================================================= */
.trending-row {
    margin-bottom: 30px;
}
.trending-row-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}
.bg-card {
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    height: 100%;
    display: flex;
    flex-direction: column;
    border: 1px solid var(--border-glass);
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
    cursor: pointer;
}

/* Lógica de color inyectada por JavaScript (Smart Contrast) */
.theme-light-bg .bg-content h1, 
.theme-light-bg .bg-content h3, 
.theme-light-bg .bg-content h4,
.theme-light-bg .hero-title,
.theme-light-bg .card-title,
.theme-light-bg .small-post-info h4 {
    color: #111111 !important; /* Texto oscuro para fondo claro */
    text-shadow: 0 1px 3px rgba(255,255,255,0.8);
}
.theme-light-bg .overlay-byline,
.theme-light-bg .post-date {
    color: #333333 !important;
}
/* Invertir el gradient nativo de ::before si la IA detecta una imagen muy blanca */
.theme-light-bg::before {
    background: linear-gradient(to top, rgba(255,255,255,0.8) 0%, rgba(255,255,255,0) 100%) !important;
}
.trending-row-item {
    display: flex;
    flex-direction: column;
    border-radius: 8px;
    overflow: hidden;
}
.trending-row-img {
    height: 180px;
    position: relative;
    overflow: hidden;
}
.trending-row-info {
    padding: 15px;
}
.trending-row-info h3 {
    font-size: 1rem;
    line-height: 1.3;
    margin-top: 8px;
    margin-bottom: 8px;
}
.tag-sm {
    font-size: 0.7rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* =========================================================
   THREE COLUMN ROW (between category blocks)
   ========================================================= */
.three-col-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-bottom: 30px;
}
.three-col-item {
    border-radius: 8px;
    overflow: hidden;
}

/* Fix para imágenes superiores en tarjetas (elimina bordes curvos abajo y ajusta arriba) */
.trending-row-item .bg-card,
.three-col-item .bg-card {
    border-radius: 0;
    border: none;
}
.trending-row-item .bg-card .card-bg-image,
.three-col-item .bg-card .card-bg-image {
    border-radius: 0;
}

/* =========================================================
   FOUR COLUMN GRID (Gaming Arena strip like Fashion Week)
   ========================================================= */
.four-col-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

.trending-bg-height article {
    height: 280px;
}

/* =========================================================
   AD INLINE (Consistent ad placeholder between sections)
   ========================================================= */
.ad-inline {
    margin: 35px 0;
    text-align: center;
    border: 1px dashed var(--border-glass);
    padding: 35px;
    border-radius: 8px;
}
.ad-label-inline {
    font-size: 0.65rem;
    color: var(--text-muted);
    display: block;
    letter-spacing: 2px;
    margin-bottom: 8px;
    text-transform: uppercase;
}

/* =========================================================
   EVEN MORE NEWS (Full-width grid section)
   ========================================================= */
.even-more-section {
    margin-bottom: 40px;
}
.even-more-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 25px;
}
.even-more-item {
    border-radius: 8px;
    overflow: hidden;
}
.even-more-item .bg-card {
    border-radius: 8px 8px 0 0;
}
.even-more-info {
    padding: 15px;
}
.even-more-info h3 {
    font-size: 1.05rem;
    line-height: 1.3;
    margin-bottom: 10px;
}
.even-more-info .card-p {
    color: var(--text-secondary);
    font-size: 0.85rem;
    margin-bottom: 8px;
}

/* =========================================================
   PAGINATION (Newsmag style page numbers)
   ========================================================= */
.pagination {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 40px;
    margin-bottom: 40px;
}
.page-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: 1px solid var(--border-glass);
    border-radius: 4px;
    text-decoration: none;
    color: var(--text-secondary);
    font-size: 0.9rem;
    font-weight: 600;
    transition: var(--transition);
}
.page-num:hover {
    background: var(--glass-hover);
    color: var(--color-primary);
    border-color: var(--color-primary);
}
.page-num.active {
    background: var(--color-primary);
    color: #1A1C1E;
    border-color: var(--color-primary);
    font-weight: 800;
}

/* =========================================================
   DATA SCANNING ANIMATION (For Archive Pagination)
   ========================================================= */
.latest-articles-list {
    position: relative;
    transition: opacity 0.3s ease;
}

.scan-screen {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0, 255, 243, 0.05);
    pointer-events: none;
    z-index: 10;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.scan-bar {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 4px;
    background: linear-gradient(to bottom, transparent, var(--color-primary), white, var(--color-primary), transparent);
    box-shadow: 0 0 15px var(--color-primary);
    z-index: 11;
    display: none;
}

.is-scanning .scan-screen {
    opacity: 1;
}

.is-scanning .scan-bar {
    display: block;
    animation: scanSweep 0.8s ease-in-out infinite;
}

@keyframes scanSweep {
    0% { top: 0; }
    100% { top: 100%; }
}

.content-loading {
    opacity: 0.3;
    filter: blur(2px) grayscale(1);
    pointer-events: none;
}

.page-num.disabled {
    opacity: 0.4;
    cursor: not-allowed;
    pointer-events: none;
    filter: grayscale(1);
}


/* =========================================================
   UX CORE WIDGETS
   ========================================================= */
.reading-time {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.75rem;
    font-weight: 800;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 10px;
    background: var(--bg-accent);
    padding: 4px 10px;
    border-radius: 4px;
}

.pixel-icon {
    vertical-align: middle;
    margin-right: 5px;
    width: 16px;
    height: 16px;
    filter: drop-shadow(1px 1px 0 rgba(0,0,0,0.5));
}

.glossary-tooltip {
    border-radius: 8px !important;
    box-shadow: 0 10px 30px rgba(0,0,0,0.2) !important;
    font-family: var(--font-main);
}

/* =========================================================
   MISSION 3: ENGAGEMENT & JUICE
   ========================================================= */

/* Achievement PopUp */
.achievement-popup {
    position: fixed;
    bottom: 20px;
    right: 20px;
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 15px 20px;
    border-radius: 12px;
    z-index: 10001;
    min-width: 300px;
    border-left: 5px solid var(--color-primary);
    transition: all 0.5s ease;
}

.ach-icon { font-size: 2rem; }
.ach-label { font-size: 0.65rem; font-weight: 800; color: var(--color-primary); letter-spacing: 1px; }
.ach-title { font-size: 1rem; font-weight: 700; margin: 2px 0; }
.ach-desc { font-size: 0.75rem; color: var(--text-secondary); opacity: 0.8; }

/* Glitch Effect on Headlines */
@keyframes glitch {
    0% { transform: translate(0); }
    20% { transform: translate(-2px, 2px); }
    40% { transform: translate(-2px, -2px); }
    60% { transform: translate(2px, 2px); }
    80% { transform: translate(2px, -2px); }
    100% { transform: translate(0); }
}

.hero-title:hover, .card-title:hover {
    animation: glitch 0.3s cubic-bezier(.25,.46,.45,.94) infinite;
    color: var(--color-primary);
}

/* Poll Widget */
.poll-widget { text-align: left; }
.poll-options { display: flex; flex-direction: column; gap: 10px; margin-top: 15px; }
.poll-option {
    background: var(--bg-accent);
    padding: 12px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.85rem;
    font-weight: 600;
    transition: var(--transition);
    position: relative;
    overflow: hidden;
}
.poll-option:hover { background: var(--glass-hover); transform: translateX(5px); }
.poll-bar {
    position: absolute; bottom: 0; left: 0; height: 3px;
    background: var(--color-primary); transition: width 1s ease;
}
.poll-val { position: absolute; right: 10px; top: 12px; font-size: 0.7rem; color: var(--color-primary); font-weight: 800; }
.voted .poll-option { pointer-events: none; }




/* =========================================================
   EXTENDED RESPONSIVE (all new blocks)
   ========================================================= */
@media (max-width: 1024px) {
    .trending-row-grid {
        grid-template-columns: 1fr;
    }
    .three-col-row {
        grid-template-columns: 1fr;
    }
    .four-col-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .even-more-grid {
        grid-template-columns: 1fr;
    }
    .video-playlist-thumbs {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .four-col-grid {
        grid-template-columns: 1fr;
    }
    .gadgets-grid-bottom {
        grid-template-columns: 1fr;
    }
    .recipes-grid {
        grid-template-columns: 1fr;
    }
    .footer-grid {
        grid-template-columns: 1fr !important;
        text-align: center;
    }
}

/* =========================================================
   AUTHOR BYLINE SYSTEM
   ========================================================= */

/* Standard byline (used below cards/articles) */
.author-byline {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 10px;
    font-size: 0.78rem;
    color: var(--text-muted);
}
.author-byline .author-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--border-glass);
    flex-shrink: 0;
}
.author-byline .author-name {
    font-weight: 700;
    color: var(--text-secondary);
}
.author-byline .byline-dot {
    opacity: 0.4;
}

/* Overlay byline (inside bg-card overlays) */
.overlay-byline {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
    font-size: 0.7rem;
    color: rgba(255,255,255,0.75);
}
.overlay-byline .author-avatar {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    object-fit: cover;
    border: 1.5px solid rgba(255,255,255,0.3);
    flex-shrink: 0;
}
.overlay-byline .author-name {
    font-weight: 700;
    color: rgba(255,255,255,0.9);
}
.overlay-byline .byline-dot {
    opacity: 0.4;
}

/* Small post byline (compact for lists) */
.post-date {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.75rem;
    color: var(--text-muted);
}
.author-avatar-sm {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    border: 1px solid var(--border-glass);
}


/* =========================================================
   AUTO-GENERATED INLINE STYLES (LINT FIX)
   ========================================================= */
.auto-style-1 { padding: 6px 12px; font-size: 0.8rem; }
.auto-style-2 { background: url('../img/cyberpunk-hero.png') center/cover; }
.auto-style-3 { background: url('../img/next-gadget.png') center/cover; }
.auto-style-4 { background: var(--color-warning); color: #000; }
.auto-style-5 { background: url('../img/ai-chip.png') center/cover; }
.auto-style-6 { background: var(--color-primary); color: #000; }
.auto-style-7 { background: url('../img/anime-city.png') center/cover; }
.auto-style-8 { background: #9d00ff; }
.auto-style-9 { background: url('../img/pop-culture.png') center/cover; }
.auto-style-10 { background: var(--color-success); color: #000; }
.auto-style-11 { animation-delay: 0.1s; }
.auto-style-12 { background: url('../img/esports.png') center/cover; }
.auto-style-13 { color: var(--color-primary); }
.auto-style-14 { background: url('../img/space-sci.png') center/cover; }
.auto-style-15 { color: #9d00ff; }
.auto-style-16 { background: url('../img/retro-console.png') center/cover; }
.auto-style-17 { color: var(--color-warning); }
.auto-style-18 { height: 250px; background: url('../img/ai-chip.png') center/cover; }
.auto-style-19 { animation-delay: 0.15s; }
.auto-style-20 { height: 180px; }
.auto-style-21 { background: url('../img/hardware-gpu.png') center/cover; }
.auto-style-22 { background: #76b900; font-size: 0.6rem; }
.auto-style-23 { font-size: 0.9rem; }
.auto-style-24 { background: #0077b6; font-size: 0.6rem; }
.auto-style-25 { background: url('../img/anime-char.png') center/cover; }
.auto-style-26 { background: var(--color-secondary); font-size: 0.6rem; }
.auto-style-27 { animation-delay: 0.2s; }
.auto-style-28 { height: 220px; }
.auto-style-29 { background: url('../img/geek-blog.png') center/cover; }
.auto-style-30 { animation-delay: 0.3s; }
.auto-style-31 { border-bottom-color: var(--border-glass); }
.auto-style-32 { color: var(--text-secondary); }
.auto-style-33 { background: url('../img/video-main.png') center/cover; }
.auto-style-34 { background: #e50914; }
.auto-style-35 { font-size: 1.8rem; margin-top: 10px; }
.auto-style-36 { position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);color:rgba(255,255,255,0.9);font-size:1.2rem;z-index:5; }
.auto-style-37 { bottom: 8px; left: 8px; right: 8px; }
.auto-style-38 { font-size: 0.75rem; line-height: 1.2; color: #fff; text-shadow: 0 1px 4px rgba(0,0,0,0.8); }
.auto-style-39 { margin-top:4px;font-size:0.6rem; color: rgba(255,255,255,0.7); }
.auto-style-40 { width:16px;height:16px; }
.auto-style-41 { animation-delay: 0.4s; }
.auto-style-42 { background: #76b900; }
.auto-style-43 { animation-delay: 0.5s; }
.auto-style-44 { background: #e91e63; }
.auto-style-45 { background: #1da1f2; }
.auto-style-46 { background: #5865F2; }
.auto-style-47 { background: #FF0000; }
.auto-style-48 { background: #0088cc; }
.auto-style-49 { font-size: 0.6rem; letter-spacing: 2px; }
.auto-style-50 { height: 250px; display: flex; align-items: center; justify-content: center; font-weight: 800; color: var(--text-muted); flex-direction: column; }
.auto-style-51 { font-size: 0.8rem; margin-top: 10px; }
.auto-style-52 { height: 600px; display: flex; align-items: center; justify-content: center; font-weight: 800; color: var(--text-muted); flex-direction: column; }
.auto-style-53 { background-image: url('../img/anime-city.png'); }
.auto-style-54 { background: var(--color-secondary); }
.auto-style-55 { font-size: 1.1rem; margin-top: 10px; opacity: 0.9; }
.auto-style-56 { display: inline-block; margin-top: 15px; }
.auto-style-57 { height: 200px; }
.auto-style-58 { background: var(--color-primary); color: #000; font-size: 0.6rem; }
.auto-style-59 { background: var(--color-warning); color: #000; font-size: 0.6rem; }
.auto-style-60 { background: #e50914; font-size: 0.6rem; }
.auto-style-61 { background: var(--color-success); color: #000; font-size: 0.6rem; }
.auto-style-62 { animation-delay: 0.6s; }
.auto-style-63 { background: var(--color-primary); color: #000; position: relative; display: inline-block; margin-bottom: 10px; }
.auto-style-64 { margin-top: 15px; }
.auto-style-65 { background: var(--color-warning); color: #000; position: relative; display: inline-block; margin-bottom: 10px; }
.auto-style-66 { background: #9d00ff; position: relative; display: inline-block; margin-bottom: 10px; }
.auto-style-67 { background: #0077b6; position: relative; display: inline-block; margin-bottom: 10px; }
.auto-style-68 { margin-top: 15px; color: var(--text-secondary); font-size: 0.9rem; text-align: justify; }
.auto-style-69 { margin-top: 20px; display: flex; gap: 15px; }
.auto-style-70 { color: var(--text-secondary); font-size: 1.2rem; text-decoration: none; }
.auto-style-71 { color: var(--text-primary); margin-bottom: 20px; font-weight: 800; }
.auto-style-72 { margin-bottom: 15px; height: auto !important; align-items: center; }
.auto-style-73 { background: url('../img/hardware-gpu.png') center/cover; width: 65px !important; height: 50px !important; border-radius: 8px; flex-shrink: 0; }
.auto-style-74 { font-size: 0.95rem; color: var(--text-primary); font-weight: 600; line-height: 1.3; margin-bottom: 0; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.auto-style-75 { background: url('../img/geek-blog.png') center/cover; width: 65px !important; height: 50px !important; border-radius: 8px; flex-shrink: 0; }
.auto-style-76 { background: url('../img/video-main.png') center/cover; width: 65px !important; height: 50px !important; border-radius: 8px; flex-shrink: 0; }


/* Utility Classes for Category Tags */
.tag-card-primary { background: var(--color-primary) !important; margin-bottom: 8px; display: inline-block; }
.tag-card-secondary { background: var(--color-secondary) !important; margin-bottom: 8px; display: inline-block; }
.tag-card-accent { background: var(--color-accent) !important; margin-bottom: 8px; display: inline-block; }
.separator-v { margin: 45px 0 !important; }

/* Theme Selector Control */
.theme-selector {
    font-family: var(--font-main);
    font-size: 0.75rem;
    background: var(--bg-surface);
    color: var(--text-primary);
    border: 1px solid var(--border-glass);
    border-radius: 4px;
    padding: 5px;
    margin-right: 10px;
    cursor: pointer;
}

/* =========================================================
   MARKET PULSE WIDGET
   ========================================================= */
.pulse-widget-container {
    padding: 80px 0;
    margin-bottom: 60px;
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    background-image: url('../img/market_pulse_bg.png');
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.pulse-widget-container::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.6);
    z-index: 1;
}

.pulse-header {
    text-align: center;
    margin-bottom: 30px;
    position: relative;
    z-index: 2;
    color: #fff;
    max-width: var(--container-width);
    margin-left: auto;
    margin-right: auto;
}

.pulse-tag {
    background: var(--color-secondary); /* Magenta tag as in image */
    color: #fff;
    font-weight: 800;
    padding: 4px 16px;
    border-radius: 20px;
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: 1px;
}

.pulse-header h2 {
    font-family: var(--font-main);
    font-size: 2.5rem;
    margin: 15px 0 5px;
    font-weight: 800;
}

.pulse-header p {
    color: rgba(255,255,255,0.7);
    font-size: 0.95rem;
}

.pulse-glass {
    background: rgba(255, 255, 255, 0.85); /* Light frosted glass */
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255,255,255,0.4);
    border-radius: 16px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.2);
}

.pulse-layout {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 30px;
    align-items: stretch;
    position: relative;
    z-index: 2;
    max-width: var(--container-width);
    margin-left: auto;
    margin-right: auto;
    padding: 0 20px;
}

.pulse-chart-area {
    padding: 25px;
    display: flex;
    flex-direction: column;
}

.pulse-chart-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 20px;
    gap: 20px;
}

.pulse-chart-titles {
    flex: 1;
}

.pulse-forecast {
    font-size: 0.85rem;
    color: #444; /* Darker grey to match white glass look */
    margin-top: 8px;
    line-height: 1.4;
    border-left: 2px solid var(--color-primary);
    padding-left: 10px;
}

.pulse-chart-header h3 {
    font-size: 1.1rem;
    margin: 0;
    line-height: 1.5;
    text-transform: none;
    letter-spacing: 0;
}

.pulse-badge {
    text-align: right;
}

.pulse-dark-title {
    font-size: 1.1rem;
    color: #222;
    font-weight: 800;
}

.pulse-status {
    display: inline-block;
    padding: 4px 8px;
    border-radius: 4px;
    font-weight: 800;
    font-size: 0.75rem;
    text-transform: uppercase;
    margin-bottom: 5px;
}

.pulse-down { background: rgba(255, 0, 110, 0.2); color: var(--color-secondary); box-shadow: 0 0 10px rgba(255, 0, 110, 0.4); }
.pulse-up { background: rgba(0, 245, 212, 0.2); color: var(--color-primary); box-shadow: 0 0 10px rgba(0, 245, 212, 0.4); }
.pulse-stable { background: rgba(251, 192, 45, 0.2); color: var(--color-warning); box-shadow: 0 0 10px rgba(251, 192, 45, 0.4); }

.pulse-cause {
    display: block;
    font-size: 0.7rem;
    color: var(--text-muted);
}

.pulse-chart-wrapper {
    flex: 1;
    min-height: 280px;
    width: 100%;
    position: relative;
    background: radial-gradient(circle at center, rgba(0,0,0,0.4) 0%, transparent 70%);
    border-radius: 8px;
    padding: 10px;
}

.pulse-controls {
    display: flex;
    gap: 10px;
    margin-top: 20px;
    justify-content: center;
}

.pulse-btn {
    background: transparent;
    border: 1px solid var(--border-glass);
    color: var(--text-secondary);
    padding: 6px 16px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition);
}

.pulse-btn:hover {
    color: var(--text-primary);
    border-color: var(--text-muted);
}

.pulse-btn.active {
    background: var(--color-primary);
    color: #000;
    border-color: var(--color-primary);
    box-shadow: var(--glow-primary);
}

.pulse-feed-area {
    padding: 20px;
    display: flex;
    flex-direction: column;
}

.pulse-feed-header {
    border-bottom: 1px solid var(--border-glass);
    padding-bottom: 15px;
    margin-bottom: 15px;
}

.pulse-feed-header h3 {
    font-size: 1.1rem;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 10px;
}

.pulse-feed-list {
    display: flex;
    flex-direction: column;
    gap: 15px;
    flex: 1;
}

.pulse-card {
    display: flex;
    gap: 15px;
    align-items: center;
    cursor: pointer;
    padding: 12px;
    border-radius: 12px;
    transition: var(--transition);
    opacity: 1; 
    animation: fadeIn 0.5s ease;
}

.pulse-card:hover {
    transform: translateX(5px);
}

.pulse-card:hover h4 {
    color: var(--color-primary);
}

.pulse-card-img {
    width: 60px;
    height: 45px; /* Smaller aspect to match image more closely */
    border-radius: 8px;
    background-size: cover;
    background-position: center;
    position: relative;
    flex-shrink: 0;
    border: 1px solid rgba(0,0,0,0.1);
}

.pulse-card-content {
    flex: 1;
}

.pulse-btn-action-container {
    margin-top: 20px;
    text-align: right;
}

.d-none { display: none !important; }

.pulse-btn-action {
    display: block;
    width: 100%;
    background: linear-gradient(90deg, #00F5D4, #FF006E);
    color: #fff;
    padding: 12px 24px;
    border-radius: 12px;
    font-weight: 800;
    text-transform: uppercase;
    text-align: center;
    text-decoration: none;
    letter-spacing: 1px;
    box-shadow: 0 4px 15px rgba(255, 0, 110, 0.4);
    transition: var(--transition);
}

.pulse-btn-action:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(255, 0, 110, 0.6);
}

@media (max-width: 900px) {
    .pulse-layout {
        grid-template-columns: 1fr;
    }
    .pulse-controls {
        flex-wrap: wrap;
    }
    .pulse-chart-wrapper {
        min-height: 200px;
    }
}

/* ============================================
   RESPONSIVE: TABLET (max-width: 1024px)
   ============================================ */
@media (max-width: 1024px) {
    .header-content {
        padding: 20px 20px;
    }
    .main-nav {
        padding: 0 15px;
    }
    .nav-links a {
        font-size: 0.65rem;
        padding: 10px 6px;
    }
    .header-controls {
        gap: 5px;
    }
    .header-controls .theme-selector {
        display: none; /* Ocultar selectores en tablet */
    }
    .big-grid {
        grid-template-columns: 1fr;
    }
    .big-grid-secondary {
        grid-template-columns: 1fr 1fr;
    }
    .content-with-sidebar {
        grid-template-columns: 1fr;
    }
    .sidebar {
        display: none;
    }
    .footer-grid {
        grid-template-columns: 1fr 1fr;
        gap: 30px;
    }
}

/* ============================================
   RESPONSIVE: MÓVIL (max-width: 768px)
   ============================================ */
@media (max-width: 768px) {
    /* --- Hamburger Button --- */
    .nav-hamburger {
        display: flex !important;
    }

    /* --- Trending Bar: ocultar texto, reducir espacio --- */
    .trending-bar {
        padding: 4px 10px;
    }
    .trending-label {
        display: none; /* Ocultar "Trending Now" */
    }
    .trending-ticker {
        flex: 1;
    }
    .trending-social {
        display: none;
    }

    /* --- Header: Ad replace Logo --- */
    .header-content {
        padding: 30px 15px 10px 15px; /* Más espacio arriba del logo */
    }
    .logo {
        display: none; /* Ocultar logo principal en móvil */
    }
    .header-ad-space {
        display: flex; /* Mostrar anuncio en móvil */
        width: 100%;
        max-width: 320px; /* Tamaño estándar móvil */
        height: 60px;
        margin: 0 auto;
        justify-content: center;
        align-items: center;
    }
    .header-ad-space .ad-label {
        font-size: 8px; /* Reducir label */
    }
    .header-ad-space .ad-text {
        font-size: 0.9rem; /* Reducir texto principal */
    }
    .brand-bg-area {
        padding-bottom: 55px;
    }
    .brand-bg-area::before {
        background-size: 1200px auto; /* Evita que los píxeles se hagan minúsculos en móvil */
        background-position: center bottom;
    }
    .nav-bg-strip {
        margin-top: -55px;
    }

    /* --- Nav: Panel Deslizante --- */
    .main-nav {
        padding: 0 15px;
        flex-wrap: wrap;
        position: relative;
        justify-content: flex-start; /* Alinear elementos a la izquierda */
        align-items: center;
        gap: 15px; /* Espacio entre el hamburger y el logo */
    }
    
    /* Mostrar logo móvil en la barra de navegación */
    .nav-logo-mobile {
        display: block;
        font-size: 1.5rem; /* Tamaño adecuado para estar junto al menú */
        margin: 0;
    }
    
    .nav-links {
        display: none;
        flex-direction: column;
        width: 100%;
        background: #ffffff;
        border-top: 1px solid var(--border-glass);
        padding: 10px 0;
        order: 3;
    }
    .nav-links.mobile-open {
        display: flex !important;
    }
    .nav-links a {
        font-size: 0.85rem;
        padding: 14px 20px;
        border-bottom: 1px solid rgba(0,0,0,0.04);
        width: 100%;
    }
    .nav-links a:last-child {
        border-bottom: none;
    }
    .nav-links a.active {
        border-left: 3px solid var(--color-primary);
        background: rgba(0, 245, 212, 0.08);
    }
    .nav-links a:hover {
        background: rgba(0,0,0,0.03);
    }

    /* --- Header Controls: ocultar TODO en la barra superior --- */
    .header-controls {
        display: none !important;
    }

    /* --- Theme toggle dentro del menú móvil --- */
    .mobile-theme-toggle {
        display: flex !important;
        align-items: center;
        justify-content: flex-end;
        padding: 12px 20px;
        border-top: 1px solid rgba(0,0,0,0.08);
    }
    .mobile-theme-toggle button {
        background: none;
        border: 1px solid var(--border-glass);
        border-radius: 8px;
        padding: 10px 14px;
        cursor: pointer;
        color: var(--text-primary);
        transition: all 0.2s ease;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .mobile-theme-toggle button:hover {
        background: rgba(0, 245, 212, 0.1);
    }

    /* --- Hero Grid --- */
    .big-grid {
        grid-template-columns: 1fr;
    }
    .big-grid-secondary {
        grid-template-columns: 1fr;
    }
    .bg-card {
        min-height: 250px;
    }
    .hero-title {
        font-size: 1.4rem;
    }

    /* --- Category Blocks --- */
    .block-content {
        grid-template-columns: 1fr;
    }
    .category-block {
        padding: 15px 0;
    }
    .content-with-sidebar {
        grid-template-columns: 1fr;
    }
    .sidebar {
        display: none;
    }

    /* --- Footer --- */
    .main-footer::before {
        background-size: 1200px auto; /* Mantiene la dispersión de píxeles grande en móvil */
    }
    .footer-grid {
        grid-template-columns: 1fr;
        gap: 25px;
        padding: 0 20px;
    }
    .main-footer {
        padding: 60px 0 40px 0;
    }

    /* --- General spacing --- */
    .container {
        padding: 0 15px;
    }
    .section-ad {
        padding: 20px 15px;
    }
}

/* --- Mobile Theme Toggle: oculto en desktop --- */
.mobile-theme-toggle {
    display: none;
}

/* ============================================
   RESPONSIVE: MÓVIL SMALL (max-width: 480px)
   ============================================ */
@media (max-width: 480px) {
    .logo {
        font-size: 1.5rem;
    }
    .hero-title {
        font-size: 1.1rem;
    }
    .bg-card {
        min-height: 200px;
    }
    .nav-links a {
        font-size: 0.8rem;
        padding: 12px 15px;
    }
    .block-header h2 {
        font-size: 1.1rem;
    }
    .footer-brand-text {
        font-size: 0.9rem;
    }
}

/* --- Hamburger: Oculto en Desktop --- */
.nav-hamburger {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
    z-index: 10;
}
.nav-hamburger span {
    display: block;
    width: 24px;
    height: 2.5px;
    background: var(--text-primary);
    border-radius: 2px;
    transition: all 0.3s ease;
}
/* Animación X al abrir */
.nav-hamburger.open span:nth-child(1) {
    transform: rotate(45deg) translate(5px, 5px);
}
.nav-hamburger.open span:nth-child(2) {
    opacity: 0;
}
.nav-hamburger.open span:nth-child(3) {
    transform: rotate(-45deg) translate(5px, -5px);
}

/* =========================================================
   DARK & SEPIA THEME ADJUSTMENTS (Header, Footer, Market Pulse)
   ========================================================= */
.dark-theme .brand-bg-area,
.dark-theme .nav-bg-strip,
.sepia-theme .brand-bg-area,
.sepia-theme .nav-bg-strip {
    background-color: var(--bg-surface);
}

.dark-theme .brand-bg-area::before,
.sepia-theme .brand-bg-area::before {
    opacity: 0.15;
}

.dark-theme .main-footer,
.sepia-theme .main-footer {
    background-color: var(--bg-surface);
}

.dark-theme .main-footer::before,
.sepia-theme .main-footer::before {
    opacity: 0.15;
}

.dark-theme .footer-grid, 
.dark-theme .footer-bottom,
.sepia-theme .footer-grid, 
.sepia-theme .footer-bottom {
    text-shadow: 0 0 12px var(--bg-surface), 0 0 4px var(--bg-surface);
}

.dark-theme .pulse-glass {
    background: var(--glass);
    border-color: var(--border-glass);
}

.dark-theme .pulse-dark-title {
    color: var(--text-primary);
}

.dark-theme .pulse-widget-container::before {
    opacity: 0.1;
}

.dark-theme .pulse-card {
    background: var(--glass);
    border-color: var(--border-glass);
}

.pulse-title,
.pulse-article-title {
    color: var(--text-primary);
    font-weight: 700;
    margin-bottom: 2px;
}

.pulse-article-time {
    color: var(--text-muted);
}

.dark-theme .logo-style-text {
    color: #ffffff;
}

/* =========================================================
   AUTH MODAL — Login / Register Overlay
   ========================================================= */
.auth-modal-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: authOverlayIn 0.3s ease;
}
.auth-modal-hidden {
    display: none;
}
#btn-auth-modal {
    cursor: pointer;
}
.auth-btn-icon {
    display: block;
}

@keyframes authOverlayIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.auth-modal-card {
    position: relative;
    background: var(--bg-surface);
    border: 1px solid var(--border-glass);
    border-radius: 20px;
    padding: 40px 36px 32px;
    width: 100%;
    max-width: 420px;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow:
        0 0 40px rgba(0, 245, 212, 0.06),
        0 24px 64px rgba(0, 0, 0, 0.35),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
    animation: authCardIn 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    display: flex;
    flex-direction: column;
    gap: 18px;
}

@keyframes authCardIn {
    from {
        opacity: 0;
        transform: translateY(24px) scale(0.96);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Close Button */
.auth-modal-close {
    position: absolute;
    top: 14px; right: 14px;
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: 6px;
    border-radius: 8px;
    transition: all 0.25s ease;
    line-height: 0;
}

.auth-modal-close:hover {
    color: var(--color-secondary);
    background: rgba(255, 0, 110, 0.08);
}

/* Header */
.auth-modal-header {
    text-align: center;
    padding-bottom: 4px;
}

.auth-modal-header .logo-sm {
    font-size: 2rem;
}

.auth-modal-subtitle {
    font-size: 0.7rem;
    color: var(--text-muted);
    letter-spacing: 3px;
    text-transform: uppercase;
    margin-top: 6px;
}

/* Tabs */
.auth-tabs {
    display: flex;
    gap: 4px;
    background: var(--bg-accent);
    border-radius: 12px;
    padding: 4px;
}

.auth-tab {
    flex: 1;
    padding: 10px 16px;
    font-family: var(--font-main);
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 0.3px;
    color: var(--text-muted);
    background: none;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.auth-tab:hover {
    color: var(--text-primary);
}

.auth-tab.active {
    color: var(--text-primary);
    background: var(--bg-surface);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

/* Form */
.auth-form {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.auth-form-group {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.auth-form-group label {
    font-size: 0.75rem;
    color: var(--text-muted);
    letter-spacing: 0.4px;
    font-weight: 500;
}

.auth-input-wrap {
    position: relative;
    display: flex;
    align-items: center;
}

.auth-input-icon {
    position: absolute;
    left: 14px;
    color: var(--text-muted);
    pointer-events: none;
    transition: color 0.3s ease;
}

.auth-input-wrap input {
    width: 100%;
    background: var(--bg-main);
    border: 1px solid var(--border-glass);
    color: var(--text-primary);
    padding: 12px 16px 12px 42px;
    border-radius: 10px;
    font-family: var(--font-main);
    font-size: 0.88rem;
    transition: all 0.3s ease;
    outline: none;
}

.auth-input-wrap input::placeholder {
    color: var(--text-muted);
    opacity: 0.6;
}

.auth-input-wrap input:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(0, 245, 212, 0.1);
}

.auth-input-wrap input:focus + .auth-input-icon,
.auth-input-wrap:focus-within .auth-input-icon {
    color: var(--color-primary);
}

/* Options Row */
.auth-options {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.76rem;
}

.auth-checkbox {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--text-muted);
    cursor: pointer;
}

.auth-checkbox input[type="checkbox"] {
    accent-color: var(--color-primary);
}

.auth-link {
    color: var(--color-primary);
    text-decoration: none;
    transition: text-shadow 0.3s ease;
}

.auth-link:hover {
    text-shadow: 0 0 10px rgba(0, 245, 212, 0.4);
}

/* Submit Button */
.auth-btn-submit {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 13px 20px;
    font-family: var(--font-main);
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #0D1117;
    background: linear-gradient(135deg, var(--color-primary), #00c9a7);
    border: none;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.35s ease;
    position: relative;
    overflow: hidden;
}

.auth-btn-submit:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 245, 212, 0.25);
}

.auth-btn-submit:active {
    transform: translateY(0);
}

/* Divider */
.auth-divider {
    display: flex;
    align-items: center;
    text-align: center;
    color: var(--text-muted);
    font-size: 0.72rem;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.auth-divider::before,
.auth-divider::after {
    content: '';
    flex: 1;
    border-bottom: 1px solid var(--border-glass);
}

.auth-divider span {
    padding: 0 12px;
    white-space: nowrap;
}

/* Social Buttons */
.auth-social-row {
    display: flex;
    gap: 10px;
    justify-content: center;
}

.auth-btn-social {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 44px;
    background: var(--bg-main);
    border: 1px solid var(--border-glass);
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.3s ease;
    color: var(--text-secondary);
}

.auth-btn-social:hover {
    background: var(--bg-accent);
    border-color: var(--color-primary);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* Mobile Responsive */
@media (max-width: 480px) {
    .auth-modal-card {
        margin: 12px;
        padding: 28px 20px 24px;
        max-height: 95vh;
    }
}

/* Compact Google-Only Modal */
.auth-modal-compact {
    max-width: 380px;
    text-align: center;
    align-items: center;
}

.auth-avatar-area {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: var(--bg-accent);
    border: 2px solid var(--border-glass);
    margin: 0 auto;
}

.auth-welcome-text {
    font-size: 0.85rem;
    color: var(--text-secondary);
    line-height: 1.6;
    max-width: 320px;
}

.auth-btn-google {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 14px 24px;
    font-family: var(--font-main);
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-primary);
    background: var(--bg-main);
    border: 1px solid var(--border-glass);
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.35s ease;
    position: relative;
}

.auth-btn-google:hover {
    border-color: rgba(66, 133, 244, 0.5);
    box-shadow: 0 4px 20px rgba(66, 133, 244, 0.15);
    transform: translateY(-2px);
}

.auth-btn-google:active {
    transform: translateY(0);
}

.auth-terms {
    font-size: 0.7rem;
    color: var(--text-muted);
    line-height: 1.5;
    max-width: 300px;
}

/* =========================================================
   CATEGORY PAGES STYLES
   ========================================================= */

/* Main Wrapper */
.main-category-page {
    padding-top: 100px; /* Offset for sticky nav */
}

/* Category Hero Banner */
.category-hero-header {
    position: relative;
    padding: 70px 50px;
    border-radius: 24px;
    margin-bottom: 45px;
    overflow: hidden;
    display: flex;
    align-items: center;
    background: linear-gradient(135deg, rgba(14, 165, 233, 0.05) 0%, var(--bg-surface) 100%);
    border: 1px solid rgba(14, 165, 233, 0.15);
    box-shadow: 
        0 20px 50px rgba(0, 0, 0, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

/* Hero Glow Effect */
.category-hero-header::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: radial-gradient(circle at top right, rgba(168, 85, 247, 0.15), transparent 50%);
    pointer-events: none;
}

.category-hero-header::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0;
    width: 60%; height: 2px;
    background: linear-gradient(90deg, transparent, var(--color-primary), transparent);
    animation: neonPulse 3s infinite;
}

.category-hero-content {
    position: relative;
    z-index: 2;
    max-width: 650px;
}

.category-hero-content h1 {
    font-size: 2.7rem;
    line-height: 1.1;
    margin: 15px 0;
    letter-spacing: -1px;
}

.category-hero-desc {
    font-size: 1.1rem;
    color: var(--text-secondary);
    line-height: 1.6;
}

/* Category Sections */
.category-section {
    margin-bottom: 50px;
}

.category-section .block-header h2 {
    font-family: 'Outfit', var(--font-main);
    font-weight: 800;
    text-transform: uppercase;
    font-size: 1.5rem;
    letter-spacing: 1px;
    display: flex;
    align-items: center;
    gap: 10px;
}

/* =========================================================
   DYNAMIC 5-CARD PREMIUM LAYOUTS
   ========================================================= */

/* 1. Bento Grid 5 (Recientes) */
.bento-grid-5 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(2, 220px);
    gap: 20px;
}
.bento-item {
    border-radius: 16px;
    overflow: hidden;
    position: relative;
    background: var(--bg-surface);
    border: 1px solid var(--border-glass);
    transition: transform 0.4s ease, box-shadow 0.4s ease;
}
.bento-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(0,0,0,0.5), 0 0 20px rgba(14, 165, 233, 0.2);
    border-color: rgba(14, 165, 233, 0.4);
}
.bento-item.hero {
    grid-column: span 2;
    grid-row: span 2;
}
.bento-img {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background-size: cover;
    background-position: center;
    transition: transform 0.6s ease;
}
.bento-item:hover .bento-img {
    transform: scale(1.05);
}
.bento-content {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    padding: 25px;
    background: linear-gradient(to top, rgba(0,0,0,0.9), transparent);
    z-index: 2;
}
.bento-content h3 {
    font-size: 1.1rem;
    line-height: 1.3;
    margin-bottom: 10px;
    color: #fff;
    text-shadow: 0 2px 5px rgba(0,0,0,0.8);
}
.bento-item.hero .bento-content h3 {
    font-size: 1.4rem;
}

/* 2. Netflix Row Swipe (Más Vistos) */
.netflix-row {
    display: flex;
    gap: 20px;
    padding: 25px 5px;  /* Espacio vertical para sombras */
    margin: -25px -5px; /* Compensa sin afectar layout */
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -ms-overflow-style: none; /* IE y Edge */
    @supports (scrollbar-width: none) {
        scrollbar-width: none;
    }
}
.netflix-row::-webkit-scrollbar { 
    display: none; /* Chrome/Safari */
}
.swipe-card {
    box-sizing: border-box;
    flex: 0 0 calc(20% - 16px);
    min-width: 200px;
    scroll-snap-align: start;
    border-radius: 12px;
    border: 1px solid var(--border-glass);
    overflow: hidden;
    background: var(--bg-surface);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: flex;
    flex-direction: column;
}
.swipe-card:hover {
    transform: scale(1.03);
    border-color: var(--color-primary);
    box-shadow: 0 10px 25px rgba(0,0,0,0.4);
}
.swipe-img {
    height: 180px;
    background-size: cover;
    background-position: center;
}
.swipe-info {
    padding: 15px;
    flex: 1;
    display: flex;
    flex-direction: column;
}
.swipe-info h4 {
    font-size: 0.95rem;
    margin: 8px 0;
    color: var(--text-primary);
}

/* 3. Pedestal Layout (Mejor Valorado) */
.pedestal-layout {
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.pedestal-crown {
    width: 100%;
}
.mega-card {
    display: flex;
    flex-direction: row;
    background: var(--bg-surface);
    border-radius: 16px;
    border: 1px solid var(--border-glass);
    overflow: hidden;
    min-height: 350px;
}
.mega-card-img {
    flex: 1.5;
    background-size: cover;
    background-position: center;
    position: relative;
    border-right: 1px solid var(--border-glass);
}
.mega-card-img::after {
    content: '';
    position: absolute;
    top: 0; bottom: 0; right: 0; width: 80px;
    background: linear-gradient(to right, transparent, var(--bg-surface));
}
.mega-card-content {
    flex: 1;
    padding: 40px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.category-tag {
    display: inline-block;
    align-self: flex-start;
    padding: 6px 14px;
    background: rgba(251, 188, 5, 0.15);
    color: #FBBC05;
    border: 1px solid rgba(251, 188, 5, 0.4);
    border-radius: 4px;
    font-size: 0.8rem;
    font-weight: 800;
    margin-bottom: 20px;
    text-transform: uppercase;
}
.mega-card-title {
    font-size: 1.75rem;
    line-height: 1.2;
    margin-bottom: 15px;
    color: var(--text-primary);
}
.mega-card-desc {
    font-size: 1.1rem;
    color: var(--text-secondary);
    line-height: 1.6;
    margin-bottom: 25px;
}
.floating-score {
    position: absolute;
    top: 20px;
    left: 20px;
    background: rgba(0,0,0,0.8);
    color: #FBBC05;
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
    border: 1px solid rgba(251, 188, 5, 0.5);
    padding: 8px 16px;
    border-radius: 30px;
    font-weight: 900;
    font-size: 1rem;
    box-shadow: 0 5px 15px rgba(0,0,0,0.5);
    z-index: 3;
}
.pedestal-bases {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}
.pedestal-base-card {
    display: flex;
    flex-direction: column;
    background: var(--bg-surface);
    border-radius: 12px;
    border: 1px solid var(--border-glass);
    overflow: hidden;
    transition: transform 0.3s ease, border-color 0.3s ease;
}
.pedestal-base-card:hover {
    transform: translateY(-5px);
    border-color: #FBBC05;
    box-shadow: 0 10px 25px rgba(251, 188, 5, 0.15);
}
.pedestal-base-img {
    height: 120px;
    background-size: cover;
    background-position: center;
    position: relative;
    border-bottom: 1px solid var(--border-glass);
}
.pedestal-score-badge {
    position: absolute;
    bottom: -15px;
    right: 15px;
    background: #FBBC05;
    color: #000;
    font-weight: 900;
    font-size: 0.85rem;
    padding: 4px 10px;
    border-radius: 20px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.5);
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 4px;
}
.pedestal-base-info {
    padding: 22px 15px 15px;
    display: flex;
    flex-direction: column;
    flex: 1;
}
.pedestal-base-info h4 {
    font-size: 0.95rem;
    line-height: 1.4;
    color: var(--text-primary);
    margin: 0;
}

/* 4. Horizontal History List (Historial) */
.history-list {
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.history-list-card {
    display: flex;
    border-radius: 16px;
    background: var(--bg-surface);
    border: 1px solid var(--border-glass);
    overflow: hidden;
    height: 220px;
    transition: transform 0.3s ease, border-color 0.3s ease;
}
.history-list-card:hover {
    transform: translateX(10px);
    border-color: rgba(14, 165, 233, 0.4);
    box-shadow: -10px 10px 30px rgba(0,0,0,0.3);
}
.history-list-img {
    width: 320px;
    min-width: 320px;
    background-size: cover;
    background-position: center;
    position: relative;
}
.history-list-img::after {
    content: '';
    position: absolute;
    top:0; right:0; bottom:0; width: 60px;
    background: linear-gradient(to right, transparent, var(--bg-surface));
}
.history-list-info {
    padding: 30px 40px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex: 1;
}
.history-list-info .tag-sm {
    align-self: flex-start;
    margin-bottom: 12px;
    background: rgba(14, 165, 233, 0.15);
    color: var(--color-primary);
    border: 1px solid rgba(14, 165, 233, 0.3);
    padding: 6px 14px;
    font-size: 0.75rem;
    font-weight: 800;
}
.history-list-info h4 {
    font-size: 1.25rem;
    margin-bottom: 15px;
    color: var(--text-primary);
    line-height: 1.3;
}
.history-list-info p {
    font-size: 1.05rem;
    color: var(--text-secondary);
    line-height: 1.7;
    margin-bottom: 20px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2; /* Propiedad estándar */
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.history-list-card .post-date {
    margin-top: auto;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-muted);
}
.history-list-card .author-avatar-sm {
    width: 24px;
    height: 24px;
    border: 2px solid var(--border-glass);
}

/* Media Queries Dynamics */
@media (max-width: 1200px) {
    .netflix-row {
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -ms-overflow-style: none;
        @supports (scrollbar-width: none) {
            scrollbar-width: none;
        }
        padding: 25px 20px;
        margin: -25px -20px;
    }
    .swipe-card { flex: 0 0 calc(25% - 15px); }
}
@media (max-width: 992px) {
    .bento-grid-5 { grid-template-columns: repeat(2, 1fr); }
    .bento-item.hero { grid-column: span 2; }
    .swipe-card { flex: 0 0 calc(33.3% - 13px); }
    .pedestal-bases { grid-template-columns: repeat(2, 1fr); }
    .history-list-img { width: 250px; min-width: 250px; }
    .mega-card { flex-direction: column; }
    .mega-card-img { flex: none; height: 250px; border-right: none; border-bottom: 1px solid var(--border-glass); }
    .mega-card-img::after { display: none; }
}
@media (max-width: 768px) {
    .bento-grid-5 { grid-template-columns: 1fr; grid-auto-rows: 250px; }
    .bento-item.hero { grid-column: span 1; grid-row: span 1; }
    .swipe-card { flex: 0 0 calc(50% - 10px); }
    .pedestal-bases { grid-template-columns: 1fr; }
    .history-list-card { flex-direction: column; height: auto; }
    .history-list-img { width: 100%; min-width: 100%; height: 200px; border-right: none; border-bottom: 1px solid var(--border-glass); }
    .history-list-img::after { display: none; }
    .mega-card-content { padding: 25px; }
}
@media (max-width: 480px) {
    .swipe-card { flex: 0 0 85%; }
}

/* Pagination Block */
.pagination-block {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin-top: 40px;
    padding-top: 20px;
    border-top: 1px solid var(--border-glass);
}

.page-btn {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: var(--bg-surface);
    border: 1px solid var(--border-glass);
    color: var(--text-primary);
    font-family: var(--font-main);
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s ease;
}

.page-btn:hover:not(.disabled) {
    background: var(--bg-accent);
    color: var(--color-primary);
    border-color: var(--color-primary);
    box-shadow: 0 0 10px rgba(14, 165, 233, 0.2);
    transform: translateY(-2px);
}

.page-btn.active {
    background: var(--color-primary);
    color: #000;
    border-color: var(--color-primary);
    box-shadow: 0 0 15px rgba(14, 165, 233, 0.4);
    transform: scale(1.08);
}

.page-btn.disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

.page-dots {
    color: var(--text-muted);
    font-weight: 700;
}

/* Margins Specific overrides */
.mb-20 { margin-bottom: 20px; }

/* Responsive adjustments */
@media (max-width: 1200px) {
    .history-grid { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 992px) {
    .history-grid { grid-template-columns: repeat(3, 1fr); }
    .category-hero-content h1 { font-size: 2.5rem; }
}
@media (max-width: 768px) {
    .history-grid { grid-template-columns: repeat(2, 1fr); }
    .category-hero-header { padding: 40px 20px; }
}
@media (max-width: 480px) {
    .history-grid { grid-template-columns: 1fr; }
    .category-hero-content h1 { font-size: 1.9rem; }
}

/* =========================================================
   NEW DISCUSSIONS PREMIUM LAYOUT
   ========================================================= */

.discussions-premium-layout {
    display: flex;
    flex-direction: column;
    gap: 25px;
    margin: 0 auto 40px;
}

/* Mega Horizontal Card (Top) */
.mega-discussion-card {
    display: flex;
    flex-direction: row;
    background: var(--glass);
    border: 2px solid var(--border-glass);
    border-radius: 20px;
    overflow: hidden;
    min-height: 320px;
    transition: var(--transition);
}

.mega-discussion-card:hover {
    transform: translateY(-5px);
    border-color: var(--color-primary);
    box-shadow: 0 15px 35px rgba(0, 245, 212, 0.15);
}

.mega-disc-img {
    flex: 1.2;
    position: relative;
    overflow: hidden;
    border-right: 1px solid var(--border-glass);
}

.mega-disc-img .card-bg-image {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background-size: cover;
    background-position: center;
    transition: transform 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.mega-discussion-card:hover .mega-disc-img .card-bg-image {
    transform: scale(1.08);
}

.mega-disc-info {
    flex: 1;
    padding: 35px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
}

.mega-disc-info .tag-exclusive {
    margin-bottom: 15px;
}

.mega-disc-info .hero-title {
    font-size: 1.6rem;
    line-height: 1.2;
    margin: 0 0 15px 0;
    color: var(--text-primary);
    font-weight: 800;
}

.mega-disc-info .disc-desc {
    font-size: 1rem;
    color: var(--text-secondary);
    line-height: 1.6;
    margin: 0 0 20px 0;
}

/* Vertical Cards Grid (Bottom) */
.discussions-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 25px;
}

.vertical-disc-card {
    display: flex;
    flex-direction: column;
    background: var(--glass);
    border: 1px solid var(--border-glass);
    border-radius: 16px;
    overflow: hidden;
    transition: var(--transition);
}

.vertical-disc-card:hover {
    transform: translateY(-5px);
    border-color: var(--color-primary);
    box-shadow: 0 10px 25px rgba(0, 245, 212, 0.1);
}

.v-disc-img {
    width: 100%;
    height: 200px;
    position: relative;
    overflow: hidden;
    border-bottom: 1px solid var(--border-glass);
}

.v-disc-img .card-bg-image {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background-size: cover;
    background-position: center;
    transition: transform 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.vertical-disc-card:hover .v-disc-img .card-bg-image {
    transform: scale(1.08);
}

.v-disc-info {
    padding: 25px;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.v-disc-info .tag-exclusive {
    align-self: flex-start;
    margin-bottom: 15px;
}

.v-disc-info .card-title {
    font-size: 1.15rem;
    line-height: 1.35;
    margin-top: 0;
    margin-bottom: 12px;
    color: var(--text-primary);
    font-weight: 700;
}

.v-disc-info .disc-desc {
    font-size: 0.9rem;
    color: var(--text-secondary);
    line-height: 1.5;
    margin: 0 0 20px 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    flex-grow: 1;
}

.v-disc-info .author-byline,
.mega-disc-info .author-byline {
    margin-top: auto;
    padding-top: 15px;
    border-top: 1px solid var(--border-glass);
    width: 100%;
}

/* Responsive */
@media (max-width: 900px) {
    .mega-discussion-card {
        flex-direction: column;
    }
    .mega-disc-img {
        height: 250px;
        border-right: none;
        border-bottom: 1px solid var(--border-glass);
    }
    .discussions-grid {
        grid-template-columns: 1fr;
    }
}

/* =========================================================
   ESTILOS PREMIUM: Armonización Vertical Glass
   ========================================================= */

.vertical-glass-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: var(--glass);
    border: 2px solid var(--border-glass);
    border-radius: 20px;
    overflow: hidden;
    transition: var(--transition);
    text-decoration: none;
}

.vertical-glass-card:hover {
    transform: translateY(-8px);
    border-color: var(--color-primary);
    box-shadow: 0 15px 35px rgba(0, 245, 212, 0.15);
}

.vg-card-img {
    height: 180px;
    width: 100%;
    position: relative;
    overflow: hidden;
}

.vg-card-img .card-bg-image {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background-size: cover;
    background-position: center;
    transition: transform 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.vertical-glass-card:hover .vg-card-img .card-bg-image {
    transform: scale(1.1);
}

.vg-card-content {
    padding: 20px;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.vg-card-content .card-title {
    color: var(--text-primary) !important;
    font-size: 1.1rem;
    line-height: 1.3;
    margin-bottom: 12px;
    font-weight: 700;
}

.vg-card-content .author-byline {
    margin-top: auto;
    padding-top: 15px;
    border-top: 1px solid var(--border-glass);
}




/* ============================================
   CATEGORY SUBMENU
   ============================================ */
.category-submenu {
    background: linear-gradient(90deg, rgba(15, 15, 20, 0.95) 0%, rgba(25, 25, 30, 0.95) 50%, rgba(15, 15, 20, 0.95) 100%);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    border-top: 1px solid rgba(0, 245, 212, 0.15);
    border-bottom: 1px solid rgba(0, 245, 212, 0.15);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
    position: sticky;
    top: 60px; /* Below main nav */
    z-index: 99;
    padding: 0;
    display: flex;
    justify-content: center;
    overflow-x: auto;
    white-space: nowrap;
}
.submenu-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    max-width: var(--container-width);
    padding: 10px 40px;
    margin: 0 auto;
}
.submenu-link {
    color: rgba(255, 255, 255, 0.65);
    text-decoration: none;
    font-family: 'Outfit', sans-serif;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 5px 10px;
    border-radius: 20px;
    border: 1px solid transparent;
    transition: all 0.3s ease;
}
.submenu-link:hover, .submenu-link.active {
    color: #fff;
    background: rgba(0, 245, 212, 0.15);
    border: 1px solid rgba(0, 245, 212, 0.4);
    box-shadow: 0 0 10px rgba(0, 245, 212, 0.2);
    text-shadow: 0 0 5px rgba(0, 245, 212, 0.5);
}
@media (max-width: 768px) {
    .category-submenu {
        justify-content: flex-start;
    }
    .submenu-container {
        padding: 10px;
        gap: 10px;
    }
    .submenu-link {
        font-size: 0.75rem;
        padding: 5px 8px;
    }
}


/* ============================================
   SCROLL MARGIN OFFSET (For Sticky Headers)
   ============================================ */
html {
    scroll-behavior: smooth;
    scroll-padding-top: 80px; /* Offset for main nav ONLY (index.html) */
}

html:has(.category-submenu) {
    scroll-padding-top: 130px; /* Offset for main nav + submenu (category pages) */
}

/* Pulse Bites Widget */
.pulse-bites-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.pulse-bites-item {
    margin-bottom: 15px;
    border-bottom: 1px solid var(--border-glass);
    padding-bottom: 10px;
}
.pulse-bites-last {
    margin-bottom: 0;
    border-bottom: none;
}
.pulse-bites-time {
    font-size: 0.7rem;
    color: var(--color-primary);
    font-weight: 600;
}
.pulse-bites-text {
    font-size: 0.85rem;
    margin: 5px 0 0 0;
    color: var(--text-primary);
    line-height: 1.3;
}

/* Market Pulse Actions */
.pulse-btn-action-container {
    margin-top: 20px;
    text-align: right;
}

.

.img-cover { object-fit: cover; width: 100%; height: 100%; display: block; border-radius: 12px; } .nav-avatar-img { width: 20px; height: 20px; border-radius: 50%; object-fit: cover; }

/* Logged-in user avatar button — replaces btn-primary rectangle */
.nav-user-avatar-btn {
    background: none !important;
    border: none !important;
    padding: 0 !important;
    margin: 0;
    cursor: pointer;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    overflow: hidden;
    box-shadow: 0 0 0 2px rgba(0, 242, 255, 0.6), 0 0 12px rgba(0, 242, 255, 0.3);
    transition: box-shadow 0.3s ease, transform 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}
.nav-user-avatar-btn:hover {
    box-shadow: 0 0 0 3px rgba(0, 242, 255, 0.9), 0 0 20px rgba(0, 242, 255, 0.5);
    transform: scale(1.1);
}
.nav-user-avatar {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    display: block;
}