/* ==========================================================================
Publibasics — hoja de estilos principal
==========================================================================
NO se escribe ni un color literal en este archivo. Todo valor configurable
llega como variable CSS desde el Personalizador (ver inc/customizer-css.php)
y aquí solo se consume con var(--pb-…, respaldo). Si necesitas otro color,
añade el ajuste allá; no lo hardcodees aquí.
Piel de marca (manual Publibasics): fondo BLANCO, rojo Pantone 1805c como
color principal, Cool Gray 11c como acento, esquinas de 3 px y VERDE
EXCLUSIVAMENTE para WhatsApp — por eso --pb-success no aparece en toda esta
hoja: es territorio del plugin Publibasics Enhancer (§13).
Criterio de movimiento (skill movimiento-fajardos): solo transform y
opacity, nada por encima de 300 ms, --pb-ease-out para entradas, ease para
hover y color, respuesta en :active, hover restringido a puntero fino y
variantes para prefers-reduced-motion / prefers-reduced-transparency.
Índice
1. Reinicio, bases y accesibilidad
2. Contenedor y retícula
3. Barra superior
4. Cabecera
5. Menú principal
6. Cabecera de página y migas
7. Botones y formularios
8. Tarjetas y listados
9. Widgets
10. Pie de página
11. Comentarios
12. Bloques de Gutenberg
13. Convivencia con el plugin Publibasics Enhancer
14. Utilidades, preferencias del sistema e impresión
========================================================================== */
/* --------------------------------------------------------------------------
1. Reinicio, bases y accesibilidad
-------------------------------------------------------------------------- */
/*
* Variables derivadas. No son colores nuevos: son alias de los tokens del
* Personalizador para no repetir la misma expresión en cuarenta reglas.
* Se resuelven en el momento de usarse, así que no importa que el bloque
* :root del Personalizador se inyecte después de esta hoja.
*/
:root {
/* Texto que va ENCIMA del color principal (botones, píldoras). */
--pb-on-primary: var(--pb-content-bg, #fff);
/* Altura reservada cuando la cabecera se queda fija. */
--pb-header-h: 88px;
/* Separación base de la retícula. */
--pb-gutter: 20px;
--pb-gap: 40px;
/* Banda alterna del manual de marca: negro al 5 %. */
--pb-band: rgba(var(--pb-text-rgb, 51, 51, 51), .05);
}
*,
*::before,
*::after {
box-sizing: border-box;
}
html {
-webkit-text-size-adjust: 100%;
scroll-behavior: smooth;
/* Un ancla no debe quedar debajo de la cabecera fija. */
scroll-padding-top: calc(var(--pb-header-h, 88px) + 12px);
}
body {
margin: 0;
background: var(--pb-body-bg, #fff);
color: var(--pb-text, #333);
font-family: var(--pb-font-body, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif);
font-size: var(--pb-fs-base, 16px);
line-height: var(--pb-body-lh, 1.65);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
/* Un SKU largo o una URL pegada no deben romper la retícula. */
overflow-wrap: break-word;
}
img,
svg,
video,
iframe,
embed,
object {
max-width: 100%;
}
img,
svg,
video {
height: auto;
}
img { display: block; }
figure { margin: 0 0 1.4em; }
a { color: var(--pb-link, #ae282e); text-decoration: none; transition: color .16s ease; }
/* El hover se restringe a punteros finos: en táctil se queda «pegado». */
@media (hover: hover) and (pointer: fine) {
a:hover { color: var(--pb-link-hover, #8f2126); text-decoration: underline; text-underline-offset: .18em; }
}
a:focus-visible { color: var(--pb-link-hover, #8f2126); }
:focus-visible {
outline: 2px solid var(--pb-primary, #ae282e);
outline-offset: 2px;
border-radius: 1px;
}
h1, h2, h3, h4, h5, h6 {
font-family: var(--pb-font-heading, Georgia, Cambria, "Times New Roman", serif);
font-weight: var(--pb-heading-weight, 700);
letter-spacing: var(--pb-heading-ls, -0.5px);
text-transform: var(--pb-heading-tt, none);
color: var(--pb-text, #333);
/* El interlineado va al revés que el tamaño: apretado arriba. */
line-height: 1.2;
margin: 0 0 .55em;
}
h1 { font-size: var(--pb-fs-h1, 39px); }
h2 { font-size: var(--pb-fs-h2, 31px); }
h3 { font-size: var(--pb-fs-h3, 25px); }
h4 { font-size: var(--pb-fs-h4, 20px); }
h5 { font-size: var(--pb-fs-h5, 16px); }
h6 { font-size: var(--pb-fs-h6, 13px); }
/* Los títulos pequeños no necesitan el tracking negativo de los grandes. */
h4, h5, h6 {
letter-spacing: 0;
}
p { margin: 0 0 1.15em; }
ul, ol { margin: 0 0 1.15em; padding-left: 1.35em; }
li > ul,
li > ol {
margin-bottom: 0;
}
dt { font-weight: 700; }
dd { margin: 0 0 .8em; }
blockquote {
margin: 1.6em 0;
padding: 2px 0 2px 22px;
border-left: 3px solid var(--pb-primary, #ae282e);
font-family: var(--pb-font-heading, Georgia, serif);
font-size: var(--pb-fs-h4, 20px);
line-height: 1.45;
color: var(--pb-text, #333);
}
blockquote cite,
blockquote footer {
display: block;
margin-top: .5em;
font-family: var(--pb-font-body, sans-serif);
font-size: var(--pb-fs-small, 13px);
font-style: normal;
color: var(--pb-muted, #666);
}
hr { border: 0; border-top: 1px solid var(--pb-border, #ccc); margin: 2.4em 0; }
small,
.pb-small {
font-size: var(--pb-fs-small, 13px);
}
mark { background: rgba(var(--pb-primary-rgb, 174, 40, 46), .14); color: inherit; padding: 0 .18em; }
abbr[title] { text-decoration-style: dotted; cursor: help; }
code, kbd, samp, pre {
font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
font-size: .92em;
}
code { background: var(--pb-band); padding: .15em .4em; border-radius: var(--pb-btn-radius, 3px); }
pre {
background: var(--pb-band);
border: 1px solid var(--pb-border, #ccc);
border-radius: var(--pb-card-radius, 3px);
padding: 16px;
overflow: auto;
line-height: 1.5;
}
pre code { background: none; padding: 0; }
table {
width: 100%;
border-collapse: collapse;
margin: 0 0 1.6em;
font-size: calc(var(--pb-fs-base, 16px) * .94);
}
th, td { padding: 10px 12px; border-bottom: 1px solid var(--pb-border, #ccc); text-align: left; vertical-align: top; }
th { font-weight: 700; color: var(--pb-text, #333); background: var(--pb-band); }
caption {
caption-side: bottom;
padding-top: 8px;
font-size: var(--pb-fs-small, 13px);
color: var(--pb-muted, #666);
text-align: left;
}
::selection { background: rgba(var(--pb-primary-rgb, 174, 40, 46), .18); color: var(--pb-text, #333); }
/* Accesibilidad ------------------------------------------------------------
Implementación estándar de WordPress: el texto sigue en el árbol de
accesibilidad (nada de display:none) pero no ocupa un píxel visible. */
.screen-reader-text {
border: 0;
clip: rect(1px, 1px, 1px, 1px);
clip-path: inset(50%);
height: 1px;
width: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute !important;
white-space: nowrap;
word-wrap: normal !important;
}
/* Al recibir foco por teclado vuelve a ser visible. */
.screen-reader-text:focus,
.screen-reader-text:focus-visible {
background: var(--pb-content-bg, #fff);
border-radius: var(--pb-btn-radius, 3px);
box-shadow: 0 0 2px 2px rgba(var(--pb-text-rgb, 51, 51, 51), .2);
clip: auto !important;
clip-path: none;
color: var(--pb-primary, #ae282e);
display: block;
font-size: var(--pb-fs-small, 13px);
font-weight: 700;
height: auto;
left: 6px;
line-height: normal;
padding: 14px 20px;
text-decoration: none;
top: 6px;
width: auto;
z-index: 100000;
}
.skip-link { position: absolute; left: -9999px; top: 0; z-index: 100000; }
.skip-link:focus,
.skip-link:focus-visible {
background: var(--pb-primary, #ae282e);
color: var(--pb-on-primary);
left: 6px;
top: 6px;
padding: 12px 20px;
font-weight: 700;
text-decoration: none;
}
/* --------------------------------------------------------------------------
2. Contenedor y retícula
-------------------------------------------------------------------------- */
.pb-container {
width: 100%;
max-width: var(--pb-container, 1180px);
margin: 0 auto;
padding: 0 var(--pb-gutter, 20px);
}
.pb-site { position: relative; overflow-x: clip; }
.pb-site-content { padding-bottom: 56px; }
/*
* La retícula de contenido. Flex —y no grid— porque la posición de la barra
* lateral se invierte con flex-direction sin reordenar nada más.
*/
.pb-layout {
display: flex;
gap: var(--pb-gap, 40px);
align-items: flex-start;
padding-top: var(--pb-gap, 40px);
}
.pb-content-area {
flex: 1 1 var(--pb-content-w, 70%);
/* Sin esto, una tabla o un ancho estira la columna y desborda. */
min-width: 0;
}
.pb-sidebar {
flex: 0 1 var(--pb-sidebar-w, 30%);
max-width: var(--pb-sidebar-w, 30%);
min-width: 0;
}
/* Sin barra lateral el contenido ocupa todo el ancho disponible. */
.pb-content-area.pb-sidebar-none,
body.pb-no-widgets .pb-content-area {
flex-basis: 100%;
max-width: 100%;
}
/* La barra lateral a la izquierda se resuelve invirtiendo la fila: el orden
del DOM (contenido primero) se conserva para lectores de pantalla. */
body.pb-sidebar-left .pb-layout { flex-direction: row-reverse; }
/*
* Modo «caja». OJO: inc/customizer-css.php emite para este ajuste una regla
* sobre `.pb-site-main`, una clase que NO existe en las plantillas; la
* implementación real del modo caja es esta.
*/
body.pb-boxed { background: var(--pb-band); }
body.pb-boxed .pb-site {
max-width: calc(var(--pb-container, 1180px) + 80px);
margin: 0 auto;
background: var(--pb-content-bg, #fff);
box-shadow: 0 0 0 1px rgba(var(--pb-border-rgb, 204, 204, 204), .8);
}
@media (max-width: 900px) {
.pb-layout { display: block; padding-top: 28px; }
.pb-sidebar { max-width: none; margin-top: 44px; }
}
/* --------------------------------------------------------------------------
3. Barra superior
-------------------------------------------------------------------------- */
.pb-topbar {
background: var(--pb-topbar-bg, #53565a);
color: var(--pb-topbar-text, #fff);
font-size: var(--pb-fs-small, 13px);
line-height: 1.4;
}
.pb-topbar__inner {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
flex-wrap: wrap;
padding-top: 9px;
padding-bottom: 9px;
}
.pb-topbar a { color: inherit; font-weight: 600; transition: opacity .16s ease; }
.pb-topbar :focus-visible { outline-color: var(--pb-topbar-text, #fff); }
@media (hover: hover) and (pointer: fine) {
.pb-topbar a:hover { color: inherit; opacity: .78; text-decoration: underline; }
}
.pb-topbar__left { min-width: 0; }
.pb-topbar__right { margin-left: auto; }
.pb-topbar__menu {
display: flex;
flex-wrap: wrap;
gap: 18px;
list-style: none;
margin: 0;
padding: 0;
}
@media (max-width: 700px) {
/* El claim largo se sacrifica antes que el teléfono. */
.pb-topbar__left { display: none; }
.pb-topbar__inner { justify-content: center; }
.pb-topbar__right { margin-left: 0; }
}
/* --------------------------------------------------------------------------
4. Cabecera
-------------------------------------------------------------------------- */
.pb-header {
position: relative;
z-index: 100;
background: var(--pb-header-bg, #fff);
color: var(--pb-header-text, #333);
border-bottom: 1px solid var(--pb-border, #ccc);
}
/*
* La sombra de la cabecera fija se pinta con un pseudoelemento y se revela
* con opacity. Así el presupuesto de movimiento se respeta al pie de la
* letra: nada de transicionar box-shadow.
*/
.pb-header::after {
content: "";
position: absolute;
left: 0;
right: 0;
top: 100%;
height: 14px;
pointer-events: none;
opacity: 0;
transition: opacity .2s ease;
background: linear-gradient(
to bottom,
rgba(var(--pb-text-rgb, 51, 51, 51), .12),
rgba(var(--pb-text-rgb, 51, 51, 51), 0)
);
}
.pb-header__inner { display: flex; align-items: center; gap: 28px; padding-top: 18px; padding-bottom: 18px; }
.pb-branding {
flex: 0 0 auto;
margin-right: auto;
min-width: 0;
transition: transform .2s var(--pb-ease-out, cubic-bezier(0.23, 1, 0.32, 1));
transform-origin: left center;
}
.pb-branding .custom-logo-link { display: block; }
.pb-branding .custom-logo { width: var(--pb-logo-w, 200px); max-width: 100%; height: auto; }
.pb-site-title {
margin: 0;
font-family: var(--pb-font-heading, Georgia, serif);
font-size: var(--pb-fs-h3, 25px);
line-height: 1.1;
}
.pb-site-title a { color: var(--pb-header-text, #333); }
@media (hover: hover) and (pointer: fine) {
.pb-site-title a:hover { color: var(--pb-primary, #ae282e); text-decoration: none; }
}
.pb-site-title a:focus-visible { color: var(--pb-primary, #ae282e); }
/* El gris de marca (--pb-accent, Cool Gray 11c) viste antetítulos y
etiquetas; --pb-muted se reserva para el texto secundario largo. */
.pb-site-description {
margin: 4px 0 0;
font-size: var(--pb-fs-small, 13px);
color: var(--pb-accent, #53565a);
letter-spacing: .02em;
}
.pb-header__extras { display: flex; align-items: center; gap: 14px; flex: 0 0 auto; }
.pb-header__widget .widget { margin: 0; padding: 0; background: none; border: 0; }
/* En la cabecera el título del widget sobra: el widget habla solo. */
.pb-header__widget .widget-title { display: none; }
.pb-search-toggle {
display: inline-flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
padding: 0;
background: none;
border: 1px solid var(--pb-border, #ccc);
border-radius: var(--pb-btn-radius, 3px);
color: var(--pb-header-text, #333);
cursor: pointer;
transition: background-color .16s ease, color .16s ease, border-color .16s ease, transform .12s var(--pb-ease-out, cubic-bezier(0.23, 1, 0.32, 1));
}
@media (hover: hover) and (pointer: fine) {
.pb-search-toggle:hover {
background: var(--pb-primary, #ae282e);
border-color: var(--pb-primary, #ae282e);
color: var(--pb-on-primary);
}
}
.pb-search-toggle:focus-visible {
background: var(--pb-primary, #ae282e);
border-color: var(--pb-primary, #ae282e);
color: var(--pb-on-primary);
}
/* Respuesta en pointer-down, no al soltar. */
.pb-search-toggle:active { transform: scale(0.94); transition-duration: .1s; }
.pb-search-panel {
background: var(--pb-band);
border-bottom: 1px solid var(--pb-border, #ccc);
padding: 18px 0;
}
.pb-search-panel[hidden] { display: none; }
/* Cabecera fija ------------------------------------------------------------
El JS alterna .pb-header--stuck y body.pb-scrolled a partir de un umbral de
scroll. Es un disparo que puede repetirse varias veces por segundo, así que
NO lleva keyframes de entrada: solo transiciones interrumpibles. */
body.pb-sticky-header .pb-header--stuck {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 300;
background: var(--pb-header-bg, #fff);
}
body.pb-sticky-header .pb-header--stuck::after { opacity: 1; }
/* La compactación se hace con transform —no con padding— para no disparar
disposición en cada fotograma. */
body.pb-sticky-header .pb-header--stuck .pb-branding {
transform: scale(0.9);
/* Movimiento en pantalla —no una entrada—, así que curva in-out. */
transition-timing-function: var(--pb-ease-in-out, cubic-bezier(0.77, 0, 0.175, 1));
}
/* Hueco que deja la cabecera al salir del flujo. */
body.pb-sticky-header.pb-scrolled { padding-top: var(--pb-header-h, 88px); }
/* Material translúcido: solo donde el navegador lo soporta, con fondo sólido
como respaldo declarado arriba. */
@supports ((backdrop-filter: blur(12px)) or (-webkit-backdrop-filter: blur(12px))) {
body.pb-sticky-header .pb-header--stuck {
background: rgba(var(--pb-header-bg-rgb, 255, 255, 255), .88);
-webkit-backdrop-filter: blur(12px) saturate(150%);
backdrop-filter: blur(12px) saturate(150%);
}
}
/* Variantes de disposición del logotipo -------------------------------------
Tres estados que llegan como clase de desde el Personalizador. */
/* logo-left es el estado por defecto (branding con margin-right:auto). */
body.pb-header-logo-center .pb-header__inner { flex-direction: column; text-align: center; gap: 14px; }
body.pb-header-logo-center .pb-branding { margin-right: 0; transform-origin: center; }
body.pb-header-logo-center .pb-nav { width: 100%; }
body.pb-header-logo-center .pb-menu { justify-content: center; }
/* logo-split: menú a la izquierda, marca al centro, extras a la derecha.
Se resuelve con retícula para no depender del orden del DOM. */
@media (min-width: 981px) {
body.pb-header-logo-split .pb-header__inner {
display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: center;
}
body.pb-header-logo-split .pb-nav { grid-column: 1; grid-row: 1; min-width: 0; }
body.pb-header-logo-split .pb-branding {
grid-column: 2;
grid-row: 1;
margin-right: 0;
text-align: center;
transform-origin: center;
}
body.pb-header-logo-split .pb-header__extras { grid-column: 3; grid-row: 1; justify-content: flex-end; }
}
/* --------------------------------------------------------------------------
5. Menú principal
-------------------------------------------------------------------------- */
/* Espaciado apretado a propósito: con siete elementos de primer nivel
(«Home · Sobre Nosotros · Carpetas · Agendas 2027 · Libretas · Porta Menús ·
Contacto») el menú se partía en dos filas y empujaba la cabecera. Se recorta
el hueco entre elementos y el relleno lateral, NO la altura del enlace: los
10 px verticales son lo que mantiene un objetivo cómodo de pulsación.
Se conserva flex-wrap como red de seguridad — un menú que desborda en
horizontal es peor que uno que baja de fila. */
.pb-menu,
.pb-menu-fallback {
display: flex;
flex-wrap: wrap;
list-style: none;
margin: 0;
padding: 0;
gap: 0;
}
.pb-menu li { position: relative; }
.pb-menu a,
.pb-menu-fallback a {
display: block;
padding: 10px 9px;
white-space: nowrap;
color: var(--pb-header-text, #333);
/* Personalizar → Tipografía → «Tamaño del menú». El respaldo repite el
88 % por si la hoja se sirve sin las variables del Personalizador. */
font-size: var(--pb-menu-fs, calc(var(--pb-fs-base, 16px) * .88));
font-weight: 600;
text-transform: var(--pb-menu-tt, none);
letter-spacing: var(--pb-menu-ls, 0);
border-radius: var(--pb-btn-radius, 3px);
transition: color .16s ease, background-color .16s ease;
}
@media (hover: hover) and (pointer: fine) {
.pb-menu a:hover,
.pb-menu-fallback a:hover {
color: var(--pb-primary, #ae282e);
text-decoration: none;
}
}
.pb-menu a:focus-visible,
.pb-menu .current-menu-item > a,
.pb-menu .current_page_item > a,
.pb-menu .current-menu-ancestor > a,
.pb-menu .current-menu-parent > a {
color: var(--pb-primary, #ae282e);
}
/* Subrayado del elemento activo: 2 px, sin mover nada de sitio. */
.pb-menu .current-menu-item > a,
.pb-menu .current_page_item > a {
box-shadow: inset 0 -2px 0 0 var(--pb-primary, #ae282e);
}
.pb-menu-fallback a { color: var(--pb-primary, #ae282e); }
/* Submenús ------------------------------------------------------------------
Entrada de 180 ms con --pb-ease-out y origen en el disparador. */
.pb-menu .sub-menu {
position: absolute;
top: 100%;
left: 0;
z-index: 200;
min-width: 232px;
margin: 0;
padding: 6px;
list-style: none;
background: var(--pb-content-bg, #fff);
border: 1px solid var(--pb-border, #ccc);
border-radius: var(--pb-card-radius, 3px);
box-shadow: 0 10px 26px rgba(var(--pb-text-rgb, 51, 51, 51), .14);
opacity: 0;
visibility: hidden;
transform: translateY(6px);
transform-origin: top left;
transition: opacity .18s ease, transform .18s var(--pb-ease-out, cubic-bezier(0.23, 1, 0.32, 1)), visibility .18s;
}
.pb-menu li:hover > .sub-menu,
.pb-menu li.pb-focus > .sub-menu,
.pb-menu li.pb-open > .sub-menu {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.pb-menu .sub-menu a {
padding: 9px 12px;
font-size: calc(var(--pb-fs-base, 16px) * .9);
font-weight: 500;
text-transform: none;
letter-spacing: 0;
color: var(--pb-text, #333);
box-shadow: none;
}
@media (hover: hover) and (pointer: fine) {
.pb-menu .sub-menu a:hover { background: var(--pb-band); color: var(--pb-primary, #ae282e); }
}
.pb-menu .sub-menu a:focus-visible { background: var(--pb-band); color: var(--pb-primary, #ae282e); }
/* Tercer nivel: se despliega al costado. */
.pb-menu .sub-menu .sub-menu {
top: -7px;
left: 100%;
transform: translateX(6px);
transform-origin: top left;
}
.pb-menu .sub-menu li:hover > .sub-menu,
.pb-menu .sub-menu li.pb-focus > .sub-menu,
.pb-menu .sub-menu li.pb-open > .sub-menu {
transform: translateX(0);
}
/* El botón lo crea navigation.js; en escritorio no hace falta. */
.pb-submenu-toggle {
display: none;
padding: 10px 12px;
background: none;
border: 0;
color: inherit;
font-size: var(--pb-fs-small, 13px);
line-height: 1;
cursor: pointer;
transition: transform .18s var(--pb-ease-out, cubic-bezier(0.23, 1, 0.32, 1));
}
.pb-submenu-toggle[aria-expanded="true"] { transform: rotate(180deg); }
/* Hamburguesa --------------------------------------------------------------- */
.pb-menu-toggle {
display: none;
align-items: center;
gap: 9px;
padding: 9px 12px;
background: none;
border: 1px solid var(--pb-border, #ccc);
border-radius: var(--pb-btn-radius, 3px);
color: var(--pb-header-text, #333);
font-family: inherit;
font-size: calc(var(--pb-fs-base, 16px) * .9);
font-weight: 600;
cursor: pointer;
transition: transform .12s var(--pb-ease-out, cubic-bezier(0.23, 1, 0.32, 1)), border-color .16s ease;
}
.pb-menu-toggle:active { transform: scale(0.96); transition-duration: .1s; }
@media (hover: hover) and (pointer: fine) {
.pb-menu-toggle:hover { border-color: var(--pb-primary, #ae282e); }
}
.pb-menu-toggle:focus-visible { border-color: var(--pb-primary, #ae282e); }
.pb-menu-toggle__bars { display: block; width: 18px; }
.pb-menu-toggle__bars span {
display: block;
height: 2px;
margin: 4px 0;
background: currentColor;
transition: transform .2s var(--pb-ease-out, cubic-bezier(0.23, 1, 0.32, 1)), opacity .16s ease;
}
/* La cruz insinúa el resultado: las barras giran hacia donde van. */
.pb-menu-toggle[aria-expanded="true"] .pb-menu-toggle__bars span:nth-child(1) {
transform: translateY(6px) rotate(45deg);
}
.pb-menu-toggle[aria-expanded="true"] .pb-menu-toggle__bars span:nth-child(2) { opacity: 0; }
.pb-menu-toggle[aria-expanded="true"] .pb-menu-toggle__bars span:nth-child(3) {
transform: translateY(-6px) rotate(-45deg);
}
/* Cajón móvil ---------------------------------------------------------------
navigation.js alterna .pb-nav--open y body.pb-menu-open. El panel no se
oculta con display:none para que la transición pueda correr. */
@media (max-width: 980px) {
.pb-header__inner { flex-wrap: wrap; gap: 14px; }
.pb-menu-toggle { display: inline-flex; order: 3; }
.pb-header__extras { order: 2; margin-left: auto; }
/* La variante split vuelve a ser una fila normal en móvil. */
body.pb-header-logo-split .pb-header__inner,
body.pb-header-logo-center .pb-header__inner {
display: flex;
flex-direction: row;
text-align: left;
}
.pb-nav {
position: fixed;
top: 0;
right: 0;
bottom: 0;
z-index: 400;
width: min(86vw, 340px);
padding: 78px 22px 32px;
overflow-y: auto;
overscroll-behavior: contain;
background: var(--pb-header-bg, #fff);
border-left: 1px solid var(--pb-border, #ccc);
box-shadow: -12px 0 32px rgba(var(--pb-text-rgb, 51, 51, 51), .16);
opacity: 0;
visibility: hidden;
/* Porcentaje: relativo al propio ancho del panel. */
transform: translateX(12%);
transition: opacity .2s ease, transform .22s var(--pb-ease-out, cubic-bezier(0.23, 1, 0.32, 1)), visibility .22s;
}
.pb-nav--open {
opacity: 1;
visibility: visible;
transform: translateX(0);
}
/* Velo sobre el contenido. Se pinta en .pb-site y la cabecera sube por
encima para que el cajón siga siendo el elemento más alto. */
body.pb-menu-open .pb-site::after {
content: "";
position: fixed;
inset: 0;
z-index: 250;
background: rgba(var(--pb-text-rgb, 51, 51, 51), .45);
}
body.pb-menu-open .pb-header { z-index: 500; }
.pb-menu { flex-direction: column; flex-wrap: nowrap; gap: 0; }
.pb-menu li { border-bottom: 1px solid var(--pb-border, #ccc); }
/* En el cajón se recupera el ajuste de línea: el nowrap del escritorio
desbordaría una etiqueta larga como «B2B Atención Personalizada» fuera
del panel de 340 px. */
.pb-menu a { padding: 13px 2px; box-shadow: none; white-space: normal; }
.pb-menu .current-menu-item > a,
.pb-menu .current_page_item > a {
box-shadow: none;
}
.pb-submenu-toggle { display: block; position: absolute; top: 4px; right: 0; }
/* En el cajón el submenú es un acordeón, no una capa flotante. */
.pb-menu .sub-menu,
.pb-menu .sub-menu .sub-menu {
position: static;
display: none;
min-width: 0;
margin: 0 0 8px;
padding: 0 0 0 12px;
background: none;
border: 0;
border-left: 2px solid var(--pb-border, #ccc);
border-radius: 0;
box-shadow: none;
opacity: 1;
visibility: visible;
transform: none;
}
.pb-menu li.pb-open > .sub-menu { display: block; }
.pb-menu .sub-menu li:last-child { border-bottom: 0; }
}
/* --------------------------------------------------------------------------
6. Cabecera de página y migas
-------------------------------------------------------------------------- */
/* El aire de esta franja se controla desde el Personalizador (Retícula →
«Aire de la cabecera de página»): era 34/28 fijos y dejaba demasiado hueco
entre el menú y el contenido. El inferior se deriva del superior en
customizer-css.php para no descuadrar la proporción con un solo control. */
.pb-page-header {
background: var(--pb-content-bg, #fff);
border-bottom: 1px solid var(--pb-border, #ccc);
padding: var(--pb-page-header-pt, 22px) 0 var(--pb-page-header-pb, 18px);
}
.pb-page-title {
margin: 0;
font-size: var(--pb-fs-h2, 31px);
font-family: var(--pb-font-heading, Georgia, serif);
font-weight: var(--pb-heading-weight, 700);
letter-spacing: var(--pb-heading-ls, -0.5px);
text-transform: var(--pb-heading-tt, none);
color: var(--pb-text, #333);
line-height: 1.15;
}
/* Filete rojo corto: el gesto de marca que sustituye a la foto dramática. */
.pb-page-title::after {
content: "";
display: block;
width: 48px;
height: 3px;
margin-top: 14px;
background: var(--pb-primary, #ae282e);
}
/* 14 px era hueco muerto entre el título y la ruta: son dos partes del mismo
bloque, no dos secciones. */
.pb-breadcrumbs { margin-top: 8px; font-size: var(--pb-fs-small, 13px); color: var(--pb-muted, #666); }
.pb-breadcrumbs a { color: var(--pb-muted, #666); }
@media (hover: hover) and (pointer: fine) {
.pb-breadcrumbs a:hover { color: var(--pb-primary, #ae282e); }
}
.pb-breadcrumbs a:focus-visible { color: var(--pb-primary, #ae282e); }
.pb-breadcrumbs .pb-sep { margin: 0 8px; opacity: .55; }
.pb-breadcrumbs [aria-current="page"] { color: var(--pb-text, #333); }
/* --------------------------------------------------------------------------
7. Botones y formularios
-------------------------------------------------------------------------- */
.pb-btn,
.wp-block-button__link,
input[type="submit"],
button.submit {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 12px 24px;
border: 1px solid transparent;
border-radius: var(--pb-btn-radius, 3px);
font-family: var(--pb-font-body, sans-serif);
font-size: calc(var(--pb-fs-base, 16px) * .94);
font-weight: 600;
line-height: 1.25;
text-align: center;
text-transform: var(--pb-btn-tt, none);
text-decoration: none;
cursor: pointer;
transition: background-color .16s ease, color .16s ease, border-color .16s ease, transform .14s var(--pb-ease-out, cubic-bezier(0.23, 1, 0.32, 1));
}
/* Retroalimentación al pulsar, no al soltar. */
.pb-btn:active,
.wp-block-button__link:active,
input[type="submit"]:active,
button.submit:active {
transform: scale(0.97);
transition-duration: .1s;
}
.pb-btn--primary,
.wp-block-button__link,
input[type="submit"],
button.submit {
background: var(--pb-primary, #ae282e);
border-color: var(--pb-primary, #ae282e);
color: var(--pb-on-primary);
}
@media (hover: hover) and (pointer: fine) {
.pb-btn--primary:hover,
.wp-block-button__link:hover,
input[type="submit"]:hover,
button.submit:hover {
background: var(--pb-primary-dark, #8f2126);
border-color: var(--pb-primary-dark, #8f2126);
color: var(--pb-on-primary);
text-decoration: none;
}
}
.pb-btn--primary:focus-visible,
.wp-block-button__link:focus-visible,
input[type="submit"]:focus-visible,
button.submit:focus-visible {
background: var(--pb-primary-dark, #8f2126);
border-color: var(--pb-primary-dark, #8f2126);
color: var(--pb-on-primary);
}
.pb-btn--ghost { background: transparent; border-color: var(--pb-border, #ccc); color: var(--pb-text, #333); }
@media (hover: hover) and (pointer: fine) {
.pb-btn--ghost:hover {
background: var(--pb-primary, #ae282e);
border-color: var(--pb-primary, #ae282e);
color: var(--pb-on-primary);
text-decoration: none;
}
}
.pb-btn--ghost:focus-visible {
background: var(--pb-primary, #ae282e);
border-color: var(--pb-primary, #ae282e);
color: var(--pb-on-primary);
}
.pb-btn--lg { padding: 15px 32px; font-size: var(--pb-fs-h5, 16px); }
.pb-btn[aria-disabled="true"],
.pb-btn:disabled,
input[type="submit"]:disabled {
opacity: .5;
cursor: not-allowed;
transform: none;
}
/* Enlace «Leer más»: la flecha insinúa la dirección del salto. */
.pb-readmore {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: calc(var(--pb-fs-base, 16px) * .92);
font-weight: 600;
color: var(--pb-primary, #ae282e);
}
.pb-readmore::after {
content: "→";
display: inline-block;
transition: transform .18s var(--pb-ease-out, cubic-bezier(0.23, 1, 0.32, 1));
}
@media (hover: hover) and (pointer: fine) {
.pb-readmore:hover::after { transform: translateX(25%); }
}
.pb-readmore:focus-visible::after { transform: translateX(25%); }
/* Campos -------------------------------------------------------------------- */
input[type="text"],
input[type="email"],
input[type="url"],
input[type="tel"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="date"],
textarea,
select {
width: 100%;
padding: 11px 14px;
background: var(--pb-content-bg, #fff);
border: 1px solid var(--pb-border, #ccc);
border-radius: var(--pb-btn-radius, 3px);
color: var(--pb-text, #333);
font-family: inherit;
font-size: calc(var(--pb-fs-base, 16px) * .94);
line-height: 1.4;
transition: border-color .16s ease, box-shadow .16s ease;
}
textarea { min-height: 150px; resize: vertical; }
input:focus,
textarea:focus,
select:focus {
outline: none;
border-color: var(--pb-primary, #ae282e);
box-shadow: 0 0 0 3px rgba(var(--pb-primary-rgb, 174, 40, 46), .14);
}
::placeholder { color: var(--pb-muted, #666); opacity: .75; }
label { display: inline-block; font-size: calc(var(--pb-fs-base, 16px) * .92); font-weight: 600; }
fieldset {
margin: 0 0 1.4em;
padding: 18px;
border: 1px solid var(--pb-border, #ccc);
border-radius: var(--pb-card-radius, 3px);
}
legend { padding: 0 8px; font-weight: 700; }
/* Formulario de búsqueda del tema (searchform.php). */
.pb-search-form { display: flex; gap: 8px; }
.pb-search-form__field { flex: 1 1 auto; min-width: 0; }
.pb-search-form__submit { flex: 0 0 auto; white-space: nowrap; }
/* --------------------------------------------------------------------------
8. Tarjetas y listados
-------------------------------------------------------------------------- */
.pb-card {
background: var(--pb-content-bg, #fff);
border: 1px solid var(--pb-border, #ccc);
border-radius: var(--pb-card-radius, 3px);
overflow: hidden;
/*
* Solo transform y color: el presupuesto de movimiento no admite
* transicionar box-shadow. La sombra del hover aparece de golpe bajo el
* desplazamiento, y así sigue funcionando la regla condicional
* `.pb-card:hover{box-shadow:none;transform:none}` que emite
* inc/customizer-css.php cuando se apaga la sombra en el Personalizador.
*/
transition: transform .18s var(--pb-ease-out, cubic-bezier(0.23, 1, 0.32, 1)), border-color .16s ease;
}
@media (hover: hover) and (pointer: fine) {
.pb-card:hover {
transform: translateY(-2px);
border-color: rgba(var(--pb-primary-rgb, 174, 40, 46), .45);
box-shadow: 0 8px 22px rgba(var(--pb-text-rgb, 51, 51, 51), .1);
}
}
.pb-card:focus-within { border-color: rgba(var(--pb-primary-rgb, 174, 40, 46), .45); }
.pb-posts { display: grid; gap: 26px; }
body.pb-blog-grid2 .pb-posts { grid-template-columns: repeat(2, 1fr); }
body.pb-blog-grid3 .pb-posts { grid-template-columns: repeat(3, 1fr); }
/* Resultados de búsqueda -----------------------------------------------------
La búsqueda NO hereda la disposición del blog. En un catálogo lo que se
busca es un producto, y la lista a una columna con foto 4:3 a ancho completo
daba una tarjeta por pantalla: para comparar cinco porta menús había que
recorrer cinco pantallas. Tres columnas con la foto más contenida dejan los
resultados comparables de un vistazo.
Va por `body.search` y no por una clase del blog para que cambiar la
disposición del blog en el Personalizador no vuelva a romper la búsqueda. */
body.search .pb-posts {
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
body.search .pb-post-card__media img { aspect-ratio: 4 / 3; }
body.search .pb-post-card__body { padding: 14px 14px 16px; }
body.search .pb-post-card__title { font-size: var(--pb-fs-h6, 13px); line-height: 1.3; }
/* El extracto es lo que más alarga una tarjeta de resultado; con tres por fila
estorba más de lo que aporta. El tipo de contenido y el título ya orientan. */
body.search .pb-post-card__excerpt { display: none; }
body.search .pb-post-card__type {
font-size: 11px;
letter-spacing: .04em;
}
@media (max-width: 980px) {
body.pb-blog-grid3 .pb-posts { grid-template-columns: repeat(2, 1fr); }
body.search .pb-posts { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
body.pb-blog-grid2 .pb-posts,
body.pb-blog-grid3 .pb-posts,
body.search .pb-posts {
grid-template-columns: 1fr;
}
}
.pb-post-card { display: flex; flex-direction: column; }
.pb-post-card__media { overflow: hidden; background: var(--pb-band); }
.pb-post-card__media img {
width: 100%;
aspect-ratio: 4 / 3;
object-fit: cover;
transition: transform .3s var(--pb-ease-out, cubic-bezier(0.23, 1, 0.32, 1));
}
@media (hover: hover) and (pointer: fine) {
.pb-post-card:hover .pb-post-card__media img { transform: scale(1.03); }
}
.pb-post-card__body {
display: flex;
flex-direction: column;
flex: 1 1 auto;
padding: 22px;
}
.pb-post-card__type {
display: block;
margin-bottom: 6px;
font-size: var(--pb-fs-small, 13px);
letter-spacing: .1em;
text-transform: uppercase;
color: var(--pb-accent, #53565a);
}
.pb-post-card__title { margin: 0 0 10px; font-size: var(--pb-fs-h4, 20px); line-height: 1.25; }
.pb-post-card__title a { color: var(--pb-text, #333); }
@media (hover: hover) and (pointer: fine) {
.pb-post-card__title a:hover { color: var(--pb-primary, #ae282e); text-decoration: none; }
}
.pb-post-card__title a:focus-visible { color: var(--pb-primary, #ae282e); }
.pb-post-card__excerpt { color: var(--pb-muted, #666); font-size: calc(var(--pb-fs-base, 16px) * .96); }
.pb-post-card__excerpt p:last-child { margin-bottom: 0; }
.pb-post-card .pb-readmore { margin-top: auto; padding-top: 14px; }
/* Disposición en lista: la miniatura a la izquierda. */
body.pb-blog-list .pb-post-card {
display: grid;
grid-template-columns: 300px 1fr;
align-items: stretch;
}
body.pb-blog-list .pb-post-card__media img { height: 100%; aspect-ratio: auto; min-height: 100%; }
@media (max-width: 700px) {
body.pb-blog-list .pb-post-card { grid-template-columns: 1fr; }
body.pb-blog-list .pb-post-card__media img { aspect-ratio: 4 / 3; min-height: 0; }
}
/* Metadatos ----------------------------------------------------------------- */
.pb-post-meta { margin: 0 0 12px; font-size: var(--pb-fs-small, 13px); color: var(--pb-muted, #666); }
.pb-post-meta a { color: var(--pb-muted, #666); }
@media (hover: hover) and (pointer: fine) {
.pb-post-meta a:hover { color: var(--pb-primary, #ae282e); }
}
.pb-post-meta__sep { margin: 0 7px; opacity: .5; }
/* Entrada y página ---------------------------------------------------------- */
.pb-entry {
background: var(--pb-content-bg, #fff);
border: 1px solid var(--pb-border, #ccc);
border-radius: var(--pb-card-radius, 3px);
padding: 34px;
}
.pb-entry__thumb { margin: 0 0 26px; }
.pb-entry__thumb img { width: 100%; border-radius: var(--pb-card-radius, 3px); }
.pb-entry__content > *:last-child { margin-bottom: 0; }
.pb-entry__footer {
margin-top: 28px;
padding-top: 18px;
border-top: 1px solid var(--pb-border, #ccc);
font-size: calc(var(--pb-fs-base, 16px) * .9);
color: var(--pb-muted, #666);
}
.pb-entry__footer a {
display: inline-block;
margin: 0 6px 6px 0;
padding: 4px 10px;
background: var(--pb-band);
border-radius: var(--pb-btn-radius, 3px);
color: var(--pb-text, #333);
}
@media (hover: hover) and (pointer: fine) {
.pb-entry__footer a:hover {
background: rgba(var(--pb-primary-rgb, 174, 40, 46), .1);
color: var(--pb-primary, #ae282e);
text-decoration: none;
}
}
.pb-entry__edit { margin-top: 20px; font-size: var(--pb-fs-small, 13px); }
.pb-link-pages { margin-top: 22px; font-size: var(--pb-fs-small, 13px); font-weight: 600; }
.pb-link-pages a {
display: inline-block;
margin-left: 6px;
padding: 2px 8px;
border: 1px solid var(--pb-border, #ccc);
border-radius: var(--pb-btn-radius, 3px);
}
.pb-archive-description,
.pb-search-count {
margin: 0 0 24px;
color: var(--pb-muted, #666);
font-size: calc(var(--pb-fs-base, 16px) * .96);
}
.pb-archive-description { max-width: 72ch; }
@media (max-width: 640px) {
.pb-entry { padding: 22px; }
}
/* Sin resultados y 404 ------------------------------------------------------ */
.pb-no-results,
.pb-404 {
background: var(--pb-content-bg, #fff);
border: 1px solid var(--pb-border, #ccc);
border-radius: var(--pb-card-radius, 3px);
padding: 44px;
text-align: center;
}
.pb-no-results__title { margin-bottom: 12px; }
.pb-no-results .pb-search-form,
.pb-404__search .pb-search-form {
max-width: 440px;
margin: 22px auto 0;
}
.pb-404__code {
margin: 0 0 10px;
font-family: var(--pb-font-heading, Georgia, serif);
font-size: calc(var(--pb-fs-h1, 39px) * 2.2);
line-height: 1;
color: var(--pb-primary, #ae282e);
}
.pb-404__text { color: var(--pb-muted, #666); font-size: var(--pb-fs-h5, 16px); }
.pb-404__actions {
display: flex;
flex-wrap: wrap;
gap: 10px;
justify-content: center;
margin-top: 26px;
}
/* Paginación ----------------------------------------------------------------
the_posts_pagination() no acepta clase propia: se estila la que imprime
WordPress, acotada al área de contenido para no tocar la del plugin. */
.pb-content-area .pagination,
.pb-content-area .comment-navigation {
margin-top: 34px;
}
.pb-content-area .nav-links { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
/* Se apunta a la etiqueta y no solo a la clase: en WooCommerce el que
envuelve la paginación lleva también .page-numbers, y sin esto la lista
entera se pintaría como si fuera un número. */
.pb-content-area a.page-numbers,
.pb-content-area span.page-numbers {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 42px;
height: 42px;
padding: 0 12px;
background: var(--pb-content-bg, #fff);
border: 1px solid var(--pb-border, #ccc);
border-radius: var(--pb-btn-radius, 3px);
color: var(--pb-text, #333);
font-weight: 600;
transition: background-color .16s ease, border-color .16s ease, color .16s ease, transform .12s var(--pb-ease-out, cubic-bezier(0.23, 1, 0.32, 1));
}
.pb-content-area a.page-numbers:active { transform: scale(0.96); transition-duration: .1s; }
.pb-content-area span.page-numbers.current,
.pb-content-area a.page-numbers.current {
background: var(--pb-primary, #ae282e);
border-color: var(--pb-primary, #ae282e);
color: var(--pb-on-primary);
}
.pb-content-area span.page-numbers.dots { border-color: transparent; background: none; }
@media (hover: hover) and (pointer: fine) {
.pb-content-area a.page-numbers:hover {
background: var(--pb-primary, #ae282e);
border-color: var(--pb-primary, #ae282e);
color: var(--pb-on-primary);
text-decoration: none;
}
}
.pb-content-area a.page-numbers:focus-visible {
background: var(--pb-primary, #ae282e);
border-color: var(--pb-primary, #ae282e);
color: var(--pb-on-primary);
}
/* Navegación entre entradas ------------------------------------------------- */
.pb-post-nav { margin-top: 30px; }
.pb-post-nav .nav-links {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
justify-content: stretch;
}
.pb-post-nav a {
display: block;
padding: 18px;
background: var(--pb-content-bg, #fff);
border: 1px solid var(--pb-border, #ccc);
border-radius: var(--pb-card-radius, 3px);
color: var(--pb-text, #333);
font-weight: 600;
transition: border-color .16s ease, transform .18s var(--pb-ease-out, cubic-bezier(0.23, 1, 0.32, 1));
}
@media (hover: hover) and (pointer: fine) {
.pb-post-nav a:hover {
border-color: rgba(var(--pb-primary-rgb, 174, 40, 46), .45);
color: var(--pb-primary, #ae282e);
text-decoration: none;
transform: translateY(-2px);
}
}
.pb-post-nav a:focus-visible { border-color: var(--pb-primary, #ae282e); }
.pb-post-nav .nav-next { text-align: right; }
.pb-post-nav__label {
display: block;
margin-bottom: 4px;
font-size: var(--pb-fs-small, 13px);
font-weight: 500;
letter-spacing: .08em;
text-transform: uppercase;
color: var(--pb-accent, #53565a);
}
@media (max-width: 640px) {
.pb-post-nav .nav-links { grid-template-columns: 1fr; }
.pb-post-nav .nav-next { text-align: left; }
}
/* --------------------------------------------------------------------------
9. Widgets
-------------------------------------------------------------------------- */
.pb-sidebar .widget {
background: var(--pb-content-bg, #fff);
border: 1px solid var(--pb-border, #ccc);
border-radius: var(--pb-card-radius, 3px);
padding: 22px;
margin-bottom: 22px;
}
.pb-sidebar .widget:last-child { margin-bottom: 0; }
.widget-title {
margin: 0 0 14px;
padding-bottom: 10px;
border-bottom: 1px solid var(--pb-border, #ccc);
font-size: var(--pb-fs-h5, 16px);
letter-spacing: 0;
}
.widget ul { list-style: none; margin: 0; padding: 0; }
.widget ul li {
padding: 7px 0;
border-bottom: 1px solid rgba(var(--pb-border-rgb, 204, 204, 204), .7);
font-size: calc(var(--pb-fs-base, 16px) * .92);
}
.widget ul li:last-child { border-bottom: 0; }
.widget ul .children,
.widget ul .sub-menu {
margin-top: 7px;
padding-left: 14px;
border-left: 2px solid var(--pb-border, #ccc);
}
.widget ul .children li:last-child,
.widget ul .sub-menu li:last-child {
border-bottom: 0;
}
/* Nube de etiquetas ----------------------------------------------------------
WordPress escribe el tamaño de cada enlace en un atributo `style` en línea
(de 8pt a 22pt), así que una regla normal NUNCA gana: por eso el widget de
etiquetas de producto salía enorme y descuadraba la barra lateral. El
!important aquí no es pereza, es la única forma de vencer a un estilo en
línea sin filtrar el marcado en PHP.
Se renuncia a propósito al tamaño variable por popularidad: en una tienda
con pocas etiquetas no comunica nada y solo hace el bloque ilegible. Todas
quedan al mismo tamaño, como fichas. */
.widget .tagcloud,
.widget .wp-block-tag-cloud {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin-top: 2px;
}
.widget .tagcloud a,
.widget .wp-block-tag-cloud a {
font-size: 12px !important;
line-height: 1.3;
display: inline-block;
padding: 4px 9px;
background: var(--pb-band, #f2f2f2);
border: 1px solid var(--pb-border, #ccc);
border-radius: var(--pb-btn-radius, 3px);
color: var(--pb-muted, #666);
text-decoration: none;
transition: color .16s ease, border-color .16s ease, background-color .16s ease;
}
.widget .tagcloud a .tag-link-count,
.widget .wp-block-tag-cloud a .tag-link-count {
color: rgba(var(--pb-muted-rgb, 102, 102, 102), .7);
}
@media (hover: hover) and (pointer: fine) {
.widget .tagcloud a:hover,
.widget .wp-block-tag-cloud a:hover {
background: var(--pb-content-bg, #fff);
border-color: var(--pb-primary, #ae282e);
color: var(--pb-primary, #ae282e);
}
}
.widget .tagcloud a:focus-visible,
.widget .wp-block-tag-cloud a:focus-visible {
outline: 2px solid var(--pb-primary, #ae282e);
outline-offset: 2px;
color: var(--pb-primary, #ae282e);
}
.widget select { max-width: 100%; }
.widget img { border-radius: calc(var(--pb-card-radius, 3px) - 1px); }
.widget_media_gallery .gallery {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 6px;
margin: 0;
}
.widget_media_gallery .gallery-item { margin: 0 !important; width: auto !important; }
.widget .search-form,
.widget .pb-search-form {
flex-wrap: wrap;
}
.wp-calendar-table th { background: none; }
/* Franja antes del pie ------------------------------------------------------ */
.pb-before-footer {
background: var(--pb-band);
border-top: 1px solid var(--pb-border, #ccc);
padding: 34px 0;
}
.pb-before-footer .widget { margin: 0; }
.pb-before-footer .pb-container > .widget + .widget { margin-top: 26px; }
/* --------------------------------------------------------------------------
10. Pie de página
-------------------------------------------------------------------------- */
.pb-footer {
background: var(--pb-footer-bg, #333);
color: var(--pb-footer-text, #ccc);
font-size: calc(var(--pb-fs-base, 16px) * .92);
}
.pb-footer a { color: var(--pb-footer-text, #ccc); }
@media (hover: hover) and (pointer: fine) {
.pb-footer a:hover { color: var(--pb-footer-head, #fff); }
}
.pb-footer a:focus-visible { color: var(--pb-footer-head, #fff); outline-color: var(--pb-footer-head, #fff); }
.pb-footer__grid {
display: grid;
grid-template-columns: repeat(var(--pb-footer-cols, 4), 1fr);
gap: 36px;
padding-top: 52px;
padding-bottom: 34px;
/* Las columnas arrancan arriba: una columna corta no se centra respecto
a las demás. */
align-items: start;
}
/* Los hijos de una retícula tienen min-width:auto — un mapa o un iframe
ancho desbordaría la columna en vez de encogerse. */
.pb-footer__col {
min-width: 0;
}
.pb-footer__col > :first-child { margin-top: 0; }
.pb-footer .widget {
margin: 0 0 26px;
padding: 0;
background: none;
border: 0;
}
.pb-footer .widget:last-child { margin-bottom: 0; }
.pb-footer .widget-title {
/* Se reserva la misma altura en todas para que el contenido arranque
alineado aunque una columna no tenga título. */
min-height: 1.4em;
color: var(--pb-footer-head, #fff);
font-size: var(--pb-fs-h5, 16px);
letter-spacing: .04em;
border-bottom-color: rgba(var(--pb-footer-head-rgb, 255, 255, 255), .16);
}
.pb-footer .widget ul li {
border-bottom-color: rgba(var(--pb-footer-head-rgb, 255, 255, 255), .1);
}
.pb-footer .widget img,
.pb-footer .widget iframe {
max-width: 100%;
}
.pb-footer__bottom { border-top: 1px solid rgba(var(--pb-footer-head-rgb, 255, 255, 255), .14); padding: 20px 0; }
.pb-footer__bottom-inner {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 18px;
font-size: var(--pb-fs-small, 13px);
}
.pb-footer__copyright p { margin: 0; }
.pb-footer__menus {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 22px;
}
.pb-social-menu,
.pb-footer-menu {
display: flex;
flex-wrap: wrap;
gap: 18px;
list-style: none;
margin: 0;
padding: 0;
}
@media (max-width: 900px) {
.pb-footer__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
.pb-footer__grid { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
.pb-footer__bottom-inner { justify-content: center; text-align: center; }
.pb-footer__menus { justify-content: center; }
}
/* --------------------------------------------------------------------------
11. Comentarios
-------------------------------------------------------------------------- */
.pb-comments {
margin-top: 34px;
padding: 30px;
background: var(--pb-content-bg, #fff);
border: 1px solid var(--pb-border, #ccc);
border-radius: var(--pb-card-radius, 3px);
}
.pb-comments__title { margin-bottom: 20px; font-size: var(--pb-fs-h4, 20px); }
.pb-comments__list { list-style: none; margin: 0 0 26px; padding: 0; }
.pb-comments__list .children { list-style: none; margin: 0; padding-left: 26px; }
.pb-comments__list .comment-body { padding: 18px 0; border-bottom: 1px solid var(--pb-border, #ccc); }
.pb-comments__list .avatar { float: left; margin: 0 14px 10px 0; border-radius: 50%; }
.pb-comments__list .comment-author { font-weight: 700; }
.pb-comments__list .comment-metadata {
font-size: var(--pb-fs-small, 13px);
color: var(--pb-muted, #666);
margin-bottom: 10px;
}
.pb-comments__list .comment-metadata a { color: var(--pb-muted, #666); }
.pb-comments__list .reply { font-size: var(--pb-fs-small, 13px); font-weight: 600; }
.pb-comments__list .comment-awaiting-moderation {
display: block;
font-size: var(--pb-fs-small, 13px);
color: var(--pb-muted, #666);
}
.pb-comments__closed { font-size: var(--pb-fs-small, 13px); color: var(--pb-muted, #666); }
.comment-respond { margin-top: 10px; }
.comment-reply-title { font-size: var(--pb-fs-h5, 16px); }
.comment-form p { margin-bottom: 16px; }
.comment-form label { display: block; margin-bottom: 5px; }
.comment-form .comment-notes,
.comment-form .form-submit {
font-size: var(--pb-fs-small, 13px);
color: var(--pb-muted, #666);
}
.comment-form .form-submit { margin-bottom: 0; }
@media (max-width: 640px) {
.pb-comments { padding: 22px; }
.pb-comments__list .children { padding-left: 14px; }
}
/* --------------------------------------------------------------------------
12. Bloques de Gutenberg
-------------------------------------------------------------------------- */
/* .pb-entry lleva 34 px de relleno: los desbordes se calculan contra él. */
.pb-entry__content .alignwide { margin-left: -24px; margin-right: -24px; max-width: none; }
.pb-entry__content .alignfull {
margin-left: -34px;
margin-right: -34px;
max-width: none;
width: auto;
}
@media (max-width: 980px) {
.pb-entry__content .alignwide,
.pb-entry__content .alignfull {
margin-left: 0;
margin-right: 0;
}
}
.alignleft { float: left; margin: 0 24px 18px 0; }
.alignright { float: right; margin: 0 0 18px 24px; }
.aligncenter { margin-left: auto; margin-right: auto; }
.wp-block-image figcaption,
.wp-caption-text,
.wp-element-caption {
margin-top: 8px;
font-size: var(--pb-fs-small, 13px);
color: var(--pb-muted, #666);
text-align: center;
}
.wp-block-quote,
.wp-block-pullquote {
border-left: 3px solid var(--pb-primary, #ae282e);
padding-left: 22px;
}
.wp-block-pullquote { border-top: 0; border-bottom: 0; color: var(--pb-text, #333); }
.wp-block-quote cite { color: var(--pb-muted, #666); font-size: var(--pb-fs-small, 13px); }
.wp-block-table table,
.wp-block-table.is-style-stripes table {
border-collapse: collapse;
}
.wp-block-table td,
.wp-block-table th {
border: 1px solid var(--pb-border, #ccc);
}
.wp-block-table.is-style-stripes tbody tr:nth-child(odd) { background: var(--pb-band); }
/* Una tabla ancha se desplaza dentro de su caja, nunca la página entera. */
.wp-block-table { overflow-x: auto; }
.wp-block-code,
.wp-block-preformatted {
background: var(--pb-band);
border: 1px solid var(--pb-border, #ccc);
border-radius: var(--pb-card-radius, 3px);
padding: 16px;
overflow-x: auto;
}
.wp-block-separator { border-top: 1px solid var(--pb-border, #ccc); border-bottom: 0; }
.wp-block-button__link { text-decoration: none; }
.is-style-outline .wp-block-button__link,
.wp-block-button.is-style-outline > .wp-block-button__link {
background: transparent;
border-color: currentColor;
color: var(--pb-primary, #ae282e);
}
.wp-block-group.has-background,
.wp-block-cover {
border-radius: var(--pb-card-radius, 3px);
}
.wp-block-gallery figcaption { color: var(--pb-muted, #666); }
.wp-block-latest-posts__post-title { font-family: var(--pb-font-heading, Georgia, serif); }
/* --------------------------------------------------------------------------
13. Convivencia con el plugin Publibasics Enhancer
--------------------------------------------------------------------------
El plugin dibuja con sus propios tokens --pbe-*; el puente que les da el
valor de los tokens del tema YA está en inc/customizer-css.php, así que
aquí no se repite ni un :root. Lo que sí hace falta: el plugin comparte el
prefijo pb- en sus secciones (.pb-hero, .pb-families, .pb-process,
.pb-portal), de modo que estas reglas existen únicamente para evitar que
una misma cosa se pinte dos veces.
Y el verde: --pb-success es EXCLUSIVAMENTE de WhatsApp, que es un elemento
del plugin. Por eso ese token no aparece ni una vez en esta hoja. */
/* Si el plugin ya imprime su barra superior, la del tema sobra. */
body:has(.pbe-topbar) .pb-topbar { display: none; }
/* Una página que abre con el hero del plugin ya trae su H1: la cabecera de
página del tema sería un segundo título encima del mismo contenido. */
body:has(.pb-entry__content > .pb-hero:first-child) .pb-page-header { display: none; }
/* Las secciones del plugin traen su propio marco y sus propias bandas; el
marco de tarjeta del tema alrededor las encuadraría por segunda vez. */
.pb-entry--page:has(.pb-hero),
.pb-entry--page:has(.pb-families),
.pb-entry--page:has(.pb-process),
.pb-entry--page:has(.pb-portal) {
padding: 0;
background: none;
border: 0;
border-radius: 0;
overflow: visible;
}
/* Esas secciones ya reparten su propio aire vertical. */
.pb-entry__content > .pb-hero:first-child,
.pb-entry__content > .pb-families:first-child,
.pb-entry__content > .pb-process:first-child,
.pb-entry__content > .pb-portal:first-child {
margin-top: 0;
}
/* El botón del plugin dentro de una tarjeta de producto se alinea abajo
(el hueco lo reserva .pb-product-body en woocommerce.css). */
.pb-product-body > .pbe-btn { margin-top: auto; }
/* --------------------------------------------------------------------------
14. Utilidades, preferencias del sistema e impresión
-------------------------------------------------------------------------- */
.pb-hide { display: none !important; }
.pb-visually-hidden {
position: absolute !important;
width: 1px;
height: 1px;
overflow: hidden;
clip-path: inset(50%);
}
.pb-text-center { text-align: center; }
/* Con el cajón abierto el fondo no se desplaza. */
body.pb-menu-open { overflow: hidden; }
/* Preferencias del sistema — se publican con la animación, no después ------- */
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
/*
* Menos y más suave, no cero: se conserva la opacidad y el color, se
* quita el desplazamiento.
*/
*,
*::before,
*::after {
animation-duration: .01ms !important;
animation-iteration-count: 1 !important;
transition-property: opacity, color, background-color, border-color, box-shadow, outline-color, visibility !important;
transition-duration: .15s !important;
}
.pb-card:hover,
.pb-post-card:hover .pb-post-card__media img,
.pb-post-nav a:hover,
.pb-btn:active,
.pb-menu-toggle:active,
.pb-search-toggle:active,
.pb-readmore:hover::after,
.pb-content-area a.page-numbers:active,
body.pb-sticky-header .pb-header--stuck .pb-branding {
transform: none !important;
}
.pb-menu .sub-menu,
.pb-menu .sub-menu .sub-menu,
.pb-nav {
transform: none !important;
}
}
@media (prefers-reduced-transparency: reduce) {
/* Fondo sólido, sin desenfoque. */
body.pb-sticky-header .pb-header--stuck {
background: var(--pb-header-bg, #fff);
-webkit-backdrop-filter: none;
backdrop-filter: none;
}
.pb-nav { background: var(--pb-header-bg, #fff); }
body.pb-menu-open .pb-site::after { background: var(--pb-text, #333); }
}
@media (prefers-contrast: more) {
/* Sin velos de color, bordes definidos. */
.pb-card,
.pb-entry,
.pb-comments,
.pb-sidebar .widget,
.pb-post-nav a,
.pb-content-area a.page-numbers,
.pb-content-area span.page-numbers {
border-color: var(--pb-text, #333);
}
.pb-post-card__excerpt,
.pb-breadcrumbs,
.pb-post-meta {
color: var(--pb-text, #333);
}
.pb-btn--ghost { border-color: var(--pb-text, #333); }
}
/* Impresión ----------------------------------------------------------------- */
@media print {
.pb-topbar,
.pb-header,
.pb-footer,
.pb-sidebar,
.pb-before-footer,
.pb-menu-toggle,
.pb-search-panel,
.pb-search-form,
.pb-post-nav,
.pb-comments,
.pb-content-area .pagination,
.pb-readmore,
.joinchat,
.pbe-wa-float { display: none !important; }
body,
body.pb-boxed .pb-site { background: none !important; box-shadow: none !important; color: #000; }
body.pb-sticky-header.pb-scrolled { padding-top: 0; }
.pb-layout { display: block; padding-top: 0; }
.pb-card,
.pb-entry {
border: 0;
padding: 0;
}
.pb-entry__content a[href^="http"]::after {
content: " (" attr(href) ")";
font-size: 11px;
word-break: break-all;
}
.pb-page-header { border-bottom: 1px solid #000; padding: 0 0 12px; }
img { break-inside: avoid; }
}