/* * Barra de promoción del cupón de bienvenida — 2026-08-27. * * La cabecera de Salient es fija (position: fixed; top: 0; z-index: 9999) y reserva su * hueco con #header-space. Para meter la barra encima hay que apartar las dos cosas, y * el desplazamiento es el alto REAL de la barra, que mide el JS: en móvil el texto pasa * a dos líneas y cualquier alto escrito a mano descuadraría la cabecera. */ .kub-promo { position: fixed; top: 0; left: 0; right: 0; z-index: 10000; display: flex; align-items: center; justify-content: center; gap: 12px; /* Simétrico a propósito: la X va posicionada aparte, así que si el hueco que se le reserva solo se descuenta por la derecha, el texto queda escorado a la izquierda. */ padding: 9px 44px; background: #00828e; color: #fff; font-size: 15px; line-height: 1.35; text-align: center; } .kub-promo[hidden] { display: none; } /* * Flex y no texto corrido: la etiqueta del código es inline-block y, apoyada en la línea * base, cuelga por debajo y estira el párrafo (49 px para una línea de 20). Eso dejaba el * texto pegado arriba y todo el aire abajo, que es lo que se veía descentrado en vertical. */ .kub-promo__texto { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px 8px; margin: 0; /* Salient pone `p { padding-bottom: 1.5em }`: son 22 px que caen todos abajo y descuadran el centrado vertical de la barra. */ padding: 0; font-size: inherit; line-height: inherit; color: inherit; } /* El código es un botón: al pulsarlo se copia. Se ve como una etiqueta, no como un botón de acción, para que no compita con los CTA de compra. */ .kub-promo__codigo { position: relative; display: inline-block; padding: 2px 10px; border: 1px dashed rgba(255, 255, 255, 0.65); border-radius: 4px; background: rgba(255, 255, 255, 0.12); color: #fff; font: inherit; font-weight: 700; letter-spacing: 0.04em; cursor: pointer; transition: background-color 0.18s ease, border-color 0.18s ease; } .kub-promo__codigo:hover, .kub-promo__codigo:focus-visible { background: rgba(255, 255, 255, 0.22); border-color: #fff; } /* El aviso de "copiado" ocupa el sitio del código para que la barra no dé un salto. */ .kub-promo__copiado { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; border-radius: 3px; background: #00828e; opacity: 0; pointer-events: none; font-weight: 600; letter-spacing: 0; transition: opacity 0.18s ease; } .kub-promo--copiado .kub-promo__copiado { opacity: 1; } .kub-promo__cerrar { position: absolute; top: 50%; right: 10px; transform: translateY(-50%); display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: rgba(255, 255, 255, 0.85); cursor: pointer; transition: background-color 0.18s ease, color 0.18s ease; } .kub-promo__cerrar:hover, .kub-promo__cerrar:focus-visible { background: rgba(255, 255, 255, 0.16); color: #fff; } /* Sitio para la barra: se aparta la cabecera fija y el hueco que reserva en el flujo. */ html.kub-promo-visible #header-outer { top: var(--kub-promo-alto, 0px); } html.kub-promo-visible #header-space { margin-top: var(--kub-promo-alto, 0px); } /* Con la barra de administración de WordPress, las dos cosas se suman. */ html.kub-promo-visible.admin-bar #header-outer { top: calc(var(--kub-promo-alto, 0px) + 32px); } .kub-promo * { box-sizing: border-box; } @media (max-width: 690px) { .kub-promo { padding: 8px 40px; font-size: 13.5px; } .kub-promo__codigo { padding: 1px 8px; } } /* Quien tenga desactivadas las animaciones no necesita la transición del "copiado". */ @media (prefers-reduced-motion: reduce) { .kub-promo__codigo, .kub-promo__copiado, .kub-promo__cerrar { transition: none; } } /* --------------------------------------------------------------- * Sin salto al cargar — 2026-08-31 * * La barra se destapaba desde JS (`hidden` + clase `kub-promo-visible` en el * ), asi que hasta que corria el script el resto de la pagina estaba 60 px * mas arriba y luego bajaba de golpe. Ese salto era 0,0711 del CLS de la ficha, * el trozo mas grande que quedaba. * * Ahora la decision la toma un script inline en el (ver inc/barra-promo.php) * ANTES del primer pintado, y el hueco se reserva con estos valores por defecto. * El JS del pie sigue midiendo el alto real y afinando la variable: como el punto * de partida ya es correcto, el ajuste no mueve nada perceptible. * --------------------------------------------------------------- */ html.kub-promo-visible { --kub-promo-alto: 44px; } @media (max-width: 690px) { html.kub-promo-visible { /* En movil el texto pasa a dos lineas. */ --kub-promo-alto: 60px; } } /* Visibilidad por clase y no por [hidden]: el no puede tocar un elemento que todavia no existe, pero si puede marcar el . */ .kub-promo { display: none; } html.kub-promo-visible .kub-promo { display: flex; } /* --------------------------------------------------------------- * Refuerzo: el layout no puede depender SOLO de la clase del * * `kub-promo-visible` se la lleva por delante algo que reescribe el className del * despues del primer pintado (WPBakery/Salient anaden ahi `js_active`, * `vc_mobile`, `vc_transform`...). Cuando barra-promo.js la vuelve a poner, el * contenido baja 60 px de golpe: ese era el salto que quedaba. * * Un atributo `data-` y un estilo inline SI sobreviven a esas reescrituras, asi * que el hueco se reserva con ellos desde el . * --------------------------------------------------------------- */ html[data-promo] #header-outer { top: var(--kub-promo-alto, 0px); } html[data-promo] #header-space { margin-top: var(--kub-promo-alto, 0px); } html[data-promo].admin-bar #header-outer { top: calc(var(--kub-promo-alto, 0px) + 32px); } html[data-promo] .kub-promo { display: flex; }