/* ═══════════════════════════════════════════════════════════════════════════
Piezas del sitio que no son la ficha ni un shortcode.
Se carga la última (prioridad 20, sin dependencias) para poder pisar a
styles.css y elements.css sin subir la especificidad.
═══════════════════════════════════════════════════════════════════════════ */
/* ── Alto de la cabecera ─────────────────────────────────────────────────────
OJO con lo que hace esta variable y con lo que NO hace.
Sirve para UNA cosa: colocar la barra fija del popup justo debajo de la
cabecera. Antes iba con un 95px escrito a mano, medido para la cabecera de
90px que había; al adelgazarla quedó un hueco entre las dos.
Lo que NO es es un hueco que haya que reservarle al contenido. Lo intenté y
estaba equivocado: el contenido ya arranca donde tiene que arrancar, así que
sumarle el alto de la cabecera lo bajaba una segunda vez y abría un hueco
enorme en la portada. Si alguna vez hace falta reservar sitio, que se mida
antes si de verdad falta: aquí no faltaba.
────────────────────────────────────────────────────────────────────────── */
:root {
--trm-header-h: 74px;
}
@media (max-width: 991px) {
:root {
--trm-header-h: 62px;
}
}
/* wpautop deja un vacío alrededor de los shortcodes de bloque. No se ve,
pero arrastra el margen inferior de los párrafos y abre un hueco de la nada
justo encima de la portada. */
.page-wraper > p:empty,
.page-wrapper > p:empty,
.entry-content > p:empty {
display: none;
}
/* ── Cabecera ────────────────────────────────────────────────────────────────
El tema la deja en 90px de alto con los enlaces a 35px de padding vertical y
14px de horizontal: mucho grosor y poco aire entre unos y otros. Aquí se
apreta en vertical, se separa en horizontal y se rehacen los desplegables.
────────────────────────────────────────────────────────────────────────── */
.wpo-site-header .navigation {
min-height: 74px;
border-bottom: 1px solid #f0ede8;
}
/* La sombra al quedarse fija era azul (#086ad84a), de la paleta del tema
original. Neutra y mucho más floja. */
.sticky-header {
box-shadow: 0 2px 18px rgba(20, 16, 12, 0.08);
}
@media (min-width: 992px) {
.wpo-site-header #navbar > ul > li > a {
padding: 26px 17px;
font-size: 0.93rem;
font-weight: 600;
letter-spacing: 0.005em;
color: var(--neutro2);
}
.wpo-site-header #navbar > ul > li > a:hover,
.wpo-site-header #navbar > ul > li.current-menu-item > a,
.wpo-site-header #navbar > ul > li.current-menu-ancestor > a {
color: var(--trm-oro-fuerte, #b8933f);
}
/* La marca del activo era una barra de 4px pegada al techo del header. Pasa a
un filete fino debajo del texto, que crece desde el centro. */
.wpo-site-header #navbar > ul > li > a:before {
left: 17px;
right: 17px;
top: auto;
bottom: 18px;
width: auto;
height: 2px;
background: var(--trm-oro-fuerte, #b8933f);
border-radius: 2px;
transform: scaleX(0);
transform-origin: center;
transition: transform 0.25s ease, opacity 0.25s ease;
}
.wpo-site-header #navbar > ul > li > a:hover:before,
.wpo-site-header #navbar > ul > li > a.active:before,
.wpo-site-header #navbar > ul > li.current-menu-item > a:before,
.wpo-site-header #navbar > ul > li.current-menu-ancestor > a:before {
opacity: 1;
visibility: visible;
transform: scaleX(1);
}
/* La flecha del desplegable estaba pegada al texto y sin sitio propio. */
.wpo-site-header #navbar li.menu-item-has-children {
padding-right: 8px;
}
.wpo-site-header #navbar > ul > .menu-item-has-children > a:after {
right: 6px;
top: 50%;
transform: translateY(-50%);
font-size: 8px;
opacity: 0.55;
transition: opacity 0.2s ease;
}
.wpo-site-header #navbar > ul > .menu-item-has-children:hover > a:after {
opacity: 1;
}
/* ── Desplegables ── */
.wpo-site-header #navbar > ul .sub-menu {
width: auto;
min-width: 236px;
padding: 8px;
border: 1px solid #f0ede8;
border-radius: 12px;
box-shadow: 0 14px 34px rgba(20, 16, 12, 0.1);
transform: translateY(6px);
transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
}
.wpo-site-header #navbar > ul > li:hover > .sub-menu,
.wpo-site-header #navbar .sub-menu > li:hover > .sub-menu {
transform: none;
}
.wpo-site-header #navbar > ul > li .sub-menu a {
padding: 10px 14px;
border-radius: 8px;
font-size: 0.9rem;
font-weight: 600;
line-height: 1.35;
color: var(--neutro3);
transition: background-color 0.18s ease, color 0.18s ease;
}
.wpo-site-header #navbar > ul > li .sub-menu a:hover,
.wpo-site-header #navbar > ul > li .sub-menu li.current-menu-item > a {
background: #faf6ee;
color: var(--trm-oro-fuerte, #b8933f);
}
/* El subrayado que se deslizaba por debajo del texto sobra: ahora el estado
lo lleva el propio fondo de la fila, que se lee mejor y no salta. */
.wpo-site-header #navbar > ul > li .sub-menu a:after {
content: none;
}
/* La flecha del submenú de segundo nivel, alineada con el texto. */
.wpo-site-header #navbar > ul > li > .sub-menu > .menu-item-has-children > a:before {
right: 12px;
opacity: 0.5;
}
.wpo-site-header #navbar > ul > li > .sub-menu .sub-menu {
left: 100%;
margin-left: 6px;
}
}
/* ── Teléfono y carrito ── */
.wpo-site-header .headerRight {
display: flex;
align-items: center;
gap: 22px;
justify-content: flex-end;
}
.wpo-site-header .telefonoCabecera {
display: inline-flex;
align-items: center;
gap: 9px;
color: var(--neutro2);
transition: color 0.2s ease;
}
.wpo-site-header .telefonoCabecera:hover {
color: var(--trm-oro-fuerte, #b8933f);
}
.wpo-site-header .telefonoCabecera svg {
width: 19px;
height: 19px;
}
.wpo-site-header .phone_head {
margin: 0;
font-size: 0.95rem;
font-weight: 700;
letter-spacing: 0.01em;
color: inherit;
}
.wpo-site-header .header-cart .cart-contents {
display: inline-flex;
align-items: center;
gap: 6px;
color: var(--neutro2);
transition: color 0.2s ease;
}
.wpo-site-header .header-cart .cart-contents:hover {
color: var(--trm-oro-fuerte, #b8933f);
}
.wpo-site-header .header-cart .cart-count {
font-size: 0.86rem;
font-weight: 700;
color: var(--trm-oro-fuerte, #b8933f);
}
@media (max-width: 991px) {
/* 10px arriba y abajo con el botón de 42px dan los 62px justos del
min-height, que es lo que declara --trm-header-h. Con 12px se pasaba de
largo y la variable dejaba de cuadrar. */
.wpo-site-header .navigation {
padding: 10px 0;
min-height: 62px;
}
/* La retícula de Bootstrap reparte 3 + 6 + 1 + 2 columnas: al bloque de la
derecha le tocaban dos doceavos, unos 70px, y ahí no caben el teléfono y
el carrito. Se pasa a flex y cada bloque ocupa lo que necesita.
La columna del menú se queda a cero, pero NO se oculta: el panel vive
dentro y con display:none desaparecería. */
.wpo-site-header .navigation .row {
display: flex;
flex-wrap: nowrap;
align-items: center;
}
.wpo-site-header .navigation .row > div:has(> .mobail-menu),
.wpo-site-header .navigation .row > div:has(.headerRight) {
flex: 0 0 auto;
width: auto;
max-width: none;
}
.wpo-site-header .navigation .row > div:has(> .navbar-header) {
flex: 1 1 auto;
width: auto;
max-width: none;
text-align: center;
}
.wpo-site-header .navigation .row > div:has(> #navbar) {
flex: 0 0 0;
width: 0;
padding: 0;
}
.wpo-site-header .headerRight {
gap: 14px;
}
/* En móvil el número entero no cabe sin apretarlo todo: se queda el icono,
que sigue llamando igual. */
.wpo-site-header .phone_head {
display: none;
}
}
/* ── Menú móvil, rehecho de cero ─────────────────────────────────────────────
Lo del tema no se podía ajustar a base de retoques, porque se contradice solo:
pone las flechas de los submenús en position:absolute y a la vez fuerza
position:static en los