/* Theme Name: PrimixIA Child Theme URI: https://primiciaia.com Description: Tema hijo de PrimixIA (antes Primicia IA), el medio de noticias de inteligencia artificial en español para Latinoamérica. Marca según docs/01-sistema-visual.md; tokens en assets/css/pia-brand-tokens.css. Nunca hardcodear colores aquí. Author: PrimixIA · SICOMMER INT LLC Author URI: https://primiciaia.com Template: jannah Version: 2.2.3 Requires at least: 6.4 Requires PHP: 8.1 License: GNU General Public License v2 or later License URI: https://www.gnu.org/licenses/gpl-2.0.html Text Domain: primicia-ia-child */ /* * Overrides de Jannah con la marca Primicia IA. * Selectores heredados del reconocimiento de Jannah hecho para ECN * (ecn-web/docs/03-reconocimiento-jannah.md) y verificados contra Jannah 7.6.x. * Cero hexadecimales: solo tokens. Sin !important: donde el CSS generado por * Theme Options (prioridad 1001) pisaría un override, se sube ESPECIFICIDAD, * no prioridad. * * 1.0.0 (2026-09-09) — tokens, fuentes autohospedadas, bloques editoriales. * 1.1.0 (2026-09-10) — arquitectura completa heredada de ECN: cabecera oscura * con retícula neural, navegación en píldoras con filete cian, chips bajo la * nav, tarjetas de portada, ticker del Radar, pie y espacios publicitarios. * 2.0.0 (2026-10-01) — rebrand a PrimixIA (wordmark PRIMIXIA▌, hasta la 2.2.0) y lienzo vivo * "ruido → señal" detrás de todo el sitio (pix-fondo.js + pix-inmersivo.css). * 2.0.1 (2026-10-01) — espacios publicitarios flotantes que la pieza llena de * borde a borde (sin punteado); anuncio de cabecera en la fila del logo (antes * se salía de la pantalla por la derecha). * 2.1.0 (2026-10-01) — efectos de IA Master Tech (pix-efectos.js/.css): tarjetas * con inclinación 3D, foco y borde giratorio; botones magnéticos con barrido; * aparición escalonada al hacer scroll; imágenes con barrido; cursor propio; * barra de lectura; transición entre páginas con cortina. * 2.1.1 (2026-10-01) — cabecera y menú de vidrio esmerilado: fuera las cajas * negras internas de Jannah; velo 34 % + desenfoque 18 px. * 2.1.2 (2026-10-01) — cabecera como una sola banda de ancho completo (velo 58 %); * sin filter ni transform dentro de ella: en Safari pintaban la fila del logo * como un rectángulo aparte. * 2.1.3 (2026-10-01) — categorías, etiquetas, autor, búsqueda y 404 con el mismo * lienzo y tarjetas de la portada; cabecera del listado como tarjeta de vidrio. * 2.1.4 (2026-10-01) — transición de página sin brinco: todo termina antes de * navegar (440 ms), la cortina de llegada se arma al abrir el en el mismo * estado y el logo es SVG (no depende de que cargue la fuente). * 2.2.0 (2026-10-01) — marca nueva hecha con Magnific (decisión 118): wordmark * PRIMIXIA (grotesca pesada con cortes, IA en cian) e icono P + IA. Sale el * cursor ▌; en .pia-radar y .pia-cursor lo reemplaza un punto cian que late. * 2.2.1 (2026-10-01) — logo completo en la cabecera: PRIMIXIA + «LAS NOTICIAS * DE IA EN LATAM»; en móvil (< 992 px) se recorta al wordmark. * 2.2.2 (2026-10-01) — widgets en español con estilo de marca: «Lo último» y * «Secciones» en píldoras con botón al boletín (antes Archives/Categories). * 2.2.3 (2026-10-01) — el botón del boletín del widget le gana a la capa del * lienzo: texto negro sobre cian, como manda la regla de contraste. * * Orden de carga (functions.php): pia-fonts → pia-brand-tokens → * pia-components → pia-bloques → este archivo → pia-senal (capa oscura). */ /* ---- Variables propias de Jannah, redefinidas con tokens Primicia ---- * Jannah pinta marca, navegación y botones desde estas custom properties. * Redefinirlas cubre la mayor parte de la identidad sin tocar plantillas. * * Regla de contraste que gobierna todo el archivo: el cian es LUZ. Sobre * blanco no sirve como texto de cuerpo (2,6:1), así que cuando el cian es * relleno, el texto que va encima es NEGRO (10,4:1); cuando el cian es texto, * va sobre negro o superficie oscura. Sobre blanco el enlace usa el cian * oscuro (--pia-cian-oscuro, 4,6:1). */ :root { --brand-color: var(--pia-cian); --dark-brand-color: var(--pia-cian-oscuro); --base-color: var(--pia-negro); --bright-color: var(--pia-blanco); /* Navegación principal: negro neural, texto blanco, acento cian */ --main-nav-background: var(--pia-negro); --main-nav-text-color: var(--pia-blanco); --main-nav-primary-color: var(--pia-cian); --main-nav-contrast-primary-color: var(--pia-negro); --main-nav-main-border-color: var(--pia-negro); --main-nav-secondry-background: var(--pia-superficie); --main-nav-secondry-text-color: var(--pia-blanco); --main-nav-secondry-border-color: var(--pia-tech-linea); /* C6 — Botones (Newsletter): cian con texto negro, píldora */ --tie-buttons-color: var(--pia-cian); --tie-buttons-text: var(--pia-negro); --tie-buttons-hover-color: var(--pia-cian-vivo); --tie-buttons-hover-text: var(--pia-negro); --tie-buttons-border-color: var(--pia-cian); --tie-buttons-radius: var(--pia-radio-pildora); } /* Jannah redefine las variables de la barra EN #theme-header según el skin * elegido en Theme Options (gana a :root). Se vuelven a fijar con id + clase. */ #theme-header.main-nav-light, #theme-header.main-nav-dark, #theme-header.main-nav-default-light, #theme-header.main-nav-default-dark { --main-nav-background: var(--pia-negro); --main-nav-text-color: var(--pia-blanco); --main-nav-primary-color: var(--pia-cian); --main-nav-contrast-primary-color: var(--pia-negro); --main-nav-main-border-color: var(--pia-negro); --main-nav-secondry-background: var(--pia-superficie); --main-nav-secondry-text-color: var(--pia-blanco); --main-nav-secondry-border-color: var(--pia-tech-linea); } /* ===================================================================== * Fondo de las vistas claras: retícula sutil sobre gris de superficie. * El contenido flota en tarjetas redondeadas sobre una rejilla muy tenue. * ================================================================== */ body { background-color: var(--pia-gris-superficie); background-image: linear-gradient(var(--pia-tech-linea-clara) 1px, transparent 1px), linear-gradient(90deg, var(--pia-tech-linea-clara) 1px, transparent 1px); background-size: var(--pia-reticula-tam); /* Sin background-attachment: fixed — en ECN la retícula fija hacía que * Chrome dejara de pintar las fotos de las tarjetas. */ } body.wrapper-has-shadow #tie-wrapper, #tie-wrapper { background: transparent; box-shadow: none; } #content .container-wrapper, .container-wrapper { background: var(--pia-blanco); border-radius: var(--pia-radio-borde); box-shadow: var(--pia-sombra-tarjeta); border: 0; } /* ===================================================================== * Cabecera — oscura en TODAS las páginas, también sobre la nota clara. * Por eso vive aquí y no en pia-senal.css. El logo es el wordmark en su * versión para fondo oscuro (assets/img/logo-primicia-ia-negativo.svg, * apuntado desde Theme Options); la IA va en cian. * ================================================================== */ #top-nav { background: var(--pia-negro); border-bottom: 1px solid var(--pia-tech-linea); } /* Fecha, titular de última hora, flechas y redes sobre el negro. Doble ID a * propósito: Jannah pinta los componentes desde #theme-header.top-nav-light. */ #theme-header #top-nav, #theme-header #top-nav a, #theme-header #top-nav .topbar-today-date, #theme-header #top-nav .breaking-news a, #theme-header #top-nav .news-item a, #theme-header #top-nav .components a, #theme-header #top-nav .components li a, #theme-header #top-nav .tie-icon, #theme-header #top-nav [class^='tie-icon-'], #theme-header #top-nav [class*=' tie-icon-'] { color: var(--pia-tech-texto-suave); } #theme-header #top-nav a:hover, #theme-header #top-nav .components a:hover, #theme-header #top-nav .news-item a:hover { color: var(--pia-blanco); } /* El carrusel de titulares trae fondo blanco; sobre la franja negra sería * una caja clara con texto blanco encima. */ #theme-header #top-nav .ticker-content, #theme-header #top-nav .breaking-news, #theme-header #top-nav .topbar-wrapper { background: transparent; } /* La cortina del efecto «reveal» debe ser del color exacto de la franja. */ #theme-header #top-nav .ticker-swipe, #theme-header #top-nav .ticker-swipe span { background: var(--pia-negro); } /* ---- Barra ÚLTIMA HORA: el único ámbar de la cabecera ---- * Jannah la alimenta con la categoría `ultima-hora` (Theme Options → * Breaking News). El rótulo va en ámbar con texto negro y pulsa suave; el * titular sigue en blanco. Si no hay breaking, la barra no se muestra * (opción de Jannah), y el ámbar desaparece de la pantalla: así conserva * su significado. */ #top-nav .breaking-title, #theme-header .breaking-title, #theme-header #top-nav .breaking-title { background: var(--pia-ambar); color: var(--pia-ambar-texto); border-radius: var(--pia-radio-pildora); padding-inline: var(--pia-sp-3); font-family: var(--pia-font-titular); font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; box-shadow: var(--pia-ambar-glow); animation: pia-pulso-suave 2.4s ease-in-out infinite; } #theme-header #top-nav .breaking-news a { color: var(--pia-blanco); } @keyframes pia-pulso-suave { 0%, 100% { opacity: 1; } 50% { opacity: 0.78; } } #theme-header, #theme-header .logo-row, #theme-header .logo-container, #theme-header .header-container { background: var(--pia-negro); } #theme-header, #theme-header.has-shadow { box-shadow: none; } /* ---- Logo sobre la cabecera oscura ---- * Theme Options apunta al PNG de la 1.0.0 (PRIMICIA en negro): sobre el negro * neural desaparece media marca. Hasta que Theme Options apunte a la versión * negativa, el wordmark en SVG (assets/img/logo-primicia-ia-negativo.svg, * incrustado como data URI para no depender de subir binarios) se pinta * encima y el PNG queda invisible pero conserva su caja: así no salta el * maquetado ni cambia el tamaño que Jannah calculó. */ #theme-header #logo picture, #theme-header #logo img.tie-logo-img { visibility: hidden; } #theme-header #logo > a { display: inline-block; position: relative; } #theme-header #logo > a::after { content: ''; position: absolute; inset: 0; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='486 631 1713 397' width='431' height='100' role='img' aria-label='PrimixIA — Las noticias de IA en LATAM'%3E%3Ctitle%3EPrimixIA — Las noticias de IA en LATAM%3C/title%3E%3Cpath fill='%2300C2D8' fill-rule='evenodd' d='M 1995.2 644.2 C 2026.7 644.7 2059.8 644.2 2091.4 644.2 C 2105.4 680.3 2118.8 719.7 2131.9 756.3 L 2185.7 904.7 C 2158.1 904.8 2130.4 904.6 2102.8 904.4 C 2098.2 890.7 2092.5 871.2 2089.1 857.3 C 2083.3 856.5 2062 856.9 2055.7 856.9 C 2035.2 857 2014.7 857 1994.2 856.8 C 1989.6 872.8 1984.8 888.8 1979.7 904.6 L 1900.9 904.8 C 1906.4 888.2 1914 869.3 1920 852.6 L 1954.8 756.2 L 1979.9 686.5 C 1984.6 673.3 1989.8 657 1995.2 644.2 z M 2042 694.5 C 2044.3 698.7 2050.8 719.8 2052.5 725.2 L 2075.7 798.8 L 2043.7 798.7 L 2009.1 798.7 C 2016.6 770.7 2031.8 721.6 2042 694.5 z'/%3E%3Cpath fill='%23FFFFFF' fill-rule='evenodd' d='M 808.7 643.9 C 828.9 644.2 849.3 643.7 869.5 643.8 C 903.1 643.9 932.7 640.9 963.8 657.1 C 997.2 674.4 1008.8 717.7 991.6 750.6 C 981.7 769.4 961.4 776.3 941.6 781.7 C 1017.9 798 985.5 854.7 998.5 904.9 C 975.7 905.1 953 905 930.2 904.9 C 923.7 881.8 928.7 840.6 918.3 828.3 C 908.7 817 850.1 819.9 832.3 819.8 C 832.2 835.9 832.3 852.2 832.3 868.2 L 832.3 904.7 C 809 905.1 784.4 904.7 761 904.6 L 761 709.5 C 784.8 711.1 808.5 713 832.3 715.1 L 832.3 760.9 C 851 761.5 869.8 760.9 888.5 761.3 C 908.1 761.9 925.3 757.5 928.2 735.2 C 929.9 722.4 922.3 705.1 908.7 703.4 C 884.4 700.5 857.9 702.9 833.4 701.9 C 807.4 700.9 781.5 699.1 755.6 697.4 C 760.1 692.3 768.2 684.9 773.4 679.7 L 808.7 643.9 z'/%3E%3Cpath fill='%23FFFFFF' fill-rule='evenodd' d='M 551.7 643.9 C 579.4 643.2 607.6 644.3 635.3 643.7 C 649.5 643.5 664 643.8 677.8 647.3 C 692.4 651 705.8 658.4 716.7 668.8 C 751.7 702.2 753.2 761.4 719.2 795.9 C 691.7 823.7 657.7 822.8 622.1 822.8 L 573.3 822.7 C 572.9 849.8 573.3 877.6 573.3 904.7 L 502 904.7 L 501.9 874.5 L 502 709.1 L 573.4 714.9 L 573.5 763.9 C 596.1 763.7 621 765.4 643.4 763.5 C 677.2 760.5 679.2 706.6 643.5 702.9 C 621.3 700.6 598.6 702.7 576.3 702.2 C 551.1 701 524.4 699.4 499.5 697 C 517.1 679.5 534.5 661.8 551.7 643.9 z'/%3E%3Cpath fill='%23FFFFFF' fill-rule='evenodd' d='M 1154.3 644.2 L 1224.2 644 C 1241.3 701.7 1261 758.3 1278.6 815.5 C 1283.9 797 1290.7 777.1 1296.4 758.6 L 1331.8 644 L 1414.5 644.1 C 1402.8 663.5 1389.8 683.4 1378.9 703.1 C 1370.6 718.6 1360.2 727.7 1360.5 745.9 C 1360.5 748.6 1358.2 754.4 1357.2 757.1 C 1339.3 806.5 1320.8 855.6 1302 904.6 C 1284.2 904.9 1265.8 904.7 1247.9 904.7 L 1198.3 763.7 C 1196.7 758.9 1194 752.1 1193 747.2 C 1188 724 1177.3 703.4 1168.9 681.5 C 1164.6 670.3 1157 655.4 1154.3 644.2 z'/%3E%3Cpath fill='%23FFFFFF' fill-rule='evenodd' d='M 1544.5 644 L 1624.3 644.1 C 1653.3 688 1681.7 732.5 1709.2 777.4 C 1700.4 790.8 1625.1 900.6 1620.1 904.5 C 1593.1 904.7 1566.1 904.8 1539.1 904.7 C 1568.5 860.9 1600.3 818.2 1630 774.6 C 1601.8 731.3 1573.5 686.7 1544.5 644 z'/%3E%3Cpath fill='%23FFFFFF' fill-rule='evenodd' d='M 1527.5 638.7 L 1530.3 639.5 C 1532.2 646.1 1530.9 695 1530.9 706.5 L 1530.8 904.6 C 1508.1 904.9 1484.7 904.6 1462 904.5 C 1460 904.5 1461 904.7 1459.3 903.4 C 1458.5 880.7 1459 855.1 1459 832.1 L 1459.3 707.4 C 1482.3 684.9 1504.6 661.4 1527.5 638.7 z'/%3E%3Cpath fill='%23FFFFFF' fill-rule='evenodd' d='M 1085.9 639.6 L 1087.7 639.8 C 1090 643.3 1089 717.5 1089 729 L 1089.1 904.7 L 1020 904.7 L 1018.3 904.4 C 1016.3 901.7 1017.4 723.5 1017.4 708.1 L 1085.9 639.6 z'/%3E%3Cpath fill='%2300C2D8' fill-rule='evenodd' d='M 1887.5 639.7 L 1889.3 640 C 1892 643.4 1890.7 656.1 1890.7 661.2 C 1890.6 682.4 1890.7 703.7 1890.7 724.9 L 1890.8 904.7 L 1822.8 904.7 C 1820.9 904.6 1821.8 904.8 1820.2 903.4 C 1819.5 899.6 1819.7 857.8 1819.7 851.2 L 1819.7 707.6 C 1825.5 700.8 1836.8 690.2 1843.3 683.6 C 1857.9 668.8 1872.6 654.2 1887.5 639.7 z'/%3E%3Cpath fill='%23FFFFFF' fill-rule='evenodd' d='M 1426.2 643.5 C 1427.9 644 1428.7 644.3 1430.4 644.9 C 1432 649.2 1431.1 709 1431 717.1 L 1430.9 904.8 C 1408.9 904.8 1386.8 904.7 1364.8 904.4 L 1361 904 C 1359.6 901.5 1363.6 760.9 1364 746.2 C 1384.3 711.8 1405.1 677.5 1426.2 643.5 z'/%3E%3Cpath fill='%23FFFFFF' fill-rule='evenodd' d='M 1146.8 655.6 C 1150.8 658.2 1183.4 741.9 1186.6 752.1 C 1188.3 757.2 1188 793.3 1188 801.8 L 1187.9 904.7 L 1164.2 904.8 L 1119.8 904.7 L 1119.8 695.8 C 1129 682.5 1138 669.1 1146.8 655.6 z'/%3E%3Cpath fill='%23FFFFFF' fill-rule='evenodd' d='M 1723.5 781.5 C 1727.8 784 1800.7 892.1 1809 904.8 L 1769.3 904.7 C 1755.6 904.7 1741.9 904.6 1728.2 904.4 C 1714.7 887 1696.7 857.3 1683.8 838 C 1696.9 820.3 1711 799.6 1723.5 781.5 z'/%3E%3Cpath fill='%23FFFFFF' fill-rule='evenodd' d='M 1729.2 644 C 1753.9 643.5 1780.6 643.9 1805.5 643.9 C 1781.9 676.6 1758.5 709.4 1735.4 742.4 C 1729.4 750.4 1723.7 758.6 1718.3 766.9 C 1706.5 747.6 1694.5 728.8 1682.8 709.4 C 1697.4 690.7 1715.2 663.9 1729.2 644 z'/%3E%3Cpath fill='%23FFFFFF' fill-rule='evenodd' d='M499.5 1019.7V969H507.3V1012.6H531.7V1019.7Z'/%3E%3Cpath fill='%23FFFFFF' fill-rule='evenodd' d='M561.4 1019.7 575.9 969H589.6L604 1019.7H596L592.7 1007.7H572.9L569.5 1019.7ZM574.8 1000.5H590.7L583.3 973.9H582.2Z'/%3E%3Cpath fill='%23FFFFFF' fill-rule='evenodd' d='M654.5 1020.7Q648.8 1020.7 644.3 1018.6Q639.9 1016.6 637.4 1012.7Q634.9 1008.7 634.9 1003.1V1001.3H642.7V1003.1Q642.7 1008.4 645.9 1011.1Q649.1 1013.8 654.5 1013.8Q659.9 1013.8 662.6 1011.5Q665.4 1009.2 665.4 1005.6Q665.4 1003.2 664.1 1001.7Q662.8 1000.2 660.4 999.3Q658 998.4 654.7 997.6L652 996.9Q647.2 995.8 643.6 994.1Q640 992.4 638.1 989.6Q636.1 986.8 636.1 982.3Q636.1 977.9 638.3 974.7Q640.5 971.5 644.4 969.8Q648.3 968 653.6 968Q658.9 968 663 969.8Q667.2 971.6 669.6 975.2Q672 978.7 672 984.1V986.7H664.2V984.1Q664.2 980.8 662.9 978.8Q661.6 976.8 659.2 975.8Q656.8 974.9 653.6 974.9Q649 974.9 646.4 976.8Q643.8 978.7 643.8 982.1Q643.8 984.4 645 985.9Q646.1 987.4 648.3 988.3Q650.4 989.3 653.7 990L656.4 990.7Q661.3 991.7 665 993.4Q668.8 995.1 671 998Q673.1 1000.9 673.1 1005.5Q673.1 1010 670.8 1013.4Q668.6 1016.8 664.4 1018.7Q660.2 1020.7 654.5 1020.7Z'/%3E%3Cpath fill='%23FFFFFF' fill-rule='evenodd' d='M752.5 1019.7V969H767.5L781.2 1014.4H782.4V969H790.1V1019.7H775.1L761.4 974.2H760.2V1019.7Z'/%3E%3Cpath fill='%23FFFFFF' fill-rule='evenodd' d='M846.1 1020.7Q836.7 1020.7 831.3 1015.4Q825.8 1010.2 825.8 1000.3V988.4Q825.8 978.5 831.3 973.3Q836.7 968 846.1 968Q855.4 968 860.9 973.3Q866.5 978.5 866.5 988.4V1000.3Q866.5 1010.2 860.9 1015.4Q855.4 1020.7 846.1 1020.7ZM846.1 1013.7Q852.1 1013.7 855.3 1010.1Q858.6 1006.6 858.6 1000.6V988.1Q858.6 982.1 855.3 978.5Q852.1 975 846.1 975Q840.2 975 836.9 978.5Q833.6 982.1 833.6 988.1V1000.6Q833.6 1006.6 836.9 1010.1Q840.2 1013.7 846.1 1013.7Z'/%3E%3Cpath fill='%23FFFFFF' fill-rule='evenodd' d='M914.2 1019.7V976.1H898.6V969H937.5V976.1H922V1019.7Z'/%3E%3Cpath fill='%23FFFFFF' fill-rule='evenodd' d='M971 1019.7V969H978.8V1019.7Z'/%3E%3Cpath fill='%23FFFFFF' fill-rule='evenodd' d='M1034.5 1020.7Q1025.2 1020.7 1019.8 1015.4Q1014.4 1010.2 1014.4 1000.3V988.4Q1014.4 978.5 1019.8 973.3Q1025.2 968 1034.5 968Q1043.6 968 1048.6 973.1Q1053.5 978.1 1053.5 986.9V987.3H1045.8V986.7Q1045.8 981.5 1043 978.3Q1040.2 975 1034.5 975Q1028.7 975 1025.5 978.5Q1022.2 982.1 1022.2 988.3V1000.4Q1022.2 1006.6 1025.5 1010.1Q1028.7 1013.7 1034.5 1013.7Q1040.2 1013.7 1043 1010.4Q1045.8 1007.1 1045.8 1002V1000.8H1053.5V1001.8Q1053.5 1010.5 1048.6 1015.6Q1043.6 1020.7 1034.5 1020.7Z'/%3E%3Cpath fill='%23FFFFFF' fill-rule='evenodd' d='M1088.6 1019.7V969H1096.4V1019.7Z'/%3E%3Cpath fill='%23FFFFFF' fill-rule='evenodd' d='M1129.5 1019.7 1144 969H1157.7L1172.1 1019.7H1164.1L1160.8 1007.7H1140.9L1137.6 1019.7ZM1142.9 1000.5H1158.8L1151.4 973.9H1150.3Z'/%3E%3Cpath fill='%23FFFFFF' fill-rule='evenodd' d='M1222.6 1020.7Q1216.8 1020.7 1212.4 1018.6Q1208 1016.6 1205.5 1012.7Q1203 1008.7 1203 1003.1V1001.3H1210.8V1003.1Q1210.8 1008.4 1214 1011.1Q1217.2 1013.8 1222.6 1013.8Q1228 1013.8 1230.7 1011.5Q1233.5 1009.2 1233.5 1005.6Q1233.5 1003.2 1232.2 1001.7Q1230.9 1000.2 1228.5 999.3Q1226.1 998.4 1222.8 997.6L1220.1 996.9Q1215.3 995.8 1211.7 994.1Q1208.1 992.4 1206.1 989.6Q1204.2 986.8 1204.2 982.3Q1204.2 977.9 1206.4 974.7Q1208.6 971.5 1212.5 969.8Q1216.4 968 1221.7 968Q1227 968 1231.1 969.8Q1235.3 971.6 1237.7 975.2Q1240.1 978.7 1240.1 984.1V986.7H1232.3V984.1Q1232.3 980.8 1231 978.8Q1229.6 976.8 1227.3 975.8Q1224.9 974.9 1221.7 974.9Q1217.1 974.9 1214.5 976.8Q1211.9 978.7 1211.9 982.1Q1211.9 984.4 1213 985.9Q1214.2 987.4 1216.3 988.3Q1218.5 989.3 1221.8 990L1224.4 990.7Q1229.4 991.7 1233.1 993.4Q1236.9 995.1 1239 998Q1241.2 1000.9 1241.2 1005.5Q1241.2 1010 1238.9 1013.4Q1236.7 1016.8 1232.5 1018.7Q1228.3 1020.7 1222.6 1020.7Z'/%3E%3Cpath fill='%23FFFFFF' fill-rule='evenodd' d='M1318.7 1019.7V1012.7H1325.5V976H1318.7V969H1338.9Q1349 969 1354.4 974.2Q1359.8 979.3 1359.8 989.6V999.1Q1359.8 1009.5 1354.4 1014.6Q1349 1019.7 1338.9 1019.7ZM1333.3 1012.6H1339Q1345.6 1012.6 1348.7 1009.2Q1351.9 1005.9 1351.9 999.3V989.4Q1351.9 982.7 1348.7 979.4Q1345.6 976.2 1339 976.2H1333.3Z'/%3E%3Cpath fill='%23FFFFFF' fill-rule='evenodd' d='M1395 1019.7V969H1426.9V976.1H1402.8V990.7H1424.9V997.7H1402.8V1012.6H1427.2V1019.7Z'/%3E%3Cpath fill='%2300C2D8' fill-rule='evenodd' d='M1506.6 1019.7V969H1514.4V1019.7Z'/%3E%3Cpath fill='%2300C2D8' fill-rule='evenodd' d='M1547.6 1019.7 1562 969H1575.8L1590.1 1019.7H1582.1L1578.8 1007.7H1559L1555.6 1019.7ZM1560.9 1000.5H1576.8L1569.5 973.9H1568.3Z'/%3E%3Cpath fill='%23FFFFFF' fill-rule='evenodd' d='M1668.2 1019.7V969H1700.1V976.1H1676V990.7H1698V997.7H1676V1012.6H1700.4V1019.7Z'/%3E%3Cpath fill='%23FFFFFF' fill-rule='evenodd' d='M1735 1019.7V969H1750L1763.7 1014.4H1764.9V969H1772.6V1019.7H1757.6L1743.9 974.2H1742.7V1019.7Z'/%3E%3Cpath fill='%23FFFFFF' fill-rule='evenodd' d='M1854.4 1019.7V969H1862.2V1012.6H1886.5V1019.7Z'/%3E%3Cpath fill='%23FFFFFF' fill-rule='evenodd' d='M1916.3 1019.7 1930.8 969H1944.5L1958.9 1019.7H1950.9L1947.5 1007.7H1927.7L1924.4 1019.7ZM1929.7 1000.5H1945.6L1938.2 973.9H1937Z'/%3E%3Cpath fill='%23FFFFFF' fill-rule='evenodd' d='M2004.2 1019.7V976.1H1988.6V969H2027.5V976.1H2012V1019.7Z'/%3E%3Cpath fill='%23FFFFFF' fill-rule='evenodd' d='M2057.2 1019.7 2071.7 969H2085.4L2099.8 1019.7H2091.8L2088.5 1007.7H2068.7L2065.3 1019.7ZM2070.6 1000.5H2086.5L2079.1 973.9H2078Z'/%3E%3Cpath fill='%23FFFFFF' fill-rule='evenodd' d='M2133.1 1019.7V969H2147.7L2158.8 1014.4H2160L2171 969H2185.7V1019.7H2178.1V974.5H2177L2166 1019.7H2152.8L2141.8 974.5H2140.7V1019.7Z'/%3E%3C/svg%3E") left center / contain no-repeat; pointer-events: none; } /* Cabecera móvil de Jannah (< 992 px): la caja del logo mide ~190x45 y el * claim saldría de 5 px. Se recorta la MISMA imagen: un marco con la proporción * del wordmark (la escribe scripts/generar-logo.py) y el fondo al 100 % de * ancho; el claim queda debajo, fuera del marco. */ @media (max-width: 991px) { #theme-header #logo > a::after { inset: 50% auto auto 0; width: 100%; aspect-ratio: 6.072 / 1; /* wordmark dentro del logo completo */ transform: translateY(-50%); background-size: 100% auto; background-position: left top; } } /* Navegación de borde a borde (main_nav_layout vacío en Theme Options), * con el menú dentro del contenedor. El filete cian va debajo. */ #main-nav, #theme-header #main-nav, #theme-header #main-nav.main-nav-dark { position: relative; background-color: var(--pia-negro); background-image: var(--pia-halo), var(--pia-reticula); background-size: auto, var(--pia-reticula-tam); border: 0; } #main-nav::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--pia-filete); box-shadow: 0 0 12px var(--pia-cian-suave), 0 0 28px var(--pia-cian-tenue); pointer-events: none; z-index: 1; } /* Ítems en píldora, sentence case, sin subrayado ni filetes de Jannah */ .main-nav .main-menu > ul > li > a, #main-nav .main-menu > ul > li > a { text-transform: none; font-family: var(--pia-font-titular); font-weight: 500; font-size: var(--pia-fs-base); letter-spacing: 0; border-radius: var(--pia-radio-pildora); padding-inline: var(--pia-sp-4); line-height: 2.4; margin-block: var(--pia-sp-2); transition: background-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease; } .main-nav .main-menu > ul > li > a:hover, .main-nav .main-menu > ul > li.menu-item-has-children:hover > a { background: var(--pia-tech-hover); color: var(--pia-blanco); } /* Sección activa: píldora cian con texto negro y brillo */ .main-nav .main-menu > ul > li.current-menu-item > a, .main-nav .main-menu > ul > li.current-menu-ancestor > a, .main-nav .main-menu > ul > li.tie-current-menu > a { background: var(--pia-cian); color: var(--pia-negro); box-shadow: var(--pia-glow); } .main-nav .main-menu > ul > li > a::after, .main-nav .main-menu > ul > li > a::before, .main-nav .main-menu .menu-sub-content li a::before { display: none; } /* Desplegables y mega menú: superficie oscura, borde cian tenue, sombra */ .main-nav .menu-sub-content, .main-nav .mega-menu-block { background: var(--pia-superficie); border: 1px solid var(--pia-cian-suave); border-radius: var(--pia-radio-borde); box-shadow: var(--pia-sombra-flotante), 0 0 24px var(--pia-cian-tenue); overflow: hidden; } .main-nav .menu-sub-content li a { font-family: var(--pia-font-cuerpo); font-weight: 500; text-transform: none; color: var(--pia-blanco); } .main-nav .menu-sub-content li a:hover { color: var(--pia-cian); } .main-nav .mega-menu-block .post-title a, .main-nav .mega-menu-block h2, .main-nav .mega-menu-block h3 { color: var(--pia-blanco); } .main-nav .search-bar, .main-nav #search-input, .main-nav .search-bar input { border-radius: var(--pia-radio-pildora); } #main-nav.sticky-nav-active .main-menu > ul > li > a { line-height: 2.2; margin-block: var(--pia-sp-1); } /* ---- Ítems especiales del menú principal ---- * Se activan con clases CSS puestas en el ítem del menú (wp-admin, REST o * scripts/pia-setup-menu.php): * .pia-ultima-hora → "Última hora": píldora ámbar con punto pulsante * .pia-suscribete → "Newsletter": píldora cian con brillo (C6) * .pia-radar → "Radar": punto de señal cian tras el texto */ .main-nav .main-menu > ul > li.pia-ultima-hora > a, .pia-ultima-hora > a { background: var(--pia-ambar); color: var(--pia-ambar-texto); border-radius: var(--pia-radio-pildora); font-weight: 700; box-shadow: var(--pia-ambar-glow); } .main-nav .main-menu > ul > li.pia-ultima-hora > a:hover, .pia-ultima-hora > a:hover { background: var(--pia-ambar); color: var(--pia-ambar-texto); } .pia-ultima-hora > a::before { content: ''; display: inline-block; width: 0.5em; height: 0.5em; border-radius: 50%; background: var(--pia-negro); margin-inline-end: var(--pia-sp-2); vertical-align: middle; animation: pia-pulso 1.6s ease-in-out infinite; } @media (prefers-reduced-motion: reduce) { .pia-ultima-hora > a::before, #theme-header .breaking-title { animation: none; } } .main-nav .main-menu > ul > li.pia-suscribete > a, .pia-suscribete > a { background: var(--pia-cian); color: var(--pia-negro); border-radius: var(--pia-radio-pildora); padding-inline: var(--pia-sp-5); font-weight: 700; box-shadow: var(--pia-glow); } .main-nav .main-menu > ul > li.pia-suscribete > a:hover, .pia-suscribete > a:hover { /* No cambia de relleno: sube el brillo. El cian es luz, no relleno. */ background: var(--pia-cian-vivo); color: var(--pia-negro); box-shadow: var(--pia-glow-fuerte); } /* Punto de señal cian (decisión 118; antes era el cursor ▌). */ .pia-radar > a::after { content: ''; display: inline-block; width: 0.4em; height: 0.4em; border-radius: 50%; background: var(--pia-cian); margin-inline-start: var(--pia-sp-2); vertical-align: 0.1em; animation: pia-latido 1.8s ease-out infinite; } .main-nav .main-menu > ul > li.pia-radar.current-menu-item > a::after, .main-nav .main-menu > ul > li.pia-radar.current-menu-ancestor > a::after { background: var(--pia-negro); animation: none; } @keyframes pia-latido { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--pia-cian) 55%, transparent); } 70% { box-shadow: 0 0 0 0.45em transparent; } 100% { box-shadow: 0 0 0 0 transparent; } } @media (prefers-reduced-motion: reduce) { .pia-radar > a::after { animation: none; } } /* ---- Franja de temas (chips) bajo la navegación ---- * La pinta functions.php con los hijos del ítem "Inicio" del menú * (Última hora · Destacadas · Más leídas · Explicadores). */ .pia-temas-wrap { background: var(--pia-negro); border-bottom: 1px solid var(--pia-tech-linea); } .pia-temas { display: flex; align-items: center; gap: var(--pia-sp-2); padding-block: var(--pia-sp-2); overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; } .pia-temas::-webkit-scrollbar { display: none; } .pia-temas__rotulo { flex: 0 0 auto; font-family: var(--pia-font-titular); font-weight: 700; font-size: var(--pia-fs-xs); text-transform: uppercase; letter-spacing: 0.08em; color: var(--pia-cian); margin-inline-end: var(--pia-sp-2); } .pia-tema { flex: 0 0 auto; font-family: var(--pia-font-cuerpo); font-weight: 500; font-size: var(--pia-fs-sm); color: var(--pia-blanco); background: var(--pia-superficie); border: 1px solid var(--pia-tech-linea); border-radius: var(--pia-radio-pildora); padding: var(--pia-sp-1) var(--pia-sp-3); white-space: nowrap; text-decoration: none; transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease; } .pia-tema:hover, .pia-tema:focus-visible, .pia-tema.is-actual { background: var(--pia-superficie); border-color: var(--pia-cian); color: var(--pia-blanco); box-shadow: var(--pia-glow); text-decoration: none; } /* El chip de Última hora es el único ámbar de la franja. */ .pia-tema--ultima-hora { border-color: var(--pia-ambar-suave); color: var(--pia-ambar); } .pia-tema--ultima-hora:hover, .pia-tema--ultima-hora.is-actual { border-color: var(--pia-ambar); box-shadow: var(--pia-ambar-glow); } /* ---- Menú móvil: negro neural con retícula ---- */ #mobile-menu-container, .side-aside.dark-skin, #theme-header .side-aside { background-color: var(--pia-negro); background-image: var(--pia-halo), var(--pia-reticula); background-size: auto, var(--pia-reticula-tam); } #mobile-menu li a { font-family: var(--pia-font-titular); font-weight: 500; text-transform: none; font-size: var(--pia-fs-md); } /* ===================================================================== * Componentes de Jannah recoloreados * ================================================================== */ /* ---- C1 — Etiqueta de categoría: TODAS en cian con texto negro ---- * Un solo acento lee más autoritario; tres colores lee más blog. Jannah * emite .post-cat.tie-cat-{id} y el CSS generado por Theme Options le pone * color por categoría DESPUÉS de este archivo; el selector doble clase + * atributo gana por especificidad, sin !important. */ .post-cat, .post-cat.post-cat[class*="tie-cat-"] { background-color: var(--pia-cian); color: var(--pia-negro); text-transform: uppercase; font-family: var(--pia-font-titular); font-weight: 700; letter-spacing: 0.04em; border-radius: var(--pia-radio-borde-sm); } /* La categoría Última hora es la excepción: ámbar. Jannah emite el id de la * categoría en la clase; el 7 es el de `ultima-hora` en producción. */ .post-cat.post-cat.tie-cat-7 { background-color: var(--pia-ambar); color: var(--pia-ambar-texto); } /* ---- C6 — Botón: píldora ---- */ .button, .tie-btn, .wp-block-button__link { border-radius: var(--pia-radio-pildora); } /* ---- Tipografía: asignación por rol (docs/04-tipografia.md) ---- * Space Grotesk en titulares (700) y rótulos (500/700); Inter en cuerpo. */ .post-title, .entry-title, h2, h3, h4 { font-family: var(--pia-font-titular); font-weight: 700; letter-spacing: var(--pia-titular-tracking); color: var(--pia-negro); } h1, h1.post-title, h1.entry-title { font-family: var(--pia-font-titular); font-weight: var(--pia-titular-wght); letter-spacing: -0.02em; color: var(--pia-negro); } body, .entry, p { font-family: var(--pia-font-cuerpo); font-weight: 400; } /* Nombres de modelo y precios de API en monoespaciada: es lo que el lector * copia y pega. dentro de la nota también. */ .entry-content code, .pia-mono { font-family: var(--pia-font-mono); font-size: 0.92em; } .post-excerpt, .entry-sub-title { color: var(--pia-gris); } .post-meta { color: var(--pia-gris); font-weight: 500; } /* Numerales tabulares donde hay cifras */ .entry-content table, .post-meta, time, .date { font-variant-numeric: tabular-nums; font-feature-settings: 'tnum'; } /* ---- Imágenes y miniaturas: esquinas redondeadas ---- */ .post-thumb img, .post-thumb .thumb-overlay, .featured-area img, .single-featured-image img, .entry-content img { border-radius: var(--pia-radio-borde); } /* ---- Barra lateral: widgets en tarjeta con título de filete cian ---- */ #sidebar .widget, .sidebar .widget, .container-wrapper .widget { background: var(--pia-blanco); border-radius: var(--pia-radio-borde); box-shadow: var(--pia-sombra-tarjeta); } #sidebar .widget-title, .sidebar .widget-title { position: relative; border-bottom: 1px solid var(--pia-gris-borde); } #sidebar .widget-title::after, .sidebar .widget-title::after { content: ''; position: absolute; left: 0; bottom: -1px; width: 48px; height: 2px; background: var(--pia-cian); box-shadow: 0 0 8px var(--pia-cian-suave); } /* ---- Pie: negro neural con retícula y filete cian superior ---- */ #footer.site-footer, #footer { position: relative; background-color: var(--pia-negro); background-image: var(--pia-halo), var(--pia-reticula); background-size: auto, var(--pia-reticula-tam); } #footer::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--pia-filete); box-shadow: 0 0 12px var(--pia-cian-suave); pointer-events: none; } #footer .widget_block p + .wp-block-list { margin-block-start: var(--pia-sp-4); } /* ---- Contraste en superficies oscuras (footer, dark-skin) ---- * La regla de titulares pinta h2/h3/h4 en negro; en el pie eso los deja * invisibles. Se corrige subiendo especificidad, no con !important. */ .dark-skin h1, .dark-skin h2, .dark-skin h3, .dark-skin h4, .dark-skin h5, .dark-skin h6, .dark-skin .widget-title, .dark-widgetized-area h1, .dark-widgetized-area h2, .dark-widgetized-area h3, .dark-widgetized-area h4, .dark-widgetized-area .wp-block-heading { color: var(--pia-blanco); } /* ---- Portada: sin título de página ---- */ body.home .entry-header-outer { display: none; } body.home .main-content > article.container-wrapper { background: transparent; box-shadow: none; padding-inline: 0; } /* ---- Enlaces del contenido sobre claro: cian oscuro ---- * El cian de marca no cumple contraste sobre blanco como texto; el enlace * dentro del párrafo va en cian oscuro y en hover pasa a negro. Los * titulares de tarjeta los gobierna pia-bloques.css. */ .entry-content p a, .entry-content li a { color: var(--pia-cian-oscuro); text-decoration-color: var(--pia-cian-suave); } .entry-content p a:hover, .entry-content li a:hover { color: var(--pia-negro); text-decoration-color: var(--pia-cian); } /* ===================================================================== * Bloques editoriales de la nota (patrón del medio) * Los emite el redactor (n8n) o se escriben a mano: *
…
*
…
*
* 72% * ================================================================== */ .entry-content .pia-por-que-importa, .entry-content .pia-que-sigue { border-left: var(--pia-ancho-linea-dato) solid var(--pia-cian); background: var(--pia-cian-fondo-claro); border-radius: 0 var(--pia-radio-borde) var(--pia-radio-borde) 0; padding: var(--pia-sp-4) var(--pia-sp-5); margin: var(--pia-sp-5) 0; } .entry-content .pia-por-que-importa::before, .entry-content .pia-que-sigue::before { display: block; font-family: var(--pia-font-titular); font-weight: 700; font-size: var(--pia-fs-xs); text-transform: uppercase; letter-spacing: 0.06em; color: var(--pia-negro); margin-bottom: var(--pia-sp-2); } .entry-content .pia-por-que-importa::before { content: 'Por qu\00E9 te importa'; } .entry-content .pia-que-sigue::before { content: 'Qu\00E9 sigue'; } .entry-content .pia-que-sigue { border-left-color: var(--pia-gris); background: var(--pia-gris-superficie); } .entry-content .pia-por-que-importa p:last-child, .entry-content .pia-que-sigue p:last-child { margin-bottom: 0; } .entry-content .pia-fuentes { border-top: 1px solid var(--pia-gris-borde); margin-top: var(--pia-sp-6); padding-top: var(--pia-sp-4); font-size: var(--pia-fs-sm); color: var(--pia-gris); } .entry-content .pia-fuentes::before { content: 'Fuentes'; display: block; font-family: var(--pia-font-titular); font-weight: 700; color: var(--pia-negro); margin-bottom: var(--pia-sp-2); } .entry-content .pia-fuentes ul { margin: 0; padding-left: 1.2em; } .entry-content .pia-fuentes a { overflow-wrap: anywhere; } /* Cifras destacadas dentro de la nota */ .pia-cifra { color: var(--pia-cian-oscuro); font-family: var(--pia-font-titular); font-weight: 700; font-variant-numeric: tabular-nums; font-feature-settings: 'tnum'; } /* Badge breaking dentro de nota o tarjeta */ .pia-badge-breaking { display: inline-block; background: var(--pia-ambar); color: var(--pia-ambar-texto); font-family: var(--pia-font-titular); font-weight: 700; font-size: var(--pia-fs-xs); text-transform: uppercase; letter-spacing: 0.04em; padding: 2px var(--pia-sp-3); border-radius: var(--pia-radio-borde-sm); animation: pia-pulso-suave 2s ease-in-out infinite; } /* ===================================================================== * Widgets de la barra lateral y del panel móvil (2.2.1) * Contenido en Apariencia → Widgets (bloques con clase pia-widget): * .pia-widget--ultimo «Lo último»: 5 notas con fecha * .pia-widget--secciones «Secciones»: categorías en píldoras + boletín * Van sobre tarjeta oscura (lienzo vivo), por eso el texto es claro. * ================================================================== */ .pia-widget .pia-widget__titulo { position: relative; margin: 0 0 var(--pia-sp-4); padding-bottom: var(--pia-sp-2); font-family: var(--pia-font-titular); font-weight: 700; font-size: var(--pia-fs-sm); letter-spacing: 0.12em; text-transform: uppercase; color: var(--pia-blanco); border-bottom: 1px solid var(--pia-tech-linea); } .pia-widget .pia-widget__titulo::after { content: ''; position: absolute; left: 0; bottom: -1px; width: 40px; height: 2px; background: var(--pia-cian); box-shadow: 0 0 10px var(--pia-cian-suave); } /* Lo último: titular + fecha, separados por filetes finos. */ .pia-widget--ultimo .wp-block-latest-posts { margin: 0; padding: 0; list-style: none; } .pia-widget--ultimo .wp-block-latest-posts li { margin: 0; padding: var(--pia-sp-3) 0; border-bottom: 1px solid var(--pia-tech-linea); } .pia-widget--ultimo .wp-block-latest-posts li:last-child { border-bottom: 0; padding-bottom: 0; } .pia-widget--ultimo .wp-block-latest-posts__post-title { display: block; font-family: var(--pia-font-titular); font-weight: 600; font-size: var(--pia-fs-base); line-height: 1.3; color: var(--pia-blanco); text-decoration: none; } /* La capa del lienzo (pix-inmersivo) pinta de blanco todo enlace de widget con * especificidad (1,4,1); este hover y el botón del boletín la superan a propósito. * El botón lleva .wp-block-button__link en el widget: así pia-senal lo exceptúa. */ html body :is(#content, .side-aside) .widget .pia-widget--ultimo .wp-block-latest-posts__post-title:hover { color: var(--pia-cian); } .pia-widget--ultimo .wp-block-latest-posts__post-date { display: block; margin-top: var(--pia-sp-1); font-size: var(--pia-fs-xs); color: var(--pia-tech-texto-suave); font-variant-numeric: tabular-nums; } /* Secciones: píldoras con filete cian al pasar el mouse. */ .pia-widget--secciones .wp-block-categories { display: flex; flex-wrap: wrap; gap: var(--pia-sp-2); margin: 0; padding: 0; list-style: none; } .pia-widget--secciones .wp-block-categories li { margin: 0; padding: 0; } .pia-widget--secciones .wp-block-categories a { display: inline-block; padding: var(--pia-sp-1) var(--pia-sp-3); font-family: var(--pia-font-cuerpo); font-weight: 500; font-size: var(--pia-fs-sm); color: var(--pia-blanco); background: var(--pia-superficie); border: 1px solid var(--pia-tech-linea); border-radius: var(--pia-radio-pildora); text-decoration: none; transition: border-color 0.15s ease, box-shadow 0.15s ease, color 0.15s ease; } .pia-widget--secciones .wp-block-categories a:hover { border-color: var(--pia-cian); box-shadow: var(--pia-glow); color: var(--pia-blanco); } .pia-widget .pia-widget__boletin { margin: var(--pia-sp-5) 0 0; padding-top: var(--pia-sp-4); border-top: 1px solid var(--pia-tech-linea); font-size: var(--pia-fs-sm); color: var(--pia-tech-texto-suave); } /* El enlace del boletín es el botón de la marca: cian con texto negro. */ html body :is(#content, .side-aside) .widget .pia-widget .pia-widget__boletin a.wp-block-button__link { display: block; margin-top: var(--pia-sp-3); padding: var(--pia-sp-2) var(--pia-sp-4); text-align: center; font-family: var(--pia-font-titular); font-weight: 700; color: var(--pia-negro); background: var(--pia-cian); border-radius: var(--pia-radio-pildora); box-shadow: var(--pia-glow); text-decoration: none; } html body :is(#content, .side-aside) .widget .pia-widget .pia-widget__boletin a.wp-block-button__link:hover { background: var(--pia-cian-vivo); color: var(--pia-negro); box-shadow: var(--pia-glow-fuerte); } /* Punto de señal: . Lo dibuja radar.css * (círculo cian que late); el carácter ▌ que se añadía aquí salió con la * decisión 118, que quitó el cursor de la marca. */ /* ---- Móvil ---- */ @media (max-width: 782px) { .main-nav .main-menu > ul > li > a { padding-inline: var(--pia-sp-3); } } @media (max-width: 600px) { .entry-content .pia-por-que-importa, .entry-content .pia-que-sigue { padding: var(--pia-sp-3) var(--pia-sp-4); margin: var(--pia-sp-4) 0; } }