footer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: var(--altura-footer);
  background-color: var(--color-fondo-footer);
  border-top: 1px solid var(--color-borde);
  box-shadow: 0 -0.125rem 0.5rem var(--color-sombra);
  z-index: var(--z-footer);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 var(--espacio-md);
  transition: all var(--transicion-normal);
  font-size: var(--tamaño-texto-sm);
  font-weight: var(--peso-medio);
  color: var(--color-texto-secundario);
  text-align: center;
  backdrop-filter: blur(10px);
}

footer::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 4rem;
  height: 0.125rem;
  background: linear-gradient(90deg, 
    transparent, 
    var(--color-acento), 
    transparent);
  opacity: 0.5;
}

@media (min-width: 481px) {
  :root {
    --altura-header: 4rem;
    --altura-footer: 4.5rem;
  }

  footer {
    font-size: var(--tamaño-texto-base);
    padding: 0 var(--espacio-xl);
  }

  footer::before {
    width: 5rem;
  }
}

@media (min-width: 769px) {
  footer {
    padding: 0 var(--espacio-2xl);
  }

  footer::before {
    width: 6rem;
  }
}

@media (min-width: 1024px) {
  :root {
    --altura-footer: 5rem;
  }

  footer {
    font-size: var(--tamaño-texto-lg);
  }

  footer::before {
    width: 8rem;
    height: 0.15rem;
  }
}

@media (min-width: 1440px) {
  footer {
    padding: 0 4rem;
  }
}