/* ========================================================================== Petroleum — CSS global del sitio Se carga en TODAS las páginas desde el tema hijo. Cubre tres cosas: 1. Los tokens de marca (los mismos que llevan los bloques HTML). 2. El puente hacia la paleta de Blocksy, para que la cabecera, el menú, el pie y la salida de los plugins también cambien de tema. 3. Los botones premium, aplicados a los botones nativos de WordPress, de Blocksy y de Fluent Forms. El conmutador claro/oscuro NO está aquí: es un widget aparte. ========================================================================== */ @import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;700;800&display=swap'); /* -------------------------------------------------------------------------- 1. TOKENS -------------------------------------------------------------------------- */ :root{ --pg-gold:#cba705; /* dorado de marca: sólo sobre oscuro */ --pg-gold-ink:#806900; /* dorado para texto sobre claro 5.33:1 */ --pg-gold-hi:#e3ba0a; --pg-gold-lo:#a8880a; --pg-on-gold:#191400; --pg-ink:#0d0d0d; /* el negro al que vira el botón */ --pg-bg:#ffffff; --pg-surface:#faf8f0; --pg-line:#e6e2d4; --pg-fg:#2b2b2b; --pg-head:#0d0d0d; --pg-muted:#5c5c5c; --pg-accent:#806900; --pg-geo-glow:.07; /* opacidades de la geometría de fondo */ --pg-geo-fill:.05; --pg-geo-arc:.16; --pg-ico:.15; /* marca de agua dorada en reposo */ --pg-ico-on:.28; /* … cuando su tarjeta está activa */ --pg-shadow:rgba(13,13,13,.10); --pg-glow:rgba(128,105,0,.30); /* Halo gris de los renglones que se elevan al pasar el cursor. Son DOS tokens y no uno porque un halo solo se lee como mancha: el difuso da el volumen y el filete de 1px da el contorno. Y no puede ser el mismo color en los dos temas — sobre negro una sombra oscura es invisible, así que ahí lo que se dibuja es luz gris, no sombra. */ --pg-halo:rgba(13,13,13,.16); --pg-halo-linea:rgba(13,13,13,.10); /* Ámbar de los avisos con fecha límite en las entradas del blog. El dorado de marca ya significa «Petroleum»; si además significara «atención», dejaría de significar las dos cosas. El ámbar es el único color ajeno a la paleta y por eso se reserva a UNA función: lo que tiene reloj. */ --pg-amb-bg:#fff8e6; --pg-amb-line:#e09600; --pg-amb-fg:#8a5a00; /* 6.4:1 sobre #fff8e6 */ --pg-sheen:rgba(255,255,255,.55); /* Destello del bucle de brillo de los antetítulos. Sobre claro NO puede ser blanco: la letra desaparecería contra el fondo al pasar el reflejo. Se usa un dorado más vivo que el acento, no más pálido. */ --pg-brillo:#a58500; /* Palomita en círculo, la misma de las listas .pg-check (Material Symbols, Apache 2.0). Va como máscara y no como imagen: así toma el color de la variable que tenga al lado y se voltea sola con el tema. Es un token porque la usan el buzón del boletín y lo que venga después. */ --pg-palomita:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960'%3E%3Cpath d='m421-298 283-283-46-45-237 237-120-120-45 45 165 166Zm59 218q-82 0-155-31.5t-127.5-86Q143-252 111.5-325T80-480q0-83 31.5-156t86-127Q252-817 325-848.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 82-31.5 155T763-197.5q-54 54.5-127 86T480-80Z'/%3E%3C/svg%3E"); /* Flechita del desplegable del formulario de contacto (Material Symbols `expand_more`, Apache 2.0). Va como mascara y no como fondo para que el color salga de un token y se voltee con el tema; la flecha nativa del `select` sale gris fijo en claro y en oscuro. */ --pg-flechita:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960'%3E%3Cpath d='M480-345 240-585l43-43 197 197 197-197 43 43-240 240Z'/%3E%3C/svg%3E"); --pg-max:1290px; --pg-font:Manrope,"Segoe UI",system-ui,-apple-system,sans-serif; --pg-ease:cubic-bezier(.32,.72,0,1); --pg-ease-out:cubic-bezier(.22,1,.36,1); --pg-fast:130ms; --pg-base:240ms; --pg-slow:560ms; } @media (prefers-color-scheme:dark){ html:not([data-theme="light"]){ --pg-bg:#000000; --pg-surface:#12100a; --pg-line:#2a2618; --pg-fg:#d2d7dc; --pg-head:#ffffff; --pg-muted:#9a968c; --pg-accent:#cba705; --pg-ink:#111111; --pg-geo-glow:.20; --pg-geo-fill:.13; --pg-geo-arc:.30; /* Sobre negro el dorado a baja opacidad se pierde: se dobla */ --pg-ico:.32; --pg-ico-on:.48; --pg-shadow:rgba(0,0,0,.6); --pg-glow:rgba(203,167,5,.34); --pg-halo:rgba(210,215,220,.22); --pg-halo-linea:rgba(210,215,220,.16); /* Sobre negro el crema del ámbar deslumbra: se invierte a marrón muy oscuro con el texto en ámbar claro. 8.9:1. */ --pg-amb-bg:#241c05; --pg-amb-line:#c98f00; --pg-amb-fg:#f0c04a; /* Sobre negro sí se puede ir a un dorado casi blanco: es el reflejo */ --pg-brillo:#fff0b8; } } html[data-theme="dark"]{ --pg-bg:#000000; --pg-surface:#12100a; --pg-line:#2a2618; --pg-fg:#d2d7dc; --pg-head:#ffffff; --pg-muted:#9a968c; --pg-accent:#cba705; --pg-shadow:rgba(0,0,0,.6); --pg-ink:#111111; --pg-geo-glow:.20; --pg-geo-fill:.13; --pg-geo-arc:.30; --pg-ico:.32; --pg-ico-on:.48; --pg-glow:rgba(203,167,5,.34); --pg-halo:rgba(210,215,220,.22); --pg-halo-linea:rgba(210,215,220,.16); --pg-amb-bg:#241c05; --pg-amb-line:#c98f00; --pg-amb-fg:#f0c04a; --pg-brillo:#fff0b8; } /* -------------------------------------------------------------------------- 2. PUENTE HACIA BLOCKSY Blocksy pinta TODO a partir de --theme-palette-color-1..8. Al reescribirlas desde nuestros tokens, la cabecera, el menú, los títulos, los bordes y la salida de los plugins cambian de tema solos. REGLA DE ORO para el Personalizador: elegir siempre "Color de paleta 1-8", nunca un hex personalizado. Un hex fijo no se voltea. -------------------------------------------------------------------------- */ :root, html[data-theme="dark"], html[data-theme="light"]{ --theme-palette-color-1:var(--pg-accent); /* acento / enlaces */ --theme-palette-color-2:var(--pg-gold); /* acento en hover */ --theme-palette-color-3:var(--pg-head); /* títulos */ --theme-palette-color-4:var(--pg-fg); /* texto de cuerpo */ --theme-palette-color-5:var(--pg-line); /* bordes y divisores */ --theme-palette-color-6:var(--pg-surface); /* superficie tintada */ --theme-palette-color-7:var(--pg-surface); /* superficie alterna */ --theme-palette-color-8:var(--pg-bg); /* fondo de página */ --theme-text-color:var(--pg-fg); --theme-headings-color:var(--pg-head); --theme-link-initial-color:var(--pg-accent); --theme-link-hover-color:var(--pg-gold); --theme-border-color:var(--pg-line); --theme-content-background-color:var(--pg-bg); --theme-button-text-initial-color:var(--pg-on-gold); --theme-button-text-hover-color:var(--pg-on-gold); --theme-button-background-initial-color:var(--pg-gold); --theme-button-background-hover-color:var(--pg-gold-lo); --theme-font-family:var(--pg-font); --theme-normal-container-max-width:var(--pg-max); /* EL DESPLEGABLE DEL MENÚ. ------------------------------------------------------------------------ Blocksy pinta el submenú así: background-color: var(--dropdown-background-color, var(--theme-palette-color-4)); Y `--dropdown-background-color` sólo existe si alguien la fija en el Personalizador. Nadie la fijó, así que caía al respaldo: el **color 4 de la paleta**, que en este puente es `--pg-fg` — el color del TEXTO del cuerpo. Resultado: el desplegable usaba el color de la letra como fondo. Negro en tema claro, claro en tema oscuro. Invertido en los dos, y con el texto del submenú encima quedando casi ilegible. Se fija a la superficie tintada, que es lo que ya usan las tarjetas: se lee como un panel levantado sobre la página en los dos temas. */ --dropdown-background-color:var(--pg-surface); --dropdown-divider:1px solid var(--pg-line); } /* -------------------------------------------------------------------------- LA «X» DE CERRAR DEL MENÚ MÓVIL -------------------------------------------------------------------------- Blocksy fija el color de ese icono a mano, en su `main.min.css`: [class*=ct-toggle-close]{ --theme-icon-color: rgba(255,255,255,.7) } Blanco al 70 %. Le funciona porque su panel lateral por omisión es oscuro. Aquí el panel sigue nuestra paleta: en tema oscuro es negro y el icono se ve, y **en tema claro el panel es blanco y el icono desaparece**. El botón sigue ahí y sigue funcionando — simplemente no se ve, que es peor que si faltara. `.ct-icon` pinta con `fill:var(--theme-icon-color)`, así que basta con devolverle la variable a nuestros tokens. Se hace con `.ct-panel-actions` delante para ganar por especificidad y no depender del orden de carga: hoy `petroleum.css` va después de Blocksy, pero eso lo decide la cola de dependencias de WordPress y no conviene apostar a que no cambie. Cubre las dos: la del menú lateral y la de la ventana de búsqueda. -------- */ .ct-panel-actions [class*="ct-toggle-close"]{ --theme-icon-color:var(--pg-fg); } @media (hover:hover) and (pointer:fine){ .ct-panel-actions [class*="ct-toggle-close"]:hover{ --theme-icon-color:var(--pg-accent); } } /* -------------------------------------------------------------------------- EL MENÚ, CONTRA EL CSS QUE GENERA EL PERSONALIZADOR -------------------------------------------------------------------------- Estas tres reglas no pelean con el tema: pelean con `wp-content/uploads/blocksy/css/global.css`, que Blocksy REGENERA a partir de los ajustes del Personalizador. Vienen de la plantilla CodeSpot, que se diseñó con una cabecera oscura fija, y aquí la paleta se voltea. Lo que escribe: .sub-menu .ct-menu-link { --theme-link-initial-color: var(--theme-palette-color-8); } .sub-menu { --dropdown-divider: 1px dashed rgba(255,255,255,.1); } [data-id="mobile-menu"] { --theme-link-initial-color: #ffffff; } El color 8 de la paleta es, en este puente, `--pg-bg`: **el fondo de la página**. Es decir, el texto del submenú estaba pintado con el color del fondo. Blanco sobre claro y negro sobre oscuro: invisible en los dos temas. Los otros dos son blancos literales, que sólo funcionan sobre oscuro. NO se arregla en el Personalizador a propósito. Ese archivo se regenera cada vez que alguien guarda un ajuste, y el arreglo se perdería sin dejar rastro. Aquí queda en el repositorio y sobrevive. La especificidad es la del propio Blocksy (0-5-0) más `body` delante, para ganar sin depender del orden de carga. OJO CON EL ESPACIO: es `body[data-header…]`, PEGADO. `data-header` vive en el propio ``, así que `body [data-header…]` —con espacio— pide un DESCENDIENTE de body que tenga ese atributo, y no existe ninguno: la regla no casa con nada y el arreglo no se aplica. Pasó en la v2.42.0 y costó una ronda entera creyendo que era un problema de especificidad. ---------------------- */ body[data-header*="type-1"] .ct-header [data-id="menu"] .sub-menu .ct-menu-link{ /* `--pg-head`, no `--pg-fg`: negro puro sobre claro y blanco puro sobre oscuro. El texto de cuerpo es gris a propósito —descansa la vista en un párrafo largo— pero un menú son cinco palabras sueltas y ahí el gris sólo resta contraste. */ --theme-link-initial-color:var(--pg-head); /* Dorado al pasar el cursor. Es `--pg-accent` y no `--pg-gold` porque el dorado de marca sobre la superficie clara da 2.32:1 — la regla de contraste del proyecto. `--pg-accent` YA es dorado en los dos temas: #806900 sobre claro (5.01:1) y #cba705 sobre oscuro (8.21:1). Se ve dorado en ambos, y en ambos se lee. */ --theme-link-hover-color:var(--pg-accent); --theme-link-active-color:var(--pg-accent); } body[data-header*="type-1"] .ct-header [data-id="menu"] .sub-menu{ --dropdown-divider:1px solid var(--pg-line); } /* El menú de móvil: mismo caso, con el blanco escrito a mano. */ body[data-header*="type-1"] [data-id="mobile-menu"]{ --theme-link-initial-color:var(--pg-head); --theme-link-hover-color:var(--pg-accent); } html,body{background-color:var(--pg-bg);} /* Blocksy pone `overflow-x:hidden` en el body para evitar scroll horizontal. El efecto colateral es que el body pasa a ser contenedor de scroll y ahí muere cualquier `position:sticky` de la página. `clip` recorta igual sin crear contenedor — es el mismo patrón que Blocksy ya usa en #main-container, sólo que ahí sí lo aplicó. */ body{overflow-x:clip;} body{ color:var(--pg-fg); font-family:var(--pg-font); /* La transición de tema la lleva la View Transition; aquí sólo un respaldo suave para los navegadores que no la soportan. */ transition:background-color var(--pg-base) linear,color var(--pg-base) linear; } h1,h2,h3,h4,h5,h6,.entry-title{color:var(--pg-head);font-family:var(--pg-font);letter-spacing:-.02em;} header#header .ct-header, #main-container, .site-main{background-color:var(--pg-bg);} /* El pie de Blocksy se oculta: lo sustituye nuestro bloque, impreso al cierre de desde functions.php. Para volver al de Blocksy, basta con borrar esta regla y quitar 'pie.html' del array de wp_footer. */ footer.ct-footer{display:none !important;} hr,.ct-divider{border-color:var(--pg-line);} /* -------------------------------------------------------------------------- Colores que Blocksy incrusta y NO se voltean En `wp-content/uploads/blocksy/css/global.css` el Personalizador deja siete reglas con color literal, pensadas para una cabecera oscura. No usan la paleta, así que el puente de arriba no las alcanza: el panel móvil salía siempre gris muy oscuro aunque el sitio estuviera en tema claro. Se reescriben aquí con los mismos selectores. Nuestro CSS carga DESPUÉS de global.css, así que a igual especificidad gana éste — por eso los selectores se copian tal cual, con su [data-header] y su #id. Lo correcto sería cambiarlos en el Personalizador por colores de paleta (D-18), pero varios de estos no ofrecen esa opción en Blocksy free. -------------------------------------------------------------------------- */ /* -------------------------------------------------------------------------- Altura de la cabecera fija Blocksy la encoge a 50px al fijarse (`--shrink-height`, del Personalizador), y nuestro botón premium tiene `min-height:52px`: el botón era MÁS ALTO que la barra que lo contiene, por eso su borde y el del conmutador chocaban con el filete de la cabecera. Dos correcciones: se le pone un suelo a la fila —con max(), para no tocar la altura normal de 120px— y los controles se reducen dentro de la cabecera. Un botón de 52px es correcto dentro del contenido, no en una barra fija. -------------------------------------------------------------------------- */ /* Sólo en escritorio: Blocksy cambia a la cabecera móvil por debajo de 1000px y ahí la proporción ya funciona. */ @media (min-width:1000px){ #header [data-row] > div{ min-height:max(var(--shrink-height, var(--height)), 74px); } #header .ct-header [data-column]{gap:14px;} /* El botón de la cabecera, a medida de la barra */ #header .ct-button-ghost, #header .ct-header [data-id="button"] .ct-button-ghost{ min-height:40px; padding:10px 22px; font-size:14px; border-radius:9px; } /* Y el conmutador de tema, en proporción */ #header .pg-tt{width:38px;height:38px;margin:0;} #header .pg-tt__svg{width:19px;height:19px;} } /* Panel del menú móvil */ [data-header*="type-1"] #offcanvas .ct-panel-inner{ background-color:var(--pg-bg); border-left:1px solid var(--pg-line); } [data-header*="type-1"] [data-id="mobile-menu"]{ --theme-link-initial-color:var(--pg-head); --theme-link-hover-color:var(--pg-accent); } #offcanvas .ct-toggle-close{color:var(--pg-fg);} /* Modal de búsqueda */ [data-header*="type-1"] #search-modal{background-color:var(--pg-bg);} [data-header*="type-1"] #search-modal .ct-search-form{ --theme-link-initial-color:var(--pg-head); --theme-form-text-initial-color:var(--pg-fg); --theme-form-text-focus-color:var(--pg-head); --theme-form-field-border-initial-color:var(--pg-line); --theme-button-text-initial-color:var(--pg-muted); --theme-button-text-hover-color:var(--pg-on-gold); } /* Botón de la cabecera: su texto en hover lo fijaba en blanco */ [data-header*="type-1"] .ct-header [data-id="button"] .ct-button-ghost{ --theme-button-text-initial-color:var(--pg-accent); --theme-button-text-hover-color:var(--pg-gold); } /* Volver arriba */ .ct-back-to-top{ --theme-icon-color:var(--pg-on-gold); --theme-icon-hover-color:var(--pg-on-gold); --top-button-background-color:var(--pg-gold); --top-button-background-hover-color:var(--pg-gold-lo); } /* Selección de texto con el dorado */ ::selection{background:var(--pg-gold);color:var(--pg-on-gold);} /* Foco visible y consistente en todo el sitio */ a:focus-visible,button:focus-visible,input:focus-visible, select:focus-visible,textarea:focus-visible,[tabindex]:focus-visible{ outline:2px solid var(--pg-accent);outline-offset:3px;border-radius:4px; } /* -------------------------------------------------------------------------- 3. BOTONES PREMIUM Se aplican a nuestros bloques (.pg-btn) y también a los botones nativos: bloque Botón de Gutenberg, botón de la cabecera de Blocksy y envío de Fluent Forms. Sólo se animan transform / opacity / box-shadow. -------------------------------------------------------------------------- */ .pg-btn, .wp-block-button__link, .ct-button, .ct-button-ghost, .wp-element-button, .fluentform .ff-btn-submit{ position:relative; display:inline-flex;align-items:center;justify-content:center;gap:10px; padding:15px 30px;min-height:52px;border:0;border-radius:10px; overflow:hidden;isolation:isolate;cursor:pointer; font-family:var(--pg-font);font-size:15px;font-weight:800;line-height:1; letter-spacing:-.01em;text-decoration:none; -webkit-tap-highlight-color:transparent; color:var(--pg-on-gold); background:linear-gradient(180deg,var(--pg-gold-hi) 0%,var(--pg-gold) 48%,var(--pg-gold-lo) 100%); box-shadow: inset 0 1px 0 rgba(255,255,255,.45), inset 0 -1px 0 rgba(0,0,0,.16), 0 1px 2px var(--pg-shadow), 0 4px 14px -6px var(--pg-glow); transition: transform 300ms var(--pg-ease), box-shadow var(--pg-base) var(--pg-ease), color var(--pg-fast) linear; /* Los efectos se componen en UNA sola transform a través de variables, para que el imán, el hover y la presión no se pisen unos a otros. */ --pg-mx:0px; --pg-my:0px; --pg-lift:0px; --pg-press:1; transform:translate3d(var(--pg-mx),calc(var(--pg-my) + var(--pg-lift)),0) scale(var(--pg-press)); } .pg-btn:active, .wp-block-button__link:active, .ct-button:active, .wp-element-button:active, .fluentform .ff-btn-submit:active{ --pg-press:.97;transition-duration:var(--pg-fast); } /* El color del texto se declara en TODOS los estados y con doble clase. El puente de arriba pone --theme-link-hover-color en dorado, y la regla de Blocksy `.entry-content a:hover` (0-2-1) le gana a una sola clase (0-1-0): sin esto, el botón dorado se quedaba con la letra dorada al pasar el puntero y no se leía nada. */ .pg-btn.pg-btn--gold, .pg-btn.pg-btn--gold:link, .pg-btn.pg-btn--gold:visited, .pg-btn.pg-btn--gold:active, .wp-block-button__link:link, .wp-block-button__link:visited, .wp-block-button__link:hover, .wp-block-button__link:focus, .wp-block-button__link:active, .ct-button:hover, .ct-button:focus, .wp-element-button:hover, .wp-element-button:focus{color:var(--pg-on-gold);} /* Al pasar el puntero el fondo se vuelve negro, así que el texto pasa al dorado DE MARCA (no al oscurecido): #cba705 sobre #0d0d0d da 8.39:1 y funciona igual en tema claro y en oscuro. El #806900 ahí sólo daría 3.6:1. REGLA QUE NO SE PUEDE ROMPER: **el texto dorado y la tinta negra van juntos SIEMPRE.** El dorado de marca sobre el fondo dorado del botón da 1.0:1 — no se lee nada. Cada vez que se añada un estado que ponga la letra dorada, hay que desplegarle la tinta en la misma regla. Aquí estaba el fallo, hasta 2026-08-19: el color se declaraba para `:hover` Y para `:focus`, pero la tinta sólo se desplegaba en `:hover` y además dentro de `@media (hover:hover) and (pointer:fine)`. Resultado: **enfocar un botón dorado —pulsarlo con el ratón, tabular hasta él o tocarlo en una pantalla táctil— dejaba la etiqueta dorada sobre dorado, invisible.** En todos los botones del sitio, no sólo en el del boletín, que fue donde se vio. Por eso ahora van en dos bloques y cada uno con su tinta: · `:focus-visible` fuera de la media query — el foco de teclado existe sin ratón, y hay que verlo. · `:hover` dentro — en táctil el hover se queda pegado tras un toque. Es `:focus-visible` y no `:focus` por dos motivos. Uno: con `:focus` a secas, un clic de ratón deja el botón invertido hasta que se pulse en otra parte, y eso se lee como que el botón se quedó enganchado. Dos: si un navegador no entendiera `:focus-visible` descarta la regla entera y el botón se queda en su color base, que es legible — el modo de fallo correcto. */ .pg-btn.pg-btn--gold:focus-visible{color:var(--pg-gold);} .pg-btn--gold:focus-visible::before{transform:scale(1);} .pg-btn.pg-btn--ghost, .pg-btn.pg-btn--ghost:link, .pg-btn.pg-btn--ghost:visited, .wp-block-button.is-style-outline .wp-block-button__link:link, .wp-block-button.is-style-outline .wp-block-button__link:visited{color:var(--pg-head);} /* Todos los iconos son Material Symbols (Apache 2.0): son SÓLIDOS, así que se pintan con fill y no con stroke. */ .pg-btn svg{ width:18px;height:18px;flex:none; fill:currentColor;stroke:none; transition:transform var(--pg-base) var(--pg-ease); } /* La tinta negra se abre desde el punto exacto por el que entró el cursor. Es un rectángulo que escala desde ese origen: a escala 1 cubre el botón entero pase lo que pase, y sólo trabaja el compositor. */ .pg-btn--gold::before{ content:"";position:absolute;inset:0;z-index:-1; background:var(--pg-ink); transform:scale(0); transform-origin:var(--pg-ox,50%) var(--pg-oy,50%); transition:transform 460ms var(--pg-ease); } /* -------------------------------------------------------------------------- LOS BOTONES QUE SON