.elementor-kit-3682{--e-global-color-primary:#000000;--e-global-color-secondary:#18181B;--e-global-color-text:#52525B;--e-global-color-accent:#F59E0B;--e-global-color-urgred:#DC2626;--e-global-color-urggreen:#16A34A;--e-global-color-urgbg:#FAFAFA;--e-global-color-urgnavy:#27272A;--e-global-color-urgwhite:#FFFFFF;--e-global-color-a2fe109:#000000;--e-global-color-fa7604c:#3F3F46;--e-global-color-a396e05:#E4E4E7;--e-global-color-pesgris:#71717A;--e-global-color-pesclaro:#A1A1AA;--e-global-color-pesfilcl:#D4D4D8;--e-global-typography-primary-font-family:"Archivo";--e-global-typography-primary-font-weight:800;--e-global-typography-secondary-font-family:"Archivo";--e-global-typography-secondary-font-weight:700;--e-global-typography-text-font-family:"Archivo";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Archivo";--e-global-typography-accent-font-weight:600;--e-global-typography-pescifras-font-family:"Archivo Black";--e-global-typography-pescifras-font-weight:400;font-family:"Archivo", Sans-serif;font-size:15px;font-weight:400;line-height:1.55em;}.elementor-kit-3682 e-page-transition{background-color:#FFBC7D;}.elementor-kit-3682 a{color:#000000;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1328px;}.e-con{--container-max-width:1328px;}.elementor-widget:not(:last-child){margin-block-end:0px;}.elementor-element{--widgets-spacing:0px 0px;--widgets-spacing-row:0px;--widgets-spacing-column:0px;}{}h1.entry-title{display:var(--page-title-display);}.site-header .site-branding{flex-direction:column;align-items:stretch;}.site-header{padding-inline-end:0px;padding-inline-start:0px;}.site-footer .site-branding{flex-direction:column;align-items:stretch;}@media(max-width:1024px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}/* Start custom CSS *//* ============================================================================
brand-pespas.css — CSS global del kit de Elementor de pespas.com (kit 3682).
REPARTO, y no es cosmético: Elementor pinta la portada, las páginas
editoriales, la cabecera y el pie; HivePress pinta el buscador, la ficha y
las páginas de cuenta, y ahí Elementor no llega (hace `exit` en
`template_include`). Este fichero es la mitad de Elementor. La otra mitad es
`cto-plus-hivepress/assets/css/core/maqueta-pespas.css`.
Sustituye a `brand.css`, que es la hoja azul de Trabajo Urgente y que aquí no
se limita a sobrar: `.uv-search` con `border-radius:20px` y sombra, o las
tarjetas redondeadas, contradicen el diseño en vez de quedarse cortas. Se
reemplaza entera en lugar de taparla con más especificidad.
El kit es POR FRONT (`_ctop_front_kit`), así que nada de esto sale de
pespas.com. Lo escribe `_claude_build/10-marca/43_pespas_kit.php`.
============================================================================ */
/* ---------------------------------------------------------------------------
Base
--------------------------------------------------------------------------- */
/* `clip` y no `hidden`. Es el mismo error que ya costó la barra lateral del
buscador y la barra de pasos del alta: `overflow-x:hidden` en html/body anula
`position:sticky` en TODOS los descendientes, y la cabecera de este diseño es
sticky. `clip` recorta igual y no crea contexto de desplazamiento. */
html, body { overflow-x: clip; max-width: 100%; }
body.elementor-default, body.elementor-page {
font-family: Archivo, Helvetica, Arial, sans-serif;
color: #18181B;
background: #fff;
-webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; }
.e-con, .elementor-widget { max-width: 100%; }
/* El diseño no lleva ni una esquina redondeada ni una sombra difusa. Las únicas
sombras son duras y desplazadas (las tarjetas de plan), y van declaradas ahí. */
.elementor-button, .uv-search, .uv-search input, .uv-search select { border-radius: 0; }
/* ---------------------------------------------------------------------------
Tipografía
--------------------------------------------------------------------------- */
body h1, body h2, body h3, body h4 {
font-family: Archivo, Helvetica, Arial, sans-serif;
letter-spacing: -0.025em;
text-wrap: pretty;
}
body h1 { letter-spacing: -0.035em; line-height: 0.98; }
/* Antetítulo: 11px, muy espaciado, ámbar sobre fondo negro y gris sobre blanco.
El color lo pone cada widget; aquí solo la forma. */
.uv-eyebrow, .uv-eyebrow .elementor-heading-title {
font-family: Archivo, Helvetica, Arial, sans-serif;
font-size: 11px; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase;
}
/* Las cifras van en Archivo Black. No es el mismo peso de Archivo: es otra
familia, con las cajas mucho más cerradas, y es lo que sostiene los precios. */
.uv-cifra, .ctop-stat__n, .uv-plan__entero, .uv-plan__dec {
font-family: 'Archivo Black', Helvetica, Arial, sans-serif;
letter-spacing: -0.03em; font-weight: 400;
}
a { color: #000; text-decoration: underline; text-underline-offset: 3px; }
a:hover { color: #F59E0B; }
/* ---------------------------------------------------------------------------
Cabecera y pie (plantillas de Elementor)
--------------------------------------------------------------------------- */
.uv-header {
position: sticky; top: 0; z-index: 40;
background: #fff; border-bottom: 1px solid #E4E4E7;
}
.uv-header .elementor-nav-menu .elementor-item {
font-size: 14px; font-weight: 500; color: #18181B;
text-decoration: none; padding: 0;
}
.uv-header .elementor-nav-menu .elementor-item:hover,
.uv-header .elementor-nav-menu .elementor-item.elementor-item-active { color: #F59E0B; }
/* Los tres botones de la cabecera. `.uv-acc-btn` y `.uv-account-btn` se alternan
por sesión desde el tema (`header-account.css`); aquí solo cambia el aspecto. */
.uv-header .uv-acc-btn a, .uv-header .uv-account-btn a {
background: transparent; color: #18181B; border: 0;
font-size: 14px; font-weight: 500; padding: 0; text-decoration: none;
}
.uv-header .uv-acc-btn a:hover, .uv-header .uv-account-btn a:hover { color: #F59E0B; }
.uv-header .uv-alta-btn a {
background: #000; color: #fff; border: 0; border-radius: 0;
font-size: 13px; font-weight: 700; letter-spacing: 0.01em;
padding: 12px 18px; white-space: nowrap; text-decoration: none;
}
.uv-header .uv-alta-btn a:hover { background: #F59E0B; color: #000; }
/* El fondo del ENVOLTORIO del pie no se arregla aquí: `base.css:26` lo fija con
`[data-elementor-type="footer"]` y el CSS del kit se imprime ANTES que el del tema —comprobado
en el navegador—, así que con la misma especificidad gana el tema. Está en
`core/maqueta-pespas.css`, que se encola en la 25 y sí llega después. */
.uv-footer { background: #000; color: #A1A1AA; }
.uv-footer h4, .uv-footer .elementor-heading-title {
font-size: 11px; font-weight: 700; letter-spacing: 0.16em;
color: #71717A; text-transform: uppercase;
}
.uv-footer .elementor-nav-menu .elementor-item {
color: #E4E4E7; font-size: 14px; font-weight: 400;
padding: 0 0 9px; text-decoration: none;
}
.uv-footer .elementor-nav-menu .elementor-item:hover { color: #F59E0B; }
.uv-footer .uv-foot-legal { border-top: 1px solid #27272A; color: #71717A; font-size: 12px; }
/* La columna «Servicios» del pie es un menú de WordPress real y son muchos
gremios: dos columnas, y sin colapsar nunca a hamburguesa. */
.uv-foot-servicios .elementor-nav-menu { columns: 2; column-gap: 24px; }
.uv-footer .elementor-nav-menu--dropdown { display: none !important; }
.uv-footer .elementor-menu-toggle { display: none !important; }
/* ---------------------------------------------------------------------------
El buscador del hero
La rejilla es `1fr 1fr auto` sobre fondo blanco, con un filete entre los dos
campos y el botón ámbar pegado al borde. Los `name` de los controles y la
clase `uv-loc-remote` son contrato con el JS y con `pre_get_posts`: se puede
cambiar cómo se ve, no cómo se llama.
--------------------------------------------------------------------------- */
.uv-search {
display: grid; grid-template-columns: 1fr 1fr auto;
width: 100%; max-width: 960px; background: #fff;
border: 0; border-radius: 0; box-shadow: none; padding: 0;
}
.uv-search .uv-field {
display: flex; flex-direction: column; gap: 6px;
padding: 16px 20px; min-width: 0; background: #fff; border: 0; border-radius: 0;
}
.uv-search .uv-field + .uv-field { border-left: 1px solid #E4E4E7; }
.uv-search .uv-field__cap {
font-size: 10px; font-weight: 700; letter-spacing: 0.16em;
color: #71717A; text-transform: uppercase; white-space: nowrap;
}
.uv-search select,
.uv-search input {
border: 0; background: transparent; padding: 0; width: 100%;
font: 400 15px/1.3 Archivo, Helvetica, Arial, sans-serif; color: #18181B;
appearance: none; -webkit-appearance: none;
}
.uv-search select:focus-visible,
.uv-search input:focus-visible { outline: 2px solid #F59E0B; outline-offset: 2px; }
.uv-search .uv-search-btn {
background: #F59E0B; color: #000; border: 0; border-radius: 0; cursor: pointer;
font: 700 15px Archivo, Helvetica, Arial, sans-serif; padding: 0 44px;
}
.uv-search .uv-search-btn:hover { background: #000; color: #fff; }
/* Tom Select, que es quien pinta de verdad el campo de zona. Se le quita la caja
entera para que parezca el mismo plano que el de al lado. */
.uv-search .uv-field--loc .ts-wrapper { flex: 1; min-width: 0; }
.uv-search .uv-field .ts-control {
border: 0 !important; background: transparent !important; box-shadow: none !important;
padding: 0 !important; min-height: 0 !important; border-radius: 0 !important;
}
.uv-search .uv-field .ts-control input {
font: 400 15px Archivo, Helvetica, Arial, sans-serif !important; color: #18181B !important;
}
.uv-search .uv-field .ts-control input::placeholder { color: #A1A1AA !important; }
.uv-search .uv-field--loc.single .ts-control:after { display: none; }
.uv-search .ts-dropdown {
border: 1px solid #E4E4E7; border-radius: 0; box-shadow: none; margin-top: 1px;
}
@media (max-width: 767px) {
.uv-search { grid-template-columns: 1fr; }
.uv-search .uv-field + .uv-field { border-left: 0; border-top: 1px solid #E4E4E7; }
.uv-search .uv-search-btn { padding: 16px; }
}
/* ---------------------------------------------------------------------------
Atajos del hero — las píldoras que no son píldoras
--------------------------------------------------------------------------- */
.uv-atajos { display: flex; flex-wrap: wrap; gap: 8px; }
.uv-atajos a {
border: 1px solid #3F3F46; color: #E4E4E7; font-size: 13px;
padding: 8px 14px; text-decoration: none;
}
.uv-atajos a:hover { border-color: #F59E0B; color: #fff; }
/* ---------------------------------------------------------------------------
Fila de confianza — cuatro celdas separadas por filetes, la última sin filete
--------------------------------------------------------------------------- */
.uv-confianza { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.uv-confianza > div {
padding: 28px 24px; border-right: 1px solid #E4E4E7;
display: flex; flex-direction: column; align-items: center; justify-content: center;
text-align: center;
}
.uv-confianza > div:last-child { border-right: 0; }
.uv-confianza b { font-size: 14px; font-weight: 700; margin-bottom: 6px; }
.uv-confianza span { font-size: 13px; line-height: 1.5; color: #71717A; max-width: 26ch; }
@media (max-width: 767px) {
.uv-confianza { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.uv-confianza > div:nth-child(2n) { border-right: 0; }
.uv-confianza > div:nth-child(-n+2) { border-bottom: 1px solid #E4E4E7; }
}
/* ---------------------------------------------------------------------------
Los pasos — regla gruesa arriba, número en Archivo Black ámbar
--------------------------------------------------------------------------- */
.uv-pasos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 48px; }
.uv-pasos > div { border-top: 2px solid #000; padding-top: 18px; }
.uv-pasos .uv-paso__n {
font-family: 'Archivo Black', Helvetica, Arial, sans-serif;
font-size: 12px; color: #F59E0B; letter-spacing: 0.08em; margin-bottom: 12px;
}
.uv-pasos .uv-paso__t {
font-size: 19px; font-weight: 700; letter-spacing: -0.015em; margin-bottom: 8px;
}
.uv-pasos .uv-paso__d { font-size: 14px; line-height: 1.6; color: #52525B; max-width: 40ch; }
@media (max-width: 900px) { .uv-pasos { grid-template-columns: 1fr; gap: 28px; } }
/* Los bloques de datos —`[ctop_gremios]`, `[ctop_cartera]`, `[ctop_stats]` y
`[ctop_planes]`— NO se pintan aquí aunque salgan en páginas de Elementor. Su
aspecto vive en `maqueta-pespas.css`, porque la clase `ctop-maqueta--pespas`
está en el `` de TODAS las páginas del front, también las de Elementor,
y porque son componentes de la maquetación y no de la marca: otro dominio que
adopte «Pespas» los quiere igual, en sus colores. Tenerlos aquí obligaría a
mantener los mismos .elementor-kit-3682es en dos ficheros. */
/* ---------------------------------------------------------------------------
Banda de profesional — el único bloque ámbar a sangre
--------------------------------------------------------------------------- */
.uv-banda-pro { background: #F59E0B; }
.uv-banda-pro .uv-banda__t {
font-size: 24px; font-weight: 800; letter-spacing: -0.02em; color: #000; margin-bottom: 6px;
}
.uv-banda-pro .uv-banda__d { font-size: 15px; color: #000; }
.uv-banda-pro .uv-banda__cta {
background: #000; color: #fff; font-size: 14px; font-weight: 700;
padding: 15px 26px; white-space: nowrap; text-decoration: none;
}
.uv-banda-pro .uv-banda__cta:hover { background: #fff; color: #000; }
/* ---------------------------------------------------------------------------
Listas y bloques editoriales (cómo funciona, verificación, sobre nosotros)
--------------------------------------------------------------------------- */
/* Titular de sección pequeño, en versalitas, con filete negro debajo. Es el
patrón que el diseño repite en la ficha y en las páginas editoriales.
El filete va SOLO en el elemento que pinta el texto. Poniéndolo en los dos
—el widget y el `
` de dentro— salían dos líneas separadas por el margen
del widget, que es un defecto que se ve a la primera y cuesta explicar. */
.uv-rotulo, .uv-rotulo .elementor-heading-title {
font-size: 12px; font-weight: 700; letter-spacing: 0.16em; color: #71717A;
text-transform: uppercase;
}
.uv-rotulo .elementor-heading-title,
.uv-rotulo:not(:has(.elementor-heading-title)) {
border-bottom: 1px solid #000; padding-bottom: 10px;
}
.uv-lista-marcada { list-style: none; margin: 0; padding: 0; }
.uv-lista-marcada li {
border-bottom: 1px solid #E4E4E7; padding: 18px 0;
display: grid; grid-template-columns: 10px minmax(0, 1fr); gap: 16px; align-items: start;
}
.uv-lista-marcada li:before { content: ""; width: 10px; height: 10px; background: #F59E0B; margin-top: 5px; }
.uv-lista-marcada b { display: block; font-size: 16px; font-weight: 700; margin-bottom: 5px; }
.uv-lista-marcada span { font-size: 14px; line-height: 1.6; color: #52525B; max-width: 48ch; }
.uv-faq-rejilla { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 48px; }
.uv-faq-rejilla > div { border-bottom: 1px solid #E4E4E7; padding: 18px 0; }
.uv-faq-rejilla b { display: block; font-size: 15px; font-weight: 700; margin-bottom: 6px; }
.uv-faq-rejilla span { font-size: 14px; line-height: 1.6; color: #52525B; max-width: 52ch; }
@media (max-width: 767px) { .uv-faq-rejilla { grid-template-columns: 1fr; } }
/* ---------------------------------------------------------------------------
Aparición al desplazar
Se conserva el mecanismo del mu-plugin (`.uv-reveal` → `.is-visible`), pero el
recorrido es más corto: este diseño es plano y un salto de 26px se nota como
un rebote.
--------------------------------------------------------------------------- */
.uv-reveal { opacity: 0; transform: translateY(12px); transition: opacity .5s ease, transform .5s ease; }
.uv-reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
.uv-reveal, .uv-reveal.is-visible { opacity: 1; transform: none; transition: none; }
}
/* ---------------------------------------------------------------------------
Barra fija de móvil
La pinta el mu-plugin en todas las páginas. Se mantiene (es el acceso rápido a
buscar y a darse de alta en un móvil) y se repinta: negro y ámbar, sin radios.
--------------------------------------------------------------------------- */
.uv-mobile-cta { display: none; }
@media (max-width: 767px) {
.uv-mobile-cta {
display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 9999;
border-top: 1px solid #27272A;
}
.uv-mobile-cta a {
flex: 1; text-align: center; padding: 15px 10px; text-decoration: none;
font: 700 14px Archivo, Helvetica, Arial, sans-serif;
}
.uv-mobile-cta .uv-search-cta { background: #000; color: #fff; }
.uv-mobile-cta .uv-quote { background: #F59E0B; color: #000; }
body.elementor-page { padding-bottom: 54px; }
}/* End custom CSS */