→ prepend "Correo:"
- sin ningún (asumido teléfono) → prepend "Celular:"
El scope aside:has(a[href^="mailto:"]) asegura que solo aplique al
widget que efectivamente tiene correos (el de contactos), no a otros
widgets del footer.
===================================================================== */
#Footer aside:has(a[href^="mailto:"]) p,
#Footer .widget:has(a[href^="mailto:"]) p {
display: grid;
grid-template-columns: 72px 1fr;
gap: var(--jt-space-2);
align-items: baseline;
margin: 0 0 var(--jt-space-2) !important;
}
#Footer aside:has(a[href^="mailto:"]) p:has(> a[href^="mailto:"])::before,
#Footer .widget:has(a[href^="mailto:"]) p:has(> a[href^="mailto:"])::before {
content: "Correo:";
font-family: var(--jt-font-display);
font-size: var(--jt-fs-caption);
font-weight: var(--jt-fw-bold);
color: var(--jt-color-primary);
text-transform: uppercase;
letter-spacing: 0.04em;
}
#Footer aside:has(a[href^="mailto:"]) p:not(:has(a))::before,
#Footer .widget:has(a[href^="mailto:"]) p:not(:has(a))::before {
content: "Celular:";
font-family: var(--jt-font-display);
font-size: var(--jt-fs-caption);
font-weight: var(--jt-fw-bold);
color: var(--jt-color-primary);
text-transform: uppercase;
letter-spacing: 0.04em;
}
/* Mobile: apilar label sobre el valor si no cabe */
@media (max-width: 480px) {
#Footer aside:has(a[href^="mailto:"]) p,
#Footer .widget:has(a[href^="mailto:"]) p {
grid-template-columns: 1fr;
gap: 0;
}
}
/* =====================================================================
Footer responsive · N cols desktop → 2 cols tablet → 1 col mobile.
Cubre las 2 estructuras de BeTheme:
A) Widgets clásicos: #Footer .widgets_wrapper > .column.one-fifth
B) mfn_builder (page-builder): #Footer .mcb-section .mcb-wrap.one-fifth
===================================================================== */
@media (max-width: 1024px) {
/* -------- Contenedores: ancho total, grid 2 cols -------- */
html body #Footer .widgets_wrapper,
html body #Footer .mcb-section,
html body #Footer .mcb-row,
html body #Footer .footer_widgets,
html body #Footer .footer-widgets {
display: grid !important;
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
grid-auto-flow: row !important;
gap: var(--jt-space-5) var(--jt-space-4) !important;
float: none !important;
width: 100% !important;
max-width: 100% !important;
padding-left: var(--jt-space-4) !important;
padding-right: var(--jt-space-4) !important;
box-sizing: border-box !important;
}
/* -------- Children (columnas): 100% de su cell, no float -------- */
html body #Footer .widgets_wrapper > *,
html body #Footer .mcb-section > *,
html body #Footer .mcb-row > *,
html body #Footer .footer_widgets > *,
html body #Footer .footer-widgets > * {
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
margin: 0 !important;
padding: 0 !important;
float: none !important;
clear: none !important;
box-sizing: border-box !important;
flex: unset !important;
grid-column: auto !important;
}
/* Cubrir todas las variantes de clases de ancho de BeTheme, tanto en
.column como en .mcb-wrap (mfn_builder), tanto en el axis desktop
(.one-X) como en el axis tablet (.tablet-one-X) */
html body #Footer .column.one-sixth,
html body #Footer .column.one-fifth,
html body #Footer .column.one-fourth,
html body #Footer .column.one-third,
html body #Footer .column.one-second,
html body #Footer .column.two-fifth,
html body #Footer .column.two-third,
html body #Footer .column.three-fifth,
html body #Footer .column.three-fourth,
html body #Footer .column.four-fifth,
html body #Footer .column.five-sixth,
html body #Footer .column[class*="tablet-"],
html body #Footer .mcb-wrap.one-sixth,
html body #Footer .mcb-wrap.one-fifth,
html body #Footer .mcb-wrap.one-fourth,
html body #Footer .mcb-wrap.one-third,
html body #Footer .mcb-wrap.one-second,
html body #Footer .mcb-wrap.two-fifth,
html body #Footer .mcb-wrap.two-third,
html body #Footer .mcb-wrap.three-fifth,
html body #Footer .mcb-wrap.three-fourth,
html body #Footer .mcb-wrap.four-fifth,
html body #Footer .mcb-wrap.five-sixth,
html body #Footer .mcb-wrap[class*="tablet-"] {
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
margin: 0 !important;
float: none !important;
clear: none !important;
box-sizing: border-box !important;
display: block !important;
grid-column: auto !important;
}
/* Wrappers internos */
html body #Footer .mcb-column-inner,
html body #Footer .mcb-wrap-inner {
width: 100% !important;
padding: 0 !important;
margin: 0 !important;
}
/* Word-wrap en widgets para que "SERVICIO AL CLIENTE" no se rompa a la
mitad — respeta espacios y quiebra al final de palabras */
html body #Footer .widget,
html body #Footer aside,
html body #Footer .mcb-column-inner > * {
word-wrap: break-word !important;
overflow-wrap: break-word !important;
hyphens: none !important;
}
html body #Footer .widget h3,
html body #Footer .widget h4,
html body #Footer .widget .widget-title,
html body #Footer .widget-title,
html body #Footer h3.widget-title,
html body #Footer h4.widget-title {
word-wrap: normal !important;
overflow-wrap: normal !important;
white-space: normal !important;
}
}
@media (max-width: 600px) {
html body #Footer .widgets_wrapper,
html body #Footer .mcb-section,
html body #Footer .mcb-row,
html body #Footer .footer_widgets,
html body #Footer .footer-widgets {
grid-template-columns: 1fr !important;
gap: var(--jt-space-5) !important;
}
}
/* =====================================================================
Redes sociales · bloque .jt-socials inyectado por JT_Footer.
Íconos circulares con borde blanco tenue sobre fondo oscuro del footer,
estilo del mock del cliente (Facebook · Instagram · TikTok · YouTube).
===================================================================== */
html body #Footer .jt-socials {
display: flex;
align-items: center;
gap: var(--jt-space-3);
margin-top: var(--jt-space-4);
padding-top: var(--jt-space-3);
}
html body #Footer .jt-socials__link {
display: inline-flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
border-radius: 50%;
color: #ffffff;
background: transparent;
border: 1.5px solid rgba(255, 255, 255, 0.4);
transition: background var(--jt-transition-fast),
border-color var(--jt-transition-fast),
color var(--jt-transition-fast),
transform var(--jt-transition-fast);
text-decoration: none !important;
}
html body #Footer .jt-socials__link:hover,
html body #Footer .jt-socials__link:focus-visible {
background: var(--jt-color-primary);
border-color: var(--jt-color-primary);
color: #ffffff;
transform: translateY(-2px);
outline: none;
}
html body #Footer .jt-socials__link svg {
width: 18px;
height: 18px;
display: block;
}
/* =====================================================================
Variante compacta para el topbar verde ("Síguenos en las redes!").
Iconos más chicos (26px) y sin borde, para que quepan en la barra
angosta sin desalinear el mensaje.
Aplica sin importar el parent — .jt-socials--topbar es la clave única.
===================================================================== */
html body .jt-socials--topbar,
html body .jt-socials.jt-socials--topbar {
display: inline-flex !important;
align-items: center !important;
gap: 10px !important;
margin: 0 0 0 var(--jt-space-4) !important;
padding: 0 !important;
vertical-align: middle !important;
/* Anula los estilos de "footer variant" en caso de re-uso */
margin-top: 0 !important;
padding-top: 0 !important;
/* Garantías de visibilidad — algún parent con overflow/opacity/etc
no puede seguir tapando los icons */
visibility: visible !important;
opacity: 1 !important;
position: relative !important;
z-index: 10 !important;
overflow: visible !important;
height: auto !important;
width: auto !important;
max-width: none !important;
clip: auto !important;
}
html body .jt-socials--topbar .jt-socials__link {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
width: 26px !important;
height: 26px !important;
border: none !important;
background: transparent !important;
color: #ffffff !important;
border-radius: 50% !important;
visibility: visible !important;
opacity: 1 !important;
text-decoration: none !important;
}
html body .jt-socials--topbar .jt-socials__link:hover,
html body .jt-socials--topbar .jt-socials__link:focus-visible {
background: rgba(255, 255, 255, 0.18) !important;
color: #ffffff !important;
transform: translateY(-1px);
}
html body .jt-socials--topbar .jt-socials__link svg {
width: 14px !important;
height: 14px !important;
display: block !important;
fill: currentColor !important;
visibility: visible !important;
opacity: 1 !important;
}
/* Ocultar SOLO widgets sociales duplicados de BeTheme/Elementor
(no las nuestras .jt-socials — el :not() las protege). */
html body .mfn-header-social,
html body .mfn-share,
html body .elementor-widget-social-icons:not(.jt-socials *),
html body .elementor-social-icons-wrapper:not(.jt-socials *) {
display: none !important;
}
/* Kill defensivo · links directos a redes que estén FUERA de .jt-socials
en el header (no en el topbar — ahí ahora SÍ mostramos las nuestras) */
html body #Header a[href*="facebook.com"]:not(.jt-socials__link),
html body #Header a[href*="instagram.com"]:not(.jt-socials__link),
html body #Header a[href*="tiktok.com"]:not(.jt-socials__link),
html body #Header a[href*="youtube.com"]:not(.jt-socials__link) {
display: none !important;
}