/* * ===================================================== * TLAXCALA DIGITAL — BENTO STYLE v5.6 * Estrategia: Redefinir variables nativas de SmartMag * + sobreescribir componentes con clases reales * * DARK MODE: .site-s-dark (clase real del tema) * LIGHT MODE: :root / .s-light (default) * * v5.1 — Integración de identidad Altiora Studio: * · Montserrat reemplaza Outfit * · Variables neon (blue, green, purple, amber) * · Paleta dark navy profunda (#000a12) * · Texturas: dot grid (light), noise SVG (dark) * · Clases utilitarias: .card-neon-*, .glow-* * ===================================================== */ @import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,600;0,700;0,800;1,400;1,600&family=Montserrat:wght@300;400;500;600;700&display=swap'); /* ══════════════════════════════════════════════════ PARTE 1: REDEFINIR VARIABLES NATIVAS DE SMARTMAG Esto cambia el 80% del sitio automáticamente ══════════════════════════════════════════════════ */ /* ── Fuentes ─────────────────────────────────────── SmartMag usa --body-font, --ui-font, --title-font -------------------------------------------------- */ :root { --body-font: 'Montserrat', system-ui, sans-serif; --ui-font: 'Montserrat', system-ui, sans-serif; --title-font: 'Playfair Display', Georgia, serif; --h-font: 'Playfair Display', Georgia, serif; --text-font: 'Montserrat', system-ui, sans-serif; } /* ── Color de acento principal ───────────────────── --c-main es el color que SmartMag aplica a: botones, categorías, links hover, separadores de bloques, paginación activa, etc. -------------------------------------------------- */ :root, .s-light { --c-main: #A0763C; --c-main-rgb: 160, 118, 60; /* Fondos generales */ --c-contrast-0: #FDFAF5; --c-contrast-10: #F9F5EE; --c-contrast-50: #F3EEE4; --c-contrast-75: #EDE7DA; --c-contrast-100: #E4DCCC; --c-contrast-125: #D9D0BE; --c-contrast-150: #CEC4B0; --c-contrast-200: #BDB2A0; /* Textos */ --c-contrast-400: #8A7F6E; --c-contrast-450: #7A6F5E; --c-contrast-500: #6B5F4E; --c-contrast-600: #5C5040; --c-contrast-650: #4E4435; --c-contrast-700: #3E3428; --c-contrast-800: #2E2518; --c-contrast-850: #1F1810; --c-contrast-900: #150E08; --c-contrast: #0A0600; --c-rgba: 10, 6, 0; /* Links y headings */ --c-links: var(--c-contrast-900); --c-headings: var(--c-contrast-900); --c-excerpts: var(--c-contrast-650); --c-post-meta: var(--c-contrast-450); --c-nav: var(--c-contrast-900); /* Footer */ --footer-bg: #F0E8D8; --footer-lower-bg: #E8DCC8; --footer-mt: 60px; /* Neon palette — light mode (saturados pero legibles) */ --neon-blue: #2563eb; --neon-green: #16a34a; --neon-purple: #7c3aed; --neon-amber: #d97706; } /* ── Variables modo oscuro ───────────────────────── SmartMag usa .site-s-dark en el o -------------------------------------------------- */ .s-dark:not(i), .site-s-dark, .site-s-dark .s-light { --c-main: #C9A96E; --c-main-rgb: 201, 169, 110; /* Altiora deep navy family */ --c-contrast-0: #000a12; --c-contrast-10: #050d18; --c-contrast-50: #0a1520; --c-contrast-75: #0e1b28; --c-contrast-100: #142030; --c-contrast-125: #1a2838; --c-contrast-150: #203040; --c-contrast-200: #28394e; --c-contrast-300: #374d65; --c-contrast-400: #526070; --c-contrast-450: #7A8EA8; --c-contrast-500: #9AAFC8; --c-contrast-600: #AABBD0; --c-contrast-650: #BBCBDE; --c-contrast-700: #CCD9E8; --c-contrast-800: #D8E4F0; --c-contrast-850: #E4EDF8; --c-contrast-900: #EDF4FF; --c-contrast: #F5F9FF; --c-rgba: 245, 249, 255; --c-headings: #E8E2D9; --c-excerpts: rgba(232,226,217,0.6); --c-post-meta: rgba(232,226,217,0.5); --c-links: #EDF4FF; --c-nav: #EDF4FF; --footer-bg: #000608; --footer-lower-bg: #000405; /* Neon palette — dark mode (full glow) */ --neon-blue: #00d9ff; --neon-green: #00f598; --neon-purple: #b84aff; --neon-amber: orange; } .site-s-dark { --footer-bg: #000608; } .site-s-dark body { background: #000a12; } /* Textura noise en dark mode */ .site-s-dark body::before { content: ""; position: fixed; inset: 0; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); background-size: 200px 200px; opacity: 0.045; pointer-events: none; z-index: 0; } /* ══════════════════════════════════════════════════ PARTE 2: COMPONENTES CON CLASES REALES ══════════════════════════════════════════════════ */ /* ── Selección de texto ─────────────────────────── */ ::selection { background: rgba(160,118,60,0.3); color: inherit; } .site-s-dark ::selection { background: rgba(0,217,255,0.25); } /* ── Scrollbar ──────────────────────────────────── */ ::-webkit-scrollbar { width: 4px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: rgba(160,118,60,0.3); border-radius: 2px; } ::-webkit-scrollbar-thumb:hover { background: var(--c-main); } .site-s-dark ::-webkit-scrollbar-thumb { background: rgba(201,169,110,0.3); } .site-s-dark ::-webkit-scrollbar-thumb:hover { background: rgba(0,217,255,0.5); } /* ── Headings globales ──────────────────────────── */ h1, h2, h3, h4, h5, h6, .h-tag { font-family: 'Playfair Display', Georgia, serif !important; font-weight: 700 !important; letter-spacing: -0.01em; } h1 { font-size: 2.2em; letter-spacing: -0.02em; } h2 { font-size: 1.75em; } h3 { font-size: 1.4em; letter-spacing: 0; } /* Tamaños pequeños: sin kerning negativo para mejor legibilidad */ h4, h5, h6 { letter-spacing: 0 !important; } /* ── Body ───────────────────────────────────────── */ body { font-family: 'Montserrat', system-ui, sans-serif !important; font-size: 15px; line-height: 1.7; /* Dot grid texture en light mode */ background-image: radial-gradient(circle, rgba(100,116,139,0.18) 1px, transparent 0); background-size: 26px 26px; } .site-s-dark body { background-image: none; } /* ── Links ──────────────────────────────────────── */ a { transition: color 0.3s ease, opacity 0.3s ease; } /* ───────────────────────────────────────────────── HEADER / NAVEGACIÓN Fix z-index: backdrop-filter crea stacking context sin z-index → las cards transformadas pasan encima. ───────────────────────────────────────────────── */ /* Wrapper principal — z-index alto para ganar a las cards */ .smart-head { position: relative !important; z-index: 500 !important; border-bottom: none !important; } /* El sticky ya tiene z-index: 10000 del tema, no tocar */ /* Glassmorphism en rows del header */ .smart-head-row { backdrop-filter: blur(20px) saturate(150%) !important; -webkit-backdrop-filter: blur(20px) saturate(150%) !important; position: relative !important; z-index: 500 !important; } /* Fondo translúcido light mode — rows mid y bot */ :not(.site-s-dark) .smart-head-mid, :not(.site-s-dark) .smart-head-bot { background: rgba(253,250,245,0.93) !important; border-bottom: 1px solid rgba(228,220,204,0.7) !important; } /* Fondo translúcido dark mode */ .site-s-dark .smart-head-mid, .site-s-dark .smart-head-bot { background: rgba(0,8,16,0.92) !important; border-bottom: 1px solid rgba(0,217,255,0.07) !important; } /* Logo — Cormorant Garamond como el resto de headings */ .smart-head .logo-link > h1, .smart-head .logo-link > span { font-family: 'Playfair Display', Georgia, serif !important; font-weight: 700 !important; letter-spacing: -0.02em !important; color: var(--c-contrast-900) !important; } .site-s-dark .smart-head .logo-link > h1, .site-s-dark .smart-head .logo-link > span { color: #E8E2D9 !important; } /* ── Nav items (menú principal) ─────────────────── */ .navigation .menu > li > a { font-family: 'Montserrat', sans-serif !important; font-size: 11px !important; font-weight: 700 !important; letter-spacing: 0.09em !important; text-transform: uppercase !important; border-radius: 6px !important; padding: 6px 12px !important; color: var(--c-contrast-700) !important; transition: color 0.25s ease, background 0.25s ease !important; position: relative !important; } .site-s-dark .navigation .menu > li > a { color: rgba(232,226,217,0.75) !important; } /* Hover */ .navigation .menu > li:hover > a { color: var(--c-main) !important; background: rgba(160,118,60,0.08) !important; } .site-s-dark .navigation .menu > li:hover > a { color: #C9A96E !important; background: rgba(201,169,110,0.08) !important; } /* Item activo / página actual */ .navigation .menu > .current-menu-item > a, .navigation .menu > .current-menu-ancestor > a, .navigation .has-parent-state .current-menu-parent > a { color: var(--c-main) !important; font-weight: 700 !important; } .site-s-dark .navigation .menu > .current-menu-item > a, .site-s-dark .navigation .menu > .current-menu-ancestor > a { color: #C9A96E !important; } /* Indicador activo — línea inferior copper */ .navigation .menu > .current-menu-item > a::after, .navigation .menu > .current-menu-ancestor > a::after { content: '' !important; position: absolute !important; bottom: -2px !important; left: 12px !important; right: 12px !important; height: 2px !important; background: var(--c-main) !important; border-radius: 1px !important; } .site-s-dark .navigation .menu > .current-menu-item > a::after { background: #C9A96E !important; } /* ── Dropdown / Submenu ─────────────────────────── */ .navigation .menu ul, .navigation .menu .sub-menu { border-radius: 14px !important; border: 1px solid var(--c-contrast-100) !important; box-shadow: 0 12px 40px rgba(0,0,0,0.14), 0 2px 8px rgba(0,0,0,0.06) !important; padding: 6px !important; overflow: hidden !important; backdrop-filter: blur(20px) !important; -webkit-backdrop-filter: blur(20px) !important; z-index: 9999 !important; } /* Fondo del dropdown */ :not(.site-s-dark) .navigation .menu ul, :not(.site-s-dark) .navigation .menu .sub-menu { background: rgba(253,250,245,0.97) !important; } .site-s-dark .navigation .menu ul, .site-s-dark .navigation .menu .sub-menu { background: rgba(5,12,22,0.97) !important; border-color: rgba(0,217,255,0.1) !important; box-shadow: 0 12px 40px rgba(0,0,0,0.5), 0 0 0 1px rgba(0,217,255,0.06) !important; } /* Items del dropdown */ .navigation .menu > li li a { font-family: 'Montserrat', sans-serif !important; font-size: 12px !important; font-weight: 500 !important; letter-spacing: 0.02em !important; border-radius: 8px !important; border-top: 0 !important; margin-bottom: 1px !important; padding: 8px 12px !important; color: var(--c-contrast-700) !important; transition: background 0.2s ease, color 0.2s ease !important; } .site-s-dark .navigation .menu > li li a { color: rgba(232,226,217,0.7) !important; } .navigation .menu > li li a:hover { background: rgba(160,118,60,0.08) !important; color: var(--c-main) !important; } .site-s-dark .navigation .menu > li li a:hover { background: rgba(201,169,110,0.08) !important; color: #C9A96E !important; } /* ── Separador visual entre topbar y header ─────── */ .smart-head-mid { border-top: none !important; } .smart-head-bot { border-top: 1px solid var(--c-contrast-75) !important; } .site-s-dark .smart-head-bot { border-top: 1px solid rgba(255,255,255,0.05) !important; } /* ───────────────────────────────────────────────── TOPBAR — fila superior completa Contiene: ticker, fecha, iconos sociales, switch dark/light Estrategia: dark strip siempre en light mode (igual que NYT, The Verge, medios editoriales). Así el texto nunca desaparece aunque SmartMag añada clase .s-dark al row desde el admin. ───────────────────────────────────────────────── */ /* Contenedor — fuerza fuente + dark strip */ .smart-head-top, .smart-head-top.is-light, .smart-head-top.s-dark { font-family: 'Montserrat', sans-serif !important; font-size: 12px !important; letter-spacing: 0.02em !important; background: #1C1208 !important; border-bottom: 1px solid rgba(201,169,110,0.25) !important; min-height: 36px !important; } .site-s-dark .smart-head-top { background: #000810 !important; border-bottom: 1px solid rgba(0,217,255,0.1) !important; } /* Texto base legible sobre dark strip — fuerza Montserrat en todo */ .smart-head-top, .smart-head-top a, .smart-head-top span, .smart-head-top li, .smart-head-top p { font-family: 'Montserrat', sans-serif !important; color: rgba(255,242,220,0.65) !important; } .smart-head-top a:hover { color: #C9A96E !important; opacity: 1 !important; } .site-s-dark .smart-head-top, .site-s-dark .smart-head-top a, .site-s-dark .smart-head-top span, .site-s-dark .smart-head-top li { color: rgba(190,215,240,0.55) !important; } .site-s-dark .smart-head-top a:hover { color: var(--neon-blue) !important; } /* ── Trending ticker ────────────────────────────── */ .trending-ticker { display: flex !important; align-items: center !important; gap: 10px !important; } /* Badge "Trending" — amber/gold pill sobre dark strip */ .trending-ticker .heading, .smart-head-top .trending-ticker .heading { font-family: 'Montserrat', sans-serif !important; font-size: 9px !important; font-weight: 800 !important; letter-spacing: 0.15em !important; text-transform: uppercase !important; background: rgba(201,169,110,0.18) !important; color: #C9A96E !important; border: 1px solid rgba(201,169,110,0.45) !important; padding: 3px 11px !important; border-radius: 100px !important; white-space: nowrap !important; flex-shrink: 0 !important; opacity: 1 !important; } .site-s-dark .trending-ticker .heading { background: rgba(0,217,255,0.1) !important; color: var(--neon-blue) !important; border-color: rgba(0,217,255,0.3) !important; box-shadow: 0 0 10px rgba(0,217,255,0.15) !important; } /* Links del ticker */ .trending-ticker .post-link, .smart-head-top .trending-ticker .post-link { font-family: 'Montserrat', sans-serif !important; font-size: 12px !important; font-weight: 500 !important; color: rgba(255,242,220,0.68) !important; transition: color 0.25s ease !important; opacity: 1 !important; } .trending-ticker .post-link:hover, .smart-head-top .trending-ticker .post-link:hover { color: #C9A96E !important; } .site-s-dark .trending-ticker .post-link { color: rgba(190,215,240,0.55) !important; } .site-s-dark .trending-ticker .post-link:hover { color: var(--neon-blue) !important; } /* ── Fecha ──────────────────────────────────────── */ .smart-head-top .smart-head-date, .smart-head-top .head-date { font-family: 'Montserrat', sans-serif !important; font-size: 11px !important; font-weight: 400 !important; letter-spacing: 0.04em !important; color: rgba(255,242,220,0.42) !important; opacity: 1 !important; } .site-s-dark .smart-head-top .smart-head-date { color: rgba(190,215,240,0.38) !important; } /* ── Iconos sociales en topbar ──────────────────── */ .smart-head-top .smart-head-social a, .smart-head-top .spc-social a { font-size: 13px !important; width: 28px !important; height: 28px !important; border-radius: 7px !important; color: rgba(255,242,220,0.5) !important; transition: color 0.25s ease, background 0.25s ease !important; opacity: 1 !important; } .smart-head-top .smart-head-social a:hover, .smart-head-top .spc-social a:hover { color: #C9A96E !important; background: rgba(201,169,110,0.12) !important; } .site-s-dark .smart-head-top .smart-head-social a { color: rgba(190,215,240,0.45) !important; } .site-s-dark .smart-head-top .smart-head-social a:hover { color: var(--neon-blue) !important; background: rgba(0,217,255,0.08) !important; } /* ── Scheme switcher (toggle dark/light) ────────── */ .scheme-switcher { display: flex !important; align-items: center !important; } .smart-head-top .scheme-switcher .toggle { display: flex !important; align-items: center !important; justify-content: center !important; width: 28px !important; height: 28px !important; border-radius: 8px !important; border: 1px solid rgba(201,169,110,0.28) !important; color: rgba(255,242,220,0.5) !important; background: transparent !important; transition: all 0.3s cubic-bezier(0.22,1,0.36,1) !important; opacity: 1 !important; } .smart-head-top .scheme-switcher .toggle:hover { border-color: #C9A96E !important; color: #C9A96E !important; background: rgba(201,169,110,0.12) !important; transform: rotate(18deg) scale(1.12) !important; } .site-s-dark .smart-head-top .scheme-switcher .toggle { border-color: rgba(0,217,255,0.18) !important; color: rgba(190,215,240,0.45) !important; } .site-s-dark .smart-head-top .scheme-switcher .toggle:hover { border-color: rgba(0,217,255,0.55) !important; color: var(--neon-blue) !important; background: rgba(0,217,255,0.08) !important; box-shadow: 0 0 14px rgba(0,217,255,0.2) !important; transform: rotate(-18deg) scale(1.12) !important; } /* ───────────────────────────────────────────────── BOTONES — SmartMag usa input[type=submit], button, .ts-button, .ts-button-alt, .wp-block-button__link ───────────────────────────────────────────────── */ input[type=submit], button:not(.offcanvas-toggle):not(.chevron):not(.slick-arrow):not(.mfp-close), .ts-button, .wp-block-button__link, .load-button { font-family: 'Montserrat', sans-serif !important; font-size: 11px !important; font-weight: 700 !important; letter-spacing: 0.1em !important; text-transform: uppercase !important; border-radius: 100px !important; background: var(--c-main) !important; color: #fff !important; border: none !important; padding: 0 22px !important; transition: all 0.3s ease !important; box-shadow: 0 2px 12px rgba(160,118,60,0.25) !important; } input[type=submit]:hover, button:not(.offcanvas-toggle):not(.chevron):not(.slick-arrow):not(.mfp-close):hover, .ts-button:hover, .wp-block-button__link:hover, .load-button:hover { background: var(--c-contrast-900) !important; color: var(--c-contrast-0) !important; box-shadow: 0 4px 20px rgba(0,0,0,0.2) !important; transform: translateY(-1px) !important; } .site-s-dark input[type=submit]:hover, .site-s-dark .ts-button:hover { background: #fff !important; color: #000 !important; } /* Botón outline */ .ts-button-alt, .ts-button-b { background: transparent !important; border: 1px solid var(--c-main) !important; color: var(--c-main) !important; border-radius: 100px !important; font-family: 'Montserrat', sans-serif !important; font-size: 11px !important; font-weight: 700 !important; letter-spacing: 0.1em !important; text-transform: uppercase !important; transition: all 0.3s ease !important; } .ts-button-alt:hover, .ts-button-b:hover { background: var(--c-main) !important; color: #fff !important; } /* ───────────────────────────────────────────────── CATEGORÍAS / TAGS — .cat-labels a, .the-cat-name ───────────────────────────────────────────────── */ .cat-labels a, .cat-labels .category { font-family: 'Montserrat', sans-serif !important; font-size: 9px !important; font-weight: 700 !important; letter-spacing: 0.12em !important; text-transform: uppercase !important; border-radius: 100px !important; padding: 0 10px !important; line-height: 22px !important; background: var(--c-main) !important; color: #fff !important; transition: all 0.3s ease !important; } .cat-labels a:hover, .cat-labels .category:hover { filter: brightness(1.15) !important; color: #fff !important; } /* Tags en post único */ .the-post-tags a { font-family: 'Montserrat', sans-serif !important; font-size: 11px !important; font-weight: 500 !important; letter-spacing: 0.04em !important; border-radius: 6px !important; background: var(--c-contrast-50) !important; color: var(--c-contrast-600) !important; border: 1px solid var(--c-contrast-100) !important; padding: 3px 12px !important; transition: all 0.3s ease !important; } .the-post-tags a:hover { background: var(--c-main) !important; color: #fff !important; border-color: var(--c-main) !important; } /* ───────────────────────────────────────────────── BLOCK HEADS (títulos de sección) SmartMag: .block-head, .block-head-* ───────────────────────────────────────────────── */ .block-head { --c-block: var(--c-main) !important; } .block-head .heading { font-family: 'Montserrat', sans-serif !important; font-size: 10px !important; font-weight: 800 !important; letter-spacing: 0.18em !important; text-transform: uppercase !important; } .block-head .view-link { font-family: 'Montserrat', sans-serif !important; font-size: 11px !important; letter-spacing: 0.06em !important; border: 0.5px solid var(--c-contrast-150) !important; border-radius: 100px !important; padding: 4px 14px !important; transition: all 0.3s ease !important; } .block-head .view-link:hover { background: var(--c-main) !important; color: #fff !important; border-color: var(--c-main) !important; } /* Filtros de tabs */ .block-head .filters a { font-family: 'Montserrat', sans-serif !important; font-size: 11px !important; font-weight: 500 !important; letter-spacing: 0.04em !important; border-radius: 100px !important; padding: 3px 10px !important; transition: all 0.25s ease !important; } .block-head .filters .active, .block-head .filters a:hover { background: var(--c-main) !important; color: #fff !important; } /* ───────────────────────────────────────────────── TARJETAS DE POST — Overlay Universal v5.8 Todos los grid-post: imagen full-card, gradiente angular, texto semi-transparente, glow en hover. list-post mantiene layout horizontal. ───────────────────────────────────────────────── */ /* BASE: grid cards — overlay-ready, sin bordes. background transparent aquí: el fondo vive en .media para evitar el ring oscuro en las esquinas redondeadas. */ .grid-post, .grid-base-post, .grid-card-post { position: relative !important; overflow: hidden !important; border-radius: 18px !important; background: transparent !important; border: none !important; box-shadow: none !important; transition: transform 0.4s cubic-bezier(0.22,1,0.36,1), box-shadow 0.4s ease !important; } /* Hover light: elevación + inset glow cobre */ .grid-post:hover, .grid-base-post:hover, .grid-card-post:hover { transform: translateY(-4px) !important; box-shadow: inset 0 0 0 1.5px rgba(160,118,60,0.45), inset 0 0 40px rgba(160,118,60,0.06), 0 20px 48px rgba(0,0,0,0.18) !important; } /* Hover dark: inset glow cyan */ .site-s-dark .grid-post:hover, .site-s-dark .grid-base-post:hover, .site-s-dark .grid-card-post:hover { box-shadow: inset 0 0 0 1.5px rgba(0,217,255,0.4), inset 0 0 40px rgba(0,217,255,0.06), 0 20px 48px rgba(0,0,0,0.5) !important; } /* Media: border-radius completo, fondo oscuro fallback aquí (no en el article) para evitar ring oscuro en esquinas */ .l-post .media { border-radius: 18px !important; overflow: hidden !important; position: relative !important; margin: 0 !important; background: #050505 !important; } /* image-link también necesita overflow hidden para que la imagen no sangre fuera del border-radius */ .l-post .media .image-link, .l-post .media > a { display: block !important; border-radius: 18px !important; overflow: hidden !important; } /* Zoom imagen en hover */ .l-post .media .wp-post-image, .l-post .media img, .l-post .media .img { transition: transform 0.75s cubic-bezier(0.22,1,0.36,1) !important; } .l-post:hover .media .wp-post-image, .l-post:hover .media img, .l-post:hover .media .img { transform: scale(1.06) !important; } /* Gradiente angular sobre la imagen — zona superior libre, oscuridad concentrada donde va el texto */ .grid-post .media::after, .grid-base-post .media::after, .grid-card-post .media::after { content: '' !important; position: absolute !important; inset: 0 !important; border-radius: 18px !important; background: linear-gradient( 168deg, transparent 32%, rgba(0,0,0,0.2) 56%, rgba(0,0,0,0.72) 82%, rgba(0,0,0,0.9) 100% ) !important; z-index: 1 !important; pointer-events: none !important; } /* Contenido posicionado sobre la imagen */ .grid-post .content, .grid-base-post .content, .grid-card-post .content { position: absolute !important; bottom: 0 !important; left: 0 !important; right: 0 !important; padding: 56px 16px 14px !important; background: none !important; background-color: transparent !important; background-image: none !important; border: none !important; box-shadow: none !important; z-index: 2 !important; } /* Reset del wrapper post-meta dentro del card */ .grid-post .content .post-meta, .grid-base-post .content .post-meta, .grid-card-post .content .post-meta { background: none !important; background-color: transparent !important; border: none !important; padding: 0 !important; margin: 0 !important; } /* Título: semi-transparente en reposo → glow en hover */ .grid-post .post-title a, .grid-base-post .post-title a, .grid-card-post .post-title a { color: rgba(255,255,255,0.78) !important; transition: color 0.35s ease, text-shadow 0.35s ease !important; text-shadow: 0 1px 4px rgba(0,0,0,0.5) !important; } .grid-post:hover .post-title a, .grid-base-post:hover .post-title a { color: #fff !important; text-shadow: 0 0 18px rgba(201,169,110,0.65), 0 0 40px rgba(201,169,110,0.28), 0 2px 6px rgba(0,0,0,0.6) !important; } .site-s-dark .grid-post:hover .post-title a, .site-s-dark .grid-base-post:hover .post-title a { color: #fff !important; text-shadow: 0 0 18px rgba(0,217,255,0.6), 0 0 42px rgba(0,217,255,0.22), 0 2px 6px rgba(0,0,0,0.7) !important; } /* Badge de categoría: posición fija sobre el gradiente */ .grid-post .cat-labels, .grid-base-post .cat-labels { position: absolute !important; top: 14px !important; left: 14px !important; bottom: auto !important; right: auto !important; z-index: 3 !important; margin: 0 !important; display: flex !important; flex-wrap: wrap !important; gap: 4px !important; } /* Badge de categoría: vidrio esmerilado */ .grid-post .cat-labels a, .grid-base-post .cat-labels a, .grid-card-post .cat-labels a { background: rgba(0,0,0,0.45) !important; backdrop-filter: blur(8px) !important; -webkit-backdrop-filter: blur(8px) !important; border: 1px solid rgba(255,255,255,0.16) !important; color: rgba(255,255,255,0.9) !important; transition: background 0.3s ease, border-color 0.3s ease !important; } .grid-post:hover .cat-labels a, .grid-base-post:hover .cat-labels a { background: rgba(160,118,60,0.72) !important; border-color: rgba(201,169,110,0.45) !important; color: #fff !important; } .site-s-dark .grid-post:hover .cat-labels a, .site-s-dark .grid-base-post:hover .cat-labels a { background: rgba(201,169,110,0.22) !important; border-color: rgba(201,169,110,0.55) !important; color: var(--c-main) !important; } /* Excerpt y meta de fecha/autor — ocultos en overlay */ .grid-post .post-excerpt, .grid-post .excerpt, .grid-base-post .post-excerpt, .grid-base-post .excerpt { display: none !important; } .grid-post .post-meta .post-meta-items, .grid-base-post .post-meta .post-meta-items { color: rgba(255,255,255,0.55) !important; font-size: 10px !important; text-shadow: 0 1px 3px rgba(0,0,0,0.6) !important; } /* ── LIST POSTS — layout horizontal, diseño completo ── Imagen izquierda · contenido derecha · responsive. Override explícito del .l-post .media global porque el fondo negro y border-radius de grids no aplica aquí. */ .list-post, .list-card-post { display: flex !important; align-items: stretch !important; background: var(--c-contrast-0) !important; border: none !important; border-radius: 14px !important; overflow: hidden !important; box-shadow: none !important; min-height: 130px !important; transition: transform 0.3s ease, box-shadow 0.3s ease !important; } .list-post:hover, .list-card-post:hover { transform: translateY(-3px) !important; box-shadow: 0 8px 32px rgba(0,0,0,0.1) !important; } .site-s-dark .list-post, .site-s-dark .list-card-post { background: var(--c-contrast-50) !important; } .site-s-dark .list-post:hover, .site-s-dark .list-card-post:hover { box-shadow: 0 8px 32px rgba(0,0,0,0.5) !important; } /* Media: imagen fija a la izquierda con altura explícita. La altura explícita rompe la dependencia circular: sin ella, a.image-link y span.img tendrían height=0. */ .list-post .media, .list-card-post .media { flex: 0 0 220px !important; width: 220px !important; height: 160px !important; border-radius: 0 !important; background: var(--c-contrast-75) !important; overflow: hidden !important; position: relative !important; margin: 0 !important; align-self: flex-start !important; } /* a.image-link: block que llena el .media. position:relative (no absolute) para que height:100% se resuelva contra el .media que ya tiene altura definida. */ .list-post .media .image-link, .list-post .media > a { display: block !important; width: 100% !important; height: 100% !important; padding-bottom: 0 !important; border-radius: 0 !important; position: relative !important; overflow: hidden !important; } /* span.img: cubre toda el área del enlace */ .list-post .media .img, .list-post .media .bg-cover { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; background-size: cover !important; background-position: center !important; transition: transform 0.65s cubic-bezier(0.22,1,0.36,1) !important; } .list-post:hover .media .img, .list-post:hover .media .bg-cover { transform: scale(1.05) !important; } /* Content: flex column, centrado verticalmente */ .list-post .content, .list-card-post .content { flex: 1 !important; padding: 16px 20px !important; background: none !important; background-color: transparent !important; display: flex !important; flex-direction: column !important; justify-content: center !important; gap: 6px !important; min-width: 0 !important; /* evita desbordamiento de texto */ } /* Post-meta wrapper: reset completo */ .list-post .content .post-meta { background: none !important; background-color: transparent !important; border: none !important; padding: 0 !important; margin: 0 !important; } /* Cat-labels en list-post: pills sobre fondo claro, layout flex */ .list-post .cat-labels { display: inline-flex !important; flex-wrap: wrap !important; gap: 4px !important; } .list-post .post-meta-items.meta-above { margin-bottom: 5px !important; line-height: 1 !important; } .list-post .post-meta { display: flex !important; flex-direction: column !important; gap: 2px !important; } /* Título: color de contraste normal (no blanco, está sobre fondo claro) */ .list-post .post-title { margin: 0 !important; } .list-post .post-title a { color: var(--c-contrast-900) !important; font-size: 0.95em !important; line-height: 1.4 !important; text-shadow: none !important; transition: color 0.25s ease !important; } .list-post .post-title a:hover { color: var(--c-main) !important; text-shadow: none !important; } .site-s-dark .list-post .post-title a { color: var(--c-headings) !important; } .site-s-dark .list-post .post-title a:hover { color: var(--c-main) !important; } /* Excerpt: máximo 2 líneas */ .list-post .excerpt, .list-post .post-excerpt { display: block !important; margin: 0 !important; } .list-post .excerpt p, .list-post .post-excerpt p { font-size: 12.5px !important; line-height: 1.55 !important; color: var(--c-contrast-650) !important; margin: 0 !important; display: -webkit-box !important; -webkit-box-orient: vertical !important; -webkit-line-clamp: 2 !important; overflow: hidden !important; } .site-s-dark .list-post .excerpt p, .site-s-dark .list-post .post-excerpt p { color: var(--c-contrast-500) !important; } /* ───────────────────────────────────────────────── SMALL POSTS — block-posts-small Grid 2 cols · thumbnail izquierda · solo título. ───────────────────────────────────────────────── */ /* Gap entre las 2 columnas del grid */ .loop-small { gap: 10px !important; } /* Card: compacto, horizontal, mismo estilo que list-post */ .small-post { display: flex !important; align-items: stretch !important; background: var(--c-contrast-0) !important; border: none !important; border-radius: 12px !important; overflow: hidden !important; box-shadow: none !important; min-height: 72px !important; transition: transform 0.3s ease, box-shadow 0.3s ease !important; } .small-post:hover { transform: translateY(-2px) !important; box-shadow: 0 6px 22px rgba(0,0,0,0.09) !important; } .site-s-dark .small-post { background: var(--c-contrast-50) !important; } .site-s-dark .small-post:hover { box-shadow: 0 6px 22px rgba(0,0,0,0.45) !important; } /* Media: thumbnail pequeño, sin border-radius propio, override del .l-post .media global (dark bg + 18px radius) */ .small-post .media { flex: 0 0 88px !important; width: 88px !important; height: 72px !important; border-radius: 0 !important; background: var(--c-contrast-75) !important; overflow: hidden !important; position: relative !important; margin: 0 !important; align-self: stretch !important; } /* a.image-link: block que llena el .media */ .small-post .media .image-link, .small-post .media > a { display: block !important; width: 100% !important; height: 100% !important; padding-bottom: 0 !important; border-radius: 0 !important; position: relative !important; overflow: hidden !important; } /* span.img: cubre todo */ .small-post .media .img, .small-post .media .bg-cover { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; background-size: cover !important; background-position: center !important; transition: transform 0.6s cubic-bezier(0.22,1,0.36,1) !important; } .small-post:hover .media .img, .small-post:hover .media .bg-cover { transform: scale(1.06) !important; } /* Content: título centrado verticalmente */ .small-post .content { flex: 1 !important; padding: 10px 14px !important; background: none !important; background-color: transparent !important; display: flex !important; flex-direction: column !important; justify-content: center !important; min-width: 0 !important; } .small-post .content .post-meta { background: none !important; background-color: transparent !important; border: none !important; padding: 0 !important; margin: 0 !important; } /* Título: h4 compacto, máximo 2 líneas */ .small-post .post-title { margin: 0 !important; } .small-post .post-title a { color: var(--c-contrast-900) !important; font-family: 'Montserrat', sans-serif !important; font-size: 0.8em !important; font-weight: 600 !important; line-height: 1.38 !important; text-shadow: none !important; display: -webkit-box !important; -webkit-box-orient: vertical !important; -webkit-line-clamp: 2 !important; overflow: hidden !important; transition: color 0.25s ease !important; } .small-post .post-title a:hover { color: var(--c-main) !important; text-shadow: none !important; } .site-s-dark .small-post .post-title a { color: var(--c-headings) !important; } .site-s-dark .small-post .post-title a:hover { color: var(--c-main) !important; } /* Dark mode text en contextos fuera de tarjetas (single post, archive, widget titles) */ .site-s-dark .post-title a { color: var(--c-headings) !important; } .site-s-dark .post-title a:hover { color: #C9A96E !important; } /* ───────────────────────────────────────────────── CAROUSEL / SLIDER — Bento Elegante v5.7 Imagen full-card · gradiente angular · texto semitransparente con glow en hover · sin fondo blanco en ningún modo · sin animación incompleta. ───────────────────────────────────────────────── */ /* Cancela opacidad de bento-reveal en slider. No tocamos transform ni transition para no interferir con la animación de deslizamiento de Slick. */ .slick-list .bento-reveal, .slick-list .bento-reveal.visible { opacity: 1 !important; } /* Card base slider — background transparente (vive en .media) */ .slick-list .l-post, .slick-list .grid-post, .slick-list .grid-base-post { position: relative !important; overflow: hidden !important; border-radius: 18px !important; background: transparent !important; background-color: transparent !important; border: none !important; box-shadow: none !important; transition: box-shadow 0.4s ease !important; } /* Hover: sin translateY + inset glow (nunca se corta) */ .slick-list .l-post:hover, .slick-list .grid-post:hover, .slick-list .grid-base-post:hover { transform: none !important; box-shadow: inset 0 0 0 1.5px rgba(160,118,60,0.45), inset 0 0 40px rgba(160,118,60,0.07) !important; } .site-s-dark .slick-list .l-post:hover, .site-s-dark .slick-list .grid-post:hover, .site-s-dark .slick-list .grid-base-post:hover { transform: none !important; box-shadow: inset 0 0 0 1.5px rgba(0,217,255,0.4), inset 0 0 40px rgba(0,217,255,0.07) !important; } /* Media slider: fondo oscuro aquí, no en el article */ .slick-list .l-post .media { border-radius: 18px !important; overflow: hidden !important; position: relative !important; background: #050505 !important; margin: 0 !important; } .slick-list .l-post .media .img, .slick-list .l-post .media .wp-post-image, .slick-list .l-post .media img { width: 100% !important; height: 100% !important; object-fit: cover !important; display: block !important; transition: transform 0.75s cubic-bezier(0.22,1,0.36,1) !important; } .slick-list .l-post:hover .media .img, .slick-list .l-post:hover .media .wp-post-image, .slick-list .l-post:hover .media img { transform: scale(1.07) !important; } /* Gradiente angular elegante — deja zona superior libre y concentra oscuridad en la zona del texto */ .slick-list .l-post .media::after { content: '' !important; position: absolute !important; inset: 0 !important; border-radius: 20px !important; background: linear-gradient( 168deg, transparent 30%, rgba(0,0,0,0.28) 58%, rgba(0,0,0,0.75) 82%, rgba(0,0,0,0.92) 100% ) !important; z-index: 1 !important; pointer-events: none !important; } /* Contenido sobre la imagen */ .slick-list .l-post .content { position: absolute !important; bottom: 0 !important; left: 0 !important; right: 0 !important; padding: 60px 18px 18px !important; background: none !important; background-color: transparent !important; background-image: none !important; border: none !important; box-shadow: none !important; z-index: 2 !important; } /* Título semitransparente en reposo → sólido + glow en hover */ .slick-list .post-title a, .site-s-dark .slick-list .post-title a { color: rgba(255,255,255,0.78) !important; font-size: 0.98em !important; line-height: 1.38 !important; letter-spacing: 0 !important; transition: color 0.35s ease, text-shadow 0.35s ease !important; text-shadow: 0 1px 4px rgba(0,0,0,0.5) !important; } /* Hover light mode — glow cobre cálido */ .slick-list .l-post:hover .post-title a { color: #fff !important; text-shadow: 0 0 18px rgba(201,169,110,0.65), 0 0 40px rgba(201,169,110,0.28), 0 2px 6px rgba(0,0,0,0.6) !important; } /* Hover dark mode — glow cyan eléctrico */ .site-s-dark .slick-list .l-post:hover .post-title a { color: #fff !important; text-shadow: 0 0 18px rgba(0,217,255,0.6), 0 0 42px rgba(0,217,255,0.22), 0 2px 6px rgba(0,0,0,0.7) !important; } /* Badge de categoría: vidrio esmerilado */ .slick-list .cat-labels { position: absolute !important; top: 14px !important; left: 14px !important; z-index: 3 !important; margin: 0 !important; } .slick-list .cat-labels a, .slick-list .cat-labels .category { background: rgba(0,0,0,0.48) !important; backdrop-filter: blur(10px) saturate(140%) !important; -webkit-backdrop-filter: blur(10px) saturate(140%) !important; border: 1px solid rgba(255,255,255,0.18) !important; color: rgba(255,255,255,0.92) !important; font-size: 8px !important; letter-spacing: 0.1em !important; transition: background 0.3s ease, border-color 0.3s ease, color 0.3s ease !important; } .slick-list .l-post:hover .cat-labels a, .slick-list .l-post:hover .cat-labels .category { background: rgba(160,118,60,0.72) !important; border-color: rgba(201,169,110,0.5) !important; color: #fff !important; } .site-s-dark .slick-list .l-post:hover .cat-labels a, .site-s-dark .slick-list .l-post:hover .cat-labels .category { background: rgba(201,169,110,0.22) !important; border-color: rgba(201,169,110,0.55) !important; color: var(--c-main) !important; } /* Reset del wrapper .post-meta-a que contiene el título en el slider — SmartMag le añade padding/border/bg que rompe el overlay */ .slick-list .post-meta { background: none !important; background-color: transparent !important; border: none !important; padding: 0 !important; margin: 0 !important; /* Sin font-size aquí: heredar para no encoger el h2 del título */ } /* Fecha/autor reales si aparecen dentro del slider */ .slick-list .post-meta .post-meta-item, .slick-list .post-meta .meta-item, .slick-list .post-meta span:not(.post-title):not(.is-title) { color: rgba(255,255,255,0.55) !important; font-size: 10px !important; text-shadow: 0 1px 3px rgba(0,0,0,0.6) !important; } /* Excerpt — oculto en slider para no saturar */ .slick-list .post-excerpt, .slick-list .excerpt { display: none !important; } /* ───────────────────────────────────────────────── POST TITLE — .post-title, .is-title ───────────────────────────────────────────────── */ .post-title { font-family: 'Playfair Display', Georgia, serif !important; font-weight: 700 !important; letter-spacing: 0 !important; line-height: 1.3 !important; } .post-title a { transition: color 0.3s ease !important; } /* El hover de título ya lo maneja --c-a-hover: var(--c-main) nativo */ /* ───────────────────────────────────────────────── POST META — .post-meta ───────────────────────────────────────────────── */ .post-meta { font-family: 'Montserrat', sans-serif !important; font-size: 11px !important; letter-spacing: 0.02em !important; } .post-meta .post-cat > a { font-size: 9px !important; font-weight: 700 !important; letter-spacing: 0.12em !important; } /* ───────────────────────────────────────────────── PAGINACIÓN — .pagination-numbers ───────────────────────────────────────────────── */ .pagination-numbers .page-numbers, .pagination-numbers .post-page-numbers, .pagination-numbers a { font-family: 'Montserrat', sans-serif !important; font-size: 12px !important; font-weight: 600 !important; border-radius: 8px !important; border: 0.5px solid var(--c-contrast-100) !important; transition: all 0.3s ease !important; } .pagination-numbers .current, .pagination-numbers a:hover { background: var(--c-main) !important; border-color: var(--c-main) !important; color: #fff !important; border-radius: 8px !important; } /* ───────────────────────────────────────────────── FORMULARIOS ───────────────────────────────────────────────── */ input:not([type=submit]):not([type=checkbox]):not([type=radio]), textarea, select { font-family: 'Montserrat', sans-serif !important; border-radius: 8px !important; border: 1px solid var(--c-contrast-150) !important; transition: border-color 0.3s ease, box-shadow 0.3s ease !important; } input:focus, textarea:focus, select:focus { border-color: var(--c-main) !important; box-shadow: 0 0 0 3px rgba(160,118,60,0.12) !important; } .site-s-dark input:focus, .site-s-dark textarea:focus { box-shadow: 0 0 0 3px rgba(201,169,110,0.15) !important; } input[type=search] { border-radius: 100px !important; } /* ───────────────────────────────────────────────── WIDGETS (sidebar) ───────────────────────────────────────────────── */ .main-sidebar .widget, .ts-sidebar .widget { border-radius: 12px !important; border: 0.5px solid var(--c-contrast-100) !important; padding: 20px !important; background: var(--c-contrast-0) !important; margin-bottom: 20px !important; transition: border-color 0.3s ease !important; } .main-sidebar .widget:hover, .ts-sidebar .widget:hover { border-color: var(--c-main) !important; } /* Widget title */ .widget-title, .widgettitle { font-family: 'Montserrat', sans-serif !important; font-size: 10px !important; font-weight: 800 !important; letter-spacing: 0.18em !important; text-transform: uppercase !important; color: var(--c-main) !important; border-bottom: 0.5px solid var(--c-contrast-100) !important; padding-bottom: 12px !important; margin-bottom: 14px !important; } /* Tabbed widget */ .widget-tabbed .tabs-list a { font-family: 'Montserrat', sans-serif !important; font-size: 11px !important; font-weight: 600 !important; letter-spacing: 0.06em !important; text-transform: uppercase !important; border-radius: 6px 6px 0 0 !important; } .widget-tabbed .tabs-list .active a { border-bottom: 2px solid var(--c-main) !important; } /* ───────────────────────────────────────────────── SINGLE POST — contenido, blockquote, headings ───────────────────────────────────────────────── */ .post-content { font-family: 'Montserrat', sans-serif !important; font-size: 16px !important; line-height: 1.85 !important; } .post-content h1, .post-content h2, .post-content h3, .post-content h4 { font-family: 'Playfair Display', Georgia, serif !important; margin-top: 1.8em !important; margin-bottom: 0.6em !important; } .post-content blockquote { border-left: 3px solid var(--c-main) !important; border-radius: 0 8px 8px 0 !important; background: var(--c-contrast-50) !important; padding: 14px 20px !important; font-family: 'Playfair Display', Georgia, serif !important; font-size: 1.2em !important; font-style: italic !important; } /* Encabezado del single */ .s-head-modern .post-title, .s-head-large .post-title { font-family: 'Playfair Display', Georgia, serif !important; font-weight: 700 !important; letter-spacing: -0.02em !important; line-height: 1.15 !important; } /* ───────────────────────────────────────────────── BREADCRUMBS ───────────────────────────────────────────────── */ .breadcrumbs { font-family: 'Montserrat', sans-serif !important; font-size: 11px !important; letter-spacing: 0.04em !important; } /* ───────────────────────────────────────────────── NAVEGACIÓN NEXT/PREV POSTS ───────────────────────────────────────────────── */ .navigate-posts .link { font-family: 'Playfair Display', Georgia, serif !important; font-size: 16px !important; font-weight: 600 !important; } .navigate-posts .title { font-family: 'Montserrat', sans-serif !important; font-size: 10px !important; letter-spacing: 0.12em !important; } /* ───────────────────────────────────────────────── FEATURED GRID (.feat-grid) & GRID-OVERLAY ───────────────────────────────────────────────── */ .feat-grid .post-title { font-family: 'Playfair Display', Georgia, serif !important; font-weight: 700 !important; letter-spacing: -0.01em !important; } /* Cat-labels homologados: frosted glass pill */ .grid-overlay .cat-labels, .grid-overlay-a .cat-labels { display: inline-flex !important; flex-wrap: wrap !important; gap: 4px !important; } .grid-overlay .cat-labels a, .grid-overlay-a .cat-labels a { background: rgba(0,0,0,0.45) !important; backdrop-filter: blur(8px) !important; -webkit-backdrop-filter: blur(8px) !important; border: 1px solid rgba(255,255,255,0.16) !important; color: rgba(255,255,255,0.9) !important; font-family: 'Montserrat', sans-serif !important; font-size: 9px !important; font-weight: 700 !important; letter-spacing: 0.10em !important; text-transform: uppercase !important; padding: 0 10px !important; line-height: 22px !important; border-radius: 100px !important; transition: background 0.3s ease, border-color 0.3s ease !important; display: inline-block !important; } .grid-overlay:hover .cat-labels a, .grid-overlay-a:hover .cat-labels a { background: rgba(160,118,60,0.72) !important; border-color: rgba(201,169,110,0.45) !important; color: #fff !important; } .site-s-dark .grid-overlay:hover .cat-labels a, .site-s-dark .grid-overlay-a:hover .cat-labels a { background: rgba(201,169,110,0.22) !important; border-color: rgba(201,169,110,0.55) !important; color: var(--c-main) !important; } /* Centrado de tags SOLO en cards pos-center (feat-grid-eq4) */ .feat-grid .pos-center .post-meta-items.meta-above { text-align: center !important; } .feat-grid .pos-center .cat-labels { justify-content: center !important; } /* feat-grid-b (pos-bot): tags alineados a la izquierda en desktop */ .feat-grid-b .post-meta-items.meta-above { text-align: left !important; } .feat-grid-b .cat-labels { justify-content: flex-start !important; } /* Espaciado: reducir separación entre badges y título */ .grid-overlay .post-meta-items.meta-above, .grid-overlay-a .post-meta-items.meta-above { margin-bottom: 5px !important; line-height: 1 !important; } .grid-overlay .post-meta, .grid-overlay-a .post-meta { display: flex !important; flex-direction: column !important; gap: 4px !important; } .grid-overlay .post-title, .grid-overlay-a .post-title { margin: 0 !important; line-height: 1.25 !important; } /* ───────────────────────────────────────────────── WIDGET SOCIAL FOLLOW ───────────────────────────────────────────────── */ /* Threads brand color es #000 → invisible en dark mode; forzar claro */ .site-s-dark .spc-social-colors .s-threads, .s-dark .spc-social-colors .s-threads { --c-spcs-icon: rgba(255,255,255,0.85) !important; --c-spc-social: rgba(255,255,255,0.85) !important; } /* Responsivo: desactivar el forzado a 1-col del theme entre 941-1200px */ @media (min-width: 768px) and (max-width: 1200px) { .spc-social-follow .grid-4, .spc-social-follow .md\:grid-4 { grid-template-columns: repeat(4, 1fr) !important; } } /* Estilo bento: cards con fondo sutil, bordes redondeados y hover */ .widget-social-b .service-wrap { border-radius: 12px !important; overflow: hidden !important; } .widget-social-b .service-link { border-radius: 12px !important; background: var(--c-contrast-50) !important; transition: background 0.25s ease, transform 0.25s ease !important; } .site-s-dark .widget-social-b .service-link { background: var(--c-contrast-50) !important; } .widget-social-b .service-link:hover { background: var(--c-contrast-75) !important; transform: translateY(-2px) !important; opacity: 1 !important; } .site-s-dark .widget-social-b .service-link:hover { background: var(--c-contrast-100) !important; } .widget-social-b .the-icon { font-size: 18px !important; } .widget-social-b .label { font-family: 'Montserrat', sans-serif !important; font-size: 11px !important; font-weight: 600 !important; letter-spacing: 0.03em !important; } /* ───────────────────────────────────────────────── FOOTER ───────────────────────────────────────────────── */ .main-footer { font-family: 'Montserrat', sans-serif !important; } .upper-footer .block-head .heading { font-family: 'Montserrat', sans-serif !important; font-size: 10px !important; letter-spacing: 0.16em !important; font-weight: 800 !important; } .lower-footer { font-family: 'Montserrat', sans-serif !important; font-size: 12px !important; letter-spacing: 0.02em !important; } /* ───────────────────────────────────────────────── REVIEW BOX ───────────────────────────────────────────────── */ .review-box { border-left: 3px solid var(--c-main) !important; border-radius: 0 12px 12px 0 !important; } .review-box .overall { border-radius: 8px !important; } .review-box .heading { font-family: 'Montserrat', sans-serif !important; font-size: 14px !important; letter-spacing: 0.04em !important; } /* ───────────────────────────────────────────────── MOBILE MENU ───────────────────────────────────────────────── */ .mobile-menu { font-family: 'Montserrat', sans-serif !important; font-size: 15px !important; font-weight: 600 !important; letter-spacing: 0.03em !important; } .mobile-menu li ul li a { font-size: 13px !important; font-weight: 500 !important; } /* ───────────────────────────────────────────────── ARCHIVE HEADING ───────────────────────────────────────────────── */ .archive-heading { font-family: 'Montserrat', sans-serif !important; font-size: 16px !important; font-weight: 800 !important; letter-spacing: 0.06em !important; border-left: 3px solid var(--c-main) !important; } .archive-description { font-family: 'Montserrat', sans-serif !important; font-size: 14px !important; } /* ───────────────────────────────────────────────── BARRA DE LECTURA (inyectada por JS) ───────────────────────────────────────────────── */ #reading-progress { position: fixed; top: 0; left: 0; height: 2px; width: 0%; background: linear-gradient(90deg, var(--c-main), var(--neon-blue), var(--neon-green)); z-index: 9999; transition: width 0.1s linear; } /* ───────────────────────────────────────────────── SCROLL REVEAL (inyectado por JS en .l-post, .block-wrap, .widget) ───────────────────────────────────────────────── */ .bento-reveal { opacity: 0; transform: translateY(20px); transition: opacity 0.65s cubic-bezier(0.22, 1, 0.36, 1), transform 0.65s cubic-bezier(0.22, 1, 0.36, 1); } .bento-reveal.visible { opacity: 1; transform: translateY(0); } .bento-reveal:nth-child(2) { transition-delay: 0.06s; } .bento-reveal:nth-child(3) { transition-delay: 0.12s; } .bento-reveal:nth-child(4) { transition-delay: 0.18s; } .bento-reveal:nth-child(5) { transition-delay: 0.24s; } .bento-reveal:nth-child(6) { transition-delay: 0.30s; } /* ══════════════════════════════════════════════════ PARTE 3: UTILIDADES ALTIORA — NEON Clases opcionales para destacar tarjetas o texto ══════════════════════════════════════════════════ */ /* ── Tarjetas neon (dark mode principalmente) ───── */ .card-neon-blue { background: linear-gradient(135deg, rgba(0,217,255,0.12), rgba(0,217,255,0.05)) !important; border-color: rgba(0,217,255,0.35) !important; box-shadow: 0 0 28px rgba(0,217,255,0.14) !important; } .card-neon-blue:hover { box-shadow: 0 0 48px rgba(0,217,255,0.28) !important; border-color: rgba(0,217,255,0.6) !important; } .card-neon-green { background: linear-gradient(135deg, rgba(0,245,152,0.12), rgba(0,245,152,0.05)) !important; border-color: rgba(0,245,152,0.35) !important; box-shadow: 0 0 28px rgba(0,245,152,0.14) !important; } .card-neon-green:hover { box-shadow: 0 0 48px rgba(0,245,152,0.28) !important; border-color: rgba(0,245,152,0.6) !important; } .card-neon-purple { background: linear-gradient(135deg, rgba(184,74,255,0.12), rgba(184,74,255,0.05)) !important; border-color: rgba(184,74,255,0.35) !important; box-shadow: 0 0 28px rgba(184,74,255,0.14) !important; } .card-neon-purple:hover { box-shadow: 0 0 48px rgba(184,74,255,0.28) !important; border-color: rgba(184,74,255,0.6) !important; } .card-neon-amber { background: linear-gradient(135deg, rgba(255,165,0,0.12), rgba(255,165,0,0.05)) !important; border-color: rgba(255,165,0,0.35) !important; box-shadow: 0 0 28px rgba(255,165,0,0.14) !important; } .card-neon-amber:hover { box-shadow: 0 0 48px rgba(255,165,0,0.28) !important; border-color: rgba(255,165,0,0.6) !important; } /* ── Glow de texto ──────────────────────────────── */ .glow-blue { color: var(--neon-blue) !important; text-shadow: 0 0 18px rgba(0,217,255,0.55); } .glow-green { color: var(--neon-green) !important; text-shadow: 0 0 18px rgba(0,245,152,0.55); } .glow-purple{ color: var(--neon-purple) !important; text-shadow: 0 0 18px rgba(184,74,255,0.55); } .glow-amber { color: var(--neon-amber) !important; text-shadow: 0 0 18px rgba(255,165,0,0.55); } /* ── Glassmorphism card (hero banners, etc.) ────── */ .glass-card { backdrop-filter: blur(16px) saturate(140%); -webkit-backdrop-filter: blur(16px) saturate(140%); background: rgba(253,250,245,0.7) !important; border: 0.5px solid rgba(255,255,255,0.4) !important; } .site-s-dark .glass-card { background: rgba(0,10,18,0.75) !important; border: 0.5px solid rgba(0,217,255,0.12) !important; } /* ───────────────────────────────────────────────── ESPACIADO DE SECCIONES Y CONTENEDORES Centrado y padding adecuado para todos los bloques. ───────────────────────────────────────────────── */ /* Grids no-slider: gap entre cards */ .loop-grid:not(.loop-carousel) { gap: 20px !important; } /* Slider: espacio interno entre slides via padding en el track */ .loop-carousel .slick-list { padding: 4px 2px !important; } /* Secciones de bloque: padding lateral generoso */ .block-wrap { padding-left: 6px !important; padding-right: 6px !important; } .block-content { padding-left: 4px !important; padding-right: 4px !important; } /* Elementor inner sections: más respiro horizontal */ .elementor-section-boxed .elementor-container { padding-left: 16px !important; padding-right: 16px !important; } /* ───────────────────────────────────────────────── RESPONSIVE ───────────────────────────────────────────────── */ /* ── Carousel → grid en mobile (≤767px) ────────── Slick sigue corriendo en JS pero lo sobreescribimos visualmente para mostrar un grid limpio de 2 cols. ─────────────────────────────────────────────────*/ @media (max-width: 767px) { /* Desbloquear overflow del slider — resetear altura inline de Slick */ .loop-carousel.slick-initialized, .loop-carousel.slick-slider { height: auto !important; overflow: visible !important; } .loop-carousel.slick-initialized .slick-list { overflow: visible !important; height: auto !important; padding: 0 !important; } /* Track → grid de 2 columnas */ .loop-carousel.slick-initialized .slick-track { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 14px !important; width: 100% !important; transform: none !important; opacity: 1 !important; } /* Ocultar slides clonados (Slick infinite loop) */ .loop-carousel.slick-initialized .slick-cloned { display: none !important; } /* Cada slide ocupa su celda del grid */ .loop-carousel.slick-initialized .slick-slide { width: auto !important; height: auto !important; float: none !important; opacity: 1 !important; display: block !important; } /* Ocultar controles de navegación en mobile */ .loop-carousel .prev-arrow, .loop-carousel .next-arrow, .loop-carousel .nav-dots { display: none !important; } /* Small-post mobile: grid de 1 col, imagen más pequeña */ .loop-small { gap: 8px !important; } .small-post .media { flex: 0 0 78px !important; width: 78px !important; height: 64px !important; } /* List-post mobile: de horizontal a vertical */ .list-post, .list-card-post { flex-direction: column !important; min-height: 0 !important; } .list-post .media, .list-card-post .media { flex: none !important; width: 100% !important; height: 200px !important; align-self: auto !important; } .list-post .media .image-link, .list-post .media > a { position: relative !important; width: 100% !important; height: 100% !important; padding-bottom: 0 !important; } .list-post .content, .list-card-post .content { padding: 14px 16px !important; } .list-post .excerpt p, .list-post .post-excerpt p { -webkit-line-clamp: 3 !important; } /* Tipografía y badges */ .cat-labels a, .cat-labels .category { font-size: 8px !important; padding: 0 8px !important; line-height: 20px !important; } .post-title { letter-spacing: -0.005em !important; } .block-head .heading { font-size: 9px !important; } /* feat-grid-b: centrar tags en mobile */ .feat-grid-b .post-meta-items.meta-above { text-align: center !important; } .feat-grid-b .cat-labels { justify-content: center !important; } /* Dot grid más sutil en mobile */ body { background-image: radial-gradient(circle, rgba(100,116,139,0.12) 1px, transparent 0); background-size: 22px 22px; } } /* Una sola columna en móviles muy pequeños */ @media (max-width: 480px) { .loop-carousel.slick-initialized .slick-track { grid-template-columns: 1fr !important; } }