/* Oculta completamente el widget de Google */
#google_translate_element, .goog-te-banner-frame, .goog-te-gadget-icon {
display: none !important;
}
/* Estilos para el selector oculto */
.goog-te-combo {
opacity: 0;
position: absolute;
width: 1px;
height: 1px;
}
/* Ocultar TODOS los elementos de Google Translate */
.goog-te-banner-frame,
.goog-te-gadget-icon,
.goog-te-combo,
.goog-te-footer,
.skiptranslate {
display: none !important;
}
.goog-tooltip,
.goog-tooltip:hover,
.goog-text-highlight {
background-color: transparent !important;
border: none !important;
box-shadow: none !important;
}
body {
top: 0 !important;
}
/* Estilo para botón activo */
.language-btn.active {
box-shadow: 0 0 0 2px rgba(0, 0, 255, 0.3);
font-weight: bold;
}
/* Dropdown de idiomas: letras negras y centradas */
.dropdown-menu .dropdown-item {
color: black !important;
text-align: center !important;
justify-content: center !important;
display: flex !important;
align-items: center;
width: 100% !important;
padding: 8px 12px !important;
margin: 0 !important;
white-space: nowrap;
}
.dropdown-menu .dropdown-item:hover,
.dropdown-menu .dropdown-item:focus {
color: black !important;
background-color: #f1f1f1 !important;
text-align: center !important;
}
/* Que el menú tenga ancho mínimo y no se desborde */
.dropdown-menu {
min-width: 150px !important;
padding: 6px 0 !important;
text-align: center !important;
overflow: hidden;
}
/* Ocultar top-social solo en móviles */
@media (max-width: 767.98px) {
.top-social > a[aria-label="Facebook"],
.top-social > a[aria-label="TikTok"],
.top-social > a[aria-label="Instagram"],
.top-social > a[aria-label="WhatsApp"],
.top-social > a[aria-label="YouTube"] {
display: none !important;
}
}
/* =========================================================
MODAL PUBLICIDAD FLOTANTE
========================================================= */
.promo-modal-overlay {
position: fixed;
inset: 0;
background: rgba(0,0,0,.75);
backdrop-filter: blur(4px);
z-index: 9999;
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
opacity: 0;
visibility: hidden;
pointer-events: none; /* ✅ clave */
transition: opacity .35s ease, visibility .35s ease;
}
.promo-modal-overlay.show {
opacity: 1;
visibility: visible;
pointer-events: auto; /* ✅ clave */
}
.promo-modal {
position: relative;
width: 100%;
max-width: 700px;
max-height: 85vh;
background: #fff;
border-radius: 18px;
overflow: hidden;
box-shadow: 0 25px 80px rgba(0,0,0,.5);
transform: scale(.9) translateY(20px);
transition: transform .35s ease;
}
.promo-modal-overlay.show .promo-modal {
transform: scale(1) translateY(0);
}
/* Botón cerrar */
.promo-modal-close {
position: absolute;
top: 12px;
right: 12px;
width: 40px;
height: 40px;
border-radius: 50%;
border: none;
background: rgba(0,0,0,.65);
color: #fff;
font-size: 18px;
cursor: pointer;
z-index: 10;
display: flex;
align-items: center;
justify-content: center;
transition: .3s ease;
}
.promo-modal-close:hover {
background: var(--rojo, #e70000);
transform: rotate(90deg) scale(1.1);
}
/* Carrusel */
.promo-carousel {
position: relative;
width: 100%;
aspect-ratio: 16 / 9;
background: #111;
overflow: hidden;
}
.promo-slide {
position: absolute;
inset: 0;
opacity: 0;
visibility: hidden;
transition: opacity .8s ease;
}
.promo-slide.active {
opacity: 1;
visibility: visible;
}
.promo-slide img {
width: 100%;
height: 100%;
object-fit: contain;
display: block;
}
/* Flechas */
.promo-nav {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 42px;
height: 42px;
border-radius: 50%;
border: none;
background: rgba(0,0,0,.55);
color: #fff;
font-size: 16px;
cursor: pointer;
z-index: 8;
display: flex;
align-items: center;
justify-content: center;
transition: .3s ease;
}
.promo-nav:hover {
background: var(--rojo, #e70000);
}
.promo-prev { left: 12px; }
.promo-next { right: 12px; }
/* Dots */
.promo-dots {
position: absolute;
bottom: 14px;
left: 50%;
transform: translateX(-50%);
display: flex;
gap: 8px;
z-index: 8;
}
.promo-dot {
width: 10px;
height: 10px;
border-radius: 50%;
border: none;
background: rgba(255,255,255,.5);
cursor: pointer;
transition: .3s ease;
}
.promo-dot.active {
background: var(--amarillo, #ffd700);
transform: scale(1.3);
}
/* Responsive */
@media (max-width: 576px) {
.promo-modal { max-width: 95%; }
.promo-modal-close { width: 34px; height: 34px; font-size: 15px; }
.promo-nav { width: 36px; height: 36px; }
}
/* =========================================================
PUBLICIDAD - 3 BANNERS EN FILA (rotativos)
========================================================= */
.pub-banners-row {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
margin-top: 50px;
}
.pub-banner-slot {
width: 100%;
height: 200px;
overflow: hidden;
border-radius: 10px;
background: #f8f9fa;
position: relative;
box-shadow: 0 2px 12px rgba(0,0,0,.05);
transition: box-shadow .3s ease;
}
.pub-banner-slot:hover {
box-shadow: 0 8px 25px rgba(0,0,0,.1);
}
.pub-banner-slot img {
width: 100%;
height: 100%;
object-fit: contain;
display: block;
transition: opacity .6s ease, transform .6s ease;
}
.pub-banner-slot.fade-out img {
opacity: 0;
transform: scale(1.03);
}
@media (max-width: 768px) {
.pub-banners-row {
grid-template-columns: repeat(2, 1fr);
gap: 15px;
margin-top: 40px;
}
.pub-banner-slot {
height: 160px;
}
}
@media (max-width: 480px) {
.pub-banners-row {
grid-template-columns: 1fr;
gap: 12px;
margin-top: 30px;
}
.pub-banner-slot {
height: 140px;
}
}