← la línea, elemento aparte
El mockup: titular a la izquierda con subrayado amarillo pegado.
Estilizo el separator para que se vea como el subrayado del mockup.
------------------------------------------------------------------------- */
.wd-page-content .vc_custom_heading{
font-weight:800 !important;
line-height:1.1 !important;
margin-bottom:.5rem !important;
}
/* El separador → barra amarilla gruesa, corta, alineada */
.wd-page-content .vc_separator .vc_sep_line{
border-top-width:4px !important;
border-color:var(--hx-y) !important;
border-radius:2px;
}
.wd-page-content .vc_separator{ margin-bottom:2rem !important; }
/* ---------------------------------------------------------------------------
3. BOTONES → píldora
Aplica a los 3 sistemas que conviven: WPBakery, Woodmart y el tema.
------------------------------------------------------------------------- */
.wd-page-content .vc_btn3,
.wd-page-content .btn,
.wd-footer .vc_btn3{
border-radius:999px !important;
font-family:'Figtree','Poppins',sans-serif !important;
font-weight:700 !important;
letter-spacing:0 !important;
text-transform:none !important;
box-shadow:none !important;
border:none !important;
padding:.85rem 1.6rem !important;
transition:transform .18s var(--hx-ease), background .18s !important;
}
.wd-page-content .vc_btn3:hover,
.wd-page-content .btn:hover{ transform:translateY(-2px); }
/* Botón amarillo (el "¡Solicitar asesoría!" y los CTA principales) */
.wd-page-content .btn-color-white,
.wd-page-content .vc_btn3-color-juicy-pink{
background:var(--hx-y) !important;
color:var(--hx-ink) !important;
}
.wd-page-content .btn-color-white:hover,
.wd-page-content .vc_btn3-color-juicy-pink:hover{
background:var(--hx-y-hi) !important;
color:var(--hx-ink) !important;
}
/* Botones oscuros del footer */
.wd-footer .vc_btn3-color-inverse{
background:var(--hx-ink) !important;
color:#fff !important;
}
/* ---------------------------------------------------------------------------
4. "NUESTRAS CATEGORÍAS" — carrusel de banners de Woodmart
Markup: .banners-carousel > .promo-banner-wrapper > .promo-banner
El texto va SOBRE la imagen (banner-mask). El mockup lo tiene debajo.
Con CSS no puedo mover el texto fuera de la imagen sin romperlo, así que
lo llevo a lo más cercano: tarjeta con esquinas, sombra y hover limpio.
------------------------------------------------------------------------- */
.banners-carousel .promo-banner{
border-radius:var(--hx-r) !important;
overflow:hidden;
transition:transform .22s var(--hx-ease), box-shadow .22s var(--hx-ease);
}
.banners-carousel .promo-banner-wrapper{ padding:0 8px; }
.banners-carousel .promo-banner:hover{
transform:translateY(-4px);
box-shadow:0 12px 32px rgba(17,17,17,.14);
}
.banners-carousel .banner-title{
font-weight:800 !important;
letter-spacing:-.01em !important;
}
/* La mascarilla oscura del mockup: degradado desde abajo, no plano */
.banners-carousel .promo-banner.banner-mask .main-wrapp-img::after{
background:linear-gradient(180deg,
rgba(17,17,17,0) 30%, rgba(17,17,17,.75) 100%) !important;
}
/* ---------------------------------------------------------------------------
5. "LABORATORIOS" — carrusel de Massive Addons
Markup: .mpc-carousel-anything > .mpc-image > .mpc-item-overlay
El overlay amarillo con el nombre encima. Eso ya es muy parecido
al badge del mockup. Solo lo afino.
------------------------------------------------------------------------- */
.mpc-carousel-anything .mpc-image .mpc-item{
border-radius:var(--hx-r);
overflow:hidden;
}
.mpc-carousel-anything .mpc-item-overlay{
background:rgba(255,194,14,.88) !important;
}
.mpc-item-overlay__icon{
font-family:'Figtree','Poppins',sans-serif !important;
font-weight:800 !important;
letter-spacing:-.01em !important;
}
/* ---------------------------------------------------------------------------
6. "NOTICIAS" — grid de WPBakery
Markup: .vc_grid-item > .vc_gitem-zone
------------------------------------------------------------------------- */
.vc_grid-item .vc_grid-item-mini{
border-radius:var(--hx-r);
overflow:hidden;
box-shadow:0 1px 2px rgba(17,17,17,.04), 0 8px 24px rgba(17,17,17,.06);
transition:transform .22s var(--hx-ease);
height:100%;
}
.vc_grid-item:hover .vc_grid-item-mini{ transform:translateY(-4px); }
.vc_grid-item .vc_gitem-zone-c{
background:#fff !important;
padding:1.2rem !important;
}
.vc_grid-item .vc_gitem-post-data-source-post_title h4{
font-weight:800 !important;
font-size:1rem !important;
line-height:1.3 !important;
color:var(--hx-ink) !important;
}
.vc_grid-item .vc_gitem-post-data-source-post_excerpt p{
font-size:.85rem !important;
color:var(--hx-body) !important;
line-height:1.5 !important;
}
/* ---------------------------------------------------------------------------
7. BLOQUE "¡CONTACTANOS!"
Markup: .title-wrapper > .woodmart-title-container
Hoy es gris plano. El mockup usa el amarillo de marca.
------------------------------------------------------------------------- */
.wd-rs-69bdc01d551f9{ background-color:var(--hx-ink) !important; }
.wd-rs-69bdc01d551f9 .woodmart-title-container{
font-weight:800 !important;
line-height:1.15 !important;
color:#fff !important;
}
/* ---------------------------------------------------------------------------
8. "NUESTRAS MARCAS" — carrusel de logos
------------------------------------------------------------------------- */
.mpc-carousel-image .mpc-item{
border-radius:8px;
overflow:hidden;
filter:grayscale(1);
opacity:.65;
transition:filter .25s, opacity .25s;
}
.mpc-carousel-image .mpc-item:hover{ filter:none; opacity:1; }
/* ---------------------------------------------------------------------------
9. ARREGLO: H1 blanco sobre fondo blanco
Tu Home tiene:
Alcoholímetros Colombia
sobre fondo blanco, en la sección de marcas. Es texto invisible con
keyword: Google lo puede leer como cloaking.
Esto lo hace visible. Pero el arreglo de verdad es borrar ese H1
del builder o volverlo el titular real de la sección.
------------------------------------------------------------------------- */
.wd-page-content h1.vc_custom_heading[style*="#ffffff"],
.wd-page-content h1.vc_custom_heading[style*="rgb(255, 255, 255)"]{
color:var(--hx-ink) !important;
font-size:1.1rem !important;
opacity:.5;
}
/* ---------------------------------------------------------------------------
10. UTILIDADES para las filas NUEVAS que armes
Estas sí son mías: se las pones a la fila en "Extra class name".
------------------------------------------------------------------------- */
/* Barra de stats — fila hx-stats, 4 columnas, Text Block con
+
*/
.hx-stats{ background:var(--hx-ink) !important; padding:0 !important; }
.hx-stats .vc_column_container{ padding:0 !important; }
.hx-stats .vc_column-inner{
padding:1.6rem 1rem !important; text-align:center;
border-right:1px solid rgba(255,255,255,.1);
}
.hx-stats .vc_column_container:last-child .vc_column-inner{ border-right:0; }
.hx-stats h4{
font-size:1.5rem !important; font-weight:800 !important;
color:var(--hx-y) !important; margin:0 !important;
}
.hx-stats p{
font-size:.82rem !important; color:rgba(255,255,255,.6) !important;
margin:.25rem 0 0 !important;
}
/* FAQ — fila hx-faq, Text Blocks con clase hx-q */
.hx-faq{ background:var(--hx-cream) !important; counter-reset:hxq; }
.hx-q{
background:#fff; border-radius:var(--hx-r);
padding:1.3rem 1.3rem 1.3rem 4rem !important;
margin-bottom:1rem !important; position:relative;
}
.hx-q::before{
counter-increment:hxq;
content:counter(hxq, decimal-leading-zero);
position:absolute; top:1.3rem; left:1.3rem;
width:30px; height:30px; border-radius:50%;
background:var(--hx-y); display:grid; place-items:center;
font-weight:800; font-size:.72rem; color:var(--hx-ink);
}
.hx-q h4{
font-size:.98rem !important; font-weight:800 !important;
color:var(--hx-ink) !important; margin:0 0 .35rem !important;
}
.hx-q p{
font-size:.88rem !important; color:var(--hx-body) !important;
line-height:1.5 !important; margin:0 !important;
}
/* Pastilla de acreditación — Text Block hx-pill */
.hx-pill p{
display:inline-block; background:var(--hx-ink); color:var(--hx-y) !important;
font-size:.72rem !important; font-weight:700; letter-spacing:.1em;
text-transform:uppercase; padding:.5rem 1.1rem; border-radius:999px;
margin:0 !important;
}
@media (max-width:1024px){
.hx-stats .vc_column_container{ width:50% !important; }
.hx-stats .vc_column_container:nth-child(2n) .vc_column-inner{ border-right:0; }
}
@media (prefers-reduced-motion:reduce){
.wd-page-content *{ transition:none !important; }
}
/* ============================================================================
HX · Añadido para TESTIMONIOS
Pegar al final de woodmart-child/style.css, después del CSS anterior.
============================================================================ */
/* Fila: hx-revs */
.hx-revs{ padding-block:clamp(3rem,6vw,5rem) !important; }
/* Columna izquierda: hx-quote */
.hx-quote .vc_column-inner{
background:var(--hx-cream-d);
border-radius:18px;
padding:2rem !important;
height:100%;
}
.hx-quote .wpb_text_column::before{
content:"\201C";
font-family:Georgia, serif;
font-size:3.2rem; line-height:.6;
color:var(--hx-y);
display:block; margin-bottom:1rem;
}
.hx-quote blockquote,
.hx-quote .wpb_text_column p:first-of-type{
font-family:'Figtree','Poppins',sans-serif !important;
font-size:1.05rem !important;
font-weight:700 !important;
line-height:1.45 !important;
color:var(--hx-ink) !important;
border:0 !important;
padding:0 !important;
margin:0 !important;
background:none !important;
}
/* Firma */
.hx-quote .hx-who{
display:flex; align-items:center; gap:.8rem; margin-top:1.6rem !important;
}
.hx-quote .hx-who b{
display:block; font-size:.85rem; color:var(--hx-ink);
}
.hx-quote .hx-who span{ font-size:.78rem; color:var(--hx-muted); }
.hx-quote .hx-av{
width:34px; height:34px; border-radius:50%;
background:var(--hx-y); flex:none;
display:inline-grid; place-items:center;
font-weight:800; font-size:.7rem; color:var(--hx-ink);
}
/* Columna derecha: cada reseña es un Text Block con clase hx-rev */
.hx-rev{
padding:1.2rem 0 !important;
border-bottom:1px solid var(--hx-line);
margin:0 !important;
}
.hx-rev:last-of-type{ border-bottom:0; }
.hx-rev .hx-stars{
color:var(--hx-y); font-size:.75rem; letter-spacing:.15em;
display:block;
}
.hx-rev p{
font-size:.9rem !important; color:var(--hx-body) !important;
line-height:1.5 !important; margin:.5rem 0 .6rem !important;
}
.hx-rev .hx-sign{ font-size:.8rem !important; margin:0 !important; }
.hx-rev .hx-sign b{ color:var(--hx-ink); }
.hx-rev .hx-sign span{ color:var(--hx-muted); }
/* Pastilla de puntuación 4,9 ★★★★★ — Text Block hx-score */
.hx-score p{
display:inline-flex; align-items:center; gap:.6rem;
background:var(--hx-cream-d); border-radius:999px;
padding:.6rem 1.3rem;
font-family:'Figtree','Poppins',sans-serif !important;
font-weight:800 !important; font-size:1.1rem !important;
color:var(--hx-ink) !important; margin:0 !important;
}
.hx-score .hx-stars{ color:var(--hx-y); font-size:.8rem; letter-spacing:.1em; }
@media (max-width:1024px){
.hx-quote .vc_column-inner{ margin-bottom:1.5rem; }
}