/* === MENÚ PRINCIPAL === */
.sf-menu {
  display: flex;
  justify-content: flex-end;
  list-style: none;
  margin: 0;
  padding: 0;
  background: #fff;
}

.sf-menu li { position: relative; }

.sf-menu a {
  display: block;
  padding: 15px 20px;
  color: var(--color-texto);
  transition: background 0.3s, color 0.3s;
}
.sf-menu li:hover > a,
.sf-menu li:focus-within > a {
  background: var(--color-claro);
  color: var(--color-guinda);
}

/* Submenús */
.sf-menu ul {
  position: absolute;
  top: 100%; left: 0;
  min-width: 180px;
  background: #fff;
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
  display: none;
}
.sf-menu li:hover > ul,
.sf-menu li:focus-within > ul { display: block; }

.sf-menu ul li a {
  padding: 12px 16px;
  color: var(--color-texto);
}
.sf-menu ul li a:hover {
  background: var(--color-guinda);
  color: #fff;
}