/* =========================================================================
   ESTILOS DEL PIE DE PÁGINA (FOOTER-QB - MODO CLARO Y OSCURO ADAPTATIVO)
   ========================================================================= */

/* -------------------------------------------------------------------------
   1. VARIABLES Y CONFIGURACIÓN GLOBAL DEL FOOTER (MODO CLARO POR DEFECTO)
   ------------------------------------------------------------------------- */
:root {
  --footer-text: #1a1a1a;                 /* Define el color del texto oscuro para el modo claro */
  --footer-border: rgba(0, 0, 0, 0.15);     /* Define el color y transparencia de la línea divisoria en modo claro */
}

/* Adaptación automática de variables para el Modo Oscuro cuando la clase está activa en el body */
body.dark-mode,
body.is-dark-mode {
  --footer-text: #ffffff;                 /* Cambia el texto a blanco puro en modo oscuro */
  --footer-border: rgba(255, 255, 255, 0.2);/* Cambia la línea divisoria a un tono claro translúcido */
}

/* Contenedor principal del footer: fuerza ancho completo y anula márgenes por defecto de WordPress */
body .site-footer,
.site-footer {
  width: 100% !important;                  /* Ocupa el 100% del ancho de la pantalla */
  max-width: none !important;              /* Elimina restricciones máximas de ancho del tema */
  margin: 0 !important;                    /* Anula los márgenes exteriores */
  position: relative !important;           /* Establece contexto de posicionamiento para elementos internos */

  background: transparent !important;      /* Vuelve transparente el fondo nativo del tema */
  border: none !important;                 /* Elimina bordes predeterminados */
  border-radius: 0 !important;             /* Quita radios de borde iniciales */
  clip-path: none !important;              /* Evita recortes de formas */
  box-shadow: none !important;             /* Elimina sombras por defecto */
  outline: none !important;                 /* Quita líneas de enfoque */
  
  padding: 8px !important;                 /* Añade un margen de separación perimetral de 8px alrededor de todo el footer */
  box-sizing: border-box;                  /* Incluye el padding dentro del cálculo total del ancho/alto */
  font-size: 0.95rem;                      /* Define el tamaño de fuente base del footer */
  overflow: hidden;                        /* Oculta cualquier contenido que sobresalga de los límites */
}

/* -------------------------------------------------------------------------
   2. PANEL INTERIOR (EFECTO GLASSMORPHISM Y SOPORTE DE MODOS)
   ------------------------------------------------------------------------- */
/* Crea una capa superpuesta dentro del footer para simular un panel flotante */
.site-footer::before {
  content: '';                             /* Obligatorio para que los pseudo-elementos ::before se rendericen */
  position: absolute;                      /* Posiciona el panel de forma absoluta cubriendo el interior */
  inset: 8px;                              /* Deja un margen interior simétrico de 8px respecto al borde exterior */
  
  background-color: rgba(235, 235, 240, 0.88) !important; /* Color de fondo gris claro translúcido para el modo claro */
  backdrop-filter: blur(20px) saturate(180%);   /* Aplica efecto de desenfoque de cristal empañado al fondo de la web */
  -webkit-backdrop-filter: blur(20px) saturate(180%); /* Soporte de desenfoque para navegadores WebKit (Safari/iOS) */
  
  background-size: cover;                  /* Ajusta la imagen de textura (si se usa) para que cubra todo el fondo */
  background-position: center;             /* Centra la textura de fondo */
  background-repeat: no-repeat;            /* Evita que la textura de fondo se repita en mosaico */
  
  z-index: 1;                              /* Coloca esta capa de fondo por debajo del contenido pero dentro del footer */
  pointer-events: none;                    /* Permite hacer clic "a través" de esta capa sin interferir */
  border-radius: 10px;                     /* Redondea las esquinas del panel flotante interior */
}

/* Cambia el color de fondo del panel flotante cuando se activa el modo oscuro */
body.dark-mode .site-footer::before,
body.is-dark-mode .site-footer::before {
  background-color: #222222 !important;    /* Tono gris oscuro sólido idéntico al de tu referencia visual */
}

/* Fuerza a que todo el texto y enlaces dentro del footer utilicen la variable de color correspondiente */
.site-footer,
.site-footer *,
.qb-copyright,
.qb-legal-links a {
  color: var(--footer-text) !important;
}

/* Asegura que los contenedores hijos directos se sitúen visualmente por encima de la capa de fondo */
.site-footer > *,
.qb-footer-container {
  position: relative;
  z-index: 2;                              /* Prioridad visual superior a la capa ::before */
}

/* Contenedor principal que organiza las filas y limita el ancho máximo del contenido interior */
.qb-footer-container {
  width: 100%;                                                    
  max-width: 1500px;                       /* Limita el ancho máximo del contenido para que no se estire demasiado en pantallas gigantes */
  margin: 0 auto;                          /* Centra el contenedor horizontalmente */
  box-sizing: border-box;
  display: flex;                           /* Activa el diseño flexible en columna */
  flex-direction: column;                  
}

.qb-footer-section {
  width: 100%;                                                    
  box-sizing: border-box;
}

/* -------------------------------------------------------------------------
   3. FILA 1: REDES SOCIALES Y ICONOS
   ------------------------------------------------------------------------- */
.qb-footer-socials {
  margin-bottom: 20px !important;          /* Añade separación inferior respecto a la siguiente fila */
}

/* Contenedor flexible que agrupa, distribuye y centra los iconos de redes sociales */
.qb-social-icons-wrapper {
  display: flex;
  flex-wrap: wrap;                         /* Permite que los iconos bajen a la siguiente línea si no caben */
  justify-content: center;                 /* Centra los iconos horizontalmente */
  align-items: center;                     /* Alinea los iconos verticalmente al centro */
  gap: 20px;                               /* Espacio de separación horizontal y vertical entre cada icono */
  width: 100%;
  box-sizing: border-box;
}

/* Controla el tamaño y la transición suave de las imágenes o SVGs de los iconos */
.qb-social-icons-wrapper img,
.qb-social-icons-wrapper svg {
  height: 24px !important;                 /* Fuerza una altura estándar de 24px para mantener uniformidad */
  width: auto;                             /* Calcula el ancho de forma proporcional */
  max-width: 100%;
  box-sizing: border-box;
  transition: opacity 0.2s ease, transform 0.2s ease; /* Transición fluida para efectos de hover */
  filter: brightness(0.9);                 /* Aplica un ligero oscurecimiento para suavizar el brillo de los iconos */
}

/* Efecto cuando pasas el cursor por encima de un icono social */
.qb-social-icons-wrapper a:hover img,
.qb-social-icons-wrapper a:hover svg {
  opacity: 1;                              /* Recupera la opacidad completa al pasar el ratón */
  transform: translateY(-2px);             /* Eleva ligeramente el icono hacia arriba (efecto flotante) */
}

/* Ajuste de tamaño específico para el icono de eBay por sus proporciones alargadas */
.qb-social-icons-wrapper a[href*="ebay"] img,
.qb-social-icons-wrapper a[href*="ebay"] svg,
.qb-social-icons-wrapper .ebay-icon {
  height: 40px !important;                 /* Aumenta la altura del icono de eBay para que visualmente encaje con los demás */
}

/* -------------------------------------------------------------------------
   4. FILA 2: COLUMNAS INTERMEDIAS (ENLACES LEGALES Y DE NAVEGACIÓN)
   ------------------------------------------------------------------------- */
.qb-footer-middle-row {
  display: flex;                           /* Distribuye el espacio entre la izquierda y la derecha */
  justify-content: space-between;          /* Separa los elementos situándolos en los extremos */
  align-items: flex-start;                 /* Alinea el contenido arriba */
  width: 100%;
  margin-bottom: 25px !important;          /* Espacio inferior antes de la línea divisoria */
  box-sizing: border-box;
  gap: 15px;                               
}

/* Columnas simétricas izquierda y derecha que reparten el ancho disponible */
.qb-footer-col-left,
.qb-footer-col-right {
  flex: 1;                                 
  box-sizing: border-box;
}

.qb-footer-col-right {
  display: flex;
  justify-content: flex-end;               /* Empuja el contenido de la columna derecha hacia el borde derecho */
}

/* Lista vertical que contiene los enlaces legales */
.qb-legal-links {
  display: flex;
  flex-direction: column;                  /* Apila los enlaces uno debajo del otro en vertical */
  align-items: flex-end;                   /* Alinea los textos de la lista hacia la derecha */
  gap: 8px;                                /* Espacio vertical de separación entre cada enlace legal */
  list-style: none;                        /* Elimina los puntos o viñetas de la lista HTML */
  margin: 0;
  padding: 0;
}

.qb-legal-links li {
  margin: 0;
  padding: 0;
}

/* Estilos de los enlaces individuales del menú legal */
.qb-legal-links a {
  text-decoration: none;                   /* Quita el subrayado predeterminado de los enlaces */
  font-size: 0.95rem;                      /* Define el tamaño de letra para los enlaces legales */
  opacity: 0.75;                           /* Les da una ligera transparencia translúcida */
  transition: opacity 0.2s ease;           /* Transición suave para el cambio de opacidad al pasar el ratón */
  text-align: right;                       /* Alinea el texto a la derecha */
  white-space: nowrap;                     /* Evita que los textos de los enlaces se dividan en dos líneas */
}

/* Efecto hover al pasar el cursor sobre los enlaces legales */
.qb-legal-links a:hover {
  opacity: 1;                              /* Vuelve el texto completamente opaco y nítido al pasar el ratón */
}

/* -------------------------------------------------------------------------
   5. FILA 3: COPYRIGHT Y AVISOS DE DERECHOS DE AUTOR
   ------------------------------------------------------------------------- */
.qb-footer-bottom {
  width: 100%;                                   
  padding-top: 10px !important;            /* Margen interior superior */
  box-sizing: border-box;
  display: flex;
  flex-direction: column;                  /* Organiza la línea divisoria y el texto en columna */
  align-items: center;                     /* Centra horizontalmente los elementos hijos */
}

/* Dibuja la línea divisoria superior de forma personalizada y centrada */
.qb-footer-bottom::before {
  content: '';                             /* Requerido para renderizar la línea */
  display: block;
  width: 280px;                            /* ANCHO DE LA LÍNEA: Cámbialo aquí si la quieres más larga o más corta */
  max-width: 80%;                          /* Asegura que no desborde en pantallas muy pequeñas de móvil */
  height: 1px;                             /* Grosor de la línea divisoria */
  background-color: var(--footer-border);  /* Utiliza la variable de color sutil adaptativa (claro/oscuro) */
  margin-bottom: 15px;                     /* Distancia de separación entre la línea y el texto de copyright */
}

.qb-copyright-container {
  width: 100%;
  display: flex;
  justify-content: center;                 /* Centra el contenedor de copyright horizontalmente */
  align-items: center;                     
  box-sizing: border-box;
}

/* Texto de copyright inferior */
.qb-copyright {
  width: 100%;
  text-align: center !important;           /* Centra el texto de los derechos de autor */
  font-size: 0.85rem;                      /* Letra un poco más pequeña y discreta para el copyright */
  opacity: 0.7;                            /* Transparencia sutil para integrarse con el diseño */
  margin: 0 !important;
  padding: 0;
}

/* =========================================================================
   ADAPTABILIDAD MÓVIL Y RESPONSIVE (PANTALLAS PEQUEÑAS)
   ========================================================================= */
@media screen and (max-width: 768px) {
  /* Mantenemos los márgenes perimetrales de seguridad del footer en móvil */
  .site-footer {
    padding: 12px !important;
    padding-bottom: calc(20px + env(safe-area-inset-bottom, 0px)) !important;
  }

  .site-footer::before {
    inset: 12px !important;
  }

  /* Añadimos un padding lateral al contenedor interior para que los textos no toquen el borde */
  .qb-footer-container {
    padding-left: 15px !important;
    padding-right: 15px !important;
    box-sizing: border-box !important;
  }

  .qb-footer-middle-row {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-end !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .qb-footer-col-right {
    width: 100% !important;
    display: flex !important;
    justify-content: flex-end !important;
  }

  /* Alineación a la derecha con separación limpia respecto al borde del panel */
  .qb-legal-links {
    align-items: flex-end !important;
    width: 100% !important;
  }

  .qb-legal-links a {
    text-align: right !important;
    font-size: 0.88rem !important;
  }
}