/* ============================================================
TECNOFLUIDOS - Segurança nos pagamentos + header fijo
Se enlaza desde el de todas las páginas:
============================================================ */
/* ============================================================
1) AVISO DE SEGURANÇA EN LA BARRA AZUL SUPERIOR
============================================================ */
.tf-topbar-flex {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 6px 20px;
}
.tf-topbar-flex ul {
margin-bottom: 0;
}
.top-header-area a.tf-seguro {
display: inline-flex;
align-items: center;
color: #ffffff;
font-size: 13px;
line-height: 1.35;
text-decoration: none;
}
.top-header-area a.tf-seguro:hover,
.top-header-area a.tf-seguro:focus,
.top-header-area a.tf-seguro:active {
color: #ffffff;
text-decoration: none;
}
/* El subrayado del hover va solo en el texto, nunca en el candado */
.tf-seguro__txt {
border-bottom: 1px solid transparent;
transition: border-color .2s ease;
}
.top-header-area a.tf-seguro:hover .tf-seguro__txt,
.top-header-area a.tf-seguro:focus .tf-seguro__txt {
border-bottom-color: rgba(255, 255, 255, .8);
}
.tf-seguro__icon {
width: 13px;
height: auto;
flex: 0 0 auto;
display: block;
margin: 0 8px 0 0 !important;
}
.tf-seguro__sep {
opacity: .55;
margin: 0 3px;
}
/* --- Tablet y celular: dos lineas (texto arriba, redes abajo) --- */
@media (max-width: 991px) {
/* el tema fuerza min-width:1230px en los .container del header, lo que
desbordaba y tapaba el menu en pantallas chicas */
header.header-with-topbar .top-header-area .container {
min-width: 0 !important;
max-width: 100% !important;
width: 100%;
}
.tf-topbar-flex {
flex-direction: column;
align-items: center;
justify-content: center;
gap: 7px;
text-align: center;
}
.top-header-area a.tf-seguro {
display: block;
text-align: center;
}
.tf-seguro__icon {
display: inline-block;
vertical-align: -2px;
margin-right: 7px !important;
}
}
@media (max-width: 767px) {
.top-header-area a.tf-seguro { font-size: 12px; }
}
/* Los iconos de redes no vienen iguales en todo el sitio: cambian las
medidas (unas por alto, otras por ancho), el
a veces trae clases
propias con margin y tamano de fuente, y a veces es un
pelado que
hereda 20px de fuente y le suma alto a la barra. Se arma la lista como
flex para que quede identica en todas las paginas. */
.tf-topbar-flex .icon-social-large ul {
display: flex;
align-items: center;
list-style: none;
margin: 0 !important;
padding: 0 !important;
}
.tf-topbar-flex .icon-social-large li {
margin: 0 10px 0 0 !important;
}
.tf-topbar-flex .icon-social-large li:last-child {
margin-right: 0 !important;
}
.tf-topbar-flex .icon-social-large a {
display: block;
line-height: 0;
}
.tf-topbar-flex .icon-social-large img {
display: block;
width: auto !important;
height: 15px !important;
}
/* ============================================================
2) SEGURANÇA NOS PAGAMENTOS EN EL PIE
Se deja como enlace inline (igual que el resto del menú del pie)
para que la línea quede a la misma altura que los demás ítems.
============================================================ */
a.tf-footer-seg {
display: inline !important;
}
.tf-footer-seg__icon {
width: 12px;
height: auto;
display: inline-block !important;
vertical-align: middle !important;
position: static !important;
/* margen fijo: el tema le agrega separación propia a las img del pie */
margin: 0 8px 0 0 !important;
}
/* ============================================================
3) HEADER: la barra azul se va con el scroll y el nav queda fijo
La barra azul del tema viene con position:fixed y z-index 10005,
por eso se superponía al logo en desktop y al header en celular.
Acá pasa al flujo normal, así que se va al scrollear; el script
del final del body le pone .tf-nav-fixed al header cuando la
barra ya salió de pantalla, y ahí el nav se fija arriba.
============================================================ */
header.header-with-topbar .top-header-area {
position: static !important;
width: auto !important;
}
/* En reposo el nav va en el flujo, pero posicionado: el menú
desplegable del tema se ancla a él (si queda estático, en celular
el desplegable se ancla al header y no se ve). */
header.header-with-topbar nav.navbar.bootsnav,
header.header-with-topbar.sticky nav.navbar.bootsnav,
header.header-with-topbar.sticky.header-appear nav.navbar.bootsnav {
position: relative !important;
top: auto !important;
background: #ffffff;
}
/* Al scrollear: solo el logo y el menú quedan fijos arriba */
header.header-with-topbar.tf-nav-fixed nav.navbar.bootsnav,
header.header-with-topbar.tf-nav-fixed.sticky nav.navbar.bootsnav,
header.header-with-topbar.tf-nav-fixed.sticky.header-appear nav.navbar.bootsnav {
position: fixed !important;
top: 0 !important;
left: 0;
right: 0;
width: 100%;
margin-top: 0 !important;
z-index: 1040;
background: #ffffff;
box-shadow: 0 2px 10px rgba(0, 0, 0, .10);
}
/* Ocupa el lugar del nav mientras está fijo, para que no salte la página */
.tf-nav-spacer {
width: 100%;
}
/* ============================================================
4) LOGO TECNOFLUIDOS
============================================================ */
header.header-with-topbar a.logo img {
width: 300px !important;
max-width: 100% !important;
height: auto !important;
/* El tema le pone max-height: 45px. Con 300px de ancho el alto
natural es 51.7px, asi que lo recortaba y deformaba el logo. */
max-height: none !important;
}
/* El tema deja el logo claro con visibility:hidden pero ocupando lugar:
con 300px se comia 300px extra y empujaba el menu a dos lineas. */
header.header-with-topbar a.logo img.logo-light {
display: none !important;
}
@media (max-width: 991px) {
header.header-with-topbar a.logo img { width: 200px !important; }
}
@media (max-width: 575px) {
header.header-with-topbar a.logo img { width: 170px !important; }
}
/* ============================================================
5) MENU EN UNA SOLA LINEA
El tema fija el contenedor del header en 1230px. Con el logo a
300px quedan 900px para el menu, que a 13px y 15px de padding
necesita 965px. Con 12px y 6px de padding ocupa 862px.
============================================================ */
@media (min-width: 992px) {
header.header-with-topbar .nav-header-container > .col-auto {
padding-right: 0 !important;
}
header.header-with-topbar .nav-header-container > .accordion-menu {
padding-left: 0 !important;
padding-right: 0 !important;
}
header.header-with-topbar nav.navbar.bootsnav ul.nav > li > a {
padding-left: 6px !important;
padding-right: 6px !important;
font-size: 12px !important;
white-space: nowrap !important;
}
}
/* ============================================================
6) PAGINAS INTERIORES
El tema compensaba el header flotante con espacio propio:
.top-space margin-top: 103px (institucional, produtos,
obras, novidades, contato, notícias, etc.)
section.mainContent padding-top: 99px (páginas de producto)
Ahora el header ocupa su lugar en el flujo, así que ese espacio
sobra y dejaba una banda blanca debajo del menú.
============================================================ */
.top-space {
margin-top: 0 !important;
}
section.mainContent {
padding-top: 0 !important;
}