/* ==========================================================================
   FOOTER - Estilo Moderno Oscuro con Sistema Fluido
   ========================================================================== */
.tavlo-footer {
  width: 100%;
  background-color: #0A1C2F;
  color: #ffffff;
  font-family: 'Montserrat', sans-serif;
}

.tavlo-footer-main {
  /* Padding fluido */
  padding: var(--space-2xl, clamp(2.5rem, 1.94rem + 2.22vw, 4rem)) var(--carousel-padding, clamp(1rem, 0.5rem + 2vw, 2.5rem));
  background-color: #0A1C2F;
}

.tavlo-footer-container {
  max-width: 1200px;
  margin: 0 auto;
}

.tavlo-footer-content {
  display: flex;
  align-items: flex-start;
  /* Gap fluido */
  gap: var(--space-2xl, clamp(2.5rem, 1.94rem + 2.22vw, 5rem));
  flex-wrap: wrap;
}

.tavlo-footer-logo {
  flex: 0 0 auto;
  margin-bottom: var(--space-md, clamp(1rem, 0.81rem + 0.74vw, 1.5rem));
  display: flex;
  flex-direction: column;
  gap: var(--space-md, clamp(1rem, 0.81rem + 0.74vw, 1.5rem));
}

.tavlo-footer-logo-img {
  /* Altura fluida: 40px → 50px */
  height: clamp(40px, 36px + 0.7vw, 50px);
  width: auto;
  filter: brightness(0) invert(1);
  display: block;
}

.tavlo-footer-nav {
  /* Grid 4 columnas en desktop */
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
  flex: 1;
  width: auto;
}

.tavlo-footer-column {
  min-width: 0;
}

.tavlo-footer-column-title {
  font-family: 'Montserrat', sans-serif;
  /* Tipografía fluida */
  font-size: var(--fs-base, clamp(0.875rem, 0.83rem + 0.19vw, 1rem));
  font-weight: 700;
  color: #ffffff;
  margin: 0 0 var(--space-md, clamp(1rem, 0.81rem + 0.74vw, 1.5rem)) 0;
  letter-spacing: 0.5px;
}

.tavlo-footer-links {
  list-style: none;
  padding: 0;
  margin: 0;
}

.tavlo-footer-links li {
  margin-bottom: var(--space-sm, clamp(0.5rem, 0.41rem + 0.37vw, 0.75rem));
}

.tavlo-footer-links a {
  font-family: 'Montserrat', sans-serif;
  /* Tipografía fluida */
  font-size: var(--fs-sm, clamp(0.8125rem, 0.77rem + 0.19vw, 0.9375rem));
  font-weight: 400;
  color: #e5e5e5;
  text-decoration: none;
  transition: color 0.2s ease;
  display: inline-block;
}

.tavlo-footer-links a:hover {
  color: #ffffff;
}

.tavlo-footer-copyright {
  font-family: 'Montserrat', sans-serif;
  /* Tipografía fluida */
  font-size: var(--fs-xs, clamp(0.75rem, 0.71rem + 0.19vw, 0.875rem));
  font-weight: 400;
  color: #999999;
  margin: 0;
}

/* ==========================================================================
   FOOTER RESPONSIVE - Solo cambios estructurales
   ========================================================================== */

/* Móvil: 3 columnas arriba, Síguenos span full width debajo */
@media (max-width: 639px) {
  .tavlo-footer-content {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .tavlo-footer-logo {
    width: 100%;
    align-items: center;
  }

  .tavlo-footer-nav {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3 columnas en móvil */
    text-align: center;
    gap: 1rem;
    align-items: start;
  }

  .tavlo-footer-column {
    width: 100%;
  }

  /* "Síguenos" (4ta columna) ocupa todo el ancho y va debajo */
  .tavlo-footer-column:nth-child(4) {
    grid-column: 1 / -1; /* Span full width */
    margin-top: 2rem;
    padding-top: 2rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
  }

  /* Reducir espacios en móvil */
  .tavlo-footer-column-title {
    font-size: 0.875rem;
    margin-bottom: 0.75rem;
  }

  .tavlo-footer-links {
    font-size: 0.75rem;
  }

  .tavlo-footer-links li {
    margin-bottom: 0.5rem;
  }

  .tavlo-footer-links a {
    font-size: 0.75rem;
  }

  /* Iconos sociales centrados con más gap */
  .tavlo-footer-social {
    justify-content: center;
    gap: 32px;
  }
}

/* Tablet: 2 columnas de navegación */
@media (min-width: 640px) and (max-width: 1023px) {
  .tavlo-footer-nav {
    grid-template-columns: repeat(2, 1fr);
  }
}