:root {
  --footer-bg: #1A1617;    
  --footer-fg: #F8CB74;   
  --footer-fg-accent: #ffffff;
  --footer-link: #F8CB74;
  --footer-link-hover: #ffffff;
  --footer-sep: rgba(248, 203, 116, 0.35);
}

/* Base strip */
#footer-strip {
  width: 100%;
  background-color: var(--footer-bg);
  color: var(--footer-fg);
  font-family: "DM Sans", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-size: 14.5px;
  line-height: 1.4;
  letter-spacing: 0.2px;
  border-top: 1px solid var(--footer-sep);
  min-height: 7vh;

  display: flex;
  align-items: center;      /* centra verticalmente el texto dentro del strip */
  justify-content: center;  /* centra horizontalmente */
  text-align: center;       /* alinea el texto dentro de las líneas */
}

#footer-strip .footer-inner {
  max-width: 1100px;           
  margin: 0 auto;
  padding: 22px 20px;       
  display: flex;
  align-items: center;
  justify-content: center;  
  gap: 18px;
  flex-wrap: wrap;             
  text-align: center;
}

/* Social group */
.footer-social {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

/* Single item inside social group */
.footer-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}

/* Icons */
#footer-strip i {
  font-size: 16px;
}

/* Links */
#footer-strip a {
  color: var(--footer-link);
  text-decoration: none;
  font-weight: 700;
  transition: color 160ms ease-in-out, outline-color 160ms ease-in-out;
  outline: none;
}
#footer-strip a:hover {
  color: var(--footer-link-hover);
}
#footer-strip a:focus-visible {
  outline: 3px solid var(--footer-link);
  outline-offset: 3px;
}

/* Separator dot/bullet */
.footer-sep {
  opacity: 0.7;
  user-select: none;
}

/* Legal text */
.footer-legal {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}

/* Make it extra compact on very small screens */
@media (max-width: 420px) {
  #footer-strip .footer-inner {
    gap: 8px;
    padding: 10px 12px;
  }
  .footer-item { gap: 6px; }
  #footer-strip i { font-size: 15px; }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  #footer-strip a {
    transition: none;
  }
}